/* Birleşik sayfa: Çekim ekranı. Bütün kurallar #e-cekim altında (başka ekranı etkilemez).
   Bağımlılık: /yeni/stil.css (.seg .tb .altin .slab .kucuk .gizli) + /atolye/tema-sivi.css (html[data-tema=sivi]: sedef hap, sıvı metal ana düğme, süt camı).
   Vizör koyu: kamera ekranıdır; göz fotoğrafa ve beyaz mimari çizgiye kalır, sedef kontroller tek parlak şey olur.
   Son kart v2 süt camı: sonraki (açık) ekranlara köprü. Sarı / altın / pirinç yok. */

@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}

#e-cekim{background:radial-gradient(120% 75% at 50% 44%,#1b1d22 0%,#111215 58%,#0b0c0e 100%);color:#eef0f3;container-type:size;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  --ck-bas:54px;--ck-yan:16px;--ck-dek:78px;--ck-yuva-w:44px;--ck-yuva-h:56px}
@container (max-height:720px){#e-cekim>*{--ck-bas:14px;--ck-dek:68px;--ck-yuva-w:36px;--ck-yuva-h:46px}}
#e-cekim *{box-sizing:border-box}

/* ---------- Sahne: fotoğraf katmanı (homografi) + çizim tuvali + rozetler ---------- */
#e-cekim .ck-sahne{position:absolute;inset:0;overflow:hidden;touch-action:none}
#e-cekim .ck-foto-kat,#e-cekim .ck-rozet-kat,#e-cekim .ck-ucus-kat{position:absolute;inset:0;pointer-events:none}
#e-cekim .ck-ucus-kat{z-index:8;overflow:hidden}
#e-cekim .ck-foto{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;opacity:0;backface-visibility:hidden;will-change:transform}
#e-cekim .ck-foto img{position:absolute;max-width:none;display:block}
#e-cekim .ck-tuval{position:absolute;inset:0;width:100%;height:100%;display:block}
#e-cekim .ck-flas{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}

/* duvar numarası: sıradaki sedef disk, çekilen tik, bekleyen ince halka */
#e-cekim .ck-no{position:absolute;left:0;top:0;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;display:grid;place-items:center;opacity:0;
  font-size:.75rem;font-weight:800;font-variant-numeric:tabular-nums;color:#f5f6f8;background:rgba(12,13,16,.72);box-shadow:inset 0 0 0 1.25px rgba(255,255,255,.6);transition:opacity .25s}
#e-cekim .ck-no svg{display:none;width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#e-cekim .ck-no.sirada{width:30px;height:30px;margin:-15px 0 0 -15px;font-size:.875rem;color:#15171b;
  background:radial-gradient(circle at 40% 28%,#fff 0 18%,#eceef2 55%,#b9bfc8 100%);box-shadow:0 0 0 3px rgba(255,255,255,.14),0 4px 12px rgba(0,0,0,.6)}
#e-cekim .ck-no.tamam{color:#15171b;background:radial-gradient(circle at 40% 28%,#fff 0 18%,#e6e9ed 60%,#b3b9c2 100%);box-shadow:0 2px 8px rgba(0,0,0,.55)}
#e-cekim .ck-no.tamam b{display:none}
#e-cekim .ck-no.tamam svg{display:block}
#e-cekim .ck-no.sayi{color:#15171b;background:radial-gradient(circle at 40% 28%,#fff 0 18%,#e6e9ed 60%,#b3b9c2 100%);box-shadow:0 2px 8px rgba(0,0,0,.55)}

/* ---------- Üst: mod seçimi ve talimat ---------- */
#e-cekim .ck-ust{position:absolute;z-index:4;left:0;right:0;top:0;padding:var(--ck-bas) var(--ck-yan) 14px;
  background:linear-gradient(180deg,rgba(11,12,14,.96) 0%,rgba(11,12,14,.88) 72%,rgba(11,12,14,0) 100%);transition:opacity .3s,transform .3s}
#e-cekim .ck-ust.gizle,#e-cekim .ck-alt.gizle{opacity:0;pointer-events:none}
#e-cekim .ck-ust.gizle{transform:translateY(-12px)}
#e-cekim .ck-alt.gizle{transform:translateY(16px)}
/* koyu kapsül + sedef hap (hap tema-sivi'den: html[data-tema=sivi] .seg button[aria-checked=true]) */
#e-cekim .ck-mod{--cap:rgba(0,0,0,.55);--cap-ink:#f5f6f8;--cap-ink-2:#c9ccd2;--cap-hover:rgba(255,255,255,.08);--focus:#fff;
  --cap-sh:inset 0 1px 2px rgba(0,0,0,.7),inset 0 0 0 .5px rgba(255,255,255,.14),0 1px 0 rgba(255,255,255,.07);height:48px;padding:4px;gap:4px}
