/* © 2026 IG Tools — All rights reserved. Unauthorized copying or redistribution is prohibited. */
/* Design tokens — see AGENTS.md §10. Light is primary, dark adapts from it.
   Colour is a chip, not a surface; depth comes from light, not from a lighter grey. */
:root{
  --g1:#8A3FFC;--g2:#FF4D8D;--g3:#FF9A3D;
  --accent:#007AFF;                       /* one interactive accent, iOS system blue */
  --logo:#30B0C7;                         /* this tool's identity colour — same as its home-page card */
  --radius:15px;
  --r-card:20px;--r-tile:14px;--r-control:11px;--r-pill:999px;
  --spring:cubic-bezier(.32,.72,0,1);
  --dur:.42s;--dur-fast:.26s;--dur-press:.1s;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",Roboto,sans-serif;
}
:root,[data-theme="light"]{
  --bg:#F5F5F7;--panel:#FFFFFF;--panel-2:#FFFFFF;
  --chrome:rgba(255,255,255,.72);--chrome-solid:#FBFBFD;
  --text:#1D1D1F;--muted:#6E6E73;--muted-2:#8E8E93;
  --line:rgba(0,0,0,.08);
  --fill:rgba(120,120,128,.12);--fill-hi:rgba(120,120,128,.2);
  --ok:#34C759;--warn:#B25E00;--warn-bg:#FFF4E0;--warn-line:rgba(178,94,0,.22);
  --info:#0A6E63;--info-bg:#E7F7F4;--info-line:rgba(10,110,99,.22);
  --err:#D70015;
  --check-a:#EDEDF0;--check-b:#E3E3E8;
  --sh:0 1px 2px rgba(0,0,0,.04), 0 6px 16px -6px rgba(0,0,0,.10);
  --sh-hi:0 2px 4px rgba(0,0,0,.05), 0 18px 34px -12px rgba(0,0,0,.18);
  --sh-modal:0 24px 70px -12px rgba(0,0,0,.28);
}
[data-theme="dark"]{
  --bg:#000000;--panel:#1C1C1E;--panel-2:#242426;
  --chrome:rgba(28,28,30,.68);--chrome-solid:#141416;
  --text:#F5F5F7;--muted:rgba(235,235,245,.62);--muted-2:rgba(235,235,245,.4);
  --line:rgba(255,255,255,.11);
  --fill:rgba(120,120,128,.24);--fill-hi:rgba(120,120,128,.36);
  --ok:#30D158;--warn:#FFD08A;--warn-bg:#2E2210;--warn-line:rgba(255,208,138,.24);
  --info:#A9E6DC;--info-bg:#11251F;--info-line:rgba(169,230,220,.22);
  --err:#FF6961;
  --check-a:#212127;--check-b:#191920;
  --sh:0 1px 2px rgba(0,0,0,.5);
  --sh-hi:0 2px 6px rgba(0,0,0,.6), 0 18px 34px -14px rgba(0,0,0,.8);
  --sh-modal:0 24px 70px rgba(0,0,0,.7);
}
*{box-sizing:border-box}
html,body{overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;padding:26px 18px 60px;
  -webkit-font-smoothing:antialiased;font-optical-sizing:auto;
  transition:background .5s var(--spring),color .5s var(--spring)}
.wrap{max-width:940px;margin:0 auto}
@media(min-width:1080px){ .wrap{max-width:1160px} }

/* ---- header ---- */
header{margin-bottom:22px}
.topbar{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap}
.logo{width:42px;height:42px;flex-shrink:0;border-radius:var(--r-tile);background:var(--logo);
  display:flex;align-items:center;justify-content:center;transition:transform var(--dur-press) ease-out}
.logo:active{transform:scale(.92)}
.logo svg{width:24px;height:24px;display:block}
.wordmark{font-size:1.75rem;font-weight:600;letter-spacing:-.02em;line-height:1.15;margin:0;color:var(--text)}
.wordmark .g{color:var(--logo)}
.badge{font-family:var(--mono);font-size:11px;color:var(--muted);background:var(--fill);border-radius:var(--r-pill);padding:4px 10px;letter-spacing:.03em;align-self:center}
.langseg{margin-left:auto;flex-shrink:0;display:flex;background:var(--fill);border-radius:var(--r-control);padding:2px;gap:2px}
.langseg button{background:none;border:none;color:var(--muted);font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.02em;padding:6px 10px;border-radius:.5rem;cursor:pointer;
  transition:background var(--dur-fast) var(--spring),color var(--dur-fast) var(--spring),transform var(--dur-press) ease-out}
