/* © 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;
  --grad:linear-gradient(120deg,var(--g1),var(--g2) 55%,var(--g3));
  --accent:#007AFF;                       /* one interactive accent, iOS system blue */
  --logo:#007AFF;                         /* 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;
  /* One motion curve everywhere: critically damped spring, response ~0.4s */
  --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;      /* transparency checkerboard */
  --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}
/* Every other tool widens its wrap at desktop width; this one was missed. */
@media(min-width:1080px){ .wrap{max-width:1160px} }

/* ---- header (same skeleton as the other tools) ---- */
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}
/* One solid accent word, not the old rainbow gradient split — the highlighted
   word now uses the exact colour of the icon tile beside it, so logo and
   wordmark read as one mark instead of two competing colour systems.
   Tracking eases up from the home hero's -.032em: this sits at 28px, not 64px,
   and tighter tracking reads as cramped rather than tight at this size. */
.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)}
@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}

/* ---- add photo (drop) ---- */
.drop{display:block;margin-top:20px;border:1.5px dashed var(--line);border-radius:var(--r-card);background:var(--panel);padding:40px 24px;text-align:center;cursor:pointer;position:relative;box-shadow:var(--sh);
  transition:border-color var(--dur) var(--spring),box-shadow var(--dur) var(--spring),transform var(--dur) var(--spring)}
.drop:hover{border-color:var(--accent);box-shadow:var(--sh-hi);transform:translateY(-2px)}
.drop:active{transform:scale(.995);box-shadow:var(--sh);transition-duration:var(--dur-press);transition-timing-function:ease-out}
.drop .big{font-size:16px;font-weight:650}
.drop .small{color:var(--muted);font-size:13px;margin-top:6px}
.drop .icon{font-size:32px;margin-bottom:10px;color:var(--accent)}
.pill{display:inline-block;margin-top:16px;background:var(--accent);color:#fff;font-size:15px;font-weight:590;letter-spacing:-.01em;padding:12px 26px;border-radius:var(--r-control)}

/* ---- controls panel (top) ---- */
.panel{margin-top:20px;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)}
/* The selected option is a raised neutral thumb, not a painted surface. */
.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}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.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);color:var(--text)}
@media(max-width:600px){ .seg button{min-height:40px} }

/* ---- trail-colour swatches ---- */
.ctrl>label.pal-label{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pal-reset{background:none;border:1px solid var(--line);color:var(--muted);font-family:var(--sans);font-size:11px;font-weight:700;padding:4px 9px;border-radius:7px;cursor:pointer;text-transform:none;letter-spacing:0}
.pal-reset:hover{color:var(--text);border-color:var(--accent)}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.sw-item{position:relative;flex:0 0 calc(16.66% - 9px)}
.sw{display:block;width:100%;height:38px;border:1px solid var(--line);border-radius:10px}
.sw-x{position:absolute;top:-7px;right:-7px;width:18px;height:18px;line-height:1;padding:0;border:none;border-radius:50%;background:rgba(28,28,30,.75);color:#fff;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.sw-x:hover{background:var(--err)}
.pal-empty{color:var(--muted);font-size:12px;padding:6px 2px}
.chk{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:650;color:var(--muted);cursor:pointer;-webkit-user-select:none;user-select:none}
.chk input{width:15px;height:15px;accent-color:var(--accent);cursor:pointer;margin:0}
.chk:has(input:checked){color:var(--text)}
.slider:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:600px){ .sw-item{flex:0 0 calc(25% - 8px)} }

/* ---- inspect zoom + preview ---- */
.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:16px}
.mini-lbl{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}
.pvzoom .slider{flex:1 1 120px;min-width:110px}
.pv-btn{flex:0 0 auto;padding:8px 12px;font-size:12.5px;white-space:nowrap}
.stage{margin-top:16px;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}
.stage canvas{max-width:calc(100% * var(--vz,1));max-height:calc(78vh * var(--vz,1));width:auto;height:auto;border-radius:8px;display:block;touch-action:none;cursor:crosshair}
.empty{color:var(--muted);font-size:13px;padding:40px 10px;text-align:center}

/* ---- crop stage — same UI as Image Splitter: the photo, dimmed outside a white frame you drag,
   zoomed with the floating ＋/－ cluster, a two-finger pinch or the trackpad. ---- */
.cropwrap{margin-top:16px}
.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%} }

/* ---- colour grade + frame card (under the image, like the other tools) ---- */
.stagefoot{margin-top:16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.stagefoot .frame-ctrl{margin-top:14px;margin-bottom:0}

 /* The primary action on the page: one solid accent. */
.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}

/* Blocking "working…" overlay — same pattern as the other tools. */
.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}

/* langseg hidden (the home shell drives the language). Only the drop zone shows until a photo is loaded;
   body.ready reveals the editor. On desktop the controls sit BESIDE the preview (2 columns); on mobile they
   stack under it. */
#langseg{display:none!important}
.topbar2{display:none;margin-top:18px;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.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}
/* Desktop: preview + LUT/download on the left, controls on the right. Mobile (single column): preview →
   CONTROLS → LUT/download, so you can adjust and see the image without scrolling past everything. */