#e-cekim .ck-mod button{height:40px;font-size:.9375rem;font-weight:700;gap:.5rem}
#e-cekim .ck-mod button svg.i{width:17px;height:17px;stroke-width:1.5}
#e-cekim .ck-mod button[aria-checked=true]{color:#15171b}
#e-cekim .ck-mod button:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* bütün odanın iki yolu: ikincil seçim (hap sedef değil, soluk cam: ana seçimin altında kalır) */
#e-cekim .ck-yol{--cap:rgba(255,255,255,.05);--cap-ink:#f5f6f8;--cap-ink-2:#c9ccd2;--cap-hover:rgba(255,255,255,.07);--focus:#fff;
  --cap-sh:inset 0 0 0 1px rgba(255,255,255,.12);height:40px;padding:3px;gap:3px;margin-top:8px}
#e-cekim .ck-yol button{height:34px;font-size:.8125rem;font-weight:700;gap:.375rem}
#e-cekim .ck-yol button svg.i{width:15px;height:15px;stroke-width:1.5}
#e-cekim .ck-yol button small{font-size:.75rem;font-weight:600;color:#aeb3bb}
#e-cekim .ck-yol button[aria-checked=true]{color:#fff;background:rgba(255,255,255,.15);border-color:transparent;box-shadow:inset 0 0 0 1.25px rgba(255,255,255,.6)}
#e-cekim .ck-yol button[aria-checked=true] small{color:#dfe2e7}
#e-cekim .ck-yol button:focus-visible{outline:2px solid #fff;outline-offset:1px}
#e-cekim .ck-talimat{display:flex;align-items:flex-start;gap:12px;margin-top:14px}
#e-cekim .ck-metin{flex:1;min-width:0;padding-top:2px}
#e-cekim .ck-baslik{display:block;font-size:1.0625rem;font-weight:800;letter-spacing:-.015em;line-height:1.25;color:#f7f8fa;text-wrap:balance}
#e-cekim .ck-aciklama{margin:4px 0 0;font-size:.8125rem;line-height:1.45;color:#c4c8cf;text-wrap:pretty}

/* plan krokisi: mimari plan dili (poşe duvar, kapı yayı, pencere camı), sen ve bakış konisi */
#e-cekim .ck-kroki{flex:none;width:92px;height:82px;overflow:visible}
#e-cekim .ck-kroki .kz{fill:rgba(255,255,255,.04)}
#e-cekim .ck-kroki .kd{fill:rgba(255,255,255,.34);transition:fill .3s}
#e-cekim .ck-kroki .kd.tamam{fill:#dfe2e7}
#e-cekim .ck-kroki .kd.sirada{fill:#fff;stroke:#fff;stroke-width:.09}
#e-cekim .ck-kroki .kd.sonuk{fill:rgba(255,255,255,.2)}
#e-cekim .ck-kroki .kcam{fill:none;stroke:rgba(255,255,255,.75);stroke-width:.035}
#e-cekim .ck-kroki .kkanat{fill:none;stroke:rgba(255,255,255,.62);stroke-width:.04}
#e-cekim .ck-kroki .kkoni{fill:rgba(255,255,255,.17)}
#e-cekim .ck-kroki .kben{fill:#fff;stroke:#111215;stroke-width:.06}
#e-cekim .ck-kroki .kok-ok{fill:none;stroke:#fff;stroke-width:.075;stroke-linecap:round;stroke-linejoin:round}
#e-cekim .ck-kroki .kdurak{fill:none;stroke:rgba(255,255,255,.45);stroke-width:.06}
#e-cekim .ck-kroki .kdurak.tamam{fill:#dfe2e7;stroke:none}
#e-cekim .ck-kroki .kdurak.sirada{stroke:#fff;stroke-width:.11}
#e-cekim .ck-kroki .kdurak.gizle{display:none}
#e-cekim .ck-kroki.kosemod .kno{display:none}
#e-cekim .ck-kroki .kno{font:800 .76px Figtree,system-ui,sans-serif;fill:rgba(255,255,255,.66);text-anchor:middle}
#e-cekim .ck-kroki .kno.sirada{fill:#fff}
#e-cekim .ck-kroki .kno.gizle{display:none}

