/* =============================================================================
   modern.css - Sandalye Adasi tasarim sistemi (Modernizasyon Adim 1)
   -----------------------------------------------------------------------------
   YUKLEME SIRASI: mobile-fixes.css'ten SONRA yuklenir.
   Tek sebebi responsive.css'in yogun !important kullanmasi; tasarim
   kurallarinin kazanmasi gerekiyor.

   >>> BU DOSYA MOBILE-FIXES.CSS'IN GUVENLIK AGINI YENIDEN TANIMLAMAZ <<<
   Burada su kurallar YAZILMAZ:
     img{max-width}   html/body{overflow-x}   input{font-size:16px}   env(safe-area-*)
   Guvenlik agi son sozu soylemeye devam eder. Degisiklikten sonra dogrulama:
     node olc4.mjs   (kirpma-bilincli tasma olcumu; beklenen: 6 genislikte TEMIZ)

   RENKLER: moduller rengi VERITABANINDAN alip <body> icinde <style> blogu
   olarak basar; o bloklar sira geregi bu dosyayi ezer. Bu yuzden PALET
   veritabaninda tutulur (bkz. Yedekler/palet/palet.php). Buradaki token'lar
   yapisal stiller icindir: golge, yaricap, gecis, tipografi.
   ========================================================================== */

:root {
  /* --- Notr olcek: sicak tonlu (eski soguk gri #F8F8F8 yerine) --- */
  --ada-00: #FFFFFF;
  --ada-05: #F7F5F1;   /* kemik - bolum zemini */
  --ada-10: #EFEBE3;   /* ince dolgu */
  --ada-20: #DFD9CF;   /* kenarlik */
  --ada-40: #A9A398;   /* sessiz metin */
  --ada-60: #6E7170;   /* ikincil metin */
  --ada-80: #343A38;   /* guclu metin */
  --ada-95: #171A19;   /* murekkep - ana metin */

  /* --- Marka --- */
  --ada-ana:        #1E3A34;  /* derin orman - header/footer/CTA zemini */
  --ada-ana-2:      #2C544B;
  --ada-vurgu:      #C2603C;  /* terracotta - buton, aktif durum */
  --ada-vurgu-koyu: #A44E2E;
  --ada-vurgu-05:   #F6EAE3;

  /* --- Yaricap --- */
  --ada-r-sm: 6px;
  --ada-r-md: 10px;
  --ada-r-lg: 16px;

  /* --- Golge olcegi: dusuk opaklik, sicak ton --- */
  --ada-golge-1: 0 1px 2px rgba(23,26,25,.06), 0 1px 3px rgba(23,26,25,.04);
  --ada-golge-2: 0 2px 6px rgba(23,26,25,.07), 0 6px 16px rgba(23,26,25,.06);
  --ada-golge-3: 0 8px 20px rgba(23,26,25,.10), 0 16px 40px rgba(23,26,25,.08);

  /* --- Hareket --- */
  --ada-sure-hizli: 160ms;
  --ada-sure:       260ms;
  --ada-sure-yavas: 480ms;
  --ada-egri:         cubic-bezier(.22,.61,.36,1);
  --ada-egri-yumusak: cubic-bezier(.4,0,.2,1);
}

/* =============================================================================
   1. TIPOGRAFI RITMI
   Tema Raleway + Open Sans kullaniyor (yerel, google-fonts.css).
   Akiskan olcek: 320px'te kucuk, 1440px'te buyuk; ara degerler hesaplanir.
   ========================================================================== */
.ada-bolum-basligi {
  font-family: 'Raleway', 'Open Sans', Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.15;
  color: var(--ada-95);
  margin: 0 0 12px;
  font-size: clamp(1.625rem, 1.35rem + 1.35vw, 2.5rem);
}
.ada-bolum-spot {
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ada-60);
  max-width: 62ch;
  margin: 0 auto;
  font-size: clamp(.9375rem, .89rem + .22vw, 1.0625rem);
}

/* =============================================================================
   2. BUTONLAR
   Yumusak yaricap, basisla hafif cokme, klavye odak halkasi.
   ========================================================================== */
.ada-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .875em 1.75em;
  border: 1px solid transparent;
  border-radius: var(--ada-r-sm);
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: .02em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ada-sure) var(--ada-egri),
              border-color var(--ada-sure) var(--ada-egri),
              color var(--ada-sure) var(--ada-egri),
              box-shadow var(--ada-sure) var(--ada-egri),
              transform var(--ada-sure-hizli) var(--ada-egri);
}
.ada-btn:hover { text-decoration: none; }
.ada-btn:active { transform: translateY(1px); }
.ada-btn:focus-visible { outline: 2px solid var(--ada-vurgu); outline-offset: 3px; }

.ada-btn-birincil {
  background: var(--ada-vurgu);
  color: #fff;
  box-shadow: var(--ada-golge-1);
}
.ada-btn-birincil:hover {
  background: var(--ada-vurgu-koyu);
  color: #fff;
  box-shadow: var(--ada-golge-2);
}

.ada-btn-hayalet {
  background: transparent;
  color: currentColor;
  border-color: currentColor;
}

/* --- Bootstrap varyanti olarak marka rengi ---------------------------------
   header.php butonu sinifi "btn-<deger>" seklinde uretiyor ve panel yalnizca
   6 Bootstrap varyanti sunuyordu (warning/info/danger/success/primary/secondary).
   Panele 7. secenek "Marka Rengi" (deger: ada) eklendi; karsiligi burasi.
   .btn taban stilini Bootstrap veriyor, burada sadece renk katmani var.        */
.btn-ada {
  background-color: var(--ada-vurgu);
  border-color: var(--ada-vurgu);
  color: #fff;
  transition: background-color var(--ada-sure) var(--ada-egri),
              border-color var(--ada-sure) var(--ada-egri),
              box-shadow var(--ada-sure) var(--ada-egri);
}
.btn-ada:hover,
.btn-ada:focus {
  background-color: var(--ada-vurgu-koyu);
  border-color: var(--ada-vurgu-koyu);
  color: #fff;
}
.btn-ada:focus,
.btn-ada.focus {
  box-shadow: 0 0 0 .2rem rgba(194, 96, 60, .35);   /* yedek */
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ada-vurgu) 35%, transparent);
}

/* =============================================================================
   3. KART TABANI
   transform + box-shadow animate edilir (GPU dostu); width/height edilmez.
   ========================================================================== */
.ada-kart {
  background: var(--ada-00);
  border: 1px solid var(--ada-20);
  border-radius: var(--ada-r-md);
  overflow: hidden;
  transition: transform var(--ada-sure) var(--ada-egri),
              box-shadow var(--ada-sure) var(--ada-egri),
              border-color var(--ada-sure) var(--ada-egri);
}
.ada-kart:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--ada-golge-3);
}

/* =============================================================================
   4. URUN KARTI  (Adim 2)
   Tema kartinin sinif adlari korunuyor - products.php, products-cat-leftbar.php,
   products_cat_sub.php ve arama sonuclari ayni isaretlemeyi paylasiyor, yani
   buradaki her kural dort ekranda birden gecerli.
   ========================================================================== */

/* --- Kart yuzeyi ---------------------------------------------------------- */
.product-main-box {
  border: 1px solid var(--ada-20);
  border-radius: var(--ada-r-md);
  background: var(--ada-00);
  /* tema 0.1s linear kullaniyordu - goze carpmayan, mekanik bir gecis */
  transition: transform var(--ada-sure) var(--ada-egri),
              box-shadow var(--ada-sure) var(--ada-egri),
              border-color var(--ada-sure) var(--ada-egri);
}
.product-main-box:hover {
  transform: translateY(-4px);
  border-color: transparent;
  /* tema golgesi 0 0 9px -2px rgba(0,0,0,.13) idi: neredeyse gorunmuyordu */
  box-shadow: var(--ada-golge-3);
}

/* --- Gorsel alani --------------------------------------------------------
   Urun fotograflarinin cogu beyaz zeminli kesme gorsel. Kart da beyaz oldugu
   icin urun "havada" duruyordu; arkasina kemik zemin koyunca siluet okunuyor. */
.product-main-box-img {
  width: 100%;
  background: var(--ada-05);
  border-bottom: 1px solid var(--ada-20);
  border-radius: calc(var(--ada-r-md) - 2px) calc(var(--ada-r-md) - 2px) 0 0;
}
.product-main-box-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;          /* tema: width:261px + height:auto -> ustte hizali, altta bosluk */
  object-position: center;
  transition: transform var(--ada-sure-yavas) var(--ada-egri);
}
.product-main-box:hover .product-main-box-img img { transform: scale(1.06); }

/* --- Ortu: beyaz %40 perde yerine alttan yukselen yumusak koyu gecis ------ */
.product-main-box-img .ovrly {
  background: linear-gradient(to top,
              rgba(23,26,25,.42) 0%,
              rgba(23,26,25,.12) 45%,
              rgba(23,26,25,0)   75%);
  transition: opacity var(--ada-sure) var(--ada-egri);
}

/* --- "Incele" dugmesi ----------------------------------------------------
   Tema: scale(1.5) -> scale(1) ile patlayarak giriyordu; ayrica style.css:205
   icinde "#f27e00 !important" gomulu (eski marka turuncusu, DB paletine dahil
   degil). Asagidaki !important yalnizca onu gecmek icin.                     */
.product-main-box-img .buttons { top: auto; bottom: 14px; transform: translateX(-50%); }
.product-main-box-img .buttons .text {
  background-color: var(--ada-vurgu) !important;
  color: #fff !important;
  width: auto;
  min-width: 118px;
  height: auto;
  padding: 10px 20px;
  line-height: 1;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .02em;
  border-radius: var(--ada-r-sm);
  box-shadow: var(--ada-golge-2);
  transform: translateY(10px);        /* patlama yerine asagidan kayma */
  transition: opacity var(--ada-sure) var(--ada-egri),
              transform var(--ada-sure) var(--ada-egri),
              background-color var(--ada-sure) var(--ada-egri);
}
.product-main-box-img .buttons .text i { color: #fff !important; }
.product-main-box:hover .product-main-box-img .buttons .text {
  transform: translateY(0);
}
.product-main-box-img .buttons .text:hover { background-color: var(--ada-vurgu-koyu) !important; }

/* --- Tipografi hiyerarsisi -----------------------------------------------
   Tema kategoriyi 700, urun adini 500 basiyordu: hiyerarsi tersti.
   Artik ad baskin, kategori sessiz ust-etiket.                              */
.product-main-box-baslik {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}
.product-main-box-baslik-in    { height: 52px; }
.product-main-box-baslik-in a  { color: var(--ada-95); transition: color var(--ada-sure) var(--ada-egri); }
.product-main-box-baslik-in a:hover { color: var(--ada-vurgu); }

.product-main-box-category {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  /* --ada-40 idi: beyaz uzerinde OLCULDU 2.51:1, WCAG AA esigi 4.5 -
     kategori etiketi okunmuyordu. --ada-60 ayni sessizligi verip 4.93:1 yapiyor. */
  color: var(--ada-60);
  padding-bottom: 14px;
}

/* --- Diger gomulu turuncu noktalari (style.css:39 ve :788) --------------- */
.header-ust-bar-main { border-top-color: var(--ada-ana); }
.product-detail-header-right-normal-button { background-color: var(--ada-vurgu) !important; }

/* =============================================================================
   5. BOLUM BASLIKLARI  (Adim 3)
   Tema sabit px kullaniyordu: 29px masaustu, responsive.css'te 20px / 26px
   !important. Aradaki genisliklerde basliklar ya cok kucuk ya cok buyuk
   kaliyordu. Artik akiskan: 22px -> 36px arasi kesintisiz.
   !important gerekli, cunku responsive.css 5 blokta !important ile yaziyor.
   ========================================================================== */
.modules-header-main-baslik {
  font-size: clamp(1.375rem, 1.05rem + 1.6vw, 2.25rem) !important;
  line-height: 1.15;
  letter-spacing: -.005em;
}
.modules-header-main-spot {
  font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem) !important;
  line-height: 1.6;
  max-width: 60ch;
}

/* =============================================================================
   6. AKISKAN URUN GRIDI  (Adim 3)
   OLCULDU: tema kartlari sabit px veriyordu ve her ekranda yer bosa gidiyordu.
       320px -> kart 200px, sirada 1 kart,  78px bos
       390px -> kart 145px, sirada 2 kart,  41px bos, baslik 2 satira kiriliyor
       414px -> kart 145px, sirada 2 kart,  63px bos, baslik 2 satira kiriliyor
       768px -> kart 200px, sirada 3 kart,  61px bos
   Genislikler artik yuzde: kart kapsayiciyi doldurur, baslik tek satira siger.

   Esikler responsive.css'in KENDI semasindan alindi (321.98 / 410.98 / 767.98 /
   1023.98). Projede zaten 5 ayri breakpoint sistemi var; ALTINCISINI ACMAYIN.
   ========================================================================== */

/* --- inline-block bosluk sorunu ------------------------------------------
   Kartlar inline-block; sablondaki satir sonlari aralarinda ~4-5px'lik metin
   boslugu uretiyor. Yuzde genislik verince bu bosluk son karti alt satira
   itiyordu (olculdu: 390px'te 2 yerine 1 kart). Kapsayicida font-size:0 bu
   bosluklari sifirlar. GUVENLI: .product_tabs_content icinde yalnizca kart
   var, dogrudan metin dugumu yok (urun yoksa blok hic basilmiyor).
   Kartta taban olcu geri veriliyor.                                          */
.product_tabs_content         { font-size: 0; }
/* Liste sayfalarinin izgara kapsayicisi da ayni tuzaga dusuyor: yuzde genislik
   verildiginde satir sonu boslugu son karti alt satira itiyor. OLCULDU
   (Adim 6): 1440px'te kartlar %25'e cekildigi halde satirda 4 degil 3 kart
   cikiyordu. font-size:0 bosluklari sifirlar, kart tabanini geri alir.       */
.products-right-products-area { font-size: 0; }
.product-main-box             { font-size: 1rem; }

/* --- Gorsel kutusu akiskan -----------------------------------------------
   responsive.css kutuya ve img'e !important ile sabit 185/125px veriyor;
   kart yuzdeye gecince gorsel buyumuyordu. Kare oran korunuyor.              */
.product-main-box-img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
}
.product-main-box-img img {
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
}

/* 0 - 321.98 : tek sutun, kapsayiciyi doldurur (kucuk ekranda buyuk gorsel) */
@media screen and (max-width: 321.98px) {
  .product-main-box {
    width: calc(100% - 10px) !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
  }
}

/* 322 - 767.98 : iki sutun, akiskan */
@media screen and (min-width: 322px) and (max-width: 767.98px) {
  .product-main-box {
    width: calc(50% - 10px) !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
  }
}

/* 768 - 1023.98 : uc sutun, akiskan */
@media screen and (min-width: 768px) and (max-width: 1023.98px) {
  .product-main-box {
    width: calc(33.333% - 12px) !important;
    margin-left: 6px !important;
    margin-right: 6px !important;
  }
}

/* Kart ici tipografi dar kartta nefes alsin */
@media screen and (max-width: 767.98px) {
  .product-main-box-baslik    { font-size: 14px; }
  .product-main-box-baslik-in { height: 44px; }
  .product-main-box-category  { font-size: 10px; padding-bottom: 12px; }
}

/* --- 1024px USTU: kartlar kapsayiciyi DOLDURSUN (Adim 6) -------------------
   OLCULDU (1440px): kapsayici zaten genis (1166px) ama kart SABIT 278px +
   2x15px kenar = 308px. 1166/308 = 3.78 -> yalnizca 3 kart siga biliyor ve
   kapsayicinin ICINDE 242px bos kaliyor. Yani "olu alan" dar kapsayicidan
   degil, sabit genislikli kartin akiskan kapsayiciyi dolduramamasindan.
   Akiskan izgara 1023.98px'te bitiyordu; buradan yukari uzatiliyor.

   NEDEN GRID DEGIL: `.product_tabs_content` modulun kendi <style>'inda
   `display:none`, aktif sekme JS ile `display:block` aliyor. Kapsayiciyi
   `display:grid` yapmak GIZLI SEKMELERI DE ACARDI (aktif sekmedeki satir ici
   block ise grid'i hic uygulatmazdi). O yuzden mevcut yuzde-genislik deseni
   surduruluyor.

   KAPSAM: yalnizca anasayfa modulu (.products-home-main-div). `.product-main-box`
   9 sablonda kullaniliyor; liste sayfalarinin yerlesimi BILEREK degistirilmedi.
   Esikler projenin 8 breakpoint semasindan (1023.98 / 1100.98 / 1680.98).      */
@media screen and (min-width: 1024px) and (max-width: 1100.98px) {
  .products-home-main-div .product-main-box { width: calc(33.333% - 16px) !important; margin: 8px !important; }
}
@media screen and (min-width: 1101px) {
  .products-home-main-div .product-main-box { width: calc(25% - 16px) !important; margin: 8px !important; }
}
@media screen and (min-width: 1681px) {
  .products-home-main-div .product-main-box { width: calc(20% - 16px) !important; margin: 8px !important; }
}

/* "Tum urunleri gor" - vitrinden tam listeye gecis.
   Kart izgarasi text-align:center bir kapsayicida; buton da ortalanir.
   Rengi .ada-btn-birincil'den, yani paletten gelir.                          */
.urun-vitrin-tumu {
  width: 100%;
  text-align: center;
  margin: 14px 0 46px;
}
.urun-vitrin-tumu .ada-btn { font-size: .875rem; }
@media screen and (max-width: 767.98px) {
  .urun-vitrin-tumu { margin: 6px 0 32px; }
  .urun-vitrin-tumu .ada-btn { width: min(100%, 320px); }
}

/* =============================================================================
   URUN GRUPLARI IZGARASI
   -----------------------------------------------------------------------------
   Once `inline-block` + yuzdeli genislik + `margin: 8px` ile kuruluydu ve
   sutun sayisi `!important` genisliklerle zorlaniyordu. Iki sorunu vardi:

     1. Onek yanlisti (`.products-home-main-div`) - hicbiri uygulanmiyordu.
     2. Telefonda satirda TEK kart kaliyor ve kart ekranin ancak yarisini
        kapliyordu (olculdu: 538px ekranda 290px kart).

   Artik CSS izgarasi. Sutun sayisi tek yerde, `!important` yok, bosluk `gap`
   ile veriliyor - `margin` ile sahte bosluk uretmeye gerek kalmadi.

   🪤 TELEFONDA TEK SUTUN AMA TAM GENISLIK. Kullanici "mobilde biraz daha
   genislettir" dedi; iki sutuna bolmek kartlari DAHA DA daraltirdi. Tek sutun
   + tam genislik, kategori gorselinin okunur oldugu tek duzen.
   ========================================================================== */
.urun-gruplari-main-div .product-group-main {
  display: grid;
  grid-template-columns: 1fr;            /* telefon: tam genislik */
  gap: 16px;
  text-align: initial;                   /* tema `text-align:center` veriyordu */
}
.urun-gruplari-main-div .product-group-box {
  width: auto !important;                /* izgara hucresi belirler */
  margin: 0 !important;                  /* bosluk artik `gap` */
}

@media screen and (min-width: 600px) {
  .urun-gruplari-main-div .product-group-main { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (min-width: 1024px) {
  .urun-gruplari-main-div .product-group-main { grid-template-columns: repeat(3, 1fr); }
}
@media screen and (min-width: 1681px) {
  .urun-gruplari-main-div .product-group-main { grid-template-columns: repeat(4, 1fr); }
}

/* --- LISTE SAYFALARI: SABIT GENISLIKLI SAG ALAN (Adim 6) -------------------
   Anasayfadakinden FARKLI bir sorun. Orada kapsayici genisti, kart sabitti;
   burada kartlar kapsayiciyi zaten dolduruyor (11px bos) ama KAPSAYICININ
   KENDISI sabit: `.products-right-main{width:935px}` (style.css).

   OLCULDU (/urunler):
       vw     sarmalayici  yanbar  sagalan  kart  satirda
       1101      991        306      730     278     2     <- en kotusu
       1280     1152        306      730     278     2     <- yaygin dizustu
       1440     1296        306      935     278     3
       1680     1512        306      935     278     3     <- sarmalayici buyuyor,
                                                              sag alan buyumuyor
   1101-1439 arasi satirda YALNIZCA 2 kart cikiyordu.

   Cozum: sag alan akiskan (100% - yanbar 306 - kenar 30 - inline-block
   bosluk payi ~6 = 342px), kartlar da yuzde. Esikler projenin semasindan.
   <=1100.98px'te responsive.css zaten yanbari yigip sag alani genisletiyor,
   oraya DOKUNULMUYOR.

   KAPSAM: `.products-right-products-area` yalnizca products.php ve
   products_cat_sub.php'de. search.php / urun_marka.php baska kapsayici
   kullaniyor, onlar BU ADIMDA kapsam disi.                                   */
@media screen and (min-width: 1101px) {
  .products-right-main { width: calc(100% - 342px) !important; }
  .products-right-products-area .product-main-box {
    width: calc(33.333% - 16px) !important;
    margin: 8px !important;
  }
}
@media screen and (min-width: 1440px) {
  .products-right-products-area .product-main-box {
    width: calc(25% - 16px) !important;
    margin: 8px !important;
  }
}

/* --- ARAMA ve MARKA sayfalari: ayni olu alan (Adim 10) --------------------
   `/urunler` icin cozuldu ama `search.php` ve `urun_marka.php` BASKA kapsayici
   kullaniyor: `.bank-page-text-main`. OLCULDU (arama sayfasi): kapsayici
   AKISKAN (1280'de 1037px) ama kart sabit 278px -> 1440 ve 1680'de yine 3 sutun.

   `font-size:0` NEDEN `:has()` ILE: bu sinif 6 sablonda kullaniliyor ve
   dordunde (404, bank, tracing, tracing_result) METIN var - kore uygulanirsa
   o sayfalarin yazisi kaybolurdu. `:has()` yalnizca urun karti iceren
   kapsayiciyi hedefler. Destegi olmayan tarayicida kural hic uygulanmaz;
   kartlar bir eksik sutuna duser, icerik KAYBOLMAZ.                         */
@media screen and (min-width: 1024px) {
  .bank-page-text-main:has(.product-main-box) { font-size: 0; }
}
@media screen and (min-width: 1024px) and (max-width: 1100.98px) {
  .bank-page-text-main .product-main-box { width: calc(33.333% - 16px) !important; margin: 8px !important; }
}
@media screen and (min-width: 1101px) {
  .bank-page-text-main .product-main-box { width: calc(25% - 16px) !important; margin: 8px !important; }
}
@media screen and (min-width: 1681px) {
  .bank-page-text-main .product-main-box { width: calc(20% - 16px) !important; margin: 8px !important; }
}

/* --- URUN GRUBU KARTI (Adim 6) --------------------------------------------
   🔴 BU BLOK BIR SURE HIC UYGULANMADI - olculdu, kullanici bildirdi.
   Kurallar `.products-home-main-div` onegiyle yazilmisti. Modul daha sonra
   `products.php` icinden AYRILDI (kendi satiri olsun, sirasi degistirilebilsin
   diye) ve sarmalayici `.urun-gruplari-main-div` oldu. Ic katmanin adi
   `products-home-main-div-INSIDE`; farkli bir sinif, secici ona uymuyor.

   Sonuc: oran, yaricap, golge, `object-fit`, hover - hicbiri calismiyordu.
   Olculdu (538px): kart 290x155 ama gorsel 310x174, yani gorsel karttan
   BUYUK ve `object-fit: fill` ile eziliyordu; satirda tek kart vardi ve
   ekranin yarisi bos kaliyordu.

   🪤 ONEK DEGISTIRILDI, IKINCI SECICI EKLENMEDI. `.product-group-box`
   isaretlemesi TEK bir dosyada var (_modules/product_groups.php) - tarandi.
   Iki onegi birden tasimak, olu bir seciciyi bakim yuku olarak surdururdu.

   -----------------------------------------------------------------------------
   OLCULEN SORUNLAR (style.css):
   - `.product-group-box` SABIT 382x211px. Kart yuzdeye cekilince genislik
     degisiyor ama yukseklik 211'de kaliyor -> oran kayiyor, gorselin etrafinda
     gri bosluk kaliyor.
   - `.product-group-box-text` mutlak konumlu ve `margin-top:120px` ile
     yerlestirilmis: kart yuksekligi degisince metin yanlis yere dusuyor.
   - Gorsel kutuyu doldurmuyor, hover geri bildirimi yok, koseler sert.

   >>> RENKLER SATIR ICI STIL, DOKUNULMUYOR <<<
   products.php su uc yeri `style="..."` ile DB'den basiyor (satir ici stil
   her CSS kuralini ezer, ezmeye calismak da yanlis olurdu):
       .product-group-box                -> border rengi (urun_grup_border)
       .product-group-box-text-head      -> color + background (urun_grup_back)
       .product-group-box-text-browse    -> color + background (urun_grup_incele_back)
   Burada yalnizca DB'nin bilmedigi seyler var: oran, yaricap, golge, hareket.  */
.urun-gruplari-main-div .product-group-box {
  position: relative;
  height: auto !important;              /* sabit 211px yerine oran */
  aspect-ratio: 16 / 10;
  border-radius: var(--ada-r-md);
  overflow: hidden;
  box-shadow: var(--ada-golge-1);
  transition: transform  var(--ada-sure) var(--ada-egri),
              box-shadow var(--ada-sure) var(--ada-egri);
}
.urun-gruplari-main-div .product-group-box:hover {
  transform: translateY(-4px);
  box-shadow: var(--ada-golge-3);
}

.urun-gruplari-main-div .product-group-box > a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

/* Gorsel kutuyu tam doldursun, hover'da hafifce yaklassin.

   🪤 `max-width`/`min-width` DE SIFIRLANMALI - `width` tek basina YETMEZ.
   `responsive.css` BES ayri medya sorgusunda su kurali tekrarliyor:
       .product-group-box img { min-width: 290px !important; max-width: 310px !important; }
   `width: 100%` hesaplanip 436px oluyor, sonra `max-width: 310px` onu geri
   kirpiyordu. Olculdu: kart 436px genisken gorsel 310px kaliyor ve saginda
   126px'lik bos serit birakiyordu. Iki sinir da kaldiriliyor. */
.urun-gruplari-main-div .product-group-box img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  object-fit: cover;
  transition: transform var(--ada-sure-yavas) var(--ada-egri);
}
.urun-gruplari-main-div .product-group-box:hover img { transform: scale(1.06); }

/* Metin blogu: margin-top:120px yerine ALT KENARA sabitlenir - kart yuksekligi
   ne olursa olsun dogru yerde durur.                                          */
.urun-gruplari-main-div .product-group-box-text {
  position: absolute;
  left: 0;
  bottom: 16px;
  margin-top: 0 !important;
  z-index: 2;
}
.urun-gruplari-main-div .product-group-box-text-head {
  padding: 7px 18px !important;
  border-radius: 0 var(--ada-r-sm) var(--ada-r-sm) 0;
}
.urun-gruplari-main-div .product-group-box-text-browse {
  margin-top: 6px;
  padding: 7px 18px !important;
  border-radius: 0 var(--ada-r-sm) var(--ada-r-sm) 0 !important;
  transition: padding-right var(--ada-sure-hizli) var(--ada-egri);
}
.urun-gruplari-main-div .product-group-box:hover .product-group-box-text-browse {
  padding-right: 26px !important;       /* ok isareti nefes alsin */
}
.urun-gruplari-main-div .product-group-box-text-browse i {
  transition: transform var(--ada-sure-hizli) var(--ada-egri);
}
.urun-gruplari-main-div .product-group-box:hover .product-group-box-text-browse i {
  transform: translateX(3px);
}

/* Alttan yumusak koyu gecis: gorsel acik oldugunda metin kutulari havada
   durmasin, karta zemin hissi versin. Metin kutularinin KENDI zemini var,
   bu yalnizca kompozisyon icin.                                              */
.urun-gruplari-main-div .product-group-box > a::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(23, 26, 25, .38), transparent);
  pointer-events: none;
  z-index: 1;
}

/* =============================================================================
   7. BOLUM BOSLUK RITMI  (Adim 3)
   Bolum ic bosluklari panelden geliyor (modul ayarlarindaki "padding") ve modul
   kendi <style> blogunda basiyor - yani masaustu degeri KULLANICININ karari.
   Ama ayni deger telefonda cok buyuk kaliyor (e-bulten 180px, urunler 85px:
   ekranin yarisi bos bant). Asagidaki kural yalnizca kucuk ekranlarda ust
   sinir koyar; panel ayari masaustunde aynen gecerli kalir.
   ========================================================================== */
