/* Odadan Sepete: cam levha arayüzü
   Villa Verterra dilinden: kalın buzlu cam levhalar, koyu kapsül içinde beyaz hap, tek altın vurgu.
   Oda fotoğrafı sahnedir; renk yalnızca odadan gelir. Cam, odanın ışığına göre gündüz/gece olur (data-cam). */

:root{
  --r-s:10px;--r-m:14px;--r-l:22px;--r-p:999px;
  --g:clamp(12px,1.6vw,28px);--dok-h:3.5rem;--levha-w:440px;
  --ease:cubic-bezier(.2,.7,.2,1);
  font-family:Figtree,"Segoe UI",system-ui,-apple-system,sans-serif;font-size:16px;-webkit-text-size-adjust:100%;
}

/* Gündüz: buzlu cam */
body{
  color-scheme:light;
  --ink:#111215;--ink-2:#2d3034;--ink-3:#40444a; /* küçük gri yazı camda da AA (≥4,5:1) */
  --glass-a:rgba(243,244,245,.76);--glass-b:rgba(214,216,219,.82);--glass-fx:blur(22px) saturate(1.6);
  --rim-1:#fff;--rim-2:rgba(255,255,255,.6);--rim-0:rgba(255,255,255,.18);--rim-3:rgba(255,255,255,.95);
  --glow:rgba(255,255,255,.85);--edge:rgba(16,18,22,.24);
  --streak:rgba(255,255,255,.62);--streak-2:rgba(255,255,255,.38);--hot-on:rgba(255,255,255,.32);
  --lift:0 0 0 1px rgba(16,18,22,.07),0 1px 1px rgba(10,12,16,.10),0 3px 8px -2px rgba(10,12,16,.16),0 22px 44px -16px rgba(10,12,16,.48);
  --line:rgba(17,18,21,.12);--line-2:rgba(17,18,21,.24);--hover:rgba(17,18,21,.06);--sel:rgba(17,18,21,.11);
  --inner:rgba(255,255,255,.42);--inner-sh:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.4),0 1px 2px rgba(10,12,16,.10);
  --lite-a:rgba(245,245,244,.97);--lite-b:rgba(229,230,231,.97);
  --cap:rgba(29,30,33,.93);--cap-solid:#1d1e21;--cap-2:#2c2d31;--cap-ink:#f6f6f4;--cap-ink-2:#c8cacd;--cap-line:rgba(255,255,255,.13);--cap-hover:rgba(255,255,255,.10);
  --cap-sh:inset 0 1px 2px rgba(0,0,0,.55),inset 0 -1px 0 rgba(255,255,255,.10),0 1px 0 rgba(255,255,255,.55);
  --pill-a:#fdfdfc;--pill-b:#e7e7e4;--pill-ink:#131417;
  --pill-sh:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.10),0 1px 2px rgba(0,0,0,.5),0 4px 10px -2px rgba(0,0,0,.35);
  --primary:#1d1e21;--primary-ink:#f6f6f4;--primary-hover:#323337;
  --iyi:#1f7344;--dikkat:#93590a;--notr:#5c5f65;
  --focus:#111215;
  --alan-isik:.78;
  --glass-bg:linear-gradient(180deg,var(--glass-a),var(--glass-b));
  --lite-bg:linear-gradient(180deg,var(--lite-a),var(--lite-b));
  --slab-in:inset 0 1.5px 0 var(--rim-1),inset 0 0 0 1px var(--rim-0),inset 0 -1px 0 var(--edge),inset 0 18px 28px -20px var(--glow),inset 0 -14px 24px -22px var(--edge);
  --pill-bg:linear-gradient(180deg,var(--pill-a),var(--pill-b));
  --sale-a:#eed6a4;--sale-b:#c9a96e;--sale-c:#b58f4d;--sale-ink:#171106;
}
/* Gece: dumanlı cam (karanlık oda ya da henüz fotoğraf yok) */
body[data-cam=gece]{
  color-scheme:dark;
  --ink:#f5f5f3;--ink-2:#d6d8dc;--ink-3:#abaeb4;
  --glass-a:rgba(46,48,54,.8);--glass-b:rgba(22,24,28,.86);--glass-fx:blur(20px) saturate(1.5); /* parlak fotoğraf üstünde de beyaz yazı okunsun */
  --rim-1:rgba(255,255,255,.62);--rim-2:rgba(255,255,255,.16);--rim-0:rgba(255,255,255,.04);--rim-3:rgba(255,255,255,.36);
  --glow:rgba(255,255,255,.12);--edge:rgba(0,0,0,.5);--streak:rgba(255,255,255,.08);--streak-2:rgba(255,255,255,.05);--hot-on:rgba(255,255,255,.09);
  --lift:0 1px 1px rgba(0,0,0,.35),0 22px 44px -16px rgba(0,0,0,.75);
  --line:rgba(255,255,255,.13);--line-2:rgba(255,255,255,.26);--hover:rgba(255,255,255,.08);--sel:rgba(255,255,255,.15);
  --inner:rgba(255,255,255,.06);--inner-sh:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.07),0 1px 2px rgba(0,0,0,.3);
  --lite-a:rgba(42,44,49,.97);--lite-b:rgba(26,28,32,.97);
  --cap:rgba(6,7,9,.6);--cap-sh:inset 0 1px 2px rgba(0,0,0,.65),inset 0 -1px 0 rgba(255,255,255,.07),0 1px 0 rgba(255,255,255,.09);
  --primary:#f4f4f2;--primary-ink:#131417;--primary-hover:#fff;
  --iyi:#79d39f;--dikkat:#f1bb62;--notr:#a3a6ac;--focus:#f5f5f3;
  --alan-isik:.5;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){body{--glass-bg:var(--lite-bg);--glass-fx:none}}
body.lite{--glass-bg:var(--lite-bg);--glass-fx:none}

*,*::before,*::after{box-sizing:border-box}
html{background:#101317}
body{margin:0;min-height:100svh;background:transparent;color:var(--ink);font-size:.9375rem;line-height:1.5;-webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--dok-h) + var(--g) * 2 + env(safe-area-inset-bottom));transition:color .4s}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
a{color:inherit}
h1,h2,h3,p{margin:0}
.gizli{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-variant-numeric:tabular-nums}
svg.i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dolu-ikon{fill:currentColor;stroke:none}

/* Arka alan: fotoğrafın kendisi, çok küçük ölçekten büyütülmüş (bedava bulanıklık) */
#alan{position:fixed;inset:-6%;z-index:-1;background:#101317 center/cover no-repeat;transform:scale(1.08);
  filter:brightness(var(--alan-isik)) saturate(1.15);transition:filter .8s var(--ease),opacity .8s}
#alan::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 10%,rgba(16,19,23,0),rgba(8,10,13,.6))}
body:not(.fotolu) #alan{background-image:radial-gradient(80% 60% at 50% 30%,#1c2027,#101317 70%)!important;filter:none}

/* ---------- Cam levha ---------- */
.slab{position:relative;background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-fx);backdrop-filter:var(--glass-fx);
  box-shadow:var(--slab-in),var(--lift);isolation:isolate;border-radius:var(--r-l)}
