/* Vifyo Workspace v2 - generated from approved prototype */
/* ============ Vifyo Workspace — Design Tokens ============ */
:root{
  --accent:#6C4CF5;
  --accent-600:#5B3EE0;
  --accent-soft:#F1EDFE;
  --accent-glow:rgba(108,76,245,.28);
  --ink:#17151F;
  --ink-2:#57536A;
  --ink-3:#9A96AB;
  --line:#EAE8F1;
  --line-strong:#DEDBE9;
  --surface:#FFFFFF;
  --glass:rgba(255,255,255,.88);
  --canvas-bg:#F7F6FB;
  --dot:#D8D5E5;
  --danger:#E5484D;
  --ok:#30A46C;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px;
  --sh-1:0 1px 2px rgba(23,21,31,.05),0 0 0 1px rgba(23,21,31,.04);
  --sh-2:0 4px 16px -2px rgba(23,21,31,.08),0 0 0 1px rgba(23,21,31,.04);
  --sh-3:0 12px 40px -8px rgba(23,21,31,.16),0 0 0 1px rgba(23,21,31,.05);
  --sh-node:0 1px 2px rgba(23,21,31,.06),0 10px 34px -10px rgba(35,25,80,.18);
  --ease:cubic-bezier(.22,1,.36,1);
  font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-feature-settings:"cv02","cv03","cv11";
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{background:var(--canvas-bg);color:var(--ink);font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#D9D6E6;border-radius:99px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#C4C0D6;border:2px solid transparent;background-clip:content-box}
svg{display:block}
.i{width:16px;height:16px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
kbd{font:600 10px/1 "Inter";color:var(--ink-3);background:#F4F3F9;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:3px 5px;letter-spacing:.02em}
[hidden]{display:none !important}

/* ============ Layout ============ */
.app{position:relative;width:100vw;height:100vh;overflow:hidden}

/* ============ Top Bar ============ */
.topbar{position:absolute;inset:0 0 auto 0;height:52px;z-index:60;display:flex;align-items:center;gap:2px;padding:0 12px;background:var(--glass);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;padding:6px 10px 6px 4px;border-radius:var(--r-sm);text-decoration:none;color:var(--ink)}
/* Marka değişti: VifyoHub -> Vifyo Workspace. Eski düz mor kare + "V" harfi yerine, gerçek logodaki
   turuncu-yeşil degrade + kare-kök (√) sembolüne benzeyen çizgi işaret kullanılıyor (bkz. brand-mark-svg). */
.brand-mark{width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,#FF8A3D 0%,#FF7A30 45%,#22B573 100%);display:grid;place-items:center;box-shadow:0 2px 9px rgba(255,122,48,.38)}
.brand-mark-svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.brand b{font-size:13.5px;font-weight:700;letter-spacing:-.01em}
.ws-switch{display:flex;align-items:center;gap:7px;padding:6px 10px;border-radius:var(--r-sm);color:var(--ink-2);font-weight:500;transition:background .15s}
.ws-switch:hover{background:#F1F0F7}
.ws-switch .dot{width:7px;height:7px;border-radius:99px;background:var(--ok)}
.ws-switch .i{width:13px;height:13px;color:var(--ink-3)}
.tb-sep{width:1px;height:22px;background:var(--line);margin:0 8px;flex:none}
.menu{display:flex;gap:1px}
.menu>button{padding:6px 10px;border-radius:var(--r-sm);color:var(--ink-2);font-weight:500;transition:background .15s,color .15s;position:relative}
.menu>button:hover,.menu>button.open{background:#F1F0F7;color:var(--ink)}
.menu>button.ai-menu{color:var(--accent);font-weight:600}
.tb-spacer{flex:1}
.cmd{display:flex;align-items:center;gap:8px;width:300px;height:32px;padding:0 10px;border-radius:99px;background:#F3F2F8;border:1px solid transparent;color:var(--ink-3);transition:all .2s var(--ease)}
.cmd:focus-within{background:#fff;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);width:360px}
.cmd input{flex:1;outline:0;color:var(--ink);font-size:12.5px}
.cmd input::placeholder{color:var(--ink-3)}
.cmd kbd{margin-left:auto}
.icon-btn{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--r-sm);color:var(--ink-2);transition:background .15s,color .15s}
.icon-btn:hover{background:#F1F0F7;color:var(--ink)}
.icon-btn:disabled{opacity:.35;cursor:default}
.icon-btn:disabled:hover{background:none}
/* Mobil hamburger tetikleyicisi — masaüstünde gizli, dar ekranda (bkz. aşağıdaki @media) görünür olur. */
.topbar-burger{display:none;width:32px;height:32px;place-items:center;border-radius:var(--r-sm);color:var(--ink-2);transition:background .15s,color .15s;flex:none}
.topbar-burger:hover,.topbar-burger.open{background:#F1F0F7;color:var(--ink)}
.topbar-burger .i{width:18px;height:18px}
.zoom-read{min-width:52px;height:32px;display:grid;place-items:center;border-radius:var(--r-sm);font-weight:600;font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums;transition:background .15s}
.zoom-read:hover{background:#F1F0F7}
.save-state{display:flex;align-items:center;gap:6px;padding:0 10px;color:var(--ink-3);font-size:12px;font-weight:500;white-space:nowrap}
.save-state .dot{width:6px;height:6px;border-radius:99px;background:var(--ok);transition:background .3s}
.save-state.saving .dot{background:#F5A524;animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.4}}
.btn{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;border-radius:var(--r-sm);font-weight:600;font-size:12.5px;transition:all .18s var(--ease);white-space:nowrap}
.btn.ghost{color:var(--ink-2);border:1px solid var(--line-strong);background:#fff}
.btn.ghost:hover{border-color:var(--ink-3);color:var(--ink)}
.btn.primary{background:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(23,21,31,.1),0 4px 14px -4px var(--accent-glow)}
.btn.primary:hover{background:var(--accent-600);transform:translateY(-1px);box-shadow:0 2px 4px rgba(23,21,31,.1),0 8px 20px -4px var(--accent-glow)}
.btn.premium{background:linear-gradient(120deg,#7B5CFF,#B54CF5 90%);color:#fff;box-shadow:0 4px 14px -4px rgba(150,76,245,.5)}
.btn.premium:hover{transform:translateY(-1px);filter:brightness(1.06)}
.avatar{width:30px;height:30px;border-radius:99px;background:linear-gradient(135deg,#FFB199,#FF7E5F);color:#fff;font-weight:700;font-size:12px;display:grid;place-items:center;margin-left:6px;border:2px solid #fff;box-shadow:var(--sh-1);transition:transform .15s}
.avatar:hover{transform:scale(1.06)}

/* dropdown menus */
.pop{position:absolute;z-index:100;min-width:224px;background:#fff;border-radius:var(--r-md);box-shadow:var(--sh-3);padding:5px;opacity:0;transform:translateY(-4px) scale(.98);pointer-events:none;transition:opacity .14s var(--ease),transform .14s var(--ease)}
.pop.on{opacity:1;transform:none;pointer-events:auto}
.pop button.mi{display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;border-radius:7px;color:var(--ink);font-weight:500;font-size:12.5px;text-align:left;transition:background .1s}
.pop button.mi:hover{background:var(--accent-soft);color:var(--accent-600)}
.pop button.mi .i{width:15px;height:15px;color:var(--ink-3)}
.pop button.mi:hover .i{color:var(--accent)}
.pop button.mi kbd{margin-left:auto}
.pop button.mi:disabled{opacity:.4;pointer-events:none;cursor:default}
.pop .mi-sep{height:1px;background:var(--line);margin:5px 7px}
.pop .mi-title{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);padding:7px 9px 4px}

/* ============ Left Sidebar ============ */
.side{position:absolute;left:12px;top:64px;bottom:76px;z-index:50;display:flex;border-radius:var(--r-lg);background:var(--glass);backdrop-filter:blur(18px);box-shadow:var(--sh-2);overflow:hidden;transition:transform .25s var(--ease),opacity .25s var(--ease)}
.side.hidden-panel{transform:translateX(-120%);opacity:0}
.side-rail{width:46px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0;border-right:1px solid var(--line)}
.side-rail button{position:relative;width:34px;height:34px;display:grid;place-items:center;border-radius:9px;color:var(--ink-3);transition:all .15s}
.side-rail button:hover{background:#F1F0F7;color:var(--ink)}
.side-rail button.on{background:var(--accent-soft);color:var(--accent)}
.side-rail button.on::before{content:"";position:absolute;left:-6px;width:3px;height:16px;border-radius:99px;background:var(--accent)}
.side-rail .rail-tip{position:absolute;left:calc(100% + 10px);top:50%;translate:0 -50%;background:var(--ink);color:#fff;font-size:11px;font-weight:600;padding:5px 8px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;z-index:10}
.side-rail button:hover .rail-tip{opacity:1}
.side-body{width:236px;display:flex;flex-direction:column;min-height:0}
.side-head{display:flex;align-items:center;justify-content:space-between;padding:13px 14px 9px}
.side-head b{font-size:13px;font-weight:700;letter-spacing:-.01em}
.side-head .icon-btn{width:26px;height:26px;border-radius:7px}
.side-scroll{flex:1;overflow-y:auto;padding:2px 10px 12px;min-height:0}
.side-note{font-size:11px;color:var(--ink-3);padding:4px 4px 10px;line-height:1.5}

/* layers */
.lay{display:flex;align-items:center;gap:8px;width:100%;padding:6px 7px;border-radius:9px;text-align:left;transition:background .12s;color:var(--ink)}
.lay:hover{background:#F1F0F7}
.lay.sel{background:var(--accent-soft)}
.lay .th{width:26px;height:26px;border-radius:7px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-3);flex:none;overflow:hidden}
.lay.sel .th{border-color:var(--accent);color:var(--accent)}
.lay .th .i{width:13px;height:13px}
.lay .nm{flex:1;min-width:0}
.lay .nm b{display:block;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lay .nm small{font-size:10.5px;color:var(--ink-3)}
.lay .act{display:none;gap:2px}
.lay:hover .act,.lay.sel .act{display:flex}
.lay .act span{width:22px;height:22px;display:grid;place-items:center;border-radius:6px;color:var(--ink-3)}
.lay .act span:hover{background:#E6E4F0;color:var(--ink)}
.lay .act .i{width:12.5px;height:12.5px}
.lay.locked .nm b{color:var(--ink-3)}

/* asset grid */
.agrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:2px}
.acard{position:relative;border-radius:10px;background:#fff;border:1px solid var(--line);overflow:hidden;cursor:grab;transition:all .18s var(--ease)}
.acard:hover{border-color:var(--accent);box-shadow:0 6px 18px -6px var(--accent-glow);transform:translateY(-2px)}
.acard .pv{height:64px;display:grid;place-items:center;background:linear-gradient(160deg,#FAF9FE,#F1EFFA)}
.acard .cap{padding:6px 8px;font-size:10.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-top:1px solid var(--line)}
.acard .badge{position:absolute;top:5px;right:5px;font-size:9px;font-weight:700;padding:2px 5px;border-radius:5px;background:var(--accent);color:#fff;letter-spacing:.03em}
.up-drop{margin-top:10px;border:1.5px dashed var(--line-strong);border-radius:10px;padding:14px 10px;text-align:center;color:var(--ink-3);font-size:11px;font-weight:500;transition:all .15s;cursor:pointer}
.up-drop:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

/* history */
.hist{display:flex;gap:10px;padding:7px 6px;border-radius:9px}
.hist:hover{background:#F1F0F7}
.hist .hdot{width:8px;height:8px;border-radius:99px;background:var(--line-strong);margin-top:5px;flex:none}
.hist.now .hdot{background:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.hist b{display:block;font-size:12px;font-weight:600}
.hist small{font-size:10.5px;color:var(--ink-3)}

/* ============ Canvas ============ */
.stage{position:absolute;inset:0;overflow:hidden;background:var(--canvas-bg);background-image:radial-gradient(circle,var(--dot) 1px,transparent 1px);background-size:24px 24px;cursor:default;touch-action:none}
.stage.hand{cursor:grab}
.stage.hand.panning{cursor:grabbing}
.world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}

/* nodes */
.node{position:absolute;transform-origin:center;user-select:none}
.node .body{width:100%;height:100%;border-radius:6px;overflow:hidden;box-shadow:var(--sh-node);background:#fff}
.node.type-note .body,.node.type-signature .body,.node.type-stamp .body,.node.type-text .body{box-shadow:none;background:transparent;overflow:visible}
.node.type-note .body{box-shadow:0 8px 24px -8px rgba(120,90,20,.35)}
.node:hover .body{outline:1.5px solid rgba(108,76,245,.4);outline-offset:1px}
.node.sel:hover .body{outline:none}
.node.dragging{cursor:grabbing}
.node .label{position:absolute;bottom:100%;left:0;margin-bottom:7px;font-size:11px;font-weight:600;color:var(--ink-3);white-space:nowrap;display:flex;gap:6px;align-items:center;pointer-events:none}
.node .label .i{width:12px;height:12px}
.node.sel .label{color:var(--accent)}
/* selection frame */
.node .frame{position:absolute;inset:-1.5px;border:1.5px solid var(--accent);border-radius:7px;pointer-events:none;display:none}
.node.sel .frame{display:block}
.node [contenteditable="true"]{user-select:text;-webkit-user-select:text;cursor:text}
.node.editing .h,.node.editing .frame{display:none!important}
.h{position:absolute;width:10px;height:10px;background:#fff;border:1.5px solid var(--accent);border-radius:3.5px;pointer-events:auto;box-shadow:0 1px 3px rgba(23,21,31,.15);display:none}
.node.sel:not(.locked) .h{display:block}
.node .label{display:none}
.node.type-pdf .label,.node.type-module .label,.node.sel .label{display:flex}
.node.type-module .body{border-radius:12px}
.h.nw{top:-6px;left:-6px;cursor:nwse-resize}.h.ne{top:-6px;right:-6px;cursor:nesw-resize}
.h.sw{bottom:-6px;left:-6px;cursor:nesw-resize}.h.se{bottom:-6px;right:-6px;cursor:nwse-resize}
.h.n{top:-6px;left:50%;translate:-50% 0;cursor:ns-resize}.h.s{bottom:-6px;left:50%;translate:-50% 0;cursor:ns-resize}
.h.w{left:-6px;top:50%;translate:0 -50%;cursor:ew-resize}.h.e{right:-6px;top:50%;translate:0 -50%;cursor:ew-resize}
.h.rot{top:-30px;left:50%;translate:-50% 0;border-radius:99px;cursor:crosshair}
.h.rot::after{content:"";position:absolute;top:100%;left:50%;translate:-50% 0;width:1.5px;height:14px;background:var(--accent)}
.node .dims{position:absolute;top:calc(100% + 8px);left:50%;translate:-50% 0;background:var(--accent);color:#fff;font-size:10px;font-weight:700;font-variant-numeric:tabular-nums;padding:3px 7px;border-radius:5px;white-space:nowrap;display:none;pointer-events:none}
.node.sel.active-op .dims{display:block}

/* smart guides & marquee */
.guide{position:absolute;background:#FF4D8D;pointer-events:none;z-index:5}
.guide.v{width:1px}.guide.h{height:1px}
.marquee{position:absolute;border:1px solid var(--accent);background:var(--accent-glow);border-radius:3px;pointer-events:none;z-index:6;opacity:.5}

/* PDF page mock content */
.pdfpage{width:100%;height:100%;background:#fff;padding:9% 9.5%;display:flex;flex-direction:column;gap:4.5%;font-size:6px;color:#3A3846}
.pdfpage .ph-row{display:flex;justify-content:space-between;align-items:flex-start}
.pdfpage .ph-logo{width:17%;aspect-ratio:2.6;border-radius:4px;background:linear-gradient(120deg,var(--accent),#9B6DFF)}
.pdfpage .ph-h{height:8px;border-radius:3px;background:#232130;width:52%}
.pdfpage .ph-sub{height:5px;border-radius:3px;background:#C9C6D6;width:34%;margin-top:4px}
.pdfpage .ln{height:4px;border-radius:2px;background:#E4E2EC}
.pdfpage .ln.w9{width:92%}.pdfpage .ln.w7{width:74%}.pdfpage .ln.w8{width:83%}.pdfpage .ln.w5{width:55%}.pdfpage .ln.w6{width:64%}
.pdfpage .tbl{border:1px solid #E4E2EC;border-radius:4px;overflow:hidden;margin-top:2%}
.pdfpage .tbl .tr{display:flex;border-top:1px solid #EDEBF3}
.pdfpage .tbl .tr:first-child{border-top:0;background:#F4F3F9}
.pdfpage .tbl .td{flex:1;padding:2.6% 3%;display:flex}
.pdfpage .tbl .td i{height:4px;border-radius:2px;background:#D6D3E2;width:70%;display:block}
.pdfpage .tbl .tr:first-child .td i{background:#8B88A0}
.pdfpage .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center}
.pdfpage .ph-total{width:24%;height:9px;border-radius:3px;background:var(--accent-soft);border:1px solid #DCD2FB}

/* sticky note — text-body ile aynı sebeple white-space:pre-wrap eklendi: satır sonları
   düzenleme sırasında tarayıcının kendi <div>/<br> yapısıyla zaten görünüyordu, ama blur
   sonrası n.text (düz metin, \n ile) yeniden ${esc(...)} olarak basılınca "white-space:normal"
   \n'leri boşluğa çeviriyor, kaydedilmiş satır sonları kayboluyordu — aynı kök sebep. */
.note-body{width:100%;height:100%;background:linear-gradient(160deg,#FFF3B8,#FFE97D);border-radius:4px 4px 18px 4px;padding:14px;font-size:13px;font-weight:500;color:#5C4A05;line-height:1.5;font-family:"Caveat",cursive;font-size:19px;white-space:pre-wrap;overflow-wrap:break-word}

/* stamp */
.stamp-body{width:100%;height:100%;display:grid;place-items:center}
.stamp-svg{width:100%;height:100%}

/* qr */
.qr-body{width:100%;height:100%;background:#fff;border-radius:8px;padding:9%;box-shadow:var(--sh-node)}
.qr-body svg{width:100%;height:100%}

/* text node — KRİTİK: önceden "display:flex" idi (yatay hizalamayı textStyleCss()'teki
   "justify-content" ile sağlamak için). Ancak contentEditable bir öğe flex konteyner olunca,
   Enter tuşuna basıldığında tarayıcının eklediği yeni satır <div>'i bir flex ÖĞESİ olarak
   satır YÖNÜNDE (yan yana) diziliyor, alt satıra geçmiyor — "enter'a basınca alt satıra
   geçmiyor dümdüz yazılıyor" şikayetinin kök sebebi buydu. text-align zaten aynı yatay
   hizalamayı normal blok akışında da sağladığı için flex'e hiç ihtiyaç yoktu; kaldırılınca
   Enter tekrar normal şekilde yeni satır açıyor, görsel hizalama text-align ile korunuyor.
   overflow-wrap eklendi: tek kelimelik uzun metinler artık kutu sınırını taşırmadan sarıyor. */
.text-body{width:100%;height:100%;font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.2;overflow-wrap:break-word;white-space:pre-wrap}

/* signature */
.sig-body{width:100%;height:100%}
.sig-body svg{width:100%;height:100%;overflow:visible}
.sig-stroke{fill:none;stroke:#1B2B8F;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}

/* image node */
.img-body{width:100%;height:100%}
.img-body svg,.img-body img{width:100%;height:100%;object-fit:cover;display:block}

/* ============ Right Properties Panel ============ */
.props{position:absolute;right:12px;top:64px;z-index:50;width:252px;max-height:calc(100vh - 152px);display:flex;flex-direction:column;border-radius:var(--r-lg);background:var(--glass);backdrop-filter:blur(18px);box-shadow:var(--sh-2);overflow:hidden;transition:transform .22s var(--ease),opacity .22s var(--ease)}
.props.off{transform:translateX(16px);opacity:0;pointer-events:none}
.props-head{display:flex;align-items:center;gap:9px;padding:13px 14px 10px;border-bottom:1px solid var(--line)}
.props-head .tico{width:28px;height:28px;border-radius:8px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.props-head .tico .i{width:14px;height:14px}
.props-head b{font-size:13px;font-weight:700;display:block}
.props-head small{font-size:10.5px;color:var(--ink-3);display:block}
.props-scroll{overflow-y:auto;padding:6px 14px 14px}
.pgroup{padding:10px 0;border-top:1px solid var(--line)}
.pgroup:first-child{border-top:0}
.pgroup>b{display:block;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.prow{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.prow:last-child{margin-bottom:0}
.prow label{width:64px;font-size:11.5px;font-weight:500;color:var(--ink-2);flex:none}
.prow .val{margin-left:auto;font-size:11px;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
.pin{flex:1;min-width:0;height:28px;padding:0 8px;border-radius:7px;border:1px solid var(--line-strong);background:#fff;font-size:12px;font-weight:500;outline:0;transition:border .15s,box-shadow .15s}
.pin:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
select.pin{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239A96AB' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;padding-right:22px}
input[type=range]{flex:1;appearance:none;height:4px;border-radius:99px;background:linear-gradient(90deg,var(--accent) var(--fill,100%),#E6E4F0 var(--fill,100%));outline:0}
input[type=range]::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:99px;background:#fff;border:1.5px solid var(--accent);box-shadow:0 1px 4px rgba(23,21,31,.2);cursor:pointer;transition:transform .1s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
.seg{display:flex;background:#F1F0F7;border-radius:8px;padding:2px;flex:1}
.seg button{flex:1;height:24px;border-radius:6px;display:grid;place-items:center;color:var(--ink-3);transition:all .15s}
.seg button.on{background:#fff;color:var(--ink);box-shadow:var(--sh-1)}
.seg button .i{width:13px;height:13px}
.swatches{display:flex;gap:6px;flex-wrap:wrap}
.sw{width:22px;height:22px;border-radius:7px;border:1px solid rgba(23,21,31,.12);cursor:pointer;transition:transform .12s}
.sw:hover{transform:scale(1.12)}
.sw.on{outline:2px solid var(--accent);outline-offset:2px}
.pbtns{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.pbtn{height:30px;border-radius:8px;border:1px solid var(--line-strong);background:#fff;font-size:11.5px;font-weight:600;color:var(--ink-2);display:flex;align-items:center;justify-content:center;gap:6px;transition:all .15s}
.pbtn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.pbtn .i{width:13px;height:13px}
.pbtn.wide{grid-column:1/-1}
.prow .switch{margin-left:auto;width:32px;height:19px;border-radius:99px;background:#E1DFEA;position:relative;transition:background .18s;flex:none}
.prow .switch::after{content:"";position:absolute;top:2.5px;left:2.5px;width:14px;height:14px;border-radius:99px;background:#fff;box-shadow:0 1px 3px rgba(23,21,31,.25);transition:translate .18s var(--ease)}
.prow .switch.on{background:var(--accent)}
.prow .switch.on::after{translate:13px 0}

/* ============ Bottom Dock ============ */
.dock{position:absolute;left:50%;bottom:16px;translate:-50% 0;z-index:55;display:flex;align-items:center;gap:3px;padding:7px;border-radius:18px;background:var(--glass);backdrop-filter:blur(18px);box-shadow:var(--sh-3)}
.dock .tool{position:relative;width:38px;height:38px;display:grid;place-items:center;border-radius:12px;color:var(--ink-2);transition:all .15s var(--ease)}
.dock .tool:hover{background:#F1F0F7;color:var(--ink);transform:translateY(-2px)}
.dock .tool.on{background:var(--accent);color:#fff;box-shadow:0 4px 12px -2px var(--accent-glow)}
.dock .tool.plus{background:var(--accent-soft);color:var(--accent)}
.dock .tool.plus:hover{background:var(--accent);color:#fff}
.dock .tool .i{width:17px;height:17px}
.dock-sep{width:1px;height:24px;background:var(--line);margin:0 4px}
.tip{position:absolute;bottom:calc(100% + 10px);left:50%;translate:-50% 0;background:var(--ink);color:#fff;font-size:11px;font-weight:600;padding:5px 9px;border-radius:7px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s,translate .12s;display:flex;gap:6px;align-items:center}
.tip kbd{background:rgba(255,255,255,.16);border:0;color:#fff;padding:2px 4px}
.tool:hover .tip{opacity:1;translate:-50% -2px}
.dock-more{position:fixed;bottom:auto;left:0;top:0;translate:0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:8px;border-radius:var(--r-lg);background:#fff;box-shadow:var(--sh-3);opacity:0;pointer-events:none;transform:translateY(6px);transition:all .18s var(--ease);width:288px}
.dock-more.on{opacity:1;pointer-events:auto;transform:none}
.dock-more button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 4px 9px;border-radius:10px;font-size:10.5px;font-weight:600;color:var(--ink-2);transition:all .13s}
.dock-more button:hover{background:var(--accent-soft);color:var(--accent)}
.dock-more button .i{width:17px;height:17px}

/* ============ Zoom / bottom-right cluster ============ */
.zoomctl{position:absolute;right:12px;bottom:16px;z-index:55;display:flex;align-items:center;gap:2px;padding:5px;border-radius:13px;background:var(--glass);backdrop-filter:blur(18px);box-shadow:var(--sh-2)}
.zoomctl button{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;color:var(--ink-2);transition:background .13s}
.zoomctl button:hover{background:#F1F0F7;color:var(--ink)}
.zoomctl b{min-width:46px;text-align:center;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.zoomctl .i{width:14px;height:14px}

/* Mobil: nesneye basılı tutunca beliren, sürükleyip bırakınca silen çöp kutusu (workspace-v2.js,
   "basılı tutup çöp kutusuna sürükleyerek silme" bloğu). Konum "position:fixed" — dock/FAB rayı
   gibi diğer kalıcı arayüz parçalarıyla çakışmaması için dock'un (bottom:0, ~64-70px yükseklik)
   HEMEN üstünde, sağ altta duruyor. Varsayılan olarak gizli/küçük; yalnızca .show sınıfıyla belirir. */
.canvas-trash-zone{
  position:fixed;right:14px;bottom:calc(78px + env(safe-area-inset-bottom,0px));z-index:90;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:#fff;color:var(--ink-2);box-shadow:var(--sh-3);
  opacity:0;transform:scale(.5);pointer-events:none;
  transition:opacity .16s,transform .16s,background .12s,color .12s;
}
.canvas-trash-zone.show{opacity:1;transform:scale(1)}
.canvas-trash-zone .i{width:24px;height:24px}
.canvas-trash-zone.hover{background:#E0473E;color:#fff;transform:scale(1.12)}
/* Sürüklenen node, çöp kutusunun üzerine gelince "silinecek" olduğu görsel olarak da anlaşılsın diye. */
.node.trash-target{opacity:.35;filter:saturate(0)}

/* ============ AI FAB & panel ============ */
.ai-fab{position:absolute;right:12px;bottom:68px;z-index:56;width:46px;height:46px;border-radius:16px;background:linear-gradient(135deg,#8B6DFF,var(--accent) 60%,#4E2FD4);color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px -4px var(--accent-glow),0 2px 6px rgba(23,21,31,.15);transition:all .2s var(--ease)}
.ai-fab:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 12px 30px -4px var(--accent-glow),0 2px 6px rgba(23,21,31,.15)}
.ai-fab .i{width:20px;height:20px}
.ai-fab::after{content:"";position:absolute;inset:-3px;border-radius:19px;border:1.5px solid var(--accent-glow);opacity:0;animation:aiping 3s infinite}
@keyframes aiping{0%{opacity:.9;inset:-1px}70%{opacity:0;inset:-8px}100%{opacity:0}}
.ai-panel{position:absolute;right:12px;bottom:124px;z-index:70;width:330px;max-height:min(520px,calc(100vh - 200px));display:flex;flex-direction:column;border-radius:var(--r-xl);background:#fff;box-shadow:var(--sh-3);overflow:hidden;opacity:0;transform:translateY(10px) scale(.98);pointer-events:none;transition:all .2s var(--ease)}
.ai-panel.on{opacity:1;transform:none;pointer-events:auto}
.ai-head{padding:14px 16px 12px;background:linear-gradient(135deg,#F5F1FF,#EFE9FF);border-bottom:1px solid var(--line)}
.ai-head .row{display:flex;align-items:center;gap:9px}
.ai-head .orb{width:30px;height:30px;border-radius:11px;background:linear-gradient(135deg,#8B6DFF,var(--accent));display:grid;place-items:center;color:#fff}
.ai-head .orb .i{width:15px;height:15px}
.ai-head b{font-size:13.5px;font-weight:700}
.ai-head small{display:block;font-size:11px;color:var(--ink-2)}
.ai-input{margin:12px 16px 4px;display:flex;align-items:center;gap:8px;height:36px;padding:0 11px;border-radius:11px;border:1px solid var(--line-strong);background:#FBFAFE;transition:all .15s}
.ai-input:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);background:#fff}
.ai-input input{flex:1;outline:0;font-size:12.5px}
.ai-input .i{width:14px;height:14px;color:var(--ink-3)}
.ai-list{flex:1;overflow-y:auto;padding:8px}
.ai-cat{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:9px 9px 5px}
.ai-cmd{display:flex;align-items:center;gap:10px;width:100%;padding:8px 9px;border-radius:10px;text-align:left;transition:background .12s}
.ai-cmd:hover,.ai-cmd.hl{background:var(--accent-soft)}
.ai-cmd .cico{width:28px;height:28px;border-radius:9px;background:#F3F1FB;color:var(--accent);display:grid;place-items:center;flex:none}
.ai-cmd .cico .i{width:14px;height:14px}
.ai-cmd b{display:block;font-size:12.5px;font-weight:600}
.ai-cmd small{display:block;font-size:10.5px;color:var(--ink-3)}

/* ============ Workspace QR: sabit köşe ikonu + Gelen Kutusu ============
   Alt sağ köşedeki zoom kontrolleriyle (.zoomctl: right:12,bottom:16) neredeyse aynı konumda
   çakışıyordu (kullanıcı geri bildirimi — mobil genişlikte ikonlar zoom pill'inin üzerine biniyordu).
   Bu yüzden ÜST sağ köşeye taşındı: topbar'ın (height:52) hemen altı, .side/.props ile aynı
   top:64 konvansiyonu kullanılıyor. */
.wqr-fab{position:absolute;right:12px;top:64px;z-index:56;width:46px;height:46px;border-radius:16px;background:#fff;color:var(--accent);box-shadow:var(--sh-2);display:grid;place-items:center;transition:all .2s var(--ease)}
.wqr-fab:hover{transform:translateY(-2px) scale(1.04);box-shadow:var(--sh-3)}
.wqr-fab .i{width:19px;height:19px}
.wqr-fab-inbox{right:66px}
.wqr-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--danger);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;line-height:1}
.wqr-panel{position:absolute;right:12px;top:118px;z-index:70;width:360px;max-height:min(600px,calc(100vh - 150px));display:flex;flex-direction:column;border-radius:var(--r-xl);background:#fff;box-shadow:var(--sh-3);overflow:hidden;opacity:0;transform:translateY(-10px) scale(.98);pointer-events:none;transition:all .2s var(--ease)}
.wqr-panel.on{opacity:1;transform:none;pointer-events:auto}
/* Gelen Kutusu sadece bir bağlantı/QR göstermiyor, gönderi listesi + görsel önizleme + detay
   barındırıyor — QR yönetim paneliyle aynı dar genişlikte sıkışıyordu. Kendi genişliği/yüksekliği var. */
.wqr-panel-inbox{right:66px;width:480px;max-height:min(680px,calc(100vh - 130px))}
.wqr-head{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;background:linear-gradient(135deg,#F5F1FF,#EFE9FF);border-bottom:1px solid var(--line)}
.wqr-head b{font-size:13.5px;font-weight:700}
.wqr-close{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:var(--ink-2)}
.wqr-close:hover{background:#fff;color:var(--ink)}
.wqr-close .i{width:14px;height:14px}
.wqr-body{padding:16px;overflow-y:auto}
.wqr-qr-preview{display:flex;justify-content:center;padding:14px;background:var(--canvas-bg);border-radius:var(--r-lg);margin-bottom:12px}
.wqr-qr-preview img{width:160px;height:160px;image-rendering:pixelated}
.wqr-label{display:block;font-size:11px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.wqr-link-row{display:flex;gap:6px;margin-bottom:14px}
.wqr-link-row input{flex:1;height:34px;padding:0 10px;border:1px solid var(--line-strong);border-radius:9px;font-size:11.5px;background:#FBFAFE;color:var(--ink-2)}
.wqr-link-row button{height:34px;padding:0 12px;border-radius:9px;background:var(--accent-soft);color:var(--accent);font-size:11.5px;font-weight:700}
.wqr-link-row button:hover{background:var(--accent);color:#fff}
.wqr-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wqr-btn{display:flex;align-items:center;justify-content:center;gap:6px;height:38px;border-radius:10px;background:#F4F3F9;font-size:11.5px;font-weight:700;color:var(--ink-2);transition:all .13s}
.wqr-btn .i{width:14px;height:14px}
.wqr-btn:hover{background:var(--accent-soft);color:var(--accent)}
.wqr-btn.primary{background:var(--accent);color:#fff;grid-column:1/-1}
.wqr-btn.primary:hover{background:var(--accent-600)}
.wqr-btn.danger:hover{background:#FDECEC;color:var(--danger)}
.wqr-empty{padding:24px 8px;text-align:center;color:var(--ink-2);font-size:12px}
.wqr-empty button{margin-top:10px;height:36px;padding:0 16px;border-radius:9px;background:var(--accent);color:#fff;font-weight:700;font-size:12px}
.wqr-tabs{display:flex;gap:6px;padding:12px 14px;overflow-x:auto;border-bottom:1px solid var(--line)}
.wqr-tabs button{flex:none;padding:7px 13px;border-radius:20px;font-size:11.5px;font-weight:700;color:var(--ink-2);background:#F4F3F9;white-space:nowrap;transition:background .12s,color .12s}
.wqr-tabs button:hover{background:#EAE7F5}
.wqr-tabs button.on{background:var(--accent);color:#fff}
.wqr-list{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:4px}
.wqr-empty-text{padding:28px 10px;text-align:center;color:var(--ink-3);font-size:12.5px}
.wqr-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 11px;border-radius:13px;text-align:left;background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(23,21,31,.03);transition:all .13s}
.wqr-item:hover{background:var(--accent-soft);border-color:#DCD3F9;transform:translateY(-1px);box-shadow:var(--sh-2)}
.wqr-item-thumb{width:54px;height:54px;border-radius:12px;background:#F1EFFA center/cover no-repeat;display:grid;place-items:center;color:var(--ink-3);flex:none;overflow:hidden;border:1px solid var(--line)}
.wqr-item-thumb img{width:100%;height:100%;object-fit:cover}
.wqr-item-body{flex:1;min-width:0}
.wqr-item-body b{display:block;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wqr-item-body .wqr-item-contact{display:block;font-size:11px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.wqr-item-body small{display:block;font-size:10.5px;color:var(--ink-3);margin-top:2px}
.wqr-status-pill{flex:none;font-size:10px;font-weight:800;padding:4px 9px;border-radius:20px;letter-spacing:.02em}
.wqr-status-New{background:#E9F3FF;color:#0C66E4}
.wqr-status-Reviewing{background:#FFF4E0;color:#B7791F}
.wqr-status-Approved{background:#E7F7EE;color:var(--ok)}
.wqr-status-Rejected{background:#FDECEC;color:var(--danger)}
.wqr-status-Transferred{background:#F1EFFA;color:var(--accent)}
/* Detay ekranı artık kendi içinde kaydırılan bir gövde (wqr-detail-scroll) + altta hep sabit
   kalan bir aksiyon çubuğundan (wqr-detail-actions) oluşuyor — görsel uzun olduğunda butonlar
   önceden sayfanın altına kayıp kayboluyordu, artık her zaman görünür. */
.wqr-detail{position:absolute;inset:0;background:#fff;display:flex;flex-direction:column;overflow:hidden}
.wqr-detail-scroll{flex:1;overflow-y:auto;padding:16px 18px}
.wqr-detail-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.wqr-detail-back{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--ink-2)}
.wqr-detail-back:hover{color:var(--accent)}
.wqr-detail-back .i{width:14px;height:14px;rotate:180deg}
.wqr-detail-dl{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--ink-2);background:#F4F3F9;flex:none}
.wqr-detail-dl:hover{background:var(--accent-soft);color:var(--accent)}
.wqr-detail-dl .i{width:15px;height:15px}
.wqr-detail-who{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.wqr-avatar{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent-600));color:#fff;font-size:16px;font-weight:800;display:grid;place-items:center;flex:none}
.wqr-detail-who-body{flex:1;min-width:0}
.wqr-detail-who-body b{display:block;font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wqr-detail-who-body small{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wqr-detail .wqr-note{font-size:12.5px;color:var(--ink-2);background:var(--canvas-bg);padding:12px 14px;border-radius:12px;margin-bottom:14px;line-height:1.55}
.wqr-detail-files{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:4px}
.wqr-detail-files a{display:block;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--canvas-bg);border:1px solid var(--line);box-shadow:var(--sh-2)}
.wqr-detail-files img,.wqr-detail-files video{width:100%;height:100%;object-fit:cover}
/* Gönderide tek dosya varsa 3'lü ızgaraya sıkıştırıp küçültmek yerine büyük, kendi en-boy
   oranında (object-fit:contain) tek bir önizleme gösterilir. Görsel artık dış çerçeveye
   yapışık değil — noktalı zemin üzerinde kendi köşeleri yuvarlatılmış ve gölgeli "kart" gibi
   duruyor, önceki halde görsel kenarları sert biçimde kırpılıyor gibi görünüyordu. */
.wqr-detail-single{display:flex;align-items:center;justify-content:center;width:100%;max-height:400px;min-height:180px;padding:14px;box-sizing:border-box;border-radius:var(--r-lg);overflow:hidden;background:var(--canvas-bg);background-image:radial-gradient(circle,var(--dot,#DCD9E8) 1px,transparent 1px);background-size:20px 20px;border:1px solid var(--line);margin-bottom:4px}
.wqr-detail-single img,.wqr-detail-single video{max-width:100%;max-height:372px;width:auto;height:auto;display:block;border-radius:10px;box-shadow:var(--sh-2)}
.wqr-detail-actions{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 18px;border-top:1px solid var(--line);background:#fff}

/* ============ AI görsel üretim kartı: canvas üzerinde beliren mini kart (popup değil) ============ */
.ai-gen-card{position:absolute;left:50%;top:96px;translate:-50% 0;z-index:82;width:340px;border-radius:var(--r-lg);background:#fff;box-shadow:var(--sh-3);padding:14px;animation:winin .18s var(--ease)}
.ai-gen-head{display:flex;align-items:center;gap:9px;margin-bottom:10px}
/* Her AI/CRM kartının sağ üstünde kapatma çarpısı — "her CRM'in sağ üstünde çarpı olsun" isteği. */
.ai-gen-close{margin-left:auto;flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:#9A96AB;background:transparent;border:1px solid transparent;transition:background .12s,color .12s}
.ai-gen-close:hover{background:#F3EFFE;color:#17151F}
.ai-gen-close .i{width:14px;height:14px}
.ai-gen-head .orb{width:28px;height:28px;border-radius:10px;background:linear-gradient(135deg,#8B6DFF,var(--accent));display:grid;place-items:center;color:#fff;flex:none}
.ai-gen-head .orb .i{width:14px;height:14px}
.ai-gen-head b{font-size:13px;font-weight:700}
.ai-gen-card textarea.pin{font-family:inherit;background:#FBFAFE}
.ai-gen-card textarea.pin:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);background:#fff}

/* ============ QR Kod Oluşturucu Sihirbazı (next-next-next) ============ */
.qrw-steps{display:flex;gap:6px;justify-content:center;margin-bottom:12px}
.qrw-steps span{width:22px;height:4px;border-radius:3px;background:#EAE6F7;transition:background .15s}
.qrw-steps span.on{background:var(--accent)}
.qrw-saved{display:flex;flex-direction:column;gap:6px;max-height:120px;overflow:auto}
.qrw-saved-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--line);border-radius:9px;cursor:pointer;background:#FBFAFE;text-align:left}
.qrw-saved-item:hover{border-color:var(--accent);background:var(--accent-soft)}
.qrw-saved-item img{width:26px;height:26px;border-radius:5px;flex:none;background:#fff;object-fit:contain}
.qrw-saved-item b{font-size:11.5px;display:block}
.qrw-saved-item small{font-size:10px;color:#9A96AB;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.qrw-shapes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.qrw-shape{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border:1.5px solid var(--line);border-radius:12px;font-size:11.5px;font-weight:600;color:#5F5A70}
.qrw-shape.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.qrw-shape-prev{width:28px;height:28px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px}
.qrw-shape-prev span, .qrw-shape-prev::before, .qrw-shape-prev::after{content:"";background:#17151F}
.qrw-shape-prev-square{background:#17151F;border-radius:2px}
.qrw-shape-prev-rounded{background:#17151F;border-radius:8px}
.qrw-shape-prev-dot{background:#17151F;border-radius:50%}
.qrw-shape-prev-heart{background:#17151F;clip-path:path("M14 26 C2 17 2 6 10 4 C13 3 14 6 14 8 C14 6 15 3 18 4 C26 6 26 17 14 26 Z")}
.qrw-preview{display:flex;align-items:center;justify-content:center;padding:16px;border:1px solid var(--line);border-radius:12px;background:#fff;min-height:180px}
.qrw-preview img{width:180px;height:180px;object-fit:contain}

/* ============ Sayfa içi zengin metin araç çubuğu (PDF/Word/PowerPoint/CRM şablonu ortak) ============ */
.doc-toolbar{position:absolute;z-index:90;display:flex;align-items:center;gap:5px;padding:6px;border-radius:12px;background:#fff;box-shadow:var(--sh-3);animation:winin .15s var(--ease);white-space:nowrap}
.dtb-el{height:28px;padding:0 6px;border-radius:7px;border:1px solid var(--line-strong);background:#fff;font-size:11.5px;font-weight:500;outline:0;max-width:130px}
.dtb-el.dtb-narrow{max-width:56px}
.dtb-el:focus{border-color:var(--accent)}
.dtb-btn{width:28px;height:28px;border-radius:7px;border:1px solid var(--line-strong);background:#fff;font-size:12.5px;font-weight:700;color:var(--ink-2);display:grid;place-items:center;transition:all .12s}
.dtb-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.dtb-btn .i{width:14px;height:14px}
.dtb-sep{width:1px;height:20px;background:var(--line);flex:none}
.dtb-swatch{position:relative;width:28px;height:28px;border-radius:7px;border:1px solid var(--line-strong);display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--ink-2);cursor:pointer;overflow:hidden;transition:border-color .12s}
.dtb-swatch:hover{border-color:var(--accent)}
.dtb-swatch .i{width:14px;height:14px}
.dtb-swatch input[type=color]{position:absolute;inset:0;opacity:0;cursor:pointer;border:0;padding:0}
/* Yazı rengi ikonu eskiden düz bir "A" harfiydi — hangi rengin seçili olduğu hiç belli olmuyordu
   ("renk paleti değiştirme ikonu daha belirgin olsun" isteği). Artık Google Docs tarzı: "A" harfinin
   altında GEÇERLİ rengi gösteren, JS ile dinamik güncellenen renkli bir çubuk var. */
.dtb-swatch-a{position:relative;z-index:1;line-height:1;pointer-events:none}
.dtb-swatch-bar{position:absolute;left:4px;right:4px;bottom:4px;height:3px;border-radius:2px;background:#17151f;pointer-events:none}

/* Belge sayfasına eklenen görseller için güvenlik ağı: eski/serbest olmayan (ör. yapıştırılan) görseller
   sayfa genişliğini asla aşıp kalıbı bozmasın. Serbest-konumlu (.doc-img-wrap) görseller kendi genişlik/
   yükseklikleriyle zaten sınırlı olduğundan aşağıdaki kural onlar için ayrıca geçersiz kılınır. */
.doc-page img{max-width:100%;height:auto}
/* Boş sayfa ipucu artık gerçek DOM içeriği değil, salt CSS — düzenlemeye başlanınca (activateDocEdit
   "is-empty" sınıfını kaldırır) anında kaybolur ve yazılan metne asla stil sızdırmaz. */
.doc-page.is-empty::before{content:"Boş sayfa — çift tıklayıp/dokunup yazın";color:#C9C6D6;font-size:13px;pointer-events:none}
.doc-img-wrap{position:absolute;cursor:move;display:block;line-height:0}
.doc-img-wrap img{width:100%;height:100%;max-width:none;object-fit:contain;display:block;border-radius:4px}
.doc-img-wrap[data-locked="1"]{cursor:default}
.doc-img-lock{position:absolute;top:-10px;right:-10px;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.25);padding:0;opacity:0;transition:opacity .12s}
.doc-img-lock .i{width:12px;height:12px;color:var(--ink-2)}
.doc-img-wrap:hover .doc-img-lock{opacity:1}
/* Dokunmatik cihazlarda :hover durumu hiç oluşmuyor — kilit butonu hiç görünmüyordu, belge içi
   kilitli bir görselin kilidi telefondan açılamıyordu. hover:none/pointer:coarse ile YALNIZCA
   dokunmatik/fareyi olmayan cihazlarda her zaman görünür ve biraz daha büyük yapıyoruz;
   fare kullanan masaüstü davranışı (yalnızca hover'da belirme) hiç değişmiyor. */
@media (hover:none), (pointer:coarse){
  .doc-img-lock{opacity:1;width:28px;height:28px;top:-12px;right:-12px}
  .doc-img-lock .i{width:14px;height:14px}
}

/* ============ Floating tool windows ============ */
.fwin{position:absolute;z-index:80;width:380px;border-radius:var(--r-lg);background:#fff;box-shadow:var(--sh-3);overflow:hidden;animation:winin .22s var(--ease)}
@keyframes winin{from{opacity:0;transform:translateY(10px) scale(.98)}}
.fwin-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);cursor:grab;background:#FBFAFE}
.fwin-head:active{cursor:grabbing}
.fwin-head .wico{width:28px;height:28px;border-radius:9px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.fwin-head .wico .i{width:14px;height:14px}
.fwin-head b{font-size:13px;font-weight:700;flex:1}
.fwin-head .icon-btn{width:26px;height:26px}
.fwin-body{padding:14px}
.fwin .drop{border:1.5px dashed var(--line-strong);border-radius:12px;padding:20px 12px;text-align:center;color:var(--ink-3);font-size:12px;transition:all .15s;cursor:pointer}
.fwin .drop:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.fwin .drop .i{width:20px;height:20px;margin:0 auto 7px;color:var(--accent)}
.fwin .filerow{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;margin-top:8px;background:#fff}
.fwin .filerow .fico{width:30px;height:36px;border-radius:5px;background:linear-gradient(160deg,#FDECEC,#FADCDC);border:1px solid #F3C9C9;color:#D64545;display:grid;place-items:center;font-size:8px;font-weight:800}
.fwin .filerow b{flex:1;font-size:12px;font-weight:600}
.fwin .filerow small{font-size:10.5px;color:var(--ink-3)}
.fwin .filerow .grip{color:var(--ink-3);cursor:grab}
.fwin-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 14px;border-top:1px solid var(--line);background:#FBFAFE}
.radio-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 2px}
.radio-cards button{padding:10px 6px;border-radius:10px;border:1px solid var(--line-strong);background:#fff;text-align:center;transition:all .15s}
.radio-cards button b{display:block;font-size:12px;font-weight:700}
.radio-cards button small{font-size:10px;color:var(--ink-3)}
.radio-cards button.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px var(--accent-glow)}
.fwin label.fl{display:block;font-size:11px;font-weight:600;color:var(--ink-2);margin:10px 0 6px}

/* ============ Toast ============ */
.toasts{position:absolute;left:50%;bottom:84px;translate:-50% 0;z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{display:flex;align-items:center;gap:9px;padding:10px 16px;border-radius:12px;background:var(--ink);color:#fff;font-size:12.5px;font-weight:500;box-shadow:var(--sh-3);animation:toastin .25s var(--ease)}
.toast .i{width:15px;height:15px;color:#9FF0C4}
@keyframes toastin{from{opacity:0;transform:translateY(8px)}}
.toast.out{opacity:0;transform:translateY(6px);transition:all .25s}

/* ============ Search results pop ============ */
.cmd-pop{position:absolute;top:46px;left:50%;translate:-50% 0;z-index:100;width:420px;max-height:380px;overflow-y:auto;background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:7px;opacity:0;transform:translateY(-4px);pointer-events:none;transition:all .15s var(--ease)}
.cmd-pop.on{opacity:1;transform:none;pointer-events:auto}

/* ============ Onboarding hint ============ */
.hintbar{position:absolute;left:50%;top:64px;translate:-50% 0;z-index:40;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-radius:99px;background:var(--glass);backdrop-filter:blur(14px);box-shadow:var(--sh-2);font-size:12px;color:var(--ink-2);animation:winin .4s var(--ease)}
.hintbar b{color:var(--ink)}
.hintbar button{width:24px;height:24px;border-radius:99px;display:grid;place-items:center;color:var(--ink-3)}
.hintbar button:hover{background:#EDEBF4;color:var(--ink)}

/* ============ Polish pass v2 ============ */
.dock{gap:4px;padding:8px}
.dock .tool{width:40px;height:40px}
.side-scroll{padding:2px 12px 14px}
.agrid{gap:10px}
.acard .cap{padding:7px 9px;letter-spacing:.01em}
.acard .pv{height:60px}
.pgroup{padding:12px 0}
.pgroup>b{margin-bottom:10px}
.ai-head{padding:15px 16px 13px}
.ai-list{padding:9px}
.ai-cmd{padding:9px 10px}
.side-foot{padding:10px 14px 12px;border-top:1px solid var(--line);font-size:10.5px;color:var(--ink-3)}
.side-foot b{color:var(--ink-2);font-weight:600}
.side-foot .bar{height:4px;border-radius:99px;background:#EDEBF4;margin-top:7px;overflow:hidden}
.side-foot .bar span{display:block;height:100%;width:34%;background:var(--accent);border-radius:99px}
/* ============ Module Launcher (redesigned "Modüller" panel) ============ */
.side:has([data-panel="modules"]:not([hidden])) .side-body{width:322px}
.mod-launcher{display:flex;flex-direction:column;gap:10px;padding-top:2px}
.mc{border:1px solid var(--line);border-radius:12px;background:#fff;padding:9px 10px;transition:border-color .15s,box-shadow .15s}
.mc:hover{border-color:var(--line-strong);box-shadow:var(--sh-1)}
/* Kompakt kart: başlık satırı (ikon+ad, tıklanınca genişler) + hep görünen tek ana aksiyon düğmesi
   yan yana; açıklama/ikincil aksiyonlar .mc-body içinde katlanmış durur — bkz. moduleCardParts()/
   mcCardHtml() (workspace-v2.js). Önceki sürümde her kart açıklama + çok sayıda düğmeyle her zaman
   tam açık duruyordu, bu da sol paneli kalabalık/amatörce gösteriyordu. */
.mc-row{display:flex;align-items:center;gap:8px}
.mc-head{display:flex;align-items:center;gap:9px;flex:1;min-width:0;border:0;margin:0;padding:2px;background:transparent;font:inherit;text-align:left;color:inherit;cursor:pointer;border-radius:8px;transition:background .13s}
.mc-head:hover{background:var(--accent-soft)}
.mc-head:hover .mc-title b{color:var(--accent)}
.mc-ico{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none}
.mc-ico .i{width:16px;height:16px}
.mc-title{flex:1;min-width:0;line-height:1.25}
.mc-title b{display:block;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .13s}
.mc-title small{font-size:10px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.mc-fav{color:#F5A524;flex:none}
.mc-chevron{display:grid;place-items:center;width:18px;height:18px;flex:none;color:var(--ink-3);transition:transform .18s var(--ease,ease)}
.mc-chevron .i{width:12px;height:12px}
.mc-head[aria-expanded="true"] .mc-chevron{transform:rotate(180deg)}
.mc-quick{flex:none}
.mc-body{margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}
.mc-body[hidden]{display:none}
.mc-desc{font-size:11px;color:var(--ink-2);margin:0;line-height:1.4}
.mc-recent{margin-top:8px;min-height:16px}
.mc-recent .mc-last{font-size:10px;color:var(--ink-3)}
.mc-recent .mc-empty{font-size:10.5px;color:var(--ink-3);font-style:italic}
.mc-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.mc-chip{font-size:10px;font-weight:600;color:var(--ink-2);background:#F4F3F9;border-radius:99px;padding:2px 8px;white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis}
.mc-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.mc-btn{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border-radius:7px;border:1px solid var(--line-strong);background:#fff;font-size:10.8px;font-weight:600;color:var(--ink-2);text-decoration:none;transition:all .13s}
.mc-btn .i{width:12px;height:12px}
.mc-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.mc-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.mc-btn.primary:hover{background:var(--accent-600);color:#fff}

/* table node — gerçek MS Excel'e benzer düzen: araç çubuğu + formül çubuğu (hücre referansı/sayfa
   sekmesi) + sütun harfleri (A/B/C…) + satır numaraları + ızgara çizgileri. Önceki sürümde bu görsel
   katman hiç CSS almamıştı ("serbest bir yapıda değil, tasarımı kötü" şikayetinin kaynağı) — araç
   çubuğu düğmeleri boşluksuz metin yığını gibi görünüyor, formül çubuğu satır satır akıyordu. */
.table-wrap{width:100%;height:100%;background:#fff;border-radius:10px;overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column}
.tbl-toolbar{display:flex;align-items:center;gap:2px;padding:4px 6px;border-bottom:1px solid var(--line);background:#FBFAFD;flex:none;overflow-x:auto;scrollbar-width:none}
.tbl-toolbar::-webkit-scrollbar{display:none}
.tbl-toolbar button{display:flex;align-items:center;gap:5px;height:26px;padding:0 9px;border-radius:6px;font-size:10.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;flex:none;background:transparent}
.tbl-toolbar button .i{width:12px;height:12px;flex:none}
.tbl-toolbar button:hover{background:#EEECF6;color:var(--ink)}
.tbl-toolbar button.on{background:var(--accent-soft);color:var(--accent)}
.tbl-fxbar{display:flex;align-items:stretch;border-bottom:1px solid var(--line);background:#fff;flex:none;height:26px}
.tbl-cellref{width:54px;flex:none;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;color:var(--ink-2);border-right:1px solid var(--line);font-variant-numeric:tabular-nums}
.tbl-fx{width:26px;flex:none;display:flex;align-items:center;justify-content:center;font-size:10px;font-style:italic;color:var(--ink-3);border-right:1px solid var(--line)}
.tbl-sheettab{flex:1;display:flex;align-items:center;padding:0 10px;font-size:11px;color:var(--ink);outline:0;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:text}
.tbl-sheettab:focus{background:#FAF9FE}
.tbl-filterbar{display:flex;align-items:center;gap:6px;padding:5px 8px;border-bottom:1px solid var(--line);background:#FBFAFD;flex:none}
.tbl-filterbar .i{width:12px;height:12px;color:var(--ink-3);flex:none}
.tbl-filterbar input{flex:1;height:24px;border:1px solid var(--line);border-radius:6px;padding:0 8px;font-size:11px;outline:0;background:#fff}
.tbl-filterbar input:focus{border-color:var(--accent)}
.table-scroll{flex:1;overflow:auto;min-height:0;background:#fff}
.wtable{width:100%;border-collapse:collapse;font-size:11px;table-layout:fixed}
.wtable thead{position:sticky;top:0;z-index:2}
.wtable .trow-letters th{background:#F1F0F6;color:var(--ink-3);font-size:9.5px;font-weight:700;text-align:center;padding:3px 4px;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.wtable th.tcorner{background:#F1F0F6;border-right:1px solid var(--line);width:34px;padding:0}
.wtable th{background:#F4F3F9;font-weight:700;text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;user-select:none}
.wtable td{padding:0;border-top:1px solid var(--line);border-right:1px solid var(--line);vertical-align:middle;height:30px;box-sizing:border-box}
.wtable td:last-child,.wtable th:last-child{border-right:0}
.wtable td .tcell{padding:6px 8px;min-height:14px;outline:0;cursor:text;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}
.wtable td .tcell:hover{background:#FAF9FE}
.wtable td .tcell:focus{background:#fff;box-shadow:inset 0 0 0 2px var(--accent)}
.wtable tr.ttotal td{background:#F8F7FC;font-weight:700}
.wtable tr.trow-active td{background:#F4F1FD}
.wtable tbody tr[data-tbody-row]:hover td{background:#FAF9FE}
.wtable tbody tr.trow-active:hover td{background:#EFEAFC}
.wtable td.trow-num{background:#F8F7FC;text-align:center;position:relative;width:34px}
.wtable td.trow-num .trow-n{font-size:10px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.wtable .trow-ctl{display:none;gap:1px;position:absolute;left:50%;top:50%;translate:-50% -50%;background:#fff;border:1px solid var(--line);border-radius:5px;padding:1px 2px;box-shadow:0 2px 6px rgba(23,21,31,.14);z-index:1}
.wtable td.trow-num:hover .trow-ctl{display:flex}
.wtable td.trow-num:hover .trow-n{visibility:hidden}
.wtable .trow-ctl button{width:14px;height:14px;display:grid;place-items:center;border-radius:3px;color:var(--ink-3);font-size:9px;line-height:1}
.wtable .trow-ctl button:hover{background:#E6E4F0;color:var(--ink)}
.tcol-resizer{position:absolute;right:0;top:0;bottom:0;width:6px;cursor:col-resize}
.tcol-resizer:hover{background:var(--accent-glow)}
.tcol-agg{margin-left:6px;font-size:9px;font-weight:800;color:var(--accent);border-radius:4px;padding:1px 4px}
.tcol-agg:hover{background:var(--accent-soft)}
.wtable input[type=checkbox]{width:14px;height:14px;margin:0 0 0 8px}
.wtable select,.wtable input[type=date]{width:100%;height:100%;padding:0 8px;font-size:11px;border:0;border-radius:0;background:transparent;cursor:pointer;box-sizing:border-box;color:var(--ink)}
.wtable select:focus,.wtable input[type=date]:focus{outline:0;box-shadow:inset 0 0 0 2px var(--accent)}
.wtable select.tcell-status{font-weight:700;font-size:10px;border-radius:5px;margin:4px;width:calc(100% - 8px);height:22px;padding:0 6px;border:1px solid transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.tcell-logo{display:flex;align-items:center;justify-content:center;padding:4px;height:100%;box-sizing:border-box}
.tcell-logo img{max-width:100%;max-height:26px;object-fit:contain;cursor:pointer;border-radius:4px}
.tcell-logo-add{font-size:9.5px;font-weight:700;color:var(--accent);border:1px dashed var(--line);border-radius:6px;padding:4px 8px;background:#FAF9FE;white-space:nowrap}
.tcell-logo-add:hover{background:var(--accent-soft);border-color:var(--accent)}

/* ================= WhatsApp CRM (v1 — sadece CRM, WhatsApp API'si YOK) =================
   Mevcut tasarım dilini (renk/köşe/tipografi değişkenleri) izler; .tcell/.acard gibi diğer
   etkileşimli node gövdeleriyle aynı görsel aileden — yeni bir stil dili icat edilmedi. */
.wa-crm{width:100%;height:100%;display:flex;background:#fff;font-size:12px;container-type:inline-size;container-name:wacrm}
.wa-side{width:38%;min-width:168px;max-width:240px;flex:none;display:flex;flex-direction:column;border-right:1px solid var(--line);background:#FAF9FE}
.wa-side-head{display:flex;align-items:center;gap:6px;padding:9px}
.wa-search{flex:1;display:flex;align-items:center;gap:6px;height:28px;padding:0 8px;border-radius:99px;background:#fff;border:1px solid var(--line);color:var(--ink-3);min-width:0}
.wa-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.wa-search .i{width:12px;height:12px;flex:none}
.wa-search input{flex:1;min-width:0;outline:0;color:var(--ink);font-size:11.5px;background:transparent}
.wa-search input::placeholder{color:var(--ink-3)}
.wa-new-btn{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:99px;background:var(--accent);color:#fff;transition:background .15s}
.wa-new-btn:hover{background:var(--accent-600)}
.wa-new-btn .i{width:13px;height:13px}
.wa-list{flex:1;overflow-y:auto;padding:0 6px 6px}
.wa-empty{padding:16px 10px;color:var(--ink-3);font-size:11px;line-height:1.5}
.wa-row{width:100%;display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:var(--r-sm);text-align:left;color:var(--ink);transition:background .13s}
.wa-row:hover{background:#F1F0F7}
.wa-row.on{background:var(--accent-soft)}
.wa-row-avatar{width:26px;height:26px;flex:none;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700}
.wa-row.on .wa-row-avatar{background:var(--accent-600)}
.wa-row-info{flex:1;min-width:0;line-height:1.3}
.wa-row-info b{display:block;font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-row-info small{display:block;font-size:10px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-row-del{width:22px;height:22px;flex:none;display:none;align-items:center;justify-content:center;border-radius:var(--r-sm);color:var(--ink-3)}
.wa-row-del:hover{background:#fff;color:#E5484D}
.wa-row-del .i{width:12px;height:12px}
.wa-row:hover .wa-row-del{display:flex}
.wa-detail{flex:1;min-width:0;overflow-y:auto}
.wa-empty-detail{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;text-align:center;color:var(--ink-3)}
.wa-empty-detail .i{width:26px;height:26px;color:var(--line-strong)}
.wa-empty-detail p{font-size:11.5px;line-height:1.5;max-width:220px}
.wa-form{padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.wa-form-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wa-form-head b{font-size:13.5px;letter-spacing:-.01em}
.wa-form-del{display:flex;align-items:center;gap:5px;padding:5px 9px;border-radius:99px;color:#E5484D;font-size:10.5px;font-weight:700;border:1px solid var(--line);transition:background .13s,border-color .13s}
.wa-form-del:hover{background:#FDEDEC;border-color:#F3B4AF}
.wa-form-del .i{width:12px;height:12px}
.wa-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wa-form-grid label,.wa-notes{display:flex;flex-direction:column;gap:4px;font-size:10.5px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.wa-form-grid .wa-span2{grid-column:1 / -1}
.wa-form-grid input,.wa-notes textarea{font:inherit;font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink);padding:7px 9px;border-radius:var(--r-sm);border:1px solid var(--line);background:#FAF9FE;outline:0;transition:border-color .13s,background .13s}
.wa-form-grid input:focus,.wa-notes textarea:focus,.wa-tag-input:focus{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px var(--accent-glow)}
.wa-notes textarea{min-height:64px;resize:vertical}
.wa-tags-block{display:flex;flex-direction:column;gap:6px}
.wa-tags-block>small{font-size:10.5px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.wa-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.wa-tag{display:inline-flex;align-items:center;gap:5px;padding:4px 6px 4px 10px;border-radius:99px;background:var(--accent-soft);color:var(--accent-600);font-size:10.5px;font-weight:600}
.wa-tag button{width:15px;height:15px;display:grid;place-items:center;border-radius:50%;color:var(--accent-600);font-size:12px;line-height:1}
.wa-tag button:hover{background:rgba(108,76,245,.18)}
.wa-tag-input{flex:1;min-width:110px;border:1px dashed var(--line);border-radius:99px;padding:5px 10px;font-size:10.5px;color:var(--ink);background:transparent;outline:0}
.wa-tag-input:focus{border-style:solid}

/* Durum noktası (satırda) + favori yıldızı (satır ve form başlığı) — v2 ekleri */
.wa-dot{display:inline-block;width:6px;height:6px;border-radius:50%;flex:none;margin-right:5px;vertical-align:middle}
.wa-row-fav{width:22px;height:22px;flex:none;display:none;align-items:center;justify-content:center;border-radius:var(--r-sm);color:var(--ink-3);transition:color .13s}
.wa-row-fav .i{width:13px;height:13px}
.wa-row-fav:hover{color:#F5A524}
.wa-row-fav.on{display:flex;color:#F5A524}
.wa-row:hover .wa-row-fav{display:flex}
.wa-form-head-acts{display:flex;align-items:center;gap:6px}
.wa-fav-btn{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:99px;color:var(--ink-3);border:1px solid var(--line);transition:background .13s,border-color .13s,color .13s}
.wa-fav-btn .i{width:13px;height:13px}
.wa-fav-btn:hover{border-color:#F5A524;color:#F5A524}
.wa-fav-btn.on{background:#FEF3E2;border-color:#F5A524;color:#F5A524}
/* Renkli durum etiketi (select) — .tcell-status pill deseninin aynısı, inline style ile renklendirilir */
.wa-status-field{display:flex;flex-direction:column;gap:4px;font-size:10.5px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.wa-status-select{font:inherit;font-weight:700;text-transform:none;letter-spacing:0;padding:7px 9px;border-radius:var(--r-sm);border:1px solid var(--line);outline:0;cursor:pointer;transition:border-color .13s}
.wa-status-select:focus{box-shadow:0 0 0 3px var(--accent-glow)}

/* WhatsApp yönlendirme bloğu — API YOK, yalnızca wa.me linki açar veya mesajı panoya kopyalar */
.wa-whatsapp-block{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:var(--r-md);background:#F6FEF9;border:1px solid #D9F5E4}
.wa-whatsapp-acts{display:flex;gap:8px;flex-wrap:wrap}
.wa-whatsapp-btn{flex:1;min-width:150px;display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 14px;border-radius:var(--r-md);background:#25D366;color:#fff;font-size:12.5px;font-weight:800;letter-spacing:-.01em;transition:background .15s,opacity .15s,box-shadow .15s;box-shadow:0 1px 2px rgba(37,211,102,.25),0 8px 20px -8px rgba(37,211,102,.6)}
.wa-whatsapp-btn:hover:not(:disabled){background:#1EBE5A}
.wa-whatsapp-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.wa-whatsapp-btn .i{width:16px;height:16px}
.wa-copy-msg-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 14px;border-radius:var(--r-md);background:#fff;border:1px solid var(--line);color:var(--ink-2);font-size:11.5px;font-weight:700;transition:background .13s,border-color .13s}
.wa-copy-msg-btn:hover{background:#FAF9FE;border-color:var(--line-strong)}
.wa-copy-msg-btn .i{width:13px;height:13px}

/* Widget kendi genişliğine göre responsive (viewport'a değil — canvas node'u serbestçe yeniden
   boyutlandırılabiliyor, bu yüzden @media yerine @container kullanılır). */
@container wacrm (max-width:460px){
  .wa-side{width:34%;min-width:120px;max-width:180px}
  .wa-form{padding:10px 12px;gap:9px}
  .wa-form-grid{gap:7px}
}
@container wacrm (max-width:340px){
  .wa-crm{flex-direction:column}
  .wa-side{width:100%;max-width:none;flex:none;max-height:38%;border-right:0;border-bottom:1px solid var(--line)}
  .wa-detail{flex:1;min-height:0}
  .wa-form{padding:10px 12px;gap:8px}
  .wa-form-grid{grid-template-columns:1fr;gap:7px}
  .wa-form-head b{font-size:12.5px}
  .wa-whatsapp-acts{flex-direction:column}
  .wa-whatsapp-btn{min-width:0}
}

.node .embed-cover{position:absolute;inset:0;z-index:2}
/* Not: eskiden kapak yalnızca node SEÇİLİNCE kalkıyordu — ama seçili bir node'u tam da o an
   taşımak/sürüklemek istersiniz; kapak kalkınca sürükleme yerine mouse doğrudan YouTube iframe'ine
   gidiyordu ("hiçbir yere taşıyamıyorum" sorunu). Artık kapak yalnızca kullanıcı açıkça "videoyu
   kontrol et" butonuna basınca (.yt-interactive) kalkıyor; seçili olmak tek başına yetmiyor. */
.node.yt-interactive .embed-cover{display:none}
.node .img-body img{width:100%;height:100%;object-fit:cover;display:block}

.yt-tv{width:100%;height:100%;position:relative;background:#000;border-radius:10px;overflow:hidden;box-shadow:inset 0 0 0 3px #1a1a1a,inset 0 0 0 5px #2c2c2c}
.yt-ctrls{position:absolute;top:8px;right:8px;z-index:5;display:flex;gap:7px}
/* İkonlar eskiden 28px/14px idi — "küçük, kullanıcı anlayamıyor" şikayeti üzerine büyütüldü. */
.yt-ctrl-btn{width:36px;height:36px;border-radius:9px;border:1px solid rgba(255,255,255,.22);background:rgba(15,13,24,.72);backdrop-filter:blur(6px);color:#fff;display:grid;place-items:center;transition:background .12s,border-color .12s,transform .12s}
.yt-ctrl-btn:hover{background:rgba(108,76,245,.65);border-color:#8B6DFF;transform:scale(1.06)}
.yt-ctrl-btn .i{width:18px;height:18px;fill:#fff;stroke:#fff}
/* Taşıma/kilit düğmesi diğer ikilisinden (ara/bağlantı) görsel olarak ayrışsın — en önemli/kafa
   karıştıran kontrol bu olduğu için vurgu rengiyle çerçevelendi. */
.yt-ctrl-btn[data-ytinteract]{border-color:#8B6DFF;box-shadow:0 0 0 2px rgba(139,109,255,.28)}
/* İlk oynatmada beliren, oktan oluşan kısa ömürlü bilgi balonu — "taşımak için kilidi aç" anlatır. */
.yt-move-hint{position:absolute;top:44px;right:6px;z-index:7;max-width:200px;display:flex;flex-direction:column;align-items:flex-end;gap:2px;cursor:pointer;animation:ytHintIn .25s ease-out}
.yt-move-hint-arrow{width:40px;height:26px}
.yt-move-hint span{display:block;background:rgba(20,16,34,.92);color:#fff;font-size:11px;line-height:1.45;padding:7px 10px;border-radius:9px;box-shadow:var(--sh-3);text-align:right}
.yt-move-hint span b{color:#B7A6FF}
@keyframes ytHintIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.yt-panel{position:absolute;top:42px;right:8px;left:8px;z-index:6;background:#fff;border-radius:10px;box-shadow:var(--sh-3);padding:10px}
.yt-panel-tabs{display:flex;gap:6px;margin-bottom:8px}
.yt-panel-tabs button{flex:1;height:26px;border-radius:7px;border:1px solid var(--line-strong);background:#fff;font-size:11px;font-weight:700;color:var(--ink-2);cursor:pointer}
.yt-panel-tabs button.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.yt-results{max-height:220px;overflow:auto;margin-top:4px}
.yt-res{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--line);padding:6px 2px;cursor:pointer}
.yt-res:first-child{border-top:0}
.yt-res:hover{background:#FAF9FE}
.yt-res img{width:56px;height:32px;object-fit:cover;border-radius:5px;flex:none}
.yt-res span{font-size:11px;font-weight:600;color:var(--ink);line-height:1.3}

.szbox{display:block;border:1.5px solid var(--line-strong);border-radius:3px;background:#FAF9FE}
.acard[data-pagesize] .pv{display:grid;place-items:center;height:44px}
.acard[data-pagesize]:hover .szbox{border-color:var(--accent);background:var(--accent-soft)}

.sp-card{width:380px}
.sp-row{display:flex;gap:6px;flex-wrap:wrap}
.sp-pill{height:28px;padding:0 11px;border-radius:20px;border:1px solid var(--line-strong);background:#fff;font-size:11px;font-weight:700;color:var(--ink-2);display:inline-flex;align-items:center;gap:5px;transition:all .15s}
.sp-pill:hover{border-color:var(--accent);color:var(--accent)}
.sp-pill.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.sp-pro{font-size:8.5px;font-weight:800;letter-spacing:.04em;background:linear-gradient(135deg,#8B6DFF,var(--accent));color:#fff;border-radius:5px;padding:1.5px 4px;line-height:1.4}
.sp-assets{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.sp-slot{position:relative;height:56px;border:1.5px dashed var(--line-strong);border-radius:10px;display:grid;place-items:center;gap:2px;cursor:pointer;color:var(--ink-3);background:#FBFAFE;overflow:hidden}
.sp-slot:hover{border-color:var(--accent);color:var(--accent)}
.sp-slot .i{width:15px;height:15px}
.sp-slot small{font-size:9px;font-weight:600}
.sp-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sp-slot-logo{background:#FBFAFE}
.sp-slot-x{position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;background:rgba(23,21,31,.72);color:#fff;display:grid;place-items:center;font-size:11px;line-height:1;z-index:2}

.ai-job-bar{position:absolute;left:50%;bottom:22px;translate:-50% 0;z-index:95;width:280px;background:#fff;border-radius:12px;box-shadow:var(--sh-3);padding:10px 14px;animation:winin .18s var(--ease)}
.ai-job-head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--ink);margin-bottom:8px}
.ai-job-head .i{width:14px;height:14px;color:var(--accent);flex:none}
.ai-job-track{height:6px;border-radius:4px;background:#EFEDF7;overflow:hidden;position:relative}
.ai-job-fill{height:100%;width:8%;background:linear-gradient(90deg,#8B6DFF,var(--accent));border-radius:4px;transition:width .4s ease}
.ai-job-fill.indeterminate{position:absolute;width:40%;transition:none;animation:aiJobSlide 1.1s ease-in-out infinite}
@keyframes aiJobSlide{0%{left:-40%}50%{left:100%}100%{left:-40%}}

/* ---------- Video Editör: drop-zone, üst yükleme satırı, bölüm başlıkları, ilerleme çubuğu ----------
   Not: veUpload/veReset satırı önceden paylaşılan ".pbtns" grid-şablonunu (1fr 1fr + ".wide"in tam
   satır kaplaması) kullanıyordu; bu durumda tek başına kalan ikon-only veReset butonu grid'in ikinci
   satırına DÜŞÜYOR ve orada tam genişlik kaplayan, içi neredeyse boş bir buton gibi görünüyordu
   ("kötü tasarım" şikayetinin görsel kaynağı). Bu satır artık kendi flex kabında, öngörülebilir. */
.ve-uprow{display:flex;gap:8px;margin-top:10px}
.ve-uprow .pbtn.wide{flex:1}
.ve-iconbtn{width:38px;flex:none;padding:0}
.ve-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  text-align:center;padding:26px 18px;border:1.5px dashed var(--line-strong);border-radius:12px;
  background:#FBFAFE;color:var(--ink-3);cursor:pointer;transition:.15s}
.ve-drop:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.ve-drop .i{width:22px;height:22px;opacity:.75}
.ve-drop b{font-size:12.5px;color:var(--ink-2);font-weight:700}
.ve-drop span{font-size:11px;color:var(--ink-3);max-width:280px;line-height:1.5}
.ve-sec{margin:14px 0 6px;display:block;font-weight:700}
.ve-sec small{font-weight:500;color:var(--ink-3)}
.ve-progress{margin-top:14px;border:1px solid var(--line-strong);border-radius:12px;padding:11px 14px;background:#FBFAFE}
.ve-progress-head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--ink);margin-bottom:8px}
.ve-progress-head .i{width:14px;height:14px;color:var(--accent);flex:none;animation:veSpin 1.1s linear infinite}
.ve-progress-track{height:6px;border-radius:4px;background:#EFEDF7;overflow:hidden}
.ve-progress-fill{height:100%;width:0;background:linear-gradient(90deg,#8B6DFF,var(--accent));border-radius:4px;transition:width .35s ease}
@keyframes veSpin{to{transform:rotate(360deg)}}

.stamp-studio-prev{display:grid;place-items:center;padding:6px 0 2px}
.stamp-sw{width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line-strong);cursor:pointer;padding:0}
.stamp-sw.on{box-shadow:0 0 0 2px var(--accent)}
#stampColorCustom{width:22px;height:22px;padding:0;border:0;border-radius:50%;overflow:hidden;cursor:pointer;background:none}

@media (max-width:1180px){
  .cmd{width:210px}
  .save-state span{display:none}
  .menu>button:nth-child(n+5){display:none}
}
@media (max-width:900px){
  .side{display:none}
  .cmd{display:none}
  /* Sağ özellikler paneli artık TAMAMEN gizlenmiyor — bu genişlikte (tablet dahil) alttan açılan
     bir "bottom sheet"e dönüşüyor: resme/PDF'e/metne dokunduğunuzda masaüstündeki ile AYNI
     kontroller (boyut/döndürme/opaklık, kırp/sıkıştır/böl, font/renk vb.) buradan erişilebilir olur.
     Panelin DOM'u ve JS'i hiç değişmedi — syncProps() zaten her seçim değişiminde .off sınıfını
     toggluyordu (bkz. workspace-v2.js), #propClose zaten select([]) çağırıyordu, boş canvas'a
     dokunmak da zaten select([]) tetikliyordu (stage pointerdown, "empty canvas" dalı) — yalnızca
     konum/boyut/geçiş CSS'i mobile uyarlandı, iki ayrı UI/JS yazılmadı (DRY). */
  .props{
    position:fixed;left:0;right:0;top:auto;bottom:0;
    width:100%;max-width:100%;max-height:min(72vh,560px);
    border-radius:16px 16px 0 0;
    z-index:58;
    box-shadow:0 -10px 30px -8px rgba(23,21,31,.28);
  }
  .props.off{transform:translateY(100%);opacity:1;pointer-events:none}
  /* "Resme dokununca kart açılıyor ama silmek için nereye basacağımı bulamıyorum" şikayeti:
     Sil/Öne Getir/Arkaya Gönder/Çoğalt grubu (.pg-layout) DOM'da panelin EN ALTINDAYDI —
     resim gibi çok kontrollü node'larda bottom sheet'i tamamen kaydırmadan görünmüyordu.
     DOM sırası (ve masaüstü görünümü) hiç değişmedi — yalnızca bu breakpoint'te flex "order"
     ile GÖRSEL olarak panelin en üstüne taşınıyor. */
  .props-scroll{display:flex;flex-direction:column}
  .pg-layout{order:-1}
}

/* ============ Premium'a Geç (PayTR iFrame modal) ============ */
/* bottom:16px — dock (.dock, bottom:16px) ile aynı taban çizgisi. Önceki bottom:64px değeri,
   sol kenar çubuğunun alt kısmındaki plan/kota özeti (.side-foot) ile görsel olarak çakışıyordu
   (bkz. ekran görüntüsü geri bildirimi) — buton artık gerçekten en altta, o panelin ALTINDA oturuyor. */
.premium-fab{position:absolute;left:12px;bottom:16px;z-index:56;display:flex;align-items:center;gap:7px;height:40px;padding:0 14px 0 12px;border-radius:99px;background:linear-gradient(135deg,#8B6DFF,var(--accent));color:#fff;box-shadow:var(--sh-2);font-size:12.5px;font-weight:700;transition:all .2s var(--ease)}
.premium-fab:hover{transform:translateY(-2px) scale(1.03);box-shadow:var(--sh-3)}
.premium-fab .i{width:16px;height:16px;stroke:#fff}

.premium-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(23,21,31,.42);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .18s var(--ease)}
.premium-overlay.on{opacity:1;pointer-events:auto}
.premium-modal{position:relative;width:420px;max-width:calc(100vw - 32px);max-height:calc(100vh - 48px);overflow:hidden;border-radius:var(--r-xl);background:#fff;box-shadow:var(--sh-3);transform:translateY(10px) scale(.97);transition:transform .2s var(--ease);display:flex;flex-direction:column}
.premium-overlay.on .premium-modal{transform:none}
.premium-close{position:absolute;top:10px;right:10px;z-index:2;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;color:var(--ink-2);background:#fff}
.premium-close:hover{background:var(--canvas-bg);color:var(--ink)}
.premium-close .i{width:15px;height:15px}

.premium-view{padding:32px 28px 26px;display:flex;flex-direction:column;align-items:center;text-align:center;overflow-y:auto}
.premium-badge{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,#8B6DFF,var(--accent));display:grid;place-items:center;margin-bottom:14px;box-shadow:0 8px 20px -6px var(--accent-glow)}
.premium-badge .i{width:26px;height:26px;stroke:#fff;fill:#fff}
.premium-plan-view h2{font-size:19px;font-weight:800;margin-bottom:6px}
.premium-sub{font-size:12.5px;color:var(--ink-2);margin-bottom:18px;max-width:300px}
.premium-price{display:flex;align-items:baseline;gap:5px;margin-bottom:18px}
.premium-price b{font-size:30px;font-weight:800;color:var(--ink)}
.premium-price span{font-size:13px;color:var(--ink-3)}
.premium-features{width:100%;list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:22px;text-align:left;padding:14px 16px;background:var(--canvas-bg);border-radius:var(--r-md)}
.premium-features li{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-2);font-weight:600}
.premium-features li .i{width:15px;height:15px;color:var(--ok);flex:none}
.premium-cta{width:100%;height:44px;border-radius:12px;background:var(--accent);color:#fff;font-size:13.5px;font-weight:700;transition:all .15s var(--ease)}
.premium-cta:hover{background:var(--accent-600)}
.premium-cta:disabled{opacity:.6;cursor:not-allowed}
.premium-secure{display:flex;align-items:center;gap:5px;justify-content:center;font-size:11px;color:var(--ink-3);margin-top:12px}
.premium-secure .i{width:12px;height:12px}
.premium-error{margin-top:10px;font-size:12px;color:var(--danger);font-weight:600}

.premium-iframe-view{padding:0;height:min(640px,80vh)}
.premium-loading{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:100%}
.premium-spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--accent-soft);border-top-color:var(--accent);animation:veSpin .8s linear infinite}
.premium-loading p{font-size:12.5px;color:var(--ink-2);font-weight:600}
#premiumIframe{width:100%;height:100%;border:0;flex:1}

.premium-result-view{padding:40px 28px}
.premium-result-icon{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin-bottom:16px}
.premium-result-icon.ok{background:#E6F7EE;color:var(--ok)}
.premium-result-icon.fail{background:#FBE9EA;color:var(--danger)}
.premium-result-icon svg{width:28px;height:28px;stroke:currentColor;stroke-width:1.8;fill:none}
.premium-result-view h2{font-size:17px;font-weight:800;margin-bottom:6px}
.premium-result-view p{font-size:12.5px;color:var(--ink-2);margin-bottom:20px;max-width:300px}

/* ============ Mobil (telefon genişliği) — canvas + araç çubuğu + üst menü kullanılabilirliği ============
   Dock (alt araç çubuğu) artık ekrandan taşıp kesilmek yerine yatay kaydırılabilir; 4 ayrı yüzen
   buton (AI/QR/QR Gelen Kutusu/Premium) + zoom kontrolü tek bir dikey sütunda topluca duruyor; bu
   butonlardan açılan paneller telefon genişliğine sığıyor. Üst menü çubuğu artık tek bir hamburger
   ikonuna toplanıyor (Dosya/Düzenle/Ekle/AI/Modüller/Görünüm/Yardım + Çalışma Alanları/Dışa Aktar/
   Paylaş/Premium/Panel Modu — bkz. workspace-v2.js MENUS.__root). Sol modül paneli ve sağ özellikler
   paneli hâlâ kapsam dışı (zaten 900px'te gizleniyorlar) — ayrı, daha büyük bir aşamada ele alınacak.
   Dokunmatik pan/pinch-zoom için ayrıca bkz. workspace-v2.js (touchPoints/pinchPrev bloğu ve
   "empty canvas → touch=pan" dalı) — CSS burada yalnızca chrome'un YERLEŞİMİNİ düzeltiyor. */
@media (max-width:640px){
  /* ---- Üst menü çubuğu: hamburger'a toplanınca geri kalanların çoğu artık gereksiz/yer kaplıyor ---- */
  .topbar{padding:0 8px;gap:4px}
  .topbar-burger{display:grid}
  .brand{padding:6px 4px 6px 2px;gap:6px}
  .brand b{display:none} /* logo ikonu kalır, "Vifyo Workspace" yazısı yer açmak için gizlenir */
  .ws-switch,.tb-sep,.menu,.tb-spacer,.zoom-read,.vf-panel-mode,#btnExport,#btnShare,#btnPremium{display:none}
  .save-state{padding:0 2px;gap:0} /* yalnızca renkli nokta kalır, "Kaydedildi" yazısı gizlenir */
  .save-state span:last-child{display:none}
  /* İki .tb-spacer de gizlendiği için flex boşluğu kayboluyordu, geri kalan her şey (undo/redo/
     kayıt noktası/avatar) sola, logo ikonunun hemen yanına yığılıyordu. margin-left:auto ile bu
     grup tekrar sağ kenara yaslanıyor — masaüstündeki "sağ küme" hissi mobilde de korunuyor. */
  #btnUndo{margin-left:auto}

  .dock{
    left:0;right:0;bottom:0;translate:none;width:100%;max-width:100%;
    border-radius:16px 16px 0 0;justify-content:flex-start;
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));
  }
  .dock::-webkit-scrollbar{display:none}
  .dock .tool,.dock-sep{flex:none}

  /* Yüzen kontrolleri masaüstünde 4 ayrı renkte/boyutta dağınık duruyordu (beyaz QR ikonları +
     mor dolgulu AI/Premium ikonları) — telefonda alt alta dizilince bu karışıklık çok daha göze
     batıyordu ("uyumsuz duruyor" geri bildirimi). Çözüm: hepsini TEK RENK ŞEMASINA (beyaz zemin,
     accent mor ikon) çekip aralarındaki boşluğu kaldırarak tek parça, birleşik bir "hızlı erişim
     rayı" haline getirdik — 4 ayrı yüzen buton yerine tek bir dikey menü gibi okunuyor. Zoom
     kontrolü (.zoomctl) işlevsel olarak farklı olduğu için ayrı, kendi boşluğuyla altında duruyor. */
  .zoomctl,.ai-fab,.ai-panel,.wqr-fab,.wqr-fab-inbox,.premium-fab{position:fixed}
  .wqr-fab,.wqr-fab-inbox,.ai-fab,.premium-fab{
    right:10px;left:auto;bottom:auto;
    width:46px;height:46px;border-radius:4px;
    background:#fff;color:var(--accent);box-shadow:none;
  }
  .wqr-fab{top:64px;border-radius:16px 16px 4px 4px;box-shadow:var(--sh-2)}
  .wqr-fab-inbox{top:110px;border-top:1px solid var(--line)}
  .ai-fab{top:156px;border-top:1px solid var(--line)}
  .ai-fab::after{display:none} /* mor "ping" animasyonu artık dolgu yok, gürültü yapmasın diye kapalı */
  .premium-fab{
    top:202px;border-top:1px solid var(--line);border-radius:4px 4px 16px 16px;
    padding:0;justify-content:center;gap:0;box-shadow:var(--sh-2);
  }
  .premium-fab span{display:none} /* etiket gizlenir, diğerleriyle aynı ikon-only görünüm */
  .premium-fab .i{stroke:var(--accent)} /* masaüstünde beyaz ikon (mor zemin üstündeydi) — burada zemin beyaz */
  .zoomctl{top:264px;right:10px;bottom:auto;left:auto}

  /* Bu butonlardan açılan paneller artık kendi FAB'ının konumuna değil, telefon genişliğine göre
     hizalanıyor — sabit 330-480px genişlik yerine kenarlardan eşit boşluklu, tam genişlik. */
  .wqr-panel,.wqr-panel-inbox,.ai-panel{
    left:8px;right:8px;top:64px;width:auto;max-width:none;
    max-height:calc(100vh - 90px);
  }

  /* Özellikler paneli (bottom sheet): dock'ta zaten kullanılan env(safe-area-inset-bottom) deseniyle
     tutarlı alt boşluk + native bottom-sheet hissi için küçük bir "tutamaç" çizgisi. */
  .props{padding-bottom:env(safe-area-inset-bottom,0px)}
  .props-head{position:relative;padding-top:17px}
  .props-head::before{
    content:"";position:absolute;left:50%;top:7px;translate:-50% 0;
    width:34px;height:4px;border-radius:99px;background:var(--line-strong);
  }
}