@media screen and (max-width: 767.98px) {
  .products-home-main-div,
  .urun-gruplari-main-div,        /* modul ayrildiginda listeye eklenmemisti */
  .blog-home-main-div,
  .photo-gallery-home-main-div,
  .bulten-home-main-div,
  .abouts-home-main-div,
  .belge-home-main-div,
  .clients-home-main-div,
  .comments-home-main-div,
  .counter-home-main-div,
  .ekip-home-main-div,
  .faq-home-main-div,
  .pricing-home-main-div,
  .proje-home-main-div,
  .service-home-main-div,
  .skill-home-main-div,
  .video-gallery-home-main-div {
    padding-top: clamp(34px, 8vw, 85px) !important;
    padding-bottom: clamp(34px, 8vw, 85px) !important;
  }
  /* 🔴 OZELLIKLER BOLUMU YALNIZCA ALTTAN SINIRLANIR.
     Yukaridaki listeye dahil edildiginde telefonda SLIDER ILE BOLUM ARASINDA
     41px BEYAZ SERIT olusuyordu (olculdu, 390px). Sebep: bu modulun kendi
     satir ici stili `padding: 0 0 <panel>px 0` yazar - UST DOLGU BILEREK 0,
     cunku ilk cocugu tam genislikte KOYU BIR BAND ve slidera yapisik durmasi
     gerekiyor. Toplu kural ise `padding-top` EKLIYORDU; oteki modullerde
     dogru (onlarin ust dolgusu da panelden gelir), burada degil.
     Alt dolgu siniri KORUNUYOR - panel degeri 90px, telefonda buyuk kalir. */
  .ozellik-home-main-div {
    padding-top: 0 !important;
    padding-bottom: clamp(34px, 8vw, 85px) !important;
  }

  .modules-header-main       { margin-bottom: 34px; }
  .modules-header-main-head  { padding-bottom: 20px; }
}

/* =============================================================================
   8. SLIDER METIN KATMANI  (Adim 3)
   Tema: baslik 18px / spot 14px telefonda, 32px / 18px genis ekranda; arada
   sicrama var. line-height "normal" oldugu icin iki satirlik spot sikisiyordu.
   Metin fotograf uzerinde duruyor ama hicbir kontrast garantisi yoktu:
   acik bir slayt geldiginde beyaz yazi okunmaz hale geliyor.
   ========================================================================== */
.slider-text-div {
  width: auto !important;
  max-width: min(92vw, 640px);
  margin: 0 auto;
}

.slider-font-type-baslik {
  font-size: clamp(1.375rem, .95rem + 2.1vw, 2.5rem) !important;
  line-height: 1.15 !important;
  letter-spacing: .01em !important;
  /* fotograf uzerinde okunurluk garantisi (renkten bagimsiz) */
  text-shadow: 0 2px 12px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4);
}
.slider-font-type-spot {
  font-size: clamp(.875rem, .8rem + .4vw, 1.125rem) !important;
  line-height: 1.5 !important;
  letter-spacing: .01em !important;
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}

/* Dokunma hedefi: tema mobilde padding 2px 8px veriyordu (~20px yukseklik).
   Erisilebilirlik olcutu 44x44px; asagidaki deger onu karsiliyor.            */
.slider-button-type,
.slider-button-type-2 {
  font-size: clamp(.8125rem, .78rem + .18vw, .9375rem) !important;
  font-weight: 600 !important;
  padding: 13px 26px !important;
  min-height: 44px;
  display: inline-flex !important;
  align-items: center;
  gap: .4em;
  border-radius: var(--ada-r-sm);
  box-shadow: var(--ada-golge-2);
  transition: background-color var(--ada-sure) var(--ada-egri),
              transform var(--ada-sure-hizli) var(--ada-egri);
}
.slider-button-type:active,
.slider-button-type-2:active { transform: translateY(1px); }

/* --- Mobil menu dugmesi: dokunma alani -----------------------------------
   OLCULDU: hamburger 30 x 15 px idi. Mobildeki EN KRITIK dokunma hedefi ve
   her olcute gore cok kucuk. Ikonun GORUNUMU degismiyor; cevresine dolgu
   ekleniyor ve ayni miktarda negatif kenar bosluguyla yerlesim korunuyor.
   Dolgu ile buyutmek ISE YARAMADI: dugmede box-sizing:border-box ve sabit
   30px olcu var, dolgu iceride kaliyor. Bunun yerine gorunmez bir psodo-eleman
   44x44'luk tiklama alani seriyor - YERLESIM HIC DEGISMIYOR, ikon oldugu
   yerde kaliyor.

   Kapsayicidaki overflow:hidden (responsive.css 3 blokta, kutu yalnizca 24px
   yuksek) tiklama alanini DIKEYDE kirpiyordu; o yuzden gorunur yapiliyor.    */
/* Kirpan IKI kutu var ve ikisi de 24px yuksek: -bars ve ust kapsayici -right.
   Yalnizca birini acmak yetmiyor, alan yine dikeyde kirpiliyor (olculdu).    */
.header-mobile-right,
.header-mobile-right-bars { overflow: visible !important; }
.mobile-menu-bar-button {
  position: relative;
  background: none;
  border: 0;
  cursor: pointer;
}
.mobile-menu-bar-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  /* gorunmez; yalnizca dokunma/tiklama alani */
}

/* "Incele" dugmesi de parmakla basilabilir olsun (masaustunde hover ile
   cikiyor ama dokunmatik cihazda da gorunur olabiliyor).                     */
.product-main-box-img .buttons .text { min-height: 40px; }

/* =============================================================================
   9. URUN DETAY SAYFASI  (Adim 4)
   Sitenin donusum sayfasi: 198 urunun hepsi buraya iniyor, fiyat yok, tek
   eylem teklif/siparis. Tema sabit px izgara kullaniyordu (1200 / 536 / 600)
   ve aciklama metni 1200px boyunca akiyordu - satir basina ~150 karakter,
   okunur uzunlugun iki katindan fazla.
   ========================================================================== */

.product-detail-page-main {
  padding-top: clamp(28px, 5vw, 75px);
  padding-bottom: clamp(48px, 8vw, 100px);
}

/* --- Ust bolum: gorsel + panel TEK SATIR (Adim 7e) ------------------------
   Adim 7 de bu bolum bir IZGARAYA cevrilmis ve sag panel aciklama boyunca
   yapiskan yapilmisti. KULLANICI DUZELTTI: panel aciklamanin hizasina hic
   inmemeli - aciklama AYRI BIR BOLUM. Izgara kaldirildi, tema mantigina
   donuldu: ust satir esnek (gorsel solda, panel sagda), aciklama ve alt
   bolumler onun ALTINDA tam genislikte normal akista.

   Panel kendi satirinda `sticky` kaliyor: satir yuksekse (uzun panel, kisa
   gorsel) kucuk bir kayma payi verir, satiri asamaz. Boylece "aciklamanin
   altina kayma" sorunu yapisal olarak imkansiz hale geliyor - JS sinir
   bekcisine de gerek kalmiyor (o katman kaldirildi).                        */
@media screen and (min-width: 1024px) {
  .product-detail-header {
    width: 100%;
    max-width: 1200px;
    display: flex;
    align-items: flex-start;
    gap: clamp(28px, 3.5vw, 55px);
  }
  /* OLCULEN SORUN: sol kolon `flex:1 1 auto` ile bos alanin TAMAMINI aliyordu
     ama gorsel yukseklik siniri yuzunden kolonu doldurmuyor. Sonuc: gorselin
     sag kenari ile panel arasinda ~160px olu bosluk (kullanici bildirdi;
     `gap` 55px sanilirken gercek aralik 160px cikti).
     Cozum: sol kolon ICERIGINE daralsin, artan yeri PANEL yutsun.            */
  /* Kolon genisligi = gorselin yukseklik siniri + serit (84) + aralik (12).
     `fit-content` DENENDI ve OLMADI: kapsayici icerige daralinca icerideki
     `.large-image { width:100% }` belirsiz kalip gorsel 560 -> 260px'e
     dustu (olculdu). Acik genislik hem bosluğu kapatiyor hem olcuyu koruyor. */
  .product-detail-header-left {
    width: calc(100vh - 344px);   /* (100vh - 440) + 96 */
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
    margin-right: 0;
  }
  .image-box { width: 100%; max-width: 100%; }

  /* Paylasim satiri gorselin ALTINDA ve GORSELLE ORTALI.
     Serit solda 84px + 12px aralik yer kapliyor; satir o kadar iceriden
     baslayip kalan genislikte ortalanir - yani tam gorselin ortasina denk gelir. */
  .ada-paylas-gorsel-alti {
    margin-left: 96px;            /* 84 serit + 12 aralik */
    justify-content: center;
  }
}

/* --- SON BAKILAN URUNLER (Adim 10) ---------------------------------------
   Oturum tabanli serit. "BENZER URUNLER"den AYRISMALI: o kart izgarasi,
   bu daha kucuk ve yatay - ayni gorsel agirlikta olsalar sayfa tekrar
   ediyormus gibi gorunurdu. Dar ekranda yatayda kayar.                     */
.ada-son-bakilan {
  width: 90%;
  max-width: 1200px;
  margin: 10px auto 0;
  padding-top: 34px;
  border-top: 1px solid var(--ada-20);
}
.ada-son-bakilan-baslik {
  margin: 0 0 18px;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ada-95);
}
.ada-son-bakilan-liste {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}
.ada-son-bakilan-oge {
  flex: 0 0 auto;
  width: 128px;
  text-decoration: none;
  color: var(--ada-80);
}
.ada-son-bakilan-gorsel {
  display: block;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--ada-20);
  border-radius: var(--ada-r-sm);
  overflow: hidden;
  background: var(--ada-00);
  transition: border-color var(--ada-sure-hizli) var(--ada-egri),
              box-shadow   var(--ada-sure) var(--ada-egri);
}
.ada-son-bakilan-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ada-son-bakilan-ad {
  display: block;
  margin-top: 8px;
  font-size: .8125rem;
  line-height: 1.35;
  /* Iki satirdan uzun adlar kirpilir - serit yuksekligi sabit kalsin */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ada-son-bakilan-oge:hover .ada-son-bakilan-gorsel {
  border-color: var(--ada-vurgu);
  box-shadow: var(--ada-golge-2);
}
.ada-son-bakilan-oge:hover .ada-son-bakilan-ad { color: var(--ada-vurgu); }

/* --- Footer ustundeki serit ----------------------------------------------
   Ayni bilesen, farkli baglam. Urun detayinda icerigin ICINDE, iki bolum
   arasinda bir ayirici olarak duruyordu; burada SAYFANIN SONUNDA, footer'a
   gecmeden hemen once. Bu yuzden:
     - ust kenarlik yerine hafif bir zemin: "icerik bitti" sinyali daha net,
     - alt bosluk footer'in kendi dolgusuna yaslanmasin diye acildi,
     - baslik biraz daha sessiz (bir bolum basligi degil, bir hatirlatma).
   Dar ekranda serit zaten yatayda kayiyor; asagida yalnizca kenar boslugu
   ve dokunma hedefi ayarlaniyor.                                            */
.ada-son-bakilan-footer {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 28px 0 30px;
  border-top: 1px solid var(--ada-20);
  background: var(--ada-05);
}
.ada-son-bakilan-footer > * {
  width: 90%;
  max-width: 1200px;
  margin-inline: auto;
}
.ada-son-bakilan-footer .ada-son-bakilan-baslik {
  font-size: .875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ada-60);
  margin-bottom: 14px;
}

@media screen and (max-width: 767.98px) {
  .ada-son-bakilan-footer { padding: 22px 0 24px; }
  .ada-son-bakilan-footer > * { width: 100%; padding-inline: 16px; }
  /* 🪤 "Kenara tasan serit" numarasi (padding + negatif margin) DENENDI VE
     GERI ALINDI: liste kutusu gorunum genisligini 16px asiyordu. Sayfa
     `overflow-x: clip` sayesinde yatayda kaymiyor - yani kimse fark etmiyor -
     ama kirpilan kisim kaydirilamiyor, yani son oge ERISILEMEZ hale
     gelebiliyordu. Olculdu: 390 ve 320px'te serit icinde 1 tasan oge.
     Serit artik 16px'lik kenar boslugunun ICINDE kayiyor. */
  .ada-son-bakilan-footer .ada-son-bakilan-liste { scroll-padding-left: 16px; }
  /* Dokunma hedefi: ad iki satir + gorsel 112px -> toplam ~160px, yeterli.
     Oge genisligi biraz daralir, ekranda iki buçuk oge gorunur (kaydirilabilir
     oldugunu gosteren ipucu). */
  .ada-son-bakilan-footer .ada-son-bakilan-oge { width: 112px; }
}

/* --- HIZLI TEKLIF FORMU (Adim 9) -----------------------------------------
   Site teklif modeli oldugu icin bu BIRINCIL eylem; siparis butonundan once
   ve daha baskin duruyor. Renkler paletten (`--ada-vurgu`), yani panelden
   palet degisince takip eder.                                               */
.ada-teklif-ac {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 48px;
  margin-bottom: 10px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--ada-r-sm);
  background-color: var(--ada-vurgu);
  color: #fff;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: var(--ada-golge-1);
  transition: background-color var(--ada-sure) var(--ada-egri),
              transform        var(--ada-sure-hizli) var(--ada-egri),
              box-shadow       var(--ada-sure) var(--ada-egri);
}
.ada-teklif-ac svg { width: 18px; height: 18px; flex: 0 0 auto; }
.ada-teklif-ac:hover,
.ada-teklif-ac:focus-visible {
  background-color: var(--ada-vurgu-koyu);
  transform: translateY(-2px);
  box-shadow: var(--ada-golge-2);
}
.ada-teklif-ac:active { transform: translateY(0); }

.ada-teklif-kutu { border-radius: var(--ada-r-md) !important; }
.ada-teklif-kutu .modal-header { border-bottom: 1px solid var(--ada-20); }
.ada-teklif-kutu .modal-title {
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 700;
  color: var(--ada-95);
}
.ada-teklif-urun {
  margin: 0 0 18px;
  padding: 10px 14px;
  border-radius: var(--ada-r-sm);
  background-color: var(--ada-05);
  color: var(--ada-95);
  font-weight: 600;
  font-size: .9375rem;
}
.ada-teklif-urun span { color: var(--ada-60); font-weight: 400; }

.ada-teklif-satir { margin-bottom: 14px; }
.ada-teklif-satir label {
  display: block;
  margin-bottom: 6px;
  color: var(--ada-80);
  font-size: .8125rem;
  font-weight: 600;
}
.ada-teklif-satir input,
.ada-teklif-satir textarea {
  width: 100%;
  min-height: 44px;                /* dokunma hedefi */
  padding: 10px 12px;
  border: 1px solid var(--ada-20);
  border-radius: var(--ada-r-sm);
  background-color: var(--ada-00);
  color: var(--ada-95);
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: .9375rem;
  transition: border-color var(--ada-sure-hizli) var(--ada-egri),
              box-shadow   var(--ada-sure-hizli) var(--ada-egri);
}
.ada-teklif-satir textarea { min-height: 84px; resize: vertical; }
.ada-teklif-satir input:focus,
.ada-teklif-satir textarea:focus {
  outline: none;
  border-color: var(--ada-vurgu);
  box-shadow: 0 0 0 3px rgba(194, 96, 60, .18);                                /* yedek */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ada-vurgu) 18%, transparent);
}
/* Telefon ve adet yan yana; dar ekranda alt alta */
.ada-teklif-ikili { display: flex; gap: 12px; }
.ada-teklif-ikili > * { flex: 1 1 0; min-width: 0; }
@media screen and (max-width: 480px) {
  .ada-teklif-ikili { display: block; }
}
.ada-teklif-kutu .modal-footer { border-top: 1px solid var(--ada-20); }
.ada-teklif-kutu .modal-footer .ada-btn { width: 100%; justify-content: center; }

/* --- Goruntulenme satiri (Adim 8) ----------------------------------------
   Diger bilgi satirlarindan (Urun Kodu, Kategori) daha SESSIZ olmali:
   ikincil bilgi, urunun kendisi degil. Bu yuzden kucuk ve soluk.            */
.ada-goruntulenme {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ada-40);
  font-size: .8125rem;
}
.ada-goruntulenme svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* --- Paylasim butonlari (Adim 7g) ----------------------------------------
   WhatsApp + Facebook + Baglantiyi Kopyala. Ikonlar SATIR ICI SVG:
   projede Font Awesome 4.7 var, marka glifleri eski cizim; FA6/7'ye gecmek
   ikon yukunu 3 katina cikarirdi (bkz. frontend mimarisi notu).
   Medya sorgusu DISINDA - mobilde de ayni bicim.                            */
.ada-paylas-gorsel-alti {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 16px;
  /* 🪤 UST CIZGI KALDIRILDI (kullanici istegi 2026-09-14). Cizgi, gorseli
     paylasim satirindan ayirmak icin konmustu; altina ozellik tablosu
     gelince o bolgede UC yatay cizgi ust uste bindi (gorsel cercevesi,
     bu cizgi, tablonun ust kenari) ve sayfa dilimlenmis gibi durdu.
     Ayrimi bosluk veriyor - `margin-top` + `padding-top` duruyor. */
}
.ada-paylas-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;               /* dokunma hedefi */
  padding: 0 14px;
  border: 1px solid var(--ada-20);
  border-radius: 999px;
  background-color: var(--ada-00);
  color: var(--ada-80);
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--ada-sure-hizli) var(--ada-egri),
              border-color     var(--ada-sure-hizli) var(--ada-egri),
              color            var(--ada-sure-hizli) var(--ada-egri),
              transform        var(--ada-sure-hizli) var(--ada-egri),
              box-shadow       var(--ada-sure) var(--ada-egri);
}
.ada-paylas-btn svg { width: 17px; height: 17px; flex: 0 0 auto; }
.ada-paylas-btn:hover,
.ada-paylas-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--ada-golge-2);
  color: #fff;
}
/* Servis renkleri: WhatsApp ve Facebook TANINAN marka renkleri, bilerek
   palete baglanmadi (bkz. bolum 11 notu). Kopyala ise markanin kendi vurgusu. */
.ada-paylas-btn.ada-paylas-wa:hover,
.ada-paylas-btn.ada-paylas-wa:focus-visible {
  background-color: #25D366; border-color: #25D366;
}
.ada-paylas-btn.ada-paylas-fb:hover,
.ada-paylas-btn.ada-paylas-fb:focus-visible {
  background-color: #1877F2; border-color: #1877F2;
}
.ada-paylas-btn.ada-paylas-kopyala:hover,
.ada-paylas-btn.ada-paylas-kopyala:focus-visible {
  background-color: var(--ada-vurgu); border-color: var(--ada-vurgu);
}
/* Kopyalama basarili - JS `.ada-kopyalandi` ekler, 2 sn sonra kaldirir */
.ada-paylas-btn.ada-kopyalandi {
  background-color: var(--ada-ana);
  border-color: var(--ada-ana);
  color: #fff;
}
.ada-paylas-btn:active { transform: translateY(0); }

@media screen and (max-width: 1023.98px) {
  /* SIRALAMA: paylasim satiri isaretlemede `.image-box`in hemen ardinda.
     Mobilde `.image-box` gizli ve galeriyi AYRI bir eleman basiyor
     (`.mobile-product-image-box`, DOM'da paylasim satirindan SONRA), bu yuzden
     satir gorselin USTUNDE kaliyordu (olculdu). Kapsayici esnek sutuna
     cevriliyor ve YALNIZCA galeriye negatif sira veriliyor.

     🪤 ONCE SIRALAR TEK TEK SAYILIYORDU (galeri 1, paylasim 2) VE BU KIRILDI.
     `order` verilmeyen her cocuk varsayilan 0'da kalir; esnek duzende 0,
     1'den ONCE gelir. Ozellik tablosu eklenince (DOM'da paylasimdan sonra,
     ama order'i 0) sayfanin EN BASINA firladi - kullanici bildirdi, olculdu:
     ozellik_y=285 < galeri_y=517 < paylas_y=1204.

     Sayarak duzeltmek ayni tuzagi kurardi: sol sutuna eklenecek HER yeni blok
     yine unutulur ve basa firlardi. Bunun yerine tek bir negatif sira var -
     geri kalan her cocuk DOM sirasinda kalir ve yeni bloklar kendiliginden
     dogru yere duser. */
  .product-detail-header-left { display: flex; flex-direction: column; }
  .product-detail-header-left > .mobile-product-image-box { order: -1; }

  /* Mobilde serit yok, gorsel tam genislikte - satir ortalanir */
  .ada-paylas-gorsel-alti {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--ada-20);
  }
  .product-detail-header-right {
    width: auto;
    flex: 1 1 340px;             /* artan bosluğu panel alir */
    max-width: 460px;
    position: sticky;
    top: 78px;                   /* kaydirilmis sticky header 62px + 16 pay */
  }
}
/* --- Gorsel kutusu: EKRANA SIGSIN (Adim 7) --------------------------------
   OLCULDU - kare oran + genis izgara sutunu birlesince gorsel devlesiyordu ve
   urunun tamami icin sayfayi kaydirmak gerekiyordu:

       1440x900 : 857x857  -> ekrani 269px asiyor, kucuk gorseller tamamen disarida
       1600x900 : 965x965  -> 380px
       1366x768 : 813x813  -> 353px (sag panel de tasiyor)

   Cozum: kutunun genisligini EKRAN YUKSEKLIGINE bagla. Kare oran korundugu
   icin yukseklik de ayni degerle sinirlanir.
   `calc(100vh - 440px)` nereden: gorsel ust kenari ~310px (header + breadcrumb),
   altinda kucuk gorsel seridi ~115px, artı ~15px pay -> 440px.
       900px ekran  -> 460px kutu, kucuk gorseller ~887'de biter (ekranda)
       768px ekran  -> 328px kutu (dar dizustunde kucuk ama tamami gorunur)
      1080px ekran  -> 640px kutu
   `min()` ile sutundan genis olamaz; `min-height` cok kisa ekranda cokmeyi onler.

   SOLA HIZALI (margin yok): aciklama metni de sutunun sol kenarindan basliyor,
   ortalayinca ikisi hizasiz duruyordu.                                        */
@media screen and (min-width: 1024px) {
  /* --- Kucuk gorsel seridi SOLDA, dikey (Adim 7c) -------------------------
     Istenen: masaustunde serit ana gorselin solunda, mobilde altinda.
     Mobil taraf DEGISMEDI (tema neyse o); burasi yalnizca >=1024px.

     products_detail.php'de Swiper >=1024px'te HIC baslatilmiyor (bkz. oradaki
     "Kucuk gorsel seridi: masaustunde karusel YOK" notu). Swiper 4.1.6
     `direction`i breakpoint ile degistiremiyor ve baslatilmayinca slaytlara
     satir ici stil de yazmiyor - bu sayede asagidaki kurallar inline stille
     bogusmak zorunda kalmiyor. modern.css'in eski "thumbs'a flex vermek
     karuseli bozuyor" uyarisi bu kosul saglandigi icin artik gecerli degil.

     YUKSEKLIK: ana gorsel `calc(100vh - 440px)` ile sinirli; serit de ayni
     yuksekligi asamaz, asarsa KENDI ICINDE kayar. Boylece 5-6 (ya da daha
     fazla) gorselde bile yerlesim bozulmaz.                                  */
  /* DIKKAT: style.css:1068 `.image-box{display:flex; flex-direction:column;
     align-items:center}` diyor. Yalnizca `display:flex` yazmak YETMEZ - yon
     `column` kaldigi icin serit gorselin ALTINDA/USTUNDE kaliyordu (olculdu).
     Yon, hizalama ve ortalama ACIKCA sifirlaniyor.                           */
  .image-box {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    max-width: none;
    margin: 0;
  }
  .image-box .large-image {
    flex: 0 1 auto;
    width: 100%;
    max-width: min(100%, calc(100vh - 440px));
  }

  .image-box .thumbs {
    order: -1;                       /* isaretlemede sonra, ekranda once */
    flex: 0 0 84px;
    width: 84px;
    /* `min(100%, ...)` KULLANILMAZ: esnek satirda kapsayici yuksekligi
       belirsiz oldugu icin `100%` cozulmuyordu ve serit 640px'e uzayip
       ekran disina tasiyordu (olculdu). Buyuk gorselle AYNI kesin deger. */
    max-height: calc(100vh - 440px);
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;                       /* tema margin-top:15px veriyor */
    padding: 0;
    text-align: left;                /* tema center veriyor */
    list-style: none;
  }
  /* swiper.min.css `.swiper-container{overflow:hidden}` diyor; dikey siraya
     gecince serit 84px'e KIRPILIYORDU (olculdu: 6 slayt ama yukseklik 84).
     Karusel baslatilmadigi icin kirpmaya gerek yok.                          */
  .image-box .thumbs .carousel-gallery,
  .image-box .thumbs .swiper-container4 {
    width: 100%;
    height: auto !important;
    overflow: visible !important;
  }

  /* Swiper baslatilmadigi icin bunlar temiz bir dikey siraya donusur.
     !important yalnizca EMNIYET: kullanici pencereyi mobilden masaustune
     buyutup Swiper destroy edildiginde artik stil kalmasin diye.            */
  .image-box .thumbs .swiper-wrapper {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    transform: none !important;
    height: auto !important;
  }
  .image-box .thumbs .swiper-slide {
    width: 100% !important;
    margin: 0 !important;
    flex: 0 0 auto;
  }
  /* Dikey seritte karusel kontrolleri anlamsiz */
  .image-box .thumbs .swiper-pagination,
  .image-box .thumbs .swiper-button-next,
  .image-box .thumbs .swiper-button-prev { display: none !important; }

  /* Ince kaydirma cubugu - serit dar, varsayilan cubuk orantisiz duruyor */
  .image-box .thumbs { scrollbar-width: thin; }
  .image-box .thumbs::-webkit-scrollbar { width: 6px; }
  .image-box .thumbs::-webkit-scrollbar-thumb {
    background: var(--ada-20);
    border-radius: 3px;
  }
}

/* --- Buyuk gorsel: sabit 535px yukseklik yerine kare oran ----------------- */
.image-box .large-image {
  height: auto;
  aspect-ratio: 1 / 1;
  min-height: 260px;
  border-radius: var(--ada-r-md);
  border-color: var(--ada-20);
  background-color: var(--ada-05);
  /* DUZELTME (Adim 7): burada "buyutme yok, yaniltici" denip cursor:default
     yapilmisti - YANLISTI. products_detail.php icinde `$('.large-image').zoom()`
     diye bir jQuery eklentisi var ve CALISIYOR (olculdu: hover'da background-size
     `contain` -> `150% auto`, background-position fareyi izliyor). Yani imleci
     notrlestirmek, var olan buyutmeyi kullaniciya haber veren TEK ipucunu
     kaldirmis. Dogru imlec `zoom-in`; tiklaninca da tam ekran aciliyor
     (modern.js "GORSEL BUYUTME").                                             */
  cursor: zoom-in;
  position: relative;
}

/* Buyutme ipucu: sag ust kosede kucuk buyutec rozeti */
.image-box .large-image::after {
  content: "\f00e";                 /* fa-search-plus (Font Awesome 4.7) */
  font-family: FontAwesome;
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(23, 26, 25, .55);
  color: #fff;
  font-size: 14px;
  opacity: 0;
  transform: scale(.85);
  transition: opacity   var(--ada-sure-hizli) var(--ada-egri),
              transform var(--ada-sure-hizli) var(--ada-egri);
  pointer-events: none;
}
.image-box .large-image:hover::after { opacity: 1; transform: scale(1); }
.image-box .large-image:focus-visible {
  outline: 3px solid var(--ada-vurgu);
  outline-offset: 3px;
}

