/* =============================================================
   FIXES — genel düzeltme katmanı (en son yüklenir)
   1) Buton hover/focus/active kontrastı
   2) Header geçişlerinde sabit belge yüksekliği
   ============================================================= */

/* ---------- 1) BUTONLAR ----------
   KÖK NEDEN: .btn::before dolgu katmanı z-index:1 ile konumlandırılmış; düz metin
   (içinde <i> olmayan butonlar) konumlandırılmadığı için dolgunun ALTINDA kalıyordu.
   Hover'da dolgu yükselince metin tamamen kayboluyordu. Dolguyu metnin arkasına alıyoruz:
   .btn kendi yığın bağlamını (isolation) kurar, ::before z-index:-1 ile arka plan ile
   metin arasına girer. */
.btn{isolation:isolate}
.btn::before{z-index:-1}
.btn i{z-index:auto}

/* Eksik varyantlar (sayfalarda kullanılıyor ama stili yoktu: yazı/zemin kontrastı garanti değildi) */
.btn--gold{background:#FFDF85;border-color:#FFDF85;color:var(--ink)}
.btn--gold::before{background:var(--ink)}
.btn--gold:hover,.btn--gold:focus-visible{color:#FFDF85;border-color:var(--ink)}
.btn--light{background:var(--bg);border-color:var(--bg);color:var(--ink)}
.btn--light::before{background:var(--orange)}
.btn--light:hover,.btn--light:focus-visible{color:#fff;border-color:var(--orange)}

/* Genel `a:hover` / `.foot a:hover` renk kuralları buton metnini ezmesin
   (özgüllük eşit, bu dosya sonra yüklendiği için kazanır). */
a.btn:hover,a.btn:focus-visible,button.btn:hover,button.btn:focus-visible{color:var(--bg);text-decoration:none}
a.btn--dark:hover,a.btn--dark:focus-visible,button.btn--dark:hover,button.btn--dark:focus-visible,
.cta a.btn:hover,.cta a.btn:focus-visible,
.hero2 a.btn:hover,.hero2 a.btn:focus-visible,
.svc a.btn:hover,.svc a.btn:focus-visible,
.close a.btn:hover,.close a.btn:focus-visible,
.hiz-cta a.btn:hover,.hiz-cta a.btn:focus-visible,
a.hero4-btn:hover,a.hero4-btn:focus-visible,a.hero3-btn:hover,a.hero3-btn:focus-visible{color:#fff}
a.btn--gold:hover,a.btn--gold:focus-visible,button.btn--gold:hover,button.btn--gold:focus-visible{color:#FFDF85}
a.btn--light:hover,a.btn--light:focus-visible,button.btn--light:hover,button.btn--light:focus-visible{color:#fff}

/* Klavye odağı: net halka */
.btn:focus-visible,.co-btn:focus-visible,.co-sum-btn:focus-visible,.co-pay-btn-main:focus-visible,
.cart-submit-btn:focus-visible,.pd-btn-add-cart:focus-visible,.pd-btn-cart:focus-visible,
.pd-btn-wa:focus-visible,.pd-btn-whatsapp:focus-visible,.hiz-foot-btn:focus-visible,
.rd-btn:focus-visible,.head-cta-desktop:focus-visible{
  outline:2px solid var(--orange);outline-offset:3px;
}
.btn:active{filter:brightness(.97)}

/* Header CTA kendi hover rengini yönetir (editorial.css); dolgu katmanı gereksiz ve
   beyaz/turuncu zeminde metni boğuyordu. */
.head-cta-desktop::before,.nav-links a.cta::before{display:none}

/* Turuncu dolu butonlar: hover'da açık turuncu (#FF7A1F) + beyaz yazı ≈2.9:1 idi.
   Daha koyu turuncu: beyaz yazı ≥4.5:1. */
.co-btn--primary:hover,.co-btn--primary:focus-visible,
.co-sum-btn:hover,.co-sum-btn:focus-visible,
.co-pay-btn-main:hover,.co-pay-btn-main:focus-visible,
.cart-submit-btn:hover,.cart-submit-btn:focus-visible{
  background:#C25E06!important;border-color:#C25E06!important;color:#FFFFFF!important;
}
.pd-btn-add-cart:hover,.pd-btn-add-cart:focus-visible,
.pd-btn-cart:hover,.pd-btn-cart:focus-visible,
.hiz-foot-btn:hover,.hiz-foot-btn:focus-visible{
  background:#C25E06!important;border-color:#C25E06!important;color:#FFFFFF!important;
}
/* Ghost/outline: hover'da dolmuyor, yazı koyu turuncu kalıyor (zemin şeffaf: kontrast yeterli) */
.co-btn--ghost:hover,.co-btn--ghost:focus-visible{color:var(--orange-dk);background:rgba(226,113,12,.08)}
/* WhatsApp butonları: yeşil dolgu + koyu yazı (≥9:1) */
.pd-btn-wa:hover,.pd-btn-wa:focus-visible,.pd-btn-whatsapp:hover,.pd-btn-whatsapp:focus-visible{
  background:#25D366!important;border-color:#25D366!important;color:#03140C!important;
}
/* Okuyucu düğmeleri */
.rd-btn:hover,.rd-btn:focus-visible{color:var(--rd-accent,#B85600)}
.rd-btn--solid:hover,.rd-btn--solid:focus-visible{background:#8F4200;border-color:#8F4200;color:#fff}

/* ---------- 2) HEADER: topbar kapanırken belge yüksekliği sabit ---------- */
@media (min-width: 921px) {
  .head{
    transition:
      background .35s ease,
      border-color .35s ease,
      box-shadow .35s ease,
      margin-bottom .35s ease !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .head,.topbar{transition:none !important}
}

/* ---------- 3) 404 SAYFASI (pages/404.php) ----------
   Koyu masthead (.pg-mast) üzerinde: başlık #FBF9F4, metin ≥.82 opaklık (≥10:1),
   butonlar gerçek dolgulu (::before katmanı yok). Header şeffaf+beyaz yazı uyumludur. */
.nf{min-height:min(82vh,760px);display:flex;flex-direction:column;justify-content:center;isolation:isolate}
.nf-in{align-items:flex-start;justify-content:center;min-height:clamp(380px,56vh,560px);padding-bottom:clamp(3rem,6vw,5rem)}
.nf-sky{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.nf-wheel{
  position:absolute;right:max(-8vw,-140px);top:50%;width:min(62vw,640px);aspect-ratio:1;
  transform:translateY(-46%);color:#FFDF85;opacity:.2;
}
.nf-wheel-spin{transform-origin:300px 300px;animation:nfSpin 140s linear infinite}
.nf-planet{position:absolute;right:clamp(8%,18vw,26%);top:clamp(16%,22vh,26%);width:clamp(64px,9vw,120px);color:#FFDF85;opacity:.85;animation:nfFloat 9s ease-in-out infinite}
.nf-star{position:absolute;width:3px;height:3px;border-radius:50%;background:#FBF9F4;opacity:.7;animation:nfTwinkle 4.5s ease-in-out infinite}
.nf-star--1{left:12%;top:24%}.nf-star--2{left:34%;top:14%;animation-delay:-1.2s}.nf-star--3{left:58%;top:30%;animation-delay:-2.4s;width:2px;height:2px}
.nf-star--4{left:72%;top:72%;animation-delay:-.8s}.nf-star--5{left:24%;top:78%;animation-delay:-3.1s;width:2px;height:2px}.nf-star--6{left:90%;top:18%;animation-delay:-1.9s}
@keyframes nfSpin{to{transform:rotate(360deg)}}
@keyframes nfFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes nfTwinkle{0%,100%{opacity:.25}50%{opacity:.9}}
.nf-code{margin:0 0 .4rem;color:#FFDF85;font-size:.72rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase}
.nf-big{
  margin:0 0 .2rem;font-size:clamp(5rem,16vw,11rem);font-weight:200;line-height:.9;letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,223,133,.6);
}
.nf-title{color:#FBF9F4;margin-bottom:1rem}
.nf-lead{color:rgba(251,249,244,.84);max-width:52ch}
.nf-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:clamp(1.4rem,3vw,2.2rem)}
.nf-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:.8rem 1.6rem;
  border-radius:999px;border:1px solid transparent;font-size:.88rem;font-weight:600;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;transition:background-color .22s,color .22s,border-color .22s,transform .22s;
}
.nf-btn--primary{background:#FFDF85;border-color:#FFDF85;color:#06281A}
.nf-btn--primary:hover,.nf-btn--primary:focus-visible{background:#FFFFFF;border-color:#FFFFFF;color:#06281A;transform:translateY(-1px)}
.nf-btn--ghost{background:transparent;border-color:rgba(251,249,244,.5);color:#FBF9F4}
.nf-btn--ghost:hover,.nf-btn--ghost:focus-visible{background:#FBF9F4;border-color:#FBF9F4;color:#06281A;transform:translateY(-1px)}
.nf-btn:focus-visible{outline:2px solid #FFDF85;outline-offset:3px}
@media (max-width:640px){
  .nf-wheel{width:120vw;right:-50vw;opacity:.14}
  .nf-planet{right:6%;top:15%;opacity:.6}
  .nf-btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .nf-wheel-spin,.nf-planet,.nf-star{animation:none}
}
