/* Erfa Atelier — "Gökyüzü" (gokyuzu.php) sayfa stilleri. cizim.css üzerine gelir. */

/* ---- Tek-akış sihirbaz düzeni: solda sabit önizleme, sağda tek wizard ---- */
/* Masaüstü: sol sütun (önizleme + yorum) yapışkan; sağ sütun adım adım akar. */
@media(min-width:901px){
  .gk-builder{overflow:visible !important} /* overflow:hidden sticky'yi kırar */
  .gk-builder .gk-stage-col{position:sticky;top:84px;align-self:start}
}
/* Mobil: tek sütun — önce önizleme, altında sihirbaz; önizleme yapışkan kalır. */
@media(max-width:900px){
  .gk-builder{grid-template-columns:1fr !important;overflow:visible !important}
  .gk-builder .cz-stagebox{position:sticky;top:70px;z-index:6;width:min(100%,42dvh);margin:0 auto;box-shadow:0 18px 44px rgba(0,0,0,.6),inset 0 1px 1px rgba(255,255,255,.08)}
  .gk-builder [data-cz-stage-wrap]{scroll-margin-top:78px}
}
/* Sipariş adımındaki sonuç bloğu her zaman görünür (adım içi CTA). */
.gk-wiz-col [data-cz-result]{display:block}

/* ---- Tam ekran (hr-fs) içine taşınan sütunlar ---- */
/* Sol sahne yuvası: önizleme + aşama pill'leri + gökyüzü yorumu dikey akar, taşarsa kayar. */
.hr-fs-stage .gk-stage-col{width:min(96vh,100%);max-width:900px;max-height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;padding-right:4px;position:static}
/* Kutu sütunun tamamını alır AMA satır yüksekliğini asla aşmaz.
   Burası eskiden yalnız width:100% diyordu ve bu kural (3 sınıf) atelier.css'teki
   ortak kuraldan (2 sınıf) daha özgül olduğu için yükseklik sınırını eziyordu:
   aspect-ratio:1 ile kutu sütun genişliği kadar kare oluyor, mobilde 44dvh'lik
   sahne satırından TAŞIP KESİLİYORDU — sembol kolyede glifin alt yarısı
   görünmüyordu. min() ile hem genişlik hem yükseklik sınırlanır. */
/* Sütun sahneyi tam kaplar ve kutuyu ORTALAR; kutu YÜKSEKLİK güdümlüdür.
   Genişlik güdümlü boyut (width + aspect-ratio) satır yüksekliğini garanti
   etmiyordu: kare kutu sütun genişliği kadar olunca satırdan taşıyordu. */
/* Izgara + place-items: ortalamayı kesin yapar. Flex ile kutu 33px aşağı
   kayıyordu; height:auto denemesi ise yüzde yüksekliği çökertip kutuyu 2px'e
   indirdi (yüzde yükseklik, auto yükseklikli ebeveynde çözülmez). */
/* MUTLAK KONUM DEĞİL. `position:absolute;inset:10px` sahnenin PADDING kutusuna
   göre çözülüyor, yani `.hr-fs-stage`in mobilde panel için ayırdığı alt dolguyu
   (max(336px,38dvh)) TAMAMEN yok sayıyordu: 390x844'te kutu 506x506 çıkıyor,
   197px'i wizard panelinin arkasında kalıyor ve sağ kenardan 65px taşıyordu
   (ölçüldü). Akıştaki bir öğe olarak yüzde yükseklik sahnenin İÇERİK kutusuna
   göre çözülür — ayrılan alan böylece kendiliğinden korunur. */
.hr-fs-stage .gk-stage-col{position:relative;inset:auto;width:100%;height:100%;
  display:grid;place-items:center}
/* Kutu diğer araçlarla AYNI kuralı izler: ayrılan alanı doldurur, taşmaz.
   60dvh sabiti kaldırıldı — o değer sahnenin gerçek yüksekliğinden bağımsızdı. */