/* --- Tam ekran gorsel katmani (modern.js "GORSEL BUYUTME" olusturur) ------ */
.ada-buyut {
  position: fixed;
  inset: 0;
  z-index: 1000;                    /* yuzen dugmeler 999 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(23, 26, 25, .88);
  opacity: 0;
  transition: opacity var(--ada-sure) var(--ada-egri);
  cursor: zoom-out;
}
.ada-buyut.ada-buyut-acik { opacity: 1; }

.ada-buyut img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--ada-r-md);
  background: var(--ada-00);
  box-shadow: var(--ada-golge-3);
  transform: scale(.96);
  transition: transform var(--ada-sure) var(--ada-egri);
  cursor: default;
}
.ada-buyut.ada-buyut-acik img { transform: scale(1); }

.ada-buyut-kapat {
  position: absolute;
  top: clamp(10px, 2vw, 22px);
  right: clamp(10px, 2vw, 22px);
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--ada-sure-hizli) var(--ada-egri),
              transform        var(--ada-sure-hizli) var(--ada-egri);
}
.ada-buyut-kapat:hover { background: rgba(255, 255, 255, .26); transform: scale(1.06); }
.ada-buyut-kapat:focus-visible { outline: 3px solid var(--ada-vurgu); outline-offset: 2px; }

/* --- Kucuk gorseller -----------------------------------------------------
   DIKKAT: kucuk gorseller bir SWIPER karuselinin icinde
   (.thumbs > .carousel-gallery > .swiper-container4 > .swiper-wrapper > li).
   Yerlesimi Swiper yonetiyor ve slayt genisliklerini satir ici stille yaziyor.
   .thumbs'a flex/gap vermek karuseli BOZUYOR (denendi: kucuk gorsel ince bir
   seride dondu). Bu yuzden burada YALNIZCA gorselin kendisi biçimlendirilir,
   olculere ve kapsayici yerlesimine dokunulmaz.                              */
.image-box .thumbs .thumb-img {
  object-fit: contain;
  background: var(--ada-05);
  border-radius: var(--ada-r-sm);
  border-color: var(--ada-20);
  cursor: pointer;
}
.image-box .thumbs li .thumb-img { opacity: .55; }
.image-box .thumbs li:hover .thumb-img { opacity: .85; }
/* tema aktif kucuk gorseli #333 ile isaretliyordu - marka rengi daha okunur */
.image-box .thumbs li.activeted .thumb-img {
  opacity: 1;
  border: 2px solid var(--ada-vurgu);
}

/* --- Mobil galeri --------------------------------------------------------
   Telefonda .image-box gizleniyor (responsive.css:501) ve yerini
   .mobile-product-image-box aliyor. Tema orada beyaz zemin + sabit 220px
   yukseklik veriyordu; buradaki kural masaustuyle ayni dili konusturur.      */
.mobile-product-image-box {
  background: var(--ada-05) !important;
  border-color: var(--ada-20);
  border-radius: var(--ada-r-md);
}
.mobile-product-image-box img {
  height: auto !important;
  max-width: 100% !important;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* --- Bilgi paneli -------------------------------------------------------- */
.product-detail-header-right {
  padding: clamp(18px, 2.6vw, 30px);
  border-radius: var(--ada-r-md);
  border-color: var(--ada-20);
}
.product-detail-header-right-baslik {
  font-size: clamp(1.375rem, 1.05rem + 1.4vw, 2rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  margin-bottom: 14px;
}
.product-detail-header-right-spot {
  line-height: 1.65;
  color: var(--ada-60);
  margin: 18px 0;
}

/* Ozellik satirlari (Urun Kodu, Kategori...) - etiket sessiz, deger baskin */
.product-detail-header-right-feature-info {
  padding: 9px 0;
  border-bottom: 1px solid var(--ada-20);
  font-size: 14px;
  color: var(--ada-95);
}
.product-detail-header-right-feature-info:last-of-type { border-bottom: 0; }
.product-detail-header-right-feature-info strong {
  color: var(--ada-60);
  font-weight: 600;
  letter-spacing: .02em;
}

/* --- Eylem butonlari ----------------------------------------------------- */
.product-detail-header-right-normal-button,
.product-detail-header-right-wp-button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 13px 24px;
  border-radius: var(--ada-r-sm);
  font-weight: 600;
  box-shadow: var(--ada-golge-1);
  transition: background-color var(--ada-sure) var(--ada-egri),
              box-shadow var(--ada-sure) var(--ada-egri),
              transform var(--ada-sure-hizli) var(--ada-egri);
}
.product-detail-header-right-normal-button:hover,
.product-detail-header-right-wp-button:hover { box-shadow: var(--ada-golge-2); }
.product-detail-header-right-normal-button:active,
.product-detail-header-right-wp-button:active { transform: translateY(1px); }

/* WhatsApp yesili BILEREK palete baglanmadi: taninan bir servis rengi,
   marka rengiyle degistirilirse dugme ne oldugu anlasilmaz. Tema #67c36c
   kullaniyordu; WhatsApp'in kendi resmi tonu #25D366.                       */
.product-detail-header-right-wp-button { background-color: #25D366 !important; }
.product-detail-header-right-wp-button:hover { background-color: #1DB954 !important; }

/* --- Aciklama: OKUMA GENISLIGI ------------------------------------------
   Asil sorun buydu. 1200px'lik kolonda 15px metin ~150 karakter/satir
   veriyordu; goz satir sonundan satir basina donerken kayboluyor.
   72ch yaklasik 70-75 karakter - tipografi olcutlerinin onerdigi aralik.   */
.products_tabs_contents {
  max-width: 66ch;   /* olculdu: 72ch -> 82 karakter/satir cikiyordu */
  margin-left: auto;
  margin-right: auto;
  line-height: 1.75;
  color: var(--ada-80);
}

/* >=1024px'te aciklama artik 1200px'lik TEK kolonda degil, 828px'lik izgara
   sutununda ve saginda yapiskan panel var. `margin:auto` ile ortalayinca solda
   ~300px bosluk kalip metin panele yasliyordu (olculdu). Okuma genisliginin
   KENDISI degismiyor, yalnizca hizasi.
   NOT: bu override taban kuralin ARDINDA durmali - medya sorgusu ozgulluk
   eklemez, once yazilirsa taban `margin-left:auto` onu ezer (bir kez oldu). */
@media screen and (min-width: 1024px) {
  .products_tabs_contents { margin-left: 0; margin-right: auto; }
}

/* --- URUN OZELLIK TABLOSU (Adim 7) ---------------------------------------
   "EK BILGILER" sekmesi aslinda `urun.ek_bilgi` alanina baglıydı ve panelde
   TinyMCE ile duzenlenebiliyordu - ama alan 198 urunun HICBIRINDE dolu degildi
   ve editorde TABLO DUGMESI yoktu (eklenti yukluydu, arac cubugunda gorunmuyordu).
   Duzeltmeler: panel_footer_libs.php'ye `table` dugmesi eklendi, eklenen tablolar
   `.ada-ozellik-tablo` sinifini otomatik aliyor, sekme adi "URUN OZELLIKLERI"
   oldu. Burada da bicim veriliyor.

   `.ada-ozellik-tablo` YOKSA da calisir: sinifsiz <table> ayni stili alir,
   boylece elle yapistirilan tablolar da duzgun gorunur.                       */
.products_tabs_contents table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 26px;
  font-size: .9375rem;
  /* Dar ekranda tablo kirilmasin; kendi icinde kayar (bkz. sarmalayici) */
}
.products_tabs_contents table th,
.products_tabs_contents table td {
  padding: 11px 14px;
  border: 1px solid var(--ada-20);
  text-align: left;
  vertical-align: top;
}
.products_tabs_contents table th {
  background-color: var(--ada-05);
  font-weight: 600;
  color: var(--ada-95);
}
/* Etiket/deger duzeni: ilk sutun etiket gibi okunsun */
.products_tabs_contents table td:first-child {
  font-weight: 600;
  color: var(--ada-95);
  width: 38%;
}
.products_tabs_contents table tr:nth-child(even) td { background-color: var(--ada-05); }
.products_tabs_contents table caption {
  caption-side: top;
  text-align: left;
  font-weight: 600;
  color: var(--ada-95);
  padding-bottom: 8px;
}

/* Genis tablo sayfayi yatayda tasirmasin - kendi kutusunda kaysin.
   modern.js tabloyu bu sarmalayiciya alir; JS yoksa tablo yine calisir,
   yalnizca cok dar ekranda sikisir.                                          */
.ada-tablo-kaydir {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Editorden gelen listeler de bicimli olsun */
.products_tabs_contents ul,
.products_tabs_contents ol { padding-left: 1.35em; margin: 0 0 18px; }
.products_tabs_contents li { margin-bottom: 6px; }

/* --- URUN VIDEOSU: oranli kutu -------------------------------------------
   videoGomme() ciktisini sarar; 16:9 oraninda, kapsayiciya sigar.            */
.ada-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--ada-r-md);
  overflow: hidden;
  background: var(--ada-95);
  box-shadow: var(--ada-golge-1);
}
.ada-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Eski kayitlardan gelen ham <iframe> de tasmasin */
.products_tabs_contents > iframe { max-width: 100%; }
.products_tabs_contents h1,
.products_tabs_contents h2,
.products_tabs_contents h3 {
  font-family: 'Raleway', 'Open Sans', Arial, sans-serif;
  color: var(--ada-95);
  line-height: 1.25;
  letter-spacing: -.005em;
  margin: 1.8em 0 .5em;
}
.products_tabs_contents h1 { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); font-weight: 700; }
.products_tabs_contents h2 { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.625rem);  font-weight: 700; }
.products_tabs_contents h3 { font-size: clamp(1.0625rem, .98rem + .5vw, 1.25rem);  font-weight: 600; }
.products_tabs_contents > *:first-child { margin-top: 0; }
.products_tabs_contents p  { margin: 0 0 1.1em; }
.products_tabs_contents a  { color: var(--ada-vurgu); text-decoration: underline; text-underline-offset: 2px; }
.products_tabs_contents a:hover { color: var(--ada-vurgu-koyu); }
.products_tabs_contents img { border-radius: var(--ada-r-sm); }
.products_tabs_contents ul,
.products_tabs_contents ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.products_tabs_contents li { margin-bottom: .4em; }

/* --- Benzer urunler ------------------------------------------------------ */
.related-products-div { margin-top: clamp(48px, 7vw, 90px); }

/* =============================================================================
   10. BLOG KARTLARI ve FOTO GALERI  (Adim 4)
   Anasayfanin urun modulu disinda kalan iki bileseni; Adim 2'de kart dilini
   kurarken atlanmislardi.

   Blog kartinda KART YUZEYI HIC YOKTU: kenarlik, zemin, yaricap, golge yok;
   gorsel, baslik ve "devamini oku" serbest akiyordu. Galeri kutusu ise sabit
   373x272 idi ve ekran genisligini takip etmiyordu.
   ========================================================================== */

/* --- Blog karti ---------------------------------------------------------- */
.blog-box {
  background: var(--ada-00);
  border: 1px solid var(--ada-20);
  border-radius: var(--ada-r-md);
  overflow: hidden;
  transition: transform var(--ada-sure) var(--ada-egri),
              box-shadow var(--ada-sure) var(--ada-egri),
              border-color var(--ada-sure) var(--ada-egri);
}
.blog-box:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--ada-golge-3);
}
/* Tema ic kutuya 10px kenar bosluğu veriyordu; kart yuzeyi olunca dolgu
   kartin kendisine ait olmali, gorsel de kenara kadar uzanmali.             */
.blog-box-in { margin: 0; width: auto; }
.blog-box-in img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  margin-bottom: 0;
  background: var(--ada-05);
  display: block;
}
.blog-box:hover .blog-box-in img { transform: scale(1.04); }

.blog-box-in-header,
.blog-box-in-spot,
.blog-box-in-readmore { padding-left: 18px; padding-right: 18px; }
.blog-box-in-header {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  margin-top: 16px;
  margin-bottom: 10px;
}
.blog-box-in-spot {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ada-60);
  margin-bottom: 14px;
}
.blog-box-in-readmore { padding-bottom: 18px; }
.blog-box-in-readmore a {
  font-weight: 600;
  color: var(--ada-vurgu);
  text-decoration: none;
  transition: color var(--ada-sure) var(--ada-egri);
}
.blog-box-in-readmore a:hover { color: var(--ada-vurgu-koyu); }
.blog-box-in-readmore a i { transition: transform var(--ada-sure) var(--ada-egri); }
.blog-box:hover .blog-box-in-readmore a i { transform: translateX(4px); }

/* Akiskan genislik - esikler responsive.css semasindan */
@media screen and (min-width: 322px) and (max-width: 767.98px) {
  .blog-box    { width: calc(100% - 12px) !important; max-width: 420px; }
  .blog-box-in { width: auto !important; }
}
@media screen and (min-width: 768px) {
  .blog-box    { width: calc(33.333% - 18px); max-width: 380px; }
  .blog-box-in { width: auto; }
}

/* --- Foto galeri kutusu --------------------------------------------------
   Sabit 373x272 yerine akiskan, kare-ye yakin oran. Gorsel artik kutuyu
   object-fit ile dolduruyor; tema "min-width:373px" ile tasirarak
   dolduruyordu (zoom icin) - ayni etki scale() ile zaten saglaniyor.        */
.photo-galleri-home-box {
  width: calc(33.333% - 36px) !important;
  max-width: 420px;
  height: auto !important;
  aspect-ratio: 4 / 3;
  border-radius: var(--ada-r-md);
  background: var(--ada-05);
}
.photo-galleri-home-box-img {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  object-fit: cover;
}
.photo-overlay-table { width: 100% !important; }
.photo-overlay-table-in { height: auto !important; }
.photo-galleri-home-box .photo-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to top, rgba(23,26,25,.62), rgba(23,26,25,.22));
}

@media screen and (max-width: 767.98px) {
  .photo-galleri-home-box { width: calc(50% - 24px) !important; }
}
@media screen and (max-width: 410.98px) {
  .photo-galleri-home-box { width: calc(100% - 36px) !important; }
}

/* --- Galeri detay sayfasi kutulari ---------------------------------------
   Tema kutuyu `width: min-content` yapip gorsele min/max px veriyordu; kartlar
   ekrani takip etmiyor ve hicbir yuzey islemi yoktu (cıplak gorseller).
   Ayrica hover'da scale(1.05) + cok koyu golge (alpha .8) vardi - anasayfadaki
   yumusak dille celisiyordu.

   NOT: bu sayfada `alt="<?=$foto['baslik']?>"` yaziyordu ama galeri_resim
   tablosunda baslik kolonu YOK; PHP uyarisi HTML NITELIGININ ICINE basilip
   isaretlemeyi kiriyordu. Sablonda duzeltildi (kategori basligi kullaniliyor). */
.photogallery-detail-box {
  width: calc(33.333% - 24px);
  max-width: 420px;
  height: auto;
  border-radius: var(--ada-r-md);
  background: var(--ada-05);
  border: 1px solid var(--ada-20);
  transition: transform var(--ada-sure) var(--ada-egri),
              box-shadow var(--ada-sure) var(--ada-egri),
              border-color var(--ada-sure) var(--ada-egri);
}
.photogallery-detail-box img {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  display: block;
}
.photogallery-detail-box:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--ada-golge-3);
}
@media screen and (max-width: 767.98px) {
  .photogallery-detail-box { width: calc(50% - 16px) !important; height: auto !important; }
}
@media screen and (max-width: 410.98px) {
  .photogallery-detail-box { width: calc(100% - 16px) !important; }
}

/* =============================================================================
   11. FORM ALANLARI  (Adim 4)
   Sitenin is modeli "Teklif Al": iletisim, teklif ve IK formlari donusumun
   gerceklestigi yer. Tema alanlari duz, keskin koseli ve odak gostergesi
   zayifti (tarayici varsayilani).

   NOT: bu formlarin isaretlemesinde CSRF gizli alani ve kosullu dogrulama
   blogu var - onlara DOKUNULMADI, yalnizca gorunum katmani eklendi.
   ========================================================================== */
.contact-page-form-area input[type="text"],
.contact-page-form-area input[type="email"],
.contact-page-form-area input[type="tel"],
.contact-page-form-area textarea,
.human-resource-page-content-form input[type="text"],
.human-resource-page-content-form input[type="email"],
.human-resource-page-content-form input[type="tel"],
.human-resource-page-content-form textarea,
.human-resource-page-main input[type="text"],
.human-resource-page-main input[type="email"],
.human-resource-page-main input[type="tel"],
.human-resource-page-main textarea,
.product-form input[type="text"],
.product-form input[type="email"],
.product-form input[type="tel"],
.product-form textarea {
  border: 1px solid var(--ada-20);
  border-radius: var(--ada-r-sm);
  background: var(--ada-00);
  color: var(--ada-95);
  padding: 12px 14px;
  transition: border-color var(--ada-sure) var(--ada-egri),
              box-shadow var(--ada-sure) var(--ada-egri);
}
.contact-page-form-area input:focus,
.contact-page-form-area textarea:focus,
.human-resource-page-content-form input:focus,
.human-resource-page-content-form textarea:focus,
.human-resource-page-main input:focus,
.human-resource-page-main textarea:focus,
.product-form input:focus,
.product-form textarea:focus {
  outline: none;
  border-color: var(--ada-vurgu);
  /* odak halkasi: klavyeyle gezen kullanici nerede oldugunu gormeli */
  box-shadow: 0 0 0 3px var(--ada-vurgu-05);
}
.contact-page-form-area label,
.human-resource-page-content-form label,
.human-resource-page-main label {
  color: var(--ada-60);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  margin-bottom: 6px;
}

/* Gonder butonlari: sablonlarda "btn-danger" (Bootstrap'in YIKICI varyanti)
   kullaniliyordu - anlam yanlisti ve paletten bagimsizdi. Artik "btn-ada".
   Dokunma hedefi olcutu icin yukseklik garantisi:                            */
.contact-page-form-area .btn-ada,
.human-resource-page-content-form .btn-ada,
.human-resource-page-main .btn-ada,
.product-form .btn-ada { min-height: 48px; padding-left: 26px; padding-right: 26px; }

/* =============================================================================
   12. KABUK: SABIT HEADER, MEGA MENU, FOOTER  (Adim 5)
   Her sayfada gorunen katman.
   ========================================================================== */

/* --- Sabit (sticky) header ------------------------------------------------
   OLCULDU: 900px kaydirinca beliriyor, 1440x78, beyaz zemin, golge
   rgba(0,0,0,.1) 0 0 10px. Calisiyor ama ANIDEN beliriyor ve golgesi
   her yone esit yayilan, yonsuz bir bulut.                                   */
#fixed-header-main {
  box-shadow: 0 1px 0 var(--ada-20), var(--ada-golge-2);
  /* aniden belirme yerine yukaridan kayarak girsin */
  animation: adaHeaderIn var(--ada-sure) var(--ada-egri) both;
}
@keyframes adaHeaderIn {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}
.fixed-header-logo img { max-height: 46px; width: auto; }

/* --- Mega menu -----------------------------------------------------------
   Tema acilir menuye kutu golgesi vermiyordu; menu sayfa icerigine yapisik
   duruyor ve katman hissi olusmuyordu.                                       */
.mega-level-menu,
.second-level-menu,
.third-level-menu {
  border-radius: 0 0 var(--ada-r-md) var(--ada-r-md);
  box-shadow: var(--ada-golge-3);
  border-top: 2px solid var(--ada-vurgu);
}
.mega-menu-product-box {
  border-radius: var(--ada-r-sm);
  background: var(--ada-05);
  transition: transform var(--ada-sure) var(--ada-egri),
              box-shadow var(--ada-sure) var(--ada-egri);
}
.mega-menu-product-box:hover {
  transform: translateY(-2px);
  box-shadow: var(--ada-golge-2);
}

/* --- Footer --------------------------------------------------------------
   Tema ic kapsayiciya sabit 1366px veriyordu; 1440px ekranda kenarlara
   yapisiyor, arada kalan genisliklerde ise yatay bosluk kayboluyordu.
   Ayrica ust blok #0c0c0c, alt bar #1d1d1d idi: iki neredeyse ayni koyu ton
   ust uste binince ayrim okunmuyordu. Ikisi de --ada-95'e baglandi ve ayrim
   artik ince bir ust kenarlikla veriliyor.                                   */
.footer-dark-ust-main-inside,
.footer-dark-alt-main-inside,
.footer-light-ust-main-inside,
.footer-light-alt-main-inside {
  width: min(92%, 1366px);
  max-width: 1366px;
}
.footer-dark-alt-main,
.footer-light-alt-main { border-top: 1px solid rgba(255, 255, 255, .08); }

/* KOYU footer'da metin rengi hic ATANMAMIS: Bootstrap'in govde rengi
   (#212529) miras aliniyordu ve koyu zeminde OLCULDU 1.14:1 - yani metin
   pratikte GORUNMUYORDU. Acik notr tona cekildi (olculdu 6.99:1).           */
.footer-dark-about-div,
.footer-dark-about-div p,
.footer-dark-about-div div { color: var(--ada-40); }

.footer-dark-links-div a,
.footer-dark-about-div a {
  transition: color var(--ada-sure) var(--ada-egri);
}
.footer-dark-links-div a:hover,
.footer-dark-about-div a:hover { color: var(--ada-vurgu); }

/* Footer basliklari: sessiz ust-etiket gorunumu */
.footer-dark-links-div-header,
.footer-light-links-div-header {
  letter-spacing: .06em;
  font-size: 13px;
  margin-bottom: 14px;
}

/* Footer sosyal ikonlari: dokunma hedefi ve hover geri bildirimi */
.footer-dark-social a,
.footer-light-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: background-color var(--ada-sure) var(--ada-egri),
              color var(--ada-sure) var(--ada-egri);
}
.footer-dark-social a:hover {
  background: rgba(255, 255, 255, .08);
  color: var(--ada-vurgu);
}
.footer-light-social a:hover {
  background: var(--ada-10);
  color: var(--ada-vurgu);
}

/* Yukari-cik dugmesi: dokunma hedefi olcutu */
#return-to-top {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  box-shadow: var(--ada-golge-2);
  transition: transform var(--ada-sure) var(--ada-egri),
              box-shadow var(--ada-sure) var(--ada-egri);
}
#return-to-top:hover { transform: translateY(-2px); box-shadow: var(--ada-golge-3); }

/* =============================================================================
   BASLIK HIYERARSISI
   OLCULDU: 11 sayfada h1 SAYISI 0 idi (birincil baslik sinyali yok), urunler
   sayfasinda 10 tane vardi ve hepsi MEGA MENUDEKI dekoratif urun etiketleriydi
   (13-14px metinler). Mega menudekiler <span>'e cevrildi; sayfa basligi
   (.page-headers-main-left) artik gercek <h1>.

   Asagidaki kural GORUNUMU DEGISTIRMEMEK icin: tarayici h1'e 2em boyut,
   kalin agirlik ve dikey bosluk verir; sablondaki font siniflari zaten
   boyutu belirliyordu.
   ========================================================================== */
/* Iletisim sayfasinda gorsel sayfa basligi bloğu yok; ilk bolum basligi
   ("Iletisime Gecin") h1 yapildi. Gorunum degismesin diye ayni notrleme. */
h1.modules-header-main-baslik,
h1.page-headers-main-left {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
}

/* Anasayfada gorsel bir sayfa basligi yok (slider var). Arama motorlari ve
   ekran okuyucular icin gorunmez ama OKUNABILIR bir h1 gerekiyor.
   display:none KULLANILMAZ - o, ekran okuyuculardan da gizler.              */
.ada-gorsel-gizli {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =============================================================================
   13. FORM GERI BILDIRIMI ve ZORUNLU ALANLAR  (Adim 6)
   Sitenin is modeli tamamen teklif uzerine kurulu; bu formlar donusumun
   gerceklestigi tek yer.
   ========================================================================== */

/* --- Zorunlu alan isareti ------------------------------------------------
   Alanlarda `required` niteligi VAR (teklif 7, iletisim 5, IK 16) ama hicbir
   GORSEL isaret yoktu; kullanici neyi doldurmak zorunda oldugunu ancak
   gonderdikten sonra ogreniyordu.
   :has() desteklenmeyen tarayicida kural hic uygulanmaz - zararsiz.          */
.form-group:has(input:required) > label::after,
.form-group:has(textarea:required) > label::after,
.form-group:has(select:required) > label::after {
  content: ' *';
  color: var(--ada-vurgu);
  font-weight: 700;
}

/* --- Hatali alan geri bildirimi ------------------------------------------
   :user-invalid yalnizca kullanici ALANLA ETKILESTIKTEN sonra devreye girer.
   (:invalid kullanilsaydi form daha acilirken her zorunlu alan kirmizi
   gorunurdu - yeni gelen ziyaretciyi bosuna uyarir.)                        */
.contact-page-form-area input:user-invalid,
.contact-page-form-area textarea:user-invalid,
.human-resource-page-content-form input:user-invalid,
.human-resource-page-content-form textarea:user-invalid,
.human-resource-page-main input:user-invalid,
.human-resource-page-main textarea:user-invalid {
  border-color: #C0392B;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .12);
}

/* --- Guvenlik kodu satiri ------------------------------------------------
   Bootstrap input-group; kod gorseli input-group-text icinde duruyor.       */
.input-group-text {
  background: var(--ada-05);
  border-color: var(--ada-20);
  border-radius: var(--ada-r-sm) 0 0 var(--ada-r-sm);
  padding: 0 10px;
}
.form-captcha-height {
  min-height: 48px;
  border-radius: 0 var(--ada-r-sm) var(--ada-r-sm) 0 !important;
  letter-spacing: .12em;
  font-weight: 600;
}

/* --- SweetAlert: form sonucu modali --------------------------------------
   Form basari/hata bildirimi SweetAlert2 ile veriliyor (sablonlar eski
   `swal({...})` API'sini cagiriyor, uyumluluk.js yeni surume koprulüyor -
   TEST EDILDI, calisiyor). Onay dugmesi kutuphanenin VARSAYILAN MORU
   (#7066E0) idi; sitenin hicbir yerinde olmayan bir renk.                   */
.swal2-popup {
  border-radius: var(--ada-r-lg);
  font-family: 'Open Sans', Arial, sans-serif;
  box-shadow: var(--ada-golge-3);
}
.swal2-title { color: var(--ada-95); font-weight: 700; }
.swal2-html-container { color: var(--ada-60); }
.swal2-styled.swal2-confirm {
  background-color: var(--ada-vurgu) !important;
  border-radius: var(--ada-r-sm) !important;
  font-weight: 600;
  min-height: 44px;
  padding-left: 26px;
  padding-right: 26px;
}
.swal2-styled.swal2-confirm:hover { background-color: var(--ada-vurgu-koyu) !important; }
.swal2-styled.swal2-confirm:focus {
  box-shadow: 0 0 0 3px var(--ada-vurgu-05) !important;
}
.swal2-styled.swal2-cancel {
  background-color: var(--ada-10) !important;
  color: var(--ada-80) !important;
  border-radius: var(--ada-r-sm) !important;
  min-height: 44px;
}

/* --- Formlarda mobil duzen ----------------------------------------------- */
@media screen and (max-width: 767.98px) {
  .contact-page-form-area .form-group,
  .human-resource-page-content-form .form-group,
  .human-resource-page-main .form-group { margin-bottom: 16px; }
  /* Guvenlik kodu satiri dar ekranda sikismasin */
  .input-group.mb-2.mr-sm-2 { flex-wrap: nowrap; }
}

/* =============================================================================
   14. SCROLL-REVEAL (hareket katmani)
   modern.js IntersectionObserver ile .ada-goster sinifini ekler.
   JS calismazsa icerik GORUNUR kalir: baslangic durumu yalnizca <html> uzerinde
   .ada-js varken uygulanir, o sinifi da JS'in kendisi koyar.
   ========================================================================== */
.ada-js .ada-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--ada-sure-yavas) var(--ada-egri-yumusak),
              transform var(--ada-sure-yavas) var(--ada-egri-yumusak);
  transition-delay: var(--ada-gecikme, 0ms);
  will-change: opacity, transform;
}
.ada-js .ada-reveal.ada-goster { opacity: 1; transform: none; }
.ada-js .ada-reveal.ada-bitti  { will-change: auto; }

/* Yazdirmada hicbir sey gizli kalmasin: yazici kaydirma yapmaz, gozlemci
   asla ateslenmez. Bu blok olmadan cikti bos kartlarla basilir.               */
@media print {
  .ada-js .ada-reveal { opacity: 1 !important; transform: none !important; }
}

/* =============================================================================
   15. HEADER - UST BAR  (Adim 4)
   -----------------------------------------------------------------------------
   OLCULDU: bar 42px, dolgu 5px 0, zemin #1E3A34. Sosyal ikonlar 20px aralikli
   duz baglantiydi - dokunma hedefi yok, hover geri bildirimi yok.

   >>> DB'NIN YAZDIGI OZELLIKLER BURADA YENIDEN TANIMLANMAZ <<<
   header.php <body> icinde su kurallari basiyor ve sira geregi bu dosyayi ezer:
     .header-ust-bar-main         -> padding, background-color, width, border-bottom
     .header-ust-bar-*-ic a/i/p   -> color
   Bunlara dokunulmaz; panelden renk/dolgu degistirilebilir kalsin diye.
   Burada yalnizca DB'nin bilmedigi seyler var: bosluk ritmi, sekil, hareket.
   ========================================================================== */

/* Sosyal ikonlar: gorunur daire hedef. RENK DB'den gelmeye devam ediyor. */
.header-ust-bar-left-table-ic a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: 2px;          /* tema 20px veriyordu - bar sismis gorunuyordu */
  border-radius: 50%;
  transition: background-color var(--ada-sure-hizli) var(--ada-egri),
              transform       var(--ada-sure-hizli) var(--ada-egri);
}
.header-ust-bar-left-table-ic a:hover,
.header-ust-bar-left-table-ic a:focus-visible {
  background-color: rgba(255, 255, 255, .14);
  transform: translateY(-1px);
}

/* Iletisim kutulari: tiklanabilir olduklari belli olsun */
.header-ust-bar-right-table-ic-box {
  transition: opacity var(--ada-sure-hizli) var(--ada-egri);
}
.header-ust-bar-right-table-ic-box:hover { opacity: .82; }

