/* ENERJİM GÜNEŞTEN — enerjik güneş/rüzgar teması: koyu "gece gökyüzü"
   laciverti + güneş turuncusu/sarısı vurgu rengi. */
:root{
  --lacivert:#0b1b33; --lacivert-2:#122a4d; --turuncu:#f5810c; --turuncu-2:#ffb238;
  --sari:#ffcf4d; --yesil:#1fa971; --kirmizi:#e0483c;
  --yazi:#182233; --soluk:#5b6b82; --cizgi:#e4e9f1; --zemin:#ffffff; --kum:#f6f8fc;
  --radius:14px; --golge:0 10px 30px -12px rgba(11,27,51,.25);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--zemin);color:var(--yazi);font:400 16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{line-height:1.2;margin:0 0 .6rem;font-weight:800;letter-spacing:-.01em}
h1{font-size:clamp(1.7rem,4vw,2.6rem)}
h2{font-size:clamp(1.3rem,2.6vw,1.8rem)}
h3{font-size:1.08rem;margin-bottom:.35rem}
p{margin:0 0 1rem}
ul{padding-left:1.2rem}
.gizli{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
.atla{position:absolute;left:-999px;top:0;background:var(--turuncu);color:#fff;padding:.6rem 1rem;z-index:999;border-radius:0 0 8px 0}
.atla:focus{left:0}
.sarmal{max-width:1180px;margin:0 auto;padding:0 1.1rem}

/* ---- üst şerit ---- */
.ust-serit{background:var(--lacivert);color:#cfe0ff;font-size:.85rem}
.ust-serit .sarmal{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:.5rem;padding-bottom:.5rem;flex-wrap:wrap}
.ust-serit-sol{display:flex;gap:1.2rem;flex-wrap:wrap}
.ust-serit-sol span,.ust-serit-sag a{display:inline-flex;align-items:center;gap:.35rem}
.ust-serit svg{width:15px;height:15px;flex:none}
.ust-serit-sag a{color:var(--sari);text-decoration:none;font-weight:700}

/* ---- header ---- */
/* ✅ 06.09.2026 — Emir: menü arka planı https://www.gezegensolar.com/ (aynı
   gerçek işletmenin bugünkü canlı sitesi) rengine benzesin. O sitenin kendi
   CSS değişkenlerinden (:root, sayfa kaynağı) okunan gerçek renkler:
   --menu-bg-color:#fbd914 (sarı) · --menu-color:#0457ad (mavi) ·
   --menu-color-hover:#000000 (siyah). Uydurma bir renk seçilmedi. */
/* ✅ 06.09.2026 — Emir: "üst sarı alanı büyüt, menüler gösterişli olsun,
   logo da büyüsün" — şerit yüksekliği, logo ve menü bir tık büyütüldü. */
.tepe{background:#fbd914;position:sticky;top:0;z-index:50}
/* ✅ 06.09.2026 — Emir önce "büyüt" dedi, aşırı büyüyüp taşınca "çok az
   büyüt demiştim" diye düzeltti — burası artık ÇOK KÜÇÜK bir artış (orijinal
   .7rem/38px'e göre).
   ⚠ 08.09.2026 — Emir logoyer.png üzerinde işaretledi: header'ın max-width'i
   (1400px) sitenin geri kalanından (.sarmal → 1180px) DAHA GENİŞ olduğu için
   ikisi de margin:0 auto ile ortalanınca header'ın sol kenarı içerik
   sütununun sol kenarından daha SOLA taşıyor, logo/menü sayfanın geri
   kalanıyla hizasız duruyordu. max-width kaldırılıp standart .sarmal
   (1180px) ile aynı hizaya getirildi — logo artık aşağıdaki "Ana sayfa"
   kırıntısıyla/makale sütunuyla tam hizalı. */
/* ⚠ 08.09.2026 — Emir: kutucuk üstteki ve alttaki sarı bara TAM değecek,
   gerçek bir dikdörtgen olacaktı — önceki denemede sadece linkin kendi
   padding'i büyütülmüştü, bu da .sarmal'ın üst/alt padding'i YÜZÜNDEN
   üstte/altta hâlâ sarı boşluk bırakıyordu ("kutucuk tam kaplamıyor").
   Gerçek çözüm: .sarmal'ın DIKEY padding'i kaldırılıp align-items:stretch
   yapıldı (menü artık üst-alt sınırlara kadar UZANIYOR); logo ve butonlar
   kendi align-self:center'ıyla eskisi gibi ortada kalıyor, SADECE .menu
   (ve içindeki linkler) tam yüksekliğe geriliyor. */
.tepe .sarmal{display:flex;align-items:stretch;gap:.9rem;padding-top:0;padding-bottom:0;min-height:64px}
.marka{align-self:center;display:flex;align-items:center;text-decoration:none;color:var(--lacivert);font-weight:800;font-size:1.15rem;gap:.5rem}
.marka-logo{height:42px;width:auto}
/* footer logosu ikon+yazı ALT ALTA dizili (dikey kompozisyon) — 38px'te
   yazı satırı okunmayacak kadar küçülüyor; Emir "büyüt, göze hoş gelsin"
   dedi (06.09.2026) — 72px'ten 116px'e çıkarıldı. */
.marka-alt{margin-bottom:.9rem}
.marka-alt .marka-logo{height:116px}
.menu-ac{align-self:center;display:none;margin-left:auto;background:none;border:0;padding:.4rem;cursor:pointer;color:var(--lacivert)}
.menu-ac svg{width:26px;height:26px}
/* ✅ 06.09.2026 — Emir: menü logoya da butonlara da yakın olmasın, aradaki
   boşlukta TAM ORTADA dursun. flex:1 ile logo-buton arası tüm boşluğu
   kaplıyor, justify-content:center içeriği o boşluğun ortasına hizalıyor.
   ⚠ 08.09.2026 — align-items:center KALDIRILDI (stretch'e geçildi) ki
   .menu tam header yüksekliğine gerilsin, kutucuk üst/alt bara değsin. */
/* ⚠ 08.09.2026 — Emir: iki menü öğesi yan yana vurgulanınca (biri aktif
   sayfa, diğeri hover) aralarında ince bir sarı ÇİZGİ görünüyordu — gap
   olduğu için kutucuklar birbirine değmiyordu. gap:0 ile kutucuklar tam
   bitişik, aralarında zemin rengi hiç görünmüyor. */
.menu{display:flex;align-items:stretch;justify-content:center;gap:0;flex:1;flex-wrap:wrap}
/* ✅ 08.09.2026 — Emir referans gösterdiği bir sitedeki menü davranışını
   istedi: gezinirken üzerine gelinen menü öğesinin arka planı dolu, TAM
   YÜKSEKLİKTE (üst/alt bara değen) bir DİKDÖRTGEN oluyor; tıklayıp o
   sayfaya gidince aynı dikdörtgen O SAYFADA sabit kalıyor (hover ve aktif
   sayfa AYNI görünüm — referans sitenin kendi CSS'i incelendi, ikisi de
   aynı dolu renk). Yükseklik artık PADDING'den değil, .menu'nün
   align-items:stretch ile tam header boyuna gerilmesinden geliyor —
   bu yüzden <a> içeride flex ile dikey ortalanıyor, köşe YUVARLAK DEĞİL
   (tam dikdörtgen, referanstaki gibi). */
.menu a{display:flex;align-items:center;height:100%;box-sizing:border-box;text-decoration:none;color:#0457ad;font-weight:700;font-size:.96rem;padding:0 1rem;border-radius:0;transition:background .15s,color .15s}
.menu a[aria-current="page"],.menu a:hover{background:#0457ad;color:#fff}
.tepe-butonlar{align-self:center;margin-left:auto;display:flex;gap:.5rem;flex-wrap:wrap}
.tepe-butonlar .btn{padding:.56rem 1rem;font-size:.88rem}
.tepe-butonlar .btn svg{width:16px;height:16px}
/* "tıklayın diye bağırsın" — hafif nabız/parıltı efekti, ikisi kendi
   renginde (mavi/yeşil), sürekli değil aralıklı (göz yormasın diye 2.4sn). */
@keyframes buton-nabiz-mavi{
  0%,100%{box-shadow:0 0 0 0 rgba(4,87,173,.55)}
  60%{box-shadow:0 0 0 9px rgba(4,87,173,0)}
}
@keyframes buton-nabiz-yesil{
  0%,100%{box-shadow:0 0 0 0 rgba(177,204,72,.65)}
  60%{box-shadow:0 0 0 9px rgba(177,204,72,0)}
}
.tepe-butonlar .btn-mavi{animation:buton-nabiz-mavi 2.4s ease-out infinite}
.tepe-butonlar .btn-acik-yesil{animation:buton-nabiz-yesil 2.4s ease-out infinite}
.tepe-butonlar .btn:hover{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){.tepe-butonlar .btn{animation:none}}

/* ---- düğmeler ---- */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.2rem;border-radius:999px;text-decoration:none;font-weight:700;font-size:.95rem;border:2px solid transparent;white-space:nowrap}
.btn svg{width:18px;height:18px;flex:none}
.btn-ana{background:var(--turuncu);color:#fff}
.btn-ana:hover{background:var(--turuncu-2)}
.btn-cizgi{border-color:var(--lacivert);color:var(--lacivert)}
.btn-cizgi:hover{background:var(--lacivert);color:#fff}
.btn-koyu{background:var(--lacivert);color:#fff}
.btn-yesil{background:var(--yesil);color:#fff}
/* gezegensolar.com'un kendi mavisi (#0457ad) — sarı üst şeritte iyi kontrast,
   menüdeki mavi yazıyla da tutarlı (06.09.2026). */
.btn-mavi{background:#0457ad;color:#fff}
.btn-mavi:hover{background:#03427f}
/* Online Mağazamız — 2. denemede (#4dc761) de "iyi durmadı" dendi; bu sefer
   gezegensolar.com'un KENDİ logosundaki "Solar" yazısının rengi kullanıldı —
   hero görsellerindeki GEZEGEN Solar logosundan piksel piksel örneklendi
   (06.09.2026, ortalama RGB 177/204/72 → #b1cc48), uydurma bir yeşil değil. */
.btn-acik-yesil{background:#b1cc48;color:#183a17}
.btn-acik-yesil:hover{background:#9ab53a}
/* "Google'da değerlendirin" — 06.09.2026, turuncudan yorum-cta kutusundaki
   yıldız rozetiyle aynı altın/sarı tona çevrildi (koyu kutuda daha çok göze
   çarpıyor, yıldız temasıyla da tutarlı). */
.btn-altin{background:#FFC93C;color:#1a1a1a}
.btn-altin:hover{background:#f0b81f}
.btn-grup{display:flex;gap:.8rem;flex-wrap:wrap}

/* ---- kırıntı ---- */
.kirinti{background:var(--kum);font-size:.85rem}
.kirinti ol{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem;padding:.55rem 0;margin:0;color:var(--soluk)}
.kirinti li:not(:last-child)::after{content:"/";margin-left:.3rem;color:#b7c2d4}
.kirinti a{text-decoration:none;color:var(--soluk)}
.kirinti a:hover{color:var(--turuncu)}

/* ---- hero slider (06.09.2026 — Emir'in 7 gerçek kampanya görseli, sadece
   görsel; metinler görsellerin kendi üzerinde baskılı, bkz. uret.php notu) */
.hero-slider{background:#0b1b33}
/* ✅ 08.09.2026 — Emir'in referans gösterdiği başka bir sitedeki köşe
   parlaması tekniği: daire değil GENİŞ OVAL (eliptik) radial-gradient
   lekeler, marka renginde (bizde sarı #fbd914), %70 civarı yumuşak sönüş —
   düz beyaz parlama/blend-mode değil. Sadece sağ üst + sol alt köşe. */
/* ⚠ 08.09.2026 — Emir: "her slaytta farklı renk olabilir mi" — tekli
   .hs-govde::after yerine HER SLAYDIN kendi ::after'ı kullanılıyor, rengi
   uret.php'de o slayda özel yazılan --parlama CSS değişkeninden geliyor;
   slaytlar zaten opacity ile crossfade olduğu için lekeler de otomatik
   birlikte soluyor/beliriyor. */
.hs-slayt::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(60% 70% at 92% 6%, rgba(var(--parlama,251,217,20),.4), transparent 72%),
             radial-gradient(55% 65% at 5% 95%, rgba(var(--parlama,251,217,20),.28), transparent 72%)}
/* ✅ 06.09.2026 — Emir: "sağında solunda siyah boşluklar var, sıfırla" —
   max-width:1584px kaldırıldı, geniş ekranlarda artık tam genişlik
   kaplıyor (görsel oranı aspect-ratio ile hâlâ korunuyor, sadece büyüyor).
   ⚠ 08.09.2026 — Emir yeni slider görsellerini 1920x750 en-boy oranıyla
   hazırladı, oran buna göre güncellendi. */
.hs-govde{position:relative;width:100%;aspect-ratio:1920/750;overflow:hidden}
.hs-slaytlar{position:relative;width:100%;height:100%}
.hs-slayt{position:absolute;inset:0;display:block;opacity:0;visibility:hidden;transition:opacity .45s ease}
.hs-slayt.aktif{opacity:1;visibility:visible}
.hs-slayt img{width:100%;height:100%;object-fit:contain;background:#0b1b33}
/* ✅ 06.09.2026 — Emir: "tuş küçük, yanlış yere basınca slayt linki açılıyor,
   üstten alta bayağı bir alanı tuşa çevir" — .hs-ok artık TAM YÜKSEKLİK
   (top:0/bottom:0) geniş bir tıklama şeridi; içindeki .hs-ok-daire sadece
   GÖRSEL camsı daire. Şeridin tamamı tıklanabilir, "yanlış yere bastım"
   ihtimali kalmıyor. */
.hs-ok{position:absolute;top:0;bottom:0;width:22%;max-width:130px;min-width:64px;background:transparent;border:0;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;z-index:5}
.hs-ok-sol{left:0;justify-content:flex-start;padding-left:1rem}
.hs-ok-sag{right:0;justify-content:flex-end;padding-right:1rem}
.hs-ok-daire{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1.5px solid rgba(255,255,255,.55);box-shadow:0 4px 18px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;transition:background .15s,scale .15s;flex:none}
.hs-ok:hover .hs-ok-daire{background:rgba(255,255,255,.34);scale:1.08}
.hs-ok svg{width:26px;height:26px;stroke-width:2.4}
.hs-ok-sol svg{transform:rotate(180deg)}
/* ⚠ 08.09.2026 — Emir: "ok tuşları webte kalsın ama telefonda gözükmesin,
   telefonda kullanıcı parmağıyla kaydırsın" — okların boyutunu küçültmek
   yerine telefon genişliğinde tamamen GİZLENDİ (bkz. site.js'teki dokunma/
   kaydırma (swipe) desteği, aynı işi parmakla yapıyor). */
@media (max-width:640px){.hs-ok{display:none}}

/* ---- öne çıkan kategoriler (08.09.2026 — Emir'in gezegensolar.com'dan
   birebir istediği 4'lü kart, slider'ın hemen altında, başlıksız) ---- */
.one-cikan-kat{background:#fff;padding:clamp(3.2rem,5vw,4.2rem) 0 clamp(1.6rem,3vw,2.2rem)}
.ock-izgara{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem 1.2rem}
@media (max-width:900px){.ock-izgara{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.ock-izgara{grid-template-columns:1fr;max-width:320px;margin:0 auto}}
.ock-kart{position:relative;display:block;text-decoration:none;border-radius:6px;margin-top:25%}
.ock-mavi{background:#0457ad}
.ock-sari{background:#fbd914}
/* ⚠ 08.09.2026 — Emir: dar (mobil) genişlikte görselin altındaki "Solar
   Paneller" etiketi görselin arkasında kaybolmuştu. Sebep: eskiden top:-70px
   gibi SABİT piksel kullanılıyordu ama görsel genişliği kart genişliğinin
   %'si (yani ekrana göre DEĞİŞKEN) olduğu için oranlar dar ekranda
   tutmuyordu. Çözüm: negatif margin-top YÜZDESİ kullanmak — CSS'te
   margin/padding yüzdeleri her zaman kapsayıcının GENİŞLİĞİNE göre
   hesaplanır (yüksekliğine değil), bu da görseli/boşluğu HER ekran
   genişliğinde aynı ORANDA büyütüp küçültüyor, sabit piksel gibi
   dar ekranda "yetersiz kalma" sorunu olmuyor. */
.ock-gorsel{display:block;width:74%;margin:-25% auto 0;overflow:visible}
/* ✅ 08.09.2026 — Emir: masaüstünde fareyle kartın üzerine gelince görsel
   hafifçe büyüsün, fare çekilince eski haline dönsün. */
.ock-gorsel img{width:100%;height:auto;display:block;filter:drop-shadow(0 10px 16px rgba(0,0,0,.28));transition:transform .25s ease}
.ock-kart:hover .ock-gorsel img{transform:scale(1.06)}
.ock-icerik{display:block;padding:1.7rem 1rem 1.6rem;text-align:center}
.ock-etiket{display:block;font-size:.85rem;font-weight:700}
.ock-mavi .ock-etiket{color:#fbd914}
.ock-sari .ock-etiket{color:#0b1b33}
.ock-baslik{display:block;font-size:1.1rem;font-weight:800;line-height:1.32;margin:.6rem 0 1.5rem}
.ock-mavi .ock-baslik{color:#fff}
.ock-sari .ock-baslik{color:#0457ad}
.ock-buton{display:inline-flex;align-items:center;justify-content:center;padding:.55rem 1.4rem;border-radius:999px;font-size:.85rem;font-weight:700;transition:opacity .15s}
.ock-mavi .ock-buton{background:#fff;color:#0457ad}
.ock-sari .ock-buton{background:#0457ad;color:#fff}
.ock-kart:hover .ock-buton{opacity:.82}

/* ---- anasayfa alt vitrin (08.09.2026 — Emir'in verdiği 6 gerçek ürün
   fotoğrafı, stüdyo zeminli; sadece görsel+başlık, açıklama metni yok,
   her biri ilgili kategoriye gidiyor) ---- */
.vt-izgara{display:grid;grid-template-columns:repeat(6,1fr);gap:1.4rem}
@media (max-width:900px){.vt-izgara{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.vt-izgara{grid-template-columns:repeat(2,1fr)}}
.vt-kart{display:block;text-decoration:none;text-align:center;transition:transform .2s}
.vt-kart:hover{transform:translateY(-4px)}
/* ⚠ 08.09.2026 — Emir: kartların çerçevesi KESKİN (köşeler yuvarlak değil,
   düz/keskin) ve belirgin olsun dedi.
   ⚠ 08.09.2026 — Emir: "kartları kırpma, tam yerleştir, gezegensolar'da
   var" — gezegensolar.com'un kendi CSS'i incelendi (.ban-type .image
   img{width:100%}, object-fit/aspect-ratio YOK) — görsel KIRPILMADAN,
   kendi doğal oranında (300x350 dikey) gösteriliyor; kare kutu ve
   object-fit:cover kaldırıldı. */
.vt-gorsel{display:block;overflow:hidden;box-shadow:var(--golge);border:2px solid var(--cizgi)}
.vt-kart:hover .vt-gorsel{border-color:#0457ad}
.vt-gorsel img{width:100%;height:auto;display:block;transition:transform .3s}
.vt-kart:hover .vt-gorsel img{transform:scale(1.05)}
.vt-baslik{display:block;margin-top:.8rem;font-weight:700;font-size:.92rem;color:var(--yazi);line-height:1.3}
.vt-kart:hover .vt-baslik{color:#0457ad}

/* ---- bölüm ---- */
.bolum{padding:clamp(2.2rem,4.4vw,3.6rem) 0}
/* ⚠ 08.09.2026 — Emir: "NASIL ÇALIŞIYORUZ" bölümünün zemini #0457ad
   (gezegensolar mavisi) olsun, iç kartlar bu renge göre yeniden tasarlansın,
   köşeler yumuşasın, ikon kutuları #fbd914 (sarı) olsun istedi. .bolum-koyu
   sitede SADECE bu bölümde kullanıldığı için (grep ile doğrulandı) doğrudan
   değiştirildi, başka sayfayı etkilemiyor. */
/* ✅ 08.09.2026 — Emir: burada da aynı referans teknik — geniş oval,
   sarı (#fbd914) tonlu, %70 sönüşlü iki leke (sağ üst/sol alt), düz beyaz
   daire değil. */
.bolum-koyu{background-color:#0457ad;color:#fff;position:relative;overflow:hidden;
  background-image:radial-gradient(60% 70% at 94% 4%, rgba(251,217,20,.32), transparent 72%),
                    radial-gradient(55% 65% at 4% 96%, rgba(251,217,20,.22), transparent 72%)}
.bolum-koyu h2,.bolum-koyu h3{color:#fff}
.bolum-koyu p{color:#d7e6f7}
/* ✅ 08.09.2026 — Emir: "NASIL ÇALIŞIYORUZ" etiketi #fbd914, kart içi
   açıklama metni de başlık gibi beyaz olsun istedi. */
.bolum-koyu .etiket{color:#fbd914}
.bolum-koyu .kutucuk p{color:#fff}
/* ⚠ 08.09.2026 — Emir: kartların iç beyaz ışıması hafif artsın dedi. */
.bolum-koyu .kutucuk{position:relative;overflow:hidden;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);border-radius:20px;padding:1.5rem 1.3rem;transition:background .2s,transform .2s}
.bolum-koyu .kutucuk:hover{background:rgba(255,255,255,.24);transform:translateY(-3px)}
.bolum-koyu .kutucuk-ikon,.bolum-koyu .kutucuk h3,.bolum-koyu .kutucuk p{position:relative;z-index:1}
/* ✅ 08.09.2026 — Emir: ilk kartın SOL ALTINDAN, son kartın SAĞ ALTINDAN
   içeri doğru hafif bir ışıma istedi — aynı oval/yumuşak teknik, kart
   içine, tek köşeden. */
.bolum-koyu .kutucuk:first-child::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 80% at 0% 100%, rgba(251,217,20,.32), transparent 70%)}
.bolum-koyu .kutucuk:last-child::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 80% at 100% 0%, rgba(251,217,20,.32), transparent 70%)}
.bolum-koyu .kutucuk h3{font-size:1.05rem;margin:0 0 .4rem}
/* ⚠ 08.09.2026 — Emir: daire değil, yumuşak köşeli dikdörtgen olsun dedi. */
.bolum-koyu .kutucuk-ikon{width:56px;height:56px;border-radius:16px}
/* ⚠ .ik-sari/.ik-turuncu/.ik-lacivert/.ik-yesil de 2 sınıflı olduğu için
   aynı özgüllükte (specificity) çakışıyordu, kaynak sırası yüzünden onlar
   kazanıyordu — burada 3 sınıflı, daha özgül seçicilerle KESİN olarak
   eziliyor, hepsi #fbd914 oluyor. */
.bolum-koyu .kutucuk-ikon.ik-sari,
.bolum-koyu .kutucuk-ikon.ik-turuncu,
.bolum-koyu .kutucuk-ikon.ik-lacivert,
.bolum-koyu .kutucuk-ikon.ik-yesil{background:#fbd914;color:#0b1b33}
.bolum-kum{background:var(--kum)}
.bolum-bas{max-width:680px;margin:0 auto 1.8rem}
.bolum-bas-genis{max-width:820px}
/* ✅ 06.09.2026 — Emir: bu iki başlık bloğu ortalı değil SOLDAN başlasın,
   alttaki küçük metin de dar bir sütuna sıkışmadan sağa doğru yayılsın. */
.bolum-bas-sol{max-width:100%;margin:0 0 1.8rem;text-align:left}
/* ✅ 08.09.2026 — Emir: anasayfa "ÜRÜNLER" başlığı sol hizalansın ve sağda
   boş kalan alana bir eylem butonu ("Tüm Ürünleri Gör") gelsin — başlık
   bloğu ile buton aynı satırda, dar ekranda alt alta düşüyor. */
.bolum-bas-satir{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.8rem}
.bolum-bas-satir .bolum-bas-sol{margin-bottom:0;flex:1 1 420px}
/* ⚠ 08.09.2026 — Emir: buton çok aşağıda (paragrafla aynı hizada) duruyordu,
   "başlıkla (h2) aynı hizaya" gelecek şekilde bir tık yukarı alındı. */
.bolum-bas-satir .btn{flex:none;margin-bottom:2.5rem}
/* ✅ 08.09.2026 — Emir: "Tüm Ürünleri Gör" zemini #0457ad (dolu, mavi)
   olsun istedi. Sonra fikir değiştirdi: "üstüne gelince de bir şeyler olsun,
   buton olduğu belli olsun" — bu yüzden hover'da rengi hafif koyulaşıyor,
   yukarı doğru hafifçe kalkıyor (translateY) ve altına gölge düşüyor;
   yumuşak geçiş (transition) ile. */
.bolum-bas-satir .btn-cizgi{background:#0457ad;border-color:#0457ad;color:#fff;transition:background .18s,transform .18s,box-shadow .18s}
.bolum-bas-satir .btn-cizgi:hover{background:#033f80;border-color:#033f80;color:#fff;transform:translateY(-2px);box-shadow:0 8px 18px rgba(4,87,173,.35)}
.bolum-bas-satir .btn-cizgi:active{transform:translateY(0);box-shadow:0 3px 8px rgba(4,87,173,.3)}
/* ✅ 06.09.2026 — Emir: etiket rengi menüdeki mavi gibi olsun, bir tık büyüsün. */
.etiket{display:inline-block;color:#0457ad;font-weight:800;font-size:.88rem;letter-spacing:.06em;margin-bottom:.4rem}

/* ---- ızgaralar ---- */
.izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.1rem}
.izgara-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.izgara-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
@media (max-width:920px){.izgara-4{grid-template-columns:repeat(2,1fr)}.izgara-2{grid-template-columns:1fr}}
@media (max-width:560px){.izgara-4{grid-template-columns:1fr}}
.izgara-4-ortali .kutucuk{text-align:center}
.izgara-4-ortali .kutucuk-ikon{margin:0 auto .7rem}
/* auto-fit (auto-fill DEĞİL) — gerçek kart sayısı sütun sayısını tam
   bölmediğinde bile mevcut kartlar satırı doldurarak büyür, alt satırda
   YALNIZ KALAN kart olmaz (06.09.2026 kuralı, bkz. memory). */
.izgara-esnek{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.1rem}

/* ---- metin + görsel/harita iki sütun (06.09.2026) — bir başlık altına
   metin yazılan hiçbir blok yanında boş alan kalmasın kuralı: ya tam
   genişlik ya da yanında gerçek bir görsel/harita. */
.metin-gorsel{display:grid;grid-template-columns:1fr 1fr;gap:2.2rem;align-items:center}
.metin-gorsel .govde-foto{margin:0}
.metin-gorsel img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius);display:block}
.metin-gorsel .yan-kutu{margin-bottom:0;height:100%;box-sizing:border-box}
.harita-kutu{position:relative;border-radius:var(--radius);overflow:hidden;min-height:280px;height:100%;background:var(--kum)}
/* ✅ 06.09.2026 — Emir: baştan mavi olsun, üstüne gelince başka renk olsun
   (öncekinin tam tersi — varsayılan/hover renkleri yer değiştirdi). */
.harita-yol-tarifi{position:absolute;top:12px;right:12px;z-index:2;display:inline-flex;align-items:center;gap:.4rem;background:#0457ad;color:#fff;font-weight:700;font-size:.85rem;padding:.55rem .9rem;border-radius:999px;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.22);transition:background .15s,color .15s,scale .15s}
.harita-yol-tarifi svg{width:16px;height:16px}
.harita-yol-tarifi:hover{background:#fff;color:#0457ad;scale:1.04}
@media (max-width:820px){.metin-gorsel{grid-template-columns:1fr}.harita-kutu{height:280px}}

/* ---- ürün detay sayfası: görsel + satın al kutusu YAN YANA "hero"
   (07.09.2026, Emir: "solda sağda hemen ürünün görseli hemen satın al
   butonunu katabilir miyiz" — e-ticaret sitelerindeki gibi). Görsel
   önceki tam-genişlik makale görselinden KÜÇÜLTÜLDÜ, kutulu/dolgulu bir
   çerçevede object-fit:contain ile gösteriliyor (ürün fotoğrafı kırpılıp
   bozulmasın diye cover değil contain). */
/* ✅ 07.09.2026 — Emir: sağ taraftaki kutu/butonlar büyüyünce soldaki
   görsel küçük/uyumsuz kalmış — sütun 340px'ten 460px'e çıkarıldı. */
.urun-hero{display:grid;grid-template-columns:460px 1fr;gap:2.2rem;align-items:start}
.urun-hero-gorsel{background:var(--kum);border-radius:var(--radius);padding:1.5rem;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.urun-hero-gorsel img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;display:block}
.urun-hero-bilgi h1{margin-top:0}
.urun-hero-ozet{color:var(--soluk);font-size:1.02rem}
.urun-hero-butonlar{display:flex;flex-direction:column;gap:10px;margin-top:1.1rem}
/* ⚠ 07.09.2026 — Emir: "Hemen Al" / "Whatsapp ile Gönder" ince kalmış,
   üstteki (Sepete Ekle satırı) ile AYNI GENİŞLİKTE olmalı. Kök neden:
   .gs-btn'nin kendi flex:1'i (satır içi büyüme için) dikey .gs-satir
   dışındaki DÜZ .gs-btn'lerde belirsiz kalıyordu — artık her iki yerde
   de (hero + sağ sabit kutu) tam genişlik AÇIKÇA zorlanıyor, hiçbir
   tarayıcı yorumuna bağlı kalmıyor. */
.urun-hero-butonlar > .gs-btn,
.yan-kutu > .gs-btn{flex:none;width:100%}
@media (max-width:900px){.urun-hero{grid-template-columns:340px 1fr}}
@media (max-width:720px){.urun-hero{grid-template-columns:1fr}.urun-hero-gorsel{max-width:320px;margin:0 auto}}

/* ---- ürün sayfası satın alma satırları — gezegensolar.com'un KENDİ
   canlı sayfasından (07.09.2026, Emir: "birebir aynısı olacak") çekilen
   GERÇEK CSS değerleri: template/smart/default/assets/style.min.css'teki
   .btn-cart / .btn-fast-buy / .btn-wp / .product-quantity kuralları
   birebir. Bilinçli olarak sitenin geri kalanındaki yuvarlak (pill)
   .btn sisteminden AYRI tutuldu — bu üç sınıf kendi tam stilini taşıyor,
   sitenin .btn'ini miras almıyor. */
/* ⚠ 07.09.2026 — Emir gerçek CSS'teki 45px'i "kısa" buldu, resimdeki
   orana bakıp büyütmemi istedi (referans görsel dar bir sütunda 45px
   gösteriyordu, bizim sütunumuz daha geniş — orantı bunu gerektiriyor).
   58px'e çıkarıldı, yazı/ikon da orantılı büyüdü. */
.gs-satir{display:flex;gap:10px;width:100%}
.gs-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;height:58px;border:1px solid transparent;border-radius:5px;font-size:16px;font-weight:500;text-decoration:none;cursor:pointer;flex:1;box-sizing:border-box}
.gs-btn svg{width:19px;height:19px;flex:none}
.gs-btn-cart{background:#fd5b06;border-color:#fd5b06;color:#fff}
.gs-btn-cart:hover{background:#e35204}
.gs-btn-fastbuy{background:#5e5e5e;border-color:#5e5e5e;color:#fff}
.gs-btn-fastbuy:hover{background:#4c4c4c}
.gs-btn-wp{background:#33aa29;border-color:#33aa29;color:#fff}
.gs-btn-wp:hover{background:#2c9123}
.urun-miktar{display:flex;align-items:stretch;flex:none}
.urun-miktar-buton{width:44px;height:58px;border:0;background:#bfbfbf;color:#484848;font-size:18px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;box-sizing:border-box}
.urun-miktar-buton:hover{background:#d3d3d3}
.urun-miktar-buton:first-child{border-radius:5px 0 0 5px}
.urun-miktar-buton:last-child{border-radius:0 5px 5px 0}
.urun-miktar-sayi{width:50px;height:58px;border:0;border-top:2px solid #bfbfbf;border-bottom:2px solid #bfbfbf;text-align:center;font-weight:700;font-size:16px;color:#484848;background:#fff;pointer-events:none;box-sizing:border-box;padding:0}

/* ---- kutucuk ---- */
.kutucuk{background:rgba(255,255,255,.04);padding:1.1rem}
.bolum:not(.bolum-koyu) .kutucuk{background:var(--kum);border-radius:var(--radius);padding:1.3rem}
.kutucuk-ikon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--turuncu);color:#fff;margin-bottom:.7rem}
.kutucuk-ikon svg{width:26px;height:26px}
.kutucuk-ikon.ik-sari{background:var(--sari);color:var(--lacivert)}
.kutucuk-ikon.ik-turuncu{background:var(--turuncu)}
.kutucuk-ikon.ik-lacivert{background:#2a4576}
.kutucuk-ikon.ik-yesil{background:var(--yesil)}
.kutucuk-ikon.ik-mavi{background:#0457ad}
.kutucuk p{font-size:.92rem;color:var(--soluk);margin:0}
/* tıklanabilir kutucuk (Hakkımızda "Kılavuz" kartları, 06.09.2026) —
   .kutucuk aynı görünümü korur, sadece <a> olarak davranması sağlanıyor. */
/* ✅ 06.09.2026 — Emir: kart metni/başlığı ortalansın, dışa hafif ışıma
   (glow) olsun, üstüne gelince hafif oynasın. */
.kutucuk-baglantili{display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;color:inherit;box-shadow:0 6px 22px rgba(4,87,173,.14);transition:transform .2s ease,box-shadow .2s ease}
.kutucuk-baglantili .kutucuk-ikon{margin-left:auto;margin-right:auto}
.kutucuk-baglantili:hover{transform:translateY(-5px);box-shadow:0 14px 32px rgba(4,87,173,.26)}
.kutucuk-baglantili h3{color:var(--yazi)}
.kutucuk-baglantili p{flex:1}
.kutucuk-baglantili .kart-bag{margin-left:auto;margin-right:auto}

/* ---- rozet kartı (Hakkımızda "Arkamızdaki Güç" — kartlar.png deseni:
   düz zemin + tek renk çizgi ikon + başlık + açıklama, renkli rozet yok) */
.rozet-izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.1rem;margin-top:1.6rem}
/* ✅ 06.09.2026 — Emir: bu kartlar da başlık/metin ortalı, güzel bir tasarım
   olsun (kılavuz kartlarındaki ışıma+hover ile aynı aile). */
.rozet-kart{background:#fff;border-radius:var(--radius);padding:1.8rem 1.4rem;text-align:center;box-shadow:0 6px 22px rgba(4,87,173,.1);transition:transform .2s ease,box-shadow .2s ease}
.rozet-kart:hover{transform:translateY(-5px);box-shadow:0 14px 32px rgba(4,87,173,.2)}
.rozet-kart svg{width:38px;height:38px;color:var(--lacivert);margin:0 auto 1rem;display:block;stroke-width:1.5}
.rozet-kart h3{font-size:1rem;margin:0 0 .4rem}
.rozet-kart p{font-size:.87rem;color:var(--soluk);margin:0;line-height:1.55}

/* ---- kart ---- */
/* ✅ 06.09.2026 — Emir: blog kartları da Hakkımızda'daki kartlar gibi
   ışımalı olsun, üstüne gelince büyüsün. */
.kart{position:relative;background:#fff;border:1px solid var(--cizgi);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 6px 22px rgba(4,87,173,.14);transition:transform .2s ease,box-shadow .2s ease,scale .2s ease}
.kart:hover{transform:translateY(-5px);box-shadow:0 14px 32px rgba(4,87,173,.26);scale:1.02}
.kart-ikonlu{padding:1.4rem 1.3rem 1.2rem}
.kart-ikon-buyuk{width:50px;height:50px;border-radius:12px;background:linear-gradient(135deg,var(--turuncu),var(--sari));color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:.8rem}
.kart-ikon-buyuk svg{width:26px;height:26px}
/* ✅ 06.09.2026 — kök neden bulundu: img'in HTML height="400" özniteliği,
   CSS'te height AÇIKÇA "auto" yapılmadığı sürece aspect-ratio'yu geçersiz
   kılıyordu (her iki boyut da "definite" sayılınca aspect-ratio hesaba
   katılmıyor) — kart resimleri hep dikdörtgen kalmasının GERÇEK sebebi
   buydu. height:auto eklenince artık gerçekten kare oluyor (Emir'in
   kart1.png'de kırmızı kutuyla işaretlediği ölçü). */
.kart-gorsel img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.kart-ic{padding:1.2rem 1.3rem 1.3rem;flex:1;display:flex;flex-direction:column}
.kart-ikonlu .kart-ic{padding:0}
.kart-ust{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;font-weight:800;letter-spacing:.05em;color:var(--turuncu);margin-bottom:.4rem}
.kart-tarih{color:var(--soluk);font-weight:600;letter-spacing:0}
.kart h3{font-size:1.05rem}
.kart p{font-size:.9rem;color:var(--soluk);flex:1}
.kart-bag{display:inline-flex;align-items:center;gap:.3rem;font-weight:700;color:var(--lacivert);font-size:.88rem;margin-top:auto;text-decoration:none}
.kart-bag svg{width:15px;height:15px}
.kart-ort{position:absolute;inset:0}

/* ---- bölge/il listesi ---- */
.bolge-liste{display:flex;flex-wrap:wrap;gap:.6rem}
.bolge-liste a{display:flex;flex-direction:column;background:var(--kum);border-radius:10px;padding:.55rem .9rem;text-decoration:none;color:var(--yazi);font-weight:700;font-size:.88rem;min-width:110px}
.bolge-liste a small{font-weight:500;color:var(--soluk);font-size:.75rem}
.bolge-liste a:hover{background:#ffe9d1}
.bolge-tumu{background:var(--lacivert)!important;color:#fff!important}
.bolge-tumu small{color:#cfd9ee!important}

/* ---- rozetler ---- */
.rozet-satir{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.rozet{background:#e7f6ee;color:#0f7a4c;font-weight:700;font-size:.8rem;padding:.3rem .7rem;border-radius:999px}
.rozet-kirmizi{background:#fdeceb;color:#b23227}

/* ---- içerik + yan panel ---- */
.icerik{display:grid;grid-template-columns:1fr 300px;gap:2.2rem;align-items:start}
@media (max-width:900px){.icerik{grid-template-columns:1fr}}
.metin{min-width:0}
.metin-genis{max-width:760px}
.metin p{color:var(--yazi)}
.liste-noktali{margin:0;padding-left:1.2rem}
.liste-noktali li{margin-bottom:.35rem}
.yan{min-width:0}
.yan-kutu{background:var(--kum);border-radius:var(--radius);padding:1.2rem;margin-bottom:1rem}
.yan-vurgu{background:#fff4e6;border:1px solid #ffdcaa}
/* WhatsApp formu için — yeşil submit butonuyla uyumlu, açık yeşil zemin. */
.yan-wa{background:#eafbf0;border:1px solid #bfeacf}
.yan-kutu h3{font-size:1rem}
.yan-kutu p{font-size:.9rem;color:var(--soluk)}
.yan-kutu .btn{width:100%;justify-content:center;margin-top:.5rem}
.yan-kutu ul{margin:0;padding-left:1.1rem;font-size:.9rem}
/* ✅ 08.09.2026 — Emir: "Ürünlerimiz"/"Diğer Yazılarımız"/"Diğer
   Ürünlerimiz" listelerindeki linklerin altı çizili durmasın dedi —
   hover'da geri gelsin ki tıklanabilir olduğu yine belli olsun. */
.yan-kutu ul a{text-decoration:none}
.yan-kutu ul a:hover{text-decoration:underline}

/* ---- blog yan panel: "Ürünlerimiz" / "Diğer Yazılarımız" başlık-butonu
   (08.09.2026, Emir: gösterişli+tıklanabilir ama "çok sarı olmasın,
   hafiften olsun" — bu yüzden header'ın koyu sarısı değil, sitenin sarı
   tonunun hafif/saydam bir hali kullanıldı). ---- */
.yan-baslik-h3{margin:0 0 .8rem;font-size:1rem}
.yan-baslik-buton{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  background:rgba(255,207,77,.22);border:1px solid rgba(255,207,77,.6);color:var(--lacivert);
  font-weight:800;font-size:.95rem;padding:.65rem .9rem;border-radius:10px;text-decoration:none;
  transition:background .15s,color .15s,border-color .15s}
.yan-baslik-buton:hover{background:var(--lacivert);border-color:var(--lacivert);color:#fff}
.yan-baslik-buton svg{width:16px;height:16px;flex:none;transition:transform .15s}
.yan-baslik-buton:hover svg{transform:translateX(3px)}

/* ---- ürün sayfaları: sabit (sticky) satın alma kutusu + öne çıkan
   "hemen satın al" rengi (07.09.2026, Emir: kart ızgarası + kutu aşağı
   inince takip etsin + buton rengi farklılaşsın istekleri) ---- */
/* ⚠ 08.09.2026 — Emir: sadece "Bu ürünü satın alın" kutusu takip etsin,
   üstündeki "Ürünlerimiz" kategori listesi ve "diğer ürünlerimiz" listesi
   normal akışta kalıp bizimle kaymasın — bu yüzden .yan-sabit artık aside'a
   değil, doğrudan o kutuya (.yan-kutu.yan-vurgu) uygulanıyor.
   ⚠ Ardından Emir "artık hiç takip etmiyor" dedi — sebebi: .icerik'te
   align-items:start olduğu için aside'ın kendi kutusu SADECE kendi
   içeriği (kategoriler+diğer+satın-al) kadar kısaydı; sticky kutunun
   "kayabileceği" bir üst kapsayıcı (containing block) yüksekliği yoktu,
   o kısa aside bitince kutu da hemen akışa geri dönüyordu. .yan-govde'ye
   align-self:stretch vererek aside'ı makale sütunuyla AYNI yükseklikte
   (görünmez, arka planı olmayan) bir kutuya genişletiyoruz — böylece
   satın-al kutusu makalenin sonuna kadar bizi takip edebiliyor. */
.yan-govde{align-self:stretch}
.yan-sabit{position:sticky;top:5.5rem}
@media (max-width:900px){.yan-sabit{position:static}}
.yan-kategoriler ul,.yan-diger ul{padding-left:1.2rem}
.yan-kategoriler li,.yan-diger li{margin-bottom:.4rem}
.izgara-urun{margin-top:1.4rem}

/* ---- blog yazısı içi "İlgili Ürünler" bloğu (07.09.2026, Emir: makale
   arasına ürün kategorisi başlığı + 3 ürün kartı) — dikkat çeksin diye
   kum zeminli, dolgulu bir kutu içine alındı; başlık kategoriye tıklayınca
   ürünler sayfasına gider. */
.bolum-urun-onerisi{background:var(--kum);border-radius:var(--radius);padding:1.4rem 1.5rem 1.6rem;margin:1.8rem 0}
.bolum-urun-onerisi h2{margin-top:0;font-size:1.25rem}
.bolum-urun-onerisi h2 a{color:var(--lacivert);text-decoration:none}
.bolum-urun-onerisi h2 a:hover{color:var(--turuncu);text-decoration:underline}
.bolum-urun-onerisi > p{color:var(--soluk);font-size:.92rem;margin-top:-.3rem}
/* ⚠ 08.09.2026 — Emir: "3 kart yan yana olacak, 2+1 kayması olmasın" —
   makale sütunu dar olduğu için genel .izgara'nın auto-fill'i bazı
   genişliklerde 3'ü sığdıramayıp 3.'yü alt satıra düşürüyordu; burada
   SABİT 3 sütun zorlanıyor, sadece gerçekten dar (mobil) ekranda 1
   sütuna iniyor. */
.bolum-urun-onerisi .izgara-urun{margin-top:1rem;grid-template-columns:repeat(3,1fr)}
@media (max-width:640px){.bolum-urun-onerisi .izgara-urun{grid-template-columns:1fr}}
/* ✅ 07.09.2026 — Emir: sağdaki sabit (sticky) kutu da hero'daki AYNI
   gezegensolar butonlarını (miktar + Sepete Ekle + Hemen Al + WhatsApp)
   kullansın. ⚠ Emir'in düzeltmesi: "boyut" derken YÜKSEKLİKTEN
   bahsediyordu (genişlik sorun değildi) — bu yüzden buradaki butonlar
   hero'dakiyle TAM AYNI yükseklikte (58px), küçültülmedi; kutu dar (300px)
   olduğu için sadece dar sütuna sığsın diye padding biraz azaltıldı,
   yükseklik/font-size ASLA farklılaşmıyor. */
.yan-kutu .gs-satir{margin-top:.7rem}
.yan-kutu .gs-btn{margin-top:.7rem;padding:0 .6rem}
.yan-kutu .gs-satir .gs-btn{margin-top:0}

/* ---- İletişim: hızlı WhatsApp formu (06.09.2026) ---- */
.wa-form-kutu{display:flex;flex-direction:column}
.wa-form{display:flex;flex-direction:column;gap:.8rem;margin-top:.6rem}
.wa-form label{display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;font-weight:700;color:var(--yazi)}
.wa-form input,.wa-form select,.wa-form textarea{font:inherit;font-size:.92rem;font-weight:400;padding:.6rem .75rem;border:1px solid var(--cizgi);border-radius:10px;background:#fff;color:var(--yazi);resize:vertical}
.wa-form input:focus,.wa-form select:focus,.wa-form textarea:focus{outline:2px solid #0457ad;outline-offset:1px}
.wa-form button{margin-top:.2rem;width:100%;justify-content:center;border:0;cursor:pointer}

/* ---- SSS ---- */
.sss{margin-top:.6rem}
.sss details{border-bottom:1px solid var(--cizgi);padding:.75rem 0}
.sss summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.sss summary::-webkit-details-marker{display:none}
.sss summary::after{content:"+";font-size:1.3rem;color:var(--turuncu);flex:none}
.sss details[open] summary::after{content:"−"}
.sss-cevap{padding-top:.5rem}
.sss-cevap p{color:var(--soluk);margin:0}

/* ---- gövde içi görsel ---- */
.govde-foto{margin:1.2rem 0;border-radius:var(--radius);overflow:hidden}
.govde-foto img{width:100%;height:auto;display:block}
.govde-foto-kapak{margin-top:1rem;margin-bottom:1.4rem}
.govde-foto-kapak img{aspect-ratio:16/9;object-fit:cover;height:auto}
.govde-foto figcaption{font-size:.8rem;color:var(--soluk);padding:.5rem .1rem 0}

/* ---- not kutusu ---- */
.not{background:#eef4ff;border-left:4px solid var(--lacivert);border-radius:8px;padding:.9rem 1.1rem;margin:1.2rem 0}
.not p{margin:0;font-size:.92rem}

/* ---- tablo ---- */
.tablo-kutu{overflow-x:auto;margin:1.2rem 0}
.tablo-kutu table{border-collapse:collapse;width:100%;min-width:420px}
.tablo-kutu caption{text-align:left;font-weight:800;margin-bottom:.5rem}
.tablo-kutu th,.tablo-kutu td{border:1px solid var(--cizgi);padding:.55rem .7rem;font-size:.9rem;text-align:left}
.tablo-kutu th{background:var(--kum)}

/* ---- CTA ---- */
.cta{background:linear-gradient(120deg,var(--turuncu),var(--sari));color:#241200}
.cta .sarmal{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:2rem 1.1rem;flex-wrap:wrap}
.cta h2{color:#241200;margin-bottom:.25rem;font-size:1.4rem}
.cta p{margin:0;color:#3d2400}
.cta .btn-ana{background:var(--lacivert);color:#fff}
.cta .btn-yesil{background:var(--yesil)}
.cta .btn-cizgi{border-color:#241200;color:#241200}

/* ---- footer ---- */
.alt{background:var(--lacivert);color:#c6d1e6;padding-top:2.6rem}
.alt h4{color:#fff;font-size:.95rem;margin:0 0 .7rem}
.alt-izgara{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:1.6rem;padding-bottom:1.8rem;border-bottom:1px solid rgba(255,255,255,.12)}
@media (max-width:820px){.alt-izgara{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.alt-izgara{grid-template-columns:1fr}}
.alt ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.45rem;font-size:.88rem}
.alt a{text-decoration:none;color:#c6d1e6}
.alt a:hover{color:var(--sari)}
.alt-marka p{color:#a9b8d3;font-size:.88rem;max-width:320px}
.alt-son{padding:1.1rem 0;font-size:.82rem;color:#8fa0c2;text-align:center}
.alt-son a{color:#8fa0c2;text-decoration:underline}

/* ---- mobil eylem çubuğu + yüzen buton ---- */
.eylem{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--cizgi);display:none;z-index:60;box-shadow:0 -6px 16px rgba(0,0,0,.06)}
.eylem a{flex:1;display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.55rem 0;text-decoration:none;color:var(--lacivert);font-size:.72rem;font-weight:700}
.eylem svg{width:20px;height:20px}
.wa-yuzen{position:fixed;right:1.1rem;bottom:1.1rem;width:56px;height:56px;border-radius:50%;background:var(--yesil);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--golge);z-index:60}
.wa-yuzen svg{width:28px;height:28px}

/* ---- 404 ---- */
.dortyuz{padding:5rem 0;text-align:center}

/* ---- sayfalama (06.09.2026 — Bilgi Merkezi, 16/sayfa) ---- */
.sayfalama{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem;margin-top:2.2rem}
.sayfalama a{display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 .3rem;border-radius:10px;background:var(--kum);color:var(--yazi);text-decoration:none;font-weight:700;font-size:.92rem;transition:background .15s,color .15s}
.sayfalama a:hover{background:#e4ecf7}
.sayfalama a.aktif{background:#0457ad;color:#fff}
.sayfalama-ok{border-radius:50%;color:var(--yazi)}
.sayfalama-ok svg{width:17px;height:17px}
.sayfalama-ok-sol svg{transform:rotate(180deg)}

/* ---- Bilgi Merkezi kategori çipleri (06.09.2026) ---- */
.kategori-cipleri{display:flex;flex-wrap:wrap;gap:.55rem;margin:1.4rem 0 .4rem}
/* ✅ 06.09.2026 — Emir: "köşeler çok yuvarlak, biraz daha kutu gibi olsun,
   az bir şey yuvarlak kalsın" — tam yuvarlak (999px) haptan 8px'e indirildi. */
.kategori-cipleri a{display:inline-flex;align-items:center;padding:.5rem 1rem;border-radius:8px;background:var(--kum);color:var(--yazi);text-decoration:none;font-weight:700;font-size:.86rem;border:1.5px solid transparent;transition:background .15s,border-color .15s}
.kategori-cipleri a:hover{background:#e4ecf7}
.kategori-cipleri a.aktif{background:#fff;border-color:#0457ad;color:#0457ad}

/* ---- müşteri yorumu (06.09.2026 — bu sitenin kendi renk/değişken diline
   uyarlandı) ---- */
.yorum-ozet{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:1.6rem;text-decoration:none;color:inherit}
a.yorum-ozet:hover .yorum-ozet-deger{text-decoration:underline}
.yorum-ozet-deger{font-size:1.9rem;font-weight:800;color:var(--yazi);letter-spacing:-.02em}
.yorum-ozet .yorum-yildiz svg{width:20px;height:20px}
.yorum-ozet-sayi{color:var(--soluk);font-size:.95rem}
.yorum-yildiz{display:flex;gap:.15rem}
.yorum-yildiz svg{width:19px;height:19px}
.yorum-yildiz .yildiz-dolu{color:#FFC93C}
.yorum-yildiz .yildiz-bos{color:var(--cizgi)}

.yorum-alinti{position:relative;margin:0;background:var(--kum);border-radius:14px;padding:1.5rem 1.4rem 1.3rem;display:flex;flex-direction:column;gap:.6rem;box-shadow:var(--golge)}
.yorum-alinti blockquote{margin:0;font-size:.95rem;line-height:1.6;color:var(--yazi)}
.yorum-alinti figcaption{display:flex;flex-direction:column;gap:.1rem;font-size:.82rem}
.yorum-alinti figcaption span{color:var(--soluk)}
.yorum-yanit{margin-top:.2rem;padding:.7rem .9rem;background:#fff;border-left:3px solid #0457ad;border-radius:8px;font-size:.85rem}
.yorum-yanit strong{display:block;color:#0457ad;font-size:.78rem;margin-bottom:.2rem}
.yorum-yanit p{margin:0;color:var(--soluk)}

.yorum-duvar{margin-top:1.8rem;columns:3 300px;column-gap:2.2rem}
.yorum-duvar .yorum-alinti{break-inside:avoid;margin-bottom:1.9rem}

.yorum-kayan-bolum{padding-bottom:clamp(2.2rem,4vw,3.2rem)}
.yorum-kayan-bas{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 1.6rem}
.yorum-kayan-bas .yorum-ozet{margin-top:0}
.yorum-kayan-sarici{display:flex;flex-wrap:nowrap;align-items:center;gap:.8rem;margin-top:1.6rem}
.yorum-kayan{flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x proximity;cursor:grab;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent)}
.yorum-kayan::-webkit-scrollbar{display:none}
.yorum-kayan.surukleniyor{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}
.yorum-kayan-iz{display:flex;flex-wrap:nowrap;gap:1.6rem}
.yorum-kayan .yorum-alinti{flex:0 0 300px;scroll-snap-align:start;padding:1.2rem 1.2rem 1.05rem;-webkit-user-select:none;user-select:none}
.yorum-kayan .yorum-alinti blockquote{font-size:.9rem;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.yorum-kayan-ok{flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--cizgi);color:var(--yazi);box-shadow:var(--golge);cursor:pointer;transition:background .15s,opacity .15s}
.yorum-kayan-ok:hover{background:var(--kum)}
.yorum-kayan-ok:disabled{opacity:.35;cursor:default;box-shadow:none}
.yorum-kayan-ok svg{width:19px;height:19px}
.yorum-kayan-ok-sol svg{transform:rotate(180deg)}
@media(max-width:640px){.yorum-kayan-ok{display:none}}

.yorum-uclu-blok{margin:2.2rem 0}
.yorum-uclu-blok h3{margin-bottom:1.1rem}
.yorum-uclu{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.yorum-daha-link{display:inline-flex;margin-top:1.2rem}
.yorum-daha{display:flex;margin:1.8rem auto 0}

.yorum-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1.3rem;background:var(--lacivert);color:#fff;border-radius:var(--radius);padding:1.7rem 1.9rem;margin-top:1.3rem}
.yorum-cta-ikon{width:52px;height:52px;border-radius:50%;background:rgba(255,201,60,.16);color:#FFC93C;display:grid;place-items:center;flex:none}
.yorum-cta-ikon svg{width:26px;height:26px}
.yorum-cta-metin{flex:1 1 260px;min-width:0}
.yorum-cta-metin h3{margin:0 0 .3rem;color:#fff;font-size:1.08rem}
.yorum-cta-metin p{margin:0;color:#c9d9e2;font-size:.92rem}
.yorum-cta .btn{flex:none}

/* ---- mobil ---- */
@media (max-width:860px){
  .menu-ac{display:block}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;padding:1rem 1.1rem;border-bottom:1px solid var(--cizgi);gap:.2rem;margin-left:0}
  .menu.acik{display:flex}
  .menu a{height:auto;padding:.6rem .5rem}
  .tepe-butonlar{display:none}
  .ust-serit{display:none}
  .eylem{display:flex}
  body{padding-bottom:64px}
  .wa-yuzen{bottom:76px}
}