/* © 2026 IG Tools — All rights reserved. */
/* Motion Blur mobile-first shell — pairs with shell.js and shared/ui.js. The landing (drop zone)
   keeps its own layout; everything below the "editor" marker only applies once a photo is open
   (body.ready). */

/* ---- the ONE top bar (UI_RULES §1): same parts on every screen, CSS picks which show ---- */
.mcs-top{display:flex;align-items:center;gap:6px;min-height:calc(56px + var(--ad-handle,0px));padding:var(--ad-handle,0px) 8px 0;box-sizing:border-box;position:relative;z-index:30;margin:calc(var(--ad-gap,0px) - 26px) -18px 18px;
  background:var(--chrome-solid,var(--panel));border-bottom:1px solid var(--line)}
.mcs-home{order:1;display:flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 10px;border:0;border-radius:12px;background:none;color:var(--accent);cursor:pointer}
.mcs-tool{order:3;display:flex;align-items:center;gap:8px;font:700 17px/1 var(--sans);color:var(--text);padding-left:2px}
.mcs-tool svg{flex:none;color:var(--logo)}
.mcs-new{order:2;display:none}
.mcs-mode{order:3;display:none;gap:2px;padding:3px;border-radius:13px;background:var(--fill)}
.mcs-mode button{min-height:40px;padding:0 9px;border:0;border-radius:10px;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:6px;font:600 13px/1 var(--sans);cursor:pointer}
.mcs-mode button.on{background:var(--panel);color:var(--text);box-shadow:var(--sh)}
#mcsDl{order:5;margin-left:auto;display:none}
.mcs-lang{order:6;display:flex;align-items:center;gap:2px;margin-left:auto;background:var(--fill);border-radius:10px;padding:2px 2px 2px 8px}
.mcs-theme{order:6;margin-left:auto;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:12px;background:none;color:var(--text);cursor:pointer;padding:0}
/* the theme button takes the auto margin so [moon][TR/EN] sit together at the right, as in Meta Cam */
.mcs-lang{margin-left:0}
.mcs-globe{display:flex;color:var(--muted)}
.mcs-lang button{border:0;background:none;color:var(--muted);font:600 13px/1 var(--sans);padding:8px 10px;border-radius:8px;cursor:pointer}
.mcs-lang button.on{background:var(--panel);color:var(--text);box-shadow:var(--sh)}
.mcs-inst{width:fit-content;margin:14px auto 0;min-height:44px;padding:0 16px;border-radius:22px;display:flex;align-items:center;gap:8px;font:600 14px/1 var(--sans)}
.mcs-inst[hidden],body.ready .mcs-inst{display:none}
.mcs-newbtn{display:flex!important;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0;border:0;border-radius:12px!important;background:none;box-shadow:none;color:var(--text);cursor:pointer;font:600 14px/1 var(--sans)}
.mcs-newt{display:none}
/* the old landing header (logo, wordmark, TR/EN, tagline) stays in the DOM, off-screen: h1, SEO copy, language handlers */
.wrap>header{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.igsb{display:none!important}
.mcs-ask{text-align:center;padding:4px 0 6px}
.mcs-ask-ic{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:18px;background:rgba(255,59,48,.12);color:#FF3B30;margin-bottom:10px}
.mcs-ask b{display:block;font:700 19px/1.2 var(--sans);color:var(--text)}
.mcs-ask p{margin:8px 0 0;font:400 14px/1.45 var(--sans);color:var(--muted)}
.mcs-ask-btns{display:flex;gap:8px;margin-top:18px}
.mcs-ask-btns .ig-btn{flex:1;min-height:52px}
.ig-btn.mcs-danger{background:#FF3B30;color:#fff}

/* ================= editor (body.ready) ================= */
body.ready{padding:var(--ad-top,0px) 0 calc(84px + var(--ad-bot,0px))!important}
body.ready .mcs-top{margin:0;position:sticky;top:var(--ad-top,0px)}
body.ready .wrap{padding:0 12px}
body.ready .mcs-tool,body.ready .mcs-lang,body.ready .mcs-theme{display:none}
body.ready .mcs-new,body.ready #mcsDl,body.ready .mcs-mode{display:flex}
/* what the shell replaced: size row, panel chrome, footer (its buttons are still clicked by the sheets) */
@media(max-width:380px){.mcs-mode button span,.mcs-top .ig-btn.pri span{display:none}.mcs-top .ig-btn.pri{padding:0;width:44px}}
@media(max-width:380px){body.mcs-prev .mcs-mode button[data-m=edit] span{display:inline}}

/* dock */
.mcs-dock{display:none}
body.ready .mcs-dock{display:flex;position:fixed;left:0;right:0;bottom:var(--ad-bot,0px);z-index:30;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));
  background:var(--chrome-solid,var(--panel));border-top:1px solid var(--line)}
.mcs-tab{flex:1;min-height:56px;border:0;border-radius:12px;background:transparent;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:600 12px/1 var(--sans);cursor:pointer}
.mcs-tab.on{color:var(--accent);background:var(--fill)}
@media(min-width:900px){body.ready .mcs-dock{max-width:560px;margin:0 auto;border:1px solid var(--line);border-radius:18px;bottom:calc(14px + var(--ad-bot,0px));box-shadow:var(--sh-hi)}}

/* sheets that host the panes sit low and leave the photo visible */
.ig-sheet.mcs-s .ig-sh-box{max-height:48vh}
@media(min-width:900px){.ig-sheet.mcs-s .ig-sh-box{top:auto;bottom:var(--sh-b,96px);left:auto;right:var(--sh-r,24px);transform:none;max-height:var(--sh-mh,calc(100vh - 200px))}}
.ig-sheet .ig-row.on{outline:2px solid var(--accent)}

/* size chip (bottom-left of the photo) */
.mcs-size{position:absolute;left:12px;bottom:12px;z-index:6;display:none;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:1px solid rgba(255,255,255,.14);border-radius:14px;
  background:rgba(28,28,30,.72);color:#fff;font:600 13px/1 var(--sans);backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%);cursor:pointer}
body.ready .mcs-size{display:flex}

/* the icon-only buttons floating on the photo (right edge, bottom-up) */
.mcs-fab{position:absolute;inset:12px;z-index:6;display:none;flex-direction:column-reverse;align-items:flex-end;justify-content:flex-start;gap:8px;margin:0;padding:0;border:0;background:none;width:auto;pointer-events:none}
.mcs-fab>*{pointer-events:auto}
body.ready .mcs-fab{display:flex}
.mcs-fab .pv-btn,.mcs-fab .btn-ghost{width:44px;height:44px;padding:0;font-size:0!important;line-height:0;display:flex;align-items:center;justify-content:center;gap:0;border:1px solid rgba(255,255,255,.14);border-radius:14px;
  background:rgba(28,28,30,.72)!important;color:#fff!important;box-shadow:0 4px 14px rgba(0,0,0,.35);backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%)}
.mcs-fab .pv-btn::before{content:"";width:22px;height:22px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.mcs-fab .pv-btn.on{box-shadow:inset 0 0 0 2px var(--accent)!important;color:#fff!important}
/* Çerçeve is an on/off switch (UI_RULES §13): only in Önizle; black dot = off, green dot = on */
.mcs-fab #frameBtn{display:none;width:auto;padding:0 14px;font-size:13px!important;line-height:1;gap:8px}
.mcs-fab #frameBtn::after{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.25)}
.mcs-fab #frameBtn.on::after{background:#34C759;box-shadow:0 0 0 3px rgba(52,199,89,.35)}
.mcs-fab #frameBtn,.mcs-fab #frameBtn.on{box-shadow:0 4px 14px rgba(0,0,0,.35)!important}
body.mcs-prev .mcs-fab #frameBtn{display:flex}
body.mcs-prev .mcs-fab .pv-btn:not(#frameBtn):not(#effCompare),body.mcs-prev .pvfloat,body.mcs-prev .mcs-size{display:none!important}

/* the download / video popups become bottom sheets */
body.ready #dlOptsModal,body.ready #vidOptsModal,body.ready #wipeOptsModal{align-items:flex-end!important;padding:0!important}
body.ready #dlOptsModal>div,body.ready #vidOptsModal>div,body.ready #wipeOptsModal>div{max-width:560px!important;width:100%!important;margin:0 auto;border-radius:22px 22px 0 0!important;max-height:88vh;overflow:auto;padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))!important}

/* ---- landing: same one-action layout as Meta Cam (mockup M1) ---- */
/* ---- landing (mockup M1): one clear action, Ana sayfa on top ---- */
body:not(.ready) .wrap{max-width:560px}
body:not(.ready) .wrap>header .badge,body:not(.ready) .wrap>header .sub{display:none}
body:not(.ready) .wrap>header{margin-bottom:0}
body:not(.ready) .drop{display:flex;flex-direction:column;justify-content:center;min-height:56vh;border:0;background:none;box-shadow:none;padding:0 8px;margin-top:0}
body:not(.ready) .drop:hover{transform:none;box-shadow:none}
body:not(.ready) .drop .content{display:flex;flex-direction:column;align-items:center;gap:0}
body:not(.ready) .drop .icon{font-size:0;width:84px;height:84px;border-radius:24px;background:#1D1D1F;position:relative;margin:0 0 16px}
body:not(.ready) .drop .icon::after{content:"";position:absolute;inset:19px;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2.5' stroke-dasharray='3 2.5'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2.5' stroke-dasharray='3 2.5'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3C/svg%3E") center/contain no-repeat}
body:not(.ready) .drop .big{font-size:22px;font-weight:700;letter-spacing:-.02em}
body:not(.ready) .drop .small{font-size:13.5px;max-width:340px;line-height:1.45;margin:8px 0 18px}
body:not(.ready) .drop .pill{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:60px;margin:0;padding:0 20px;border-radius:18px;font-size:17px;font-weight:600;box-sizing:border-box}
body:not(.ready) .drop .pill::before{content:"";width:24px;height:24px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='14' height='14' rx='2.5'/%3E%3Cpath d='M4 16l4-4 3 3 2-2 4 4'/%3E%3Cpath d='M19 3v6M16 6h6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='14' height='14' rx='2.5'/%3E%3Cpath d='M4 16l4-4 3 3 2-2 4 4'/%3E%3Cpath d='M19 3v6M16 6h6'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- desktop landing (>=900px): wide page like the editor, a real drop target ---------- */
@media(min-width:900px){
  body:not(.ready) .wrap{max-width:1120px}
  body:not(.ready) .drop{max-width:760px;width:100%;margin:28px auto 0;min-height:420px;padding:48px 40px;border:2px dashed var(--line);border-radius:28px;background:var(--panel);box-sizing:border-box}
  body:not(.ready) .drop:hover,body:not(.ready) .drop.over{border-color:var(--accent);background:rgba(0,122,255,.05)}
  body:not(.ready) .drop .icon{width:96px;height:96px;border-radius:28px;margin-bottom:20px}
  body:not(.ready) .drop .icon::after{inset:22px}
  body:not(.ready) .drop .big{font-size:28px}
  body:not(.ready) .drop .small{font-size:15px;max-width:480px;margin:10px 0 26px}
  body:not(.ready) .drop .pill{width:auto;min-width:340px}
  body .promo,body .wrap>.seo{max-width:760px;margin-left:auto;margin-right:auto}
}

@media(min-width:900px){
  .mcs-top{padding:0 max(20px,calc((100% - 1100px)/2));gap:10px}
  body.ready .mcs-tool,body.ready .mcs-lang{display:flex}
  body.ready .mcs-theme{display:flex;margin-left:6px}
  body.ready #mcsDl{margin-left:auto}
  .mcs-new{order:4;margin-left:6px}
  .mcs-newbtn{padding:0 16px;border:1px solid var(--line)!important;border-radius:22px!important;background:var(--panel)!important;box-shadow:var(--sh)!important;min-height:40px}
  .mcs-newt{display:inline}
  body.ready .mcs-lang{margin-left:0}
}

/* A tab sheet never blocks the photo: you keep working on the canvas (move area circles, path points…)
   while its settings are open. Anything else you touch closes it (shell.js). */
.ig-sheet.mcs-s{pointer-events:none}
.ig-sheet.mcs-s .ig-sh-box{pointer-events:auto}

/* one muted hint line under the photo */
.footcol .note{display:none!important}


/* ================= Region Mask specifics ================= */
/* what the shell replaced: the old size/view panel and the controls column (its panes now live in the sheets) */
body.ready .panel{display:none!important}
body.ready .controls>*:not(#batchRow){display:none!important}
body.ready .controls{margin-top:0}
body.ready .tip,body.ready .previewbar,body.ready .pv-hint{display:none}
body.ready .stage{margin-top:10px}
body.ready .prevcol .preview{margin-top:0}

/* photo-bound floats: size chip bottom-left of the editor, Çerçeve / Önce-sonra on the preview */
.mcs-fab{position:absolute;inset:8px;z-index:6;display:none;pointer-events:none;flex-direction:column;align-items:flex-end;justify-content:space-between}
.mcs-fab>*{pointer-events:auto}
body.ready.mcs-prev .mcs-fab{display:flex}
body:not(.mcs-prev) .mcs-fab{display:none!important}
.mcs-fab .mcs-pvb{display:flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 12px;border:1px solid rgba(255,255,255,.14);border-radius:14px;
  background:rgba(28,28,30,.72)!important;color:#fff!important;font:600 13px/1 var(--sans);box-shadow:0 4px 14px rgba(0,0,0,.35);backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%)}
.mcs-fab #frameBtn{order:0;position:absolute;top:0;right:0}
.mcs-fab #frameBtn::after{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.25)}
.mcs-fab #frameBtn.on::after{background:#34C759;box-shadow:0 0 0 3px rgba(52,199,89,.35)}
.mcs-fab #wipeBtn{position:absolute;top:auto;bottom:0;right:0}
.mcs-fab #wipeBtn.on{box-shadow:inset 0 0 0 2px var(--accent)}
body.ready .mcs-size{display:flex}
body.mcs-prev .mcs-size{display:none!important}
.mcs-size{left:12px;bottom:12px}
@media(max-width:899px){
  .mcs-size{left:6px;bottom:6px;flex-direction:column;gap:3px;min-height:0;width:44px;padding:7px 0;font-size:10.5px;border-radius:13px;justify-content:center}
  .mcs-size span{max-width:44px;text-align:center;white-space:nowrap;overflow:hidden;line-height:1.1}
}

/* sheet contents: the old rows, restyled for a bottom sheet */
.mcs-s .lay-row{flex-wrap:wrap;gap:8px}
.mcs-sw{display:flex;width:100%;min-height:48px;margin:0 0 10px;justify-content:center;font-size:14px}
.mcs-fxbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.mcs-fxbar .btn-ghost{flex:1 1 40%;min-height:48px}
.mcs-aihint{margin:0 0 10px;font-size:13px;color:var(--muted)}
.mcs-cats{display:flex;gap:6px;overflow-x:auto;padding:0 0 10px;margin:0 -2px}
.mcs-cat{flex:none;min-height:40px;padding:0 14px;border:0;border-radius:20px;background:var(--fill);color:var(--text);font:600 13px/1 var(--sans);cursor:pointer}
.mcs-cat.on{background:rgba(0,122,255,.15);color:var(--accent)}
.ig-sheet .mask-opts .mask-sel{min-height:44px}
.ig-sheet .mask-rng{max-width:none;flex:1 1 140px;height:8px;margin:18px 0}
.ig-sheet #colorLutMount{margin:0}

/* landing: the secondary "bulk" pill is not a second primary action */
body:not(.ready) .drop .pill-2{background:none;border:0;box-shadow:none;min-height:44px;margin-top:8px;font-size:14px;color:var(--accent);width:auto}
body:not(.ready) .drop .pill-2::before{display:none}

/* select → chip rows */
.mcs-hide{display:none!important}
.mcs-chips{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 100%;margin:4px 0}
.mcs-chip{min-height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--text);font:600 14px var(--sans);cursor:pointer;transition:transform .1s var(--spring)}
.mcs-chip:active{transform:scale(.96)}
.mcs-chip.on{background:color-mix(in srgb,var(--accent) 15%,var(--panel));color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}

/* PC: Önce / sonra sits bottom-right of the stage with its label (as in the PC mockup). The stage is taller than the viewport, so it is placed at the bottom of the FIRST screen (or the stage's own bottom when that is higher) and then scrolls away WITH the page — never fixed over the SEO text below */
@media(min-width:900px){
  body.mcs-prev .mcs-fab #wipeBtn{position:absolute;right:0;bottom:auto;top:min(calc(100vh - 150px),calc(100% - 52px));width:auto}
  body.mcs-prev .mcs-fab #wipeBtn::after{content:attr(data-lbl);font:600 13px/1 var(--sans)}
}

/* the sheet's own title already says "Düzen" */
.mcs-s #layRow .mini-lbl{display:none}

/* Düzen sheet: four icon chips (Tam · Kart · Bulanık · 2×2) */
.mcs-s #laySeg{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;background:none;padding:0;border:0;box-shadow:none}
.mcs-s #laySeg button{min-height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:14px;background:var(--fill);color:var(--text);font:600 12px/1.1 var(--sans);padding:0 4px}
.mcs-s #laySeg button.on{background:color-mix(in srgb,var(--accent) 15%,var(--panel));color:var(--accent);box-shadow:none}
.mcs-s #laySeg .mcs-layic{display:flex}

/* The bottom bar is a FIXED object: it must not move while the page scrolls (Osman, 2026-10-15).
   Every tool stylesheet has html,body{overflow-x:hidden}; with html non-visible that makes <body> a scroll container of
   its own, and Safari then lets fixed children drift with it. `clip` cuts the overflow without making a scroller, so the
   viewport is the only scroll container. The dock also gets its own compositor layer so it never repaints late. */
html body{overflow-x:clip!important}
.mcs-dock{-webkit-transform:translateZ(0);transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden}

/* zoom capsule: bottom-left of the edit panel, directly above the size chip (same place as Retro Effect) */
/* UI_RULES §33 (Osman, 2026-10-21): tuval düzeni her araçta aynı — zoom kapsülü PC'de de dikey, sol altta */
body.ready #editcol .pvzoomf{right:auto;top:auto;left:12px;bottom:62px;flex-direction:column;align-items:center}
body.ready #editcol .pvzoomf .pvfval{border:0;min-width:0;width:40px;padding:1px 0;font-size:12px;color:#fff}
@media(max-width:899px){body.ready #editcol .pvzoomf{left:6px;bottom:104px;flex-direction:column}body.ready #editcol .pvzoomf .pvfval{border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18)}}

/* PILOT inner scroll (shell.js INNER_SCROLL): desktop >=1100px with a photo open. The window does not scroll, <body> does, so the
   side-rail ads do not react to scrolling. shell.js only adds the classes at that width; nothing here touches a phone. */
html.mcs-inner{height:100%;overflow:hidden}
html body.mcs-inner{height:100dvh;box-sizing:border-box;overflow:hidden auto!important;overscroll-behavior:contain}
html body.mcs-inner.ig-locked{overflow:hidden!important}