/* TEKLIF AL: renk .btn-ada'dan (bolum 2), burada yalnizca yukselme */
.header-ust-bar-right-table-ic-box .btn {
  transition: background-color var(--ada-sure) var(--ada-egri),
              border-color     var(--ada-sure) var(--ada-egri),
              transform        var(--ada-sure-hizli) var(--ada-egri),
              box-shadow       var(--ada-sure) var(--ada-egri);
}
.header-ust-bar-right-table-ic-box .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
}
.header-ust-bar-right-table-ic-box .btn:active { transform: translateY(0); }


/* =============================================================================
   16. HEADER - ANA MENU
   -----------------------------------------------------------------------------
   Tema hover'da <li>'ye KESKIN KOSELI dolu blok basiyor ve gecis yok - renk
   aniden siciyor. Zemin rengi DB'den (.top-level-menu > li:hover{background}),
   ona dokunulmuyor; yalnizca kose yaricapi + gecis eklenip yumusatiliyor.
   ========================================================================== */
/* OLCULEN HATA: yalnizca `> li` yazmak YETMIYOR. nav-menu.css:94'te tema
   ACIKCA `.top-level-menu > li:hover { border-radius: 0px }` diyor. Onun
   ozgullugu (0,2,1) benimkinden (0,1,1) YUKSEK, yani hover aninda tema
   kaziniyor: duragan halde 6px, hover'da 0px oluyordu - tam da yaricapin
   gorulmesi gereken anda. Cozum :hover durumunu ACIKCA yazmak; modern.css
   nav-menu.css'ten SONRA yuklendigi icin esit ozgullukte biz kazaniyoruz. */
/* Tam hap (999px): 35px yuksek bir ogede en okunur "modern" isaret bu.
   6px'lik yumusak kose bu olcekte neredeyse fark edilmiyordu. */
.top-level-menu > li,
.top-level-menu > li:hover {
  border-radius: 999px;
}
.top-level-menu > li {
  transition: background-color var(--ada-sure-hizli) var(--ada-egri);
}
.top-level-menu > li span {
  transition: color var(--ada-sure-hizli) var(--ada-egri);
}

/* Acilir menuler: display degisimi animate edilemez, o yuzden anahtar kare.
   Secici tutmazsa hicbir sey olmaz - kirilma riski yok.                      */
@keyframes ada-menu-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.top-level-menu > li:hover > .second-level-menu,
.top-level-menu > li:hover > .mega-level-menu {
  animation: ada-menu-in var(--ada-sure) var(--ada-egri) both;
}

/* Arama ve dil dugmeleri de ayni dile uysun */
.dropdown-arrow-before-search,
.header-main-menu-other-div .dropdown-toggle {
  transition: opacity var(--ada-sure-hizli) var(--ada-egri);
}
.dropdown-arrow-before-search:hover,
.header-main-menu-other-div .dropdown-toggle:hover { opacity: .75; }

/* --- Masaustu arama paneli ------------------------------------------------
   OLCULEN IKI SORUN (style.css):
   1) `min-width:700px !important` - tek bir arama kutusu icin dev bir panel.
      Dar ekranda da 700px'te israr ediyordu.
   2) `.dropdown-box-type-search-show button{display:none}` - GONDER DUGMESI
      TAMAMEN GIZLIYDI. Kullanicinin Enter'a basmasi gerekiyordu; dokunmatik
      klavyede bu hic belli olmuyor. Dugme geri getirildi. Isaretlemedeki
      <button> BOS oldugu icin ikon ::after ile veriliyor (Font Awesome 4.7,
      \f002 = fa-search; projede FA4 kullaniliyor, bkz. tasarim notlari).
   Panelin genisligi ve dugme gizleme !important tasidigi icin burada da
   !important sart - baska turlu ezilmiyor (olculdu).                        */
.dropdown-box-type-search-show {
  min-width: min(520px, calc(100vw - 40px)) !important;
  padding: 10px !important;
  box-shadow: var(--ada-golge-3);
  border-radius: var(--ada-r-md) !important;
}
/* Kutu + dugme tek satirda */
.dropdown-box-type-search-show form {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dropdown-box-type-search-show input {
  flex: 1 1 auto;
  height: 44px !important;               /* dokunma hedefi */
  background-color: var(--ada-05);
  border: 1px solid var(--ada-20) !important;
  border-radius: var(--ada-r-sm);
  transition: border-color var(--ada-sure-hizli) var(--ada-egri),
              box-shadow   var(--ada-sure-hizli) var(--ada-egri),
              background-color var(--ada-sure-hizli) var(--ada-egri);
}
.dropdown-box-type-search-show input:focus {
  background-color: var(--ada-00);
  border-color: var(--ada-vurgu) !important;
  box-shadow: 0 0 0 3px rgba(194, 96, 60, .18);   /* yedek */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ada-vurgu) 18%, transparent);
}
.dropdown-box-type-search-show button {
  display: inline-flex !important;       /* gizliydi - geri getirildi */
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--ada-r-sm);
  background-color: var(--ada-vurgu);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--ada-sure) var(--ada-egri),
              transform        var(--ada-sure-hizli) var(--ada-egri);
}
.dropdown-box-type-search-show button::after {
  content: "\f002";                      /* fa-search */
  font-family: FontAwesome;
  font-size: 15px;
  line-height: 1;
}
.dropdown-box-type-search-show button:hover { background-color: var(--ada-vurgu-koyu); }
.dropdown-box-type-search-show button:active { transform: translateY(1px); }

/* --- Liste sayfasi yan cubugundaki arama --------------------------------
   style.css:757 `.products-left-bar-search-div button{background: dodgerblue}`.
   Mobil aramadakiyle AYNI artik: tema demosundan kalma ISIMLI bir CSS rengi,
   palet taramasi hex ve *_bg kolonlari aradigi icin gozden kacmisti.
   CSS'te toplam 6 `dodgerblue` var; besi responsive.css'teki ayni mobil
   kuralin breakpoint tekrari (bolum 18'de ezildi), bu altincisi.            */
.products-left-bar-search-div button {
  background: var(--ada-vurgu) !important;
  color: #fff;
  min-height: 42px;
  border-radius: 0 var(--ada-r-sm) var(--ada-r-sm) 0;
  transition: background-color var(--ada-sure) var(--ada-egri);
}
.products-left-bar-search-div button:hover { background: var(--ada-vurgu-koyu) !important; }
.products-left-bar-search-div input {
  min-height: 42px;
  border-radius: var(--ada-r-sm) 0 0 var(--ada-r-sm);
  transition: border-color var(--ada-sure-hizli) var(--ada-egri),
              box-shadow   var(--ada-sure-hizli) var(--ada-egri);
}
.products-left-bar-search-div input:focus {
  border-color: var(--ada-vurgu) !important;
  box-shadow: 0 0 0 3px rgba(194, 96, 60, .18);                                /* yedek */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ada-vurgu) 18%, transparent);
}


/* =============================================================================
   17. HEADER - KAYDIRMA DURUMU (sticky)
   -----------------------------------------------------------------------------
   OLCULDU: #fixed-header-main position:fixed, 78px, dolgu 20px 0 ve golgesi
   HER ZAMAN acik. modern.js sayfa kaydirilinca <html>'e .ada-kaydirildi
   ekliyor; golge ve yogunlasma yalnizca o zaman devreye giriyor.
   ========================================================================== */
#fixed-header-main {
  box-shadow: none;
  transition: box-shadow var(--ada-sure) var(--ada-egri),
              padding    var(--ada-sure) var(--ada-egri),
              background-color var(--ada-sure) var(--ada-egri);
}
.ada-kaydirildi #fixed-header-main {
  padding-top: 12px;
  padding-bottom: 12px;
  box-shadow: var(--ada-golge-2);
}
/* Saydamlik destekleniyorsa cam etkisi; desteklenmiyorsa zemin duz kalir. */
@supports (backdrop-filter: blur(8px)) {
  .ada-kaydirildi #fixed-header-main {
    backdrop-filter: saturate(1.35) blur(10px);
  }
}


/* =============================================================================
   18. HEADER - MOBIL
   -----------------------------------------------------------------------------
   OLCULDU: .header-mobile-main 101px yuksek, dolgu 30px 0 0 - ustte gereksiz
   bosluk. 1100px'e kadar MOBIL header gorunuyor (bkz. frontend mimarisi notu),
   o yuzden esik 1100.98.
   Hamburger dokunma hedefi bolum 9'da cozuldu - burada TEKRARLANMIYOR.
   ========================================================================== */
@media (max-width: 1100.98px) {
  .header-mobile-main {
    padding-top: 14px;
    padding-bottom: 14px;
    transition: box-shadow var(--ada-sure) var(--ada-egri);
  }
  .ada-kaydirildi .header-mobile-main { box-shadow: var(--ada-golge-2); }

  /* Hamburger cizgileri: acilma/kapanma yumusasin (tema jQuery'si #nav-icon1
     uzerinde .open sinifini kendisi degistiriyor).                           */
  #nav-icon1 span {
    transition: transform var(--ada-sure) var(--ada-egri),
                opacity   var(--ada-sure-hizli) var(--ada-egri),
                top       var(--ada-sure) var(--ada-egri);
  }

  /* Mobil menu baglantilari: nefes alsin, dokunma hedefi buyusun */
  .opening-mobile-menu-div .ladder a {
    padding-top: 11px;
    padding-bottom: 11px;
    transition: background-color var(--ada-sure-hizli) var(--ada-egri),
                padding-left      var(--ada-sure-hizli) var(--ada-egri);
  }
  .opening-mobile-menu-div .ladder a:active {
    background-color: rgba(0, 0, 0, .04);
    padding-left: 6px;
  }

  /* --- Mobil arama --------------------------------------------------------
     OLCULEN HATA (responsive.css): arama dugmesinin zemini `dodgerblue`.
     Tema demosundan kalma, Ada paletiyle (orman/terracotta) hicbir ilgisi yok.
     2026-09-08 palet temizligi bunu KACIRDI cunku tarama hex degerleri ve
     *_bg kolonlarini ariyordu; bu ise ISIMLI bir CSS rengi ve CSS dosyasinda.
     Ayrica input sabit 260px genisindeydi - dar telefonda tasiyor, genis
     telefonda bosluk birakiyordu; akiskan yapildi.                          */
  .header-mobile-menu-search-area form {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 420px;
    margin: 0 auto;
    padding: 0 16px;
  }
  .header-mobile-menu-search-area input {
    flex: 1 1 auto;
    width: auto !important;              /* tema sabit 260px veriyordu */
    min-height: 44px;
    border-radius: var(--ada-r-sm);
    transition: border-color var(--ada-sure-hizli) var(--ada-egri),
                box-shadow   var(--ada-sure-hizli) var(--ada-egri);
  }
  .header-mobile-menu-search-area input:focus {
    border-color: var(--ada-vurgu) !important;
    box-shadow: 0 0 0 3px rgba(194, 96, 60, .18);   /* yedek */
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ada-vurgu) 18%, transparent);
  }
  .header-mobile-menu-search-area button,
  .offer-tracing-mobile-main-div .btn {
    min-height: 44px;
    border-radius: var(--ada-r-sm);
    transition: background-color var(--ada-sure) var(--ada-egri),
                transform var(--ada-sure-hizli) var(--ada-egri),
                box-shadow var(--ada-sure) var(--ada-egri);
  }
  .header-mobile-menu-search-area button {
    flex: 0 0 auto;
    width: auto !important;              /* tema sabit 80px veriyordu */
    padding: 0 18px;
    background-color: var(--ada-vurgu) !important;   /* dodgerblue yerine */
    color: #fff;
  }
  .header-mobile-menu-search-area button:active { transform: translateY(1px); }
  .offer-tracing-mobile-main-div .btn:active { transform: translateY(1px); }

  /* Mobil sosyal ikonlar: parmakla basilabilir daire */
  .mobile-menu-social-div-left a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background-color var(--ada-sure-hizli) var(--ada-egri);
  }
  .mobile-menu-social-div-left a:active { background-color: rgba(0, 0, 0, .06); }
}


/* =============================================================================
   19. FOOTER - UST BOLUM
   -----------------------------------------------------------------------------
   OLCULDU: .footer-dark-ust-main 448px, dolgu 50px 0, zemin #171A19.
   Sorunlar: kolon basliklarinin govdeden ayrimi zayif, baglantilarda hover
   geri bildirimi YOK, sosyal ikonlar 20px aralikli anonim gri harfler.
   Footer'da DB yalnizca .footer-main-div{width} basiyor - gerisi serbest.
   ========================================================================== */

/* --- Kolon basliklari: kisa vurgu cizgisi -------------------------------- */
.footer-dark-links-div-header,
.footer-light-links-div-header {
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 4px;
}
.footer-dark-links-div-header::after,
.footer-light-links-div-header::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--ada-vurgu);
}

/* --- Baglantilar: hover'da parlar ve saga kayar -------------------------- */
.footer-dark-links-div-links a,
.footer-light-links-div-links a {
  position: relative;
  display: inline-block;
  transition: color     var(--ada-sure-hizli) var(--ada-egri),
              transform var(--ada-sure-hizli) var(--ada-egri);
}
.footer-dark-links-div-links a::before,
.footer-light-links-div-links a::before {
  content: '';
  position: absolute;
  left: -11px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--ada-vurgu);
  opacity: 0;
  transform: translateY(-50%) scale(.4);
  transition: opacity   var(--ada-sure-hizli) var(--ada-egri),
              transform var(--ada-sure-hizli) var(--ada-egri);
}
.footer-dark-links-div-links a:hover  { color: var(--ada-00); transform: translateX(5px); }
.footer-light-links-div-links a:hover { color: var(--ada-95); transform: translateX(5px); }
.footer-dark-links-div-links a:hover::before,
.footer-light-links-div-links a:hover::before {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* --- Sosyal ikonlar: cip haline geldi ------------------------------------ */
.footer-dark-social a,
.footer-light-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-right: 8px;          /* tema 20px veriyordu */
  border-radius: 50%;
  transition: background-color var(--ada-sure) var(--ada-egri),
              border-color     var(--ada-sure) var(--ada-egri),
              color            var(--ada-sure) var(--ada-egri),
              transform        var(--ada-sure-hizli) var(--ada-egri),
              box-shadow       var(--ada-sure) var(--ada-egri);
}
.footer-dark-social a {
  background-color: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .11);
}
.footer-light-social a {
  background-color: var(--ada-05);
  border: 1px solid var(--ada-20);
}
.footer-dark-social a:hover,
.footer-light-social a:hover {
  background-color: var(--ada-vurgu);
  border-color: var(--ada-vurgu);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(194, 96, 60, .38);   /* yedek */
  box-shadow: 0 6px 18px color-mix(in srgb, var(--ada-vurgu) 38%, transparent);
}

/* --- Iletisim satirlari -------------------------------------------------- */
.footer-dark-contact-div-box a,
.footer-light-contact-div-box a {
  transition: opacity var(--ada-sure-hizli) var(--ada-egri);
}
.footer-dark-contact-div-box a:hover,
.footer-light-contact-div-box a:hover { opacity: .78; }

/* --- "Devami" baglantisi ------------------------------------------------- */
.footer-dark-about-text a,
.footer-light-about-text a {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  transition: gap var(--ada-sure-hizli) var(--ada-egri);
}
.footer-dark-about-text a:hover,
.footer-light-about-text a:hover { gap: .85em; }


/* =============================================================================
   20. FOOTER - ALT BAR
   -----------------------------------------------------------------------------
   OLCULDU: .footer-dark-alt-main ile ust bolum AYNI zemin renginde (#171A19)
   ve aralarinda hicbir ayirici yok - telif seridi ayri bir bant gibi okunmuyor.
   ========================================================================== */
.footer-dark-alt-main  { border-top: 1px solid rgba(255, 255, 255, .08); }
.footer-light-alt-main { border-top: 1px solid var(--ada-20); }

/* Telif satirindaki baglanti (gelistirici kunyesi).
   NOT: DB degerinden satir ici stil KALDIRILDI, bicim artik burada -
   boylece hover durumu tanimlanabiliyor (satir ici stil hover kabul etmez). */
.footer-dark-alt-main-left-text a,
.footer-light-alt-main-left-text a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--ada-sure-hizli) var(--ada-egri);
}
.footer-dark-alt-main-left-text a:hover  { color: var(--ada-00); }
.footer-light-alt-main-left-text a:hover { color: var(--ada-vurgu); }

.footer-dark-alt-main-right img,
.footer-light-alt-main-right img {
  opacity: .85;
  transition: opacity var(--ada-sure) var(--ada-egri);
}
.footer-dark-alt-main-right img:hover,
.footer-light-alt-main-right img:hover { opacity: 1; }


/* =============================================================================
   21. YUZEN DUGMELER
   -----------------------------------------------------------------------------
   OLCULEN HATA: WhatsApp dugmesi (.cbh-phone, position:fixed, left:-20px,
   bottom:20px, 200x150) sayfa sonuna inildiginde telif yazisinin USTUNE
   BINIYOR. CDP ile dogrulandi: cakisma = EVET.

   ILK DENENEN COZUM YETERSIZDI: dugmeyi yukari kaydirmak (translateY -104px)
   masaustunde calisti ama MOBILDE olculdu ki bu sefer "Bize Ulasin" baglantisinin
   ustune biniyor - yani sorun cozulmuyor, tasiniyor. Yuzen bir dugme sabit
   konumlu oldugu icin sayfa sonunda HER ZAMAN bir seyin uzerinde duruyor.

   UYGULANAN COZUM: telif seridi goruntuye girdiginde dugmeyi sondurmek.
   Cagri eylemi kaybolmuyor, cunku footer'in iletisim listesinde WhatsApp
   numarasi zaten yazili (.footer-*-contact-div) - kullanici tam oraya varmis
   durumda. pointer-events:none sonmus dugmenin tiklanmasini da engelliyor.
   modern.js .ada-telif-yakin sinifini ekliyor.
   ========================================================================== */
.cbh-phone {
  transition: opacity   var(--ada-sure-yavas) var(--ada-egri),
              transform var(--ada-sure-yavas) var(--ada-egri),
              visibility .5s;
}
.cbh-phone.ada-telif-yakin {
  opacity: 0;
  /* translateZ(0) korunuyor - tema onu katman yalitimi icin koymus */
  transform: translateY(16px) translateZ(0);
  pointer-events: none;
}


/* Dar ekranda telif seridi, yukari-cik dugmesine yer acar.
   OLCULDU (390px): dugme .footer-dark-alt-main-left uzerine biniyordu.
   WhatsApp'taki gibi sondurulemez - yukari-cik tam da sayfa sonunda en
   ise yarar durumda. Onun yerine serit alttan nefes aliyor: son metin
   satiri dugmenin ustunde kaliyor.
   NOT: env(safe-area-*) BURADA YAZILMAZ - o mobile-fixes.css'in isi
   (bkz. dosya basindaki sozlesme); buradaki dolgu onun USTUNE eklenir.  */
@media (max-width: 767.98px) {
  .footer-dark-alt-main,
  .footer-light-alt-main { padding-bottom: 84px; }
}

/* --- Telefon FAB ----------------------------------------------------------
   WhatsApp dugmesinin hemen USTUNDE, ayni olcude, farkli renkte.

   KONUM/OLCU - OLCULEREK BULUNDU, TAHMIN DEGIL.
   Ilk denemem YANLISTI: yalnizca ikon diskini olcup alt=114px verdim. Ama
   temanin WhatsApp'i tek daire degil, IC ICE UC katman:
       .cbh-phone          200x150 kutu   (sol -20, alt 20)  - seffaf kap
       .cbh-ph-circle      110x110 halka  (sol  20, alt 20..130) animasyonlu,
                           cbh-circle-anim en buyuk halinde scale(1)
       .cbh-ph-circle-fill  53x53 parlak disk (sol 48, alt 49)  - GOZE "dugme"
                           olarak okunan katman budur
       .cbh-ph-img-circle1  50x50 ikon diski (sol 50, alt 50)
   Iki sonuc:
   1) 50px'lik duz bir daire, 53px'lik parlak disk + halo yanında KUCUK duruyordu.
      Olcu 54px'e cikarildi (parlak diskle ayni agirlikta okunuyor).
   2) alt=114px halkanin ICINDE kaliyordu (halka 130px'e kadar uzaniyor) -
      yani iki dugme cakisiyordu. alt=150px yapildi: kendi nabiz halkam da
      14px yayildigi icin en alt noktam 136px, halkanin tepesiyle 6px bosluk.
   Yatay: ikon diski sol 50 + 50/2 = merkez 75. 54px icin sol = 75-27 = 48.
   BU OLCULERDEN BIRI DEGISIRSE burasi yeniden hesaplanmali.

   Renk terracotta: WhatsApp yesili taninan bir servis rengi (bkz. bolum 11
   notu, bilerek palete baglanmadi), telefon ise markanin kendi vurgusu.       */
.ada-tel-fab {
  position: fixed;
  left: 48px;
  bottom: 150px;
  z-index: 999;                 /* .cbh-phone ile ayni katman */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-color: var(--ada-vurgu);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(23, 26, 25, .28);
  animation: ada-fab-nabiz 2.6s var(--ada-egri-yumusak) infinite;
  transition: transform  var(--ada-sure-hizli) var(--ada-egri),
              opacity    var(--ada-sure-yavas) var(--ada-egri),
              background-color var(--ada-sure) var(--ada-egri),
              box-shadow var(--ada-sure) var(--ada-egri);
}
.ada-tel-fab i { font-size: 20px; line-height: 1; }
.ada-tel-fab:hover,
.ada-tel-fab:focus-visible {
  background-color: var(--ada-vurgu-koyu);
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 8px 22px rgba(23, 26, 25, .36);
  animation-play-state: paused;   /* kullanici buldu, sinyale gerek yok */
}
.ada-tel-fab:active { transform: scale(.96); }

/* Nabiz halkasi. Rengi `--fab-nabiz-renk` degiskeninden gelir; boylece AYNI
   anahtar kareyi hem telefon (marka rengi) hem WhatsApp (kendi yesili) kullanir.
   Yedek deger terracotta - degisken tanimsizsa eski davranis surer.          */
@keyframes ada-fab-nabiz {
  0%   { box-shadow: 0 4px 14px rgba(23,26,25,.28),
                     0 0 0 0 var(--fab-nabiz-renk, rgba(194, 96, 60, .55)); }
  70%  { box-shadow: 0 4px 14px rgba(23,26,25,.28), 0 0 0 14px transparent; }
  100% { box-shadow: 0 4px 14px rgba(23,26,25,.28), 0 0 0 0  transparent; }
}
.ada-tel-fab {
  --fab-nabiz-renk: rgba(194, 96, 60, .55);                                 /* yedek */
  --fab-nabiz-renk: color-mix(in srgb, var(--ada-vurgu) 55%, transparent);
}

/* Telif seridine gelince WhatsApp ile BIRLIKTE sonsun - yoksa tek basina
   kalip yaziyi ortmeye devam eder (modern.js ikisini de isaretliyor). */
.ada-tel-fab.ada-telif-yakin {
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  animation: none;
}

/* --- YUZEN DUGMELER SAG ALT SUTUNUNDA YIGILIR ----------------------------
   NEDEN TASINDI: dugmeler solda duruyordu ve liste sayfalarinda (products.php,
   products_cat_sub.php) soldaki 306px'lik `.products-left-bar-main` yan
   cubugunun UZERINE BINIYORLARDI - arama kutusunu ve populer urunleri
   ortuyorlardi (CDP ile olculdu, /urunler 1440px). Anasayfada sorun degildi
   cunku sol taraf bos.

   NEDEN "yalnizca liste sayfalarinda saga al" DEGIL: saga almak HER halukarda
   yeniden yiginlama gerektiriyor (asagidaki hesap), cunku WhatsApp'in 110px'lik
   halkasi `#return-to-top` ile cakisiyor. Madem yiginlama zorunlu, bunu
   sayfaya gore degistirmek yerine HER YERDE ayni tutmak dogru: yuzen dugmenin
   sayfadan sayfaya yer degistirmesi kullaniciyi arattirir. Sag kenar bu temanin
   TUM sablonlarinda bos (yan cubuk hep solda).

   WHATSAPP TEMANIN COK KATMANLI HALKASINDAN SADELESTIRILDI:
   Tema WhatsApp'i 200x150'lik seffaf bir kutu icinde UC katmanla ciziyordu -
   `.cbh-ph-circle` (110px, animasyonlu halka), `.cbh-ph-circle-fill` (53px,
   parlak disk) ve `.cbh-ph-img-circle1` (50px ikon diski). Bu yuzden dugme
   telefon dugmesinden buyuk gorunuyor ve sutunda 110px yer kapliyordu.
   Kullanici "telefon arama dugmesiyle ayni stil olsun" dedi: iki dis katman
   gizlendi, ikon diski kutuyu dolduran 54px'lik sade bir daireye cevrildi ve
   ayni `ada-fab-nabiz` animasyonunu aldi (rengi kendi yesili - WhatsApp
   taninan bir servis rengi, bilerek palete baglanmadi; bkz. bolum 11).

   YENI GEOMETRI - hepsi 54px, sag 18..72, yatay merkez 45 (#return-to-top ile
   ayni eksen), aralar esit 14px:
     #return-to-top   50x50  sag 20..70   alt  90..140   (bottom DB'den: 90)
     WhatsApp         54x54  sag 18..72   alt 154..208
     Telefon          54x54  sag 18..72   alt 222..276
   Toplam sutun: alt 90 -> 276 px (onceki cok katmanli hali 354 px'ti).
   Nabiz 14px yayilir -> sag 4..86, ekran icinde; tasma olcumu dogruladi.

   `left:auto` SART: style.css `.cbh-phone{left:-20px}` diyor; left temizlenmeden
   `right` etkisiz kalir.
   BU BLOK TUM FAB KURALLARINDAN SONRA DURMALI - medya sorgusu/konum kurallari
   ozgulluk eklemez, once gelirse taban kurallar bunu ezer (bu oturumda oldu).  */
.cbh-phone {
  left: auto !important;
  right: 18px;
  bottom: 154px;
  width: 54px !important;
  height: 54px !important;
}
.cbh-phone > a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}
/* Temanin iki dis katmani: artik cizilmiyor */
.cbh-ph-circle,
.cbh-ph-circle-fill { display: none !important; }

/* Ikon diski = dugmenin kendisi */
.cbh-ph-img-circle1 {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 50% !important;
  background-color: #25D366 !important;      /* WhatsApp resmi yesili */
  background-size: 32px 32px !important;   /* 54px dugmede %59 - bkz. asagidaki not */
  background-position: center !important;
  opacity: 1 !important;
  --fab-nabiz-renk: rgba(37, 211, 102, .55);
  animation: ada-fab-nabiz 2.6s var(--ada-egri-yumusak) infinite !important;
  transition: background-color var(--ada-sure) var(--ada-egri),
              transform        var(--ada-sure-hizli) var(--ada-egri);
}
.cbh-phone:hover .cbh-ph-img-circle1 {
  background-color: #1DB954 !important;      /* .-wp-button ile ayni koyu ton */
  transform: scale(1.08);
  animation-play-state: paused !important;   /* kullanici buldu, sinyale gerek yok */
}
.cbh-phone:active .cbh-ph-img-circle1 { transform: scale(.96); }

/* --- NABIZ HALKASI: OZGULLUK DUZELTMESI ---------------------------------
   OLCULDU: yukaridaki blok WhatsApp'a `ada-fab-nabiz` veriyordu ama halka
   EKRANDA HIC CIKMIYORDU. Hesaplanan deger: animation-name
   `cbh-circle-img-anim`, sure `0s`, box-shadow `none`.

   Sebep ozgulluk. Isaretlemede dugme `cbh-static` sinifini tasiyor ve tema
   style.css:19'da su kurali yaziyor:
       .cbh-phone.cbh-static .cbh-ph-img-circle1 { animation: ... 0s ... !important }
   Ozgulluk (0,3,0) + !important; yukaridaki kuralim (0,1,0) + !important.
   IKI BILDIRIM DE !important olunca kazanani OZGULLUK belirler - dosya sirasi
   degil. Bu yuzden temanin "0 saniyelik" animasyonu kazaniyordu.

   Cozum: ayni ozgullukte yazmak. Esitlikte kaynak sirasi karar verir ve
   modern.css style.css'ten SONRA yukleniyor (bkz. header_libs.php).
   Ikon olcusu de burada NOT ediliyor: glif gorselin %96'sini dolduruyor
   (olculdu), yani 32px background-size = dugmenin %59'u. Telefon dugmesinin
   fa-phone glifi daha dolgun oldugu icin 20px'te ayni agirlikta okunuyor.  */
.cbh-phone.cbh-static .cbh-ph-img-circle1 {
  --fab-nabiz-renk: rgba(37, 211, 102, .55);
  animation: ada-fab-nabiz 2.6s var(--ada-egri-yumusak) infinite !important;
}
.cbh-phone.cbh-static:hover .cbh-ph-img-circle1 {
  animation-play-state: paused !important;   /* kullanici buldu, sinyale gerek yok */
}