.langseg button:active{transform:scale(.94)}
.langseg button.on{background:var(--panel);color:var(--text);box-shadow:var(--sh)}
#langseg{display:none!important}
@media(max-width:430px){.wordmark{font-size:23px}.badge{display:none}}
.sub{color:var(--muted);font-size:14px;margin:11px 0 0;line-height:1.5}

/* ---- shared control atoms ---- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:16px;box-shadow:var(--sh)}
.ctrl{margin-bottom:15px}
.ctrl:last-child{margin-bottom:0}
.ctrl>label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
/* Ported verbatim from Collage Maker (image-stacker) so every tool shares one dropdown. */
.sel{appearance:none;-webkit-appearance:none;background:var(--bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%239695A2' stroke-width='2' stroke-linecap='round'/></svg>") no-repeat right 11px center;border:1px solid var(--line);color:var(--text);font-family:var(--sans);font-size:14px;font-weight:600;padding:10px 32px 10px 12px;border-radius:10px;cursor:pointer;min-width:150px;max-width:100%;transition:.12s}
.sel:hover{border-color:var(--muted-2)}
.sel:focus{outline:none;border-color:var(--accent)}
.seg{display:flex;gap:4px;background:var(--fill);border-radius:var(--r-control);padding:2px;flex-wrap:wrap}
.seg button{flex:1;min-width:64px;background:none;border:none;color:var(--muted);font-size:13px;font-weight:500;letter-spacing:-.005em;padding:9px 6px;border-radius:.5625rem;cursor:pointer;
  transition:background var(--dur-fast) var(--spring),color var(--dur-fast) var(--spring),transform var(--dur-press) ease-out}
.seg button:active{transform:scale(.96)}
.seg button.on{background:var(--panel);color:var(--text);font-weight:590;box-shadow:var(--sh)}
.slider{width:100%;accent-color:var(--accent)}
.row{display:flex;align-items:center;gap:10px}
.val{font-size:12px;color:var(--muted);min-width:44px;text-align:right}
.btn-ghost{background:var(--panel);border:1px solid var(--line);color:var(--text);font-size:13px;font-weight:500;padding:9px 14px;border-radius:var(--r-control);cursor:pointer;box-shadow:var(--sh);
  transition:border-color var(--dur-fast) var(--spring),background var(--dur-fast) var(--spring),transform var(--dur-press) ease-out}
.btn-ghost:active{transform:scale(.96)}
.btn-ghost:hover{border-color:var(--accent)}
.btn-ghost.on{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent);font-weight:590;border-color:transparent}
@media(max-width:600px){ .seg button{min-height:40px} }

/* ---- layout: size bar + two columns ---- */
.topbar2{display:flex;margin-top:18px;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--sh)}
.topbar2 .seg{flex:1;flex-wrap:nowrap;overflow-x:auto}
.topbar2 .sel{flex:0 1 auto;margin-right:auto}
.topbar2 .mini-lbl{flex:0 0 auto}
.topbar2 .btn-ghost{flex-shrink:0;white-space:nowrap}
.work{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start;margin-top:16px}
.editcol{grid-column:1;grid-row:1;min-width:0}
.footcol{grid-column:1;grid-row:2;min-width:0}
.work>.panel{grid-column:2;grid-row:1 / span 2}
@media(max-width:900px){ .work{grid-template-columns:1fr}
  .work>.editcol,.work>.panel,.work>.footcol{grid-column:1;grid-row:auto}
  /* Mobile order (owner rule): preview → settings panel → colour grade → download. */
  .work>.editcol{order:1} .work>.panel{order:2} .work>.footcol{order:3} }

/* ---- family tabs + template strip ---- */
.famtabs{display:flex;gap:4px;background:var(--fill);border-radius:var(--r-control);padding:2px;flex-wrap:wrap;margin-bottom:12px}
.famtab{flex:1;min-width:70px;background:none;border:none;color:var(--muted);font-family:var(--sans);font-size:13px;font-weight:500;padding:9px 8px;border-radius:.5625rem;cursor:pointer;
  transition:background var(--dur-fast) var(--spring),color var(--dur-fast) var(--spring),transform var(--dur-press) ease-out}
