/* =========================================================================
   mertveterinerlik.com.tr — tek stil dosyasi
   -------------------------------------------------------------------------
   PALET ESKI SITEDEN OLCULDU (uydurma renk yok):
     #003f88  logo.png piksel sayimi — marka lacivert-mavisi
     #042857 / #06408d  menu1/menu_0*.png gradyan bandi
     #d81c21  _css/style.css — telefon rakamlarindaki kirmizi
     #231f20  logo siyahi
   Kontrast olculdu (beyaz zemin): #003f88 9,9 · #d81c21 5,0 · #5b6472 6,0
   ========================================================================= */

/* --- Yazi tipleri: Google Fonts'tan BIR KEZ indirildi, kendi sunucumuzda.
 * Govde LATO — eski sitenin KENDI govde fontu. Basliklar Barlow Condensed:
 * eski sitenin daraltilmis baslik yuzlerinin (Myriad Pro Cond, Neo Sans)
 * karsiligi. Ureten: araclar/font-indir.js --- */
@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-20C4, 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:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/barlow-condensed-700-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/barlow-condensed-700-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:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/lato-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/lato-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:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/lato-700-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/lato-700-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}

:root{
  --lacivert:#042857;
  --lacivert-koyu:#021c3e;
  --mavi:#003f88;
  --mavi-2:#06408d;
  --mavi-acik:#8fc0ff;        /* koyu zeminde baglanti rengi */
  --kirmizi:#d81c21;
  --turuncu:#e2690d;
  --kara:#231f20;
  --gri:#5b6472;
  --cizgi:#dfe4ec;
  --krem:#f3f4f7;
  --beyaz:#fff;
  --yesil:#0f7b46;            /* 🔴 WhatsApp: marka yesili OLDUGU GIBI kullanilmaz */
  --yesil-koyu:#0a5c34;
  --olcu:1220px;
  --yuvarlak:4px;
  --golge:0 1px 2px rgba(4,40,87,.06), 0 8px 24px rgba(4,40,87,.07);
  --baslik:'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --govde:'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--govde);
  font-size:clamp(15.5px,.95rem + .12vw,17px);
  line-height:1.62;
  color:var(--kara);
  background:var(--beyaz);
  overflow-x:clip;            /* 🔴 hidden DEGIL: sticky sutunu bozar */
}

img,svg,video,iframe{max-width:100%}
img{height:auto;display:block}

h1,h2,h3{
  font-family:var(--baslik);
  font-weight:700;
  line-height:1.1;
  letter-spacing:.005em;
  margin:0 0 .5em;
  color:var(--lacivert);
}
h1{font-size:clamp(28px,1.5rem + 1.7vw,44px)}
h2{font-size:clamp(23px,1.3rem + 1.1vw,34px)}
h3{font-size:clamp(18px,1.05rem + .4vw,22px)}
p{margin:0 0 1em}
a{color:var(--mavi);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--lacivert)}

.kapsa{width:min(100% - 32px, var(--olcu));margin-inline:auto}

.atla{position:absolute;left:-9999px;top:0;background:var(--beyaz);color:var(--mavi);
  padding:10px 16px;z-index:60}
.atla:focus{left:8px;top:8px}

:focus-visible{outline:3px solid var(--mavi);outline-offset:2px}

/* ===================================== KORUNAN OGE 1: BEYAZ BASLIK BANDI
   🔴 Eski sitenin basligi BEYAZ ve logo TAM BOYUNDA (183x140). Ilk surumde
   her sey lacivert bir banda sikistirilmisti ve logo 54 px'e inmisti —
   kullanici "kalite cok dusmus" derken en cok bunu gormustu.
   Menu AYRI BIR YUVARLAK CUBUK; eski site bunu yedi ayri PNG ile yapiyordu,
   burada tek gradyan. Slogan menunun altinda, saga yasli. */
.ust{background:var(--beyaz);position:relative;z-index:40}
.ust-ic{display:flex;align-items:flex-start;gap:clamp(14px,2vw,30px);
  padding:clamp(8px,1vw,14px) 0 clamp(8px,1vw,12px)}

.marka{display:flex;align-items:center;flex:none}
.marka img{width:auto;height:clamp(78px,7.4vw,118px)}

/* 🔴 `align-items:stretch`: ust satir menu CUBUGU kadar genis olsun ki
   slogan menunun SOL UST kosesine hizalansin (kullanici, 2026-10-29).
   `flex-end` ile satir icerigine gore daraliyor ve slogan menunun soluna
   degil, telefonun soluna yapisiyordu. */
.ust-sag{margin-left:auto;display:flex;flex-direction:column;align-items:stretch;
  gap:8px;min-width:0}
.ust-us{display:flex;align-items:center;gap:12px;font-size:13.5px}
.us-tel{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  color:var(--kara);text-decoration:none;font-weight:700}
.us-tel b{color:var(--kirmizi)}
.us-tel svg{width:15px;height:15px;flex:none;color:var(--mavi)}
.us-dil{display:flex;gap:4px}
.us-dil a{display:inline-flex;align-items:center;justify-content:center;min-width:34px;
  height:26px;border:1px solid var(--cizgi);border-radius:var(--yuvarlak);
  color:var(--gri);font-weight:700;font-size:12.5px;text-decoration:none;letter-spacing:.04em}
.us-dil a.acik{background:var(--mavi);border-color:var(--mavi);color:var(--beyaz)}

.menu-dugme{display:none}