.ada-tel-fab {
  left: auto;
  right: 18px;
  bottom: 222px;
}

/* --- Yukari cik dugmesi: KAYDIRMA ILERLEME HALKASI ------------------------
   >>> DB'NIN YAZDIGI OZELLIKLER <<< header_libs.php:139-142 su kurallari
   basiyor ve modern.css'ten SONRA geldigi icin ezer - yeniden tanimlanmaz:
       #return-to-top        -> background-color, bottom
       #return-to-top i      -> color
   Burada yalnizca sekil, golge, hareket ve halka var.

   Halka `::before` ile ciziliyor: dugmeden 4px buyuk, konik gecisli. Dugmenin
   KENDI zemini opak oldugu icin halkanin yalnizca 4px'lik yakasi gorunuyor -
   yani DB'den gelen zemin rengi bozulmadan ustune ince bir ilerleme cemberi
   biniyor. `isolation:isolate` sart: onsuz z-index:-1 psodo-eleman sayfanin
   ARKASINA dusuyor ve hic gorunmuyor (olculdu).
   Yuzde degerini modern.js `--ada-ilerleme` ozel ozelligine yaziyor;
   JS calismazsa degisken tanimsiz kalir, `0` yedegi devreye girer ve halka
   notr gorunur - dugme yine calisir.                                        */
#return-to-top {
  isolation: isolate;
  border-radius: 50%;
  transition: transform  var(--ada-sure-hizli) var(--ada-egri),
              box-shadow var(--ada-sure) var(--ada-egri);
  box-shadow: var(--ada-golge-2);
}
#return-to-top::before {
  content: '';
  position: absolute;
  inset: -4px;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(
      var(--ada-vurgu) calc(var(--ada-ilerleme, 0) * 1%),
      rgba(255, 255, 255, .22) 0);
}
#return-to-top:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: var(--ada-golge-3);
}
#return-to-top:active { transform: translateY(-1px) scale(.98); }

/* =============================================================================
   22. DIKKAT SINYALI (nabiz)
   -----------------------------------------------------------------------------
   Site "Teklif Al" modeli uzerine kurulu (198 urunun 198'inde fiyat 0), yani
   ust bardaki TEKLIF AL sayfadaki en degerli eylem. Duragan bir dugmeydi;
   artik yavas bir nabiz halkasiyla kendini belli ediyor.

   RENK NEDEN BEYAZ: dugmenin zemini panelden secilen Bootstrap varyantina
   bagli (header_ayar.teklif_button_bg, su an "ada" = terracotta). Halkayi
   terracotta yapsaydim yonetici varyanti degistirdiginde renk tutmazdi.
   Beyaz, koyu orman zeminli ust barda her varyantla calisir.

   Nabiz YAVAS (3.2s) ve dusuk opaklikli: goz ucuyla fark edilir, rahatsiz
   etmez. Hover'da DURUR - kullanici zaten dugmeyi bulmus, sinyale gerek yok.
   prefers-reduced-motion bolum 23'te tum animasyonlari .01ms'e cekiyor,
   yani hareket hassasiyeti olan kullanicida nabiz pratikte kapali.
   ========================================================================== */
@keyframes ada-nabiz {
  0%   { box-shadow: 0 0 0 0   rgba(255, 255, 255, .50); }
  70%  { box-shadow: 0 0 0 11px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0   rgba(255, 255, 255, 0); }
}
.header-ust-bar-right-table-ic-box .btn {
  animation: ada-nabiz 3.2s var(--ada-egri-yumusak) infinite;
}
.header-ust-bar-right-table-ic-box .btn:hover,
.header-ust-bar-right-table-ic-box .btn:focus-visible {
  animation-play-state: paused;
}

/* Mobil menudeki teklif/siparis butonlari da ayni sinyali alsin */
@media (max-width: 1100.98px) {
  .offer-tracing-mobile-main-div .btn {
    animation: ada-nabiz 3.2s var(--ada-egri-yumusak) infinite;
  }
  .offer-tracing-mobile-main-div .btn:active { animation-play-state: paused; }
}


/* =============================================================================
   24. BLOG SAYFALARI - liste ve detay  (Adim 10)

   Bolum 10 blog KARTININ yuzeyini kurmustu (kenarlik, yaricap, golge, oran).
   Kartlarin DIZILISI ve DETAY SAYFASININ TAMAMI ise 2015 temasindan kalmisti:

     Liste : .blog-page-content -> text-align:center + display:inline-block.
             Kartlar arasi bosluk HTML'deki beyaz bosluktan geliyordu, kart
             yukseklikleri esitlenmiyordu (spot uzunlugu farkli olunca
             "Devamini Oku" satirlari farkli hizadaydi), son satir ortalaniyordu.

     Detay : modern.css'te TEK BIR .blog-detail-* kurali yoktu. Sabit 842px +
             282px inline-block sutunlar, 1199px altinda ikisi de %100'e
             dusuyordu - arada tablet kademesi yoktu. Yazi tipografisi uzun
             metin icin ayarsizdi (16px/24px = 1.5 satir araligi, olcu siniri
             yok -> satir basina ~105 karakter; okunabilirlik esigi 60-75).
             Icerikteki h2/h3/blockquote icin HIC kural yoktu; tarayici
             varsayilaniyla ciziliyorlardi.

   RENKLER: kart zemini/basligi/spotu/bagi PANELDEN geliyor (blog_ayar), sablon
   <style> blogu olarak basiyor ve bu dosyayi eziyor - dogru davranis budur.
   Buradaki token'lar yapisal katman icin: yuzey, kenarlik, ritim, hareket.
   ========================================================================== */

/* --- 24.1 Liste: akiskan izgara -----------------------------------------
   inline-block yerine grid. Kart genisligi artik HTML'deki beyaz boslugu
   degil, gercek bir bosluk (gap) degerini takip ediyor.
   auto-fill (auto-fit degil): tek yazi kaldiginda kart sayfayi bastan basa
   kaplamasin, kendi sutun genisliginde dursun.
   minmax'in ic min(100%, ...) sarmali dar ekranda tasmayi onler.            */
.blog-page-main {
  width: 100% !important;
  padding: clamp(40px, 5vw, 75px) 0 clamp(56px, 7vw, 100px);
}
.blog-page-text-main {
  width: min(1170px, 92%) !important;
  overflow: visible !important;
}
.blog-page-main .page-spot-quote {
  max-width: 62ch;
  margin: 0 auto;
  line-height: 1.65;
}
.blog-page-content {
  text-align: left;
  margin-top: clamp(28px, 3.5vw, 48px);
  overflow: visible;
}
/* IZGARA SARMALAYICIDA, KAPSAYICIDA DEGIL (Adim 14 - sonsuz kaydirma).
   Kartlar artik `.ada-blog-izgara` icinde duruyor; kaydirarak gelen yazilar
   oraya ekleniyor. Izgara kapsayicida kalsaydi sarmalayici TEK bir izgara
   hucresi olur ve butun liste ~288px'lik bir sutuna sikisirdi.
   `:has()` ile kosullamak yerine dogrudan tasindi: destegi olmayan
   tarayicida kosullu kural hic uygulanmaz ve liste tam da o sikisik
   halde kalirdi. */
.ada-blog-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 288px), 1fr));
  gap: clamp(18px, 2.2vw, 30px);
  align-items: stretch;
}
/* Secici .blog-page-content ile SINIRLI: ayni .blog-box sinifini anasayfa blog
   modulu de kullaniyor ve orasi Bolum 10'daki akiskan genislikleri koruyor.
   Genel bir .blog-box{width:auto} anasayfayi da degistirirdi.                */
.blog-page-content .blog-box {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  display: flex;
}
.blog-page-content .blog-box-in {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: auto !important;
  margin: 0 !important;
}
/* "Devamini Oku" HER KARTTA EN ALTA yapisir - spot uzunlugu ne olursa olsun
   satirlar birbiriyle hizali kalir. Bu, esit yukseklikli kart gorunumunun
   tek gorunur sartidir.                                                     */
.blog-page-content .blog-box-in-readmore { margin-top: auto; }

/* Izgaranin cocugu olan ama KART OLMAYAN ogeler tam satiri kaplar */
/* Kapsayici artik izgara degil (yukari bak) - bu iki oge normal blok
   akisinda tam genislikte durur. Kural, izgara kapsayicida kalan baska
   sablonlar icin zararsiz duruyor. */
.blog-page-content > .ada-sayfalama,
.blog-page-content > .blog-bos-durum { grid-column: 1 / -1; }

/* --- 24.1b Anasayfa blog modulu: ic kutu kartI DOLDURSUN ----------------
   OLCULDU (1101-1439px bandi): kart %33.3 genisliginde (~365px) ama ic kutu
   responsive.css:2703'te `width:250px !important` ile sabitlenmis. Yani gorsel,
   baslik ve metin 250px'te kalip kartin sagInda ~115px BOS BEYAZ birakiyordu.
   Bolum 10'daki `.blog-box-in{width:auto}` kuralinin !important'i olmadigi icin
   bu bandda kaybediyordu. Liste sayfasi 24.1'de zaten cozulmustu; ayni sorun
   anasayfa modulunde duruyordu.

   Ic kutunun kenar boslugu de sifirlanir: dolgu artik kartin kendisine ait
   (baslik/spot/meta/readmore kurallari 18px yatay dolgu veriyor), gorsel de
   kenardan kenara uzanmali.                                                 */
/* Modul kabugu da liste sayfasiyla ayni izgarayi kullanir: inline-block ile
   kartlar farkli yukseklikte kaliyor ve "Devamini Oku" satirlari birbiriyle
   hizasiz duruyordu (olculdu: 738 / 735 / 755 px). auto-fit, uc kart oldugunda
   sutunlari bastan basa doldurur; kabugun genisligi temada zaten tanimli.     */
.blog-home-main-div-inside {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 288px), 1fr));
  gap: clamp(18px, 2.2vw, 30px);
  align-items: stretch;
  text-align: left;
  overflow: visible !important;
}
.blog-home-main-div-inside .blog-box {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  display: flex;
}
.blog-home-main-div-inside .blog-box-in {
  width: auto !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.blog-home-main-div-inside .blog-box-in-readmore { margin-top: auto; }
.blog-home-main-div-inside .blog-box-in img {
  width: 100% !important;
  height: auto !important;
}

/* --- 24.2 Kart meta satiri ----------------------------------------------
   Tarih, okuma suresi ve goruntulenme. Kartta daha once hicbir ikincil bilgi
   yoktu; bir blog listesini modern yapan sey buyuk olcude bu katmandir.     */
.blog-box-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 15px 18px 0;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ada-40);
}
.blog-box-meta time { white-space: nowrap; }
.blog-meta-ayrac { color: var(--ada-20); }
.blog-meta-hit i { margin-right: 4px; opacity: .85; }
.blog-box-gorsel { display: block; }

/* Baslik artik <h2>/<h3> - tarayici varsayilan kenar bosluklarini sifirla */
.blog-box-in-header {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

/* --- 24.3 Bos durum ------------------------------------------------------
   Onceden dis bir placeholder servisine (http://www.fpoimg.com) bagliydi.   */
.blog-bos-durum {
  text-align: center;
  padding: clamp(40px, 6vw, 72px) 24px;
  background: var(--ada-00);
  border: 1px dashed var(--ada-20);
  border-radius: var(--ada-r-lg);
}
.blog-bos-durum > i {
  font-size: 44px;
  color: var(--ada-40);
  margin-bottom: 18px;
  display: block;
}
.blog-bos-durum-baslik {
  font-family: 'Raleway', 'Open Sans', Arial, sans-serif;
  font-size: 21px;
  font-weight: 700;
  color: var(--ada-95);
  margin-bottom: 10px;
}
.blog-bos-durum-spot {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ada-60);
  max-width: 46ch;
  margin: 0 auto 24px;
}

/* --- 24.4 Sayfalama ------------------------------------------------------
   Bootstrap varsayilani mavi/gri bir bagalanti seridi cizip birakiyordu;
   sayfanin geri kalaniyla hicbir ortak dili yoktu.                          */
.ada-sayfalama { margin-top: clamp(36px, 4.5vw, 60px); }
.ada-sayfalama .pagination { margin: 0; flex-wrap: wrap; gap: 6px; }
.ada-sayfalama .page-item { margin: 0; }
.ada-sayfalama .page-link {
  border: 1px solid var(--ada-20);
  border-radius: var(--ada-r-sm);
  background: var(--ada-00);
  color: var(--ada-80);
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  padding: .58em 1em;
  min-width: 40px;
  text-align: center;
  transition: background-color var(--ada-sure-hizli) var(--ada-egri),
              border-color var(--ada-sure-hizli) var(--ada-egri),
              color var(--ada-sure-hizli) var(--ada-egri);
}
.ada-sayfalama .page-link:hover {
  background: var(--ada-vurgu-05);
  border-color: var(--ada-vurgu);
  color: var(--ada-vurgu-koyu);
  text-decoration: none;
}
.ada-sayfalama .page-item.active .page-link {
  background: var(--ada-vurgu);
  border-color: var(--ada-vurgu);
  color: #fff;
}
.ada-sayfalama .page-link:focus-visible {
  outline: 2px solid var(--ada-vurgu);
  outline-offset: 2px;
  box-shadow: none;
}


/* =============================================================================
   24.5 DETAY: izgara ve kabuk
   Sabit 842 + 66 + 282 = 1190px yerine iki sutunlu grid. Sayfa basligi seridi
   1333px genisliginde oldugu icin iki blok hizasizdi; okuma sutunu artik
   1240px kabugun icinde ve serit ile ayni gorsel eksende duruyor.

   overflow: YAPISKAN PANELIN SARTI. Tema her iki kapsayiciya da
   overflow:hidden veriyordu; `hidden` bir KAYDIRMA KAPSAYICISI yaratir ve
   icindeki position:sticky viewport yerine o kapsayiciya gore konumlanir -
   pratikte hic yapismaz. `clip` ayni tasma korumasini verir ama kaydirma
   kapsayicisi yaratmaz (ayni gerekce mobile-fixes.css 2.2'de html/body icin).
   ========================================================================== */
.blog-detail-page-main {
  width: 100% !important;
  padding: clamp(36px, 4.5vw, 70px) 0 clamp(56px, 7vw, 96px);
  overflow-x: hidden;              /* clip desteklemeyen eski tarayici icin */
  overflow-x: clip;
  overflow-y: visible;
}
.blog-detail-content {
  width: min(1240px, 92%) !important;
  margin: 0 auto;
  overflow: visible !important;
}

@media screen and (min-width: 1024px) {
  .blog-detail-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: clamp(36px, 4vw, 72px);
    align-items: start;            /* panel kendi yuksekliginde kalsin */
  }
  .blog-detail-content-left,
  .blog-detail-content-right {
    width: auto !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    display: block;
    overflow: visible !important;
  }
  /* Yapiskan panel: uzun yazi boyunca sag sutun ekrandan cikip gidiyordu.
     Ust pay 24px - bu genislikte HENUZ sabit header yok (mobil header
     1100px'e kadar gosteriliyor, bkz. responsive.css semasi).              */
  .blog-detail-content-right {
    position: sticky;
    top: 24px;
  }
}
@media screen and (min-width: 1101px) {
  /* Sabit header burada devreye giriyor: 62px kaydirilmis yukseklik + 24 pay */
  .blog-detail-content-right { top: 86px; }
}
@media screen and (max-width: 1023.98px) {
  .blog-detail-content-left,
  .blog-detail-content-right {
    width: 100% !important;
    margin-left: 0 !important;
    display: block;
    overflow: visible !important;
  }
  .blog-detail-content-right { margin-top: clamp(40px, 6vw, 64px) !important; }
}

/* --- 24.6 Yazi basligi alani --------------------------------------------
   Baslik artik sayfanin TEK <h1>'i. Onceden serit icinde <h1> olarak, 40px
   asagida da ikinci kez 27px puntoyla basiliyordu.                          */
.blog-detail-giris { margin-bottom: clamp(24px, 3vw, 36px); }
.blog-detail-content-left-baslik {
  font-family: 'Raleway', 'Open Sans', Arial, sans-serif;
  font-size: clamp(1.75rem, 1.32rem + 1.9vw, 2.625rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.015em;
  color: var(--ada-95);
  margin: 0 0 16px;
  padding-bottom: 0 !important;
  overflow: visible !important;
}
.blog-detail-content-left-date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ada-60);
  padding-bottom: 0 !important;
  overflow: visible !important;
}
.blog-detail-content-left-date i { margin-right: 4px; opacity: .8; }
/* Goruntulenme rozeti: sayac 2023'ten beri artiyordu ama hicbir yerde
   gosterilmiyordu. Hafif bir dolgu ile digerlerinden ayriliyor.             */
.blog-detail-content-left-date .blog-meta-hit {
  background: var(--ada-vurgu-05);
  color: var(--ada-vurgu-koyu);
  border-radius: 999px;
  padding: 4px 11px;
  font-weight: 600;
}
/* "Guncellendi" rozeti: goruntulenme rozetiyle ayni bicim ama NOTR renkte -
   iki rozet yan yana durunca vurgu rengi yalnizca birinde olmali, aksi halde
   ikisi de dikkat cekmeye calisip birbirini soneltiyor. */
.blog-detail-content-left-date .blog-meta-guncel {
  background: var(--ada-10);
  color: var(--ada-80);
  border-radius: 999px;
  padding: 4px 11px;
  font-weight: 600;
}
.blog-detail-content-left-date .blog-meta-guncel time { white-space: nowrap; }

.blog-detail-content-left-spot {
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ada-60);
  max-width: 68ch;
  margin: 20px 0 0;
  padding-bottom: 0 !important;
  padding-left: 16px;
  border-left: 3px solid var(--ada-vurgu);
  overflow: visible !important;
}

/* --- 24.7 Kapak gorseli --------------------------------------------------
   Tema `width:100%; max-height:490px` veriyordu ve object-fit yoktu: dikey
   bir gorsel yuklendiginde 490px'e EZILIYORDU (oran bozuluyordu), kirpilmiyordu.
   Sabit oran + cover ile hangi gorsel yuklenirse yuklensin duzen sabit kalir. */
.blog-detail-content-left-img {
  margin: 0 0 clamp(28px, 3.5vw, 46px) !important;
  border-radius: var(--ada-r-lg);
  overflow: hidden;
  background: var(--ada-05);
}
.blog-detail-content-left-img img {
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* --- 24.8 Icindekiler ----------------------------------------------------
   Uc ve uzeri baslikta uretilir. Google sayfa ici capalari arama sonucunda
   "atlama baglantisi" olarak gosterebiliyor.                                */
.blog-icindekiler {
  background: var(--ada-05);
  border: 1px solid var(--ada-20);
  border-left: 3px solid var(--ada-vurgu);
  border-radius: var(--ada-r-md);
  padding: 20px 24px;
  margin: 0 0 clamp(28px, 3.5vw, 40px);
  max-width: 72ch;
}
.blog-icindekiler-baslik {
  font-family: 'Raleway', 'Open Sans', Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ada-95);
  margin-bottom: 12px;
}
.blog-icindekiler-baslik i { color: var(--ada-vurgu); margin-right: 6px; }
.blog-icindekiler ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: icindekiler;
}
.blog-icindekiler li { margin: 0 0 7px; line-height: 1.45; }
.blog-icindekiler li:last-child { margin-bottom: 0; }
.blog-icindekiler-s3 { padding-left: 18px; }
.blog-icindekiler a {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 14.5px;
  color: var(--ada-80);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--ada-sure-hizli) var(--ada-egri),
              border-color var(--ada-sure-hizli) var(--ada-egri);
}
.blog-icindekiler-s3 a { font-size: 13.5px; color: var(--ada-60); }
.blog-icindekiler a:hover {
  color: var(--ada-vurgu-koyu);
  border-bottom-color: var(--ada-vurgu);
  text-decoration: none;
}

/* --- 24.9 Yazi govdesi (tipografi) --------------------------------------
   OLCU SINIRI: 1240px kabukta okuma sutunu ~870px genisliginde kaliyordu,
   yani satir basina ~105 karakter. Okunabilirlik esigi 60-75; 72ch ile
   ~70 karaktere iniyor. Gorsel ve baslik sutunun tamamini kullanmaya devam
   eder - editoryal duzende yaygin olan "genis gorsel, dar metin" kaliba.
   Satir araligi 1.5 -> 1.78, agirlik 500 -> 400 (tema uzun metinde de yari
   kalin basiyordu, sayfa gereginden yogun goruniyordu).                     */
.blog-detail-content-left-txt,
.about-page-content,
.html-page-content {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: clamp(1rem, .965rem + .16vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.78;
  color: var(--ada-80);
  max-width: 72ch;
  margin-bottom: clamp(32px, 4vw, 48px);
  overflow: visible !important;
}
.blog-detail-content-left-txt > *:first-child,
.about-page-content > *:first-child,
.html-page-content > *:first-child { margin-top: 0; }
.blog-detail-content-left-txt > *:last-child,
.about-page-content > *:last-child,
.html-page-content > *:last-child  { margin-bottom: 0; }
.blog-detail-content-left-txt p,
.about-page-content p,
.html-page-content p { margin: 0 0 1.15em; }

.blog-detail-content-left-txt h2,
.about-page-content h2,
.html-page-content h2,
.blog-detail-content-left-txt h3,
.about-page-content h3,
.html-page-content h3,
.blog-detail-content-left-txt h4,
.about-page-content h4,
.html-page-content h4 {
  font-family: 'Raleway', 'Open Sans', Arial, sans-serif;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ada-95);
  /* Capa kaydirmasi: sabit header basligi ustten kirpmasin */
  scroll-margin-top: 96px;
}
.blog-detail-content-left-txt h2,
.about-page-content h2,
.html-page-content h2 {
  font-size: clamp(1.3125rem, 1.19rem + .55vw, 1.625rem);
  margin: 1.9em 0 .6em;
  padding-top: .35em;
  border-top: 1px solid var(--ada-20);
}
.blog-detail-content-left-txt h3,
.about-page-content h3,
.html-page-content h3 {
  font-size: clamp(1.125rem, 1.06rem + .3vw, 1.3125rem);
  margin: 1.6em 0 .5em;
}
.blog-detail-content-left-txt h4,
.about-page-content h4,
.html-page-content h4 {
  font-size: 1.0625rem;
  margin: 1.4em 0 .45em;
}

.blog-detail-content-left-txt ul,
.about-page-content ul,
.html-page-content ul,
.blog-detail-content-left-txt ol,
.about-page-content ol,
.html-page-content ol { margin: 0 0 1.25em; padding-left: 1.35em; }
.blog-detail-content-left-txt li,
.about-page-content li,
.html-page-content li { margin-bottom: .5em; }
.blog-detail-content-left-txt ul li::marker,
.about-page-content ul li::marker,
.html-page-content ul li::marker { color: var(--ada-vurgu); }

.blog-detail-content-left-txt blockquote,
.about-page-content blockquote,
.html-page-content blockquote {
  margin: 1.7em 0;
  padding: 20px 24px;
  background: var(--ada-05);
  border-left: 3px solid var(--ada-vurgu);
  border-radius: 0 var(--ada-r-md) var(--ada-r-md) 0;
  font-size: 1.0625em;
  line-height: 1.65;
  color: var(--ada-95);
}
.blog-detail-content-left-txt blockquote p:last-child,
.about-page-content blockquote p:last-child,
.html-page-content blockquote p:last-child { margin-bottom: 0; }

.blog-detail-content-left-txt strong,
.about-page-content strong,
.html-page-content strong,
.blog-detail-content-left-txt b,
.about-page-content b,
.html-page-content b { color: var(--ada-95); font-weight: 700; }
.blog-detail-content-left-txt a,
.about-page-content a,
.html-page-content a {
  color: var(--ada-vurgu);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--ada-sure-hizli) var(--ada-egri);
}
.blog-detail-content-left-txt a:hover,
.about-page-content a:hover,
.html-page-content a:hover { color: var(--ada-vurgu-koyu); }
.blog-detail-content-left-txt img,
.about-page-content img,
.html-page-content img {
  border-radius: var(--ada-r-md);
  margin: 1.4em 0;
}
.blog-detail-content-left-txt hr,
.about-page-content hr,
.html-page-content hr {
  border: 0;
  border-top: 1px solid var(--ada-20);
  margin: 2.2em 0;
}
/* Genis tablo KENDI icinde kaydirilsin, sayfayi yatay kaydirmasin */
.blog-detail-content-left-txt table,
.about-page-content table,
.html-page-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: .94em;
}
.blog-detail-content-left-txt th,
.about-page-content th,
.html-page-content th,
.blog-detail-content-left-txt td,
.about-page-content td,
.html-page-content td {
  border: 1px solid var(--ada-20);
  padding: 9px 12px;
  text-align: left;
}
.blog-detail-content-left-txt th,
.about-page-content th,
.html-page-content th { background: var(--ada-05); color: var(--ada-95); font-weight: 600; }

/* --- 24.10 Paylasim ------------------------------------------------------
   Onceden ciplak fa ikonlariydi; urun detay sayfasinda ayni is icin daire
   butonlar kullaniliyordu (bkz. .ada-paylas-gorsel-alti) - iki sayfa ayni
   eylemi farkli gosteriyordu. Gorsel dil burada birlestirildi.              */
.blog-detail-content-left-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: clamp(20px, 2.5vw, 28px);
  border-top: 1px solid var(--ada-20);
  margin-bottom: clamp(32px, 4vw, 48px) !important;
  overflow: visible !important;
}
.blog-paylas-etiket {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ada-40);
  margin-right: 6px;
}
.blog-detail-content-left-social a.blog-paylas-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-right: 0;
  border: 1px solid var(--ada-20);
  border-radius: 50%;
  background: var(--ada-00);
  color: var(--ada-60);
  font-size: 15px;
  text-decoration: none;
  transition: background-color var(--ada-sure-hizli) var(--ada-egri),
              border-color var(--ada-sure-hizli) var(--ada-egri),
              color var(--ada-sure-hizli) var(--ada-egri),
              transform var(--ada-sure-hizli) var(--ada-egri);
}
.blog-detail-content-left-social a.blog-paylas-btn:hover,
.blog-detail-content-left-social a.blog-paylas-btn:focus-visible {
  background: var(--ada-vurgu);
  border-color: var(--ada-vurgu);
  color: #fff;
  transform: translateY(-2px);
}
.blog-detail-content-left-social i { padding-bottom: 0; }
.blog-paylas-x { display: block; }

/* --- 24.11 Onceki / sonraki yazi ----------------------------------------
   Yazi bitince sayfa altinda hicbir devam yolu yoktu.                       */
.blog-gezinme {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding-top: clamp(20px, 2.5vw, 28px);
  border-top: 1px solid var(--ada-20);
}
@media screen and (min-width: 600px) {
  .blog-gezinme { grid-template-columns: 1fr 1fr; }
  /* Onceki yoksa sonraki SAGA hizali kalsin - tek oge sola kacmasin */
  .blog-gezinme-sonraki:only-child { grid-column: 2; }
}
.blog-gezinme-oge {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px 18px;
  border: 1px solid var(--ada-20);
  border-radius: var(--ada-r-md);
  background: var(--ada-00);
  text-decoration: none;
  transition: border-color var(--ada-sure) var(--ada-egri),
              box-shadow var(--ada-sure) var(--ada-egri),
              transform var(--ada-sure) var(--ada-egri);
}
.blog-gezinme-oge:hover {
  border-color: transparent;
  box-shadow: var(--ada-golge-2);
  transform: translateY(-2px);
  text-decoration: none;
}
.blog-gezinme-sonraki { text-align: right; }
.blog-gezinme-yon {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ada-vurgu);
}
.blog-gezinme-baslik {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ada-95);
  /* Uzun baslik kutuyu buyutmesin: iki satirda kes */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- 24.12 Yan panel: populer yazilar -----------------------------------
   Liste yalnizca sira numarasi + metindi; hangi yaziya gidildigi gorsel
   olarak ayirt edilemiyordu.                                               */
.blog-detail-header,
.blog-detail-etiket { overflow: visible !important; }
.blog-detail-header-baslik {
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ada-40) !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--ada-20);
  margin-bottom: 4px;
}
.blog-detail-header-links { border-bottom: 1px solid var(--ada-20); padding: 14px 0 !important; }
.blog-detail-header-links:last-child { border-bottom: 0 !important; }
.blog-detail-header-links a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-decoration: none;
}
.blog-populer-gorsel {
  flex: 0 0 72px;
  width: 72px;
  height: 54px;
  border-radius: var(--ada-r-sm);
  overflow: hidden;
  background: var(--ada-05);
}
.blog-populer-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--ada-sure) var(--ada-egri);
}
.blog-detail-header-links a:hover .blog-populer-gorsel img { transform: scale(1.06); }
.blog-populer-metin { display: block; min-width: 0; }
.blog-populer-baslik {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ada-95);
  transition: color var(--ada-sure-hizli) var(--ada-egri);
}
.blog-detail-header-links a:hover .blog-populer-baslik { color: var(--ada-vurgu-koyu); }
.blog-populer-hit {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ada-40);
}
.blog-populer-hit i { margin-right: 3px; }