.slab::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:radial-gradient(9rem circle at var(--sx,50%) var(--sy,-60%),var(--hot-rim,transparent),transparent 72%),
    linear-gradient(158deg,var(--rim-1),var(--rim-2) 22%,var(--rim-0) 50%,var(--rim-2) 78%,var(--rim-3));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.slab::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(16rem circle at var(--sx,50%) var(--sy,-60%),var(--hot,transparent),transparent 70%),
    linear-gradient(106deg,transparent 10%,var(--streak) 24%,transparent 40%,transparent 48%,var(--streak-2) 57%,transparent 68%) var(--px,40%) 0/180% 100% no-repeat;
  transition:background-position .8s var(--ease)}
.slab.lit{--hot:var(--hot-on);--hot-rim:#fff}

/* ---------- Düğmeler ---------- */
.tb{display:inline-flex;align-items:center;justify-content:center;gap:.4375rem;height:2.25rem;min-width:2.25rem;padding:0 .875rem;border:0;border-radius:var(--r-p);
  background:transparent;color:var(--ink-2);font-size:.875rem;font-weight:600;white-space:nowrap;text-decoration:none;transition:background-color .15s,color .15s,box-shadow .15s,opacity .15s}
.tb:hover{background:var(--hover);color:var(--ink)}
.tb[aria-pressed=true]{background:var(--sel);color:var(--ink)}
.tb.ana{background:var(--primary);color:var(--primary-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(0,0,0,.3)}
.tb.ana:hover{background:var(--primary-hover)}
.tb.kuyu{background:var(--inner);box-shadow:var(--inner-sh);color:var(--ink-2)}
.tb.kuyu:hover{background:var(--hover);color:var(--ink)}
.tb.genis{width:100%;height:2.75rem;font-size:.9375rem}
.tb:disabled{opacity:.42;cursor:default}
.ic{display:grid;place-items:center;width:2.25rem;height:2.25rem;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink-2);transition:background-color .15s,color .15s}
.ic:hover{background:var(--hover);color:var(--ink)}
.ic.kuyu{background:var(--inner);box-shadow:var(--inner-sh);width:2rem;height:2rem}

/* Altın: ekranda yalnızca bir tane, dönüşüm eylemi */
.altin{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:calc(2.25rem + 6px);padding:0 1.125rem 0 1rem;border:0;border-radius:var(--r-p);
  background:linear-gradient(180deg,var(--sale-a),var(--sale-b) 55%,var(--sale-c));color:var(--sale-ink);font-size:.875rem;font-weight:700;letter-spacing:.005em;white-space:nowrap;text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(96,64,16,.38),0 1px 2px rgba(0,0,0,.3),0 6px 16px -6px rgba(201,169,110,.6);
  transition:filter .15s,transform .15s,box-shadow .15s,opacity .2s}
.altin:hover{filter:brightness(1.07) saturate(1.06)}
.altin:active{transform:translateY(1px)}
.altin:disabled{filter:grayscale(.7) brightness(.85);opacity:.6;cursor:default}
.altin svg.i{stroke-width:1.5}
.altin.genis{width:100%;height:3rem;font-size:.9375rem}

/* Koyu kapsül içinde beyaz hap */
.seg{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:var(--r-p);background:var(--cap);box-shadow:var(--cap-sh);color:var(--cap-ink);--focus:#fff;max-width:100%}
.seg button{height:2.25rem;padding:0 .9375rem;border:0;border-radius:var(--r-p);background:transparent;color:var(--cap-ink-2);font-size:.875rem;font-weight:600;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:.375rem;transition:background-color .15s,color .15s,box-shadow .15s}
.seg button:hover{background:var(--cap-hover);color:var(--cap-ink)}
.seg button[aria-pressed=true],.seg button[aria-selected=true],.seg button[aria-checked=true]{background:var(--pill-bg);color:var(--pill-ink);box-shadow:var(--pill-sh)}
.seg button:focus-visible{outline-offset:-2px}
.seg.tam{display:flex;width:100%}
.seg.tam button{flex:1;padding:0 .5rem}
.seg.kaydir{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.seg.kaydir::-webkit-scrollbar{display:none}
.seg .ayrac{width:1px;height:1.25rem;margin:0 .3125rem;background:var(--cap-line);flex:none}

/* Çip ve rozet */
.cipler{display:flex;flex-wrap:wrap;gap:.375rem}
.cip{display:inline-flex;align-items:center;gap:.375rem;min-height:1.875rem;padding:.25rem .75rem;border-radius:var(--r-p);background:var(--inner);box-shadow:var(--inner-sh);font-size:.8125rem;font-weight:600;color:var(--ink-2)}
.cip svg.i{width:14px;height:14px}
.rozet{display:inline-flex;align-items:center;gap:.4375rem;height:1.75rem;padding:0 .6875rem 0 .5625rem;border-radius:var(--r-p);background:var(--inner);box-shadow:var(--inner-sh);font-size:.8125rem;font-weight:700;color:var(--ink-2);white-space:nowrap}
.rozet::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.rozet.iyi{color:var(--iyi)}.rozet.dikkat{color:var(--dikkat)}.rozet.notr{color:var(--notr)}
.rozet.sessiz::before{display:none}
.rozet.kucuk{height:1.375rem;font-size:.6875rem;padding:0 .5rem 0 .4375rem;gap:.3125rem}
.rozet.kucuk::before{width:6px;height:6px}
.rozetler{display:flex;flex-wrap:wrap;gap:.375rem}

/* Koyu iç panel: anahtar sayı */
.koyu-panel{display:flex;flex-direction:column;gap:.25rem;padding:.875rem 1rem 1rem;border-radius:var(--r-m);background:var(--cap-solid);box-shadow:var(--cap-sh);color:var(--cap-ink)}
.koyu-panel .lbl{color:var(--cap-ink-2)}
.dev-sayi{font-size:1.875rem;font-weight:800;line-height:1.05;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.koyu-panel .alt{font-size:.8125rem;color:var(--cap-ink-2);font-weight:500}
/* Ölçer: kapsül kanal, beyaz hap dolgu */
.olcer{height:.625rem;padding:1px;border-radius:var(--r-p);background:rgba(255,255,255,.08);box-shadow:inset 0 1px 2px rgba(0,0,0,.6);overflow:hidden}
.olcer i{display:block;height:100%;border-radius:inherit;background:var(--pill-bg);transform-origin:0 50%;transform:scaleX(var(--o,0));transition:transform .7s var(--ease)}
.olcer.asim i{background:linear-gradient(180deg,#f1bb62,#c9852b)}

/* Kuyu: açık iç yüzey */
.kuyu-kart{padding:.875rem 1rem;border-radius:var(--r-m);background:var(--inner);box-shadow:var(--inner-sh)}

/* Yazı */
.lbl{font-size:.8125rem;font-weight:600;letter-spacing:.005em;color:var(--ink-3)}
.baslik{font-size:1.75rem;font-weight:800;line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
.giris{color:var(--ink-2);font-size:.9375rem;max-width:36rem;text-wrap:pretty}
.kucuk{font-size:.8125rem;color:var(--ink-3);line-height:1.45}
h2.ara-baslik{font-size:1rem;font-weight:800;letter-spacing:-.01em;margin-bottom:.625rem}
.hata{padding:.75rem .875rem;border-radius:var(--r-m);background:rgba(179,53,43,.14);color:var(--ink);font-size:.875rem;box-shadow:inset 0 0 0 1px rgba(179,53,43,.35)}

/* Girdi alanları */
.girdi{width:100%;min-height:2.75rem;padding:.6875rem .875rem;border:0;border-radius:var(--r-m);background:var(--inner);box-shadow:var(--inner-sh);color:var(--ink);font-size:.9375rem}
textarea.girdi{min-height:5.5rem;resize:vertical;line-height:1.45}
.girdi::placeholder{color:var(--ink-3);opacity:.8}
.alan-grup{display:grid;gap:.5rem}
.satir-ara{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.buyuk-sayi{font-size:1.375rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* Kaydıraç: ince iz, beyaz cam boncuk */
.kaydirac{-webkit-appearance:none;appearance:none;width:100%;height:2rem;margin:0;background:transparent;--p:25%}
.kaydirac::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--ink) var(--p),var(--line-2) var(--p))}
.kaydirac::-moz-range-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--ink) var(--p),var(--line-2) var(--p))}
.kaydirac::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9px;border:0;border-radius:50%;background:var(--pill-bg);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(0,0,0,.22),0 2px 6px rgba(0,0,0,.38)}
.kaydirac::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:var(--pill-bg);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(0,0,0,.22),0 2px 6px rgba(0,0,0,.38)}

/* Açılır */
.acilir{border-radius:var(--r-m);background:var(--inner);box-shadow:var(--inner-sh)}
.acilir>summary{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:2.75rem;padding:0 1rem;font-size:.875rem;font-weight:700;cursor:pointer;list-style:none;color:var(--ink-2)}
.acilir>summary::-webkit-details-marker{display:none}
.acilir>summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s var(--ease)}
.acilir[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.acilir .ic-govde{display:grid;gap:.875rem;padding:.25rem 1rem 1rem}

/* ---------- Üst: marka kartı ve ray ---------- */
.ust{position:fixed;z-index:40;top:calc(var(--g) + env(safe-area-inset-top));left:var(--g);right:var(--g);display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;pointer-events:none;
  transition:transform .35s var(--ease),opacity .35s}
.ust>*{pointer-events:auto}
body.kaydi .ust{transform:translateY(calc(-100% - var(--g) * 2));opacity:0}
.marka{display:flex;align-items:center;gap:.625rem;height:3rem;padding:0 .875rem 0 .5rem;border-radius:var(--r-p)}
.logo{display:grid;place-items:center;width:2.125rem;height:2.125rem;border-radius:50%;background:var(--primary);color:var(--primary-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(0,0,0,.35)}
.logo svg{width:18px;height:18px;stroke-width:1.5}
.kelime{display:block;font-size:1rem;font-weight:800;letter-spacing:-.025em;line-height:1.1}
.marka-alt{display:block;font-size:.75rem;font-weight:600;color:var(--ink-3);line-height:1.2}
.durum{width:8px;height:8px;border-radius:50%;background:var(--notr);margin-left:.25rem;flex:none;box-shadow:0 0 0 3px rgba(127,127,127,.18)}
.durum.hazir{background:#3fb877;box-shadow:0 0 0 3px rgba(63,184,119,.2)}
.durum.deneme{background:#d99a2b;box-shadow:0 0 0 3px rgba(217,154,43,.22)}
.durum.yok{background:#d4553f;box-shadow:0 0 0 3px rgba(212,85,63,.22)}
.ray{display:flex;align-items:center;gap:2px;height:3rem;padding:0 6px;border-radius:var(--r-p)}

/* ---------- Sahne: fotoğraf ve katmanları ---------- */
main{position:relative}
.sahne{position:sticky;top:0;z-index:1;display:grid;place-items:center;
  padding:calc(var(--g) * 2 + 3rem + env(safe-area-inset-top)) var(--g) calc(var(--g) + 1.25rem)}
.cerceve{position:relative;width:min(100%,420px);aspect-ratio:3/4;border-radius:var(--r-l);overflow:hidden;background:#0c0f13;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 2px 4px rgba(0,0,0,.3),0 34px 70px -30px rgba(0,0,0,.85);
  transition:width .45s var(--ease),height .45s var(--ease);--k:50%}
.cerceve>img,.sonra-kap,.sonra-kap>img,.katman{position:absolute;inset:0;width:100%;height:100%}
.cerceve>img,.sonra-kap>img{object-fit:cover}
#f-once{transition:filter 1.2s var(--ease)}
.cerceve.karanlik #f-once{filter:brightness(.4) saturate(.45) contrast(1.05)}
.sonra-kap{clip-path:inset(0 0 0 var(--k))}
body[data-ekran=sonuc][data-mod=kiyas] .cerceve{touch-action:pan-y} /* yatay sürükleme ayracın, dikey kaydırma sayfanın */
#s-baslik:focus{outline:none}
.katman{pointer-events:none}
#k-pim{pointer-events:none}
#k-pim>*{pointer-events:auto}

/* Vizör köşeleri: fotoğraf seçilince içeri kilitlenir */
.kose{position:absolute;width:22px;height:22px;z-index:6;pointer-events:none;border:0 solid rgba(255,255,255,.92);
  transition:transform .55s var(--ease),opacity .4s;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.kose.k1{top:12px;left:12px;border-top-width:2px;border-left-width:2px;border-top-left-radius:6px}
.kose.k2{top:12px;right:12px;border-top-width:2px;border-right-width:2px;border-top-right-radius:6px}
.kose.k3{bottom:12px;left:12px;border-bottom-width:2px;border-left-width:2px;border-bottom-left-radius:6px}
.kose.k4{bottom:12px;right:12px;border-bottom-width:2px;border-right-width:2px;border-bottom-right-radius:6px}
.cerceve.kilitleniyor .kose.k1{animation:kilit1 .6s var(--ease) both}
.cerceve.kilitleniyor .kose.k2{animation:kilit2 .6s var(--ease) both}
.cerceve.kilitleniyor .kose.k3{animation:kilit3 .6s var(--ease) both}
.cerceve.kilitleniyor .kose.k4{animation:kilit4 .6s var(--ease) both}
@keyframes kilit1{from{transform:translate(-18px,-18px);opacity:0}}
@keyframes kilit2{from{transform:translate(18px,-18px);opacity:0}}
@keyframes kilit3{from{transform:translate(-18px,18px);opacity:0}}
@keyframes kilit4{from{transform:translate(18px,18px);opacity:0}}
.cerceve.kilitleniyor::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:rgba(255,255,255,.5);animation:flas .5s ease-out both}
@keyframes flas{from{opacity:.55}to{opacity:0}}
body[data-ekran=sonuc] .kose{opacity:0}

/* Boş sahne: kendini çizen perspektif oda */
.bos{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.375rem;padding:1.5rem 1.25rem 1.75rem;text-align:center;cursor:pointer;color:#f5f5f3;
  background:radial-gradient(90% 70% at 50% 35%,rgba(255,255,255,.05),transparent 70%)}
.bos::before{content:"";position:absolute;z-index:1;inset:auto 0 0 0;height:42%;background:linear-gradient(rgba(12,15,19,0),rgba(12,15,19,.94) 62%);pointer-events:none}
.bos>span{z-index:2}
.bos svg.perspektif{position:absolute;z-index:0;inset:8% 7% 22%;width:86%;height:70%;fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.bos svg.perspektif .ince{stroke:rgba(255,255,255,.22)}
.bos svg.perspektif .vurgu{stroke:rgba(238,214,164,.85)}
.bos svg.perspektif [pathLength]{stroke-dasharray:1;stroke-dashoffset:1;animation:ciz 1.6s var(--ease) forwards;animation-delay:calc(var(--s,0) * 110ms + 250ms)}
@keyframes ciz{to{stroke-dashoffset:0}}
.bos-baslik{position:relative;font-size:1.125rem;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.bos-alt{position:relative;font-size:.8125rem;color:rgba(245,245,243,.7)}
.bos:hover svg.perspektif{stroke:rgba(255,255,255,.7)}

/* Fırsat kutuları: yalnızca köşe parantezleri (vizör ve render kovası ile aynı motif) */
.kose-kutu{position:absolute;pointer-events:none;--c:rgba(255,255,255,.95);--l:clamp(9px,22%,18px);--t:1.5px;border-radius:4px;
  background:
    linear-gradient(var(--c),var(--c)) top left/var(--l) var(--t) no-repeat,linear-gradient(var(--c),var(--c)) top left/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) top right/var(--l) var(--t) no-repeat,linear-gradient(var(--c),var(--c)) top right/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/var(--l) var(--t) no-repeat,linear-gradient(var(--c),var(--c)) bottom left/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/var(--l) var(--t) no-repeat,linear-gradient(var(--c),var(--c)) bottom right/var(--t) var(--l) no-repeat,
    rgba(255,255,255,.05);
  filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.55));transition:background-color .2s;animation:kutu-in .55s var(--ease) both;animation-delay:calc(var(--s,0) * 120ms)}
.kose-kutu.soru{--c:rgba(255,255,255,.75)}
#k-pim .kose-kutu{transition:opacity .8s var(--ease),background-color .2s}
#k-pim.soluk .kose-kutu{opacity:.22}
#k-pim.soluk .pim{opacity:.7}
.kose-kutu.vurgu{--t:2.5px;background-color:rgba(255,255,255,.16)}
@keyframes kutu-in{from{opacity:0;transform:scale(1.14)}}

/* Pim: odanın üstünde her zaman açık cam (fotoğraf ne renk olursa olsun okunur) */
.pim{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:.375rem;height:2rem;min-width:2rem;padding:0 .625rem;border:0;border-radius:var(--r-p);
  font-size:.8125rem;font-weight:800;font-variant-numeric:tabular-nums;color:#131417;justify-content:center;white-space:nowrap;
  background:linear-gradient(180deg,rgba(253,253,252,.92),rgba(228,230,232,.86));-webkit-backdrop-filter:blur(7px) saturate(1.5);backdrop-filter:blur(7px) saturate(1.5);
  box-shadow:inset 0 1.5px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.5),inset 0 -1.5px 0 rgba(16,18,22,.14),0 0 0 1px rgba(16,18,22,.16),0 1px 1px rgba(10,12,16,.2),0 7px 14px -5px rgba(10,12,16,.5);
  transition:background .15s,color .15s,translate .2s var(--ease),opacity .2s;animation:pim-in .6s var(--ease) both;animation-delay:calc(var(--s,0) * 120ms + 180ms);--focus:#fff}
.pim::after{content:"";position:absolute;inset:-7px;border-radius:inherit}
.pim:hover{translate:0 -2px}
.pim.soru{background:rgba(17,18,21,.62);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.9),0 7px 14px -5px rgba(10,12,16,.5);outline:1.5px dashed rgba(17,18,21,.6);outline-offset:-1.5px}
.pim.acik,.pim[aria-pressed=true]{background:#1d1e21;color:#f6f6f4;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1.5px #fff,0 7px 14px -5px rgba(10,12,16,.6)}
.pim.sonuk{opacity:.45}
.pim .fiyat{font-weight:700;font-size:.75rem;letter-spacing:.005em}
.pim .no{display:grid;place-items:center;min-width:1.25rem;height:1.25rem;margin-left:-.25rem;padding:0 .25rem;border-radius:var(--r-p);background:#1d1e21;color:#fff;font-size:.6875rem}
.pim.dikkat-cek{animation:dikkat 1.1s var(--ease) 2}
@keyframes pim-in{from{opacity:0;transform:translate(-50%,-140%) scale(.6)}60%{opacity:1;transform:translate(-50%,-44%) scale(1.04)}to{transform:translate(-50%,-50%)}}
@keyframes dikkat{0%{box-shadow:0 0 0 0 rgba(255,255,255,.9)}70%{box-shadow:0 0 0 16px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

/* Kesit sürgüsü: mimari kesit çizgisi + cam boncuk */
.kesit{position:absolute;inset:0;z-index:4;pointer-events:none}
.kesit-cizgi{position:absolute;top:0;bottom:0;left:var(--k);width:2px;margin-left:-1px;background:rgba(255,255,255,.95);box-shadow:0 0 0 .5px rgba(0,0,0,.25),0 0 12px rgba(0,0,0,.35);pointer-events:none}
.kesit-cizgi::before,.kesit-cizgi::after{content:"";position:absolute;left:50%;width:10px;height:10px;margin-left:-5px;border:1.5px solid #fff;border-radius:2px;transform:rotate(45deg);background:rgba(17,18,21,.55)}
.kesit-cizgi::before{top:10px}.kesit-cizgi::after{bottom:10px}
.kesit-bas{position:absolute;top:50%;left:var(--k);width:2.75rem;height:2.75rem;margin:-1.375rem 0 0 -1.375rem;border:0;border-radius:50%;pointer-events:auto;cursor:ew-resize;touch-action:none;
  display:grid;place-items:center;color:#131417;background:var(--pill-bg);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(0,0,0,.22),0 4px 14px rgba(0,0,0,.45)}
.kesit-bas svg.i{width:20px;height:20px;stroke-width:1.8}
.kesit-k{position:absolute;inset:auto 0 0 0;width:100%;opacity:0;pointer-events:none;height:1px}
.kesit-k:focus-visible+.kesit-cizgi .kesit-bas,.kesit:focus-within .kesit-bas{outline:2px solid #fff;outline-offset:3px}
.etiket-mini{position:absolute;top:12px;z-index:5;display:inline-flex;align-items:center;height:1.625rem;padding:0 .625rem;border-radius:9px;font-size:.75rem;font-weight:700;color:#131417;pointer-events:none;
  background:linear-gradient(180deg,rgba(253,253,252,.88),rgba(228,230,232,.82));-webkit-backdrop-filter:blur(7px) saturate(1.5);backdrop-filter:blur(7px) saturate(1.5);
  box-shadow:inset 0 1.5px 0 #fff,inset 0 -1.5px 0 rgba(16,18,22,.14),0 0 0 1px rgba(16,18,22,.16),0 7px 14px -5px rgba(10,12,16,.5);transition:opacity .25s}
.etiket-mini.sol{left:12px}.etiket-mini.sag{right:12px}
.sahne-durum{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:6;display:inline-flex;align-items:center;gap:.5rem;height:2rem;padding:0 .875rem 0 .625rem;border-radius:var(--r-p);
  font-size:.8125rem;font-weight:700;color:#f5f5f3;white-space:nowrap;background:rgba(17,18,21,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(255,255,255,.08),0 8px 18px -8px rgba(0,0,0,.6);animation:asagidan .35s var(--ease) both}
.donen{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.22);border-top-color:#fff;animation:don .8s linear infinite;flex:none}
@keyframes don{to{transform:rotate(360deg)}}
@keyframes asagidan{from{opacity:0;translate:0 8px}}

/* Mühür: duvar onaylanınca */
.muhur{position:absolute;left:50%;top:50%;z-index:8;width:9.5rem;height:9.5rem;margin:-4.75rem 0 0 -4.75rem;border-radius:50%;display:grid;place-items:center;text-align:center;color:#f6f6f4;pointer-events:none;
  background:radial-gradient(circle,rgba(29,30,33,.9) 58%,rgba(29,30,33,.78));box-shadow:inset 0 0 0 2px rgba(238,214,164,.9),inset 0 0 0 7px rgba(29,30,33,.9),inset 0 0 0 8px rgba(238,214,164,.55),0 18px 40px -12px rgba(0,0,0,.7);
  animation:muhur 1.9s var(--ease) both}
.muhur svg.i{width:26px;height:26px;color:#eed6a4;stroke-width:1.6;margin:0 auto .25rem}
.muhur b{display:block;font-size:.9375rem;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.muhur small{display:block;font-size:.6875rem;font-weight:600;color:#c8cacd;margin-top:.125rem}
@keyframes muhur{0%{opacity:0;transform:scale(1.35) rotate(-14deg)}14%{opacity:1;transform:scale(.97) rotate(-8deg)}20%{transform:scale(1) rotate(-8deg)}82%{opacity:1;transform:scale(1) rotate(-8deg)}100%{opacity:0;transform:scale(.96) rotate(-8deg)}}

/* ---------- Levha (içerik) ---------- */
.levha{position:relative;z-index:2;margin:-.75rem var(--g) 0;padding:1.375rem 1.125rem 1.5rem;min-height:40svh}
.panel{display:grid;gap:1.125rem;animation:panel-in .4s var(--ease) both}
@keyframes panel-in{from{opacity:0;transform:translateY(8px)}}
.panel>section{display:grid;gap:.625rem}
.ust-blok{display:grid;gap:.5rem}

/* Hazırlık */
.foto-kontrol{display:grid;gap:.75rem}
.renk-serit{display:flex;gap:.375rem;flex-wrap:wrap}
.numune{display:flex;align-items:center;gap:.4375rem;height:1.875rem;padding:0 .625rem 0 .3125rem;border-radius:var(--r-p);background:var(--inner);box-shadow:var(--inner-sh);font-size:.75rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.numune i{width:1.25rem;height:1.25rem;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.35)}
.numune.bekliyor{opacity:0}
.numune.geldi{animation:numune-in .35s var(--ease) both}
@keyframes numune-in{from{opacity:0;transform:scale(.8)}}
.ucan-renk{position:fixed;z-index:60;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;pointer-events:none;box-shadow:0 0 0 2px #fff,0 4px 12px rgba(0,0,0,.45)}
.oda-serit{display:grid;gap:.625rem}
.oda-serit .ust-satir{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.oda-serit b{font-size:1rem;font-weight:800;letter-spacing:-.01em}
.palet-cubuk{display:flex;height:.875rem;border-radius:var(--r-p);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),0 1px 0 rgba(255,255,255,.3)}
.palet-cubuk i{display:block;height:100%}

/* Okuma: adım kapsülü */
.adimlar button{cursor:default;pointer-events:none;gap:.3125rem;font-size:.8125rem}
.adimlar button.bitti{color:var(--cap-ink)}
.adimlar button.bitti svg.i{width:13px;height:13px;stroke-width:2.2}
.adimlar button.bekliyor{opacity:.55}
.sure{display:flex;gap:.375rem;align-items:baseline;flex-wrap:wrap}
.sure .mono{font-weight:800;color:var(--ink);font-size:.875rem}
.mesaj-yogun{color:var(--dikkat);font-weight:600}
.firsat-mini{list-style:none;margin:0;padding:0;display:grid;gap:.375rem}
.firsat-mini li{display:grid;grid-template-columns:1.75rem 1fr;gap:.625rem;align-items:start;padding:.5rem .625rem;border-radius:var(--r-m);background:var(--inner);box-shadow:var(--inner-sh);animation:panel-in .35s var(--ease) both;animation-delay:calc(var(--s,0) * 90ms)}
.firsat-mini b{font-size:.875rem;font-weight:700;display:block}
.firsat-mini span{font-size:.8125rem;color:var(--ink-3)}
.no-disk{display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;font-size:.75rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--pill-ink);background:var(--pill-bg);box-shadow:var(--pill-sh)}
.no-disk.soru{background:transparent;color:var(--ink);box-shadow:none;border:1.5px dashed var(--ink-3)}
.no-disk.sessiz{background:var(--inner);color:var(--ink-2);box-shadow:var(--inner-sh)}

/* Tepsi: seçilen ürünler (yatay) */
.tepsi{display:flex;gap:.625rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.25rem .125rem .5rem;margin:0 -.125rem;scrollbar-width:none}
.tepsi::-webkit-scrollbar{display:none}
.tepsi-kart{flex:none;width:9.25rem;scroll-snap-align:start;display:grid;gap:.375rem;padding:.4375rem .4375rem .625rem;border:0;border-radius:var(--r-m);background:var(--inner);box-shadow:var(--inner-sh);text-align:left;color:var(--ink);
  animation:tepsi-in .45s var(--ease) both;animation-delay:calc(var(--s,0) * 110ms)}
.tepsi-kart .gorsel{aspect-ratio:1;border-radius:var(--r-s)}
.tepsi-kart b{font-size:.8125rem;font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.03rem}
.tepsi-kart span{font-size:.75rem;color:var(--ink-3)}
.tepsi-kart .fiyat{font-size:.875rem;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
@keyframes tepsi-in{from{opacity:0;transform:translateX(18px)}}

/* Ürün görseli kutusu: mağaza fotoğrafları beyaz zeminde; görsel gelmezse mağazanın baş harfi */
.gorsel{position:relative;overflow:hidden;background:#fff;display:grid;place-items:center}
.gorsel>*{grid-area:1/1}
.gorsel img{width:100%;height:100%;object-fit:contain;position:relative}
.gorsel .harf{font-size:1.25rem;font-weight:800;color:#8a8d93}

/* Çok fotoğraf: ana duvar seçimi (çift halka, Verterra seçim halkası) */
.foto-serit{display:flex;gap:.625rem;overflow-x:auto;padding:5px 4px 4px;scrollbar-width:none}
.foto-serit .karo{position:relative;flex:none}
.foto-serit [data-ana],.foto-serit [data-ac-is]{position:relative;display:block;width:4.75rem;aspect-ratio:3/4;border:0;padding:0;border-radius:var(--r-s);overflow:hidden;background:#0c0f13;box-shadow:0 0 0 1px var(--line);transition:box-shadow .15s}
.foto-serit img{width:100%;height:100%;object-fit:cover}
.foto-serit [data-ana]:hover,.foto-serit [data-ac-is]:hover{box-shadow:0 0 0 1px rgba(255,255,255,.5)}
.foto-serit [data-ana][aria-pressed=true],.foto-serit [data-ac-is][aria-pressed=true]{box-shadow:0 0 0 2px var(--cap-solid),0 0 0 4px #fff}
.foto-serit .etiket-mini{top:auto;bottom:4px;left:4px;height:1.25rem;font-size:.625rem;padding:0 .375rem;border-radius:7px}
.foto-serit .sil{position:absolute;top:4px;right:4px;display:grid;place-items:center;width:1.5rem;height:1.5rem;padding:0;border:0;border-radius:50%;color:#fff;background:rgba(17,18,21,.72);box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.foto-serit .sil::after{content:"";position:absolute;inset:-8px}
.foto-serit .sil svg.i{width:12px;height:12px;stroke-width:2}
.foto-serit .ekle{flex:none;display:grid;place-content:center;justify-items:center;gap:.25rem;width:4.75rem;aspect-ratio:3/4;border-radius:var(--r-s);border:1.5px dashed var(--line-2);color:var(--ink-2);font-size:.75rem;font-weight:700;cursor:pointer;transition:background-color .15s}
.foto-serit .ekle:hover{background:var(--hover)}
/* Bütün oda modu: sıradaki duvarı çekmek dokta açık kalır */
.dok.oda-kip #l-kamera{width:auto;padding:0 .875rem;background:var(--inner);box-shadow:var(--inner-sh);color:var(--ink)}
.dok.oda-kip #l-kamera .metin{max-width:10rem;opacity:1;margin-left:0}

/* Eşya bazlı düzenleme: kendi eşya pimleri, sıradaki değişiklik halkası, aday kartları */
.pim.esya{background:rgba(17,18,21,.68);color:#f6f6f4;font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 1px rgba(255,255,255,.4),0 7px 14px -5px rgba(10,12,16,.55)}
.pim.esya .ad{display:block;max-width:8.5rem;overflow:hidden;text-overflow:ellipsis} /* uzun eşya adları fotoğrafı kapatmasın */
.pim.degisecek{box-shadow:0 0 0 2px #eed6a4,0 0 0 4px rgba(17,18,21,.45),0 7px 14px -5px rgba(10,12,16,.55)}
.duzen-eylem{display:grid;gap:.5rem;padding:.75rem;border-radius:var(--r-m);background:var(--inner);box-shadow:var(--inner-sh)}
.eylemler{display:flex;flex-wrap:wrap;gap:.375rem}
.aday-liste{display:grid;gap:.5rem}
.aday{display:grid;grid-template-columns:4.5rem 1fr;gap:.75rem;align-items:center;width:100%;padding:.5rem .75rem .5rem .5rem;border:0;border-radius:var(--r-m);background:var(--inner);box-shadow:var(--inner-sh);text-align:left;color:var(--ink);transition:background-color .15s,box-shadow .15s}
.aday:hover{background:var(--hover);box-shadow:var(--inner-sh),0 0 0 2px var(--ink)}
.aday .gorsel{width:4.5rem;height:4.5rem;border-radius:var(--r-s)}
.aday-bilgi{display:grid;gap:.1875rem;min-width:0}
.aday-bilgi b{font-size:.875rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.aday-alt{display:flex;flex-wrap:wrap;gap:.375rem;align-items:center}
.aday .fiyat{font-size:.9375rem;font-weight:800;font-variant-numeric:tabular-nums}
.cip.secilir{border:0;cursor:pointer;transition:background-color .15s}
.cip.secilir:hover{background:var(--hover);color:var(--ink)}
.firsat-mini li.uc{grid-template-columns:1.75rem 1fr auto;align-items:center}
.rozet.uzun{white-space:normal;height:auto;min-height:1.75rem;padding:.25rem .6875rem .25rem .5625rem;line-height:1.3}
.surum-uyari{display:grid;gap:.5rem;box-shadow:var(--inner-sh),inset 3px 0 0 #d99a2b}
.esya-ikon{color:#5c5f65}
.esya-ikon svg.i{width:24px;height:24px;stroke-width:1.4}
.urun .gorsel.kirpim{background-repeat:no-repeat}

/* Faz 1: karar kartı (çizmeden önce "Bu olsun / Benimki kalsın"), kalp, yazıdan anlaşılan kararlar, eşya kontrolü */
#k-baslik:focus{outline:none}
body[data-ekran=karar] .kose{opacity:0}
.karar-liste{display:grid;gap:.75rem}
.karar-kart{display:grid;gap:.75rem;padding:.875rem;border-radius:var(--r-m);background:var(--inner);box-shadow:var(--inner-sh);transition:box-shadow .2s;animation:panel-in .35s var(--ease) both}
.karar-kart.aktif{box-shadow:var(--inner-sh),0 0 0 2px var(--ink)}
.karar-ust{display:flex;align-items:flex-end;justify-content:space-between;gap:.75rem}
.karar-ust>div{display:grid;gap:.125rem;min-width:0}
.karar-ust h2{font-size:1.125rem;font-weight:800;letter-spacing:-.015em;line-height:1.2}
.karar-ust>.kucuk{text-align:right;flex:none;max-width:48%}
.karar-gorsel{display:grid;grid-template-columns:1fr 1.25rem 1fr;column-gap:.375rem;row-gap:.4375rem;align-items:center}
.karar-resim{position:relative;display:grid;min-width:0}
.karar-resim .kirpim,.karar-resim .gorsel{width:100%;aspect-ratio:1;border-radius:var(--r-s);box-shadow:0 0 0 1px var(--line)}
/* Takım: ilk eşya tam boy, ikincisi köşede küçük kart (iki yan aynı boyda kalsın) */
.karar-resim.yigin>:nth-child(2){position:absolute;right:-4px;bottom:-4px;width:46%;box-shadow:0 0 0 2px var(--cap-solid),0 6px 14px -4px rgba(0,0,0,.45)}
.karar-resim.yigin>a:nth-child(2) .gorsel{box-shadow:none}
.karar-resim .fazla{position:absolute;left:6px;bottom:6px;display:grid;place-items:center;min-width:1.5rem;height:1.5rem;padding:0 .375rem;border-radius:var(--r-p);background:rgba(17,18,21,.72);color:#fff;font-size:.75rem;font-weight:800}
.karar-resim[data-karar-foto]{cursor:zoom-in}
.karar-oneri{display:block;border-radius:var(--r-s)}
.karar-ok{display:grid;place-items:center;color:var(--ink-3)}
.karar-alt{align-self:start;font-size:.75rem;color:var(--ink-3);line-height:1.35;min-width:0}
.karar-alt b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.8125rem;font-weight:700;color:var(--ink);margin-bottom:.0625rem}
.karar-alt .fiyat{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.karar-kart .seg button{white-space:normal;line-height:1.15}
body:not([data-ekran=karar]) .dok-karar,body[data-ekran=karar] .dok-hazirlik,body[data-ekran=karar] .dok-sonuc{display:none}
/* Kalp: ürün satırının kardeşi (düğme içinde düğme olmaz); basılıyken dolu */
.urun-kap{position:relative;display:grid}
.urun-kap:has(.kalp) .urun{padding-right:3rem}
.kalp{position:absolute;right:.375rem;top:50%;translate:0 -50%;display:grid;place-items:center;width:2.25rem;height:2.25rem;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink-3);transition:color .15s,background-color .15s}
.kalp::after{content:"";position:absolute;inset:-4px;border-radius:50%}
.kalp:hover{background:var(--hover);color:var(--ink)}
.kalp svg.i{width:18px;height:18px;transition:transform .25s var(--ease)}
.kalp[aria-pressed=true]{color:var(--ink)}
.kalp[aria-pressed=true] svg.i,.kalp-tb[aria-pressed=true] svg.i,.pim svg.i{fill:currentColor}
.kalp[aria-pressed=true] svg.i{transform:scale(1.08)}
.kalp-satir{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem}
.pim svg.i{width:12px;height:12px;stroke-width:1.4;margin-right:-.125rem}
/* Dokunulabilir rozet ve çip (sorunlu eşya, yazıdan anladığım karar) */
button.rozet{border:0;cursor:pointer;font-family:inherit;text-align:left;transition:background-color .15s}
button.rozet:hover,button.cip:hover{background:var(--hover)}
.rozet svg.i,.cip.secilir svg.i{width:12px;height:12px;stroke-width:2;margin-left:-.125rem;flex:none}
#s-anladim .cip{text-align:left;max-width:100%}

/* Marka kartı fareyle hafifçe eğilir (Verterra'da kullanıcının sevdiği detay) */
.egim{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease)}
#liste{display:grid;gap:.875rem}

/* Sonuç */
.ozet{gap:.625rem}
.ozet .ust-satir{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}
.sekmeler{position:sticky;top:calc(var(--g) + env(safe-area-inset-top));z-index:5;background:var(--cap-solid)} /* yapışınca altındaki yazı sızmasın */
.sekmeler button{font-size:.8125rem;padding:0 .375rem}
.sekme{display:grid;gap:.875rem;animation:panel-in .3s var(--ease) both}
.grup{display:grid;gap:.5rem}
.grup-baslik{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;padding:0 .125rem}
.grup-baslik b{font-size:.875rem;font-weight:800}
.grup-baslik span{font-size:.8125rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.urun{display:grid;grid-template-columns:3.5rem 1fr auto;gap:.75rem;align-items:center;width:100%;padding:.5rem .75rem .5rem .5rem;border:0;border-radius:var(--r-m);background:var(--inner);box-shadow:var(--inner-sh);text-align:left;color:var(--ink);
  transition:background-color .15s,opacity .2s,box-shadow .2s}
.urun:hover{background:var(--hover)}
.urun .gorsel{width:3.5rem;height:3.5rem;border-radius:var(--r-s)}
.urun .ad{font-size:.875rem;font-weight:700;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.urun .alt{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .375rem;margin-top:.25rem;font-size:.75rem;color:var(--ink-3)}
.urun .sag{display:grid;justify-items:end;gap:.25rem}
.urun .fiyat{font-size:.9375rem;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.urun .no-disk{width:1.375rem;height:1.375rem;font-size:.6875rem}
.urun.disarda{opacity:.5}
.urun.disarda .fiyat{text-decoration:line-through}
.urun.vurgu{box-shadow:var(--inner-sh),0 0 0 2px var(--ink)}
.boya-satir{display:grid;grid-template-columns:3.5rem 1fr auto;gap:.75rem;align-items:center;padding:.5rem .75rem .5rem .5rem;border-radius:var(--r-m);background:var(--inner);box-shadow:var(--inner-sh)}
.boya-satir .renk{width:3.5rem;height:3.5rem;border-radius:var(--r-s);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.3)}

/* Fırsat kartları */
.firsat{display:grid;grid-template-columns:2rem 1fr;gap:.75rem;padding:.875rem .875rem .875rem .75rem;border-radius:var(--r-m);background:var(--inner);box-shadow:var(--inner-sh);transition:opacity .2s,box-shadow .2s}
.firsat .no-disk{width:2rem;height:2rem;font-size:.8125rem}
.firsat h3{font-size:1rem;font-weight:800;letter-spacing:-.01em;line-height:1.25}
.firsat p{font-size:.875rem;color:var(--ink-2);margin-top:.25rem;text-wrap:pretty}
.firsat .alt{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.625rem}
.firsat .kucuk-urun{width:2.5rem;height:2.5rem;border-radius:var(--r-s);border:0;padding:0;box-shadow:0 0 0 1px var(--line)}
.firsat .ipucu{font-size:.8125rem;color:var(--ink-3);margin-top:.5rem}
.firsat .ipucu.secili{color:var(--ink);font-weight:600}
.firsat.kapali{opacity:.55}
.firsat.vurgu{box-shadow:var(--inner-sh),0 0 0 2px var(--ink)}
.firsat .seg button{height:2rem;font-size:.8125rem;padding:0 .75rem}
.tb.kucuk-tb{height:2rem;font-size:.8125rem;padding:0 .75rem}
.tb.kuyu[aria-pressed=true]{background:var(--primary);color:var(--primary-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(0,0,0,.3)}

/* Palet */
.palet-satir{display:grid;grid-template-columns:3.5rem 1fr;align-items:center;gap:.75rem}
.palet-satir .palet-cubuk{height:2.25rem;border-radius:var(--r-m)}
.lejant{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:.5rem}
.numune-kart{display:grid;grid-template-columns:2.25rem 1fr;gap:.625rem;align-items:center;padding:.4375rem .625rem .4375rem .4375rem;border-radius:var(--r-m);background:var(--inner);box-shadow:var(--inner-sh)}
.numune-kart i{width:2.25rem;height:2.25rem;border-radius:var(--r-s);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.3)}
.numune-kart b{font-size:.8125rem;font-weight:700;display:block;line-height:1.2}
.numune-kart span{font-size:.75rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.tanim{display:grid;grid-template-columns:auto 1fr;gap:.375rem 1rem;margin:0;font-size:.875rem}
.tanim dt{color:var(--ink-3);font-weight:600}
.tanim dd{margin:0;font-weight:600;color:var(--ink)}

/* Notlar */
.not-liste{display:grid;gap:.5rem}
.not-liste article{padding:.875rem 1rem;border-radius:var(--r-m);background:var(--inner);box-shadow:var(--inner-sh)}
.not-liste b{display:block;font-size:.9375rem;font-weight:800;letter-spacing:-.005em;margin-bottom:.25rem}
.not-liste p{font-size:.875rem;color:var(--ink-2);text-wrap:pretty}

/* Oda */
.duvarlar{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
.duvar{position:relative;margin:0;border-radius:var(--r-m);overflow:hidden;background:#0c0f13;aspect-ratio:3/4;box-shadow:0 0 0 1px var(--line)}
.duvar[role=button]{cursor:pointer}
.duvar[role=button]:hover{box-shadow:0 0 0 2px var(--line-2)}
.duvar img{width:100%;height:100%;object-fit:cover}
.duvar figcaption{position:absolute;left:.375rem;right:.375rem;bottom:.375rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.25rem;align-items:center}
.duvar .etiket-mini{height:auto;min-height:1.625rem;padding:.25rem .625rem;line-height:1.2;white-space:normal;max-width:100%}
.duvar .rozet{background:rgba(253,253,252,.92);color:#5c5f65}
.duvar .rozet.iyi{color:#1f7344}.duvar .rozet.dikkat{color:#93590a} /* fotoğraf üstünde açık rozet: gece renkleri değil gündüz renkleri */
.duvar .etiket-mini{position:static}
.duvar.bu{box-shadow:0 0 0 2px var(--ink)}
.ortak{display:grid;gap:.375rem}
.ortak .satir{display:grid;grid-template-columns:2.5rem 1fr auto;gap:.625rem;align-items:center;font-size:.8125rem}
.ortak .gorsel{width:2.5rem;height:2.5rem;border-radius:8px}
.ortak b{font-weight:700;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.ortak .fiyat{font-weight:800;font-variant-numeric:tabular-nums}

/* ---------- Dok ---------- */
.dok{position:fixed;z-index:30;bottom:calc(var(--g) + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);height:var(--dok-h);display:flex;align-items:center;gap:.375rem;padding:0 6px;border-radius:var(--r-p);
  max-width:calc(100vw - var(--g) * 2);transition:transform .45s var(--ease),opacity .3s}
.dok-grup{display:flex;align-items:center;gap:.375rem}
body[data-ekran=hazirlik] .dok-sonuc,body[data-ekran=sonuc] .dok-hazirlik{display:none}
body[data-ekran=okuma] .dok{transform:translate(-50%,calc(100% + var(--g) * 2));opacity:0;pointer-events:none}
.dosya{position:relative;overflow:hidden}
.dosya input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
.dosya:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.dok .metin{transition:max-width .32s var(--ease),opacity .2s,margin .32s var(--ease);max-width:10rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.dok.foto-var .dosya .metin{max-width:0;opacity:0;margin-left:-.4375rem}
.dok.foto-var .dosya{padding:0;width:2.75rem}
#sepet-dugme b{font-weight:800;font-variant-numeric:tabular-nums}
#modlar button{padding:0 .8125rem}

/* Seçim çubuğu */
.secim-cubuk{position:fixed;z-index:31;left:50%;bottom:calc(var(--g) * 2 + var(--dok-h) + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:.75rem;
  padding:6px 6px 6px 1rem;border-radius:var(--r-p);font-size:.8125rem;font-weight:600;white-space:nowrap;animation:asagidan .3s var(--ease) both;max-width:calc(100vw - var(--g) * 2)}

/* Tost */
.tost{position:fixed;z-index:80;top:calc(var(--g) * 2 + 3rem + env(safe-area-inset-top));left:50%;transform:translateX(-50%);max-width:min(30rem,calc(100vw - var(--g) * 2));
  padding:.625rem 1rem;border-radius:var(--r-m);font-size:.875rem;font-weight:600;transition:opacity .25s,translate .25s var(--ease)}
.tost:not(.acik){opacity:0;translate:0 -8px;pointer-events:none}
.tost:empty{padding:0}
.tost.uyari{box-shadow:var(--slab-in),var(--lift),inset 3px 0 0 #d99a2b}
@keyframes tost-in{from{opacity:0;translate:0 -8px}}

/* ---------- Diyaloglar ---------- */
dialog.slab{position:fixed;border:0;padding:0;color:var(--ink);width:min(30rem,calc(100vw - var(--g) * 2));max-height:min(88svh,46rem);overflow:auto;border-radius:var(--r-l);overscroll-behavior:contain}
dialog.slab::before,dialog.slab::after{display:none}
dialog.slab{box-shadow:var(--slab-in),inset 0 0 0 1px var(--rim-2),var(--lift)}
dialog::backdrop{background:rgba(8,10,13,.48)}
dialog[open]{animation:diyalog-in .28s var(--ease) both}
@keyframes diyalog-in{from{opacity:0;transform:translateY(14px) scale(.98)}}
.diyalog-govde{display:grid;gap:1rem;padding:1.25rem 1.25rem 1.375rem}
.diyalog-ust{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.diyalog-ust h2{font-size:1.375rem;font-weight:800;letter-spacing:-.025em;line-height:1.15}
.diyalog-eylem{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.diyalog-eylem>*{width:100%}
.diyalog-eylem>:only-child{grid-column:1/-1}
.diyalog-eylem .tb{height:calc(2.25rem + 6px)}
.yan-yana{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.yan-yana:has(>[hidden])>:not([hidden]){grid-column:1/-1}
.yan-yana figure{margin:0;display:grid;gap:.375rem}
.yan-yana .gorsel,.yan-yana .kirpim{aspect-ratio:1;border-radius:var(--r-m);box-shadow:0 0 0 1px var(--line)}
.kirpim{background-repeat:no-repeat;background-color:#0c0f13}
.yan-yana figcaption{font-size:.75rem;font-weight:600;color:var(--ink-3)}
.fiyat-buyuk{font-size:1.75rem;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.anahtar-satir{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.625rem .875rem;border-radius:var(--r-m);background:var(--inner);box-shadow:var(--inner-sh);font-size:.875rem;font-weight:600}
.anahtar-satir input{width:2.75rem;height:1.625rem;appearance:none;-webkit-appearance:none;border-radius:var(--r-p);background:var(--cap);box-shadow:var(--cap-sh);position:relative;cursor:pointer;flex:none;margin:0;transition:background .2s}
.anahtar-satir input::after{content:"";position:absolute;top:3px;left:3px;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--pill-bg);box-shadow:var(--pill-sh);transition:transform .2s var(--ease)}
.anahtar-satir input:checked{background:#2f8a57}
.anahtar-satir input:checked::after{transform:translateX(1.125rem)}
.qr{display:grid;place-items:center;padding:.75rem;border-radius:var(--r-m);background:#fff;width:fit-content}
.teknik{display:grid;gap:.375rem;font-size:.8125rem;color:var(--ink-2)}
.teknik b{color:var(--ink)}

/* ---------- Telefon dışı: sahne solda sabit, levha sağda ---------- */
@media (min-width:960px){
  body{padding-bottom:0}
  .sahne{position:fixed;top:0;left:0;bottom:0;right:calc(var(--levha-w) + var(--g));height:auto!important;
    padding:calc(var(--g) * 2 + 3rem) calc(var(--g) * 2) calc(var(--dok-h) + var(--g) * 3)}
  .levha{position:fixed;top:var(--g);right:var(--g);bottom:var(--g);width:var(--levha-w);margin:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;min-height:0;
    box-shadow:var(--slab-in),inset 0 0 0 1px var(--rim-2),var(--lift)}
  .levha::before,.levha::after{display:none}
  .ust{right:calc(var(--levha-w) + var(--g) * 2)}
  body.kaydi .ust{transform:none;opacity:1}
  .dok,.secim-cubuk{left:calc((100vw - var(--levha-w) - var(--g)) / 2)}
  .sekmeler{top:0}
  .baslik{font-size:2rem}
}
@media (max-width:959px){
  .dok{left:var(--g);right:var(--g);transform:none;justify-content:space-between;overflow-x:auto;scrollbar-width:none}
  .dok::-webkit-scrollbar{display:none}
  body[data-ekran=okuma] .dok{transform:translateY(calc(100% + var(--g) * 2))}
  body[data-ekran=hazirlik] .dok:not(.foto-var) .dok-hazirlik{width:100%}
  body[data-ekran=hazirlik] .dok:not(.foto-var) .dok-hazirlik .tb{flex:1}
  .dok.foto-var .dok-hazirlik{width:100%}
  .dok.foto-var #tasarla{flex:1}
  .dok-sonuc{width:100%;justify-content:space-between}
  .dok-karar{width:100%}
  .dok-karar #karar-gonder{flex:1}
  #sepet-dugme{position:sticky;right:0}
  .secim-cubuk{left:var(--g);right:var(--g);transform:none;justify-content:space-between}
  dialog.cekmece{margin:auto auto calc(var(--g) + env(safe-area-inset-bottom));max-height:86svh}
  dialog.cekmece[open]{animation:cekmece-in .32s var(--ease) both}
}
@keyframes cekmece-in{from{opacity:0;transform:translateY(40px)}}
@media (max-width:380px){
  #modlar button{padding:0 .5625rem;font-size:.8125rem}
  #sepet-dugme{padding:0 .875rem}
  #sepet-dugme svg.i{display:none} /* 100.000 TL üstü tutar da sığsın */
  .marka-alt{display:none}
  .baslik{font-size:1.5rem}
}
@media (pointer:coarse){
  :root{--dok-h:3.75rem}
  .seg button{height:2.5rem}
  .altin{height:2.75rem}
  .kaydirac::-webkit-slider-thumb{width:26px;height:26px;margin-top:-11px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;transition-duration:.001ms!important}
  .bos svg.perspektif [pathLength]{stroke-dashoffset:0}
}