.famtab:active{transform:scale(.96)}
.famtab.on{background:var(--panel);color:var(--text);font-weight:590;box-shadow:var(--sh)}
@media(max-width:600px){ .famtab{min-height:40px} }
/* ---- template strip ---- */
.tplstrip{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 6px}
.tplcard{flex:0 0 auto;background:none;border:2px solid transparent;border-radius:12px;padding:4px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  transition:border-color var(--dur-fast) var(--spring),transform var(--dur-press) ease-out}
.tplcard:active{transform:scale(.96)}
.tplcard.on{border-color:var(--accent)}
.tplcard canvas{width:90px;height:160px;border-radius:8px;display:block;box-shadow:var(--sh)}
.tplcard span{font-size:11.5px;color:var(--muted);max-width:98px;text-align:center;line-height:1.25}
.tplcard.on span{color:var(--text);font-weight:590}

/* ---- palette chips ---- */
.palstrip{display:flex;gap:9px;flex-wrap:wrap}
.palchip{width:44px;height:34px;border:2px solid var(--line);border-radius:10px;cursor:pointer;padding:0;
  transition:border-color var(--dur-fast) var(--spring),transform var(--dur-press) ease-out}
.palchip:active{transform:scale(.94)}
.palchip.on{border-color:var(--accent)}

/* ---- photo tray (the multi-photo effects have no box to tap on the canvas) ---- */
.tray{display:flex;gap:8px;flex-wrap:wrap}
.trayslot{position:relative;width:56px;height:56px;padding:0;border-radius:11px;overflow:hidden;cursor:pointer;
  background:var(--fill);border:1.5px dashed var(--line);color:var(--muted);font-size:20px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:border-color var(--dur-fast) var(--spring),transform var(--dur-press) ease-out}
.trayslot:active{transform:scale(.94)}
.trayslot:hover{border-color:var(--accent)}
.trayslot.on{border-style:solid;border-color:var(--accent)}
.trayslot canvas{width:56px;height:56px;display:block}
.trayslot i{position:absolute;left:4px;bottom:3px;font-style:normal;font-size:10px;font-weight:700;
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.85);letter-spacing:.02em}

/* ---- text fields + typeface picker ---- */
.tfield{margin-bottom:12px}
.tfield label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--muted);margin-bottom:5px}
.fontbtn{background:none;border:1px solid var(--line);color:var(--muted);font-family:var(--sans);font-size:11px;font-weight:600;
  padding:3px 8px;border-radius:7px;cursor:pointer;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:border-color var(--dur-fast) var(--spring),color var(--dur-fast) var(--spring)}
.fontbtn:hover{border-color:var(--accent);color:var(--text)}
.fontbtn.on{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent);border-color:transparent}
.fontstrip{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;max-height:190px;overflow-y:auto;
  padding:8px;background:var(--fill);border-radius:var(--r-control)}
.fontchip{background:var(--panel);border:1px solid var(--line);color:var(--text);font-size:14px;line-height:1.15;
  padding:7px 10px;border-radius:9px;cursor:pointer;white-space:nowrap;
  transition:border-color var(--dur-fast) var(--spring),transform var(--dur-press) ease-out}
.fontchip:active{transform:scale(.95)}
.fontchip.on{border-color:var(--accent);box-shadow:var(--sh)}
.fontchip.reset{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted);width:100%;text-align:left}
.tinput{width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-control);
  color:var(--text);font-family:var(--sans);font-size:14px;padding:10px 12px}
.tinput:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}

/* ---- preview button row (same atoms as the other tools) ---- */
.pvzoom{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:9px 14px;margin-top:14px;box-shadow:var(--sh)}
.mini-lbl{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}
.pv-btn{flex:0 0 auto;padding:8px 12px;font-size:12.5px;white-space:nowrap}

/* ---- crop stage — same UI as Image Splitter / Motion Blur: the photo, dimmed outside a white
   frame you drag, zoomed with the floating ＋/－ cluster, a two-finger pinch or the trackpad.
   Here the frame's aspect is the SELECTED photo slot's aspect. ---- */
