/* Google Fonts'tan BIR KEZ indirildi (latin + latin-ext).
 * Ureten: araclar/font-indir.js — kaynak adres:
 * https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600&family=Inter:wght@400;500;600;700&display=swap
 * Inter degisken font: dort agirlik AYNI dosyayi paylasiyor, agirligi kural
 * belirliyor — dosya bir kez iniyor. */
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/barlow-condensed-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/barlow-condensed-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/inter-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/inter-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* =============================================================================
   sakra.com.tr — tek stil dosyası
   Tasarım yönü: sanayi ciddiyeti. Çelik grisi zemin, logonun kırmızısı vurgu,
   geniş fotoğraf blokları ve okunur teknik tablolar. Eski site dar bir çerçeve
   içine sıkışmıştı; burada içerik nefes alıyor.
   🔴 Bu site kendi tasarımına sahiptir; ortak tema YOKTUR (AGENTS.md kural 3).
   ============================================================================= */

/* =============================================================================
   Sayfa geçişi — "titreme"nin ikinci kaynağı
   -----------------------------------------------------------------------------
   Klasik çok sayfalı sitede her bağlantı tam sayfa yükler; tarayıcı eski sayfayı
   söküp beyaz boyar, sonra yeniyi çizer. Göz bunu titreme olarak görür.

   1) `html`e zemin rengi veriliyor: ilk boyama beyaz değil, sitenin kendi
      rengi oluyor — araya beyaz kare girmiyor.
   2) `@view-transition` destekleyen tarayıcıda (Chrome/Edge) iki sayfa
      arasında kısa bir çapraz geçiş oluyor; desteklemeyen tarayıcı satırı
      görmezden geliyor, site aynen çalışıyor.
   Üçüncü kaynak olan font takası `includes/header.php`de çözüldü.
   ============================================================================= */
@view-transition{navigation:auto}
::view-transition-old(root),
::view-transition-new(root){animation-duration:.18s}

:root{
  --kirmizi:#d81f26;          /* Sakra logosundaki kırmızı */
  --kirmizi-koyu:#a8161c;
  --celik-900:#11161c;
  --celik-800:#1a212a;
  --celik-700:#2b3542;
  --celik-500:#5b6878;
  --cizgi:#e2e6ec;
  --zemin:#f4f6f9;
  --kagit:#ffffff;
  --metin:#161d26;
  --metin-soluk:#5f6b7a;
  --golge:0 1px 2px rgba(17,22,28,.04), 0 10px 30px rgba(17,22,28,.07);
  --golge-kalk:0 18px 44px rgba(17,22,28,.16);
  --kenar:clamp(16px,5vw,56px);
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --baslik:"Barlow Condensed","Arial Narrow",var(--sans);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:#f4f6f9}
body{margin:0;background:var(--zemin);color:var(--metin);font-family:var(--sans);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--baslik);font-weight:600;line-height:1.1;margin:0;
  letter-spacing:.01em;text-transform:uppercase}
p{margin:0 0 1em}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--kirmizi);outline-offset:3px}

.kapsa{width:100%;max-width:1280px;margin:0 auto;padding-inline:var(--kenar)}
.okuma{max-width:74ch}