/* menu CUBUGU — lacivert gradyan, yuvarlak kose, logonun saginda */
.ana-menu{background:linear-gradient(180deg,#0a52a8 0%,var(--mavi-2) 46%,var(--lacivert) 100%);
  border-radius:5px;box-shadow:0 2px 6px rgba(2,20,45,.3);max-width:100%}
.ana-menu ul{display:flex;list-style:none;margin:0;padding:0}
.ana-menu li + li{border-left:1px solid rgba(255,255,255,.16)}
.ana-menu a{display:flex;align-items:center;height:50px;padding:0 clamp(10px,1.1vw,19px);
  color:var(--beyaz);text-decoration:none;font-family:var(--baslik);font-weight:600;
  font-size:clamp(14px,.8rem + .32vw,18px);letter-spacing:.04em;text-transform:uppercase;
  white-space:nowrap}
.ana-menu li:first-child a{border-radius:5px 0 0 5px}
.ana-menu li:last-child a{border-radius:0 5px 5px 0}
.ana-menu a:hover{background:rgba(255,255,255,.14);color:var(--beyaz)}
.ana-menu a.acik{background:rgba(0,0,0,.26);color:var(--beyaz);
  box-shadow:inset 0 -3px 0 var(--kirmizi)}

/* Slogan menunun sol ust kosesinde; telefon ve dil secici saga itilir. */
.slogan{margin:0 auto 0 0;font-style:italic;color:var(--mavi);
  font-size:clamp(13px,.75rem + .25vw,15.5px);text-align:left}

/* ================================== ic sayfa fotograf bandi + baslik seridi */
.ic-bant{display:block;line-height:0;background:var(--lacivert)}
.ic-bant img{width:100%;height:clamp(84px,9vw,140px);object-fit:cover;object-position:center 42%}

.baslik-serit{background:linear-gradient(180deg,#fafbfc 0%,#e9ecf1 100%);
  border-bottom:1px solid var(--cizgi)}
.bs-ic{display:flex;align-items:center;gap:clamp(12px,2vw,24px);min-height:96px}
.bs-ic h1{margin:0;font-size:clamp(21px,1.1rem + 1.1vw,33px);text-transform:uppercase;
  letter-spacing:.01em;line-height:1.08}
.bs-iletisim{margin-left:auto;text-align:right;font-size:15px;line-height:1.55;
  white-space:nowrap;flex:none}
.bs-iletisim a{color:var(--kara);text-decoration:none;display:block}
.bs-iletisim a:hover{color:var(--mavi)}
.bs-iletisim b{color:var(--kirmizi)}
.bs-operator{flex:none;width:auto;height:96px;align-self:flex-end}

/* ============================================================== kahraman
   Yazi FOTOGRAFIN USTUNDE DEGIL, altindaki beyaz plakada: karartma sifir,
   kontrast beyaz zeminden geliyor, fotograf tam parlakliga cikiyor
   (sakaryakaanveterinerlik dersi). */
/* ============================================================== KAHRAMAN
   🔴 ESKI SITENIN KAHRAMANI DEKOR DEGIL, GEZINTIYDI: tam genislik fotograf
   (ciftlik hava cekimi) + camgobegi>lacivert ortu, ustunde dokuz urun
   ailesinin madde isaretli listesi. Ilk surumde bu liste yoktu ve kahraman
   yalnizca bir fotograf + genel bir cumleydi; kaybolan sey kurguydu.
   🔴 ORTU TEK KATMAN: fotografin kendi opakligi 1, uzerinde tek gradyan.
   (Karartma iki kez binmez kurali.) */
/* 🔴 SARKMA KUSURU (kullanici, 2026-10-29: "sarkma olmasin" — son satir
   bandin disina tasiyordu). Sebep: fotografa SABIT yukseklik verilmisti;
   liste fotograftan uzun oldugunda izgara satiri buyuyor ama fotograf
   buyumuyordu ve altta solgun bir serit kaliyordu — "sacma bir durum"
   dedigi band da buydu. Cozum: yuksekligi FOTOGRAF degil BOLUM belirliyor
   (`min-height`), fotograf satiri kaplayacak sekilde geriliyor. Boylece
   liste ne kadar uzarsa uzasin altinda bosluk kalmiyor. */
.kahraman{position:relative;display:grid;isolation:isolate;overflow:hidden;
  min-height:clamp(420px,38vw,520px)}
.kahraman > *{grid-area:1/1}
.kahraman-kare{position:relative;display:block;align-self:stretch}
/* Kareler mutlak: kabin yuksekligi artik izgara satirindan geliyor, bu yuzden
   "ilk kare akista kalsin" kurali burada gerekmiyor. */
.kahraman-kare img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 52%;opacity:0}
.kahraman-kare img:first-child{opacity:1}
/* 🔴 ORTU DIKEY: ustte camgobegi, altta derin lacivert. Once 104 derecelik
   capraz bir gradyandi ve sag alt kose neredeyse ortusuz kaliyordu — o
   solgun bant kunye seridiyle kahraman arasinda "yarim kalmis" bir serit
   gibi duruyordu (kullanici: "sacma bir durum"). Dikey gradyan + alttaki
   koyu kapanis bandi o bosluğu kapatiyor ve eski sitenin kurgusuna da
   birebir uyuyor. */
.kahraman::after{content:"";grid-area:1/1;z-index:1;
  background:
    /* 🔴 ORTU HAFIF: manset kareleri ZATEN camgobegi duotonlu; uzerine koyu
       bir ortu binince fotograf kayboluyor ve bant duz bir gradyana donuyor.
       Karartma TEK KATMAN ve hafif; yazinin okunurlugunu golge ve ustune
       gelince cikan lacivert bant tasiyor. */
    linear-gradient(180deg,rgba(6,86,96,.3) 0%,rgba(6,74,112,.46) 42%,
      rgba(4,52,92,.74) 78%,rgba(4,36,78,.93) 100%)}
/* 🔴 Liste ORTALI bir blok: ogeler kendi aralarinda sola hizali, blok ortada
   (eski sitede de boyleydi). */
.kahraman-ic{position:relative;z-index:2;align-self:center;display:grid;
  justify-items:center;padding:clamp(18px,2.6vw,38px) 0}

.kahraman-liste{list-style:none;margin:0;padding:0;display:grid;
  gap:clamp(2px,.45vw,7px);justify-items:stretch;width:fit-content;max-width:100%}
/* 🔴 YAZI BOYU GERI ALINDI (kullanici, 2026-10-29: "En ustteki yazilar
   kuculsun ibaresi hatali oldu"). Bir tur once 27 -> 20 px indirilmisti;
   asil kusur yazi boyu DEGIL, listenin banttan sarkmasiydi ve o ayri
   duzeltildi (`.kahraman{min-height}` + fotografin gerilmesi). */
.kahraman-liste a{display:flex;align-items:center;gap:clamp(8px,1vw,14px);
  min-height:46px;padding:clamp(3px,.5vw,7px) clamp(14px,1.6vw,26px);
  border-radius:3px;color:var(--beyaz);text-decoration:none;
  font-family:var(--baslik);font-weight:600;
  font-size:clamp(17px,.85rem + .95vw,27px);letter-spacing:.02em;text-transform:uppercase;
  text-shadow:0 1px 10px rgba(2,20,45,.5);transition:background .16s}
.kahraman-liste a::before{content:"•";flex:none;font-size:1.05em;line-height:1;
  color:var(--beyaz);opacity:.95}
/* Eski sitedeki vurgu: ustune gelince satirin arkasi dolu lacivert bir bant. */
.kahraman-liste a:hover,.kahraman-liste a:focus-visible{background:rgba(4,40,87,.92);
  color:var(--beyaz);text-shadow:none}

/* Yapida duran ama ekranda gorunmeyen baslik. */
.gizli-baslik{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}


/* -------------------------------------------------- manset hareket katmani
   🔴 TABAN HAL CIZILI: asagidaki hicbir kural animasyon disinda opaklik
   dusurmuyor. Animasyon hic calismazsa (reduced-motion, eski tarayici)
   ilk kare ve butun yazilar yerinde durur — basarisizlik yonu "goster".
   🔴 Betik YOK: donus de belirme de CSS'te. */
@media (prefers-reduced-motion:no-preference){
  /* Bes kare capraz gecisle doner (30 sn tur, kare basina 6 sn) ve bu arada
     cok hafif yaklasir. Iki animasyon tek kisayolda; gecikme IKISINE birden
     verilir, yoksa yakinlasma kareyle ayri duser. */
  .kahraman-kare img{
    animation:kh-kare 30s linear infinite, kh-yakin 30s ease-in-out infinite}
  .kahraman-kare img:nth-child(2){animation-delay:-24s,-24s}
  .kahraman-kare img:nth-child(3){animation-delay:-18s,-18s}
  .kahraman-kare img:nth-child(4){animation-delay:-12s,-12s}
  .kahraman-kare img:nth-child(5){animation-delay:-6s,-6s}
  /* 🔴 Gorunur pencere turun BASINDA: gecikmeler negatif oldugu icin
     2..5 acilista gorunmez bolgede kalir. Pozitif gecikmeyle bes kare
     birden gorunur (eski ders). */
  @keyframes kh-kare{
    0%,16%{opacity:1}
    20%,96%{opacity:0}
    100%{opacity:1}
  }
  /* ⚠️ Yakinlasma karenin sag/sol kenarini kabin disina tasirir; `.kahraman`
     `overflow:hidden` ile kirptigi icin sayfada yatay kaydirma OLUSMAZ
     (olculdu: documentElement.scrollWidth = innerWidth). Taşma taramasi bu
     IMG'yi raporlarsa KUSUR DEGILDIR — kirpilmis bir Ken Burns hareketidir. */
  @keyframes kh-yakin{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}

  /* yazilar sirayla belirir (tek seferlik) */
  .kahraman-liste li{animation:kh-gir .35s calc((var(--s,1) - 1) * .035s) backwards}
  @keyframes kh-gir{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}
/* 🔴 Ekran disindayken dondurme duraklar (site.js `.uyu` sinifini koyar). */
.kahraman.uyu .kahraman-kare img{animation-play-state:paused}

.etiket{font-family:var(--baslik);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  font-size:13px;color:var(--kirmizi);margin:0 0 .2em}

/* ================================================================ bolumler */
.bolum{padding:clamp(40px,4.4vw,62px) 0}
/* 🔴 Iki bolumun dolgulari TOPLANIR: zemin degismiyorsa ikincinin ustu kisilir. */
.bolum + .bolum{padding-top:clamp(14px,1.6vw,22px)}
.bolum + .bolum-krem,
.bolum + .bolum-cagri,
.bolum + .bolum-kunye,
.bolum-krem + .bolum,
.bolum-kunye + .bolum,
.bolum-cagri + .bolum{padding-top:clamp(40px,4.4vw,62px)}
.bolum-krem{background:var(--krem)}

/* 🔴 Kirintidan sonraki ilk bolum ust dolgusunu kisar (olu alan kalmasin). */
main > .kapsa:has(.kirinti) + section,
main > .kapsa:has(.kirinti) + article{padding-top:clamp(.7rem,.4rem + .8vw,1.2rem)}

.bolum-bas{margin-bottom:clamp(18px,2vw,28px);max-width:72ch}
.bolum-bas h2{margin-bottom:.25em}
.bolum-ozet{color:var(--gri);margin:0;max-width:68ch}

.alt-baslik{margin-top:clamp(28px,3vw,42px);padding-top:.2em;border-top:2px solid var(--cizgi)}


/* ================================ giris cumlesi (mansetin hemen altinda)
   Eski sitede de tam burada, ortali ve tek paragraf olarak duruyordu. */
.bolum-giris{padding:clamp(22px,2.6vw,34px) 0;background:var(--beyaz);
  border-bottom:1px solid var(--cizgi)}
.civciv-kap{margin:clamp(14px,1.8vw,24px) auto 0;max-width:1000px}
.giris-metni{margin:0 auto;max-width:92ch;text-align:center;color:var(--gri);
  font-size:clamp(15px,.9rem + .25vw,17.5px);line-height:1.65}

/* ================================================================== kunye */
.bolum-kunye{padding:clamp(18px,2vw,26px) 0;background:var(--lacivert);color:var(--beyaz)}
.kunye-ic{display:grid;gap:clamp(12px,1.6vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.kunye-izgara{display:grid;gap:14px;margin:0 0 1.4em;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.kunye{display:flex;flex-direction:column;gap:2px}
.kunye b{font-family:var(--baslik);font-weight:700;font-size:clamp(22px,1.2rem + .8vw,30px);
  line-height:1.05;letter-spacing:.01em}
.kunye span{font-size:13.5px;line-height:1.4;opacity:.88}
.bolum-kunye .kunye b{color:var(--beyaz)}
.kunye-izgara .kunye{background:var(--krem);border-left:3px solid var(--mavi);padding:12px 14px}
.kunye-izgara .kunye b{color:var(--lacivert)}
.kunye-izgara .kunye span{color:var(--gri);opacity:1}

/* ================================================================ izgaralar */
.izgara{display:grid;gap:clamp(12px,1.4vw,20px)}
.izgara-kat{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
.izgara-urun{grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr))}
.izgara-gal{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
.izgara-foto{grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr))}
.izgara-belge{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
.izgara-video{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}

/* ===================================================================== kart */
.kart{display:flex;flex-direction:column;background:var(--beyaz);border:1px solid var(--cizgi);
  border-radius:var(--yuvarlak);overflow:hidden;text-decoration:none;color:inherit;
  transition:border-color .18s, box-shadow .18s, transform .18s}
.kart:hover{border-color:var(--mavi);box-shadow:var(--golge);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.kart{transition:none}.kart:hover{transform:none}}
.kart-kare{display:block;background:var(--krem)}
.kart-kare img{width:100%;aspect-ratio:800/738;object-fit:cover}
.kart-plaka{display:grid;place-items:center;aspect-ratio:800/738;background:var(--krem);
  font-family:var(--baslik);font-weight:700;font-size:48px;color:#aab4c2;letter-spacing:.04em}
/* 🔴 `<a>` icindeki `<span>` BLOK yapilmazsa dolgu ve ust cizgi bozulur. */
.kart-govde{display:block;padding:12px 14px 14px;border-top:1px solid var(--cizgi)}
.kart-ad{display:block;font-family:var(--baslik);font-weight:600;font-size:18px;line-height:1.18;
  color:var(--lacivert)}
.kart-alt{display:block;font-style:normal;font-size:13.5px;line-height:1.45;color:var(--gri);margin-top:4px}
.kart-ek{display:block;font-style:normal;font-size:12.5px;color:var(--kirmizi);font-weight:700;
  letter-spacing:.03em;margin-top:6px}
.kart:hover .kart-ad{color:var(--mavi)}

/* ================================================================ dugmeler */
.dugme{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 20px;border:2px solid transparent;border-radius:var(--yuvarlak);
  font-family:var(--baslik);font-weight:600;font-size:17px;letter-spacing:.03em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background .16s,border-color .16s,color .16s}
.dugme svg{width:20px;height:20px;flex:none}
.dugme-dolu{background:var(--mavi);border-color:var(--mavi);color:var(--beyaz)}
.dugme-dolu:hover{background:var(--lacivert);border-color:var(--lacivert);color:var(--beyaz)}
.dugme-cizgi{background:transparent;border-color:var(--mavi);color:var(--mavi)}
.dugme-cizgi:hover{background:var(--mavi);color:var(--beyaz)}
.dugme-kucuk{min-height:40px;padding:0 14px;font-size:15px}
.dugme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap:10px;margin:1.1em 0;max-width:520px}
.dugme-grid .dugme{width:100%}

/* 🔴 WHATSAPP: yesil zemin + BEYAZ yazi. Marka yesili (#25d366) beyazda 1,8
   veriyor; koyulastirilmis cift olculdu ve sabitlendi (5,33 / 8,04). */
.dugme-wa{background:var(--yesil);border-color:var(--yesil);color:#fff}
.dugme-wa:hover{background:var(--yesil-koyu);border-color:var(--yesil-koyu);color:#fff}

/* ============================================================== ic duzen */
.ic-duzen{display:grid;gap:clamp(20px,2.4vw,38px);
  grid-template-columns:minmax(0,1fr) 262px;align-items:start}
.ic-govde{min-width:0}

/* ===================================== KORUNAN OGE 2: sag ray (ikonlu liste) */
.ray{position:sticky;top:96px;display:flex;flex-direction:column;gap:16px}
.ray-liste{list-style:none;margin:0;padding:0;border:1px solid var(--cizgi);
  border-radius:var(--yuvarlak);background:var(--beyaz);overflow:hidden}
.ray-liste li + li{border-top:1px dashed var(--cizgi)}
.ray-liste a{display:flex;align-items:center;gap:11px;min-height:50px;padding:0 15px;
  color:var(--lacivert);text-decoration:none;font-family:var(--baslik);font-weight:600;
  font-size:17px;letter-spacing:.04em;text-transform:uppercase}
.ray-liste a:hover{background:var(--krem);color:var(--mavi)}
.ray-liste a.acik{background:var(--krem);box-shadow:inset 3px 0 0 var(--kirmizi)}
.ray-ikon{width:19px;height:19px;flex:none;color:var(--mavi)}

/* ============== KORUNAN OGE 3+4: BILGI BANKASI / KULLANIM KILAVUZU kartlari
   Eski sitede iki tonlu baslik (ust koyu, alt renkli) + sagda yuvarlak ikon.
   O KURGU korundu; kabartma/parlak cam cilasi korunmadi. */
/* Eski sitedeki iki kutu: iki tonlu buyuk harf baslik (ust lacivert, alt
   turuncu/camgobegi) + sagda yuvarlak parlak ikon yuvasi. Olculdu: eski
   kutu 235x126 idi; buradaki de o boyda. */
.ray-kartlar{display:grid;gap:12px}
.rk{display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:98px;padding:16px 18px;border:1px solid var(--cizgi);border-radius:6px;
  background:linear-gradient(160deg,#fff 0%,#fff 52%,#eceff4 100%);text-decoration:none;
  box-shadow:0 1px 2px rgba(4,40,87,.07);
  transition:border-color .18s,box-shadow .18s}
.rk:hover{border-color:var(--mavi);box-shadow:var(--golge)}
.rk-yazi{display:block;font-family:var(--baslik);font-weight:700;line-height:1.02;
  text-transform:uppercase;letter-spacing:.03em}
.rk-yazi b{display:block;font-size:clamp(19px,1rem + .5vw,24px);color:var(--lacivert)}
.rk-yazi em{display:block;font-style:normal;font-size:clamp(19px,1rem + .5vw,24px)}
.rk-turuncu .rk-yazi em{color:var(--turuncu)}
.rk-mavi .rk-yazi em{color:#1d84c9}
.rk-ikon{display:grid;place-items:center;width:58px;height:58px;flex:none;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#fff 0%,#eef1f5 62%,#dfe4ea 100%);
  box-shadow:inset 0 0 0 1px #d6dbe3, 0 1px 3px rgba(4,40,87,.14)}
.rk-ikon-svg{width:26px;height:26px}
.rk-turuncu .rk-ikon-svg{color:var(--turuncu)}
.rk-mavi .rk-ikon-svg{color:#1d84c9}

/* --------------- buyuk surumu — ana sayfada FOTOGRAF + CAPRAZ RENK KAMASI
   Eski sitenin kurgusu: tam kanama kumes fotografi, sagdan capraz kesilmis
   renk alani, uzerinde beyaz buyuk harf baslik ve "detaylar icin tiklayin »".
   Kama acisi eski karelerden olculdu: ust kenarda %62, alt kenarda %44. */
.buyuk-kartlar{display:grid;gap:clamp(12px,1.4vw,18px);margin-bottom:clamp(18px,2vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.bk{position:relative;display:block;aspect-ratio:480/212;overflow:hidden;
  border-radius:var(--yuvarlak);text-decoration:none;background:var(--lacivert);
  box-shadow:var(--golge);transition:transform .2s,box-shadow .2s}
.bk:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(4,40,87,.22)}
@media (prefers-reduced-motion:reduce){.bk{transition:none}.bk:hover{transform:none}}
.bk-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bk-kama{position:absolute;inset:0;clip-path:polygon(62% 0, 100% 0, 100% 100%, 44% 100%)}
.bk-yesil .bk-kama{background:linear-gradient(135deg,#3aa832 0%,#1f7a1c 100%)}
.bk-mavi  .bk-kama{background:linear-gradient(135deg,#1f6fd8 0%,#0b3f8f 100%)}
.bk-yazi{position:absolute;right:clamp(14px,2vw,24px);bottom:clamp(12px,1.6vw,20px);
  z-index:2;display:block;text-align:right;font-family:var(--baslik);line-height:1;
  text-transform:uppercase;letter-spacing:.02em;color:#fff}
.bk-yazi b{display:block;font-weight:700;font-size:clamp(22px,1.1rem + 1.1vw,34px)}
.bk-yazi em{display:block;font-style:normal;font-weight:700;
  font-size:clamp(22px,1.1rem + 1.1vw,34px)}
.bk-yazi i{display:block;font-style:italic;font-family:var(--govde);font-weight:400;
  text-transform:none;letter-spacing:0;font-size:13px;margin-top:8px;line-height:1.3;
  color:rgba(255,255,255,.92)}
.bk-ikon{position:absolute;right:clamp(16px,2.4vw,30px);top:clamp(10px,1.4vw,18px);z-index:2;
  display:grid;place-items:center;width:clamp(44px,5vw,62px);height:clamp(44px,5vw,62px);
  border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 3px 10px rgba(2,20,45,.3)}
.bk-ikon-svg{width:clamp(22px,2.4vw,30px);height:clamp(22px,2.4vw,30px)}
.bk-yesil .bk-ikon-svg{color:#1f7a1c}
.bk-mavi  .bk-ikon-svg{color:#0b3f8f}

/* ================================================================= kirinti */
.kirinti{padding:12px 0 0;font-size:13.5px}
.kirinti ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0;color:var(--gri)}
.kirinti li + li::before{content:"›";margin-right:6px;color:#aab4c2}
.kirinti a{color:var(--gri);text-decoration:none}
.kirinti a:hover{color:var(--mavi);text-decoration:underline}
.kirinti span{color:var(--kara)}

/* ==================================================================== yazi
   🔴 OKUMA OLCUSU KABA DEGIL, METIN OGESINE konur: kap header bandiyla ayni
   kenarda biter, yalniz duz metin satiri 68ch'te kalir. */
.yazi > p,.yazi > ul,.yazi > ol,.yazi > blockquote{max-width:68ch}
.yazi{margin-bottom:1.2em}
.yazi-uzun > p{margin-bottom:.85em}
.yazi .madde{padding-left:14px;border-left:2px solid var(--cizgi)}
.giris-cumle{font-size:1.06em;color:var(--gri);max-width:62ch}

/* ================================================================= ikili blok */
.ikili-blok{display:grid;gap:clamp(18px,2.4vw,36px);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.ib-ozet{color:var(--gri);max-width:60ch}
.ib-alinti{border-left:3px solid var(--mavi);padding-left:14px;color:var(--kara);max-width:60ch}
.ib-kare{margin:0}
.ib-kare img{width:100%;aspect-ratio:810/499;object-fit:cover;border-radius:var(--yuvarlak)}

.genis-kare{margin:0 0 1.4em}
.genis-kare img{width:100%;max-height:420px;object-fit:cover;border-radius:var(--yuvarlak)}

/* ================================================================== sahne */
.bolum-sahne{overflow-x:clip}
.sahne-kap{border:1px solid var(--cizgi);border-radius:var(--yuvarlak);background:#fbfcfe;
  padding:clamp(8px,1vw,16px)}
.sahne-kap-dar{max-width:860px}
.sahne{display:block;width:100%;height:auto}

/* ------------------------------------------------- kumes kesiti cizim dili */
.sk-govde{fill:#fff;stroke:var(--lacivert);stroke-width:2;stroke-linejoin:round}
.sk-cizgi{fill:none;stroke:var(--lacivert);stroke-width:1.6;stroke-linecap:round}
.sk-cizgi-d{fill:none;stroke:#8e9bad;stroke-width:1.2}
.sk-boru{fill:none;stroke:var(--lacivert);stroke-width:3;stroke-linecap:round}
.sk-kot{fill:none;stroke:#8e9bad;stroke-width:2}
.sk-altlik{fill:url(#sk-altlik);stroke:none}
.sk-altlik-c{fill:url(#sk-altlik);stroke:var(--lacivert);stroke-width:1.6}
.sk-dolu{fill:var(--kirmizi);stroke:var(--lacivert);stroke-width:1.4;stroke-linejoin:round}
.sk-ekran{fill:#cfe0f5;stroke:var(--lacivert);stroke-width:1.2}
.sk-gobek{fill:var(--lacivert)}
.sk-kanat,.sk-kanat-f{fill:none;stroke:var(--lacivert);stroke-width:2.2;stroke-linecap:round}
.sk-isi{fill:none;stroke:var(--kirmizi);stroke-width:1.6;stroke-linecap:round;opacity:.75}
.sk-yem circle{fill:var(--kirmizi)}
.sk-etiket{font-family:var(--baslik);font-weight:600;font-size:24px;fill:#5b6472;letter-spacing:.06em}
.sk-olcu{fill:none;stroke:#8e9bad;stroke-width:1.2}
.sk-olcu text{stroke:none}
.sk-ampul circle{fill:#fff8d8}

@media (prefers-reduced-motion:no-preference){
  /* yem helezonda ilerler — isi yapan parca */
  .sk-yem circle{animation:sk-yem 4.4s linear infinite;animation-delay:var(--g,0s)}
  @keyframes sk-yem{from{transform:translateX(112px)}to{transform:translateX(232px)}}
  /* fan doner (linear) */
  .sk-pervane{transform-box:fill-box;transform-origin:center;animation:sk-don 2.4s linear infinite}
  @keyframes sk-don{to{transform:rotate(360deg)}}
  /* klape kanadi acilip kapanir */
  .sk-kanat{transform-box:fill-box;transform-origin:left center;animation:sk-klape 5s ease-in-out infinite}
  @keyframes sk-klape{0%,100%{transform:rotate(0)}50%{transform:rotate(-26deg)}}
  /* ampuller sirayla parlar */
  .sk-ampul circle{animation:sk-isik 4.8s ease-in-out infinite;animation-delay:var(--g,0s)}
  @keyframes sk-isik{0%,100%{opacity:.5}18%{opacity:1}}
  /* isitici dalgalari */
  .sk-isi{animation:sk-isi 3.2s ease-in-out infinite}
  @keyframes sk-isi{0%,100%{opacity:.35}50%{opacity:.85}}
}
/* 🔴 Ekran disindayken duraklat */
.sahne.uyu *{animation-play-state:paused !important}

/* ----------------------------------------------------- civciv seridi (Ö20)
   Ayni cizim dili: konturlu govde, beyaz/dusuk doygunlukta dolgu, soluk
   izgara kagit. Doygun renk yalniz firmanin kendi urununde (kirmizi yemlik
   tabagi) ve gagada. Hareket eden tek sey ISI YAPAN parca: civcivin basi
   ve dusen yem tanesi — govde ziplamaz. */
.sc-boru{fill:none;stroke:var(--lacivert);stroke-width:3.5;stroke-linecap:round}
.sc-cizgi{fill:none;stroke:var(--lacivert);stroke-width:1.8;stroke-linecap:round}
.sc-cizgi-i{fill:none;stroke:#9aa6b6;stroke-width:1.4;stroke-linecap:round}
.sc-govde{fill:#fff;stroke:var(--lacivert);stroke-width:1.8}
.sc-tabak{fill:var(--kirmizi);stroke:var(--lacivert);stroke-width:1.8;stroke-linejoin:round}
.sc-tuy{fill:#fdf2c8;stroke:var(--lacivert);stroke-width:1.8}
.sc-gaga{fill:#f0a43e;stroke:var(--lacivert);stroke-width:1.4;stroke-linejoin:round}
.sc-goz{fill:var(--lacivert)}
.sc-ibik{fill:none;stroke:var(--kirmizi);stroke-width:1.8;stroke-linecap:round}
.sc-kot{fill:none;stroke:#8e9bad;stroke-width:2}
.sc-altlik{fill:#eef1f5}
.sc-yem circle{fill:#d8a33a}
@media (prefers-reduced-motion:no-preference){
  /* 🔴 `transform-box:fill-box` SART: yoksa donus ogenin kendi kutusuna
     degil SVG kanvasina gore hesaplanir ve bas govdeden kopar. */
  .sc-bas{transform-box:fill-box;transform-origin:14% 86%;
    animation:sc-gaga 2.8s ease-in-out infinite;animation-delay:var(--g,0s)}
  @keyframes sc-gaga{0%,52%,100%{transform:rotate(0)}68%,78%{transform:rotate(23deg)}}
  .sc-yem circle{animation:sc-dus 3.4s linear infinite;animation-delay:var(--g,0s)}
  @keyframes sc-dus{
    0%{transform:translateY(0);opacity:0}
    12%{opacity:1}
    52%{transform:translateY(20px);opacity:1}
    58%,100%{transform:translateY(20px);opacity:0}}
}

/* ------------------------------------------------- dezenfeksiyon asamalari
   🔴 SVG DEGIL HTML: SVG metni viewBox ile olcekleniyordu ve 375 px'te
   7,2 px'e dusuyordu (esik 8). HTML listesi her genislikte kendi yazi
   boyunu korur, dar ekranda sarar. */
.asama-serit{display:grid;gap:10px;list-style:none;margin:0 0 1.4em;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.asama{display:flex;align-items:center;gap:11px;padding:12px 14px;background:var(--beyaz);
  border:1px solid var(--cizgi);border-radius:var(--yuvarlak)}
.asama-no{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;
  border:2px solid var(--lacivert);background:var(--beyaz);
  font-family:var(--baslik);font-weight:700;font-size:19px;color:var(--lacivert)}
.asama-ad{font-size:14.5px;line-height:1.3;color:var(--kara)}
@media (prefers-reduced-motion:no-preference){
  /* 🔴 Taban hal CIZILI: animasyon hic calismazsa halka lacivert kalir. */
  .asama-no{animation:asama-vur 9.6s linear infinite;animation-delay:var(--g,0s)}
  @keyframes asama-vur{
    0%,12%{border-color:var(--kirmizi);color:var(--kirmizi)}
    15%,100%{border-color:var(--lacivert);color:var(--lacivert)}}
}

/* ============================================================= yazi listesi */
.yazi-liste{list-style:none;margin:0;padding:0;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.yazi-liste a{display:block;padding:12px 14px;background:var(--beyaz);
  border:1px solid var(--cizgi);border-radius:var(--yuvarlak);text-decoration:none}
.yazi-liste a:hover{border-color:var(--mavi)}
.yazi-liste b{display:block;font-family:var(--baslik);font-size:18px;color:var(--lacivert)}
.yazi-liste span{display:block;font-size:13.5px;color:var(--gri);margin-top:3px;line-height:1.45}

.bilgi-liste{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bilgi-liste a{display:flex;gap:14px;padding:14px 16px;background:var(--beyaz);
  border:1px solid var(--cizgi);border-radius:var(--yuvarlak);text-decoration:none;
  transition:border-color .18s,box-shadow .18s}
.bilgi-liste a:hover{border-color:var(--mavi);box-shadow:var(--golge)}
.bl-no{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:50%;
  background:var(--krem);color:var(--mavi)}
.bl-ikon{width:21px;height:21px}
.bl-govde{display:block;min-width:0}
.bl-govde b{display:block;font-family:var(--baslik);font-size:21px;color:var(--lacivert);line-height:1.12}
.bl-govde em{display:block;font-style:normal;font-size:14px;color:var(--gri);margin-top:4px;line-height:1.5}
.bl-govde i{display:block;font-style:normal;font-size:12.5px;color:#8e9bad;margin-top:5px}

/* ======================================================= urun SATIR listesi
   Eski sitenin kategori sayfasi: acik gri satir, solda mavi cerceveli kare
   (arkasinda kaydirilmis acik mavi blok + sol ustte lacivert dil), sagda
   buyuk harf baslik ve uc-dort satir metin, en sagda "devami" etiketi. */
.urun-satirlar{list-style:none;margin:0;padding:0;display:grid;gap:clamp(10px,1.2vw,15px)}
.ur{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(16px,2.2vw,30px);
  align-items:start;padding:clamp(14px,1.6vw,20px) clamp(14px,1.8vw,24px);
  background:#f2f4f7;border:1px solid var(--cizgi);border-radius:var(--yuvarlak);
  text-decoration:none;color:inherit;transition:background .18s,border-color .18s,box-shadow .18s}
.ur:hover{background:var(--beyaz);border-color:var(--mavi);box-shadow:var(--golge)}
.ur-kare{position:relative;display:block;width:clamp(116px,13vw,172px);flex:none;
  margin:4px 10px 10px 0}
.ur-kare::before{content:"";position:absolute;left:0;top:-7px;width:38px;height:7px;
  background:var(--lacivert)}
.ur-kare img{display:block;width:100%;aspect-ratio:800/738;object-fit:cover;
  border:4px solid var(--beyaz);box-shadow:0 0 0 1px var(--cizgi),-9px 9px 0 0 #cfe0f5}
.ur-kare-yok{display:grid;place-items:center;aspect-ratio:800/738;background:#e7ebf1;
  border:4px solid var(--beyaz);box-shadow:0 0 0 1px var(--cizgi),-9px 9px 0 0 #cfe0f5;
  font-family:var(--baslik);font-weight:700;font-size:38px;color:#aab4c2}
.ur-govde{display:block;min-width:0}
.ur-ad{display:block;font-family:var(--baslik);font-weight:700;
  font-size:clamp(18px,.95rem + .55vw,24px);color:var(--mavi);text-transform:uppercase;
  letter-spacing:.01em;line-height:1.1;margin-bottom:.4em}
.ur:hover .ur-ad{color:var(--lacivert)}
.ur-ozet{display:block;font-style:normal;color:var(--gri);font-size:14.5px;line-height:1.6}
.ur-etiket{align-self:start;flex:none;display:inline-flex;align-items:center;min-height:26px;
  padding:0 12px;border-radius:3px;background:var(--mavi);color:var(--beyaz);
  font-size:12.5px;letter-spacing:.04em;white-space:nowrap}
.ur:hover .ur-etiket{background:var(--lacivert)}

/* ==================================================================== urun */
.urun-ust{display:grid;gap:clamp(16px,2vw,30px);align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));margin-bottom:1.4em}
.urun-kare{margin:0;border:1px solid var(--cizgi);border-radius:var(--yuvarlak);
  background:var(--krem);overflow:hidden}
.urun-kare img{width:100%;aspect-ratio:800/738;object-fit:cover}
.urun-kare-yok{display:grid;place-items:center;aspect-ratio:800/738}
.urun-kare-yok span{font-family:var(--baslik);font-weight:700;font-size:64px;color:#aab4c2}
.urun-giris{font-size:1.05em}
.urun-aile{font-size:13.5px;color:var(--gri);margin:0}

.foto{margin:0;border:1px solid var(--cizgi);border-radius:var(--yuvarlak);overflow:hidden;
  background:var(--krem)}
.foto img{width:100%;aspect-ratio:800/738;object-fit:cover}
.foto-genis img{aspect-ratio:810/499}

.belge{margin:0;text-align:center}
.belge a{display:block;border:1px solid var(--cizgi);border-radius:var(--yuvarlak);
  overflow:hidden;background:var(--beyaz)}
.belge a:hover{border-color:var(--mavi)}
.belge img{width:100%;height:auto}
.belge figcaption{font-size:13.5px;color:var(--gri);margin-top:8px;line-height:1.4}

.diger-aileler{margin-top:clamp(26px,3vw,40px);padding-top:16px;border-top:2px solid var(--cizgi)}
.diger-aileler h2{font-size:19px;margin-bottom:.5em}
.diger-aileler ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.diger-aileler a{display:inline-flex;align-items:center;min-height:38px;padding:0 13px;
  border:1px solid var(--cizgi);border-radius:var(--yuvarlak);background:var(--beyaz);
  font-size:14px;text-decoration:none;color:var(--lacivert);white-space:nowrap}
.diger-aileler a:hover{border-color:var(--mavi);color:var(--mavi)}

.yazi-gezinti{margin-top:clamp(26px,3vw,40px);padding-top:16px;border-top:2px solid var(--cizgi)}
.yazi-gezinti h2{font-size:19px}
.yazi-gezinti ul{display:grid;gap:6px;list-style:none;margin:0 0 1em;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.yazi-gezinti a{display:block;padding:8px 0;color:var(--lacivert);text-decoration:none;
  border-bottom:1px dashed var(--cizgi)}
.yazi-gezinti a:hover{color:var(--mavi)}

/* ================================================================= indirme */
.indirme{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;
  padding:18px 20px;border:1px solid var(--cizgi);border-radius:var(--yuvarlak);
  background:var(--krem);margin-bottom:1.2em}
.indirme-ikon{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:var(--beyaz);border:1px solid var(--cizgi);color:var(--mavi)}
.indirme-svg{width:26px;height:26px}
.indirme-govde b{display:block;font-family:var(--baslik);font-size:21px;color:var(--lacivert);line-height:1.15}
.indirme-govde em{display:block;font-style:normal;font-size:13.5px;color:var(--gri);margin-top:3px}

.bos-kutu{padding:22px;border:1px dashed var(--cizgi);border-radius:var(--yuvarlak);
  background:var(--krem)}
.bos-kutu p{max-width:62ch;color:var(--gri)}

.video{margin:0}
.video-kap{position:relative;aspect-ratio:16/9;background:var(--krem);
  border:1px solid var(--cizgi);border-radius:var(--yuvarlak);overflow:hidden}
.video-kap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video figcaption{font-size:14px;color:var(--gri);margin-top:7px}

/* ================================================================ iletisim */
.sube-izgara{display:grid;gap:clamp(12px,1.6vw,20px);margin-bottom:clamp(22px,2.6vw,36px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.sube{padding:18px 20px;border:1px solid var(--cizgi);border-radius:var(--yuvarlak);
  background:var(--beyaz)}
.sube h2{font-size:21px;margin-bottom:.4em;padding-bottom:.3em;border-bottom:2px solid var(--krem)}
.sube p{display:flex;gap:9px;margin:0 0 7px;font-size:14.5px;line-height:1.45}
.sube p svg{width:17px;height:17px;flex:none;color:var(--mavi);margin-top:3px}
.sube a{display:flex;gap:9px;color:var(--lacivert);text-decoration:none}
.sube a:hover{color:var(--mavi);text-decoration:underline}
.sube-faks,.sube-kisi{color:var(--gri)}

.iletisim-alt{display:grid;gap:clamp(20px,2.4vw,36px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr))}
.form-kutu,.harita-kutu{min-width:0}
.harita{aspect-ratio:4/3;border:1px solid var(--cizgi);border-radius:var(--yuvarlak);
  overflow:hidden;margin-bottom:1em;background:var(--krem)}
.harita iframe{width:100%;height:100%;border:0;display:block}

/* ==================================================================== form */
.form{display:grid;gap:12px;max-width:none}
/* 🔴 `subgrid` DEGIL: tek sutuna dusen izgarada etiketleri ust uste bindirir. */
.ikili{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:12px;align-items:start}
.tekli{display:grid}
.form label{display:grid;gap:5px;font-size:14px;color:var(--gri)}
.form label > span{font-weight:700;color:var(--kara)}
.form input,.form select,.form textarea{
  width:100%;min-height:46px;padding:9px 12px;border:1px solid #c3ccd9;
  border-radius:var(--yuvarlak);font:inherit;font-size:15.5px;color:var(--kara);background:var(--beyaz)}
.form textarea{min-height:120px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--mavi);outline:none;
  box-shadow:0 0 0 3px rgba(0,63,136,.14)}
.onay{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--gri)}
.onay input{width:20px;height:20px;min-height:0;flex:none;margin-top:2px}
.form-not{font-size:12.5px;color:#8e9bad;margin:0}
.bal-kabi{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.uyari{padding:12px 14px;border-radius:var(--yuvarlak);margin:0 0 12px;font-size:14.5px}
.uyari-iyi{background:#e7f6ee;border:1px solid #9fd9ba;color:#0a5c34}
.uyari-kotu{background:#fdeceb;border:1px solid #f1b3b1;color:#8f1114}

/* ================================================================== cagri */
.bolum-cagri{background:var(--krem);border-top:1px solid var(--cizgi);border-bottom:1px solid var(--cizgi)}
.cagri-ic{display:grid;gap:clamp(14px,2vw,30px);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.cagri-ic h2{margin-bottom:.25em}
.cagri-ic p{color:var(--gri);max-width:52ch;margin:0}
.cagri-ic .dugme-grid{margin:0}

/* =============================================================== altbilgi
   🔴 ESKI ALTBILGI LACIVERT DEGIL KOMURDU (#262626) ve solunda ince bir
   nokta dokusu vardi; telefon numaralari KIRMIZI basiliyordu. Ilk surumde
   lacivert yapilmisti — sayfa bastan asagi tek renge boguluyordu. */
.altbilgi{background:#262626;color:#b9bec6;margin-top:0;position:relative;overflow:hidden}
.altbilgi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:clamp(60px,8vw,150px);
  background-image:radial-gradient(rgba(255,255,255,.13) 1px, transparent 1px);
  background-size:7px 7px;pointer-events:none}
.alt-ic{position:relative;z-index:1;display:grid;gap:clamp(20px,2.4vw,34px);
  padding:clamp(34px,3.6vw,52px) 0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.alt-kolon{min-width:0}
.alt-logo{background:var(--beyaz);border-radius:var(--yuvarlak);padding:8px 11px;
  width:auto;height:58px;margin-bottom:12px}
.alt-unvan{font-size:14px;line-height:1.45;margin-bottom:10px;color:#e8eaee}
.altbilgi p{display:flex;gap:9px;margin:0 0 8px;font-size:14px;line-height:1.45}
.altbilgi p svg{width:17px;height:17px;flex:none;margin-top:3px;color:#8d96a3}
/* 🔴 `:not(.dugme)`: koyu bolumun genel `a` kurali WhatsApp dugmesinin
   yazisini de ezerdi (ozgulluk 0,1,1 > 0,1,0). */
.altbilgi a:not(.dugme){color:#b9bec6;text-decoration:none;display:flex;gap:9px}
.altbilgi a:not(.dugme):hover{color:var(--beyaz);text-decoration:underline}
/* Telefon ve e-posta KIRMIZI — eski altbilginin imzasi. */
.alt-tel a:not(.dugme),.alt-mail a:not(.dugme),.alt-sube a:not(.dugme){color:#ff6a62}
.alt-tel a:not(.dugme):hover,.alt-mail a:not(.dugme):hover,
.alt-sube a:not(.dugme):hover{color:#ff9a94}
.alt-bas{font-size:16px;color:var(--beyaz);letter-spacing:.1em;text-transform:uppercase;
  margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.14)}
.alt-bas-2{margin-top:22px}
.alt-liste{list-style:none;margin:0;padding:0}
.alt-liste li{margin-bottom:2px}
.alt-liste a{font-size:14px;padding:3px 0}
.alt-sube{margin-bottom:16px;font-size:13.5px;line-height:1.5}
.alt-sube b{display:block;color:var(--beyaz);font-family:var(--baslik);font-size:16px;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px}
.alt-sube span{display:block;margin:2px 0}
.alt-sube a{display:inline-block !important;margin-right:10px}
.alt-serit{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:10px;padding:14px 0;
  border-top:1px solid rgba(255,255,255,.14);font-size:13px}
.alt-serit p{margin:0;display:block}

/* =============================================================== yuzen wa */
.yuzen{position:fixed;right:14px;bottom:14px;z-index:50}
.yuzen a{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  background:var(--yesil);color:#fff;box-shadow:0 6px 18px rgba(2,20,45,.3)}
.yuzen a:hover{background:var(--yesil-koyu);color:#fff}
.yuzen svg{width:28px;height:28px}

/* ================================================================= ikonlar
   🔴 Olcusu verilmeyen SVG kabini doldurur: `wa_ikonu()` yalniz viewBox
   tasiyor, olcu CSS'te verilir. */
.ikon{width:20px;height:20px;flex:none;fill:none}
.ikon-wa{width:20px;height:20px;flex:none;fill:currentColor}
.dugme .ikon-wa,.yuzen .ikon-wa{fill:currentColor}

/* ============================================================== duyarlilik */
@media (max-width:1040px){
  .ic-duzen{grid-template-columns:minmax(0,1fr)}
  .ray{position:static;flex-direction:row;flex-wrap:wrap;gap:12px}
  .ray > nav{flex:1 1 260px;min-width:0}
  .ray-kartlar{flex:1 1 300px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
}

@media (max-width:980px){
  /* Beyaz baslikta menu CUBUGU acilir-kapanir panele doner; logo kucultulur
     ama yine de iri kalir (eski sitenin en belirgin ogesi). */
  /* 🔴 Telefon satiri LOGONUN USTUNE BINIYORDU: `.us-tel` nowrap, `.ust-sag`
     ise daralamiyordu, icerik sola tasiyordu. Dar ekranda ust satir kendi
     satirina iniyor. */
  .ust-ic{align-items:center;gap:10px;flex-wrap:wrap}
  .marka img{height:clamp(54px,11vw,78px)}
  .ust-sag{flex:1 1 100%;align-items:stretch;min-width:0}
  .ust-us{justify-content:flex-end;gap:10px;min-width:0}
  .us-tel{font-size:13px}
  .menu-dugme{margin-left:auto}
  .ana-menu{max-height:0;overflow:hidden;transition:max-height .22s ease;box-shadow:none}
  .ana-menu.acik{max-height:560px;box-shadow:0 2px 6px rgba(2,20,45,.3)}
  .ana-menu ul{flex-direction:column}
  .ana-menu li + li{border-left:0;border-top:1px solid rgba(255,255,255,.16)}
  .ana-menu a{height:auto;min-height:48px;padding:0 16px;border-radius:0 !important}
  .ana-menu a.acik{box-shadow:inset 3px 0 0 var(--kirmizi)}
  .menu-dugme{display:inline-flex;align-items:center;gap:9px;min-height:44px;
    padding:0 13px;background:var(--mavi-2);border:1px solid var(--mavi-2);
    border-radius:var(--yuvarlak);color:var(--beyaz);font-family:var(--baslik);font-weight:600;
    font-size:16px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
  .menu-cizgi{position:relative;display:block;width:19px;height:2px;background:currentColor}
  .menu-cizgi::before,.menu-cizgi::after{content:"";position:absolute;left:0;width:19px;height:2px;
    background:currentColor}
  .menu-cizgi::before{top:-6px}
  .menu-cizgi::after{top:6px}
  .slogan{display:none}
  /* Baslik seridinde operator karesi dar ekranda yer kaplamiyor. */
  .bs-operator{display:none}
  .bs-ic{min-height:78px;flex-wrap:wrap;gap:6px 14px;padding:12px 0}
  .bs-iletisim{font-size:14px}
}

@media (max-width:860px){
  /* 🔴 DOKUNMA HEDEFI 44 px. Altbilgi "sadece bir liste" degil: icinde
     telefon, e-posta ve sube numaralari var — sitenin en kritik eylemleri.
     Olculdu (375 px): us-tel 22, dil dugmesi 26, altbilgi baglantilari 20,
     altbilgi WhatsApp dugmesi 40 px idi. */
  .alt-liste a,
  .altbilgi a:not(.dugme),
  .alt-sube a{align-items:center;min-height:44px;padding:2px 0}
  /* Kirinti baglantisi da gercek bir gezinti hedefi: 16 px olculmustu. */
  .kirinti a{display:inline-flex;align-items:center;min-height:44px}
  .kirinti ol{align-items:center;gap:4px 6px}
  .us-tel{min-height:44px}
  .us-dil a{min-height:44px;min-width:44px}
  .dugme-kucuk{min-height:44px}

  /* 🔴 MOBILDE Ö13 RENKLE DEGIL SIRAYLA COZULUR — olculdu 375x812.
     Ilk olcum: gorsel %57,8 · yazi %23,8. Yazinin dagilimi sunu gosterdi:
     liste %8,1 · kahramanin ALTINDAKI kunye bandi %8,5 · h1 %3,2.
     Yani en buyuk pay listede degil, katlanmaya giren KUNYE BANDINDAYDI.
     Uc sey birden: (a) kahraman uzadi, kunye bandi katlanmanin altina indi,
     (b) liste iki sutun ve bir tik kucuk yazi, (c) ozet telefonda basilmiyor
     (ayni metin ic sayfalarda duruyor). */
  /* 🔴 Manset artik METIN AGIRLIKLI bir blok (kullanici eski kurguyu istedi:
     ortali, iri, dokuz baslik). Telefonda yazi payini olabildigince kismak
     icin satirlar kuculur ve sikilasir; yine de Ö13'un %15 esiginin
     uzerinde kalir — bu bilincli bir sapma, bkz. site.php defteri. */
  .kahraman{min-height:clamp(540px,160vw,660px)}
  .kahraman-ic{padding:clamp(10px,2vw,20px) 0}
  .kahraman-liste a{font-size:clamp(14px,3.9vw,17px);
    padding:2px clamp(10px,2.4vw,16px);gap:8px;line-height:1.15;min-height:44px}
}

@media (max-width:700px){
  /* 🔴 Urun satiri UC SUTUNDU; telefonda metin sutunu 90 px'e dusup her
     kelime alt alta geliyordu. Dar ekranda "devami" etiketi metnin ALTINA
     iniyor, kare kuculuyor. */
  .ur{grid-template-columns:auto minmax(0,1fr);gap:12px 14px}
  .ur-kare{grid-row:1 / span 2;width:clamp(88px,25vw,118px);margin:2px 8px 8px 0}
  .ur-govde{grid-column:2}
  .ur-etiket{grid-column:2;justify-self:start}
  .ur-ozet{font-size:14px}
}

@media (max-width:620px){
  .izgara-kat,.izgara-gal{grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))}
  .izgara-urun,.izgara-foto{grid-template-columns:repeat(auto-fill,minmax(min(100%,142px),1fr))}
  .kart-ad{font-size:16px}
  .bk{aspect-ratio:480/230}
  .dugme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .indirme{grid-template-columns:auto minmax(0,1fr);row-gap:12px}
  .indirme .dugme{grid-column:1 / -1;width:100%}
  .sk-etiket{font-size:30px}      /* 375 px'te ~11 px: esik 8 px */
  .sd-ad{font-size:24px}
}

/* ============================================================ yazdirma */
@media print{
  .ust,.ic-bant,.yuzen,.ray,.bolum-cagri,.altbilgi{display:none}
  body{font-size:11pt}
}

/* =========================================================================
   🔴 WHATSAPP IKI MOD — DOSYANIN SONUNDA, CIFT SINIFLA
   `wa_baglanti()` iki baglanti birden basiyor; hangisinin gorunecegine CSS
   karar verir. Kabin kendi `display`'i (`.dugme-grid .dugme{width:100%}`
   gibi) bu kurali ezmesin diye gorunurluk CIFT SINIFLA ve en sonda yazilir,
   yoksa WhatsApp IKI KEZ cikar.
   ========================================================================= */
a.dugme-wa.wa-masaustu,a.yuzen-wa.wa-masaustu{display:none}
@media (hover:hover) and (pointer:fine){
  a.dugme-wa.wa-mobil,a.yuzen-wa.wa-mobil{display:none}
  a.dugme-wa.wa-masaustu{display:inline-flex}
  a.yuzen-wa.wa-masaustu{display:grid}
}