.cropwrap{margin-top:0}
.cropwrap .tip{display:flex;align-items:center;gap:8px;justify-content:center;margin-bottom:11px;font-size:13px;color:var(--muted)}
.cropwrap .cshell{position:relative;background:repeating-conic-gradient(var(--check-a) 0% 25%,var(--check-b) 0% 50%) 50%/22px 22px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;justify-content:center;align-items:center;padding:14px;min-height:220px;touch-action:none}
.cropwrap .frame{position:relative;display:inline-block;line-height:0;max-width:100%}
.cropwrap .frame.draggable{cursor:grab}
.cropwrap .frame.dragging{cursor:grabbing}
.cropwrap .frame img{max-width:100%;max-height:70vh;display:block;border-radius:3px}
.cropwrap .ov{position:absolute;inset:0;pointer-events:none}
.cropwrap .dim{position:absolute;background:rgba(20,20,23,.68)}
.cropwrap .crop{position:absolute;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.4),0 6px 24px rgba(0,0,0,.4);pointer-events:auto;cursor:grab;touch-action:none}
.cropwrap .crop.locked{cursor:default;touch-action:auto}
.cropwrap .movehint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.5);color:#fff;font-size:12px;font-weight:600;padding:6px 12px;border-radius:20px;pointer-events:none;opacity:.9}
.cropbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.cropbar .cmeta{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--muted)}
@media(max-width:600px){ .cropwrap .frame img{max-height:56vh} .cropbar .cmeta{margin-left:0;width:100%} }

/* ---- stage ---- */
.shellwrap{position:relative;margin-top:14px}
.shellwrap .stage{margin-top:0}
.stage{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:10px;min-height:220px;
  display:flex;align-items:center;justify-content:center;overflow:auto;touch-action:none;box-shadow:var(--sh)}
.stage canvas{max-width:100%;max-height:74vh;width:auto;height:auto;border-radius:8px;display:block;touch-action:none;cursor:pointer}
.stagefoot{margin-top:16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--sh)}
.dl{width:100%;margin-top:16px;background:var(--accent);color:#fff;border:none;font-size:15px;font-weight:590;letter-spacing:-.01em;padding:15px;border-radius:var(--r-control);cursor:pointer;
  transition:filter var(--dur-fast) var(--spring),transform var(--dur-press) ease-out}
.dl:active{transform:scale(.985)}
.dl:hover{filter:brightness(1.06)}
.note{margin-top:12px;color:var(--muted);font-size:12px;line-height:1.5;display:flex;gap:7px}

/* ---- working overlay ---- */
.spinner{width:36px;height:36px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#procModal{position:fixed;inset:0;z-index:600;overscroll-behavior:contain;background:rgba(0,0,0,.78);display:none;align-items:center;justify-content:center;padding:20px}
#procModal.on{display:flex}
#procModal .modal-box{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;max-width:280px;width:100%;text-align:center}
#procModal .modal-title{font-size:16px;font-weight:750}
#procModal .modal-sub{font-size:12px;color:var(--muted);margin-top:6px}

/* ---- SEO block ---- */
.seo{content-visibility:auto;contain-intrinsic-size:1px 1200px;max-width:940px;margin:46px auto 0;padding:30px 18px 0;border-top:1px solid var(--line);color:var(--muted);font-size:15px;line-height:1.7;letter-spacing:-.003em}
.seo h2{font-size:22px;font-weight:750;margin:0 0 12px;color:var(--text)}
.seo h3{font-size:17px;font-weight:700;margin:26px 0 10px;color:var(--text)}
.seo p{margin:0 0 12px}
.seo ul,.seo ol{margin:0 0 12px;padding-left:22px}
.seo li{margin:6px 0}
.seo .q{font-weight:650;color:var(--text);margin-bottom:4px}
.seo a{color:var(--accent)}
.related a{color:var(--accent);text-decoration:none}
.related [data-lang="en"]{display:none}
html[lang="en"] .related [data-lang="tr"]{display:none}
html[lang="en"] .related [data-lang="en"]{display:inline}
.related a:hover{text-decoration:underline}

:where(button,input,select,a,.logo):focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.15s !important;transition-timing-function:ease !important}
  .btn-ghost:active,.seg button:active,.tplcard:active,.palchip:active,.dl:active{transform:none}
}
@media (prefers-reduced-transparency:reduce){
  #procModal{background:rgba(0,0,0,.9)}
}
@media (prefers-contrast:more){
  :root,[data-theme="light"]{--muted:#3A3A3C;--line:rgba(0,0,0,.28)}
  [data-theme="dark"]{--muted:rgba(235,235,245,.86);--line:rgba(255,255,255,.34)}
}