/* NOVERA Cool — imza katmanı (theme.css'i ezer) */
/* NOVERA COOL — full-bleed foto hero + cyan/navy · imza (theme.css'i ezer) */
/* RENK DEĞİŞKENLİ + OTO-KONTRAST: panelden 5 semantik renk seçilir
   (koyu/vurgu/zemin/metin/footer). Ara tonlar/gradyanlar/gölgeler color-mix ile
   TÜRETİLİR. RENKLİ HER ZEMİNİN üstündeki metin/ikon rengi elle DEĞİL, render.util
   WCAG kontrast oranıyla hesapladığı değişkenlerden gelir:
     --uzeri-koyu   → koyu zemin (hero perdesi, ozellik bandı, bülten, duyuru)
     --uzeri-vurgu  → vurgu zemin (butonlar, aktif rozet)
     --uzeri-footer → footer zemini (footer metin/link/ikon)
     --uzeri-marka  → marka gradyanı (kampanya + amiral gemisi kartları)
   Böylece "siyah zemin + kırmızı metin" gibi okunmaz kombinasyon ÜRETİLEMEZ.
   Fallback = temanın orijinal cyan/navy görünümü. Gerçek nötrler (sayfa zemini,
   hairline #E7ECF4) --renk-zemin/--renk-kenar'a bağlı ya da bilinçli sabit. */