/* aspect-ratio:auto — kabuk içinde kutu ayrılan alanın TAMAMI olur (390x508
   ölçüldü, /cizim ve /konum ile birebir aynı). Kare zorlaması burada işe
   yaramıyordu: kesin yükseklik (100%) oranı sürüklüyor, `max-width:100%` ise
   ızgara öğesinde bunu ezemiyordu → kutu 508x508 çıkıp sağdan 118px taşıyordu.
   Kare kaybı sorun değil: WebGL kamerası artık kutu oranını okuyor (pendant3d
   içindeki yatay sınır kamera oranından türetiliyor), yani ürün deforme olmuyor
   ve kadraja göre ölçekleniyor. */
.hr-fs-stage .gk-stage-col .cz-stagebox{height:100%;width:100%;max-width:100%;max-height:100%;
  aspect-ratio:auto;flex:0 0 auto;margin:0 auto;
  /* Kabuk içinde YAPIŞKAN OLMAZ. Pazarlama sayfası için konan
     position:sticky;top:70px kuralı burada da geçerliydi ve kutuyu sütunun
     içinde 61px aşağı itiyordu; sütun overflow:hidden olduğu için kolyenin
     ALT KISMI KIRPILIYORDU (ekran görüntüsündeki yarım görünen glif). */
  position:static;top:auto}
/* FİNALE ("Her Şey Tamam"): KUTU YENİDEN GENİŞLİK ALMALI.
   atelier.css:397 `body.ea-finale-open .hr-fs-stage .cz-stagebox{width:auto}`
   diyor — orada bu doğru, çünkü aynı dosya `aspect-ratio:1` de veriyor:
   kare kutu yüksekliğinden genişliğini türetir. Gökyüzü ise (yukarıdaki
   gerekçeyle) `aspect-ratio:auto` kullanıyor. İkisi birleşince kutunun
   genişliğini belirleyecek HİÇBİR ŞEY kalmıyordu: içindeki tuvallerin
   tamamı mutlak konumlu, yani içsel genişlik 0.
   Ölçüldü (390x844, .qa/ss/gokyuzu-fix/once-mob/_gunluk.json):
   sahne 386x508 iken finalede 2x844'e çöküyor, WebGL tuvali 0x842 —
   müşteri inceleme ekranında kolyenin YERİNE 2 px'lik bir çizgi görüyordu
   (.qa/ss/gokyuzu-fix/once-mob/A4-finale-inceleme.png).
   Seçicinin 4 sınıfı var (atelier'in 3'üne karşı); atelier.css bu dosyadan
   SONRA yüklendiği için eşit özgüllük yetmezdi.
   `aspect-ratio:1` ile kare denendi ve elendi: 844x844 kutu 390 px'lik
   sütunda x=0'da kalıyor, kolye ekranın 454 px sağına kaçıyor
   (.qa/ss/gokyuzu-fix/deneme-27/V-B-kare.png). */
body.ea-finale-open .hr-fs-stage .gk-stage-col .cz-stagebox{
  width:100%;height:100%;max-width:100%;max-height:100%;aspect-ratio:auto}
/* MASAÜSTÜNDE SÜTUN IZGARA DEĞİL, DİKEY AKIŞ OLMALI.
   Yukarıdaki `display:grid;place-items:center` + kutuda `height:100%`
   ikilisi yalnız sütunun TEK çocuğu varken doğru — mobilde öyle, çünkü
   aşağıdaki (max-width:900px) kuralı kardeşleri display:none yapıyor.
   901 px üstünde kardeşler görünür: aşama pill'leri, spec satırı, durum
   satırı ve gökyüzü yorumu. Izgara bunların her birine bir örtük SATIR
   açıyor, kutunun `height:100%`i de artık sütunun değil KENDİ SATIRININ
   yüzdesi oluyor.
   Ölçüldü (1280x900, .qa/ss/gokyuzu-fix/masa/_gunluk.json): sütun 900x900
   sabit kalırken kutu adım 1'de 896x273, yorum bloğu açılınca adım 2'den
   itibaren 896x82 — ürün 82 px'lik bir şeride eziliyordu
   (.qa/ss/gokyuzu-fix/masa/D2-adim2.png).
   Akışta kutu artık yüzde yükseklik değil KENDİ oranını kullanır; 62dvh
   sınırı yorumun da aynı ekranda okunabilmesi için (sütun zaten
   overflow-y:auto). */