/* ---------- Alt: duvar yuvaları + galeri / deklanşör / bitti ---------- */
#e-cekim .ck-alt{position:absolute;z-index:4;left:0;right:0;bottom:0;display:grid;gap:14px;padding:22px var(--ck-yan) calc(20px + env(safe-area-inset-bottom));
  background:linear-gradient(0deg,rgba(11,12,14,.96) 0%,rgba(11,12,14,.9) 70%,rgba(11,12,14,0) 100%);transition:opacity .3s,transform .3s}
#e-cekim .ck-durus{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 0 -4px;font-size:.75rem;font-weight:600;color:#c4c8cf;text-align:center}
#e-cekim .ck-durus svg.i{width:14px;height:14px;flex:none}
#e-cekim .ck-yuvalar{display:flex;justify-content:center;gap:8px;list-style:none;margin:0;padding:0}
#e-cekim .ck-yuva.istege{box-shadow:none;outline:1.5px dashed rgba(255,255,255,.3);outline-offset:-1.5px}
#e-cekim .ck-yuvalar.kosemod .ck-yuva{width:calc(var(--ck-yuva-w) * 1.2)}
#e-cekim .ck-yuva{position:relative;width:var(--ck-yuva-w);height:var(--ck-yuva-h);border-radius:10px;overflow:hidden;display:grid;place-items:center;
  font-size:.8125rem;font-weight:800;color:rgba(255,255,255,.66);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.24)}
