/* =========================================================================
   sakaryamadeniyaglar.com — EMPA Petrol Ürünleri

   🔴 PALET UYDURULMADI, eski sitenin `_css/style.php` dosyasından
   örneklendi (ölçüldü 2026-10-08): kehribar #edb15a, koyu kahve #3d2c1a,
   siyah, kırık beyaz #f3f2f2.
   🔴 Kehribar beyaz üzerinde ~1.9 kontrast veriyor — DOLGU ve VURGU rengi,
   gövde yazısı rengi DEĞİL. Gövde #241c16 üzerinde okunuyor.
   ========================================================================= */

:root {
  --kehribar: #edb15a;
  --kehribar-koyu: #c98c33;
  --kahve: #3d2c1a;
  --murekkep: #241c16;
  --duman: #6b6056;
  --kagit: #ffffff;
  --krem: #faf7f2;
  --cizgi: #e6ded2;
  --koyu: #1d1611;
  --yuvarlak: 12px;
  --yuvarlak-s: 9px;
  --olcu: 1180px;
  --golge: 0 1px 2px rgba(36, 28, 22, .06), 0 6px 18px rgba(36, 28, 22, .05);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--krem);
  color: var(--murekkep);
  font: 400 17px/1.65 "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--kahve); }

h1, h2, h3 { line-height: 1.2; margin: 0 0 12px; letter-spacing: -.01em; }
/* 🔴 YAZI AKIŞKAN — kırılma noktasında zıplayan başlık kaba durur. */
h1 { font-size: clamp(28px, 4.2vw, 44px); }
h2 { font-size: clamp(22px, 2.8vw, 31px); }
h3 { font-size: 17px; }

p { margin: 0 0 14px; }

/* 🔴 SABİT GENİŞLİK YOK. Yan boşluk 16 px'in altına düşmez. */
.kapsa { width: min(100% - 32px, var(--olcu)); margin-inline: auto; }
.kapsa.dar { max-width: 760px; }

.ustyazi {
  margin: 0 0 6px; font-size: 13px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--kehribar-koyu);
}

.gorunmez {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.atla {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--koyu); color: #fff; padding: 10px 16px;
}
.atla:focus { left: 0; }

/* ------------------------------------------------------------------ düğme */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  /* 🔴 44 px dokunma hedefi — mobilde en çok basılan yer. */
  min-height: 44px; padding: 11px 20px;
  border: 1px solid transparent; border-radius: var(--yuvarlak-s);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}