/* --- 24.13 Etiketler -----------------------------------------------------
   Etiketler <div> olarak basiliyordu ve CSS onlara cursor:pointer veriyordu:
   tiklanabilir gorunup hicbir sey yapmiyorlardi. Etiket rotasi (.htaccess)
   yok, dogru davranis onlari TIKLANMAZ gostermek - imlec duzeltildi.        */
.blog-detail-etiket { margin-top: clamp(32px, 4vw, 48px) !important; }
.blog-detail-etiket-box {
  display: inline-block;
  padding: 6px 12px !important;
  margin: 0 6px 8px 0 !important;
  background: var(--ada-05) !important;
  border: 1px solid var(--ada-20) !important;
  border-radius: 999px;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ada-60) !important;
  cursor: default;                 /* tiklanabilir goruntusu kaldirildi */
}
.blog-detail-etiket-box:hover { background: var(--ada-10) !important; }

.blog-detail-tumu { margin-top: clamp(28px, 3.5vw, 40px); }
.blog-detail-tumu .ada-btn {
  width: 100%;
  color: var(--ada-95);
  border-color: var(--ada-20);
  background: var(--ada-00);
}
.blog-detail-tumu .ada-btn:hover {
  background: var(--ada-vurgu-05);
  border-color: var(--ada-vurgu);
  color: var(--ada-vurgu-koyu);
}

/* --- 24.14 Ilgili yazilar ------------------------------------------------ */
.blog-ilgili {
  width: min(1240px, 92%);
  margin: clamp(56px, 7vw, 90px) auto 0;
  padding-top: clamp(36px, 4.5vw, 56px);
  border-top: 1px solid var(--ada-20);
}
.blog-ilgili-baslik {
  font-family: 'Raleway', 'Open Sans', Arial, sans-serif;
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ada-95);
  margin: 0 0 clamp(20px, 2.5vw, 30px);
}
/* auto-FIT (auto-fill degil): uc yazi sutunlari bastan basa doldursun,
   sagda bos bir iz birakmasin.                                             */
.blog-ilgili-izgara {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  margin-top: 0 !important;
}

/* --- 24.15 Sayfa basligi seridi -----------------------------------------
   Detayda serit artik <p> tasiyor (<h1> yaziya tasindi); tarayici varsayilan
   baslik kenar bosluklari sifirlanmali.                                    */
.page-headers-main-left { margin: 0 !important; }
.page-headers-guncel {
  display: inline-block;
  max-width: 46ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
@media screen and (max-width: 767.98px) {
  /* Dar ekranda tam baslik kirinti birakiyor - iz "Blog" ile bitsin */
  .page-headers-guncel { display: none; }

  /* 🪤 SECICI DARALTILDI (Faz 23). Onceki hali
         `> span:last-of-type:not(.page-headers-guncel)`
     idi ve `.page-headers-guncel` TASIMAYAN her sayfada son span'i - yani
     MESRU son ayraci - gizliyordu. Urun detayinda yol
         "Anasayfa / Urunlerimiz  Sandalye Modelleri"
     diye ayracsiz kaliyordu. Kural artik yalnizca blog detayindaki
     isaretli ayraci hedefliyor. */
  .page-headers-son-ayrac { display: none; }
}


/* =============================================================================
   25. ILETISIM SAYFASI  (Adim 11)

   Onceki hali: iki ayri tam genislikli serit alt alta duruyordu. Ustteki serit
   iletisim bilgilerini 250px'lik sabit inline-block kutulara diziyordu - alti
   kanal 3+2 seklinde kiriliyor, son iki kutu ortada oksuz kaliyordu. Altta
   sayfanin %70'ini kaplayan bir form vardi ve arada genis olu bosluklar
   olusuyordu.

   Uc gercek islev eksikti:
     1. HICBIR ILETISIM BILGISI TIKLANMIYORDU. Telefon, WhatsApp ve e-posta
        duz metindi; ziyaretci numarayi elle kopyalamak zorundaydi. Mobilde
        iletisim sayfasinin en cok kullanilan eylemi "ara"dir.
     2. HARITA HIC GORUNMUYORDU. Sablon yalnizca panelde girilen embed kodunu
        basiyordu, o alan da bostu (olculdu: site_maps_kodu uzunlugu 0).
     3. Adres icin yol tarifi baglantisi yoktu.

   Yeni duzen: tek kabuk icinde iki sutun - solda tiklanabilir kanal kartlari,
   sagda form karti; altta tam genislikte harita.
   ========================================================================== */

.contact-page-main {
  width: min(1240px, 92%) !important;
  overflow: visible !important;
  padding: clamp(36px, 4.5vw, 70px) 0 clamp(56px, 7vw, 96px);
}

/* --- 25.1 Sayfa girisi --------------------------------------------------- */
.iletisim-giris {
  text-align: center;
  margin-bottom: clamp(32px, 4vw, 52px);
}
.iletisim-baslik {
  font-family: 'Raleway', 'Open Sans', Arial, sans-serif;
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--ada-95);
  margin: 0 0 12px;
}
.iletisim-spot {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: clamp(.9375rem, .9rem + .22vw, 1.0625rem);
  line-height: 1.65;
  color: var(--ada-60);
  max-width: 58ch;
  margin: 0 auto;
}

/* --- 25.2 Izgara ---------------------------------------------------------
   Kanallar sutunu SABIT genislikte degil, ust sinirli: uzun bir adres satiri
   sutunu sismesin ama dar ekranda da kirilmasin.                            */
.iletisim-izgara {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
}
@media screen and (min-width: 1024px) {
  .iletisim-izgara { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
}

/* --- 25.3 Iletisim kanali kartlari --------------------------------------
   Kartin TAMAMI baglanti. Ikon + etiket + deger + eylem satiri; eylem satiri
   yalnizca uzerine gelince belirginlesiyor, boylece kart durgun halde sakin
   kaliyor ama tiklanabilir oldugu belli oluyor.                             */
.iletisim-bilgi {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.iletisim-kart {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--ada-00);
  border: 1px solid var(--ada-20);
  border-radius: var(--ada-r-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--ada-sure) var(--ada-egri),
              box-shadow var(--ada-sure) var(--ada-egri),
              transform var(--ada-sure) var(--ada-egri);
}
a.iletisim-kart:hover,
a.iletisim-kart:focus-visible {
  border-color: transparent;
  box-shadow: var(--ada-golge-2);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}
.iletisim-kart-durgun { cursor: default; }

.iletisim-kart-ikon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ada-vurgu-05);
  color: var(--ada-vurgu);
  font-size: 17px;
  transition: background-color var(--ada-sure) var(--ada-egri),
              color var(--ada-sure) var(--ada-egri);
}
a.iletisim-kart:hover .iletisim-kart-ikon {
  background: var(--ada-vurgu);
  color: #fff;
}
/* WhatsApp kendi marka rengini korur - kullanici onu renginden taniyor */
.iletisim-kart-whatsapp .iletisim-kart-ikon { background: #E7F6EC; color: #1FA855; }
a.iletisim-kart-whatsapp:hover .iletisim-kart-ikon { background: #1FA855; color: #fff; }
.iletisim-kart-whatsapp .iletisim-kart-eylem { color: #1A8D47; }

.iletisim-kart-govde {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;                    /* uzun e-posta adresi sutunu tasirmasin */
  font-family: 'Open Sans', Arial, sans-serif;
}
.iletisim-kart-etiket {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ada-40);
}
.iletisim-kart-deger {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ada-95);
  overflow-wrap: anywhere;         /* uzun e-posta/adres kirilabilsin */
}
.iletisim-kart-deger-kucuk { font-size: 14px; font-weight: 500; line-height: 1.5; }
.iletisim-kart-eylem {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ada-vurgu);
  opacity: .75;
  transition: opacity var(--ada-sure) var(--ada-egri);
}
a.iletisim-kart:hover .iletisim-kart-eylem { opacity: 1; }
.iletisim-kart-eylem i { transition: transform var(--ada-sure) var(--ada-egri); }
a.iletisim-kart:hover .iletisim-kart-eylem i { transform: translateX(3px); }

/* --- 25.4 Calisma saatleri ----------------------------------------------
   Panelde 7 gunluk bir tablo olarak giriliyor, `ayarlar.calisma_saatleri`
   icinde JSON duruyor. (Oncesinde TinyMCE zengin metniydi: ekranda alt cizgi
   suslemesi ve kalin/normal karisimi bir blok cikiyordu.)
   Veri yapisal oldugu icin ustte CANLI DURUM rozeti basilabiliyor.          */
.iletisim-saat-durum {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(120, 120, 120, .12);
  color: var(--ada-60);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
}
.iletisim-saat-nokta {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
/* Acikken yesil. Renk TEK yerde: nokta `currentColor` kullaniyor. */
.iletisim-saat-durum-acik {
  background: rgba(30, 160, 90, .14);
  color: #1B8A54;
}
.iletisim-saat-kapali .iletisim-saat-deger { font-weight: 500; opacity: .8; }
.iletisim-saat-not {
  display: block;
  margin-top: 6px;
  color: var(--ada-60);
  font-size: 12.5px;
  line-height: 1.5;
}
.iletisim-saatler {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.iletisim-saat-satiri {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.5;
}
.iletisim-saat-gun   { color: var(--ada-60); }
.iletisim-saat-deger { color: var(--ada-95); font-weight: 600; white-space: nowrap; }

/* --- 25.5 Sosyal ---------------------------------------------------------
   Onceki hali: kesik cizgili bir ayirac uzerine oturtulmus ikonlar. Blog ve
   urun detayindaki daire buton diliyle birlestirildi.                        */
.iletisim-sosyal {
  margin-top: 6px;
  padding: 16px 18px;
  background: var(--ada-05);
  border-radius: var(--ada-r-md);
}
.iletisim-sosyal-etiket {
  display: block;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ada-40);
  margin-bottom: 10px;
}
.iletisim-sosyal-satir { display: flex; flex-wrap: wrap; gap: 8px; }
.iletisim-sosyal-satir a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ada-00);
  border: 1px solid var(--ada-20);
  color: var(--ada-60);
  font-size: 15px;
  text-decoration: none;
  transition: background-color var(--ada-sure-hizli) var(--ada-egri),
              border-color var(--ada-sure-hizli) var(--ada-egri),
              color var(--ada-sure-hizli) var(--ada-egri),
              transform var(--ada-sure-hizli) var(--ada-egri);
}
.iletisim-sosyal-satir a:hover,
.iletisim-sosyal-satir a:focus-visible {
  background: var(--ada-vurgu);
  border-color: var(--ada-vurgu);
  color: #fff;
  transform: translateY(-2px);
}

/* --- 25.6 Form karti -----------------------------------------------------
   Tema formu %70 genislikte, yuzeysiz ve ortalanmis biraliyordu. Artik izgara
   icinde kendi yuzeyi olan bir kart.
   SINIF ADI KORUNDU (.contact-page-form-area): Bolum 11 ve 13 bu seciciyi
   hedefliyor; degistirilirse alan stilleri ve gecersiz alan geri bildirimi
   birlikte duser.                                                           */
.contact-page-form-area {
  width: auto !important;
  margin: 0 !important;
  padding: clamp(22px, 2.6vw, 34px) !important;
  background: var(--ada-00);
  border: 1px solid var(--ada-20);
  border-radius: var(--ada-r-lg);
  box-shadow: var(--ada-golge-1);
}
.iletisim-form-baslik {
  font-family: 'Raleway', 'Open Sans', Arial, sans-serif;
  font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ada-95);
  margin: 0 0 20px;
}
.contact-page-form-area .form-group { margin-bottom: 16px; }

/* Bolum 11 yalnizca input ve textarea'yi kapsiyordu; konu alani <select>
   oldugu icin tarayici varsayilaniyla kaliyordu. Ok isareti satir ici SVG:
   dis istek yok, renk paletten geliyor.                                     */
.contact-page-form-area select.form-control {
  border: 1px solid var(--ada-20);
  border-radius: var(--ada-r-sm);
  background-color: var(--ada-00);
  color: var(--ada-95);
  padding: 12px 40px 12px 14px;
  height: auto;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236E7170' d='M1.2.9 6 5.7 10.8.9l1.2 1.2L6 8.1.0 2.1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  transition: border-color var(--ada-sure) var(--ada-egri),
              box-shadow var(--ada-sure) var(--ada-egri);
}
.contact-page-form-area select.form-control:focus {
  outline: none;
  border-color: var(--ada-vurgu);
  box-shadow: 0 0 0 3px var(--ada-vurgu-05);
}
/* Secim yapilmamisken yer tutucu sonuk dursun */
.contact-page-form-area select.form-control:invalid { color: var(--ada-40); }

.contact-page-form-area textarea.form-control { min-height: 140px; resize: vertical; }

/* Karakter sayaci: sinira yaklasinca vurgu rengine gecer */
.iletisim-sayac {
  display: block;
  margin-top: 6px;
  text-align: right;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 12px;
  color: var(--ada-40);
  transition: color var(--ada-sure-hizli) var(--ada-egri);
}
.iletisim-sayac-dolu { color: var(--ada-vurgu); font-weight: 600; }

/* Captcha: gorsel ve alan ayni yukseklikte olmali - tema goruntusu kucuk,
   girdi kutusu buyuk kaliyordu ve ikisi hizasizdi.                          */
.iletisim-captcha { flex-wrap: nowrap; }
.iletisim-captcha .input-group-text {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ada-20);
  border-right: 0;
  border-radius: var(--ada-r-sm) 0 0 var(--ada-r-sm);
  background: var(--ada-05);
}
/* Kod gorseli artik KAYNAKTA 184x48 uretiliyor (captcha.php); onceden 100x20
   idi ve burada buyutulunce bulaniklasiyordu. Dogal boyutuna yakin basiliyor. */
.iletisim-captcha .input-group-text img { display: block; height: 44px; width: auto; }
.iletisim-captcha .form-control {
  border-radius: 0 var(--ada-r-sm) var(--ada-r-sm) 0 !important;
  letter-spacing: .25em;
  font-weight: 600;
  /* Giris kutusu ezilmesin: gorsel satirin tamamini kaplayinca mobilde
     yazilabilir alan ~35px'e dusuyordu. */
  min-width: 96px;
}
@media screen and (max-width: 379.98px) {
  .iletisim-captcha .input-group-text img { height: 38px; }
  .iletisim-captcha .form-control { min-width: 80px; letter-spacing: .15em; }
}

/* --- 25.7 KVKK onayi -----------------------------------------------------
   Kutu ve metin dikey hizali; metin tiklanabilir (label for) ki dokunma
   hedefi yalnizca 16px'lik kutucukla sinirli kalmasin.                      */
.iletisim-onay {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 22px;
  padding: 14px 16px;
  background: var(--ada-05);
  border: 1px solid var(--ada-20);
  border-radius: var(--ada-r-sm);
}
.iletisim-onay input[type="checkbox"] {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  accent-color: var(--ada-vurgu);
  cursor: pointer;
}
.iletisim-onay label {
  margin: 0 !important;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.55;
  color: var(--ada-60) !important;
  letter-spacing: 0 !important;
  cursor: pointer;
}
.iletisim-onay a { color: var(--ada-vurgu); text-decoration: underline; text-underline-offset: 2px; }
.iletisim-onay a:hover { color: var(--ada-vurgu-koyu); }

.iletisim-gonder { width: 100%; }
@media screen and (min-width: 576px) {
  .iletisim-gonder { width: auto; min-width: 220px; }
}

/* --- 25.8 Harita ---------------------------------------------------------
   Tema 330px sabit yukseklik veriyordu; genis ekranda basik, dar ekranda
   kullanissiz kaliyordu. Artik ekranla olcekleniyor ve yuvarlatilmis bir
   yuzeyin icinde duruyor.                                                   */
.iletisim-harita { margin-top: clamp(44px, 5.5vw, 76px); }
.iletisim-harita-ust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.iletisim-harita-baslik {
  font-family: 'Raleway', 'Open Sans', Arial, sans-serif;
  font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ada-95);
  margin: 0;
}
.iletisim-harita-btn { text-decoration: none; }
.contact-page-maps-area {
  width: 100%;
  height: clamp(280px, 42vw, 440px) !important;
  border-radius: var(--ada-r-lg);
  overflow: hidden;
  border: 1px solid var(--ada-20);
  background: var(--ada-05);
}
.contact-page-maps-area iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* --- 25.9 Dar ekran ------------------------------------------------------ */
@media screen and (max-width: 575.98px) {
  .contact-page-form-area .form-row { margin-left: 0; margin-right: 0; }
  .contact-page-form-area .form-row > .form-group { padding-left: 0; padding-right: 0; }
  .iletisim-kart { padding: 14px 15px; gap: 12px; }
  .iletisim-kart-ikon { flex-basis: 38px; width: 38px; height: 38px; font-size: 15px; }
}


/* =============================================================================
   26. ICERIK SAYFALARI - kurumsal/* ve sayfa/*  (Adim 12)

   Iki sablon (about.php, htmlpages.php) uzun metin basiyor ve ikisi de tasarim
   sistemine hic baglanmamisti. Olculen durum:

     - Kabuk 1333px, metin 16px/24px (satir araligi 1.5) ve OLCU SINIRI YOK
       -> satir basina ~160 karakter. Okunabilirlik esigi 60-75.
     - Icerikteki h2/h3/blockquote icin HIC kural yoktu (hakkimizda sayfasinda
       6 adet h2 ve bir blockquote var) - tarayici varsayilaniyla ciziliyorlardi.
     - Sayfa basligi IKI KEZ basiliyordu: seritte <h1>, hemen altinda 32px punto.
     - Sayfada yon bulmayi saglayan hicbir sey yoktu: icindekiler, iletisim
       karti, diger kurumsal sayfalara gecis - hicbiri.

   Tipografi Bolum 24.9'dan PAYLASILIYOR (ayni kurallar ikinci kez yazilmadi).
   Bu bolum yalnizca duzen ve yan panel.
   ========================================================================== */

.about-page-main,
.html-page-main {
  width: 100% !important;
  padding: clamp(36px, 4.5vw, 70px) 0 clamp(56px, 7vw, 96px) !important;
  /* Yapiskan yan panelin sarti: `hidden` bir kaydirma kapsayicisi yaratir ve
     icindeki position:sticky viewport yerine ona gore konumlanir. `clip` ayni
     tasma korumasini verir ama kapsayici yaratmaz. */
  overflow-x: hidden;
  overflow-x: clip;
  overflow-y: visible;
}
.about-page-text-main,
.html-page-text-main {
  width: min(1240px, 92%) !important;
  overflow: visible !important;
}

/* --- 26.1 Izgara --------------------------------------------------------- */
.icerik-izgara {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 3.5vw, 60px);
  align-items: start;
}
.icerik-govde { min-width: 0; }

@media screen and (min-width: 1024px) {
  .icerik-izgara { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
  .icerik-yan-panel { position: sticky; top: 24px; }
}
@media screen and (min-width: 1101px) {
  /* Sabit header bu genislikte devreye giriyor: 62px + 24 pay */
  .icerik-yan-panel { top: 86px; }
}

/* --- 26.2 Giris paragrafi ------------------------------------------------
   about_page.spot kolonu doluydu ama sablon onu HIC basmiyordu.            */
.icerik-spot {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ada-60);
  max-width: 68ch;
  margin: 0 0 clamp(24px, 3vw, 34px);
  padding-left: 16px;
  border-left: 3px solid var(--ada-vurgu);
}

/* --- 26.3 Yan panel kabugu ---------------------------------------------- */
.icerik-yan-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.icerik-panel-baslik {
  font-family: 'Raleway', 'Open Sans', Arial, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ada-40);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ada-20);
  margin-bottom: 12px;
}
.icerik-panel-baslik i { color: var(--ada-vurgu); margin-right: 6px; }

/* --- 26.4 Icindekiler ---------------------------------------------------
   Uc ve uzeri baslikta uretilir (icerikIcindekiler). Capa baglantilari
   SAYFA YOLUNU tasir - <base> etiketi yuzunden yalin "#capa" anasayfaya
   gidiyor (bkz. _parts/icerik-yan-panel.php).                              */
.icerik-toc {
  background: var(--ada-05);
  border: 1px solid var(--ada-20);
  border-left: 3px solid var(--ada-vurgu);
  border-radius: var(--ada-r-md);
  padding: 18px 20px;
}
.icerik-toc-liste {
  margin: 0;
  padding: 0;
  list-style: none;
  /* Cok basligi olan sayfada panel ekrandan tasmasin */
  max-height: min(52vh, 460px);
  overflow-y: auto;
}
.icerik-toc-liste li { margin: 0 0 7px; line-height: 1.45; }
.icerik-toc-liste li:last-child { margin-bottom: 0; }
.icerik-toc-s3 { padding-left: 16px; }
.icerik-toc-liste a {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 13.5px;
  color: var(--ada-80);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--ada-sure-hizli) var(--ada-egri),
              border-color var(--ada-sure-hizli) var(--ada-egri);
}
.icerik-toc-s3 a { font-size: 12.5px; color: var(--ada-60); }
.icerik-toc-liste a:hover {
  color: var(--ada-vurgu-koyu);
  border-bottom-color: var(--ada-vurgu);
  text-decoration: none;
}

/* --- 26.5 Iletisim karti -------------------------------------------------
   Kurumsal metin sayfalari donusum yolunun ucu: okumayi bitiren ziyaretci
   ne yapacagini bilmeli. Numaralar tiklanabilir.                           */