#e-cekim .ck-yuva svg.i{width:16px;height:16px}
#e-cekim .ck-yuva.sirada{color:#fff;box-shadow:inset 0 0 0 2px #fff,0 0 0 4px rgba(255,255,255,.1)}
#e-cekim .ck-yuva img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:ck-gir .35s ease both}
#e-cekim .ck-yuva.dolu{box-shadow:0 0 0 1px rgba(255,255,255,.3)}
#e-cekim .ck-yuva.dolu .ck-yno{position:absolute;left:3px;top:3px;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font-size:.6875rem;color:#15171b;
  background:radial-gradient(circle at 40% 28%,#fff 0 18%,#e6e9ed 60%,#b3b9c2 100%);box-shadow:0 1px 3px rgba(0,0,0,.6)}
#e-cekim .ck-yuva.dolu .ck-yno svg.i{width:11px;height:11px}
#e-cekim .ck-yuvalar.tek .ck-yuva{width:calc(var(--ck-yuva-h) * 1.5)}
#e-cekim .ck-dugmeler{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
#e-cekim .ck-yan{display:grid;justify-items:center;gap:5px;padding:0;border:0;background:none;color:#f2f3f5;font:inherit;cursor:pointer;min-width:0}
#e-cekim #ck-galeri{justify-self:start;margin-left:6px}
#e-cekim #ck-bitti{justify-self:end;margin-right:6px}
#e-cekim .ck-yuvarlak{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#15171b;border:1.5px solid transparent;
  background:var(--sedef-yuz,linear-gradient(180deg,#fff,#eceef2)) padding-box,var(--krom-kenar,linear-gradient(168deg,#fff,#8f96a1 62%,#fff)) border-box;
  box-shadow:inset 0 1px 0 #fff,0 10px 20px -8px rgba(0,0,0,.85);transition:transform .12s}
#e-cekim .ck-yuvarlak svg.i{width:21px;height:21px;stroke-width:1.5}
#e-cekim .ck-yan:active .ck-yuvarlak,#e-cekim .ck-yan.basili .ck-yuvarlak{transform:scale(.93)}
#e-cekim .ck-yan-yazi{display:grid;justify-items:center;font-size:.8125rem;font-weight:700;line-height:1.2;white-space:nowrap}
#e-cekim .ck-yan-yazi small{font-size:.75rem;font-weight:600;color:#c4c8cf}
#e-cekim .ck-yan:disabled{opacity:.5;cursor:default}
#e-cekim .ck-yan:focus-visible{outline:none}
#e-cekim .ck-yan:focus-visible .ck-yuvarlak{outline:2px solid #fff;outline-offset:3px}
/* deklanşör: krom halka (yalnız lila ve buz izi), sedef disk */
#e-cekim .ck-deklansor{position:relative;width:var(--ck-dek);height:var(--ck-dek);border-radius:50%;border:0;padding:0;display:grid;place-items:center;cursor:pointer;
  background:conic-gradient(from 200deg,#565c66,#c5cad2 12%,#fff 20%,#cfc7ef 25%,#bfdcef 30%,#fff 36%,#8f96a1 52%,#4a5059 64%,#d5d9df 80%,#fff 88%,#565c66);
  box-shadow:0 0 0 1px rgba(255,255,255,.16),0 12px 28px -10px rgba(0,0,0,.9)}
#e-cekim .ck-deklansor::before{content:"";position:absolute;inset:4px;border-radius:50%;background:#0f1013}
#e-cekim .ck-deklansor i{position:relative;width:calc(100% - 15px);height:calc(100% - 15px);border-radius:50%;
  background:radial-gradient(circle at 50% 26%,#fff 0 20%,#eceef2 55%,#c3c8d0 100%);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 3px rgba(59,64,72,.3),0 1px 2px rgba(0,0,0,.5);transition:transform .12s}
#e-cekim .ck-deklansor:active i{transform:scale(.92)}
#e-cekim .ck-deklansor:disabled{cursor:default}
#e-cekim .ck-deklansor:disabled i{opacity:.75}
#e-cekim .ck-deklansor:focus-visible{outline:2px solid #fff;outline-offset:4px}

#e-cekim .ck-bildiri{position:absolute;z-index:9;left:50%;top:200px;transform:translateX(-50%);max-width:calc(100% - 32px);padding:.5rem .875rem;border-radius:999px;
  font-size:.8125rem;font-weight:700;color:#f5f6f8;text-align:center;background:rgba(12,13,16,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.18),0 12px 26px -10px #000}
#e-cekim .ck-bildiri.gir{animation:ck-asagidan .3s cubic-bezier(.2,.7,.2,1) both}

/* ---------- Son: süt camı levha, sıvı metal ana düğme ---------- */
#e-cekim .ck-son{position:absolute;z-index:6;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));display:grid;gap:12px;padding:18px 16px 16px;border-radius:28px;color:var(--ink,#15171b);
  -webkit-user-select:text;user-select:text;animation:ck-levha .45s cubic-bezier(.2,.7,.2,1) both}
#e-cekim .ck-son.olcum{visibility:hidden;animation:none}
#e-cekim .ck-son h2{font-size:1.25rem;font-weight:800;letter-spacing:-.02em;line-height:1.2;outline:none}
#e-cekim .ck-son .kucuk{margin-top:-4px}
#e-cekim .ck-son-kucukler{display:flex;gap:6px}
#e-cekim .ck-sk{position:relative;width:42px;height:54px;padding:0;border:0;border-radius:9px;overflow:hidden;cursor:pointer;background:#d9dce1;box-shadow:0 0 0 .5px rgba(30,36,48,.25),0 4px 10px -5px rgba(30,36,48,.5)}
#e-cekim .ck-sk img{width:100%;height:100%;object-fit:cover}
#e-cekim .ck-sk b{position:absolute;left:3px;top:3px;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font-size:.6875rem;font-weight:800;color:#15171b;
  background:radial-gradient(circle at 40% 28%,#fff 0 18%,#e6e9ed 60%,#b3b9c2 100%);box-shadow:0 1px 3px rgba(30,36,48,.5)}
#e-cekim .ck-son-kucukler.tek .ck-sk{width:72px;height:46px;cursor:default}
#e-cekim .ck-son-kucukler.tek .ck-sk b{display:none}
#e-cekim .ck-sk:focus-visible{outline:2px solid #15171b;outline-offset:2px}
#e-cekim .ck-son-dugme{display:flex;gap:8px;align-items:center}
#e-cekim .ck-son-dugme .tb{height:3rem;padding:0 1rem;flex:none}
#e-cekim .ck-son-dugme .altin{flex:1;min-width:0}
/* sıvı metal halka (atolye.css'teki taban; renk tema-sivi'den) */
#e-cekim .sivi{position:relative;isolation:isolate}
#e-cekim .sivi-halka{position:absolute;inset:-2px;border-radius:inherit;padding:2px;pointer-events:none;z-index:1;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
#e-cekim .sivi::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:0}
#e-cekim .sivi.tur .sivi-halka{animation:ck-tur .9s cubic-bezier(.4,0,.2,1)}
#e-cekim .sivi.tur::after{animation:ck-parilti .9s cubic-bezier(.4,0,.2,1)}
#e-cekim .altin.sivi{overflow:visible}
#e-cekim .altin .etiket{position:relative;z-index:2}

@keyframes ck-tur{from{--a:0deg}to{--a:360deg}}
@keyframes ck-parilti{0%{opacity:1;background-position:-120% 0}100%{opacity:1;background-position:220% 0}}
@keyframes ck-gir{from{opacity:0}}
@keyframes ck-asagidan{from{opacity:0;translate:0 -8px}}
@keyframes ck-levha{from{opacity:0;transform:translateY(18px)}}

/* küçük ekran (375×667 gibi) */
@container (max-height:720px){
  #e-cekim .ck-mod{height:44px}
  #e-cekim .ck-mod button{height:36px;font-size:.875rem}
  #e-cekim .ck-yol{height:36px;margin-top:6px}
  #e-cekim .ck-yol button{height:30px}
  #e-cekim .ck-talimat{margin-top:10px}
  #e-cekim .ck-durus{font-size:.6875rem}
  #e-cekim .ck-baslik{font-size:1rem}
  #e-cekim .ck-aciklama{font-size:.78125rem;margin-top:2px}
  #e-cekim .ck-kroki{width:78px;height:70px}
  #e-cekim .ck-alt{gap:10px;padding-top:16px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  #e-cekim .ck-yuvarlak{width:46px;height:46px}
  #e-cekim .ck-yan-yazi{font-size:.75rem}
  #e-cekim .ck-yan-yazi small{font-size:.6875rem}
  #e-cekim .ck-bildiri{top:calc(var(--ck-bas) + 100px)}
  #e-cekim .ck-son{padding:14px 14px 14px;gap:10px}
  #e-cekim .ck-son h2{font-size:1.125rem}
  #e-cekim .ck-sk{width:36px;height:46px}
}

@media (prefers-reduced-motion:reduce){
  #e-cekim .ck-ust,#e-cekim .ck-alt,#e-cekim .ck-no,#e-cekim .ck-kroki .kd{transition:none}
  #e-cekim .ck-son,#e-cekim .ck-bildiri.gir,#e-cekim .ck-yuva img{animation:none}
  #e-cekim .sivi.tur .sivi-halka,#e-cekim .sivi.tur::after{animation:none}
}