/* Noir Termos · ana sayfa v3 (docs/site-v3-plan.md). Mobil önce. Hareket yalnız transform/opacity; süre/eğri tokenları site.css'te.
   Bloklar: 1 ilk ekran (halka | ray) · 2 yolculuk (kapak → çanta → dışarı, scroll'a bağlı) · 3 ölçü · 4 renkler + yolda · 5 birlikte + kutu ·
   6 muhatap · 7 SSS · 8 kapanış · yapışkan çubuk + alt sayfa. */
html{transition:--ton 1.1s var(--cikis);interpolate-size:allow-keywords}
.ana-sayfa .ust{background:color-mix(in srgb,var(--zemin-ton) 80%,transparent);border-bottom-color:transparent;transition:background-color .4s var(--egri),border-color .4s var(--egri)}
.ana-sayfa .ust.kaydi{background:color-mix(in srgb,var(--krem) 90%,transparent);border-bottom-color:var(--cizgi)}
.ana-sayfa .baslik-b{font-size:clamp(36px,8.4vw,72px);line-height:1;letter-spacing:-.025em}
.ana-sayfa .giris{font-size:clamp(17px,2vw,22px);line-height:1.35}
.ana-sayfa .bolum{padding:clamp(64px,10vw,128px) 0}
@media(hover:hover){.lift{transition:transform .35s var(--cikis),box-shadow .35s var(--cikis)}}

/* ---------- 1 · ilk ekran: düzen noir.css'te (aktarılan sahne); burada yalnız alım formu ---------- */
.ilk-alim{grid-area:alim;width:100%;max-width:520px;display:grid;gap:6px;margin-top:18px}
.ilk[data-ilk=ray] .ilk-alim{margin-top:6px}
.ilk-renk{display:flex;align-items:baseline;justify-content:center;gap:8px;min-height:30px;transition:opacity 220ms var(--egri),transform 320ms var(--cikis)}
.ilk-renk.degisiyor{opacity:0;transform:translateY(6px)}
.ilk-renk b{font-weight:650;font-size:17px;letter-spacing:-.005em}
.ilk-renk span{color:var(--ucuncul)}
.ilk-renk em{font-family:var(--f-baslik);font-style:italic;font-weight:300;font-size:21px;color:var(--ikincil)}
.ilk-olcu{font-size:13px;color:var(--ikincil)}
.ilk-olcu a{color:var(--lac);text-underline-offset:3px;text-decoration-color:var(--cizgi-koyu);transition:text-decoration-color 160ms var(--egri)}
.ilk-olcu a:hover{text-decoration-color:var(--lac)}
.alim{display:grid;gap:10px;justify-items:center;margin-top:6px}
.adet-satir{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap}
.seg{position:relative;display:grid;grid-template-columns:repeat(4,48px);padding:4px;border-radius:var(--hap);background:color-mix(in srgb,var(--beyaz) 72%,transparent);box-shadow:inset 0 0 0 1px var(--cizgi)}
.seg-gosterge{position:absolute;top:4px;left:4px;width:48px;height:calc(100% - 8px);border-radius:var(--hap);background:var(--lac);box-shadow:0 6px 14px -6px rgba(15,23,42,.55);
  transform:translateX(calc(var(--seg-i,1) * 100%));transition:transform 300ms var(--cikis)}