:root{
  --nc-vurgu: var(--renk-vurgu,#22D3EE);            /* cyan aksan */
  --nc-koyu: var(--renk-koyu,#061A54);              /* navy marka */
  --nc-acik: color-mix(in srgb, var(--renk-vurgu,#22D3EE) 66%, #fff);           /* açık cyan (hover yüzeyi) */
  --nc-ara: color-mix(in srgb, var(--renk-koyu,#061A54) 48%, var(--renk-vurgu,#22D3EE));  /* ara mavi */
  --nc-teal: color-mix(in srgb, var(--renk-vurgu,#22D3EE) 42%, var(--renk-koyu,#061A54)); /* koyu teal */
  --nc-derin: color-mix(in srgb, var(--renk-koyu,#061A54) 74%, #000);           /* 2. kampanya kartı derin ton */
  --nc-golge: color-mix(in srgb, var(--renk-koyu,#061A54) 40%, transparent);    /* marka gölge tonu */
  --nc-uzk: var(--uzeri-koyu,#fff);                 /* koyu zemin üzeri metin */
  --nc-uzv: var(--uzeri-vurgu,#0B1226);             /* vurgu zemin üzeri metin */
  --nc-uzf: var(--uzeri-footer,#fff);               /* footer zemini üzeri metin */
  --nc-uzm: var(--uzeri-marka,#fff);                /* marka gradyanı üzeri metin */
  --nc-kenar: #E7ECF4;                              /* nötr hairline */
}
body{background:var(--renk-zemin,#fff);color:var(--renk-metin,#0B1226)}
.duyuru-cubugu{background:var(--nc-koyu);color:var(--nc-uzk);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
:focus-visible{outline:2px solid var(--nc-vurgu);outline-offset:3px}
/* Header — beyaz, temiz, navy metin, cyan aksan */
.site-header{background:color-mix(in srgb,var(--renk-zemin,#fff) 92%,transparent);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--nc-kenar)}
.logo{color:var(--nc-koyu);font-weight:800;letter-spacing:-.02em}
.ana-nav>a{color:var(--renk-metin,#0B1226);font-weight:600}
.ana-nav>a:hover{color:var(--nc-koyu)}
.header-arama{background:var(--renk-yumusak,#F4F7FB);border-color:var(--nc-kenar);border-radius:999px}
.btn-vurgu,.sepete-ekle,.blok-hero-btn,.hero-banner-btn,.bulten-btn,.amiral-btn{color:var(--nc-uzv)}
/* ---------- HERO: full-bleed fotoğraf + sol koyu perde (koyu renginden türetilir) ---------- */
.blok-hero-slider,.hero-slider{background:var(--nc-koyu)}
.hero-slayt::before{background:linear-gradient(90deg,color-mix(in srgb,var(--nc-koyu) 86%,transparent) 0%,color-mix(in srgb,var(--nc-koyu) 50%,transparent) 45%,color-mix(in srgb,var(--nc-koyu) 15%,transparent) 100%)}
.hero-slayt.hiza-sag::before{background:linear-gradient(-90deg,color-mix(in srgb,var(--nc-koyu) 86%,transparent) 0%,color-mix(in srgb,var(--nc-koyu) 50%,transparent) 45%,color-mix(in srgb,var(--nc-koyu) 15%,transparent) 100%)}
.hero-slayt.hiza-orta::before{background:linear-gradient(180deg,color-mix(in srgb,var(--nc-koyu) 35%,transparent),color-mix(in srgb,var(--nc-koyu) 72%,transparent))}
.hero-slayt-icerik .blok-hero-baslik{font-size:clamp(2.4rem,5.4vw,4.6rem);letter-spacing:-.03em;color:var(--nc-uzk)}
.hero-slayt-icerik .blok-hero-alt{color:color-mix(in srgb,var(--nc-uzk) 82%,transparent);font-size:1.15rem}
.blok-hero-btn{background:var(--nc-vurgu);border-color:var(--nc-vurgu)}
.blok-hero-btn:hover{background:var(--nc-acik)}
/* cam yuvarlak oklar (koyu perde üzeri → uzeri-koyu) */
.hero-ok{width:52px;height:52px;border:1px solid color-mix(in srgb,var(--nc-uzk) 35%,transparent);background:color-mix(in srgb,var(--nc-uzk) 8%,transparent);backdrop-filter:blur(6px);color:var(--nc-uzk)}
.hero-ok:hover{background:var(--nc-vurgu);border-color:var(--nc-vurgu);color:var(--nc-uzv)}
/* story-segment nav (noktalar sola) — 01/03 sayaç KALDIRILDI (kullanıcı direktifi: karışık/bitişik) */
.hero-noktalar{justify-content:flex-start;gap:.55rem;bottom:2rem}
.hero-nokta{flex:0 0 64px;height:3px;border-radius:999px;background:color-mix(in srgb,var(--nc-uzk) 28%,transparent)}
.hero-nokta.aktif{background:var(--nc-vurgu);flex-basis:92px}
.hero-sayac{display:none!important}
/* ---------- STORY HALKALARI — dönen cyan halka (ZOOM YOK) ---------- */
.blok-story-halkalar{padding-block:clamp(1.8rem,4vw,2.8rem)}
.blok-story-halkalar .story-ray{justify-content:center}
.blok-story-halkalar .story-cerc{background:none;position:relative}
.blok-story-halkalar .story-cerc::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 210deg,var(--nc-vurgu),var(--nc-ara),var(--nc-vurgu));z-index:0}
.blok-story-halkalar .story-ic{position:relative;z-index:1;border-color:#fff;color:var(--renk-metin,#0B1226);background-color:var(--renk-yumusak,#F4F7FB)}
.blok-story-halkalar .story-halka:hover .story-cerc{transform:none}
.blok-story-halkalar .story-halka:hover .story-cerc::before{animation:coolStoryDon 1.1s linear infinite}
@keyframes coolStoryDon{to{transform:rotate(360deg)}}
.blok-story-halkalar .story-etiket{color:var(--renk-metin,#0B1226)}
@media(prefers-reduced-motion:reduce){.blok-story-halkalar .story-halka:hover .story-cerc::before{animation:none}}
/* ---------- CİHAZLAR (ürün slider) — açık sayfa zemini üzeri ---------- */
.blok-baslik,.bolum-ust h2{color:var(--renk-metin,#0B1226);font-weight:800;letter-spacing:-.02em}
.us-etiket{color:var(--nc-ara);font-weight:700}
.urun-kart{border-radius:18px;border:1px solid var(--nc-kenar)}
.urun-kart:hover{box-shadow:0 34px 60px -34px var(--nc-golge)}
.urun-marka{color:var(--nc-vurgu)}
.guncel-fiyat{color:var(--nc-koyu)}
.indirim-rozet{background:var(--nc-koyu);color:var(--nc-uzk)}
.bolum-tumu{color:var(--nc-koyu)}
.us-ok{color:var(--nc-koyu);border-color:var(--nc-kenar)}
.us-ok:hover{background:var(--nc-koyu);color:var(--nc-uzk);border-color:var(--nc-koyu)}
.us-cizgi i{background:var(--nc-vurgu)}
.us-noktalar button.aktif{background:var(--nc-koyu)}
/* ---------- NEDEN NOVERA (ozellik) — navy grid kartlar (koyu zemin) ---------- */
.blok-ozellikler{background:var(--nc-koyu);border:0;color:var(--nc-uzk)}
.blok-ozellikler .blok-baslik,.blok-ozellikler .bolum-ust h2{color:var(--nc-uzk)}
.blok-ozellikler .ozellik-kart{border:1px solid color-mix(in srgb,var(--nc-uzk) 14%,transparent);background:color-mix(in srgb,var(--nc-uzk) 3%,transparent);border-radius:18px;padding:1.8rem 1.6rem;transition:border-color .25s,transform .25s}
.blok-ozellikler .ozellik-kart:hover{border-color:color-mix(in srgb,var(--nc-vurgu) 60%,transparent);transform:translateY(-4px)}
.blok-ozellikler .ozellik-ikon{background:color-mix(in srgb,var(--nc-vurgu) 14%,transparent);color:var(--nc-uzk);border-radius:14px}
.blok-ozellikler .ozellik-baslik{color:var(--nc-uzk)}
/* Açıklama SOLİD (şeffaf mute DEĞİL): koyu=parlak (ör. saf kırmızı) seçilse bile
   mute'lu metin AA'nın altına düşerdi; solid --nc-uzk her koyu tonunda oto-kontrast AA. */
.blok-ozellikler .ozellik-metin{color:var(--nc-uzk)}
/* ---------- KAMPANYA — marka gradyanı kartlar (vurgu↔koyu türevleri) ---------- */
.kampanya-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.kampanya-kart{min-height:190px;border-radius:20px;background:linear-gradient(130deg,var(--nc-ara),var(--nc-vurgu))}
.kampanya-kart::after{background:linear-gradient(130deg,color-mix(in srgb,var(--nc-koyu) 5%,transparent),color-mix(in srgb,var(--nc-koyu) 35%,transparent))}
.kampanya-kart:nth-child(2){background:linear-gradient(130deg,var(--nc-derin),var(--nc-ara))}
.kampanya-kart:nth-child(3){background:linear-gradient(130deg,var(--nc-teal),var(--nc-koyu))}
.kampanya-etiket{background:transparent;color:color-mix(in srgb,var(--nc-uzm) 85%,transparent);padding:0;letter-spacing:.14em}
.kampanya-baslik{color:var(--nc-uzm)}
.kampanya-btn{color:var(--nc-uzm);border-bottom-color:color-mix(in srgb,var(--nc-uzm) 50%,transparent)}
/* ---------- AMİRAL GEMİSİ — marka gradyanı full-bleed ---------- */
.blok-amiral-gemisi{background:linear-gradient(120deg,var(--nc-koyu),var(--nc-ara) 60%,var(--nc-teal));color:var(--nc-uzm)}
.blok-amiral-gemisi .amiral-baslik{color:var(--nc-uzm)}
.blok-amiral-gemisi .amiral-alt{color:color-mix(in srgb,var(--nc-uzm) 82%,transparent)}
.blok-amiral-gemisi .amiral-spec-oge span{color:color-mix(in srgb,var(--nc-uzm) 80%,transparent)}
.amiral-etiket{color:color-mix(in srgb,var(--nc-uzm) 88%,transparent)}
.amiral-btn{background:var(--nc-vurgu);border-color:var(--nc-vurgu);color:var(--nc-uzv)}
.amiral-btn:hover{background:var(--nc-acik);border-color:var(--nc-acik)}
/* ---------- BÜLTEN (koyu zemin CTA) ---------- */
.blok-bulten{background:var(--nc-koyu);color:var(--nc-uzk)}
.blok-bulten .blok-baslik,.blok-bulten .bulten-kutu .blok-baslik{color:var(--nc-uzk)}
.blok-bulten .bulten-metin{color:var(--nc-uzk)}
.blok-bulten .bulten-form input{border-color:color-mix(in srgb,var(--nc-uzk) 25%,transparent);background:color-mix(in srgb,var(--nc-uzk) 8%,transparent);color:var(--nc-uzk)}
.blok-bulten .bulten-form input::placeholder{color:color-mix(in srgb,var(--nc-uzk) 60%,transparent)}
/* ---------- FOOTER — HER footer tipinde çalışır (data-footer'a BAĞLI DEĞİL) ----------
   Zemin daima var(--renk-footer); metin/ikon/kenar katmanları oto-kontrast (--nc-uzf).
   Prefix body[data-template] (her sayfada var) theme.css'in body[data-footer=koyu]
   kurallarını (beyaz metin/ikon) DETERMINISTIK ezer → ACIK footer renginde de metin
   okunur; KOYU footer renginde --nc-uzf zaten beyaza döner (görünüm değişmez). Muted
   katmanlar WCAG AA (~4.5:1) opaklıkta. */
body[data-template] .site-footer{background:var(--renk-footer,#061A54);color:color-mix(in srgb,var(--nc-uzf) 86%,transparent);padding-bottom:3rem}
body[data-template] .site-footer .footer-marka,
body[data-template] .site-footer .footer-grup-baslik,
body[data-template] .site-footer .footer-cta-baslik{color:var(--nc-uzf)}
body[data-template] .site-footer .footer-slogan,
body[data-template] .site-footer .footer-cta-metin,
body[data-template] .site-footer .footer-bulten-metin,
body[data-template] .site-footer .footer-iletisim,
body[data-template] .site-footer .footer-guven{color:color-mix(in srgb,var(--nc-uzf) 86%,transparent)}
body[data-template] .site-footer .footer-telif,
body[data-template] .site-footer .footer-altyapi,
body[data-template] .site-footer .footer-odeme{color:color-mix(in srgb,var(--nc-uzf) 78%,transparent)}
body[data-template] .site-footer a{color:color-mix(in srgb,var(--nc-uzf) 82%,transparent)}
body[data-template] .site-footer a:hover,
body[data-template] .site-footer .footer-iletisim a:hover,
body[data-template] .site-footer .footer-grup-linkler a:hover,
body[data-template] .site-footer .footer-nav a:hover{color:var(--nc-uzf)}
body[data-template] .site-footer .footer-ust,
body[data-template] .site-footer .footer-alt,
body[data-template] .site-footer .footer-nav{border-color:color-mix(in srgb,var(--nc-uzf) 16%,transparent)}
/* Sosyal ikon rozetleri + bülten input'u — AÇIK footer'da beyaz görünmez olurdu */
body[data-template] .site-footer .footer-sosyal a{background:color-mix(in srgb,var(--nc-uzf) 8%,transparent);border-color:color-mix(in srgb,var(--nc-uzf) 20%,transparent);color:var(--nc-uzf)}
body[data-template] .site-footer .footer-sosyal a:hover{background:var(--nc-vurgu);border-color:var(--nc-vurgu);color:var(--nc-uzv)}
body[data-template] .site-footer .footer-bulten input,
body[data-template] .site-footer .footer-bulten--takip input{background:color-mix(in srgb,var(--nc-uzf) 8%,transparent);border-color:color-mix(in srgb,var(--nc-uzf) 24%,transparent);color:var(--nc-uzf)}
body[data-template] .site-footer .footer-bulten input::placeholder{color:color-mix(in srgb,var(--nc-uzf) 55%,transparent)}
body[data-template] .site-footer .bulten-onay{color:color-mix(in srgb,var(--nc-uzf) 74%,transparent)}
/* Telif satırına nefes payı (kullanıcı direktifi: footer-alt sıkışık) */
body[data-template] .site-footer .footer-alt{margin-top:.5rem;padding-top:1.5rem;padding-bottom:.5rem}
/* ============================================================
   OTO-KONTRAST TAM KAPSAMA — theme.css'in sabit #fff kullandığı TÜM işlevsel
   yüzeyler oto-kontrasta bağlanır. VURGU zeminli → --nc-uzv, KOYU zeminli →
   --nc-uzk. Böylece "vurgu=açık cyan" (beyaz metin okunmaz) ve "koyu=kırmızı"
   uçlarında hiçbir buton/rozet/sekme/sayfalama okunmaz kalmaz. Görsel üstü koyu
   perdeler (hero-banner/blok-hero/overlay kart/mega/mozaik/ikili) ve semantik
   renkler (indirim yeşili, hata kırmızısı, favori pembesi) BİLİNÇLİ dışarıda. */
/* KOYU zeminli yüzeyler → --nc-uzk (taban .btn önce; vurgu türevleri SONRA ezer) */
.btn{color:var(--nc-uzk)}
.yeni-rozet,
.urun-kart .kart-hizli,
.alt-kategori-cip:hover,
.secenek-deger.secili,
.sayfalama a:hover,
.sayfalama .aktif-sayfa,
.arama-tam-cipler a:hover,
.sekme-tab.aktif,
.urun-slider-ok:hover,
.rv-ok:hover,
.cerez-bandi,
.karsilastir-cubuk,
body[data-buton="kontur"] .btn:hover{color:var(--nc-uzk)}
body[data-buton="kontur"] .btn{color:var(--renk-metin)}
.btn-ikincil{color:var(--renk-metin)}
/* VURGU zeminli yüzeyler → --nc-uzv (kaynak sonu → tabanı ezer) */
.btn-vurgu,.sepete-ekle,.odeme-btn,.blok-hero-btn,.hero-banner-btn,.bulten-btn,.amiral-btn,
.sepet-rozet,.adres-etiket,.karsilastir-cubuk-git,.cerez-bandi .btn,
.kart-ekle:hover,
body[data-buton="kontur"] .btn-vurgu:hover,
body[data-buton="kontur"] .sepete-ekle:hover{color:var(--nc-uzv)}