/* © 2026 IG Tools — All rights reserved. Unauthorized copying, reuse, or redistribution of this code is prohibited. */
/* IG Tools — styles */
  /* 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:#34C759;                         /* 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{margin:0;overflow-x:hidden}
  body{background:var(--bg);color:var(--text);font-family:var(--sans);min-height:100vh;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}
  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:22px}.badge{display:none}}
  .sub{color:var(--muted);font-size:14px;margin:11px 0 0;line-height:1.5}

  .drop{display:block;margin-top:20px;border:1.5px dashed var(--line);border-radius:var(--r-card);background:var(--panel);padding:44px 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)}
  /* Second entry point: many photos, one shared look (batch mode). Quieter than
     the primary pill so the single-photo path stays the obvious one. */
  .pill-2{display:inline-block;margin:16px 0 0 9px;background:var(--panel);color:var(--text);border:1px solid var(--line);font-size:14px;font-weight:590;letter-spacing:-.01em;padding:11px 20px;border-radius:var(--r-control);cursor:pointer}
  .pill-2:hover{border-color:var(--accent);color:var(--accent)}
  .drop.loading{pointer-events:none}
  .drop.loading .content{display:none}
  .loader{display:none;flex-direction:column;align-items:center;gap:13px}
  .drop.loading .loader{display:flex}
  .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)}}
  .loader .lt{font-size:14px;font-weight:600}.loader .ls{font-family:var(--mono);font-size:12px;color:var(--muted)}

  .banner{display:none;margin-top:14px;padding:13px 15px;background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:var(--r-control);font-size:13.5px;color:var(--warn);line-height:1.55}
  .banner.on,html.igapp .banner{display:block}.banner b{color:var(--text)}
  .status{display:none;margin-top:12px;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-control);font-family:var(--mono);font-size:12px;color:var(--muted);line-height:1.65;white-space:pre-wrap;word-break:break-word;box-shadow:var(--sh)}
  .status.on{display:block}.status b{color:var(--text)}.status .err{color:var(--err)}.status .ok{color:var(--ok)}

  .panel{display:none;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;flex-wrap:wrap;background:var(--fill);border-radius:var(--r-control);padding:2px;gap:2px}
  .seg button{background:none;border:none;color:var(--muted);font-family:var(--sans);font-size:13.5px;font-weight:500;letter-spacing:-.005em;padding:8px 13px;border-radius:.5625rem;cursor:pointer;white-space:nowrap;text-align:left;flex:0 0 auto;
    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 .r{font-family:var(--mono);font-size:10px;opacity:.7;display:block;margin-top:1px}
  /* 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)}
  .seg button.on .r{opacity:.7}
  .actions{display:flex;gap:9px;align-items:center;flex-wrap:nowrap;overflow-x:auto;margin-top:4px}
  .actions::-webkit-scrollbar{height:0}
  .actions>*{flex:0 0 auto}
  .actions .meta{margin-left:auto;white-space:nowrap;font-family:var(--mono);font-size:12px;color:var(--muted);line-height:1.65;text-align:right;padding-bottom:2px}
  .actions .meta b{color:var(--text)}
  .btn-ghost{background:var(--panel);border:1px solid var(--line);color:var(--text);font-size:13px;font-weight:500;padding:9px 13px;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)}
  .btn-ghost.on{border-color:transparent;background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent);font-weight:590}
  .fmt{display:flex;background:var(--fill);border-radius:var(--r-control);padding:2px;gap:2px}
  .fmt button{background:none;border:none;color:var(--muted);font-family:var(--mono);font-size:12px;font-weight:700;padding:8px 11px;border-radius:.5rem;cursor:pointer;
    transition:background var(--dur-fast) var(--spring),color var(--dur-fast) var(--spring)}
  .fmt button.on{background:var(--panel);color:var(--text);font-weight:590;box-shadow:var(--sh)}
  .custom{display:none;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-top:12px}
  .custom.on{display:flex}
  .custom .f{display:flex;flex-direction:column;gap:6px}
  .custom .f span{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.05em}
  .custom input{width:120px;background:var(--bg);border:1px solid var(--line);color:var(--text);font-family:var(--mono);font-size:15px;font-weight:600;padding:10px 12px;border-radius:9px;outline:none}
  .custom input:focus{border-color:var(--accent)}
  .custom .x{color:var(--muted);font-size:18px;padding-bottom:10px}
  .custom .apply{background:var(--accent);color:#fff;border:none;font-size:14px;font-weight:590;padding:11px 18px;border-radius:var(--r-control);cursor:pointer}
  .slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:var(--r-pill);background:var(--fill);border:none;outline:none}
  .slider::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;cursor:pointer;border:.5px solid rgba(0,0,0,.06);box-shadow:0 1px 3px rgba(0,0,0,.2),0 3px 8px rgba(0,0,0,.14)}
  .slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;cursor:pointer;border:.5px solid rgba(0,0,0,.06);box-shadow:0 1px 3px rgba(0,0,0,.2),0 3px 8px rgba(0,0,0,.14)}
  .cropHint{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.5}
  .cropRow{display:none}.cropRow.on{display:block}

  .stage{display:none;margin-top:18px;position:relative}
  .stage.on{display:block}
  .tip{display:flex;align-items:center;gap:8px;justify-content:center;margin-bottom:11px;font-size:13px;color:var(--muted)}
  .tip b{color:var(--accent);font-weight:590}
  /* touch-action:none over the whole crop stage so two-finger pinch works even when a finger lands
     off the white box / on the checkerboard — otherwise the browser claims it as native page-zoom. */
  .shell{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(--r-card);overflow:hidden;display:flex;justify-content:center;align-items:center;padding:14px;min-height:180px;touch-action:none}
  .frame{position:relative;display:inline-block;line-height:0;max-width:100%}
  .frame.draggable{cursor:grab}
  .frame.dragging{cursor:grabbing}
  .frame img{max-width:100%;max-height:74vh;display:block;border-radius:3px}
  .ov{position:absolute;inset:0;pointer-events:none}
  .dim{position:absolute;background:rgba(20,20,23,.68)}
  .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;touch-action:none}
  .crop.locked{touch-action:auto}
  .crop *{pointer-events:none}
  .crop .g3{position:absolute;background:rgba(255,255,255,.28)}
  .crop .g3.v{top:0;bottom:0;width:1px}.crop .g3.h{left:0;right:0;height:1px}
  .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}

  /* ---- ÖNİZLEME (alt kısım) ---- */
  .preview{margin-top:22px}
  .previewbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
  .previewbar .pl{font-size:14px;font-weight:650}
  .previewbar .pl .em{color:var(--accent)}
  .pv-stage{display:flex;justify-content:center;align-items:center;padding:12px 0}

  /* Mac / masaüstü monitör */
  .mac{display:none;flex-direction:column;align-items:center}
  .pv-stage.mac-on .mac{display:flex}
  .mac .bezel{background:#0b0b0d;border:1px solid #34343E;border-radius:16px;padding:12px;box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 0 0 2px #202027}
  .mac .macscreen{border-radius:6px;overflow:hidden;background:#000;line-height:0}
  .mac .neck{width:60px;height:20px;background:linear-gradient(#26262d,#17171b);margin-top:-1px;border-radius:0 0 4px 4px}
  .mac .foot{width:150px;height:9px;background:#202027;border-radius:0 0 9px 9px;box-shadow:0 6px 14px rgba(0,0,0,.5)}

  /* Telefon */
  .phone{display:none}
  .pv-stage.phone-on .phone{display:flex}
  .phone .device{position:relative;background:#0b0b0d;border:1px solid #3a3a44;border-radius:38px;padding:11px;box-shadow:0 20px 55px rgba(0,0,0,.55),inset 0 0 0 2px #212127}
  .phone .notch{position:absolute;top:13px;left:50%;transform:translateX(-50%);width:30%;height:6px;background:#000;border-radius:6px;z-index:5}
  .phone .pscreen{position:relative;overflow:hidden;border-radius:26px;background:#000;line-height:0}

  /* Banner / poster */
  .banner-fr{display:none}
  .pv-stage.banner-on .banner-fr{display:flex}
  .banner-fr .bwrap{border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,.45);line-height:0;background:#000}

  .pv-stage canvas{display:block}

  .upwarn{display:none;margin-top:14px;padding:11px 14px;background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:var(--r-control);font-size:12.5px;color:var(--warn);line-height:1.5}
  .upwarn.on{display:block}
  /* The primary action on the page: one solid accent, sized to be unmistakable. */
  .dl-btn{width:100%;margin-top:18px;background:var(--accent);color:#fff;border:none;font-size:16px;font-weight:590;padding:16px;border-radius:var(--r-control);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;
    transition:filter var(--dur-fast) var(--spring),transform var(--dur-press) ease-out}
  .dl-btn:active{transform:scale(.985)}
  .dl-btn:hover{filter:brightness(1.06)}.dl-btn.done{background:var(--ok);color:#fff}
  .dl-sub{text-align:center;font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:9px}
  .dl-sub b{color:var(--text)}
  .dlone{display:block;width:100%;margin-top:9px;background:none;border:1px solid var(--line);color:var(--muted);font-size:13px;font-weight:590;padding:11px;border-radius:var(--r-control);cursor:pointer}
  .dlone:hover{border-color:var(--accent);color:var(--text)}
  .stripwrap{display:none;margin-bottom:16px}
  .striphdr{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted);margin-bottom:9px}
  .strip{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;-webkit-overflow-scrolling:touch}
  .thumb{position:relative;flex:0 0 auto;width:62px;height:62px;border-radius:11px;overflow:hidden;border:2px solid var(--line);background:var(--bg);cursor:pointer;padding:0}
  .thumb img{width:100%;height:100%;object-fit:cover;display:block}
  .thumb.on{border-color:transparent;box-shadow:0 0 0 2px var(--accent),0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
  .thumb .ti{position:absolute;left:3px;top:3px;font-family:var(--mono);font-size:10px;font-weight:700;color:#fff;background:rgba(0,0,0,.6);border-radius:5px;padding:0 4px;line-height:15px}
  .thumb .tx{position:absolute;right:2px;top:2px;width:17px;height:17px;line-height:16px;text-align:center;font-size:12px;color:#fff;background:rgba(0,0,0,.62);border-radius:50%}
  .thumb.addtile{display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--muted);border-style:dashed;font-weight:400}
  .thumb.addtile:hover{border-color:var(--accent);color:var(--text)}
  /* A photo carrying its own look (batch mode) gets a dot, so a walk through the
     strip shows at a glance which ones left the shared grade. */
  .thumb.own::after{content:'';position:absolute;right:3px;bottom:3px;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--panel)}
  .batchrow{align-items:center}
  .batchrow #batchCount{margin-right:2px}
  .pvnav{display:none;align-items:center;justify-content:center;gap:16px;margin-top:8px}
  .pvnav.on{display:flex}
  .pvnav button{background:var(--panel);border:1px solid var(--line);color:var(--text);width:36px;height:36px;border-radius:50%;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh)}
  .pvnav button:hover{border-color:var(--accent)}
  .pvnav button.on{background:color-mix(in srgb,var(--accent) 15%,transparent);border-color:transparent;color:var(--accent);box-shadow:var(--sh)}
  @keyframes pvslide{from{opacity:.35;transform:translateX(var(--sd,16px))}to{opacity:1;transform:translateX(0)}}
  .dots{display:flex;gap:6px;align-items:center}
  .dots i{width:7px;height:7px;border-radius:50%;background:var(--line);cursor:pointer;transition:.15s}
  .dots i.on{background:var(--accent);width:20px;border-radius:4px}

  .note{display:flex;gap:8px;margin-top:20px;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:10px;font-size:13px;color:var(--muted);line-height:1.55}
  .note b{color:var(--text)}
  .seo{margin-top:46px;border-top:1px solid var(--line);padding-top:30px;color:var(--muted);font-size:15px;line-height:1.7;letter-spacing:-.003em}
  .seo h2{font-size:1.375rem;font-weight:600;letter-spacing:-.018em;margin:0 0 12px;color:var(--text)}
  .seo h3{font-size:1.0625rem;font-weight:590;letter-spacing:-.012em;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:590;color:var(--text);margin:16px 0 4px}
  .seo a{color:var(--accent);text-decoration:none}
  .seo a:hover{text-decoration:underline}
  .foot{margin-top:42px;text-align:center;padding-bottom:6px}
  .foot a{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;font-weight:600;text-decoration:none;padding:9px 16px;border:1px solid var(--line);border-radius:22px;transition:.15s}
  .foot a:hover{color:var(--text);border-color:var(--accent);background:var(--panel)}
  .foot a svg{color:var(--accent)}
  .foot .by{opacity:.85}
  .page-drop{position:fixed;inset:0;background:color-mix(in srgb,var(--accent) 12%,transparent);border:3px dashed var(--accent);display:none;align-items:center;justify-content:center;z-index:50;pointer-events:none}
  .page-drop.on{display:flex}
  .page-drop span{font-size:20px;font-weight:590;color:var(--text);background:var(--panel);padding:16px 26px;border-radius:var(--r-control);border:1px solid var(--accent);box-shadow:var(--sh-hi)}
  .controls{margin-top:20px}
  @media(min-width:1080px){
    .wrap{max-width:1180px}
    /* Editor layout: left column = crop editor stacked over the controls,
       right column = the live preview, made sticky so it stays in view while
       you work through the controls. Fills the wide left area instead of
       leaving it empty. */
    .stage.on{
      display:grid;
      grid-template-columns:minmax(0,1fr) 428px;
      column-gap:30px;
      align-items:start;
      grid-template-areas:"strip preview" "edit preview" "controls preview";
    }
    .stripwrap{grid-area:strip}
    .editcol{grid-area:edit;min-width:0}
    .controls{grid-area:controls;min-width:0;margin-top:18px}
    .prevcol{grid-area:preview;position:sticky;top:16px}
    .prevcol .preview{margin-top:0}
    /* View mode (IG.mountViewMode): edit-only drops the preview column; show-only keeps the
       sticky preview on the right and puts the controls in the editor's place. */
    .stage.on[data-ig-view="edit"]{grid-template-columns:minmax(0,1fr);grid-template-areas:"strip" "edit" "controls"}
    /* show-only: the preview takes the editor's slot at full width (not the 428px side column). */
    .stage.on[data-ig-view="show"]{grid-template-columns:minmax(0,1fr);grid-template-areas:"strip" "preview" "controls"}
    .stage.on[data-ig-view="show"] .prevcol{position:static}
    .seo{max-width:900px}
  }
  /* --- mobilde kompakt panel (Image Cutter ile aynı) --- */
  @media(max-width:640px){
    .panel{padding:11px;margin-top:14px}
    .ctrl{margin-bottom:11px}
    .ctrl label{margin-bottom:5px;font-size:10px;letter-spacing:.06em}
    .seg{padding:2px;gap:2px}
    .seg button{padding:7px 10px;font-size:12.5px}
    .seg button .r{display:none}            /* ölçü alt-yazılarını gizle -> tek satır isimler */
    .btn-ghost{padding:8px 10px;font-size:12px}
    .fmt button{padding:7px 10px}
    .actions{gap:7px}
    .actions .meta{font-size:10.5px}
    .sub{font-size:12.5px;margin-top:8px}
    .stripwrap{margin-bottom:11px}
  }
  .rawbar{display:none;position:relative;margin-top:12px;padding:12px 38px 12px 14px;background:var(--info-bg);border:1px solid var(--info-line);border-radius:var(--r-control);font-size:13px;color:var(--info);line-height:1.5}
  .rawbar.on{display:block}.rawbar b{color:var(--text)}
  .rawx{position:absolute;top:8px;right:8px;width:24px;height:24px;border:none;background:none;color:var(--info);font-size:14px;cursor:pointer;border-radius:6px}
  .rawx:hover{background:var(--fill-hi);color:var(--text)}
  .proc-modal{position:fixed;inset:0;background:rgba(0,0,0,.58);z-index:600;overscroll-behavior:contain;display:none;align-items:center;justify-content:center;padding:24px}
  .proc-modal.on{display:flex}
  .proc-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:22px 26px;text-align:center;max-width:340px;box-shadow:var(--sh-modal)}
  .proc-box .sp{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 12px}
  .proc-box .pt{font-size:14px;font-weight:650;color:var(--text)}
  .proc-box .ps{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:8px;line-height:1.5;white-space:pre-wrap}
  .thumb.lift{transform:scale(1.08);box-shadow:0 8px 20px rgba(0,0,0,.5);z-index:5;opacity:.92}
  .tt{position:fixed;z-index:200;background:var(--chrome-solid);color:var(--text);font-size:12px;line-height:1.4;padding:8px 11px;border-radius:.625rem;max-width:260px;pointer-events:none;opacity:0;transition:opacity var(--dur-fast) var(--spring);box-shadow:var(--sh-hi);border:1px solid var(--line)}
  .tt.on{opacity:1}
  .previewbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .pvtools{margin-left:auto;display:flex;gap:8px;align-items:center}
  .igpost-fr{display:none;justify-content:center;width:100%}
  .pv-stage.igpost-on .igpost-fr{display:flex}
  .igpost{width:100%;max-width:400px;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 22px 60px rgba(0,0,0,.5);color:#111;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;text-align:left}
  .igpost .ightop{display:flex;align-items:center;gap:9px;padding:10px 12px}
  .igpost .igav{width:34px;height:34px;border-radius:50%;padding:2px;background:conic-gradient(from 20deg,#f09433,#dc2743,#bc1888,#f09433);flex:0 0 auto}
  .igpost .igav>div{width:100%;height:100%;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;overflow:hidden}
  .igpost .igmeta{line-height:1.25;min-width:0}
  .igpost .igu{font-size:13px;font-weight:700;color:#111;display:flex;align-items:center;gap:4px}
  .igpost .igu svg{width:13px;height:13px;flex:0 0 auto}
  .igpost .igloc{font-size:11px;color:#262626}
  .igpost .igmenu{margin-left:auto;color:#111;font-weight:700;font-size:17px;letter-spacing:1px;line-height:0}
  .igpost .igimg{position:relative;width:100%;background:#000;display:flex;justify-content:center;overflow:hidden}
  .igpost .igacts{display:flex;align-items:center;gap:14px;padding:10px 13px 2px}
  .igpost .igacts svg{width:24px;height:24px;display:block}
  .igpost .igacts .bm{margin-left:auto}
  .igpost .iglikes{font-size:13px;font-weight:700;color:#111;padding:3px 13px 0}
  .igpost .igcap{font-size:13px;color:#111;padding:3px 13px 0;line-height:1.4}
  .igpost .igcap b{font-weight:700}
  .igpost .igcap .tag{color:#00376b}
  .igpost .igcom{font-size:13px;color:#8e8e8e;padding:5px 13px 12px}
  /* Facebook */
  .fbpost-fr{display:none;justify-content:center;width:100%}
  .pv-stage.fbpost-on .fbpost-fr{display:flex}
  .fbpost{width:100%;max-width:400px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 22px 60px rgba(0,0,0,.5);color:#050505;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;text-align:left}
  .fbpost .fbtop{display:flex;align-items:center;gap:9px;padding:11px 12px 6px}
  .fbpost .fbav{width:38px;height:38px;border-radius:50%;background:conic-gradient(from 30deg,#1877f2,#59a2ff,#1877f2);flex:0 0 auto}
  .fbpost .fbu{font-size:14px;font-weight:700;color:#050505}
  .fbpost .fbsub{font-size:11px;color:#65676b}
  .fbpost .fbmenu{margin-left:auto;color:#65676b;font-weight:700}
  .fbpost .fbtext{padding:2px 12px 8px;font-size:13px;color:#050505}
  .fbpost .fbimg{position:relative;width:100%;background:#000;display:flex;justify-content:center;overflow:hidden}
  .fbpost .fbbar{display:flex;border-top:1px solid #e4e6eb;margin-top:2px}
  .fbpost .fbbar span{flex:1;text-align:center;padding:9px 0;font-size:13px;font-weight:600;color:#65676b}
  /* TikTok */
  .ttui-fr{display:none;justify-content:center;width:100%}
  .pv-stage.ttui-on .ttui-fr{display:flex}
  .ttphone{background:#000;border:1px solid #2a2a2f;border-radius:30px;padding:8px;box-shadow:0 20px 55px rgba(0,0,0,.6)}
  .ttscreen{position:relative;overflow:hidden;border-radius:24px;background:#000;line-height:0}
  .ttscreen .ttimg{line-height:0}
  .ttscreen .tttop{position:absolute;top:12px;left:0;right:0;display:flex;gap:18px;justify-content:center;color:#fff;font-size:13px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.7);z-index:4}
  .ttscreen .tttop .on{border-bottom:2px solid #fff;padding-bottom:2px}
  .ttscreen .tttop span:not(.on){opacity:.7}
  .ttrail{position:absolute;right:8px;bottom:64px;display:flex;flex-direction:column;align-items:center;gap:15px;z-index:4}
  .ttrail .ttav{width:38px;height:38px;border-radius:50%;background:linear-gradient(#ff4d8d,#8a3ffc);border:2px solid #fff}
  .ttrail .ttb{display:flex;flex-direction:column;align-items:center;color:#fff;font-size:22px;line-height:1;text-shadow:0 1px 3px rgba(0,0,0,.7)}
  .ttrail .ttb i{font-size:10px;font-style:normal;margin-top:3px;font-weight:600}
  .ttbottom{position:absolute;left:12px;right:58px;bottom:14px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7);z-index:4}
  .ttbottom .ttu{font-size:14px;font-weight:700}
  .ttbottom .ttc{font-size:12px;margin-top:3px;line-height:1.35}
  /* Kağıt / poster (çerçeveli print) */
  .paper-fr{display:none;justify-content:center;width:100%;padding:6px 0}
  .pv-stage.paper-on .paper-fr{display:flex}
  .paperframe{background:linear-gradient(145deg,#2a2a2e,#101012);padding:9px;border-radius:3px;box-shadow:0 34px 70px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04) inset}
  .papermat{background:#fbf9f4;padding:24px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07)}
  .paperimg{position:relative;background:#000;display:flex;justify-content:center;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.28)}
  @media(max-width:640px){ .papermat{padding:16px} }
  .dlscale{display:flex;align-items:center;justify-content:center;gap:10px;margin:8px 0 10px}
#langseg{display:none!important}

/* mobile: larger tap targets for accessibility */
@media(max-width:600px){ .seg button,.btn-ghost,.cg-auto,.cg-reset{min-height:40px} }


/* ---- LOOK PICKER (preset strip + intensity) ---- */
.looks{margin-top:15px;padding:13px 0 4px;border-top:1px solid var(--line);text-align:left}
.looks-hd{display:flex;align-items:center;gap:10px;padding:0 2px 9px}
.looks-t{font-weight:650;font-size:14px;color:var(--text)}
.looks-cur{font-size:12.5px;color:var(--muted)}
.looks-folder{margin-left:auto;font-size:12.5px;padding:5px 10px;min-height:30px;white-space:nowrap}
.looks-strip{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.looks-strip::-webkit-scrollbar{height:0}
.look{flex:0 0 auto;width:66px;border:0;background:none;padding:0;cursor:pointer;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:5px}
.look canvas{width:60px;height:60px;border-radius:50%;display:block;object-fit:cover;box-shadow:0 0 0 2px transparent;transition:box-shadow .14s,transform .14s;background:var(--panel)}
.look .ln{font-size:10.5px;line-height:1.15;color:var(--muted);text-align:center;max-width:66px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .14s}
.look.on canvas{box-shadow:0 0 0 2.5px var(--accent);transform:scale(1.06)}
.look.on .ln{color:var(--text);font-weight:650}
.looks-int{margin-top:4px;padding:0 2px}
.looks-int label{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin-bottom:5px}
.looks-int #lookIntVal{color:var(--text);font-weight:600}
.looks-int.off{opacity:.35;pointer-events:none}

.look-add canvas{background:var(--panel);border:1.5px dashed var(--line);box-shadow:none}
.look-add canvas{position:relative}
.look-add{position:relative}
.look-add::before{content:'+';position:absolute;top:0;left:3px;width:60px;height:60px;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:300;color:var(--muted);pointer-events:none}
.look-add:hover::before{color:var(--text)}
.lay-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:2px 2px 10px}
.lay-row[hidden]{display:none}   /* the [hidden] attr must beat .lay-row's display:flex (glass/look/dark rows) */
.pv-stage.wiping{cursor:ew-resize}
.pv-stage.wiping canvas{cursor:ew-resize}
#maskBtn.on,#wipeBtn.on{border-color:transparent;background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}
.mask-opts{margin-top:6px;display:flex;flex-direction:column;gap:8px}
.mask-opts[hidden]{display:none}
/* Efekt paneli: solda efektin ayarları, ortada ince çizgi, sağda AI. Dar ekranda alt alta. */
.fx-split{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:0;margin-top:6px}
.fx-split[hidden]{display:none}
.fx-main{min-width:0;padding-right:16px}
.fx-main>.mask-opts:first-child{margin-top:0}
.fx-ai{min-width:0;padding-left:16px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.fx-ai-cap{font-size:12px;line-height:1.45;color:var(--muted);padding:2px 2px 4px}
.fx-ai-cap b{display:block;font-size:12.5px;font-weight:650;color:var(--text);margin-bottom:2px}
.fx-ai-cap span[hidden]{display:none}
.fx-ai-cap span+span:not([hidden]){display:block;margin-top:4px}
#maskAiRows[hidden]{display:none}
@media(max-width:640px){
  .fx-split{grid-template-columns:minmax(0,1fr)}
  .fx-main{padding-right:0}
  .fx-ai{padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:12px;margin-top:6px}
}
.mask-sel{background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:9px;padding:7px 10px;font-size:13px;font-weight:600;cursor:pointer;min-height:36px}
#maskInvertBtn.on,#maskFrameBtn.on{border-color:transparent;background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}
#maskOutStyleSeg button.on{background:var(--panel);border-color:transparent;color:var(--text);box-shadow:var(--sh)}
.mask-rng{flex:1 1 80px;min-width:70px;max-width:160px;height:8px}
.pv-stage.masking canvas{cursor:move}
.pv-hint{margin-top:9px;text-align:center;font-size:12px;color:var(--muted);user-select:none}
.pv-stage{cursor:zoom-in}
.pv-stage.wiping,.pv-stage.masking{cursor:auto}

/* ---- VIDEO MODE ---- */
.vprev[hidden]{display:none}
.vprev video{width:100%;max-height:70vh;border-radius:12px;background:#000;display:block}
.vnote{margin-top:10px;font-size:12.5px;color:var(--muted);line-height:1.5;text-align:center}
#vDlBtn[hidden]{display:none}
#ctrlOutVideo[hidden]{display:none}

/* Single-image tool: hide the multi-photo strip + "add more" affordance. */
#stripwrap{display:none}
.dl-settings{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 22px}
.dl-settings .dlscale{margin:0}

/* 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}
/* How-to note: onboarding only — hide it once a photo is loaded (stage active). */
.stage.on ~ .note{display:none}

/* ---- SIZE / RATIO disclosure (resizer merged in) ---- */
.size-body{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.size-body>.ctrl{flex:0 0 auto}
.size-body .custom{flex-basis:100%}
.seg.cat button{flex:1 0 auto;text-align:center;min-width:78px}

/* ---- REGION MASK tabs ---- */

/* ---- REGION MASK box in the edit frame (mirrors .crop) ---- */
.maskbox{position:absolute;border:2px solid #2a9dff;box-shadow:0 0 0 1px rgba(0,0,0,.45);pointer-events:none;z-index:3}
.maskbox .mh{position:absolute;width:12px;height:12px;border-radius:50%;background:#2a9dff;border:2px solid #fff;transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(0,0,0,.5)}
.maskbox .mh-nw{left:0;top:0}.maskbox .mh-n{left:50%;top:0}.maskbox .mh-ne{left:100%;top:0}
.maskbox .mh-w{left:0;top:50%}.maskbox .mh-e{left:100%;top:50%}
.maskbox .mh-sw{left:0;top:100%}.maskbox .mh-s{left:50%;top:100%}.maskbox .mh-se{left:100%;top:100%}
.maskbox.band{border-left:0;border-right:0}
/* Ek daireler: maske kutusuyla aynı mavi dil, ama yuvarlak; kenarındaki tek tutamak
   yeter, daire her yönde aynı büyür. */
.maskcirc{position:absolute;border:2px dashed #2a9dff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.45);pointer-events:none;z-index:3}
.maskcirc .mh{position:absolute;width:12px;height:12px;border-radius:50%;background:#2a9dff;border:2px solid #fff;transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(0,0,0,.5);left:100%;top:50%}
.maskbox .msz{position:absolute;right:4px;bottom:4px;background:rgba(20,20,26,.82);color:#fff;font-size:11px;font-weight:600;padding:2px 6px;border-radius:5px;white-space:nowrap}
/* Layout row locked while a region mask is active (they're mutually exclusive). */
.locked-row{opacity:.4;pointer-events:none}
.warpbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 10px;margin-top:6px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.warpbar .mask-rng{flex:1;min-width:70px;max-width:150px}
.pv-stage.warping{cursor:crosshair}
.warpbox{position:absolute;border:2px solid #ff5aa8;box-shadow:0 0 0 1px rgba(0,0,0,.45);pointer-events:none;z-index:3;transform-origin:50% 50%}
.warpbox .mh{position:absolute;width:12px;height:12px;border-radius:50%;background:#ff5aa8;border:2px solid #fff;transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(0,0,0,.5)}
.warpbox .mh-nw{left:0;top:0}.warpbox .mh-n{left:50%;top:0}.warpbox .mh-ne{left:100%;top:0}
.warpbox .mh-w{left:0;top:50%}.warpbox .mh-e{left:100%;top:50%}
.warpbox .mh-sw{left:0;top:100%}.warpbox .mh-s{left:50%;top:100%}.warpbox .mh-se{left:100%;top:100%}
.warpbox .wrot{position:absolute;left:50%;top:-30%;width:15px;height:15px;border-radius:50%;background:#fff;border:2px solid #ff5aa8;transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(0,0,0,.5)}
.wavebox{position:absolute;border:2px solid #22c3d6;box-shadow:0 0 0 1px rgba(0,0,0,.45);pointer-events:none;z-index:3;transform-origin:50% 50%}
.wavebox .mh{position:absolute;width:12px;height:12px;border-radius:50%;background:#22c3d6;border:2px solid #fff;transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(0,0,0,.5)}
.wavebox .mh-nw{left:0;top:0}.wavebox .mh-n{left:50%;top:0}.wavebox .mh-ne{left:100%;top:0}
.wavebox .mh-w{left:0;top:50%}.wavebox .mh-e{left:100%;top:50%}
.wavebox .mh-sw{left:0;top:100%}.wavebox .mh-s{left:50%;top:100%}.wavebox .mh-se{left:100%;top:100%}
.wavebox .wrot{position:absolute;left:50%;top:-30%;width:15px;height:15px;border-radius:50%;background:#fff;border:2px solid #22c3d6;transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(0,0,0,.5)}

/* ============================================================
   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){
  .proc-modal{background:rgba(0,0,0,.7)}
}
@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)}
}