.seg label{position:relative;z-index:1;height:38px;display:grid;place-items:center;font-weight:650;font-size:15px;border-radius:var(--hap);cursor:pointer;transition:color 220ms var(--egri),background-color 160ms var(--egri)}
.seg label span{transition:transform 140ms var(--egri)}
.seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.seg label:has(input:checked){color:#fff}
@media(hover:hover){.seg label:not(:has(input:checked)):hover{background:rgba(15,23,42,.06)}}
.seg label:active span{transform:scale(.9)}
.seg label:has(input:focus-visible){outline:2px solid var(--lac);outline-offset:2px}
.seg-etiket{font-size:14px;color:var(--ikincil)}
.adim-sayac{display:inline-flex;align-items:center;border:1.5px solid var(--cizgi-koyu);border-radius:var(--hap);background:var(--beyaz);animation:acil var(--orta) var(--cikis)}
.adim-sayac button{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;transition:background-color 140ms var(--egri),transform 140ms var(--egri)}
.adim-sayac button:hover:not([disabled]){background:var(--krem)}
.adim-sayac button:active:not([disabled]){transform:scale(.88)}
.adim-sayac button[disabled]{opacity:.3}
.adim-sayac output{min-width:26px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.adet-aciklama{font-size:13.5px;color:var(--ikincil);display:flex;flex-wrap:wrap;gap:2px 10px;justify-content:center;min-height:20px}
.ek-ac{color:var(--lac);font-weight:550;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--cizgi-koyu);transition:text-decoration-color 160ms var(--egri)}
.ek-ac:hover{text-decoration-color:var(--lac)}
.alim-ek{display:grid;gap:8px;width:100%;padding:12px 14px;border-radius:16px;background:color-mix(in srgb,var(--beyaz) 75%,transparent);box-shadow:inset 0 0 0 1px var(--cizgi);animation:acil var(--orta) var(--cikis)}
.alim-ek-satir{display:flex;align-items:center;gap:10px;justify-content:space-between}
.alim-etiket{font-size:13px;color:var(--ikincil);flex:none}
.alim-ek .renk-sira{gap:4px}
.alim-ek .renk-nokta{width:36px;height:36px}
.alim-ek .renk-nokta i{width:24px;height:24px}
.fiyat-satir{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:14px;row-gap:12px;width:100%;text-align:left;margin-top:2px}
.fiyat-kutu{display:contents}
.fiyat-satir .fiyat{grid-column:1;grid-row:1}
.fiyat-satir .ekle{grid-column:2;grid-row:1}
.fiyat-satir .fiyat-alt{grid-column:1 / -1;grid-row:2;margin:0}
.fiyat{font-size:26px;font-weight:650;letter-spacing:-.015em;font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap;transition:opacity 180ms var(--egri)}
.fiyat.degisiyor{opacity:.2}
.fiyat-alt{font-size:12.5px;color:var(--ikincil);margin-top:5px;line-height:1.3}
.ekle{flex:none;gap:9px;padding-inline:22px}
.ekle .ikon{transition:transform 260ms var(--yay)}
@media(hover:hover){.ekle:hover .ikon{transform:translateY(-2px) rotate(-6deg)}}
.ilk-guven{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 8px;font-size:13px;color:var(--ikincil)}
.ilk-guven i{font-style:normal;opacity:.5}
.ilk .hata{text-align:center}
.ilk-asagi{display:none}
/* açılış sırası (Vakia: --i × 90 ms + 60 ms) */
.js [data-acilis]{animation:acilis 900ms var(--cikis) backwards;animation-delay:calc(var(--i,0) * 90ms + 60ms)}
@keyframes acilis{from{opacity:0;transform:translateY(14px)}}
/* başlık bloğu LCP adayı: opaklık 0'dan başlarsa tarayıcı geç boyanmış sayar (LCP +2,3 s ölçüldü); yalnız kayar */
.js .ilk-metin [data-acilis],.js .sahne[data-acilis]{animation-name:acilis-kay}
@keyframes acilis-kay{from{transform:translateY(10px)}}
.js .sahne .halka{animation:halka-acilis 1.4s var(--cikis) .2s backwards}
@keyframes halka-acilis{from{opacity:0;transform:rotate(calc(var(--aci,0deg) - 60deg)) scale(.86)}}
@media(min-width:900px){
  .ilk-ic{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"metin sahne" "alim sahne" "alim ray";align-content:center;justify-items:start;text-align:left;
    column-gap:clamp(32px,5vw,80px);min-height:calc(100svh - var(--ust-h) - 34px);padding:32px 0 56px}
  .ilk-metin{justify-items:start;align-self:end;gap:14px}
  .ilk-baslik{line-height:.86}
  .fiyat-satir{grid-template-columns:auto auto;justify-content:start;column-gap:32px;width:auto}
  .ilk-alt{max-width:24ch}
  .sahne{--s:min(40vw,64vh,560px);justify-self:center;align-self:center;margin:0}
  .ilk[data-ilk=ray] .sahne{--s:min(40vw,60vh,540px)}
  .halka-renk{width:52px;height:52px;margin:-26px 0 0 -26px}
  .halka-renk i{width:30px;height:30px}
    .ray{justify-self:center;gap:10px}
  .ray-renk{width:54px;height:70px}
  .ilk-alim{align-self:start;margin-top:22px}
  .ilk-renk,.adet-satir,.adet-aciklama,.ilk-guven{justify-content:flex-start}
  .alim{justify-items:start}
  .fiyat{font-size:34px}
  .ilk-asagi{display:grid;place-items:center;position:absolute;left:50%;bottom:18px;width:44px;height:44px;margin-left:-22px;border-radius:50%;color:var(--ikincil);animation:asagi 2.4s ease-in-out 2s infinite}
  .ilk-asagi:hover{color:var(--lac);background:rgba(15,23,42,.05)}
}
@keyframes asagi{50%{transform:translateY(5px)}}
@media(max-width:359px){.seg{grid-template-columns:repeat(4,42px)}.seg-gosterge{width:42px}.fiyat{font-size:22px}.ekle{padding-inline:16px}}

/* ---------- 2 · yolculuk: kapak → çanta → dışarı (kaydırmaya bağlı; .canli JS ile, yoksa düz dizilim) ---------- */
.yolculuk{background:linear-gradient(180deg,var(--krem),#EFEAE2 55%,var(--krem))}
.yol-yapisik{display:grid;gap:24px;padding:56px var(--kenar)}
.yol-sahne{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:center;max-width:720px;margin-inline:auto;width:100%}
.yol-urun{position:relative;aspect-ratio:1400/2300;max-height:60vh;justify-self:center;height:100%}
.yol-urun img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.yol-govde,.yol-kapak{opacity:0}
.yol-kilitli{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-weight:650;font-size:14px;padding:7px 13px;border-radius:var(--hap);background:var(--lac);color:#fff}
.yol-film{position:relative;aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:var(--kum) no-repeat;box-shadow:0 30px 60px -32px rgba(15,23,42,.5)}
.yol-film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.yol-film-ilk{display:none}
.yol-metinler{display:grid;gap:28px;max-width:640px;margin-inline:auto}
.yol-metin{display:grid;gap:10px}
.yol-metin .ust-etiket{margin:0}
.yol-adimlar{display:grid;gap:6px;counter-reset:a;font-size:15.5px}
.yol-adimlar li{display:flex;gap:10px;align-items:center;counter-increment:a;transition:opacity 300ms var(--egri),color 300ms var(--egri)}
.yol-adimlar li::before{content:counter(a);flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--beyaz);box-shadow:inset 0 0 0 1px var(--cizgi-koyu);font-size:12px;font-weight:700;transition:background-color 300ms var(--egri),color 300ms var(--egri),box-shadow 300ms var(--egri)}
.yol-ilerleme{display:none}
/* canlı: sahne yapışkan, katmanlar --p'den (JS) */
.yolculuk.canli{height:440svh}
.canli .yol-yapisik{position:sticky;top:var(--ust-h);height:calc(100svh - var(--ust-h));grid-template-rows:auto minmax(0,1fr) auto;gap:6px;padding:14px var(--kenar) 0;overflow:hidden}
.canli .yol-metinler{position:relative;display:block;height:9.8em;width:100%;text-align:center;order:-1}
.canli .yol-metin{position:absolute;inset:0;align-content:start;justify-items:center;opacity:0;transform:translateY(14px);transition:opacity 380ms var(--egri),transform 600ms var(--cikis);pointer-events:none}
.canli .yol-metin.aktif{opacity:1;transform:none;pointer-events:auto}
.canli .yol-metin .giris{max-width:30ch;margin-inline:auto}
.canli .yol-adimlar{justify-items:start;font-size:14.5px;gap:3px}
.canli .yol-adimlar li{opacity:.38}
.canli .yol-adimlar li.gecti,.canli .yol-adimlar li.simdi{opacity:1}
.canli .yol-adimlar li.gecti::before{content:"✓";background:var(--lac);color:#fff;box-shadow:none}
.canli .yol-adimlar li.simdi::before{background:var(--lac);color:#fff;box-shadow:none}
.canli .yol-sahne{display:block;position:relative;max-width:none;height:100%}
.canli .yol-urun{position:absolute;left:50%;top:50%;height:min(94%,580px);max-height:none;transform:translate(-50%,-50%) translateY(var(--u-y,0%)) scale(var(--u-s,1));opacity:var(--u-o,1);will-change:transform,opacity}
.canli .yol-govde{opacity:var(--g-o,1)}
.canli .yol-kapak{opacity:var(--g-o,1);transform:translateY(var(--k-y,-8%))}
.canli .yol-on{opacity:var(--on-o,0)}
.canli .yol-kilitli{opacity:var(--kl-o,0);transform:translateX(-50%) translateY(calc((1 - var(--kl-o,0)) * 8px))}
.canli .yol-film{position:absolute;left:50%;top:50%;height:min(98%,760px);width:auto;transform:translate(-50%,-50%) scale(var(--f-s,1.06));opacity:var(--f-o,0);will-change:transform,opacity}
.canli .yol-film-ilk{display:block}
.canli .yol-film-son{display:none}
.canli .yol-film.hazir img{display:none}
.canli .yol-ilerleme{display:flex;justify-content:center;gap:6px;padding:10px 0 16px}
.yol-ilerleme i{position:relative;width:30px;height:3px;border-radius:2px;background:var(--cizgi);overflow:hidden}
.yol-ilerleme i::after{content:"";position:absolute;inset:0;background:var(--lac);transform:scaleX(var(--d,0));transform-origin:left}
/* Telefon (01.11): başlık + adımlar ile termos arasında nefes; ilerleme çizgisi ve alt kısım yapışkan çubuğun (≈84 px) altında kalmaz. */
@media(max-width:989px){
  .canli .yol-yapisik{padding:clamp(16px,3.4svh,32px) var(--kenar) calc(env(safe-area-inset-bottom) + 92px);gap:clamp(10px,2.2svh,22px)}
  .canli .yol-metinler{height:clamp(9.6em,22svh,11.5em)}
  .canli .yol-metin{gap:clamp(8px,1.4svh,14px)}
  .canli .yol-adimlar{gap:clamp(4px,.9svh,8px);font-size:15px}
  .canli .yol-ilerleme{padding:4px 0 0}
}
@media(max-width:989px) and (max-height:700px){.canli .yol-metin .giris{display:none}.canli .yol-metinler{height:9em}}
@media(min-width:900px){
  .yol-yapisik{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
  .canli .yol-yapisik{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:minmax(0,1fr) auto;padding-top:0}
  .canli .yol-metinler{order:0;height:16em;text-align:left;align-self:center}
  .canli .yol-metin{justify-items:start}
  .canli .yol-metin .giris{margin-inline:0}
  .canli .yol-sahne{grid-row:1}
  .canli .yol-ilerleme{grid-column:1 / -1}
  /* Masaüstü nefes (01.11 Göktuğ: "çok sıkışık"): başlık bir kademe küçük, başlık–adımlar arası açık, adımlar ayraçlı satırlar */
  .canli .yol-metinler{height:22em}
  .canli .yol-metin{gap:18px}
  .yolculuk .yol-metin .baslik-b{font-size:clamp(2.6rem,1.2rem + 2.6vw,4rem);line-height:1.02;margin-bottom:10px}
  .canli .yol-adimlar{gap:0;font-size:17px;width:min(100%,26rem);justify-items:stretch}
  .canli .yol-yapisik{padding-bottom:112px}
  .canli .yol-adimlar li{gap:14px;padding:12px 0;border-bottom:1px solid var(--cizgi)}
  .canli .yol-adimlar li:last-child{border-bottom:0}
  .canli .yol-adimlar li::before{width:30px;height:30px;font-size:13px}
  .canli .yol-metin .giris{max-width:34ch;font-size:1.0625rem;line-height:1.6}
}

/* ---------- 3 · ölçü ---------- */
.olcu-ic{display:grid;gap:22px}
.olcu-gorseller{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.olcu-termos{display:grid;place-items:center;padding:18px 10px 30px;border-radius:22px;background:var(--beyaz);box-shadow:inset 0 0 0 1px var(--cizgi)}
.olcu-cizim{position:relative;height:clamp(210px,56vw,400px);aspect-ratio:960/1166}
.olcu-cizim img{height:100%;width:100%;object-fit:contain}
.olcu-boy{position:absolute;left:21%;top:3.8%;bottom:3.8%;width:1px;background:var(--lac);transform:scaleY(0);transform-origin:top;transition:transform 1.1s var(--cikis) .25s}
.olcu-cap{position:absolute;left:30.8%;right:30.9%;bottom:-3%;height:1px;background:var(--lac);transform:scaleX(0);transition:transform .9s var(--cikis) .9s}
.olcu-boy::before,.olcu-boy::after{content:"";position:absolute;left:-5px;width:11px;height:1px;background:var(--lac)}
.olcu-boy::before{top:0}.olcu-boy::after{bottom:0}
.olcu-cap::before,.olcu-cap::after{content:"";position:absolute;top:-5px;width:1px;height:11px;background:var(--lac)}
.olcu-cap::before{left:0}.olcu-cap::after{right:0}
.olcu-boy b,.olcu-cap b{position:absolute;font-size:12px;font-weight:650;white-space:nowrap;background:var(--beyaz);padding:2px 5px;border-radius:6px;opacity:0;transition:opacity .4s var(--egri) 1.2s}
.olcu-boy b{left:50%;top:50%;transform:translate(-50%,-50%) rotate(-90deg)}
.olcu-cap b{left:50%;top:6px;transform:translateX(-50%)}
.olcu-termos.gir .olcu-boy{transform:scaleY(1)}
.olcu-termos.gir .olcu-cap{transform:scaleX(1)}
.olcu-termos.gir b{opacity:1}
.olcu-elde{position:relative;border-radius:22px;overflow:hidden;background:var(--kum)}
.olcu-elde img{width:100%;height:100%;object-fit:cover}
.olcu-elde figcaption{position:absolute;left:10px;bottom:10px;font-size:12px;font-weight:600;padding:5px 10px;border-radius:var(--hap);background:color-mix(in srgb,var(--beyaz) 85%,transparent);backdrop-filter:blur(6px)}
.olcu-veri{display:grid;gap:14px}
.olcu-izgara{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--cizgi)}
.olcu-izgara div{display:flex;flex-direction:column-reverse;gap:3px;padding:14px 4px 12px 0;border-bottom:1px solid var(--cizgi)}
.olcu-izgara dt{font-size:12.5px;color:var(--ikincil)}
.olcu-izgara dd{font-family:var(--f-baslik);font-size:clamp(21px,5.2vw,32px);line-height:1;letter-spacing:-.015em;font-variant-numeric:tabular-nums;white-space:nowrap}
.olcu-notlar{display:grid;gap:10px}
.olcu-notlar li{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:16px;background:var(--beyaz);box-shadow:inset 0 0 0 1px var(--cizgi);transition:transform .35s var(--cikis),box-shadow .35s var(--cikis)}
.olcu-notlar .ikon{flex:none;margin-top:2px}
.olcu-notlar span{display:grid;gap:2px;font-size:14px;color:var(--ikincil);line-height:1.45}
.olcu-notlar b{color:var(--lac);font-size:15px;font-weight:650}
@media(hover:hover){.olcu-notlar li:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--cizgi-koyu),0 14px 28px -20px rgba(15,23,42,.4)}}
@media(min-width:900px){
  .olcu-ic{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-areas:"bas bas" "gorsel veri";column-gap:56px;row-gap:8px;align-items:start}
  .olcu-ic>.bolum-bas{grid-area:bas}
  .olcu-gorseller{grid-area:gorsel}
  .olcu-veri{grid-area:veri;padding-top:6px}
}

/* ---------- 4 · renk duvarı + yolda ---------- */
.renkler{background:var(--zemin-ton)}
.renk-duvar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.renk-kart{display:grid;gap:6px;align-content:start;padding:8px 8px 12px;border-radius:22px;background:var(--beyaz);box-shadow:inset 0 0 0 1.5px transparent,0 1px 0 var(--cizgi);
  transition:transform .4s var(--cikis),box-shadow .3s var(--egri)}
.renk-kart.secili{box-shadow:inset 0 0 0 1.5px var(--lac),0 1px 0 var(--cizgi)}
@media(hover:hover){.renk-kart:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1.5px var(--cizgi-koyu),0 20px 40px -26px rgba(15,23,42,.45)}.renk-kart.secili:hover{box-shadow:inset 0 0 0 1.5px var(--lac),0 20px 40px -26px rgba(15,23,42,.45)}}
.renk-kart-gorsel{position:relative;aspect-ratio:1400/1700;border-radius:16px;overflow:hidden;background:radial-gradient(circle at 50% 38%,color-mix(in oklab,var(--renk) 30%,#fff),color-mix(in oklab,var(--renk) 16%,var(--krem)))}
.renk-kart-gorsel img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:5%;transition:opacity .45s var(--cikis),transform .7s var(--cikis)}
.renk-kart-gorsel .arka{opacity:0;transform:scale(.95) rotate(-2deg)}
.renk-kart.arkada .on{opacity:0;transform:scale(.95) rotate(2deg)}
.renk-kart.arkada .arka{opacity:1;transform:none}
.renk-kart-cevir{position:absolute;right:6px;bottom:6px;display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:0 11px;border-radius:var(--hap);font-size:12px;font-weight:650;
  background:color-mix(in srgb,var(--beyaz) 86%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background-color .2s var(--egri),transform .2s var(--egri)}
.renk-kart-cevir:hover{background:var(--beyaz)}
.renk-kart-cevir:active{transform:scale(.94)}
.renk-kart-cevir .ikon{transition:transform .5s var(--cikis)}
.renk-kart.arkada .renk-kart-cevir .ikon{transform:rotate(180deg)}
.renk-kart-ad{display:flex;justify-content:space-between;align-items:baseline;gap:6px;padding:4px 4px 0;text-decoration:none;color:inherit;border-radius:8px}
.renk-kart-ad:focus-visible{outline:none;box-shadow:var(--odak)}
@media(hover:hover){.renk-kart-ad:hover b{text-decoration:underline;text-underline-offset:3px}}
.renk-kart-ad b{font-weight:650;font-size:15px}
.renk-kart-ad em{font-family:var(--f-baslik);font-style:italic;font-weight:300;font-size:17px;color:var(--ikincil)}
.renk-kart-cumle{font-size:13px;color:var(--ikincil);padding:0 4px;line-height:1.4;min-height:2.8em}
.renk-kart-eylem{display:grid;gap:8px;margin:4px 4px 0}
.renk-kart-sec{min-height:42px;font-size:14.5px}
.renk-kart-detay{min-height:42px;font-size:14.5px;gap:4px}
.renk-kart-gorsel-bag{position:absolute;inset:0;z-index:1;border-radius:inherit}
.renk-kart-gorsel .renk-kart-cevir{z-index:2}
.renk-kart.secili .renk-kart-sec{background:var(--lac);color:#fff}
.yolda{margin-top:clamp(72px,11vw,132px)}
.reel-ray{display:grid;grid-auto-flow:column;grid-auto-columns:min(58vw,230px);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--kenar) 14px;margin-inline:calc(-1 * var(--kenar));scrollbar-width:none;overscroll-behavior-x:contain}
.reel-ray::-webkit-scrollbar{display:none}
/* Yatay galeri yalnız yatay kayar (01.11 Göktuğ): dikey taşma kapalı (yoksa tarayıcı dikeyi "auto" sayar, galeri yukarı kayar),
   dikey sürükleme sayfaya geçer, yatay kaydırmanın sonu sayfayı ya da geri hareketini tetiklemez. */
.reel-ray,.n-raf,.galeri-ana{overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch}
.reel-ray img,.reel-ray video,.n-raf img,.galeri-ana img{-webkit-user-drag:none;user-select:none}
.reel{scroll-snap-align:start;display:grid;gap:8px}
.reel-ac{position:relative;display:block;width:100%;border-radius:20px;overflow:hidden;background:var(--kum)}
.reel video,.reel-foto img{display:block;aspect-ratio:9/16;width:100%;height:auto;object-fit:cover;transition:transform .7s var(--cikis)}
.reel-foto img{border-radius:20px}
.reel-oynat{position:absolute;right:10px;bottom:10px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--beyaz) 88%,transparent);color:var(--lac);transition:transform .25s var(--yay)}
@media(hover:hover){.reel-ac:hover video{transform:scale(1.04)}.reel-ac:hover .reel-oynat{transform:scale(1.12)}}
.reel-ac:active .reel-oynat{transform:scale(.9)}
.reel figcaption{display:grid;line-height:1.3}
.reel figcaption b{font-weight:650}
.reel figcaption span{font-size:13px;color:var(--ikincil)}
@media(min-width:900px){.renk-duvar{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.renk-kart{padding:10px 10px 16px}}
@media(min-width:1100px){.reel-ray{grid-auto-flow:row;grid-template-columns:repeat(6,1fr);overflow:visible;margin-inline:0;padding-inline:0;gap:14px}}

/* ---------- 5 · birlikte + kutu ---------- */
.birlikte{background:var(--beyaz)}
.ikili-bas{display:grid;gap:22px;margin-bottom:clamp(24px,4vw,40px)}
.ikili-bas .bolum-bas{margin-bottom:0}
.ikili-sahne img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:22px}
.ikili-izgara{display:grid;gap:14px}
.ikili{display:grid;gap:12px;padding:12px 12px 16px;border-radius:22px;background:var(--krem);box-shadow:inset 0 0 0 1px var(--cizgi);transition:transform .4s var(--cikis),box-shadow .3s var(--egri)}
.ikili-gorsel{display:flex;justify-content:center;align-items:flex-end;height:200px;border-radius:16px;padding:14px;background:linear-gradient(100deg,color-mix(in oklab,var(--r1) 26%,#fff),color-mix(in oklab,var(--r2) 26%,#fff))}
.ikili-gorsel img{height:100%;width:auto;transition:transform .6s var(--cikis)}
.ikili-gorsel img+img{margin-left:-34%}
@media(hover:hover){.ikili:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--cizgi-koyu),0 20px 40px -28px rgba(15,23,42,.45)}.ikili:hover .ikili-gorsel img:first-child{transform:translateX(-6px) rotate(-3deg)}.ikili:hover .ikili-gorsel img+img{transform:translateX(6px) rotate(3deg)}}
.ikili-ad{display:grid;gap:2px;padding:0 4px}
.ikili-ad b{font-family:var(--f-baslik);font-weight:400;font-size:22px;letter-spacing:-.01em}
.ikili-ad span{font-size:13.5px;color:var(--ikincil)}
.ikili-alt{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 4px}
.ikili-fiyat{font-weight:650;font-variant-numeric:tabular-nums}
.kutu-satir{display:grid;gap:22px;align-items:center;margin-top:clamp(56px,8vw,96px)}
.kutu-gorsel img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:22px}
.kutu-satir .ince .ikon{display:inline;vertical-align:-3px;margin-right:4px}
@media(min-width:760px){.ikili-izgara{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.ikili-bas{grid-template-columns:1fr 440px;align-items:center;gap:56px}.ikili-sahne img{aspect-ratio:4/5}.kutu-satir{grid-template-columns:440px 1fr;gap:56px}}

/* ---------- 6 · muhatap ---------- */
.muhatap{background:var(--krem)}
.guven-izgara{display:grid;gap:12px}
.guven-kart{display:grid;gap:8px;align-content:start;padding:22px;border-radius:20px;background:var(--beyaz);box-shadow:inset 0 0 0 1px var(--cizgi);transition:transform .4s var(--cikis),box-shadow .3s var(--egri)}
.guven-kart .ikon{color:var(--lac)}
.guven-kart b{font-weight:650;font-size:16px}
.guven-kart span{font-size:14.5px;color:var(--ikincil);line-height:1.5}
.guven-kart a{color:var(--lac);text-underline-offset:3px}
@media(hover:hover){.guven-kart:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--cizgi-koyu),0 16px 32px -24px rgba(15,23,42,.4)}}
.muhatap .guven-logolar{justify-content:center}
@media(min-width:760px){.guven-izgara{grid-template-columns:repeat(3,1fr)}}

/* ---------- 7 · SSS ---------- */
.sss{background:var(--beyaz)}
.sss-ic{display:grid;gap:8px}
.sss-liste{display:grid;border-top:1px solid var(--cizgi)}
.sss-liste details{border-bottom:1px solid var(--cizgi)}
.sss-liste summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:16px 0;cursor:pointer;font-weight:600;font-size:16px;list-style:none;transition:color .2s var(--egri)}
.sss-liste summary::-webkit-details-marker{display:none}
.sss-liste summary:hover{color:var(--ikincil)}
.sss-liste summary:focus-visible{box-shadow:none;outline:2px solid var(--lac);outline-offset:4px;border-radius:6px}
.sss-isaret{position:relative;flex:none;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--cizgi-koyu);transition:background-color .25s var(--egri),box-shadow .25s var(--egri)}
.sss-isaret::before,.sss-isaret::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;margin:-.75px 0 0 -5.5px;background:var(--lac);border-radius:1px;transition:transform .35s var(--cikis),background-color .25s}
.sss-isaret::after{transform:rotate(90deg)}
.sss-liste details[open] .sss-isaret{background:var(--lac);box-shadow:none}
.sss-liste details[open] .sss-isaret::before,.sss-liste details[open] .sss-isaret::after{background:#fff;transform:rotate(180deg)}
.sss-liste details::details-content{block-size:0;overflow:hidden;transition:block-size .4s var(--cikis),content-visibility .4s allow-discrete}
.sss-liste details[open]::details-content{block-size:auto}
.sss-cevap{padding:0 44px 20px 0;color:var(--ikincil);max-width:62ch;line-height:1.6}
.sss-cevap a{color:var(--lac)}
@media(min-width:900px){.sss-ic{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}.sss-ic .bolum-bas{position:sticky;top:calc(var(--ust-h) + 32px)}}

/* ---------- 8 · kapanış ---------- */
.kapanis{background:var(--lac);color:#fff;padding:0 0 clamp(48px,7vw,80px)}
.kapanis-ic{display:grid;gap:14px;justify-items:center;text-align:center;max-width:60ch}
.kapanis .logo-isaret{filter:brightness(0) invert(1)}
.kapanis .baslik-b{color:#fff;font-style:italic;font-weight:500}
.kapanis p{color:#C7CDD8;font-size:17px;max-width:42ch}
.kapanis-dugmeler{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}

/* ---------- yapışkan çubuk + alt sayfa ---------- */
.yapisik{position:fixed;z-index:40;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px;padding:8px;border-radius:22px;
  background:color-mix(in srgb,var(--beyaz) 90%,transparent);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 30px 60px -30px rgba(20,20,20,.45),0 2px 8px rgba(20,20,20,.06);border:1px solid rgba(20,20,20,.06);transform:translateY(140%);transition:transform .6s var(--cikis)}
.yapisik.goster{transform:none}
.yapisik-ic{display:flex;align-items:center;gap:10px;width:100%;max-width:var(--kap);margin-inline:auto}
.yapisik-renk{position:relative;display:grid;place-items:center;width:56px;height:56px;flex:none;border-radius:16px;background:color-mix(in oklab,var(--ton) var(--ton-oran),var(--beyaz));transition:background-color .6s var(--cikis),transform .2s var(--egri)}
.yapisik-renk img{width:48px;height:48px;object-fit:contain;transition:opacity .3s}
.yapisik-renk svg{position:absolute;right:-2px;bottom:-2px;width:18px;height:18px;padding:3px;border-radius:50%;background:var(--lac);color:#fff}
.yapisik-renk:active{transform:scale(.95)}
.yapisik-bilgi{display:grid;line-height:1.25;min-width:0;flex:1}
.yapisik-bilgi b{font:500 17px var(--f-baslik);font-variant-numeric:tabular-nums;white-space:nowrap}
.yapisik-bilgi span{font-size:12.5px;color:var(--ikincil);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yapisik .ekle{min-height:46px;padding-inline:18px}
@media(min-width:768px){.yapisik{left:50%;right:auto;width:min(560px,calc(100vw - 20px));transform:translate(-50%,140%)}.yapisik.goster{transform:translate(-50%,0)}}
body.yapisik-var .wa-balon{bottom:calc(84px + env(safe-area-inset-bottom))}
body.yapisik-var .alt{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
@media(max-width:380px){.yapisik .ekle .ikon{display:none}.yapisik .ekle{padding-inline:14px}}
@media(max-width:359px){.yapisik{gap:8px;padding:6px}.yapisik-ic{gap:8px}.yapisik-renk{width:48px;height:48px;border-radius:14px}.yapisik-renk img{width:40px;height:40px}.yapisik-bilgi b{font-size:15px}.yapisik-bilgi span{font-size:11.5px}.yapisik .ekle{min-height:44px;padding-inline:12px;font-size:15px}}
.alt-sayfa{position:fixed;inset:auto 0 0;margin:0 auto;width:100%;max-width:560px;max-height:88dvh;overflow:auto;overscroll-behavior:contain;border-radius:24px 24px 0 0;padding:8px 18px calc(18px + env(safe-area-inset-bottom));
  display:grid;gap:14px;transform:translateY(100%);transition:transform 500ms var(--cekmece),display 500ms allow-discrete,overlay 500ms allow-discrete}
.alt-sayfa:not([open]){display:none}
.alt-sayfa[open]{transform:none}
@starting-style{.alt-sayfa[open]{transform:translateY(100%)}}
.alt-sayfa::backdrop{background:rgba(15,23,42,0);transition:background-color 400ms,overlay 400ms allow-discrete,display 400ms allow-discrete}
.alt-sayfa[open]::backdrop{background:rgba(15,23,42,.45)}
@starting-style{.alt-sayfa[open]::backdrop{background:rgba(15,23,42,0)}}
.alt-sayfa-tutamak{width:40px;height:4px;border-radius:2px;background:var(--cizgi-koyu);margin:4px auto 0}
.alt-sayfa-bas{display:flex;justify-content:space-between;align-items:center}
.alt-sayfa-renkler{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.alt-renk{display:grid;justify-items:center;gap:2px;padding:8px 4px 10px;border-radius:16px;background:color-mix(in oklab,var(--renk) 16%,var(--beyaz));box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .2s var(--egri),transform .2s var(--egri)}
.alt-renk img{height:64px;width:auto}
.alt-renk b{font-size:13px;font-weight:650;line-height:1.2;text-align:center}
.alt-renk span{font-size:12px;color:var(--ikincil)}
.alt-renk:active{transform:scale(.96)}
.alt-renk[aria-checked=true]{box-shadow:inset 0 0 0 1.5px var(--lac)}
.alt-renk.yok{opacity:.45}
.alt-sayfa-adet{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.alt-sayfa-adet button{display:grid;gap:2px;padding:10px;border-radius:14px;box-shadow:inset 0 0 0 1.5px var(--cizgi);transition:box-shadow .2s var(--egri),background-color .2s var(--egri),transform .2s var(--egri)}
.alt-sayfa-adet b{font-size:18px}
.alt-sayfa-adet span{font-size:12.5px;color:var(--ikincil);font-variant-numeric:tabular-nums}
.alt-sayfa-adet button:active{transform:scale(.96)}
.alt-sayfa-adet button[aria-pressed=true]{box-shadow:inset 0 0 0 1.5px var(--lac);background:var(--krem)}

/* ---------- hareket azaltma: sahneler durağan, halka dönmez ---------- */
@media (prefers-reduced-motion: reduce){
  .sahne-termos,.ilk-asagi{animation:none}
  .yolculuk.canli{height:auto}
}
body.yapisik-var .canli .yol-yapisik{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
/* kısa telefon ekranı (SE, eski Android): satın alma düğmesi ilk ekranda kalsın */
@media(max-width:899px) and (max-height:760px){
  .sahne{--s:min(54vw,206px);margin-top:20px}
  .ilk-alim{margin-top:14px}
  .ilk-alt{font-size:15.5px}
  .ilk-ic{padding-top:8px}
  .ilk-renk{min-height:26px}
  .alim{gap:8px;margin-top:2px}
}
.ilk[data-ilk=ray] .sahne{margin-top:6px}
@media(max-width:899px) and (max-height:760px){
  .ilk[data-ilk=ray] .sahne{--s:min(42vw,168px);margin-top:2px}
  .ray-renk{width:40px;height:50px}
}
@media(max-width:899px) and (min-height:761px) and (max-height:860px){.ilk[data-ilk=ray] .sahne{--s:min(60vw,226px)}}