.icerik-iletisim-kart {
  background: var(--ada-ana);
  border-radius: var(--ada-r-md);
  padding: 20px;
  color: #fff;
}
.icerik-iletisim-baslik {
  font-family: 'Raleway', 'Open Sans', Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 8px;
}
.icerik-iletisim-spot {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .72);
  margin: 0 0 16px;
}
.icerik-iletisim-satir {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: color var(--ada-sure-hizli) var(--ada-egri);
}
.icerik-iletisim-satir span { overflow-wrap: anywhere; }
.icerik-iletisim-satir i {
  flex: 0 0 auto;
  width: 16px;
  text-align: center;
  opacity: .7;
}
.icerik-iletisim-satir:hover { color: #fff; text-decoration: none; }
.icerik-iletisim-satir:hover i { opacity: 1; }
.icerik-iletisim-wa:hover { color: #7DE2A0; }
.icerik-iletisim-btn {
  width: 100%;
  margin-top: 16px;
}

/* --- 26.6 Diger sayfalar -------------------------------------------------
   Kurumsal sayfalar ve serbest HTML sayfalari tek listede: ziyaretci
   "Hakkimizda"dan "Gizlilik Sozlesmesi"ne gitmek icin ust menuye donmesin. */
.icerik-diger {
  background: var(--ada-00);
  border: 1px solid var(--ada-20);
  border-radius: var(--ada-r-md);
  padding: 18px 20px;
}
.icerik-diger-liste { margin: 0; padding: 0; list-style: none; }
.icerik-diger-liste li { margin-bottom: 2px; }
.icerik-diger-liste li:last-child { margin-bottom: 0; }
.icerik-diger-liste a,
.icerik-diger-aktif {
  display: block;
  padding: 8px 10px;
  border-radius: var(--ada-r-sm);
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 13.5px;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color var(--ada-sure-hizli) var(--ada-egri),
              color var(--ada-sure-hizli) var(--ada-egri);
}
.icerik-diger-liste a { color: var(--ada-80); }
.icerik-diger-liste a:hover {
  background: var(--ada-vurgu-05);
  color: var(--ada-vurgu-koyu);
  text-decoration: none;
}
.icerik-diger-aktif {
  background: var(--ada-05);
  color: var(--ada-95);
  font-weight: 700;
  cursor: default;
}

/* --- 26.7 Metin govdesi kalintilari -------------------------------------
   Tipografinin kendisi Bolum 24.9'da. Burada yalnizca temanin bu iki sinifa
   verdigi eski deger eziliyor: agirlik 500 uzun metinde fazla yogundu.     */
.about-page-content,
.html-page-content {
  width: 100% !important;
  font-weight: 400;
}
/* Capa kaydirmasi: sabit header basligi ustten kirpmasin */
.about-page-content h2[id],
.about-page-content h3[id],
.html-page-content h2[id],
.html-page-content h3[id] { scroll-margin-top: 96px; }

/* --- 26.8 Alt bolumler (yalnizca kurumsal sayfa) -------------------------
   Sayac / beceri / galeri bolumleri sabit px genisliklerdeydi ve izgaranin
   altinda tam genislikte duruyorlar; ekranla olceklenmeleri gerekiyor.     */
.about-page-skill-div {
  width: min(1240px, 100%) !important;
  padding: clamp(24px, 3vw, 50px) !important;
  border-radius: var(--ada-r-lg);
  border-color: var(--ada-20) !important;
  margin-top: clamp(48px, 6vw, 90px) !important;
}
.about-page-images-slider {
  width: min(950px, 100%) !important;
  margin-top: clamp(48px, 6vw, 90px) !important;
}
@media screen and (max-width: 767.98px) {
  .about-page-skill-left,
  .about-page-skill-right { width: 100% !important; display: block; }
  .about-page-skill-baslik { width: 100% !important; font-size: 26px !important; margin-bottom: 16px !important; }
  .about-page-skill-content { width: 100% !important; margin-bottom: 28px; }
}


/* =============================================================================
   23. HAREKETI AZALT - SON SOZ
   Isletim sisteminde "hareketi azalt" acikken tum hareket pratikte kapanir.
   Dosyanin SONUNDA duruyor ki yukaridaki her kurali kapsasin.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ada-sure-hizli: 1ms;
    --ada-sure:       1ms;
    --ada-sure-yavas: 1ms;
  }
  .ada-js .ada-reveal { opacity: 1 !important; transform: none !important; }
  .ada-kart:hover  { transform: none; }
  .ada-btn:active  { transform: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================================
   27. SONSUZ KAYDIRMA  (Adim 14)
   -----------------------------------------------------------------------------
   Kategori listesinin kaydirarak yuklenen bolumu. Uc parca var:
     .ada-urun-izgara  - kartlarin kapsayicisi (yeni kartlar buraya eklenir)
     .ada-akis-durum   - "yukleniyor" / "tumu gosterildi" seridi
     .ada-akis-dugme   - elle devam dugmesi (JS yoksa hic gorunmez)

   NEDEN IZGARANIN KENDI KURALI YOK: kart genislikleri
   `.products-right-products-area .product-main-box` ile TORUN secici uzerinden
   veriliyor (bkz. 6. bolum), yani araya giren bu katman onlari bozmaz.
   `font-size: 0` da kapsayicidan MIRAS alinir - inline-block bosluk tuzagi
   burada da kapali kalir.
   ========================================================================== */

/* Dugme ve durum seridi `hidden` ile gelir; JS acilinca kaldirilir.
   [hidden] kurali tema CSS'inde ezilebiliyor - burada kesinlestiriliyor. */
.ada-akis-durum[hidden],
.ada-akis-dugme[hidden] { display: none !important; }

/* JS devredeyken sayfalama nav'i GIZLENIR ama DOM'da kalir.
   `visibility` degil `display` degil: ekran disina alinir ki ekran
   okuyucular icin de gezinme yigininda gereksiz yer kaplamasin, ama
   baglantilar belgede durmaya devam etsin. */
.ada-akis-gizli {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ada-akis-durum {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 26px 16px;
  font-size: 14px;
  font-family: 'Open Sans', Arial, sans-serif;
  color: var(--ada-60, #6b7280);
}

.ada-akis-durum.ada-akis-bitti { color: var(--ada-50, #9aa1ab); }

/* Donen gosterge - tek eleman, ek isaretleme yok. */
.ada-akis-donen {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: 2px solid var(--ada-20, #e3e6ea);
  border-top-color: var(--ada-vurgu, #c8a45c);
  border-radius: 50%;
  animation: ada-akis-don 0.7s linear infinite;
}

/* "Tumu gosterildi" halinde donen gosterge anlamsiz - gizlenir. */
.ada-akis-bitti .ada-akis-donen { display: none; }

@keyframes ada-akis-don { to { transform: rotate(360deg); } }

.ada-akis-dugme {
  display: block;
  margin: 8px auto 40px;
  padding: 13px 34px;
  min-height: 46px;                      /* dokunma hedefi */
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ada-95, #1f2429);
  background: transparent;
  border: 1px solid var(--ada-20, #e3e6ea);
  border-radius: var(--ada-yaricap, 8px);
  cursor: pointer;
  transition: background var(--ada-sure, .25s) var(--ada-egri, ease),
              border-color var(--ada-sure, .25s) var(--ada-egri, ease),
              color var(--ada-sure, .25s) var(--ada-egri, ease);
}

.ada-akis-dugme:hover {
  color: #fff;
  background: var(--ada-vurgu, #c8a45c);
  border-color: var(--ada-vurgu, #c8a45c);
}

.ada-akis-dugme:focus-visible {
  outline: 2px solid var(--ada-vurgu, #c8a45c);
  outline-offset: 3px;
}

/* Istek surerken dugme "tiklanabilir" gorunmemeli. */
.ada-akis-dugme[disabled] { opacity: .5; cursor: default; }
.ada-akis-dugme[disabled]:hover {
  color: var(--ada-95, #1f2429);
  background: transparent;
  border-color: var(--ada-20, #e3e6ea);
}

/* Hareketi azalt: donen gosterge nabiz gibi solup acilsin, donmesin. */
@media (prefers-reduced-motion: reduce) {
  .ada-akis-donen { animation: none; opacity: .6; }
  .ada-akis-dugme { transition: none; }
}

/* =============================================================================
   28. URUN FILTRESI (sol panel)   ·  PANEL-PLAN.md Faz 18
   -----------------------------------------------------------------------------
   Ziyaretci 198 urunu marka / fiyat araligi / stok durumuna gore suzebiliyor.
   Blok YALNIZCA ayirt edici secenek varsa cizilir (bkz. products-cat-leftbar.php):
   tek markali, fiyatsiz bir katalogda bos bir "Filtrele" kutusu gostermek
   arayuzu bozuk gosterirdi.
   ========================================================================== */

.ada-filtre-kutu { font-family: 'Open Sans', sans-serif; }

.ada-filtre-form-on { padding: 0 20px; }

.ada-filtre-bolum {
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid #EBEBEB;
}
.ada-filtre-bolum:last-of-type { border-bottom: 0; }

.ada-filtre-baslik {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #15171A;
}

/* Secenek satiri: kutu + ad + sayi. Tiklama alani TUM SATIR - telefonda
   yalnizca 14 px'lik kutuya isabet ettirmek zor. */
.ada-filtre-secenek {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 8px;
    font-size: 13.5px;
    font-weight: 400;
    color: #4A4F55;
    cursor: pointer;
    min-height: 28px;
}
.ada-filtre-secenek input { margin: 0; flex: 0 0 auto; }
.ada-filtre-secenek span  { flex: 1 1 auto; }
.ada-filtre-secenek em {
    flex: 0 0 auto;
    font-style: normal;
    font-size: 12px;
    color: #9AA0A6;
}
.ada-filtre-secenek:hover span { color: #15171A; }

/* Fiyat araligi: iki alan yan yana, dar panelde de sigmali. */
.ada-filtre-fiyat {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ada-filtre-fiyat input {
    flex: 1 1 0;
    min-width: 0;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #DCDEE1;
    border-radius: 4px;
    font-size: 13px;
    color: #15171A;
}
.ada-filtre-fiyat input:focus { outline: none; border-color: #B5713F; }
.ada-filtre-fiyat span { color: #9AA0A6; flex: 0 0 auto; }

.ada-filtre-dugme-satir {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.ada-filtre-dugme {
    flex: 1 1 auto;
    height: 40px;
    border: 0;
    border-radius: 4px;
    background: #B5713F;
    color: #FFF;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease;
}
.ada-filtre-dugme:hover { background: #95592F; }

.ada-filtre-temizle {
    flex: 0 0 auto;
    font-size: 13px;
    color: #6B7076;
    text-decoration: underline;
}
.ada-filtre-temizle:hover { color: #B5713F; }

@media (prefers-reduced-motion: reduce) {
    .ada-filtre-dugme { transition: none; }
}

/* =============================================================================
   29. BENZER URUNLER SERIDI (Swiper)   ·  PANEL-PLAN.md Faz 21
   -----------------------------------------------------------------------------
   Serit 4 saniyede bir kayiyor, en fazla 8 urun gosteriyor.
   Masaustunde 4, tablette 3, telefonda 2 kart yan yana.

   🪤 KAPSAYICI `swiper-container` SINIFINI TASIMIYOR (footer_libs.php o sinifi
   anasayfa slider'i icin kendi basina baglatiyor). Bu yuzden kutuphanenin
   kapsayici kurallari burada YENIDEN yaziliyor - `overflow:hidden` olmadan
   slaytlar yan yana tasar.
   ========================================================================== */

.ada-benzer-sarmal { position: relative; }

.ada-benzer-swiper {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
}

/* 🪤 Kutuphane `.swiper-slide { height:100% }` diyor; kartlar farkli
   yuksekliklerde oldugu icin serbest birakiliyor ve hepsi ayni hizada
   baslasin diye flex kullaniliyor. */
.ada-benzer-slide {
    height: auto;
    display: flex;
}
.ada-benzer-slide > .product-main-box {
    width: 100%;
    margin: 0;
    float: none;          /* tema kartlari float ile diziliyordu */
}

/* 🪤 KART ICI GORSEL KUTUSU SABIT OLCULUYDU - SERIDI TASIRIYORDU.
   style.css: `.product-main-box-img { width:261px; height:261px }`
   responsive.css ayni kurali mobilde `185px !important` / `125px !important`
   ile eziyor. Swiper ise slayt genisligini KAPSAYICIYA gore hesapliyor;
   icerideki sabit kutu slayttan genis kalinca serit viewport'u asiyordu
   (olculdu: 414 px ekranda kapsayici 500 px -> 86 px yatay tasma).

   Kural YALNIZCA serit icindeki kartlari etkiler; liste sayfalarindaki
   kartlar tema olculeriyle kalir. `!important` zorunlu - ezilen kurallarin
   kendisi `!important` tasiyor. */
.ada-benzer-slide .product-main-box-img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
}
.ada-benzer-slide .product-main-box-img img {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    object-fit: cover;
}

/* --- Oklar ---------------------------------------------------------------
   Kapsayicinin DISINDA duruyorlar (overflow:hidden kirpardi) ve dikeyde
   kart gorselinin ortasina hizalaniyorlar. */
.ada-benzer-ok {
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    z-index: 5;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid #E4E6E8;
    border-radius: 50%;
    background: #FFF;
    color: #15171A;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ada-benzer-ok:hover {
    background: #B5713F;
    border-color: #B5713F;
    color: #FFF;
}
/* 🪤 OKLAR KAPSAYICININ DISINA TASIRILMADI. Serit sayfa genisligini
   neredeyse tamamen dolduruyor; -21px ile disari alindiginda oklar sayfa
   KENARINA yapisip yarim kaldi (olculdu: 1440px'de yarisi ekran disinda).
   Kartlarin uzerine hafifce binmeleri hem gorunur hem tanidik bir desen. */
.ada-benzer-geri  { left: 8px; }
.ada-benzer-ileri { right: 8px; }

/* Swiper, gidilecek slayt kalmadiginda bu sinifi ekler. */
.ada-benzer-ok.swiper-button-disabled { opacity: .35; cursor: default; }
.ada-benzer-ok.swiper-button-disabled:hover {
    background: #FFF;
    border-color: #E4E6E8;
    color: #15171A;
}

/* --- Noktalar ------------------------------------------------------------ */
.ada-benzer-nokta {
    position: relative;
    margin-top: 18px;
    text-align: center;
    line-height: 0;
}
.ada-benzer-nokta .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 4px;
    background: #D6D9DC;
    opacity: 1;
    border-radius: 50%;
    display: inline-block;
}
.ada-benzer-nokta .swiper-pagination-bullet-active { background: #B5713F; }

/* --- Dar ekran -----------------------------------------------------------
   Telefonda iki kart yan yana; oklar seridin USTUNE binmesin diye
   kenarlardan iceri aliniyor. */
@media (max-width: 991.98px) {
    .ada-benzer-geri  { left: 5px; }
    .ada-benzer-ileri { right: 5px; }
    .ada-benzer-ok { width: 36px; height: 36px; font-size: 17px; }
}

@media (max-width: 575.98px) {
    /* Dar ekranda ok dugmeleri karti kapatiyordu - kaldirilip yerine
       kaydirma ve noktalar birakildi (dokunmatikte zaten dogal yol). */
    .ada-benzer-ok { display: none; }
    .ada-benzer-nokta { margin-top: 14px; }
}

/* =========================================================================
   🪤 GENISLIK EBEVEYNDEN DEGIL, GORUNUMDEN ALINIYOR
   -------------------------------------------------------------------------
   Serit tema kapsayicilarinin icinde duruyor ve o zincirde SABIT PIKSEL
   genislikler var (style.css masaustu tabanli yazilmis: `.product-main-box`
   278px, `.product-detail-content-area` 1200px...). Olculdu: 414 px'lik bir
   ekranda kapsayici 500 px cikiyor ve Swiper slayt genisligini ona gore
   hesapliyordu - serit gorunumu asip yatay kaydirma yaratiyordu.

   Swiper kapsayicinin OLCULEN genisligine gore hesap yaptigi icin cozum
   kapsayiciyi gorunume baglamak. `vw` ebeveyn zincirini tamamen atlar.
   ====================================================================== */
@media (max-width: 991.98px) {
    .ada-benzer-sarmal {
        max-width: 94vw;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 575.98px) {
    .ada-benzer-sarmal { max-width: 92vw; }
}

@media (prefers-reduced-motion: reduce) {
    .ada-benzer-ok { transition: none; }
}

/* =============================================================================
   30. URUN KARTI "INCELE" DUGMESI   ·  PANEL-PLAN.md Faz 21
   -----------------------------------------------------------------------------
   ONCEKI HALI (style.css:204-206):
       130x35 px sabit kutu · 14px kalin yazi · scale(1.5) -> scale(1) belirme
       kaplama: duz beyaz %40 (gorseli soldururyordu)

   🔴 EN ONEMLI KUSUR DOKUNMATIKTE IDI: dugme yalnizca `:hover` ile
   goruntuleniyordu. Telefon ve tablette hover DIYE BIR SEY YOK - yani
   ziyaretcilerin buyuk bolumu "Incele" dugmesini HIC GORMEDI. Asagida
   `(hover: none)` ile bu cihazlar yakalaniyor ve dugme kalici gosteriliyor.

   🪤 OZGULLUK: tema kurali `.product-main-box-img .buttons .text` (uc sinif)
   ve arka planinda `!important` var. Ezmek icin AYNI zincir + `!important`
   gerekiyor; yalnizca `.text` yazmak yetmez.

   🎨 RENKLER PANELDEN: arka plan `--ada-vurgu` degiskeninden, yazi rengi
   satir ici `style` ile geliyor (urun modul ayarlari). Ikisine de
   DOKUNULMUYOR - yalnizca bicim modernlestiriliyor.
   ========================================================================== */

.product-main-box-img .buttons .text {
    /* Sabit kutu yerine icerige gore genisleyen hap bicimi. */
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    padding: 9px 17px !important;
    border-radius: 999px !important;

    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: .01em;
    white-space: nowrap;

    /* scale(1.5) -> scale(1) sicramasi yerine yumusak bir yukselis. */
    transform: translateY(8px) scale(.96) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22) !important;
    transition: opacity .22s ease, transform .22s ease !important;
}

.product-main-box:hover .product-main-box-img .buttons .text {
    transform: translateY(0) scale(1) !important;
}

/* Ikon metne gore kucultuldu; 14px ikon + 12.5px yazi dengesiz duruyordu. */
.product-main-box-img .buttons .text i {
    font-size: 11px;
    margin-right: 5px;
}

/* Kaplama: duz beyaz orgu gorseli soldururyordu. Alttan yukari koyu bir
   gecis hem dugmeyi okunur kilar hem urunu gosterir. */
.product-main-box-img .ovrly {
    background: linear-gradient(to top,
                rgba(0, 0, 0, .42) 0%,
                rgba(0, 0, 0, .10) 45%,
                rgba(0, 0, 0, 0) 70%) !important;
}

/* Dugme biraz yukari alindi - hap bicimi daha kisa oldugu icin
   %80 konumda gorselin dibine yapisiyordu. */
.product-main-box-img .buttons { top: 78% !important; }

/* =========================================================================
   DOKUNMATIK ve DAR EKRAN
   -------------------------------------------------------------------------
   🔴 `(hover: none)` hover DESTEKLEMEYEN cihazlari yakalar (telefon/tablet).
   Orada dugme kalici gorunur - aksi halde hic gorunmezdi.
   ====================================================================== */
@media (hover: none) {
    .product-main-box-img .buttons .text {
        opacity: 1 !important;
        transform: none !important;
    }
    .product-main-box-img .ovrly { opacity: 1 !important; }
}

@media (max-width: 767.98px) {
    /* Telefonda kart kucuk; dugme de orantili kuculuyor. */
    .product-main-box-img .buttons .text {
        padding: 7px 13px !important;
        font-size: 11.5px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .20) !important;
    }
    .product-main-box-img .buttons .text i { font-size: 10px; margin-right: 4px; }
    .product-main-box-img .buttons { top: 80% !important; }
}

@media (max-width: 575.98px) {
    /* Benzer urunler seridinde iki kart yan yana - dugme daha da kucuk. */
    .product-main-box-img .buttons .text {
        padding: 6px 11px !important;
        font-size: 11px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-main-box-img .buttons .text { transition: none !important; }
}

/* =============================================================================
   31. TICARET GUVENCE KUTULARI   ·  PANEL-PLAN.md Faz 22
   -----------------------------------------------------------------------------
   Urun detayinin SAG PANELINDE, siparis dugmelerinin altinda; 2 sutunlu izgara.

   Duzen kullanicinin verdigi referansa gore: beyaz kutu · ince kenarlik ·
   DAIRE ZEMINSIZ renkli ikon · iki katmanli metin (kalin baslik + kucuk gri
   alt aciklama). Alt aciklama `ticaret_bilgi.aciklama` kolonundan gelir ve
   BOSSA HIC CIZILMEZ - o zaman kutu tek satir kalir.

   🎨 Zemin, kenarlik, ikon ve baslik rengi PANELDEN (satir ici `style`).
   Burada `background` / `color` BILEREK yazilmadi; yazilsaydi
   Ayarlar > Ticaret secimi islevsiz kalirdi. Yalnizca alt aciklama kendi
   soluk tonunu kullanir (baslikla ayni renk olsa hiyerarsi kaybolurdu).
   ========================================================================== */

.ada-guvence {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0 0;
}

.ada-guvence-kutu {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 13px 14px;
    border-radius: 10px;
    text-align: left;
}

/* Iki satirli kutularda ikon metnin USTUNE degil, blogun ortasina hizalanir. */
.ada-guvence-iki { align-items: center; }

/* 🪤 Referansta ikon DAIRE ZEMINSIZ ve daha buyuk. Onceki surumde daire
   zemin vardi; kucuk kutularda gorsel agirligi metinden fazla oluyordu. */
.ada-guvence-ikon {
    flex: 0 0 auto;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    line-height: 1;
}

.ada-guvence-yazi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ada-guvence-baslik {
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .01em;
    text-transform: none;   /* tema BUYUK HARF basiyordu - dar sutunda 3 satira kiriliyor */
}

/* Alt aciklama TEK renk kullanir: baslikla ayni tonda olsa iki katman
   birbirine karisirdi. */
.ada-guvence-alt {
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.35;
    color: #9AA0A6;
}

@media (max-width: 575.98px) {
    .ada-guvence { gap: 8px; margin-top: 16px; }
    .ada-guvence-kutu { padding: 11px 12px; gap: 10px; }
    .ada-guvence-ikon { width: 26px; font-size: 18px; }
    .ada-guvence-baslik { font-size: 11px; }
    .ada-guvence-alt { font-size: 10px; }
}

@media (max-width: 359.98px) {
    .ada-guvence { grid-template-columns: minmax(0, 1fr); }
}


/* =============================================================================
   32. SIPARIS DUGMELERI (siparis ver + whatsapp)   ·  PANEL-PLAN.md Faz 22
   -----------------------------------------------------------------------------
   ONCEKI HALI: `button` ve `<a><div>` ARDISIK iki ogeydi. Genislikleri metin
   uzunluguna gore farkliydi, sigmadiginda alt alta kayiyorlardi.

   SIMDI: esnek sarmalayici icinde ESIT genislikte, sutunu tam dolduruyorlar.

   🪤 WHATSAPP METNI MAVIYE DONMUSTU: eski isaretlemede renk `<a>` uzerinde
   satir ici `style="color:#FFF"` ile veriliyordu. Sarmalayici eklenirken o
   satir ici stil kaldirilinca baglanti varsayilan mavi rengine dondu.
   Renk artik BURADA, `.ada-siparis-wp-bag` uzerinde - isaretlemeye bagli degil.
   ========================================================================== */

/* 🪤 FLEX DEGIL IZGARA - ve sebebi olculdu.
   `flex: 1 1 0` ile iki dugme ESIT PAY almasina ragmen farkli genislikte
   ciziliyordu: 256 px / 224 px, tam olarak 2x16 px (yatay padding) fark.
   Sebep, dugmelerin biri <button> digeri <div> olmasi ve projede global
   `* { box-sizing: border-box }` BULUNMAMASI - tarayici ikisine farkli
   varsayilan uyguluyor, flex tabani da ona gore hesapliyor.

   Izgara sutunu icerigi hic hesaba katmaz: `1fr` her zaman esit paydir.
   `grid-auto-flow: column` sayesinde tek dugme kalirsa (ornegin WhatsApp
   kapaliysa) o dugme tam genisligi alir - sabit iki sutun olsaydi yarim
   kalirdi. */
.ada-siparis-dugmeler {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 10px;
    margin: 4px 0 2px;
}

.ada-siparis-dugmeler > * {
    min-width: 0;
    box-sizing: border-box !important;
}

.ada-siparis-wp-bag {
    color: #FFF !important;        /* bkz. yukaridaki tuzak notu */
    text-decoration: none !important;
    display: block;
}

/* Iki dugme de ayni kaliba girer - biri <button>, digeri <div>. */
.ada-siparis-dugme {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 52px;
    margin: 0 !important;
    padding: 14px 10px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;

    border-radius: 10px !important;
    /* 🪤 OLCU DAR PANELE GORE: sag panel ~445 px, her dugme ~205 px. 13,5 px
       yazi ile "WHATSAPP'TAN SIPARIS" sigmiyor ve IKI SATIRA kiriliyordu -
       yanindaki dugme tek satirken dengesiz duruyordu. `clamp` genis ekranda
       buyur, dar panelde kucultur; ikisi de tek satirda kalir. */
    font-size: clamp(11px, .95vw, 13px) !important;
    font-weight: 700 !important;
    white-space: nowrap;
    line-height: 1.2 !important;
    letter-spacing: .01em;
    text-align: center;
    cursor: pointer;

    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    will-change: transform;
}

.ada-siparis-dugme i { font-size: 15px; line-height: 1; flex: 0 0 auto; }
.ada-siparis-dugme span { min-width: 0; }

/* --- Animasyon: hafif yukselis + golge ---------------------------------- */
.ada-siparis-dugmeler > *:hover .ada-siparis-dugme,
.ada-siparis-dugme:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .16);
    filter: brightness(1.04);
}

.ada-siparis-dugmeler > *:active .ada-siparis-dugme,
.ada-siparis-dugme:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .14);
}

/* WhatsApp ikonu dugme uzerine gelince hafifce buyur - hangi dugmenin
   mesajlasma oldugunu ayirt ettirir. */
.ada-siparis-wp-bag:hover .ada-siparis-dugme i { transform: scale(1.12); }
.ada-siparis-dugme i { transition: transform .18s ease; }

/* --- Dar ekran ----------------------------------------------------------
   Telefonda iki dugme yan yana sikismasin: alt alta ama TAM GENISLIK. */
@media (max-width: 400px) {
    /* Telefonda yan yana sikismasin - alt alta, yine tam genislik. */
    .ada-siparis-dugmeler { grid-auto-flow: row; }
}

@media (prefers-reduced-motion: reduce) {
    .ada-siparis-dugme,
    .ada-siparis-dugme i { transition: none; }
    .ada-siparis-dugmeler > *:hover .ada-siparis-dugme,
    .ada-siparis-dugme:hover { transform: none; }
}


/* =============================================================================
   33. MOBILDE PAYLASIM DUGMELERI ve SAYFA YOLU   ·  PANEL-PLAN.md Faz 23
   -----------------------------------------------------------------------------
   Iki dar ekran duzenlemesi:
     1. Gorsel altindaki paylasim dugmeleri YALNIZCA IKON
     2. Sayfa yolu (breadcrumb) minimal - "Buradasiniz:" etiketi kalkiyor
   ========================================================================== */

/* --- 1. Paylasim dugmeleri: mobilde yalnizca ikon ------------------------
   🔴 METIN SILINMIYOR, GORSEL OLARAK GIZLENIYOR. `display:none` ekran
   okuyucudan da kaldirirdi ve dugmeler "baglanti" diye okunurdu - hangi
   baglanti oldugu belirsiz kalirdi. Asagidaki kalip metni ekranda gizler
   ama erisilebilirlik agacinda BIRAKIR. */
@media (max-width: 575.98px) {

    .ada-paylas-btn span {
        position: absolute !important;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    /* Metin gidince dugme kare/daire olur - dokunma hedefi 42px korunur. */
    .ada-paylas-btn {
        width: 42px;
        min-width: 42px;
        min-height: 42px;
        padding: 0;
        gap: 0;
        justify-content: center;
    }

    .ada-paylas-btn svg { width: 19px; height: 19px; }

    .ada-paylas-gorsel-alti {
        gap: 10px;
        margin-left: 0;          /* masaustunde serit payi vardi, mobilde serit yok */
        padding-top: 14px;
        margin-top: 12px;
    }
}

/* --- 2. Sayfa yolu (breadcrumb) mobilde minimal --------------------------
   ONCEKI HALI: "Buradasiniz: Anasayfa / Urunlerimiz / Sandalye Modelleri"
   Etiket tek basina satirin besde birini yiyordu ve uzun kategori adlarinda
   yol iki satira kiriliyordu.

   🪤 ETIKET SECICISI `> span:first-child`: bu yapi 37 sablonda AYNI sekilde
   tekrarlaniyor (ortak parca degil, kopyalanmis). Tek bir CSS kurali
   hepsini birden duzeltiyor - 37 dosyaya dokunmaya gerek yok.
   ========================================================================== */
@media (max-width: 767.98px) {

    /* "Buradasiniz:" etiketi - yol zaten kendini anlatiyor. */
    .page-headers-main-right > span:first-child { display: none !important; }

    .page-headers-main-right {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 5px;
        /* Uzun yol iki satira kirilmasin; tasarsa parmakla kaydirilir. */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        white-space: nowrap;
        padding: 0 12px;
    }
    .page-headers-main-right::-webkit-scrollbar { display: none; }

    /* responsive.css her span'e 5px sag bosluk veriyor - `gap` zaten var. */
    .page-headers-main-right span { padding-right: 0 !important; }

    .page-headers-main-right,
    .page-headers-main-right a,
    .page-headers-main-right span { font-size: 11.5px; }

    /* Baglantilar biraz daha sessiz: yol bir gezinti izi, bir menu degil. */
    .page-headers-main-right a span { font-weight: 500 !important; }

    /* Baslik ile yol arasi daraldi. */
    .page-headers-main-left { margin-bottom: 6px; }
}

@media (max-width: 400px) {
    /* Cok dar ekranda yol sola yaslanir - ortalama, tasan icerigin
       BASINI kirpar (kaydirma baslangici gorunmez olurdu). */
    .page-headers-main-right { justify-content: flex-start; }
}


/* =============================================================================
   34. 404 SAYFASI
   -----------------------------------------------------------------------------
   ONCEKI HALI: sayfa basligi seridinde <h1>404</h1>, altinda 20 KB'lik bir PNG
   ve tek satir metin. ILERI GIDEN HICBIR YOL YOKTU - arama kutusu yok, bolum
   baglantisi yok, eylem cagrisi yok. Ziyaretcinin tek secenegi geri tusuydu.

   ARTIK: animasyonlu bir sahne (etrafi tarayan buyutec), gercek bir <h1>
   mesaji, arama kutusu ve ACIK bolumlere kisayollar.

   🪤 SEKTORE BAGLI BIR SEY CIZME. Ilk denemede devrilen bir SANDALYE vardi
   (musteri mobilyaci) - ama bu bir CMS ve yarin baska bir sektorde
   kurulabilir; orada anlamsiz, hatta tuhaf durur. Buyutec her sektorde ayni
   seyi anlatiyor ve hemen altindaki arama kutusuyla ayni cumleyi kuruyor.

   🪤 ANIMASYON `prefers-reduced-motion` ILE KAPANIR. Bu sayfanin tamami
   kendiliginden baslayan ve TEKRAR EDEN hareket; tercih acikken buyutec duz
   kaliyor, rakamlar duruyor, icerik dogrudan gorunuyor.

   🪤 "404" SAYISI DEKORATIF. Ekran okuyucuya okunmuyor (aria-hidden); anlam
   <h1>'deki cumlede. Ziyaretci "dort sifir dort" duymak yerine ne oldugunu
   anlatan bir cumle duyuyor.
   ========================================================================== */

.ada-404 {
  --ada-404-vurgu: var(--ada-vurgu, #C2603C);
  padding-block: clamp(40px, 8vw, 88px);
  text-align: center;
}

.ada-404-ic {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding-inline: 20px;
}

/* --- Sahne: 4 [buyutec] 4 --------------------------------------------------
   Buyutecin mercegi ORTADAKI SIFIRIN yerini tutuyor. */
.ada-404-sahne {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2vw, 18px);
  margin-bottom: 26px;
  line-height: 1;
}

.ada-404-rakam {
  font-size: clamp(76px, 18vw, 150px);
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--ada-95, #15171A);
  opacity: .12;
  user-select: none;
  animation: ada404Suzul 3.6s ease-in-out infinite;
}
/* Iki rakam farkli gecikmeyle - ayni anda inip kalkarsa "zipliyor" duruyor. */
.ada-404-rakam-2 { animation-delay: .45s; }

@keyframes ada404Suzul {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* --- Buyutec -------------------------------------------------------------- */
.ada-404-mercek {
  width: clamp(76px, 17vw, 138px);
  height: auto;
  flex: 0 0 auto;
  color: var(--ada-404-vurgu);
  /* Donme merkezi SAPIN UCU: elde tutuluyormus gibi salinir. */
  transform-origin: 72% 78%;
  animation: ada404Ara 5s cubic-bezier(.45, .05, .55, .95) infinite;
}

/* Etrafi tarayan buyutec. Sonda uzun bir duraklama var: surekli sallanan bir
   nesne goz yoruyor. */
@keyframes ada404Ara {
  0%,  8%   { transform: rotate(0deg)   translateX(0); }
  22%       { transform: rotate(-11deg) translateX(-6px); }
  40%       { transform: rotate(9deg)   translateX(6px); }
  55%       { transform: rotate(-5deg)  translateX(-3px); }
  68%, 100% { transform: rotate(0deg)   translateX(0); }
}

/* Mercegin icinden gecen parilti - "tarama" hissi. */
.ada-404-parilti { animation: ada404Parilti 5s linear infinite; }

@keyframes ada404Parilti {
  0%, 100% { opacity: 0; }
  30%      { opacity: .8; }
  60%      { opacity: 0; }
}

/* --- Metin ---------------------------------------------------------------- */
.ada-404-baslik {
  font-size: clamp(22px, 4.4vw, 32px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ada-95, #15171A);
  margin: 0 0 10px;
}

.ada-404-metin {
  font-size: clamp(14.5px, 2.2vw, 16.5px);
  line-height: 1.65;
  color: var(--ada-60, #6B7076);
  margin: 0 auto 26px;
  max-width: 46ch;
}

/* --- Arama: sayfayi bulamayanin ILK ihtiyaci ------------------------------ */
.ada-404-arama {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 480px;
  margin: 0 auto 26px;
  padding: 6px 6px 6px 14px;
  border: 1px solid var(--ada-20, #DFD9CF);
  border-radius: 999px;
  background: #FFF;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ada-404-arama:focus-within {
  border-color: var(--ada-404-vurgu);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ada-404-vurgu) 16%, transparent);
}
.ada-404-arama i { color: var(--ada-60, #6B7076); flex: 0 0 auto; }

.ada-404-arama input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  /* 🪤 16px ALTINA DUSURME: iOS Safari daha kucuk yazi tipli bir alana
     odaklaninca sayfayi ZORLA yakinlastiriyor. */
  font-size: 16px;
  padding: 10px 0;
  color: var(--ada-95, #15171A);
}

.ada-404-arama button {
  flex: 0 0 auto;
  /* 🪤 44px - olculdu, 40px'ti. Hap seklindeki sarmalayicinin dolgusu gorsel
     olarak telafi ediyordu ama DOKUNMA HEDEFI dugmenin kendisi. */
  min-height: 44px;
  padding-inline: 18px;
  border: 0;
  border-radius: 999px;
  background: var(--ada-404-vurgu);
  color: #FFF;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: filter .2s ease, transform .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .ada-404-arama button:hover { filter: brightness(1.08); }
}
.ada-404-arama button:active { transform: scale(.97); }

/* --- Kisayollar ----------------------------------------------------------- */
.ada-404-baglar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ada-404-baglar a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;            /* WCAG 2.5.5 dokunma hedefi */
  padding: 0 16px;
  border: 1px solid var(--ada-20, #DFD9CF);
  border-radius: 999px;
  background: #FFF;
  color: var(--ada-95, #15171A);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.ada-404-baglar a i { color: var(--ada-404-vurgu); }

@media (hover: hover) and (pointer: fine) {
  .ada-404-baglar a:hover {
    border-color: var(--ada-404-vurgu);
    color: var(--ada-404-vurgu);
    transform: translateY(-2px);
  }
}
.ada-404-baglar a:focus-visible {
  outline: 2px solid var(--ada-404-vurgu);
  outline-offset: 3px;
}

/* Anasayfa bagi birincil - digerlerinden ayrilsin. */
.ada-404-baglar .ada-404-birincil {
  background: var(--ada-404-vurgu);
  border-color: var(--ada-404-vurgu);
  color: #FFF;
}
.ada-404-baglar .ada-404-birincil i { color: #FFF; }
@media (hover: hover) and (pointer: fine) {
  .ada-404-baglar .ada-404-birincil:hover { color: #FFF; filter: brightness(1.08); }
}

/* --- Giris animasyonu: icerik asagidan suzulerek gelir -------------------- */
.ada-404-ic > * { animation: ada404Giris .55s cubic-bezier(.2, .7, .3, 1) both; }
.ada-404-ic > *:nth-child(1) { animation-delay: 0s; }
.ada-404-ic > *:nth-child(2) { animation-delay: .08s; }
.ada-404-ic > *:nth-child(3) { animation-delay: .16s; }
.ada-404-ic > *:nth-child(4) { animation-delay: .24s; }
.ada-404-ic > *:nth-child(5) { animation-delay: .32s; }

@keyframes ada404Giris {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* --- 🪤 HAREKETI AZALT — SON SOZ ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ada-404-rakam,
  .ada-404-mercek,
  .ada-404-parilti,
  .ada-404-ic > * {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  /* Rakamlar yine soluk kalmali - opacity:1 onu da ezerdi. */
  .ada-404-rakam { opacity: .12 !important; }
}


/* =============================================================================
   35. OZELLIK KARTLARI  (anasayfa modulu + /ozellikler sayfasi)
   -----------------------------------------------------------------------------
   Urun detayindaki GUVENCE SERIDI (Bolum 31) ile AYNI tasarim dili:
   kenarlikli kart, DAIRE ZEMINSIZ renkli ikon, kalin baslik, soluk alt metin.

   🪤 OLCULER BOLUM 31'DEN BUYUK - KOPYALANMADI. Guvence seridi urun detayinin
   DAR sag panelinde duruyor; oradaki 11.5px baslik / 21px ikon o genislige
   gore secilmisti. Ozellikler bolumu TAM GENISLIK; ayni rakamlar burada
   kaybolur. Tasarim dili ayni, tipografi olcegi bu baglama gore.

   🎨 Zemin, kenarlik, ikon ve metin renkleri PANELDEN (satir ici `style`).
   Burada `background` / `color` BILEREK yazilmadi - yazilsaydi
   Ozellik Modul Ayarlari islevsiz kalirdi.
   ========================================================================== */

.ada-ozellik {
    display: grid;
    /* auto-fit: panelde 1-6 ozellik olabilir; sabit sutun sayisi 4 ozellikte
       tek basina kalan bir kart birakirdi. */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    text-align: left;   /* bolum kapsayicisi ortaliyor - kart metni sola hizali */
}

.ada-ozellik-kutu {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
    padding: 22px 24px;
    border-radius: 14px;
    box-sizing: border-box;
    transition: transform .18s ease, box-shadow .18s ease;
}

.ada-ozellik-kutu:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(17, 20, 24, .09);
}

/* 🪤 Ikon DAIRE ZEMINSIZ. Eski tasarimda zeminli daire vardi ve gorsel
   agirligi metinden fazlaydi; referans (guvence seridi) duz glif kullaniyor. */
.ada-ozellik-ikon {
    flex: 0 0 auto;
    width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
    line-height: 1;
    margin-top: 2px;   /* glifin optik merkezi ilk satirla hizalansin */
}

.ada-ozellik-yazi {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ada-ozellik-baslik {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .01em;
    /* Tema bircok basligi BUYUK HARF basiyor; burada okunurluk icin kapali. */
    text-transform: none;
}

.ada-ozellik-alt {
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.55;
}

@media (max-width: 767.98px) {
    .ada-ozellik { gap: 14px; padding: 0 16px; }
    .ada-ozellik-kutu { padding: 18px 18px; gap: 14px; border-radius: 12px; }
    .ada-ozellik-ikon { width: 30px; font-size: 24px; }
    .ada-ozellik-baslik { font-size: 15px; }
    .ada-ozellik-alt { font-size: 13px; }
}

/* Cok dar ekranda minmax(280px) tek sutuna zaten duser; burada yalnizca
   kenar boslugu kisaliyor. */
@media (max-width: 359.98px) {
    .ada-ozellik { padding: 0 12px; }
    .ada-ozellik-kutu { padding: 16px 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .ada-ozellik-kutu { transition: none; }
    .ada-ozellik-kutu:hover { transform: none; }
}

/* -----------------------------------------------------------------------------
   Baslik bandi ile kartlar arasi boslugu
   -----------------------------------------------------------------------------
   🪤 `style.css:313` bu banda `margin-bottom: 120px` veriyor. O deger ESKI
   duzene gore secilmisti: ikonlar daire zeminliydi, kartlarin kendi zemini
   yoktu ve metin bandin altinda "yuzuyordu" - araya genis bir nefes gerekiyordu.
   Kartlarin kendi kenarligi ve golgesi oldugu icin artik o kadar bosluk bolumu
   ikiye boluyor gibi duruyor.

   Yalnizca masaustunde daraltiliyor: responsive.css zaten `<=1100px`de
   `50px !important` diyor, oraya karisilmiyor.
   -------------------------------------------------------------------------- */
@media (min-width: 1101px) {
    .features-main-header { margin-bottom: 64px; }
}

/* -----------------------------------------------------------------------------
   KUTU SAYISINA GORE DIZILIM  (3+1 / 4+2 kirikligini onler)
   -----------------------------------------------------------------------------
   🪤 `auto-fit` KAC KUTU OLDUGUNU BILMEZ; yalnizca genislige bakar. Olculdu:
   4 kutu varken 1024-1180px arasinda 3 sutuna dusuyor ve DORDUNCU KART ikinci
   satirda TEK BASINA kaliyor - yaygin dizustu genisliginde bolum kirik
   gorunuyor. 6 kutuda ayni sorun genis ekranda 4+2 olarak cikar.

   Cozum "adet sorgusu": `:nth-child(n):last-child` ile kapsayicinin ICINDE
   tam kac cocuk oldugu anlasilir, sutun sayisi ona gore sabitlenir.

   `:has()` desteklemeyen eski bir tarayicida kural hic uygulanmaz ve bugunku
   davranis (3+1) gecerli kalir - yani bozulma DEGIL, iyilestirmenin
   uygulanmamasi olur.
   -------------------------------------------------------------------------- */

/* TAM 4 KUTU: orta genislikte 3+1 yerine 2x2 */
@media (min-width: 768px) and (max-width: 1279.98px) {
    .ada-ozellik:has(> .ada-ozellik-kutu:nth-child(4):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* TAM 6 KUTU: genis ekranda 4+2 yerine 3+3 */
@media (min-width: 1024px) {
    .ada-ozellik:has(> .ada-ozellik-kutu:nth-child(6):last-child) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* TAM 5 KUTU: 4+1 yerine genis ekranda 5, orta genislikte 3+2 */
@media (min-width: 1400px) {
    .ada-ozellik:has(> .ada-ozellik-kutu:nth-child(5):last-child) {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}
@media (min-width: 768px) and (max-width: 1399.98px) {
    .ada-ozellik:has(> .ada-ozellik-kutu:nth-child(5):last-child) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* -----------------------------------------------------------------------------
   BAND ALTINDAKI UCGEN - GERCEKTEN ORTALANIR
   -----------------------------------------------------------------------------
   🔴 `left: 50%` elemanin SOL KENARINI merkeze koyar; goruntudeki ucgen bu
   yuzden merkezin SAGINDA kaliyordu. Olculdu (1440px): ok kutusu 51px genis,
   sol kenari 709'da (sayfa merkezi), gorsel merkezi 734.5 -> SAPMA +25.5px.

   Mobilde ise responsive.css `left: 44% !important` diyor - elle bulunmus bir
   telafi. O da tek genislikte tutuyor: 390px'te olculen sapma -5.5px (bu kez
   SOLA). Yuzde tahmini yerine geometrik ortalama:
   sol kenar merkeze + kendi genisliginin yarisi kadar geri.

   Yatay konum disinda hicbir sey degismiyor; ok rengi panelden gelmeye
   devam ediyor (`head_color`, modulun kendi <style> blogunda).
   -------------------------------------------------------------------------- */
.features-bottom-arrow {
    left: 50% !important;              /* responsive.css'teki 44% telafisini gecersiz kilar */
    transform: translateX(-50%);
}


/* =============================================================================
   36. E-KATALOG  ->  assets/css/katalog.css
   -----------------------------------------------------------------------------
   Kurallar BILEREK bu dosyada degil. Iki sebep:

     1. AGIRLIK - tam ekran PDF okuyucusu ~500 satir kural istiyor ve yalnizca
        /e-katalog sayfasinda kullaniliyor. modern.css her sayfada iniyor.
     2. GUVENLI ALAN - okuyucu tam ekran bir katman; env(safe-area-*) payi
        gerekiyor ve bu dosyanin basindaki kural o tur kurallarin
        mobile-fixes.css'e ait oldugunu soyluyor (`.kg, .kp` orada).

   Yukleyen: includes/template/_pages/catalog.php (header_libs.php'den SONRA,
   yani modern.css ve panel paleti bu dosyadan once gelir).
   ========================================================================== */


/* =============================================================================
   36. ALT CAGRI SERIDI  (trigger_bottom)  -  vurgu zemin + okunabilirlik
   -----------------------------------------------------------------------------
   Zemin artik marka VURGUSU (#B5713F, paletin `vurgu` jetonu). Onceden `ana`
   idi (#23262A) ve hemen altindaki footer da koyuydu (#171A19): ikisi tek bir
   koyu kutle gibi goruniyordu, cagri kayboluyordu.

   🔴 ETIKET AGIRLIGI 300 -> 600, MOBIL BOYUT 15px -> 19px. Bu KOZMETIK DEGIL,
   ERISILEBILIRLIK ZORUNLULUGU. Olculdu: beyaz yazi #B5713F uzerinde
   **3.89:1**. WCAG AA normal metin icin 4.5:1 ister - yani 20px/300 etiket
   KALIRDI. Ayni standart "buyuk metin"i >=24px ya da >=18.66px KALIN diye
   tanimlar ve esigi 3:1'e indirir. Etiket kalinlastirilip mobilde 19px'e
   cikarilinca 3.89 > 3.0 -> her iki kirilimda da GECIYOR.
   Telefon numarasi (28px/700, mobilde 24px) zaten buyuk metin sinifinda.

   🪤 `!important` SART: responsive.css ayni kurali UC ayri kirilimda
   `!important` ile yaziyor (satir 276, 833, 1383). Onsuz mobilde hicbir sey
   degismez - bu projede ayni tuzak daha once yasandi.

   ⚠ PALET DEGISIRSE KONTROL EDIN: `orijinal` (#F27E00, 2.71) ve `lacivert`
   (#C08A2E, 3.04) vurgulari beyaz yazi icin 3:1'in de ALTINDA. O paletlere
   gecilirse seridin metin rengi koyuya cevrilmeli.
   ========================================================================== */

.trigger-bottom-text-span {
    font-weight: 600;
    letter-spacing: .01em;
}

/* -----------------------------------------------------------------------------
   ALT AYIRICI CIZGI (kullanici istegi)
   -----------------------------------------------------------------------------
   Serit (#B5713F) ile footer (#171A19) arasinda ince bir beyaz hat. Iki koyu
   olmayan yuzey degil, SICAK bir turuncu ile NEREDEYSE SIYAH bir yuzey yan
   yana geliyor; arada bir hat, gecisi kaza degil KARAR gibi gosteriyor.

   🪤 `border-bottom` DEGIL `box-shadow` KULLANILDI. Serit `padding: 15px 0`
   ile satir ici stil aliyor; kenarlik eklemek kutunun yuksekligini 1px
   BUYUTUR ve zaten var olan dikey ritmi bozar. `inset` golge yuksekligi
   degistirmez, tam piksele oturur.

   🪤 TAM BEYAZ (#FFF) YERINE %70 SAYDAM: 1px'lik saf beyaz hat bu iki koyu
   ton arasinda fazla keskin duruyor ve "cizgi" degil "kirik" gibi okunuyor.
   Saydam beyaz zemin rengiyle karisir, hat yumusar ama gorunur kalir.
   Tam beyaz isteniyorsa: rgba(255,255,255,1).
   -------------------------------------------------------------------------- */
.trigger-main-div {
    box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, .7);
}

@media screen and (max-width: 767.98px) {
    /* 19px + 600 = WCAG "buyuk metin" esigi (18.66px kalin) asiliyor. */
    .trigger-bottom-text-span { font-size: 19px !important; font-weight: 600 !important; }
}


/* =============================================================================
   37. URUN OZELLIK TABLOSU   ·  URUN-OZELLIK-MODULU.md
   -----------------------------------------------------------------------------
   Urun detayinda gorselin ve paylasim satirinin ALTINDA duran teknik ozellik
   tablosu. Gruplar koyu baslik satiri, altlarinda etiket/deger ciftleri.

   🪤 SAG PANELE DEGIL SOL SUTUNA KONDU. Sag sutun `position:sticky`; icine
   uzayabilen bir tablo konsaydi yapiskan yukseklik ekrani asar ve panel
   yapismayi tamamen birakirdi (bkz. "AKILLI YAPISKAN SAG PANEL").

   🪤 KENARLIK TABLODA DEGIL SARMALAYICIDA - OLCULMUS BIR HATA
   -----------------------------------------------------------------------------
   Ilk surumde `border` + `border-radius` + `overflow:hidden` UCU DE `<table>`
   uzerindeydi ve sonuc: SOL, SAG ve ALT kenarlik GORUNMUYORDU. Sebep ucunun
   birlikte calismamasi:
     - `border-collapse: collapse` ile `border-radius` zaten ETKISIZDIR,
     - `overflow:hidden` tabloyu dolgu kutusundan kirpar ve cokmus (collapsed)
       dis kenarligi da kirpip atar.
   Ust kenarlik "varmis gibi" duruyordu cunku grup basligi satirinin kendi
   zemini ve alt cizgisi o kenari cizmis gibi gosteriyordu - yani hata
   yariya kadar gorunmezdi.

   Cozum: cerceve, yaricap ve kirpma SARMALAYICI `div`e tasindi. Tablo yalnizca
   ic ayirac cizgilerini ciziyor. Kaydirma kutusu da ayni div oldugu icin
   yaricap ve kenarlik kaydirma sirasinda da dogru duruyor.
   ========================================================================== */

.ada-urun-ozellik {
  margin-top: clamp(20px, 3vw, 32px);
  border: 1px solid var(--ada-20);
  border-radius: var(--ada-r-md);
  /* 🔴 KAYDIRMA YOK - HICBIR CIHAZDA (kullanici karari 2026-09-14).
     `overflow-x:auto` KALDIRILDI. Buradaki `hidden` yalnizca kose yaricabini
     kirpmak icin; kirpacak bir sey OLMAMASI gerekiyor.

     🪤 KAYDIRMA CUBUGUNU KALDIRMAK TEK BASINA COZUM DEGILDIR - sorunu
     GORUNMEZ yapar: tasan metin sessizce kirpilir ve kimse fark etmez.
     Garantiyi asagidaki hucre kurallari veriyor (`overflow-wrap:anywhere`);
     icerik tasamadigi icin bu `hidden` hicbir zaman is yapmaz. */
  overflow: hidden;
  background: var(--ada-00);
}

.ada-urun-ozellik-tablo {
  width: 100%;
  max-width: 100%;
  /* `fixed` BURADA IKI IS YAPIYOR: etiket sutunu icerige gore buyuyup deger
     sutununu ezmesin, VE hucre icerigi tablonun genisligini belirleyemesin -
     `auto` olsaydi tek bir uzun kelime tabloyu kutusundan disari itebilirdi. */
  table-layout: fixed;
  border-collapse: collapse;
  border: 0;
  margin: 0;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ada-80);
}

/* --- Grup basligi --------------------------------------------------------- */
.ada-urun-ozellik-grup th {
  background: var(--ada-05);
  color: var(--ada-95);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  padding: 12px 18px;
  border-bottom: 1px solid var(--ada-20);
}
/* Ust uste gelen iki grup arasinda ayirici cizgi - ilkinin ustunde gerekmez. */
.ada-urun-ozellik-tablo tbody + tbody .ada-urun-ozellik-grup th {
  border-top: 1px solid var(--ada-20);
}

/* --- Etiket / deger ------------------------------------------------------- */
/* --- Tasma garantisi: butun hucreler --------------------------------------
   🔴 TABLONUN KAYDIRILAMAZ OLMASININ BEDELI BURADA ODENIYOR. Kaydirma yoksa
   sigmayan metnin gidecek yeri de yoktur; o yuzden metin HER KOSULDA sarilmak
   ZORUNDA - bosluksuz uzun bir deger (uzun bir adres, "AAAA..." gibi bir kod,
   tireli bir urun kodu) bile.

   `overflow-wrap: anywhere` SECILDI, `break-word` DEGIL: ikisi de kelimeyi
   boler ama yalnizca `anywhere` hucrenin EN KUCUK ICERIK GENISLIGINI de
   kucultur. `break-word` ile tablo hala "bu kelime sigmiyor" diyerek kutusunu
   asabiliyordu. `word-break` satiri eski Safari icin yedek olarak duruyor.

   `white-space: normal` bilerek YAZILI: sablon disindan gelen bir `nowrap`
   (tema CSS'i, satir ici stil) butun bu garantiyi tek basina bozardi.         */
.ada-urun-ozellik-tablo th,
.ada-urun-ozellik-tablo td {
  white-space: normal;
  word-break: break-word;      /* eski tarayici yedegi */
  overflow-wrap: anywhere;     /* asil garanti */
  overflow: hidden;            /* gomulu bir oge tasarsa hucrede kalir */
}

.ada-urun-ozellik-tablo th[scope="row"] {
  width: 46%;
  padding: 12px 18px;
  text-align: left;
  font-weight: 400;
  color: var(--ada-80);
  border-bottom: 1px solid var(--ada-10);
  border-right: 1px solid var(--ada-10);
}
.ada-urun-ozellik-tablo td {
  padding: 12px 18px;
  color: var(--ada-60);
  border-bottom: 1px solid var(--ada-10);
}

/* Son satirin alt cizgisi sarmalayicinin kenarligiyla ust uste binerdi. */
.ada-urun-ozellik-tablo tbody:last-child tr:last-child th,
.ada-urun-ozellik-tablo tbody:last-child tr:last-child td {
  border-bottom: 0;
}

/* --- Duyarli: dar ekranda ETIKET USTE, DEGER ALTA -------------------------
   🪤 YATAY KAYDIRMA COZUM DEGILDIR. 360px'te iki sutunlu tablo her hucreyi
   ~150px'e sikistiriyor; "Yıpranmaya Dayanıklı" gibi degerler ucer satira
   boluniyor ve tablo okunmaz hale geliyordu. Satirlari blok yapip etiketi
   degerin USTUNE almak her ikisine de tam genislik veriyor.

   `display:block` verilen hucrede `width:46%` ve `table-layout` anlamini
   yitirir - ikisi de bu kirilimda devre disi kaliyor, ayrica sifirlanmalari
   gerekmiyor.                                                               */
@media (max-width: 560px) {
  .ada-urun-ozellik-tablo,
  .ada-urun-ozellik-tablo tbody,
  .ada-urun-ozellik-tablo tr,
  .ada-urun-ozellik-tablo th,
  .ada-urun-ozellik-tablo td {
    display: block;
    width: auto;
  }

  .ada-urun-ozellik-grup th {
    padding: 11px 14px;
  }

  .ada-urun-ozellik-tablo th[scope="row"] {
    /* 🪤 `width:auto` BURADA TEKRARLANMAK ZORUNDA. Yukaridaki toplu kural
       `.ada-urun-ozellik-tablo th` (0,1,1) ozgullugunde; masaustu kurali ise
       `th[scope="row"]` (0,2,1) - yani DAHA GUCLU ve `width:46%` medya
       sorgusuna ragmen kazaniyordu. Olculdu: 512px'te deger tam genislik
       alirken etiket 211px'te kaliyor ve uzun etiketler gereksiz sariliyordu. */
    width: auto;
    padding: 11px 14px 0;
    border-right: 0;
    border-bottom: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--ada-40);
  }
  .ada-urun-ozellik-tablo td {
    padding: 2px 14px 11px;
    font-size: 14px;
    color: var(--ada-95);
    border-bottom: 1px solid var(--ada-10);
  }

  /* Blok duzende "son satir" secicisi hucreye degil SATIRA bakmali. */
  .ada-urun-ozellik-tablo tbody:last-child tr:last-child td {
    border-bottom: 0;
  }
}

/* Cok dar cihazlar (320px sinifi) - yalnizca nefes payi kisilir. */
@media (max-width: 360px) {
  .ada-urun-ozellik-grup th,
  .ada-urun-ozellik-tablo th[scope="row"] { padding-left: 11px; padding-right: 11px; }
  .ada-urun-ozellik-tablo td { padding-left: 11px; padding-right: 11px; }
}


/* =============================================================================
   38. SUBELERIMIZ   ·  SUBE-MODULU.md
   -----------------------------------------------------------------------------
   Sube basina bir kart: SOLDA harita, SAGDA bilgiler. Harita solda cunku
   kartin en buyuk gorsel ogesi o; goz once "nerede" sorusunu cevapliyor.

   🪤 IZGARA `minmax(0, …)` ILE. Sag sutuna `1fr` verip birakmak yetmiyor:
   grid ogesinin varsayilan `min-width:auto` degeri, icindeki uzun bir adres
   ya da e-posta yuzunden sutunu icerige gore buyutuyor ve kart tasiyordu.
   `minmax(0,1fr)` o tabani sifirlar.
   ========================================================================== */

.ada-sube {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 72px) 20px clamp(56px, 6vw, 96px);
  box-sizing: border-box;
  background: var(--ada-00);
}

.ada-sube-giris {
  max-width: 720px;
  margin: 0 auto clamp(30px, 4vw, 52px);
  text-align: center;
}
.ada-sube-giris .ada-bolum-spot { margin-top: 4px; }

/* --- Kart ----------------------------------------------------------------- */
.ada-sube-kart {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 0;
  margin-bottom: clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--ada-20);
  border-radius: var(--ada-r-lg);
  overflow: hidden;
  background: var(--ada-00);
  /* Capa ile gelindiginde (#sube-kadikoy) baslik sabit basligin altinda
     kalmasin. */
  scroll-margin-top: 90px;
}
.ada-sube-kart:last-child { margin-bottom: 0; }

/* --- Harita / gorsel ------------------------------------------------------ */
.ada-sube-harita {
  position: relative;
  min-height: 260px;
  background: var(--ada-05);
}
.ada-sube-harita iframe,
.ada-sube-harita img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
}

/* --- Govde ---------------------------------------------------------------- */
.ada-sube-govde {
  min-width: 0;                 /* uzun adres sutunu tasirmasin */
  padding: clamp(20px, 2.6vw, 30px);
}

.ada-sube-ad {
  font-family: 'Raleway', 'Open Sans', Arial, sans-serif;
  font-size: clamp(1.125rem, 1.02rem + .5vw, 1.375rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ada-95);
  margin: 0 0 8px;
}
.ada-sube-sehir {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--ada-vurgu-05);
  color: var(--ada-vurgu-koyu);
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .03em;
  vertical-align: middle;
}

/* --- Su an acik / kapali -------------------------------------------------- */
.ada-sube-durum {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 16px;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
}
.ada-sube-durum span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.ada-sube-acik        { color: #2E7D5B; }
.ada-sube-acik span   { background: #2E7D5B; }
.ada-sube-kapali      { color: var(--ada-40); }
.ada-sube-kapali span { background: var(--ada-40); }

/* --- Bilgi listesi --------------------------------------------------------
   `<dl>` bilerek: etiket/deger ciftleri icin dogru anlambilim. Izgarayla iki
   sutuna aciliyor, dar ekranda alt alta iniyor.                              */
.ada-sube-bilgi {
  display: grid;
  grid-template-columns: minmax(0, 130px) minmax(0, 1fr);
  gap: 10px 16px;
  margin: 0 0 20px;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
}
.ada-sube-bilgi dt {
  margin: 0;
  color: var(--ada-40);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding-top: 2px;
}
.ada-sube-bilgi dd {
  margin: 0;
  min-width: 0;
  color: var(--ada-80);
  overflow-wrap: anywhere;      /* uzun e-posta/adres kutuyu tasirmasin */
}
.ada-sube-bilgi address { font-style: normal; margin: 0; }
.ada-sube-bilgi a { color: var(--ada-80); text-decoration: none; }
.ada-sube-bilgi a:hover { color: var(--ada-vurgu-koyu); text-decoration: underline; }
.ada-sube-bilgi dd a + a::before {
  content: '·';
  margin: 0 7px;
  color: var(--ada-40);
}

/* --- Calisma saatleri ----------------------------------------------------- */
.ada-sube-saat { list-style: none; margin: 0; padding: 0; }
.ada-sube-saat li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 3px 0;
  border-bottom: 1px dotted var(--ada-10);
}
.ada-sube-saat li:last-child { border-bottom: 0; }
.ada-sube-saat span { color: var(--ada-60); }
.ada-sube-saat b { font-weight: 600; color: var(--ada-95); white-space: nowrap; }

/* --- Dugmeler ------------------------------------------------------------- */
.ada-sube-aksiyon { display: flex; flex-wrap: wrap; gap: 8px; }
.ada-sube-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 18px;
  border: 1px solid var(--ada-20);
  border-radius: var(--ada-r-sm);
  background: var(--ada-00);
  color: var(--ada-80);
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--ada-sure-hizli) var(--ada-egri),
              border-color var(--ada-sure-hizli) var(--ada-egri),
              color var(--ada-sure-hizli) var(--ada-egri);
}
.ada-sube-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
.ada-sube-btn:hover {
  background: var(--ada-vurgu-05);
  border-color: var(--ada-vurgu);
  color: var(--ada-vurgu-koyu);
  text-decoration: none;
}
.ada-sube-btn:focus-visible { outline: 2px solid var(--ada-vurgu); outline-offset: 2px; }
.ada-sube-btn-ana {
  background: var(--ada-vurgu);
  border-color: var(--ada-vurgu);
  color: #fff;
  box-shadow: var(--ada-golge-1);
}
.ada-sube-btn-ana:hover {
  background: var(--ada-vurgu-koyu);
  border-color: var(--ada-vurgu-koyu);
  color: #fff;
}

/* --- Bos durum ------------------------------------------------------------ */
.ada-sube-bos {
  text-align: center;
  padding: clamp(44px, 6vw, 76px) 24px;
  border: 1px dashed var(--ada-20);
  border-radius: var(--ada-r-lg);
  background: var(--ada-05);
}
.ada-sube-bos svg { width: 40px; height: 40px; color: var(--ada-40); }
.ada-sube-bos-baslik {
  font-family: 'Raleway', 'Open Sans', Arial, sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--ada-95);
  margin: 14px 0 6px;
}
.ada-sube-bos-spot {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 14px;
  color: var(--ada-60);
  margin: 0;
}

/* --- Dar ekran ------------------------------------------------------------
   Harita ustte, bilgiler altta. Tek sutuna inerken haritanin yuksekligi de
   kisiliyor - yoksa telefonda ekranin yarisini kaplıyor.                     */
@media (max-width: 860px) {
  .ada-sube-kart { grid-template-columns: minmax(0, 1fr); }
  .ada-sube-harita { min-height: 220px; }
}
@media (max-width: 560px) {
  .ada-sube-harita { min-height: 190px; }
  .ada-sube-bilgi { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .ada-sube-bilgi dt { padding-top: 10px; }
  .ada-sube-bilgi dt:first-child { padding-top: 0; }
  .ada-sube-btn { flex: 1 1 100%; }
}