@media(min-width:901px){
  /* Sütunun kendi yüksekliği de SABİTLENMELİ. `height:100%` burada yüzde
     olarak çözülemiyor: üst kutu (.hr-fs-stage) tek örtük satırlık bir
     ızgara öğesi, yani yüksekliği belirsiz — ölçtüm, hesaplanan değer
     1056.12px, yani içeriğin kendisi. Sütun büyüyünce sahne de büyüyor ve
     yorum bloğu ekranın 156 px altına taşıyor, üstelik sütunun
     overflow-y:auto'su hiç devreye girmiyordu. Kabuk `position:fixed;
     inset:0` olduğu için görünüm yüksekliği (dvh) burada kesin ölçüdür. */
  .hr-fs-stage .gk-stage-col{height:100dvh;max-height:100dvh}
  .hr-fs-stage .gk-stage-col .cz-stagebox{
    width:min(100%,62dvh);height:auto;aspect-ratio:1}
}
/* FİNALEDE SAHNEDE YALNIZ ÜRÜN KALIR (mobilde zaten böyle).
   İnceleme modunda pill/spec/yorum ürünün yerini yiyordu; üstelik sütun
   tek çocuklu olunca yukarıdaki finale kuralının `height:100%`i yeniden
   sütunun tamamına çözülür. */
body.ea-finale-open .hr-fs-stage .gk-stage-col{display:grid;place-items:center}
body.ea-finale-open .hr-fs-stage .gk-stage-col > *:not(.cz-stagebox){display:none!important}
.hr-fs-stage .gk-stage-col [data-gk-results]{text-align:left}
/* Sağ panel yuvası: tek-akış wizard tüm genişliği alır. */
.hr-fs-slot .gk-wiz-col{margin:0!important;display:block!important;width:100%}
@media(max-width:900px){
  /* Mobil tam ekran: sahne yuvasında yalnız önizleme (pill/spec/status/yorum panelde değil). */
  /* dvh: iOS'ta adres çubuğu görünürken vh, dvh'den ~%12 büyük ve taşma yaratıyordu. */
  .hr-fs-stage .gk-stage-col{width:min(64dvh,100%);overflow:visible}
  /* !important: bu kardeşlerden biri daha özgül bir kuralla görünür kalıyor ve
     kutuyu aşağı itip kırpılmasına yol açıyordu. Mobil kabukta sahnede yalnız
     önizleme olur. */
  .hr-fs-stage .gk-stage-col > *:not(.cz-stagebox){display:none!important}
}