.work{display:none;grid-template-columns:1fr 320px;gap:16px;align-items:start;margin-top:16px}
body.ready .drop{display:none}
body.ready .topbar2{display:flex}
body.ready .work{display:grid}
.editcol{grid-column:1;grid-row:1;min-width:0}
.footcol{grid-column:1;grid-row:2;min-width:0}
.panel{grid-column:2;grid-row:1 / span 2;margin-top:0}
.editcol>*:first-child,.footcol>*:first-child{margin-top:0}
@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.
     Settings must never sit below the download button; colour grade stays directly above download. */
  .work>.editcol{order:1} .work>.panel{order:2} .work>.footcol{order:3} }
.pal-btns{display:flex;gap:6px}
/* İz renkleri — collapsible (tap the title) */
.pal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.pal-title{background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.pal-chev{transition:transform .15s}
#paletteCtrl:not(.collapsed) .pal-chev{transform:rotate(90deg)}
#paletteCtrl.collapsed .swatches{display:none}

.cw-back{position:fixed;inset:0;z-index:590;overscroll-behavior:contain;background:rgba(0,0,0,.5)}
.cw-pop{position:fixed;z-index:591;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;width:262px;box-shadow:0 12px 40px rgba(0,0,0,.6)}
.cw-pop canvas{display:block;margin:0 auto 12px;touch-action:none;cursor:crosshair}
.cw-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cw-lbl{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap;min-width:74px}
.cw-pop .dl{margin-top:0;padding:11px}
.dd{position:relative}
.dd-btn{display:flex;align-items:center;justify-content:space-between;width:100%;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--text);font-size:13.5px;font-weight:600;cursor:pointer}
.dd-chev{color:var(--muted);font-size:12px;transition:.15s}
.dd.open .dd-chev{transform:rotate(180deg)}
.dd-menu{display:none;position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:40;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:5px;box-shadow:0 14px 34px rgba(0,0,0,.55)}
.dd.open .dd-menu{display:block}
.dd-menu button{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;color:var(--text);font-size:13.5px;font-weight:600;padding:10px;border-radius:7px;cursor:pointer;text-align:left}
.dd-menu button:hover{background:var(--panel)}
.dd-ic{font-size:16px;width:22px;text-align:center;flex:0 0 auto}
.silk-toggle{width:100%;margin-bottom:12px;padding:11px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);color:var(--text);font-size:14px;font-weight:700;cursor:pointer;transition:.12s}
.silk-toggle.on{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent);border-color:transparent}
.silkpane{display:flex;flex-direction:column;gap:14px;margin-bottom:4px}
.qpal{display:flex;flex-direction:column;gap:8px}
.qpal-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.qpal-tabs{display:flex;gap:4px;background:var(--fill);border-radius:var(--r-control);padding:2px;margin-left:auto}
.qpt{background:none;border:none;color:var(--muted);font-size:12px;font-weight:700;padding:6px 12px;border-radius:6px;cursor:pointer;transition:.12s}
.qpt.on{background:var(--panel);color:var(--text);box-shadow:var(--sh)}
.qp-group{display:none;gap:8px;flex-wrap:wrap}
.qp-group.on{display:flex}
.qp{flex:0 0 auto;min-width:44px;height:32px;border:1px solid var(--line);border-radius:9px;cursor:pointer;color:#fff;font-size:11px;font-weight:700;padding:0 10px;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.qp-orig{background:var(--panel-2);color:var(--text);text-shadow:none}
.qp-orig.on{color:var(--accent)}
.qp-flag{min-width:56px;text-shadow:0 0 3px rgba(0,0,0,.9),0 1px 2px rgba(0,0,0,.85)}
.qp.on{outline:2px solid var(--accent);outline-offset:1px}
.pal-reset.on{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent);border-color:transparent}
.btn-ghost.on{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent);font-weight:590;border-color:transparent}
#eraseCursor{position:fixed;display:none;border:2px solid rgba(255,255,255,.95);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);box-shadow:0 0 0 1.5px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.35);z-index:60}
/* SEO / how-to + FAQ block (same style as the other tools) */
.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:16px 0 4px}
.seo a{color:var(--accent);text-decoration:none}
.seo a:hover{text-decoration:underline}
.tabs{display:flex;gap:6px;background:var(--fill);border-radius:10px;padding:4px;margin-bottom:15px}
.tab{flex:1;background:none;border:none;color:var(--muted);font-size:13px;font-weight:700;padding:10px 6px;border-radius:7px;cursor:pointer;transition:.12s}
.tab.on{background:var(--panel);color:var(--text);font-weight:590;box-shadow:var(--sh)}

/* Related-tools nav: show labels for the active language (html[lang] set by applyLang) */
.related [data-lang="en"]{display:none}
html[lang="en"] .related [data-lang="tr"]{display:none}
html[lang="en"] .related [data-lang="en"]{display:inline}

/* ============================================================
   Focus + accessibility (AGENTS.md §10)
   ============================================================ */
:where(button,.drop,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}
  .drop:hover,.drop:active,.btn-ghost:active,.seg button:active,.modal-opts button:active{transform:none}
}
@media (prefers-reduced-transparency:reduce){
  .modal{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(0,0,0,.62)}
  .proc{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--chrome-solid)}
}
@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)}
}