.dugme:hover { transform: translateY(-1px); }
.dugme-ana { background: var(--koyu); color: #fff; }
.dugme-ana:hover { background: #000; }
.dugme-hayalet { background: transparent; color: var(--kahve); border-color: var(--cizgi); }
.dugme-hayalet:hover { background: #fff; }
/*
 * 🔴 İKON BEYAZ — BU YÜZDEN YEŞİL KOYULDU. Kullanıcı 2026-10-08: "ikon
 * beyaz olabilir". WhatsApp'ın neon yeşili (#25d366) üzerinde beyazın
 * kontrastı **2.02**; metin için 4.5, ikon gibi metin dışı öge için 3.0
 * eşiği var — yani beyaz ikon o zeminde İKİSİNİ DE geçemiyordu. Rengi
 * olduğu gibi bırakıp ikonu beyaz yapmak isteği karşılamış ama okunurluğu
 * bozmuş olurdu.
 *
 * Yeşil koyultuldu (#0f7a3d): beyaz artık **5.42** veriyor, hem yazı hem
 * ikon için rahat geçiyor. Tanınırlık ikonun ŞEKLİNDE duruyor, tonunda
 * değil; üstelik bu ton sitenin kehribar/kahve paletiyle de kavga etmiyor.
 */
.dugme-wa { background: #0f7a3d; color: #fff; border-color: transparent; }
.dugme-wa:hover { background: #0b6231; }
.dugme-wa svg { width: 17px; height: 17px; fill: currentColor; flex: none; }
.dugme-genis { width: 100%; }

/* ---------------------------------------------------------------- WhatsApp */
/*
 * 🔴 CIFT SINIF — YAZIM HATASI DEGIL. `ortak/whatsapp.php` her baglantiyi
 * IKI kez basiyor (`.wa-mobil` + `.wa-masaustu`); hangisinin gorunecegine
 * CSS karar verir. Tek sinifla yazilirsa ozgullugu (0,1,0) olur ve ayni
 * ozgullukteki `.dugme { display:inline-flex }` kurali — sonra geldigi icin —
 * onu yener: ikon IKI KEZ cikar.
 *
 * Bu hata bu kitte DORT kez tekrarlandi (proweb CANLIDA, sakaryatoptanmedikal,
 * yaylalarhafriyat, ve burada). Burada kural tamamen YAZILMAMISTI: olculdu
 * 2026-10-08, 4 baglantinin 4'u birden gorunuyordu. Cift sinif (0,2,0) yapar.
 *
 * Dogrulama (her sayfada, sonuc tam YARISI olmali):
 *   [...document.querySelectorAll('a[class*="wa-"]')]
 *     .filter(a=>getComputedStyle(a).display!=='none').length
 */
.wa-mobil.wa-mobil { display: inline-flex; }
.wa-masaustu.wa-masaustu { display: none; }
@media (min-width: 601px) {
  .wa-mobil.wa-mobil { display: none; }
  .wa-masaustu.wa-masaustu { display: inline-flex; }
}
/* Genis WhatsApp dugmesi (iletisim yan sutunu) blok gibi davranmali. */
.dugme-genis.wa-mobil.wa-mobil,
.dugme-genis.wa-masaustu.wa-masaustu { display: flex; }
@media (min-width: 601px) { .dugme-genis.wa-mobil.wa-mobil { display: none; } }
@media (max-width: 600px) { .dugme-genis.wa-masaustu.wa-masaustu { display: none; } }

/* ------------------------------------------------------------------- üst */
.ust { background: var(--kagit); border-bottom: 1px solid var(--cizgi); }
.ust-ic { display: flex; align-items: center; gap: 18px; padding: 12px 0; }
.marka img { width: 168px; height: auto; }

.menu-dugme {
  display: none; margin-left: auto; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  background: none; border: 1px solid var(--cizgi); border-radius: var(--yuvarlak-s);
  color: var(--murekkep); cursor: pointer;
}
.menu-dugme svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }

.gezinti { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.gezinti > a { text-decoration: none; font-weight: 600; font-size: 15.5px; color: var(--murekkep); }
.gezinti > a:hover, .gezinti > a[aria-current] { color: var(--kehribar-koyu); }
.ust-eylem { display: flex; gap: 8px; }

@media (max-width: 1040px) {
  .menu-dugme { display: inline-flex; }
  .gezinti {
    display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 9;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--kagit); border-bottom: 1px solid var(--cizgi);
    padding: 8px 16px 16px;
  }
  .ust { position: relative; }
  .gezinti.acik { display: flex; }
  /* 🔴 MENÜ BAĞLANTISI DOKUNMA HEDEFİ 44px — altbilgi dersinin aynısı. */
  .gezinti > a { display: flex; align-items: center; min-height: 44px; }
  .ust-eylem { margin-top: 10px; flex-wrap: wrap; }
  .ust-eylem .dugme { flex: 1 1 160px; }
}

/* --------------------------------------------------------------- seçici */
/* Bu sitenin iskeleti. Gerekçesi site.php'de: malzeme teknik, fotoğraf
   tavanı 312 px, insan "aracıma hangisi" diye arıyor. */
.secici { background: var(--koyu); color: #f6f1e9; padding: clamp(34px, 5vw, 62px) 0; }
.secici h1 { color: #fff; }
.secici .ustyazi { color: var(--kehribar); }
.secici-giris { max-width: 62ch; color: #d9cfc1; }

.suzgec { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
.suzgec-derece { margin-top: 10px; }

.cip {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 9px 15px;
  background: rgba(255, 255, 255, .07); color: #f6f1e9;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px;
  font: inherit; font-size: 15px; cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.cip:hover { background: rgba(255, 255, 255, .13); }
.cip.secili {
  background: var(--kehribar); color: #2a1d0c;
  border-color: var(--kehribar); font-weight: 700;
}
.cip-sayi { font-size: 12.5px; opacity: .72; }
.cip.secili .cip-sayi { opacity: .68; }

.suzgec-sonuc { margin: 16px 0 0; font-size: 14.5px; color: #c9bdab; min-height: 1.2em; }

/* -------------------------------------------------------------- bölümler */
.bolum { padding: clamp(32px, 4.6vw, 60px) 0; }
.bolum-koyu { background: var(--kahve); color: #f6f1e9; }
.bolum-koyu h2 { color: #fff; }
.bolum-koyu .ustyazi { color: var(--kehribar); }
.bolum-giris { max-width: 66ch; }
.bolum-koyu .bolum-giris { color: #e0d6c7; }

.sayfa-bas { margin-bottom: 22px; }
.ikili { display: grid; gap: clamp(22px, 3.6vw, 44px); grid-template-columns: 1.55fr 1fr; align-items: start; }
@media (max-width: 860px) { .ikili { grid-template-columns: 1fr; } }

.giris { font-size: 18.5px; }

.kutu {
  background: var(--kagit); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); padding: 20px 22px; box-shadow: var(--golge);
}
.kutu h2, .kutu h3 { font-size: 18px; margin-top: 0; }
.kutu-not { font-size: 14px; color: var(--duman); margin-bottom: 0; }

.duz-liste { list-style: none; margin: 0 0 14px; padding: 0; }
.duz-liste li { padding: 7px 0; border-bottom: 1px solid var(--cizgi); }
.duz-liste li:last-child { border-bottom: 0; }

.kirilim-liste { columns: 2; column-gap: 28px; margin: 0 0 16px; padding-left: 18px; }
@media (max-width: 620px) { .kirilim-liste { columns: 1; } }

.kirinti { font-size: 14px; color: var(--duman); margin-bottom: 14px; }
.kirinti a { color: var(--duman); }
.kirinti span { margin: 0 4px; }

.bos { color: var(--duman); }

/* ---------------------------------------------------------------- ürünler */
/* 🔴 IZGARA KENDİ SARAR — sütun sayısını elle saymak her yeni ekran
   boyutunda bozulur. */
.urun-izgara {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
}

.urun {
  display: flex; flex-direction: column;
  background: var(--kagit); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); overflow: hidden; box-shadow: var(--golge);
  transition: transform .2s ease, box-shadow .2s ease;
}
.urun:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(36, 28, 22, .1); }
/* 🔴 GÖRSELE ORAN VERİLDİ. Yoksa yüklenirken sayfa zıplıyor (CLS).
   `contain` çünkü kareler beyaz zeminde kesilmiş ürün — `cover` bidonu
   kırpar. */
.urun-foto { background: #fff; aspect-ratio: 4 / 3; }
.urun-foto img { width: 100%; height: 100%; object-fit: contain; padding: 9%; }

.urun-ic { padding: 12px 14px 15px; border-top: 1px solid var(--cizgi); }
.urun-marka {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--kehribar-koyu); margin-bottom: 3px;
}
.urun-ic h3 { margin: 0 0 8px; font-size: 15.5px; line-height: 1.35; }

.rozet {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: #fdf3e2; border: 1px solid #f3dcb4; color: #7a5312;
  font-size: 13px; font-weight: 700;
}
.rozet-bayi { background: var(--kehribar); border-color: var(--kehribar-koyu); color: #2a1d0c; }

/* --------------------------------------------------------------- markalar */
.marka-izgara {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.marka-kart {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  padding: 18px 14px; text-decoration: none;
  background: var(--kagit); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); color: var(--murekkep);
  transition: transform .2s ease, box-shadow .2s ease;
}
.marka-kart:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 0, 0, .14); }
/* 🔴 LOGO BEYAZ PLAKAYA OTURUYOR. Koyu bölümde logolar kayboluyordu —
   Özyıldırım'da alınan ders; marka logoları beyaz zemin için çizilmiş. */
.marka-logo { display: grid; place-items: center; width: 100%; height: 84px; background: #fff; }
/*
 * 🔴 YÜZDE `max-height` BU KUTUDA ÇALIŞMIYOR — kesin ölçü veriliyor.
 * Ölçüldü 2026-10-08: kutu 84 px, görsel 174.9 px, yani iki katından fazla
 * taşıyordu ve marka adının üstüne biniyordu. Zinciri şu: HTML'deki
 * width/height öznitelikleri (219x198) tarayıcıya `aspect-ratio` veriyor,
 * genel `img { max-width:100% }` kuralı genişliği kabın 193 px'ine oturtuyor,
 * `height:auto` orandan 174.9 px üretiyor — ve `max-height:100%` bunu
 * KIRPMIYOR (yüzde, ızgara gözünün yüksekliğine güvenilir biçimde çözülmüyor).
 *
 * Çözüm yüzdeyi düzeltmek değil, yüzdeye hiç güvenmemek: görsele PİKSEL
 * yüksekliği verilir ve `object-fit: contain` oranı korur. Böylece kaynak
 * görselin oranı ne olursa olsun kutudan taşamaz.
 */
.marka-logo img { width: 100%; height: 64px; object-fit: contain; }
.marka-ad { font-weight: 700; font-size: 15px; margin-top: 8px; }
.marka-not { font-size: 13px; color: var(--duman); }
.marka-bayi {
  margin-top: 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--kehribar-koyu);
}

.marka-bas { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.marka-bas img { width: 110px; height: auto; background: #fff; border: 1px solid var(--cizgi); border-radius: var(--yuvarlak-s); }

/* ------------------------------------------------------------------ form */
.form { max-width: 640px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: start; }
.form > * { grid-column: 1 / -1; }
.form .alan { grid-column: auto; }
.form .alan-tam { grid-column: 1 / -1; }
@media (max-width: 620px) { .form { grid-template-columns: 1fr; } .form .alan { grid-column: 1 / -1; } }

.alan { display: grid; gap: 5px; margin-bottom: 13px; }
.alan label { display: flex; align-items: baseline; gap: 6px; font-weight: 600; font-size: 14.5px; }
.zorunlu { color: #c0392b; font-weight: 700; }
.alan input, .alan textarea {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 16px;
  border: 1px solid var(--cizgi); border-radius: var(--yuvarlak-s);
  background: #fff; color: var(--murekkep); min-height: 44px;
}
.alan input:focus, .alan textarea:focus { outline: 2px solid var(--kehribar-koyu); outline-offset: 1px; }

.uyari { padding: 12px 15px; border-radius: var(--yuvarlak-s); margin-bottom: 16px; font-size: 15px; }
.uyari-iyi { background: #eefaf0; border: 1px solid #bfe6c8; color: #1d5b2c; }
.uyari-kotu { background: #fff7ed; border: 1px solid #fed7aa; color: #7c2d12; }
.uyari p { margin: 0; }

/* ------------------------------------------------------------------ bant */
.bant { background: var(--kehribar); color: #2a1d0c; padding: clamp(26px, 3.4vw, 42px) 0; }
.bant h2 { margin-bottom: 6px; }
.bant p { margin: 0; }
.bant-ic { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.bant-dugmeler { display: flex; gap: 10px; flex-wrap: wrap; }

/* ------------------------------------------------------------------- alt */
.alt { background: var(--koyu); color: #d9cfc1; padding: 40px 0 0; margin-top: 10px; }
.alt-ic { display: grid; gap: 28px; grid-template-columns: 1.4fr 1fr 1fr; }
@media (max-width: 860px) { .alt-ic { grid-template-columns: 1fr; } }
.alt h2 { font-size: 16px; color: #fff; }
.alt a { color: #e8dfd2; text-decoration: none; }
.alt a:hover { color: var(--kehribar); }
.alt-logo { width: 150px; background: #fff; border-radius: var(--yuvarlak-s); padding: 6px; }
.alt-not { margin: 12px 0 6px; font-size: 14.5px; }
.alt-bayi { font-size: 13.5px; color: #bdb1a1; }
.alt-adres { font-size: 13.5px; color: #bdb1a1; }
.alt-liste { list-style: none; margin: 0 0 10px; padding: 0; }
.alt-liste li { padding: 3px 0; }

/* 🔴 ALTBİLGİ DOKUNMA HEDEFİ — iki sitede düştü, kural oldu.
   Altbilgi "sadece liste" değil: içinde telefon ve e-posta var. */
@media (max-width: 860px) {
  .alt-liste { margin-bottom: 4px; }
  .alt-liste a { display: flex; align-items: center; min-height: 44px; }
}

.alt-serit {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 30px; padding: 14px 0 18px; border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 13.5px;
}
.alt-serit p { margin: 0; }

/* -------------------------------------------------------------- hareket */
/* Belirme CSS ile, JS'e bağlanmıyor (AGENTS.md: "görünürlük betiğe
   bağlanmaz" — o desen dört kez bozuldu ve sayfa bembeyaz kaldı). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .urun, .marka-kart {
      animation: belir linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
    @keyframes belir {
      from { opacity: .35; transform: translateY(10px); }
      to   { opacity: 1;   transform: none; }
    }
  }
}

/* =========================================================================
   HAREKET KATMANI
   Kullanıcı kuralı (2026-10-01, Yaylalar'dan sonra): hareket deseni tüm
   özel sitelerin standardı, sorulmadan uygulanır. Burada ilk yazımda
   atlanmıştı — kullanıcı "kalite düşük, hareketlilik yok" dedi (2026-10-08).

   🔴 GÖRÜNÜRLÜK BETİĞE BAĞLANMAZ. Belirme tamamen CSS: `animation-timeline:
   view()`. Tarayıcı desteklemiyorsa `@supports` bloğu hiç çalışmaz ve
   içerik olduğu gibi GÖRÜNÜR kalır. Bu desen bu repoda dört kez `opacity:0`
   + JS ile kurulup dört kez sayfayı bembeyaz bıraktı.
   ========================================================================= */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bel {
      animation: bel-gir linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
  }
}
@keyframes bel-gir {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* Kartlarda derinlik — görselde hafif yakınlaşma. */
.urun, .marka-kart { transition: transform .22s ease, box-shadow .22s ease; }
.urun img, .marka-logo img { transition: transform .32s ease; }
.urun:hover img, .marka-kart:hover .marka-logo img { transform: scale(1.045); }

/* ----------------------------------------------------------- logo şeridi */
/*
 * Sonsuz kayan marka şeridi. Liste İKİ KEZ basılır ve CSS -50% kaydırır;
 * dikiş yerinde zıplama olmaz. Fareyle üstüne gelince ya da içine odak
 * girince durur — okumak isteyen durdurabilmeli.
 *
 * 🔴 ŞERİTTE `loading="lazy"` YOK. Kareler ekranın dışında başlıyor;
 * lazy olsalardı hiç yüklenmez, şerit boş kayardı.
 */
.serit { overflow: hidden; position: relative; padding: 10px 0; }
.serit::before, .serit::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 2; pointer-events: none;
}
.serit::before { left: 0;  background: linear-gradient(90deg, var(--krem), rgba(250, 247, 242, 0)); }
.serit::after  { right: 0; background: linear-gradient(270deg, var(--krem), rgba(250, 247, 242, 0)); }
.bolum-koyu .serit::before { background: linear-gradient(90deg, var(--koyu), rgba(29, 22, 17, 0)); }
.bolum-koyu .serit::after  { background: linear-gradient(270deg, var(--koyu), rgba(29, 22, 17, 0)); }
.serit-ray { display: flex; gap: 14px; width: max-content; animation: serit-kay 38s linear infinite; }
.serit:hover .serit-ray, .serit:focus-within .serit-ray { animation-play-state: paused; }
@keyframes serit-kay { to { transform: translateX(-50%); } }
.serit-goz {
  flex: none; width: 150px; height: 76px; background: #fff;
  border: 1px solid var(--cizgi); border-radius: var(--yuvarlak-s);
  display: grid; place-items: center; padding: 10px;
}
/* Aynı tuzak: piksel yüksekliği + contain, yüzde max-height DEĞİL. */
.serit-goz img { width: 100%; height: 56px; object-fit: contain; }

/* ------------------------------------------------------------- sayaçlar */
.sayac-serit { display: flex; flex-wrap: wrap; gap: 14px; margin: 22px 0 0; padding: 0; list-style: none; }
.sayac-kutu {
  flex: 1 1 150px; background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--yuvarlak);
  padding: 16px 18px;
}
.sayac-kutu b { display: block; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.1; color: var(--kehribar); }
.sayac-kutu span { display: block; font-size: 14px; color: #d8cdc0; margin-top: 4px; }

/* -------------------------------------------- logosuz marka — yazı plakası */
/*
 * 🔴 BAŞKASININ LOGOSU KONMAZ. Üç markanın (Filtreler, Alpet, Exen) logosu
 * elimizde yok; boş plakaya markanın baş harfi yazılır. Elde duran
 * OKSELLO/Petrol Ofisi/elf logoları onların değil.
 */
.marka-logo-yazi {
  font: 700 34px/1 "Segoe UI", system-ui, Arial, sans-serif;
  color: var(--kehribar-koyu); background: var(--krem);
  border-bottom: 1px solid var(--cizgi);
}

/* 🔴 PAZARLIK KONUSU DEĞİL — kullanıcı hareketi kapattıysa hepsi durur. */
@media (prefers-reduced-motion: reduce) {
  .serit-ray { animation: none; transform: none; }
  .urun, .marka-kart, .urun img, .marka-logo img { transition: none; }
  .urun:hover img, .marka-kart:hover .marka-logo img { transform: none; }
  .bel { animation: none; opacity: 1; transform: none; }
}

/* ------------------------------------------- kehribar bantta WhatsApp rengi */
/*
 * 🔴 WHATSAPP YEŞİLİ KEHRİBAR ZEMİNDE PALETİN DIŞINA DÜŞÜYOR. İkisi de
 * doygun ve orta açıklıkta (#25d366 ile #edb15a); yan yana durunca band
 * iki farklı markanın renginden oluşuyormuş gibi görünüyor. Kullanıcı
 * 2026-10-08'de "renkler" dedi ve işaret ettiği yer burasıydı.
 *
 * Yeşil tamamen atılmıyor — tanınırlığı İKONDA kalıyor; düğmenin gövdesi
 * sayfanın kendi rengine dönüyor. Telefon düğmesi koyu (birincil eylem),
 * WhatsApp açık plaka (ikincil) — ikisi artık aynı dili konuşuyor.
 */
.bant .dugme-wa { background: var(--kagit); color: var(--murekkep); border-color: rgba(36, 28, 22, .14); }
.bant .dugme-wa:hover { background: #fff; border-color: rgba(36, 28, 22, .3); }
/* Bantta zemin beyaz plaka; ikon aynı koyu yeşil — iki yerde iki ton olmaz. */
.bant .dugme-wa svg { fill: #0f7a3d; }

/* ------------------------------------------------- bölge sayfası: sorular */
/*
 * 🔴 BAŞLIK OKUNUR GENİŞLİKTE, SORULAR TAM GENİŞLİKTE. Sayfanın tamamı
 * 760 px'e sıkıştırılmıştı; 1280 px ekranda ortada ince bir şerit kalıyor,
 * iki yan boşuna boş duruyordu (kullanıcı 2026-10-08: "boşuna ortada
 * daralmış"). Çözüm her şeyi genişletmek DEĞİL — uzun satır okumayı
 * yoruyor. Giriş metni 62 karakter bandında kalır, kartlar yayılır.
 */
.bolge-bas { max-width: 62ch; }
.bolge-bas .giris { margin-bottom: 0; }
.soru-izgara {
  display: grid; gap: 16px; margin-top: 26px;
  /* 🔴 SÜTUN SAYISI SABİT, `auto-fit` DEĞİL. Dört soru var; auto-fit
     1280 px'te üç sütun üretiyordu ve dördüncü kart ikinci satırda tek
     başına kalıp sağda iki göz boşluk bırakıyordu (AGENTS.md "delikli
     duvar"). İki sütunda 2x2 tam kapanıyor. */
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 760px) { .soru-izgara { grid-template-columns: 1fr; } }
.soru {
  background: var(--kagit); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); padding: 22px 24px; box-shadow: var(--golge);
}
.soru h2 { font-size: clamp(19px, 1.9vw, 23px); margin-bottom: 8px; }
.soru p { margin: 0; }
.soru p + p { margin-top: 10px; }
.bolge-eylem { margin-top: 26px; }