/* hero gecesi */
.gk-hero{position:relative;min-height:100dvh;overflow:hidden;display:flex;align-items:center;padding:clamp(110px,14vh,150px) clamp(16px,4vw,80px) clamp(60px,9vh,90px);background:radial-gradient(120% 100% at 70% 0%,#232633 0%,#1a1c26 34%,#17130e 72%,#120e09 100%)}
.gk-sky{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.gk-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(55% 40% at 68% 40%,rgba(200,210,240,.08),transparent 70%);pointer-events:none}

/* form */
.gk-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.gk-form-grid{grid-template-columns:1fr}}
.gk-select{width:100%;padding:14px 18px;border-radius:16px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:#fff;font-family:'Barlow',sans-serif;font-size:14px;appearance:none;-webkit-appearance:none}
.gk-select option{background:#241f19;color:#fff}
input[type="date"].cz-input,input[type="time"].cz-input{color-scheme:dark}

/* yükleme perdesi */
[data-gk-loading]{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:radial-gradient(120% 100% at 50% 0%,#232633 0%,#17130e 70%,#120e09 100%);color:rgba(255,255,255,.9);font-size:15px;font-weight:300}
[data-gk-loading] .gk-orbit{position:relative;width:88px;height:88px}
[data-gk-loading] .gk-orbit::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.2)}
[data-gk-loading] .gk-orbit::after{content:"";position:absolute;top:-4px;left:50%;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 14px rgba(255,255,255,.9);transform-origin:4.5px 48px;animation:gkOrbit 1.6s linear infinite}
[data-gk-loading] .gk-orbit i{position:absolute;inset:22px;border-radius:50%;border:1px dashed rgba(255,255,255,.18)}
@keyframes gkOrbit{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){[data-gk-loading] .gk-orbit::after{animation:none}}

/* sonuç kartları */
.gk-big3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:14px}
.gk-big3-card{border-radius:20px;padding:22px;background:rgba(255,255,255,.05);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 1px rgba(255,255,255,.1)}
.gk-big3-glyph{font-size:34px;line-height:1;margin-bottom:10px;color:rgba(255,255,255,.9)}
.gk-big3-title{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:24px;margin-bottom:8px}
.gk-big3-card p{font-size:13.5px;font-weight:300;color:rgba(255,255,255,.72);line-height:1.6}

.gk-chips{display:flex;flex-wrap:wrap;gap:8px}
.gk-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:9999px;background:rgba(255,255,255,.06);box-shadow:inset 0 1px 1px rgba(255,255,255,.1);font-size:12.5px;font-weight:300;color:rgba(255,255,255,.75);cursor:help}
.gk-chip b{font-weight:500;color:#fff}

.gk-bar{display:flex;align-items:center;gap:10px;font-size:12px;color:rgba(255,255,255,.65);margin-bottom:8px}
.gk-bar span{width:52px;flex-shrink:0}
/* Bar gradyani #8f96a3 -> #e8eaee idi: hue 218 derece, soguk mavi-gri.
   Sayfanin tamami sicak (#17130e / #241f19 / krem #f6f1e7) ve tasarim
   sisteminin TEK aksani sampanya (--ea-accent #d9c08f, hue 39). Aradaki
   fark 179 derece, yani tam zit. Sampanyaya cekildi. */
.gk-bar i{display:block;height:6px;border-radius:9999px;background:linear-gradient(90deg,rgba(217,192,143,.55),var(--ea-accent-strong,#ecdcb4));min-width:6px;transition:width .8s cubic-bezier(.16,1,.3,1)}
.gk-bar b{font-weight:500;color:#fff}

/* ürün kartları */
.gk-products{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:14px}
.gk-product-card{display:flex;flex-direction:column;gap:0;text-align:left;border:none;cursor:pointer;border-radius:20px;overflow:hidden;background:rgba(255,255,255,.05);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 1px rgba(255,255,255,.1);padding:0;color:#fff;font-family:'Barlow',sans-serif;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.gk-product-card:hover,.gk-product-card:focus-visible{transform:translateY(-4px);outline:none}
.gk-product-card:focus-visible{box-shadow:0 0 0 2px rgba(255,255,255,.6)}
.gk-product-card.is-selected{box-shadow:inset 0 0 0 2px rgba(255,255,255,.85)}
.gk-product-card canvas{width:100%;height:auto;display:block}
.gk-product-card > div{padding:16px 18px 18px}
.gk-product-name{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:22px;margin-bottom:8px}
.gk-product-card p{font-size:12.5px;font-weight:300;color:rgba(255,255,255,.68);line-height:1.55;margin-bottom:10px}
.gk-product-cta{font-size:12px;font-weight:500;color:#fff}

/* hediye çipleri */
.gk-gifts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

/* ---- Başlangıç seçimi: iki kart (Burç Kolyesi | Doğum Haritası) ---- */
.gk-choice-lead{font-family:'Barlow',sans-serif;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:14px}
.gk-choice{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}
@media(max-width:480px){.gk-choice{grid-template-columns:1fr}}
.gk-choice-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;padding:18px 16px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(255,255,255,.03);color:#fff;cursor:pointer;transition:transform .25s cubic-bezier(.16,1,.3,1),background .25s,border-color .25s,box-shadow .25s}
.gk-choice-card:hover{transform:translateY(-2px);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28)}
.gk-choice-card:focus-visible{outline:2px solid rgba(255,255,255,.6);outline-offset:2px}
/* SECIM DILI BIRLESTIRILDI. atelier.css:508 "Secili olan sampanya konturla
   isir" diyor ve .hr-fs .cz-pill.is-active bunu uyguluyor. Gokyuzu'nun kendi
   iki secim yuzeyi (.gk-choice-card ve .gk-sign) bunu SAF BEYAZ blokla
   eziyordu: ayni wizard panelinde 1.-2. adim beyaz, 3.-7. adim sampanya
   goruunuyordu. cizim/harita'da boyle bir override yok. */
.gk-choice-card.is-active{
  background:rgba(217,192,143,.10);border-color:var(--ea-accent,#d9c08f);
  color:var(--ea-accent-strong,#ecdcb4);
  box-shadow:0 0 0 1px rgba(217,192,143,.25),0 0 22px rgba(217,192,143,.14);
}
.gk-choice-ic{color:currentColor;opacity:.85}
.gk-choice-t{font-family:'Barlow',sans-serif;font-size:15px;font-weight:600;letter-spacing:.01em}
.gk-choice-d{font-size:12px;font-weight:300;line-height:1.5;color:rgba(255,255,255,.6)}
.gk-choice-card.is-active .gk-choice-d{color:rgba(255,255,255,.68)}
.gk-panel-lead{font-size:13.5px;font-weight:300;color:rgba(255,255,255,.7);line-height:1.6;margin-bottom:16px}

/* ---- Burç seçim ızgarası ---- */
.gk-sign-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
@media(max-width:420px){.gk-sign-grid{grid-template-columns:repeat(3,1fr)}}
.gk-sign{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.03);color:#fff;cursor:pointer;transition:transform .25s cubic-bezier(.16,1,.3,1),background .25s,border-color .25s}
.gk-sign:hover,.gk-sign:focus-visible{transform:translateY(-3px);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.32);outline:none}
.gk-sign.is-active{
  background:rgba(217,192,143,.10);color:var(--ea-accent-strong,#ecdcb4);
  border-color:var(--ea-accent,#d9c08f);
  box-shadow:0 0 0 1px rgba(217,192,143,.25),0 0 22px rgba(217,192,143,.14);
}
.gk-sign-glyph{width:30px;height:30px;display:block}
/* filter:invert(1) beyaz zemin varsayimiyla yazilmisti; zemin artik koyu,
   invert glifi tekrar goruunmez yapardi. Glif zaten acik renk ciziliyor. */
.gk-sign.is-active .gk-sign-glyph{filter:none;opacity:1}
.gk-sign-name{font-size:11px;font-weight:500;letter-spacing:.02em}
.gk-sign-sub{font-size:9.5px;font-weight:400;opacity:.55;letter-spacing:.01em}

/* ---- Önizleme yanı kompakt tasarım seçici ---- */
.gk-prodswitch{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;align-items:center;margin-top:2px}
.gk-prodswitch .cz-optlabel{width:100%;text-align:center;margin-bottom:2px}


/* ===== PLAKANI OKU ========================================================
   Musteri kolyedeki isaretlerin karsiligini burada goruyor. Palet
   atelier.css tokenlarindan gelir (--ea-accent tek aksan); gokyuzu.css
   daha once hic var(--ea-*) kullanmiyordu ve kendi beyaz/mavi-gri
   tonlariyla sistemden ayrisiyordu. */
.gk-legend-baslik{
  font-size:13.5px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ea-accent,#d9c08f);margin:0 0 8px;
}
.gk-legend-giris{font-size:12.5px;font-weight:300;color:rgba(255,255,255,.55);line-height:1.6;margin:0 0 14px}
.gk-legend-liste{display:flex;flex-direction:column;gap:12px;margin:0}
.gk-legend-liste>div{display:grid;grid-template-columns:132px 1fr;gap:12px;align-items:start}
.gk-legend-liste dt{
  font-size:11.5px;font-weight:400;letter-spacing:.06em;
  color:var(--ea-accent-strong,#ecdcb4);margin:0;
}
.gk-legend-liste dd{font-size:12.5px;font-weight:300;color:rgba(255,255,255,.6);line-height:1.6;margin:0}
.gk-legend-alt{
  font-size:11.5px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin:20px 0 10px;
}
.gk-legend-acilar{display:flex;flex-direction:column;gap:8px}
.gk-legend-aci{
  display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:16px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  /* Gergin/uyumlu ayrimi plakada KALINLIKLA yapiliyor; burada da ayni
     hiyerarsi sol kenar cizgisiyle tekrarlaniyor ki metin ile metal
     birbirini dogrulasin. */
  border-left:3px solid rgba(255,255,255,.16);
}
.gk-legend-aci.is-gergin{border-left-color:var(--ea-accent,#d9c08f)}
.gk-legend-aci-baslik{font-size:12.5px;font-weight:400;color:rgba(255,255,255,.82)}
.gk-legend-aci-not{font-size:11.5px;font-weight:300;color:rgba(255,255,255,.5);line-height:1.55}
.gk-legend-bos{font-size:12.5px;font-weight:300;color:rgba(255,255,255,.55);line-height:1.6;margin:0}
.gk-legend-sentez{font-size:12.5px;font-weight:300;color:rgba(255,255,255,.68);line-height:1.7;margin:0}

/* GÖKBİLİM / ASTROLOJİ AYRIMI
   "Bu gerçekten gökyüzünde böyleydi" ile "astrolojide şu anlama gelir"
   aynı paragrafta okununca müşteri hangisinin ölçüm hangisinin yorum
   olduğunu ayıramıyordu. İki ayrı kutu + iki ayrı etiket: ölçüm soğuk
   (beyaz kenar), yorum sıcak (aksan kenar). */
.gk-anlam-ikili{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.gk-anlam-kutu{
  padding:12px 14px;border-radius:16px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  border-top:2px solid rgba(255,255,255,.16);
}
.gk-anlam-kutu.is-yorum{border-top-color:var(--ea-accent,#d9c08f)}
.gk-anlam-kutu p{font-size:12px;font-weight:300;color:rgba(255,255,255,.6);line-height:1.65;margin:0}
.gk-anlam-etiket{
  display:block;font-size:10px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.4);margin-bottom:6px;
}
.gk-anlam-kutu.is-yorum .gk-anlam-etiket{color:var(--ea-accent,#d9c08f)}

/* HANGİ KOPYA GÖRÜNÜR
   Aynı içerik iki yere basılır; görünen tek yer okunabilir olandır.
   · Sayfa akışında (tam ekran kapalı): sahne sütunundaki asıl bölüm.
   · Tam ekran kabukta: sahne sütunu KAYDIRILAMIYOR — masaüstünde bölümün
     alt 359 px'i kırpılıyor, mobilde sütunun önizleme dışındaki kardeşleri
     zaten display:none. Tek gerçek kaydırma alanı panel yuvası
     (.hr-fs-slot{overflow-y:auto}) olduğu için orada panel kopyası açılır. */
.hr-fs-stage [data-gk-legend]{display:none!important}
[data-gk-legend-panel]{display:none}
.hr-fs-slot [data-gk-legend-panel]:not([hidden]){
  display:block;margin-top:22px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.08);
}
/* Panel yuvası masaüstünde de yalnız 362 px: etiket/metin sütunu 132+1fr
   olunca metne 190 px, gökbilim/astroloji ikilisi ise 160 px'lik sütunlara
   düşüyor — satır başına 3-4 sözcük. Görünüm ölçüsü (max-width) burada işe
   yaramaz, dar olan KAPSAYICI; kural doğrudan yuvaya bağlanıyor. */
.hr-fs-slot [data-gk-legend-panel] .gk-legend-liste>div{grid-template-columns:1fr;gap:3px}
.hr-fs-slot [data-gk-legend-panel] .gk-anlam-ikili{grid-template-columns:1fr;gap:8px}
@media (max-width:560px){
  .gk-legend-liste>div{grid-template-columns:1fr;gap:2px}
  /* Mobilde iki sütun 150 px'e düşüyor ve uzun Türkçe sözcükler taşıyordu. */
  .gk-anlam-ikili{grid-template-columns:1fr;gap:8px}
}

/* ══════════════════════════════════════════════════════════════════
   KOLYENİZİ OKUYUN — BİLGİ KARTI
   Anlatı bölümü eskiden kolye hesaplanır hesaplanmaz sahnede KALICI
   duruyordu (üç burç kartı + çipler + barlar + tema + tam anlatı).
   Artık kolye oluşunca bir hap beliriyor; fare üstüne gelince ya da
   tıklayınca kart açılıyor. Kabuk seviyesinde duruyor, çünkü bu
   dosyadaki :118 (mobil) ve :107 (finale) kuralları sahne sütununun
   `.cz-stagebox` dışındaki tüm kardeşlerini display:none yapıyor.
   ══════════════════════════════════════════════════════════════════ */

/* — Tetikleyici hap — sahne alanının sol ÜSTÜNDE yüzer.
     Sol ALT denendi ve elendi: fiyat rozeti (.cz-price) tam orada
     duruyor. Ölçüldü — kesişim masaüstünde 123x44 px, mobilde 162x44,
     yani mobilde rozet TAMAMEN örtülüyordu. Sol üst iki görünümde de
     boş (üstte yalnız zincirin şeffaf tuvali var). */
.gk-oku-ac{position:absolute;z-index:24;
  left:clamp(16px,3vw,44px);top:clamp(18px,3.2vh,40px);
  display:inline-flex;align-items:center;gap:9px;
  /* 44px: WCAG 2.5.8 asgari dokunma hedefi. */
  min-height:44px;padding:0 18px 0 12px;
  border-radius:9999px;cursor:pointer;
  font-family:'Barlow',system-ui,sans-serif;font-size:13px;font-weight:300;
  letter-spacing:.04em;color:rgba(255,255,255,.88);
  background:rgba(255,255,255,.055);
  -webkit-backdrop-filter:blur(26px) saturate(1.4);backdrop-filter:blur(26px) saturate(1.4);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 8px 28px rgba(0,0,0,.34),inset 0 1px 1px rgba(255,255,255,.12);
  transition:background .28s ease,border-color .28s ease,transform .28s cubic-bezier(.22,1,.36,1),opacity .3s ease}
.gk-oku-ac[hidden]{display:none}
.gk-oku-ac:hover,.gk-oku-ac:focus-visible{background:rgba(255,255,255,.1);
  border-color:rgba(236,220,180,.42);transform:translateY(-2px)}
.gk-oku-ac[aria-expanded="true"]{background:rgba(236,220,180,.14);
  border-color:rgba(236,220,180,.5);color:#f6ecd6}
/* Serif italik "i": sitenin başlık dilinden gelen küçük bir imza. */
.gk-oku-ac-i{flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:14px;line-height:1;
  color:#0f0d0b;background:linear-gradient(150deg,#f2e6c8,#d9c08f)}
/* Kolye oluşunca dikkat çeksin ama bağırmasın: tek seferlik yumuşak nefes. */
@keyframes gkOkuBelir{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.gk-oku-ac.is-yeni{animation:gkOkuBelir .55s cubic-bezier(.22,1,.36,1) both}

/* — Kart — */
.gk-oku{position:absolute;inset:0;z-index:30;pointer-events:none}
.gk-oku[hidden]{display:none}
/* Perde yalnız mobilde: kart orada ekranın çoğunu kaplıyor, arkası
   kapanmalı. Masaüstünde kart yandan açılıyor, perde ürünü gizlerdi. */
.gk-oku-perde{position:absolute;inset:0;background:rgba(6,5,4,.5);opacity:0;
  transition:opacity .3s ease;pointer-events:none}
/* Kart haptan AŞAĞI doğru açılır (hap artık üstte). 54 px = hap
   yüksekliği (44) + nefes payı (10). */
.gk-oku-kart{position:absolute;pointer-events:auto;
  left:clamp(16px,3vw,44px);top:calc(clamp(18px,3.2vh,40px) + 54px);
  width:min(430px,42vw);max-height:min(74dvh,660px);
  display:flex;flex-direction:column;border-radius:26px;
  opacity:0;transform:translateY(-10px) scale(.985);
  transition:opacity .34s ease,transform .34s cubic-bezier(.22,1,.36,1)}
.gk-oku.is-acik .gk-oku-kart{opacity:1;transform:none}
.gk-oku.is-acik .gk-oku-perde{opacity:1}

.gk-oku-ust{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:18px 18px 12px 24px}
.gk-oku-kicker{font-family:'Barlow',system-ui,sans-serif;font-size:10.5px;font-weight:400;
  letter-spacing:.19em;text-transform:uppercase;color:rgba(236,220,180,.72)}
.gk-oku-kapat{flex:0 0 auto;width:34px;height:34px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;color:rgba(255,255,255,.62);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  transition:color .22s ease,background .22s ease,border-color .22s ease}
.gk-oku-kapat:hover,.gk-oku-kapat:focus-visible{color:#fff;background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.22)}

/* Kaydırılan tek yer gövde: başlık ve kapat hep erişilebilir kalır. */
.gk-oku-govde{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;padding:2px 24px 24px;
  /* Alt kenarda kesilen metin "bitti" gibi görünüyor; yumuşak sönüm
     kaydırılacak içerik olduğunu söyler. Maske GÖVDEYE değil kendi
     katmanına uygulanamaz (burada kırpma zaten istenen davranış),
     bu yüzden alt 26 px'te durur — metin satır yüksekliği 22 px. */
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent 100%);
  mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent 100%)}

/* Kart içinde başlık tekrarı olmasın: kabuk zaten "Kolyenizi okuyun"
   diyor, anlatının kendi h3'ü "Kolyenizi okuyun · Boğa Takımyıldızı"
   idi — aynı sözcükler üst üste. */
.gk-oku-govde .gk-legend-baslik{font-size:19px;margin-top:2px}

@media(max-width:900px){
  .gk-oku-ac{top:14px;left:14px}
  .gk-oku-perde{pointer-events:auto}
  .gk-oku-kart{left:10px;right:10px;bottom:10px;width:auto;
    max-height:min(84dvh,720px);border-radius:24px}
  .gk-oku-ust{padding:16px 14px 10px 20px}
  .gk-oku-govde{padding:2px 20px 22px}
}
@media (prefers-reduced-motion:reduce){
  .gk-oku-kart,.gk-oku-perde,.gk-oku-ac{transition:none}
  .gk-oku-ac.is-yeni{animation:none}
}

/* — Fark edilirlik: hap belirince altın halka üç kez nabız atar.
     Sessizce beliren bir hap gorulmuyordu; musteri kolyenin anlamini
     okuyabildigini bilmeden siparis veriyordu. Nabiz KALICI DEGIL:
     3 tekrar, ~4,5 sn, sonra hap sakin haline doner. */
@keyframes gkOkuNabiz{
  0%  {box-shadow:0 8px 28px rgba(0,0,0,.34),inset 0 1px 1px rgba(255,255,255,.12),0 0 0 0 rgba(236,220,180,.5)}
  70% {box-shadow:0 8px 28px rgba(0,0,0,.34),inset 0 1px 1px rgba(255,255,255,.12),0 0 0 14px rgba(236,220,180,0)}
  100%{box-shadow:0 8px 28px rgba(0,0,0,.34),inset 0 1px 1px rgba(255,255,255,.12),0 0 0 0 rgba(236,220,180,0)}
}
.gk-oku-ac.is-cagri{animation:gkOkuBelir .55s cubic-bezier(.22,1,.36,1) both,
  gkOkuNabiz 1.5s ease-out .55s 3;
  border-color:rgba(236,220,180,.38)}
@media (prefers-reduced-motion:reduce){
  .gk-oku-ac.is-cagri{animation:none;border-color:rgba(236,220,180,.38)}
}