/* --- üst bant --------------------------------------------------------------- */
.ustbant{background:var(--celik-900);color:#a9b4c2;font-size:13.5px}
.ustbant .kapsa{display:flex;gap:20px;align-items:center;justify-content:space-between;
  min-height:40px;flex-wrap:wrap}
.ustbant a{color:#d7dee7}
.ustbant a:hover{color:#fff}
.ustbant .sol{display:flex;gap:20px;flex-wrap:wrap}
.ustbant .oge{display:inline-flex;align-items:center;gap:8px}
.ustbant svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7}
.dil-sec{display:inline-flex;gap:4px;align-items:center}
.dil-sec a{padding:3px 9px;border-radius:5px;font-weight:600;font-size:12.5px;letter-spacing:.04em}
.dil-sec a.acik{background:var(--kirmizi);color:#fff}

/* --- başlık / menü ---------------------------------------------------------- */
.baslik{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--cizgi)}
.baslik .kapsa{display:flex;align-items:center;gap:22px;min-height:82px}
.marka img{height:52px;width:auto}
.marka-yazi{display:flex;flex-direction:column;line-height:1}
.marka-yazi b{font-family:var(--baslik);font-size:30px;color:var(--kirmizi);letter-spacing:.02em}
.marka-yazi span{font-size:10.5px;letter-spacing:.22em;color:var(--celik-500);text-transform:uppercase;margin-top:3px}

.menu{display:flex;gap:2px;margin-left:auto;align-items:center}
.menu>li{list-style:none;position:relative}
.menu a{display:block;padding:11px 13px;white-space:nowrap;border-radius:7px;font-size:14px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--celik-800);transition:background .18s,color .18s}
.menu a:hover{background:#eef1f6}
.menu a.acik{background:var(--celik-800);color:#fff}
.menu ul{position:absolute;top:100%;left:0;min-width:240px;background:#fff;border:1px solid var(--cizgi);
  border-radius:10px;box-shadow:var(--golge-kalk);padding:6px;margin:0;display:none;z-index:5}
.menu li:hover>ul,.menu li:focus-within>ul{display:block}
.menu ul li{list-style:none}
.menu ul a{white-space:normal;text-transform:none;letter-spacing:0;font-weight:500;font-size:14.5px;padding:9px 12px}

/* 🔴 `.menu a.ustcta` diye yazılıyor, sadece `.ustcta` diye DEĞİL: buton menünün
   içinde bir <a> ve `.menu a` (0,1,1) yalın `.ustcta`dan (0,1,0) daha özgül.
   Yalın yazıldığında `color:#fff` ve dolgu kaybediliyor, buton yazısı beyaz
   yerine KOYU çıkıyordu — ekranda "siyah buton" olarak görüldü. */
.menu a.ustcta,
.ustcta{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;background:var(--kirmizi);color:#fff;
  padding:12px 20px;border-radius:7px;font-weight:700;font-size:13.5px;letter-spacing:.06em;
  text-transform:uppercase;transition:background .18s,transform .18s}
.menu a.ustcta:hover,
.ustcta:hover{background:var(--kirmizi-koyu);color:#fff;transform:translateY(-1px)}
.menu-dugme{display:none;margin-left:auto;background:none;border:0;padding:8px;cursor:pointer}
.menu-dugme svg{width:30px;height:30px;stroke:var(--celik-800);stroke-width:1.8;fill:none}

/* --- kahraman --------------------------------------------------------------- */
.kahraman{position:relative;background:var(--celik-900);color:#fff;overflow:hidden;isolation:isolate}
.kahraman .arka{position:absolute;inset:0;z-index:-2;opacity:.42}
.kahraman .arka img{width:100%;height:100%;object-fit:cover}
.kahraman::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(11,15,20,.96) 0%,rgba(11,15,20,.86) 45%,rgba(11,15,20,.45) 100%)}
.kahraman .kapsa{padding-block:clamp(56px,8vw,110px)}
.kahraman .ic{max-width:680px}
.etiket{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.24em;
  text-transform:uppercase;color:#9fb0c4;margin-bottom:18px;font-weight:600}
.etiket::before{content:"";width:34px;height:3px;background:var(--kirmizi)}
.kahraman h1{font-size:clamp(36px,6vw,68px);color:#fff;margin-bottom:18px;line-height:1.02}
.kahraman p{font-size:clamp(16px,1.9vw,19px);color:#c3cedb;max-width:58ch}
.dugmeler{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.dugme{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:7px;
  font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;border:1px solid transparent;
  transition:transform .18s,background .18s,border-color .18s,color .18s}
.dugme svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2}
.dugme-ana{background:var(--kirmizi);color:#fff}
.dugme-ana:hover{background:var(--kirmizi-koyu);transform:translateY(-2px)}
.dugme-hayalet{border-color:rgba(255,255,255,.4);color:#fff}
.dugme-hayalet:hover{background:rgba(255,255,255,.1);border-color:#fff}
.dugme-koyu{background:var(--celik-800);color:#fff}
.dugme-koyu:hover{background:var(--celik-900);transform:translateY(-2px)}
.dugme-cizgi{border-color:var(--cizgi);background:#fff;color:var(--celik-800)}
.dugme-cizgi:hover{border-color:var(--celik-700)}

/* rakam şeridi */
.rakamlar{background:var(--celik-800);border-top:1px solid rgba(255,255,255,.08)}
.rakamlar .kapsa{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding-block:26px}
.rakamlar b{display:block;font-family:var(--baslik);font-size:clamp(26px,3.4vw,40px);color:#fff;line-height:1}
.rakamlar span{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:#93a1b3}

/* --- bölüm ------------------------------------------------------------------ */
.bolum{padding-block:clamp(52px,6.5vw,92px)}
.bolum-beyaz{background:var(--kagit)}
.bolum-zemin{background:var(--zemin)}
.bolum-koyu{background:var(--celik-900);color:#c3cedb}
.bolum-koyu h2,.bolum-koyu h3{color:#fff}
.bolum-bas{max-width:720px;margin-bottom:clamp(28px,3.5vw,46px)}
.bolum-bas .ust{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--kirmizi);font-weight:700;margin-bottom:12px}
.bolum-bas .ust::before{content:"";width:26px;height:3px;background:currentColor}
.bolum-bas h2{font-size:clamp(28px,4vw,44px);margin-bottom:12px}
.bolum-bas p{color:var(--metin-soluk);font-size:17px;margin:0}
.bolum-koyu .bolum-bas p{color:#9fadbd}
.bas-satir{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap}
/* `.bolum-bas` metni 720px'te tutuyor; başlık satırı aynı anda "tümünü görün"
   bağlantısını da taşıyorsa kutu tam genişlik olmalı, yoksa bağlantı sayfanın
   sağ kenarına değil 720px'in bittiği yere yapışıyor (galeri sayfasında görüldü).
   Metin darlığı bu kez içteki bloğa veriliyor. */
.bolum-bas.bas-satir{max-width:none}
.bolum-bas.bas-satir>div:first-child{max-width:720px}
.tum-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--kirmizi);
  font-size:14px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.tum-link:hover{gap:12px}
.tum-link svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4}

/* --- kategori kartları ------------------------------------------------------ */
.kat-izgara{display:grid;gap:clamp(14px,1.8vw,24px);grid-template-columns:repeat(4,1fr)}
.kat-kart{position:relative;display:block;border-radius:14px;overflow:hidden;background:var(--kagit);
  border:1px solid var(--cizgi);transition:transform .22s,box-shadow .22s,border-color .22s}
.kat-kart:hover{transform:translateY(-5px);box-shadow:var(--golge-kalk);border-color:#cfd6e0}
.kat-kart .gorsel{aspect-ratio:4/3;background:#eef1f5;overflow:hidden}
.kat-kart .gorsel img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.kat-kart:hover .gorsel img{transform:scale(1.06)}
.kat-kart .ic{padding:18px 20px 22px}
.kat-kart h3{font-size:22px;margin-bottom:6px}
.kat-kart .adet{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--kirmizi);font-weight:700}
.kat-kart p{font-size:14.5px;color:var(--metin-soluk);margin:8px 0 0}

/* --- ürün kartları ---------------------------------------------------------- */
.urun-izgara{display:grid;gap:clamp(14px,1.8vw,24px);grid-template-columns:repeat(3,1fr)}
.urun-kart{background:var(--kagit);border:1px solid var(--cizgi);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .22s,box-shadow .22s,border-color .22s}
.urun-kart:hover{transform:translateY(-5px);box-shadow:var(--golge-kalk);border-color:#cfd6e0}
.urun-kart .gorsel{aspect-ratio:4/3;background:#fff;overflow:hidden;display:grid;place-items:center;padding:14px}
.urun-kart .gorsel img{width:100%;height:100%;object-fit:contain;transition:transform .5s}
.urun-kart:hover .gorsel img{transform:scale(1.05)}
.urun-kart .ic{padding:16px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1;
  border-top:1px solid var(--cizgi)}
.urun-kart .marka{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--kirmizi)}
.urun-kart h3{font-size:19px;line-height:1.2;text-transform:none;font-family:var(--sans);font-weight:700;letter-spacing:0}
.urun-kart .ozet{font-size:14px;color:var(--metin-soluk);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.urun-kart .oku{margin-top:auto;padding-top:8px;font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--celik-700)}

/* --- ürün detay ------------------------------------------------------------- */
.urun-duzen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,54px);align-items:start}
.urun-gorsel-kutu{background:#fff;border:1px solid var(--cizgi);border-radius:16px;padding:24px;
  border-top:4px solid var(--kirmizi)}
.urun-gorsel-kutu img{width:100%;max-height:460px;object-fit:contain}
.urun-kucukler{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.urun-kucukler button{border:1px solid var(--cizgi);background:#fff;border-radius:9px;padding:6px;cursor:pointer;
  aspect-ratio:1/1;display:grid;place-items:center}
.urun-kucukler button[aria-current="true"]{border-color:var(--kirmizi);box-shadow:0 0 0 2px rgba(216,31,38,.15)}
.urun-kucukler img{width:100%;height:100%;object-fit:contain}

.ozellik-liste{list-style:none;padding:0;margin:0;display:grid;gap:9px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.ozellik-liste li{display:flex;gap:10px;align-items:flex-start;font-size:15px;background:var(--zemin);
  border-radius:9px;padding:11px 13px}
.ozellik-liste svg{flex:0 0 17px;width:17px;height:17px;stroke:var(--kirmizi);fill:none;stroke-width:2.6;margin-top:3px}

.veri-blok{margin-top:30px}
.veri-blok h2{font-size:15px;font-family:var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--metin-soluk);margin-bottom:12px;padding-bottom:9px;border-bottom:2px solid var(--cizgi)}

.teknik-tablo-sar{overflow-x:auto;border:1px solid var(--cizgi);border-radius:12px;background:#fff}
.teknik-tablo{min-width:520px;font-size:14.5px}
.teknik-tablo th,.teknik-tablo td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--cizgi);
  white-space:nowrap}
.teknik-tablo thead th{background:var(--celik-800);color:#fff;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;position:sticky;top:0}
.teknik-tablo tbody tr:nth-child(even){background:#fafbfc}
.teknik-tablo tbody th{font-weight:700;color:var(--celik-800)}
.teknik-tablo tr:last-child td,.teknik-tablo tr:last-child th{border-bottom:0}
.teknik-not{font-size:13.5px;color:var(--metin-soluk);margin-top:10px}

/* --- galeri / ışık kutusu ---------------------------------------------------- */
.foto-izgara{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.foto-izgara figure{margin:0;border-radius:12px;overflow:hidden;background:#e7ebf0;position:relative;cursor:zoom-in}
.foto-izgara img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s}
.foto-izgara figure:hover img{transform:scale(1.06)}
.foto-izgara figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 12px 10px;color:#fff;font-size:12.5px;
  background:linear-gradient(to top,rgba(10,14,18,.86),transparent);opacity:0;transition:opacity .2s}
.foto-izgara figure:hover figcaption{opacity:1}

.isik{position:fixed;inset:0;z-index:100;background:rgba(8,11,15,.94);display:none;place-items:center;padding:20px}
.isik.acik{display:grid}
.isik img{max-width:min(1200px,94vw);max-height:88vh;width:auto;border-radius:10px}
.isik button{position:absolute;border:0;cursor:pointer;background:rgba(255,255,255,.14);color:#fff;border-radius:50%}
.isik .kapat{top:16px;right:16px;width:46px;height:46px;font-size:24px;line-height:1}
.isik .onceki,.isik .sonraki{top:50%;transform:translateY(-50%);width:50px;height:50px;font-size:26px;line-height:1}
.isik .onceki{left:14px}.isik .sonraki{right:14px}
.isik .yazi{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:#cbd5e1;font-size:14px}

/* --- kart / metin ------------------------------------------------------------ */
.kart-izgara{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.kart{background:var(--kagit);border:1px solid var(--cizgi);border-radius:14px;padding:26px}
.kart .simge{width:46px;height:46px;border-radius:11px;background:#eef1f6;display:grid;place-items:center;margin-bottom:16px}
.kart .simge svg{width:23px;height:23px;stroke:var(--kirmizi);fill:none;stroke-width:1.9}
.kart h3{font-size:20px;margin-bottom:8px}
.kart p{font-size:14.5px;color:var(--metin-soluk);margin:0}
.kart .baglanti{display:inline-block;margin-top:12px;font-weight:700;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--kirmizi)}

.metin{font-size:17px;line-height:1.82;color:#27313d}
.metin h2{font-size:26px;margin:1.5em 0 .45em}
.metin h3{font-size:20px;margin:1.3em 0 .4em}
.metin ul{padding-left:20px;margin:0 0 1.2em}
.metin li{margin-bottom:.42em}

.marka-serit{display:flex;flex-wrap:wrap;gap:10px}
.marka-serit span{border:1px solid var(--cizgi);background:#fff;border-radius:999px;padding:9px 18px;
  font-weight:700;font-size:14px;letter-spacing:.08em}
.bolum-koyu .marka-serit span{border-color:rgba(255,255,255,.22);background:transparent;color:#dbe3ec}

/* --- belge listesi ----------------------------------------------------------- */
.belge-izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.belge{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--cizgi);
  border-radius:12px;padding:16px 18px;transition:transform .18s,box-shadow .18s}
.belge:hover{transform:translateY(-3px);box-shadow:var(--golge)}
.belge svg{flex:0 0 26px;width:26px;height:26px;stroke:var(--kirmizi);fill:none;stroke-width:1.8}
.belge b{display:block;font-size:15.5px}
.belge span{font-size:12.5px;color:var(--metin-soluk)}

/* --- haber ------------------------------------------------------------------- */
.haber-izgara{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.haber-kart{background:#fff;border:1px solid var(--cizgi);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .22s,box-shadow .22s}
.haber-kart:hover{transform:translateY(-5px);box-shadow:var(--golge-kalk)}
.haber-kart .gorsel{aspect-ratio:16/10;overflow:hidden;background:#eef1f5}
.haber-kart .gorsel img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.haber-kart:hover .gorsel img{transform:scale(1.05)}
.haber-kart .ic{padding:20px;display:flex;flex-direction:column;gap:9px;flex:1}
.haber-kart .tarih{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--metin-soluk)}
.haber-kart h3{font-size:20px;text-transform:none;font-family:var(--sans);font-weight:700;letter-spacing:0;line-height:1.25}
.haber-kart p{font-size:14.5px;color:var(--metin-soluk);margin:0}
.haber-kart .oku{margin-top:auto;padding-top:8px;color:var(--kirmizi);font-weight:700;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase}

/* --- sayfa başı -------------------------------------------------------------- */
.sayfabasi{background:var(--celik-900);color:#fff;position:relative;overflow:hidden}
.sayfabasi::before{content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(60% 130% at 88% 0%,rgba(216,31,38,.55) 0%,transparent 62%)}
.sayfabasi .kapsa{position:relative;padding-block:clamp(26px,3.4vw,44px)}
.sayfabasi h1{font-size:clamp(30px,4.4vw,48px);margin-bottom:8px}
.sayfabasi p{color:#a9b7c6;max-width:64ch;margin:0;font-size:16px}
.kirinti{font-size:12.5px;color:#8fa0b3;padding:0 0 10px}
.kirinti a:hover{color:#fff}
.kirinti span{margin-inline:7px;opacity:.55}

/* --- yan menü (kategori listesi) --------------------------------------------- */
.yan-duzen{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(22px,3vw,44px);align-items:start}
.yan-menu{background:#fff;border:1px solid var(--cizgi);border-radius:14px;padding:10px;position:sticky;top:100px}
.yan-menu h2{font-size:13px;font-family:var(--sans);letter-spacing:.14em;color:var(--metin-soluk);
  padding:12px 14px 10px;margin:0}
.yan-menu a{display:block;padding:11px 14px;border-radius:9px;font-size:15px;font-weight:600;
  color:var(--celik-800);transition:background .16s,color .16s}
.yan-menu a:hover{background:#eef1f6}
.yan-menu a.acik{background:var(--kirmizi);color:#fff}

/* --- form --------------------------------------------------------------------- */
.iletisim-duzen{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(22px,4vw,52px);align-items:start}
.bilgi-liste{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.bilgi-liste li{display:flex;gap:14px;align-items:flex-start}
.bilgi-liste .simge{flex:0 0 44px;width:44px;height:44px;border-radius:11px;background:#eef1f6;display:grid;place-items:center}
.bilgi-liste .simge svg{width:21px;height:21px;stroke:var(--kirmizi);fill:none;stroke-width:1.9}
.bilgi-etiket{display:block;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--metin-soluk);margin-bottom:2px}
.bilgi-deger{font-size:16px;font-weight:600}

.form-kutu{background:#fff;border:1px solid var(--cizgi);border-radius:16px;padding:clamp(20px,3vw,34px);box-shadow:var(--golge)}
.form-satir{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.alan{margin-bottom:14px;display:flex;flex-direction:column;gap:6px}
.alan label{font-size:13px;font-weight:700;color:var(--celik-800);letter-spacing:.03em}
.zorunlu{color:var(--kirmizi)}
.alan input,.alan select,.alan textarea{font:inherit;font-size:15px;padding:12px 14px;border:1px solid var(--cizgi);
  border-radius:9px;background:var(--zemin);color:var(--metin);width:100%;transition:border-color .18s,background .18s}
.alan textarea{min-height:130px;resize:vertical}
.alan input:focus,.alan select:focus,.alan textarea:focus{outline:none;border-color:var(--kirmizi);background:#fff}
.alan .yardim{font-size:12.5px;color:var(--metin-soluk)}
.bildirim{padding:14px 16px;border-radius:10px;font-size:14.5px;margin-bottom:16px}
.bildirim-basarili{background:#e9f7ee;border:1px solid #bfe3cd;color:#1d6b3f}
.bildirim-hata{background:#fdecec;border:1px solid #f3c4c4;color:#98231f}

/* --- alt bilgi ---------------------------------------------------------------- */
.altbilgi{background:var(--celik-900);color:#96a4b5;padding-block:clamp(44px,5vw,64px) 0;font-size:14.5px}
.altbilgi a:hover{color:#fff}
.altbilgi .duzen{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:clamp(20px,3vw,44px)}
.altbilgi h4{color:#fff;font-family:var(--sans);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px}
.altbilgi ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.altbilgi .tanit{margin:14px 0 0;max-width:40ch;color:#7f8fa2}
.altbilgi .kapanis{margin-top:clamp(28px,4vw,44px);border-top:1px solid rgba(255,255,255,.1);padding-block:18px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:#73footer}
.altbilgi .kapanis{color:#71808f}

/* --- yüzen düğmeler ----------------------------------------------------------- */
.yuzen{position:fixed;right:16px;bottom:16px;z-index:70;display:grid;gap:10px}
.yuzen a{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;box-shadow:var(--golge-kalk);
  transition:transform .18s;background:var(--kirmizi)}
.yuzen a:hover{transform:scale(1.06)}
.yuzen svg{width:24px;height:24px;fill:#fff}

/* =============================================================================
   Duyarlı
   ============================================================================= */
@media (max-width:1180px){
  .kat-izgara{grid-template-columns:repeat(2,1fr)}
  .urun-izgara,.haber-izgara,.kart-izgara{grid-template-columns:repeat(2,1fr)}
  .foto-izgara{grid-template-columns:repeat(3,1fr)}
  .altbilgi .duzen{grid-template-columns:1fr 1fr}
  .rakamlar .kapsa{grid-template-columns:repeat(2,1fr);gap:20px}
}
@media (max-width:980px){
  .menu{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--cizgi);
    flex-direction:column;align-items:stretch;gap:0;padding:8px var(--kenar) 16px;max-height:76vh;overflow:auto}
  .menu.acik{display:flex}
  .menu>li{width:100%}
  .menu a{border-radius:0;border-bottom:1px solid var(--cizgi)}
  .menu ul{position:static;display:block;border:0;box-shadow:none;padding:0 0 0 12px}
  .menu-dugme{display:block}
  .baslik .kapsa{position:relative}
  .ustcta{display:none}
  .yan-duzen{grid-template-columns:1fr}
  .yan-menu{position:static}
  .urun-duzen,.iletisim-duzen{grid-template-columns:1fr}
}
@media (max-width:640px){
  .urun-izgara,.haber-izgara,.kart-izgara,.kat-izgara{grid-template-columns:1fr}
  .foto-izgara{grid-template-columns:repeat(2,1fr)}
  .form-satir{grid-template-columns:1fr}
  .altbilgi .duzen{grid-template-columns:1fr}
  .ustbant .sol .adres{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  /* Hareket azaltma açıksa sayfa geçişi de kapanır. */
  @view-transition{navigation:none}
}