/* ==========================================================================
   DUZELTME KATMANI — teknik tutarlilik
   Kaynak: 24.09.2026 tasarim olcum raporu (8 sayfa x 7 genislik, docs/olcum-*.png)
   Yuklenme sirasi: fp.css (iskelet) -> tasarim.css (ChatGPT Parca 1) -> bu dosya

   KURAL: Burada YENI GORSEL DIL uretilmez. Yalnizca projede onayli olculer
   (ChatGPT tasarim tokenlari) butun ekranlara tutarli uygulanir ve olcumde
   cikan gercek kusurlar giderilir. ChatGPT Parca 3 (ust/alt sablon) gelince
   bu dosya gozden gecirilip gereksiz kurallar silinecek.
   ========================================================================== */


/* ==========================================================================
   1) BASLIK (h1) OLCEGI — tek olcek
   Bulgu: h1 puntolari sayfaya gore 23 / 27 / 38 / 58 px arasinda geziyordu
   (fp.css iskeletinden kalan .hero h1 38px, .sonuc-ust h1 23px,
   .detay-bilgi h1 27px). Katalog ve sepette h1, ayni sayfadaki bolum h2'sinden
   KUCUK kaliyordu -> baslik hiyerarsi bozuk.
   Kural: sayfa basligi h1 = --fs-h1 (2.15rem..3.65rem).
   Istisna: urun adi sayfa basligi degil, urun adidir -> --fs-h2.
   Bu yuzden secici #icerik ile yuksek ozgulluk kullanilir (fp.css'teki
   .hero h1 / .sonuc-ust h1 / .detay-bilgi h1 kurallarini gecersiz kilar).
   ========================================================================== */

#icerik h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  /* SICAKLIK KATMANI (24.09.2026): -0.03em buyuk puntoda harfleri sikistirip
     "kurumsal/soguk" bir doku veriyordu; tasarim karari -0.15px (bkz. §20). */
  letter-spacing: -0.15px;
}

#icerik .detay-bilgi h1 {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
}

/* Mobil h1 token'i monoton degildi: 768px'te 34.4px iken 520px'te 40.8px'e
   cikiyordu (tasarim.css 13. bolum, 10vw). Yeni deger 768 -> 520 -> 390
   boyunca azalan bir seyir verir. */
@media (max-width: 520px) {
  :root {
    --fs-h1: clamp(1.9rem, 8.6vw, 2.15rem);
    --fs-h2: clamp(1.6rem, 6.4vw, 1.75rem);
  }
}


/* ==========================================================================
   2) HEADER — yukseklik ve mobil yerlesim
   Bulgu: header 1440px'te 71px iken 860/768px'te 179px, 390px'te 264px'e
   cikiyordu (logo yazisi 3 satir, menu 2 satir, her grup ayri satir).
   Header `position:sticky` oldugu icin mobilde ekranin ~%30'u kalici
   olarak header'a gidiyordu.
   Cozum: 1100px altinda 2 satir (logo+arama+sepet / menu) ve 620px altinda
   alt yazi kaldirilir. 860px altinda header sticky degil (icerige yer acar).
   ========================================================================== */

@media (max-width: 1100px) {
  /* Menu width:100% ile kendi satirina gececek; kap satir sarmali olmazsa
     (nowrap) menu ayni satirda kalip arama kutusunu 20px'e eziyordu. */
  .ustbilgi .kap {
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 10px 0;
  }

  .logo {
    flex: 0 0 auto;
  }

  /* 861-1100px: arama kutusu dogal genisliginde kalir (190px) */
  .ust-eylem {
    order: 2;
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    margin-left: auto;
    gap: 8px;
  }

  .menu {
    order: 3;
    width: 100%;
    margin-left: 0;
    /* MENU TEK SATIR (kullanici: "tum cihazlar linkinde de sorun var tasarımsal olarak"):
       burada eski yama "overflow: visible + flex-wrap: wrap" idi → 430px ve altinda
       menu iki satira kiriliyor ve "Tum Cihazlar" ikinci satirda TEK BASINA (aktif
       alt cizgiyle) kaliyordu. Tasarim katmani (tasarim.css @620) zaten
       "overflow-x: auto + flex-wrap: nowrap + white-space: nowrap" ongoruyor
       → ona donuluyor: tek satir, gerekirse yatay kaydirilir, sarma YOK. */
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    gap: 2px 14px;
  }

  .menu a {
    white-space: nowrap;
  }
}

@media (max-width: 860px) {
  /* Logo + arama + sepet tek satirda; kalan yeri arama alir */
  .ust-eylem {
    flex: 1 1 160px;
  }

  .ara {
    flex: 1 1 0;
    min-width: 0;
  }

  /* Sepet butonu ezilip iki satira kiriliyordu (65px yukseklik) */
  .sepet-dugme {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .ara input {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 10px;
  }

  .ara button {
    padding: 0 12px;
  }

  /* Sticky header mobilde icerigi yer; yuksekligi ~%30 ekran etkiliyordu. */
  .ustbilgi {
    position: static;
  }

  .ustserit {
    font-size: 12px;
  }

  .ustserit .kap {
    padding: 7px 0;
  }
}

@media (max-width: 620px) {
  /* Logo tek satir: alt yazi (FOTOKOPI VE OFIS MAKINELERI) gizlenir */
  .logo-yazi small {
    display: none;
  }

  .logo-yazi b {
    font-size: 17px;
  }

  .logo-isaret {
    padding: 3px 6px;
    border-width: 3px;
    border-right-width: 6px;
    font-size: 15px;
  }

  .menu {
    gap: 0 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .menu a {
    padding: 6px 0;
    font-size: 13px;
    white-space: nowrap;
  }

  .sepet-dugme {
    padding: 9px 11px;
  }
}

/* 430px altinda tek satirda logo + arama + sepet icin yer acilir
   (yatay telas yok; yalnizca punto/bosluk kucultulur) */
@media (max-width: 430px) {
  .logo-yazi b {
    font-size: 15.5px;
  }

  .logo {
    gap: 8px;
  }

  .ustbilgi .kap {
    gap: 8px 10px;
  }

  .menu a {
    font-size: 12.5px;
  }

  .ara button {
    padding: 0 9px;
  }

  .sepet-dugme {
    padding: 9px 9px;
  }
}


/* ==========================================================================
   3) OLCek VE YOGUNLUK — ekranlara ozel (kullanici karari 24.09.2026:
   "butonlar fontlar devasa buyuk, cok fazla gereksiz bosluk var", "kartlar cok buyuk")
   Olcum (oncesi):
     ana sayfa 6470px @1440 · 13349px @390 (~35 telefon ekrani)
     hero 659px · bolum dolgusu 80+80px · bolum-baslik alt bosluk 40px
     katalog karti 709px = gorsel 230 + govde 362 + alt 114 (fiyat tek basina 81px)
     h1 58px · fiyat 28px · buton 44px/16px punto
   Hedef: ayni icerik, belirgin sekilde daha kisa ve daha sakin bir olcek.
   Yeni gorsel dil URETILMEZ; ChatGPT tokenlari ekran basina tutarli uygulanir.
   ========================================================================== */

/* --- Temel olcek (masaustu) --------------------------------------------- */
:root {
  --fs-body: 0.9375rem;
  --fs-lg: 1rem;
  --fs-h4: 1.0625rem;
  --fs-h3: 1.1875rem;
  --fs-h2: clamp(1.35rem, 1.6vw, 1.65rem);
  --fs-h1: clamp(1.85rem, 2.5vw, 2.6rem);
  --fs-price: clamp(1.1rem, 1.2vw, 1.3rem);
}

/* Bolum ritmi: 80px -> 48px */
.bolum {
  padding-block: var(--sp-9);
}

.bolum-baslik {
  margin-bottom: var(--sp-6);
}

.bolum-baslik > p {
  font-size: var(--fs-body);
  line-height: 1.6;
}

/* Hero: 104px dolgu + 360px min yukseklik -> nefes alan ama dev olmayan */
.hero-izgara,
.hero-izgara--tek {
  min-height: 0;
  padding-block: clamp(26px, 3.2vw, 44px);
}

.hero p {
  max-width: 620px;
  font-size: var(--fs-lg);
  line-height: 1.65;
}

.hero-dugme {
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

/* Butonlar: 44px/16px -> 40px/14px (dokunmada 44px korunur) */
.btn {
  min-height: 40px;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
}

.btn-kucuk {
  padding: 7px 11px;
  font-size: 0.8125rem;
}

/* Izgara bosluklari: 24px -> 16px */
.izgara,
.izgara-3,
.kutular {
  gap: var(--sp-4);
}

.kutu {
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
}

/* Ürün karti: 709px -> ~430px */
.kart {
  border-radius: var(--radius-md);
}

.kart-gorsel,
.kart-gorsel img {
  height: 156px;
  min-height: 156px;
}

.kart-gorsel img {
  padding: var(--sp-3);
}

.kart-govde {
  gap: 4px;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
}

.kart-govde > small {
  margin-bottom: 2px;
  font-size: 0.6875rem;
}

.kart-govde > h3 {
  margin-bottom: var(--sp-2);
  font-size: 0.9375rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kart-govde > p {
  margin-bottom: var(--sp-3);
  font-size: 0.8125rem;
  /* 24.09.2026 (ChatGPT karari A): kart metni 1.50 -> 1.60.
     13px x 1.60 = 20.8px; 2 satir 39px -> 41.6px. Kart yuksekligini
     sabitlemek icin metin SIKISTIRILMAZ, gercek artis olculur. */
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kart-ozellik {
  gap: 4px;
}

.kart-ozellik .cip,
.etiket-kutu .etiket {
  min-height: 20px;
  padding: 2px 7px;
  font-size: 0.6875rem;
}

.etiket-kutu {
  gap: 4px;
  top: var(--sp-2);
  left: var(--sp-2);
  right: var(--sp-2);
}

.kart-alt {
  min-height: 54px;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
}

.kart-alt .fiyat {
  font-size: var(--fs-price);
  line-height: 1.2;
}

.kart-alt .fiyat small,
.kart-alt .kdv {
  font-size: 0.6875rem;
}

.kart-alt .fiyat-sor {
  min-height: 0;
  font-size: 0.875rem;
}

/* Marka seridi: 116px kutu -> 72px, buyuk logo -> olculu logo */
.marka-btn {
  gap: 0;
  min-height: 72px;
  padding: var(--sp-3);
}

.marka-btn img,
.marka-logo {
  max-height: 32px;
  max-width: 132px;
}

/* Urun detay */
.detay-galeri {
  padding: var(--sp-4);
}

.detay-bilgi {
  padding: var(--sp-5);
}

.detay-fiyat {
  padding: var(--sp-3) 0;
  margin: var(--sp-3) 0;
}

.detay-fiyat .fiyat {
  /* ChatGPT PARCA 8 (24.09.2026): akiskan clamp(1.4rem,1.7vw,1.75rem) 22.4-28px
     arasinda ARA degerler uretiyordu (1355px'te 23,04px). Kanonik 24px'e sabitlendi. */
  font-size: 24px;
}

.minikler img {
  width: 62px;
  height: 48px;
}

.kirinti {
  padding: 10px 0;
}

/* Katalog rayi */
.ic-izgara {
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--sp-4);
  padding: 14px 0 28px;
}

.filtre {
  padding: var(--sp-4);
}

.filtre label {
  padding: 4px 0;
  font-size: 0.8125rem;
}

/* --- 1280px ve alti: dizustu ------------------------------------------- */
@media (max-width: 1280px) {
  :root {
    --fs-h1: 2.05rem;
    --fs-h2: 1.5rem;
    --fs-price: 1.15rem;
  }

  .bolum {
    padding-block: var(--sp-8);
  }
}

/* --- 1024px ve alti: kucuk dizustu / yatay tablet ------------------------ */
@media (max-width: 1024px) {
  :root {
    --fs-h1: 1.85rem;
    --fs-h2: 1.4rem;
    --fs-price: 1.1rem;
  }

  .bolum {
    padding-block: var(--sp-7);
  }

  .bolum-baslik {
    margin-bottom: var(--sp-5);
  }

  .izgara,
  .izgara-3 {
    gap: var(--sp-3);
  }

  .kart-gorsel,
  .kart-gorsel img {
    height: 142px;
    min-height: 142px;
  }

  .ic-izgara {
    grid-template-columns: 196px minmax(0, 1fr);
  }
}

/* --- 860px ve alti: tablet --------------------------------------------- */
@media (max-width: 860px) {
  :root {
    --fs-h1: 1.7rem;
    --fs-h2: 1.3rem;
    --fs-price: 1.0625rem;
  }

  .kap {
    width: min(calc(100% - 32px), var(--olcu));
  }

  .bolum {
    padding-block: var(--sp-6);
  }

  .bolum-baslik {
    max-width: 100%;
    margin-bottom: var(--sp-4);
  }

  .hero-izgara,
  .hero-izgara--tek {
    padding-block: var(--sp-6);
  }

  .kart-gorsel,
  .kart-gorsel img {
    height: 150px;
    min-height: 150px;
  }

  .marka-btn {
    min-height: 64px;
    padding: var(--sp-2) var(--sp-3);
  }

  .marka-btn img,
  .marka-logo {
    max-height: 28px;
    max-width: 108px;
  }

  .detay-bilgi {
    padding: var(--sp-4);
  }

  .ic-izgara {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
    padding-top: 12px;
  }
}

/* --- 767px ve alti: telefon -------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --fs-h1: 1.55rem;
    --fs-h2: 1.2rem;
    --fs-h3: 1.0625rem;
    --fs-price: 1.0625rem;
  }

  .bolum {
    padding-block: var(--sp-5);
  }

  .bolum-baslik {
    margin-bottom: var(--sp-3);
  }

  .bolum-baslik > span {
    margin-bottom: 4px;
    font-size: 0.6875rem;
  }

  .hero-izgara,
  .hero-izgara--tek {
    padding-block: var(--sp-5);
    gap: var(--sp-4);
  }

  /* tek kolonda kart genis: gorsel biraz daha buyuk olabilir */
  .kart-gorsel,
  .kart-gorsel img {
    height: 168px;
    min-height: 168px;
  }

  /* dokunmada 44px hedef korunur */
  .btn {
    min-height: 44px;
    padding: 10px 16px;
  }

  .kart-alt {
    flex-wrap: nowrap;
  }

  .kart-alt .btn {
    width: auto;
    flex: 0 0 auto;
    padding: 9px 13px;
    font-size: 0.8125rem;
  }

  .kart-alt .fiyat {
    font-size: 1.125rem;
  }

  .kutu {
    padding: var(--sp-4);
  }

  .detay-galeri {
    padding: var(--sp-3);
  }

  .detay-bilgi {
    padding: var(--sp-4) var(--sp-3);
  }

  .minikler img {
    width: 56px;
    height: 44px;
  }

  .kutular {
    gap: var(--sp-3);
  }
}

/* --- 520px ve alti: kucuk telefon ------------------------------------- */
@media (max-width: 520px) {
  :root {
    --fs-h1: 1.45rem;
    --fs-h2: 1.15rem;
    --fs-price: 1.0625rem;
  }

  .kap {
    width: calc(100% - 24px);
  }

  .bolum {
    padding-block: 18px;
  }

  .bolum-baslik {
    margin-bottom: var(--sp-3);
  }

  .hero-izgara,
  .hero-izgara--tek {
    padding-block: 18px;
    gap: var(--sp-3);
  }

  .izgara,
  .izgara-3 {
    gap: 12px;
  }

  .kart-gorsel,
  .kart-gorsel img {
    height: 158px;
    min-height: 158px;
  }

  .kart-govde {
    padding: var(--sp-2) var(--sp-3) var(--sp-3);
  }

  .kart-alt {
    padding: var(--sp-2) var(--sp-3);
    min-height: 46px;
  }

  .marka-serit {
    gap: 8px;
  }

  .marka-btn {
    min-height: 56px;
    padding: var(--sp-2);
  }

  .marka-btn img,
  .marka-logo {
    max-height: 24px;
    max-width: 92px;
  }

  .kutu {
    padding: var(--sp-3) var(--sp-3) var(--sp-4);
  }
}

/* --- 430px ve alti ----------------------------------------------------- */
@media (max-width: 430px) {
  :root {
    --fs-h1: 1.35rem;
    --fs-h2: 1.1rem;
  }

  .kart-gorsel,
  .kart-gorsel img {
    height: 148px;
    min-height: 148px;
  }

  .marka-btn img,
  .marka-logo {
    max-height: 22px;
    max-width: 84px;
  }
}


/* ==========================================================================
   4) ALAN KULLANIMI — "tek satira sigabilecek mesajlarin cogu 2 satir",
      "alan kullanim cok hoyratca"
   Olcumle bulunan uc sebep:
   a) Metin kutulari erken sariyordu: .bolum-baslik 760px, .bolum-baslik > p
      680px, .hero p 620px — oysa kapsayici 1180px, yani yer VARDI.
   b) Kart 4 kolonda 277px kaliyordu → baslik, etiket ve FIYAT ("128.000,00 ₺"
      159px isterken 150px kutu) sariyordu; .fiyat-sor 120px kutuya dusup
      2 satira kiriliyordu.
   c) Cok genis ekranda 1180px kapsayici + buyuk yan bosluk hoyrat duruyordu.
   ========================================================================== */

/* a) Erken sarma biter */
.bolum-baslik {
  max-width: 1040px;
}

.bolum-baslik > p {
  max-width: 860px;
}

.hero h1 {
  max-width: 960px;
}

.hero p {
  max-width: 780px;
}

/* c) Genis ekranda kapsayici buyur (1500px+): 1180px -> 1320px */
@media (min-width: 1500px) {
  :root {
    --olcu: 1320px;
  }
}

/* b) Kart izgarasi: sabit 4 kolon (277px) yerine akiskan.
   1180px kapsayicida 3 kolon (~382px), 1500px+ ekranda 4 kolon (~320px). */
.izgara {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* Kart alt satiri: fiyat ve CTA sikismasin, sarmasin */
.kart-alt {
  flex-wrap: wrap;
  row-gap: 6px;
}

.kart-alt .fiyat,
.kart-alt .fiyat-sor {
  white-space: nowrap;
}

/* Kart ust bilgisi tek satirda kalsin (uzunsa uc nokta) */
.kart-govde > small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Listeler ve tablolar daha az satir/satir yuksekligi kullansin */
.kutu li {
  line-height: 1.5;
  margin-bottom: 6px;
}

table th,
table td {
  padding: 8px 10px;
}

/* SSS ve karar kutulari basliklari */
.kutu h3 {
  margin-bottom: var(--sp-2);
  font-size: 1rem;
}

@media (max-width: 767px) {
  .bolum-baslik,
  .bolum-baslik > p,
  .hero h1,
  .hero p {
    max-width: 100%;
  }

  table th,
  table td {
    padding: 7px 8px;
  }
}


/* ==========================================================================
   5) ISKELET DOSYASINDA SABIT KALAN OLCULER (fp.css kazanan kurallar)
   fp.css'te sabit degerle yazilmis uc kural, duzeltme katmaninin tokenlarini
   geciyordu (ozgulluk esit/ustun):
     fp.css:55  .bolum-baslik h2 { font-size: 26px }      -> mobilde h1 (22px)
                                                             h2'den KUCUK kaliyordu
     fp.css:194 .marka-serit .marka-btn { min-height:104px }
     fp.css:56  .bolum-baslik p { max-width:620px; font-size:14px }
   ========================================================================== */

#icerik .bolum-baslik h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  /* SICAKLIK KATMANI: -0.02em (23px'te -0.46px) tasarim karari olan
     -0.15px yerine geciyordu; harf araligi ailesi tek degerde toplandi. */
  letter-spacing: -0.15px;
}

#icerik .bolum-baslik p,
#icerik .bolum-baslik > p {
  max-width: 860px;
  font-size: var(--fs-body);
  line-height: 1.55;
}

.marka-serit .marka-btn {
  min-height: 72px;
  padding: var(--sp-3);
  gap: 0;
  text-align: center;
  line-height: 1.25;
}

.marka-serit .marka-btn img,
.marka-serit .marka-logo {
  max-height: 32px;
  max-width: 132px;
}

@media (max-width: 860px) {
  .marka-serit .marka-btn {
    min-height: 62px;
    padding: var(--sp-2) var(--sp-3);
  }

  .marka-serit .marka-btn img {
    max-height: 28px;
    max-width: 108px;
  }
}

@media (max-width: 520px) {
  .marka-serit .marka-btn {
    min-height: 54px;
    padding: 6px var(--sp-2);
  }

  .marka-serit .marka-btn img {
    max-height: 24px;
    max-width: 92px;
  }
}

/* Mobilde hero butonlari alt alta yerine yan yana (54px tasarruf) */
@media (max-width: 767px) {
  .hero-dugme {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
  }

  .hero-dugme .btn {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    padding-inline: var(--sp-4);
  }
}

/* 404 ve bos durum kutulari da ayni sikiligi kullansin */
@media (max-width: 767px) {
  .bos-kutu {
    padding: var(--sp-5) var(--sp-4);
  }
}


/* ==========================================================================
   6) MOBILDE ERKEN SARMA — olcumle bulunan son iki sebep
   a) fp.css:53 .bolum-baslik{display:flex;justify-content:space-between}
      Mobilde baslik ve aciklama yan yana kalinca aciklama paragrafa 203px
      yer kaliyordu (kapsayici 351px) -> 2 kat sarma.
   b) .tablo mobilde th %38 / td %62 kaliyor ve uzun degerler
      ("Ethernet, USB 2.0, Wi-Fi (opsiyonel), Ai...") 2 satira kiriliyordu.
      Mobilde etiket-ustte/deger-altta yigin duzeni daha az yer kullanir.
   NOT (24.09.2026): Bu blok artik YALNIZ teknik olmayan tablolar icin gecerli
   (marka karsilastirma tablosu, sepet tablosu): secicilere
   ":not(.tablo-teknik)" eklendi. URUN DETAY TEKNIK TABLOSU artik ChatGPT'nin
   PARCA 4 duzenini kullanir → bkz. dosya sonundaki §22 (.tablo-teknik).
   ========================================================================== */

@media (max-width: 767px) {
  .bolum-baslik,
  .bolum-baslik > div {
    display: block;
    width: 100%;
  }

  .bolum-baslik > p,
  #icerik .bolum-baslik p {
    max-width: 100%;
    margin-top: var(--sp-2);
  }

  /* Urun adi mobilde sayfanin en buyuk yazisi olsun (h2 tokeni 18px kaliyordu)
     ChatGPT PARCA 8: 1,25rem = 20px kanonik olcekte yok → 22px (mobil h1 basamagi). */
  #icerik .detay-bilgi h1 {
    font-size: 22px;
    line-height: 1.3;
  }

  /* Teknik OLMAYAN tablolar icin yigin duzen (teknik tablo §22, marka
     karsilastirma tablosu §23'te — ikisi de kendi blogunun sahibi) */
  .tablo:not(.tablo-teknik):not(.tablo-karsilastirma) {
    display: block;
    width: 100%;
  }

  .tablo:not(.tablo-teknik):not(.tablo-karsilastirma) caption {
    padding: 6px 0;
    text-align: left;
  }

  .tablo:not(.tablo-teknik):not(.tablo-karsilastirma) tbody {
    display: block;
  }

  .tablo:not(.tablo-teknik):not(.tablo-karsilastirma) tr {
    display: block;
    padding: 7px 10px;
    border-bottom: 1px solid var(--cizgi);
  }

  .tablo:not(.tablo-teknik):not(.tablo-karsilastirma) tr:first-child {
    border-top: 1px solid var(--cizgi);
  }

  .tablo:not(.tablo-teknik):not(.tablo-karsilastirma) th,
  .tablo:not(.tablo-teknik):not(.tablo-karsilastirma) td {
    display: block;
    width: auto;
    border: 0;
    padding: 0;
    font-size: 0.875rem;
    text-align: left;
  }

  .tablo:not(.tablo-teknik):not(.tablo-karsilastirma) th {
    color: var(--soluk);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.35;
  }

  .tablo:not(.tablo-teknik):not(.tablo-karsilastirma) td {
    line-height: 1.45;
  }
}


/* ==========================================================================
   7) TEKNISYEN SAHNESI — "Servis ve bakim anlasmasi" mesajinin onunde
   Kullanici karari 24.09.2026: "mesajin onunde robotu biraz daha kucultebilirsin"
   (ikinci tur "biraz daha kucultebilirsin teknisyen robotu", ucuncu tur "biraz daha kucult").
   Once: 200px (mobil 120px) — mesajin yaninda fazla baskin duruyordu.
   Simdi: ekran basina 96 / 90 / 82 / 74 / 66 / 58px, oran korunur (uctan uca -52%).
   Yalnizca servis bolumundeki teknisyen sahnesi; atolye sahnesi degismedi.
   (fp.css'te .robot--md{height:220px} var; tasarim.css .robot--teknisyen{height:auto}
    diyerek onu gecersiz kilar — burada ayni sekilde height:auto tutulur.)
   ========================================================================== */

.robot--teknisyen {
  width: 96px;
  height: auto;
  max-width: 100%;
}

@media (max-width: 1280px) {
  .robot--teknisyen {
    width: 90px;
    height: auto;
  }
}

@media (max-width: 1024px) {
  .robot--teknisyen {
    width: 82px;
    height: auto;
  }
}

@media (max-width: 860px) {
  .robot--teknisyen {
    width: 74px;
    height: auto;
  }
}

@media (max-width: 767px) {
  .robot--teknisyen {
    width: 66px;
    height: auto;
  }
}

@media (max-width: 520px) {
  .robot--teknisyen {
    width: 58px;
    height: auto;
  }
}


/* ==========================================================================
   8) BOLUM ETIKETI BUYUR, ALTINDAKI ACIKLAMA KUCULUR
   Kullanici: "firsat urunleri yazisini buyut altindaki yaziyi kucult".
   Iki yerde gecer, ikisi de ayni kurala baglanir:
     a) /firsat-urunleri/ ust blogu:  <span class="etiket">FIRSAT ÜRÜNLERİ</span>
        + hemen altinda aciklama paragrafi.
     b) Bolum basliklari: .bolum-baslik > span (FIRSAT ÜRÜNLERİ, MARKALAR,
        YENİLENMİŞ NEDİR?, STOKTAKİ CİHAZLAR...) + altindaki/sagindaki <p>.
     c) 404 sayfasindaki "Firsat urunleri" kutusu: h3 buyur, p kuculur.
   ========================================================================== */

/* a) Hero ust etiketi: 11px -> 14px (yuksek ozgulluk: fp.css .etiket ve
   duzeltme.css .etiket-kutu .etiket kurallarini guvenle gecer) */
#icerik .hero .etiket,
#icerik .hero span.etiket {
  padding: 5px 11px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* b) Bolum ust yazisi (eyebrow): 11px -> 14px
   MARKUP NOTU: .bolum-baslik > span DEGIL, .bolum-baslik > div > span
   (ic div h2 ile birlikte). Eski secici bu yuzden hic uygulanmiyordu. */
#icerik .bolum-baslik > div > span,
#icerik .bolum-baslik > span {
  margin-bottom: var(--sp-2);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* b) Altindaki aciklama kuculur: 15px -> 13.5px */
#icerik .bolum-baslik > p,
#icerik .bolum-baslik p {
  max-width: 820px;
  /* ChatGPT PARCA 8: 0,8438rem = 13,5008px ARA deger → kanonik 14px */
  font-size: 14px;
  line-height: 1.6;
}

/* a) Hero aciklamasi: 16px -> 14px */
.hero p {
  font-size: 0.875rem;
  line-height: 1.65;
}

/* c) Karar kutulari: baslik buyur, aciklama kuculur */
.kutu h3 {
  margin-bottom: var(--sp-2);
  /* ChatGPT PARCA 8: 1,0625rem = 17px → kanonik 18px */
  font-size: 18px;
  line-height: 1.3;
}

.kutu p,
.kutu li {
  font-size: 0.8125rem;
  line-height: 1.55;
}

@media (max-width: 767px) {
  #icerik .hero .etiket,
  #icerik .bolum-baslik > div > span,
  #icerik .bolum-baslik > span {
    font-size: 0.8125rem;
  }

  .kutu h3 {
    font-size: 1rem;
  }
}


/* ==========================================================================
   9) BUTON YUKSEKLIK STANDARDI — TEK OLCU (kullanici karari 24.09.2026:
   "butun buton yuksekliklerini daraltalim, ayni standart olcude olsun,
   farkli ekranlarda standardi olsun; bir yerde buyuk baska yerde kucuk olmasin")

   Olcum ONCESI (1440px):
     Ara 44 · Sepet 46 · .btn 40 · Filtrele 40 · sayfalama 39.4
     bos sepet .btn 53 (220px kolona sikismis metin 2 satira kiriliyordu)
     marka dosemesi 72 · muze 44 (fp.css) / 44 (tasarim.css) / 40 (duzeltme.css)

   STANDART:
     >= 621px : buton 40px · marka dosemesi 56px
     621-860  : buton 40px · marka dosemesi 52px
     <= 620px : buton 44px · marka dosemesi 48px  (dokunma hedefi korunur)

   Yukseklik TEK degiskenden yonetilir; hicbir ekran/bolum kendi olcusunu
   uretemez. height+min-height+max-height birlikte verilir ki esnek kutu
   (align-items:stretch), kirilan metin veya satir yuksekligi yuksekligi
   degistiremesin.
   ========================================================================== */

:root {
  --btn-h: 40px;
  --btn-h-marka: 56px;
}

@media (max-width: 620px) {
  :root {
    --btn-h: 44px;
    --btn-h-marka: 48px;
  }
}

@media (min-width: 621px) and (max-width: 860px) {
  :root {
    --btn-h-marka: 52px;
  }
}

/* Tek buton ailesi: ayni yukseklik, dikey ortalama, tek satir */
.btn,
.btn-cizgi,
.btn-wa,
.btn-kucuk,
.kart-alt .btn,
.sepet-dugme,
.ara input,
.ara button,
.sayfalama a,
.sayfalama span,
#icerik select,
.sayfa-alt select {
  height: var(--btn-h);
  min-height: var(--btn-h);
  max-height: var(--btn-h);
  padding-top: 0;
  padding-bottom: 0;
  align-self: center;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  white-space: nowrap;
}

/* Marka dosemeleri de ayni ailede: doseme yuksekligi ekran basina tek.
   Logo yuksekligi (32px) degismedigi icin ic dolgu kisilir. */
.marka-serit .marka-btn,
.marka-btn {
  height: var(--btn-h-marka);
  min-height: var(--btn-h-marka);
  max-height: var(--btn-h-marka);
  padding: 6px 8px;
  align-self: center;
}


/* ==========================================================================
   10) URUN FOTOGRAFI STANDARDI — boyut + yerlesim (kullanici karari 24.09.2026:
   "urun fotograflarinin konumlandirmasinda sorun var, ozellikle yenilenmis urun
   kartlarinda etiketlerin altina giriyor. Fotograf boyutlarina ve yerlesimlerine
   bir standart getir.")

   VERI: 112 urun fotosunun TAMAMI 1200x900 = 4:3 → tek oran, tek standart.
   OLCUM ONCESI (1440px): kart foto kutusu 302x156, fotograf 176x132; ancak
     etiket kutusu (20px, ust 12px) fotografi 33px ortuyordu. Ayni ortusme
     1440/1024/860/768/620/520/430/390 ekranlarinin HEPSINDE 33px idi
     (yenilenmis kartlarda 3 etiket oldugu icin daha da gorunur).

   REVIZE (24.09.2026, 2. tur — kullanici: "urun resim yerlesimleri kotu"):
     OLCUM (1440px, oncesi): kart 349px · foto kutusu 349x156 · cizilen fotograf
     yalniz 147x110 (kart genisliginin %42'si) · kutunun ic akisi 36+156=192px
     oldugu icin overflow:hidden fotografin ALT 26px'ini KESIYORDU (110px'lik
     fotografin gorunuru 84px = %76).
     YANI: fotograf kucuk + alttan kesik + makineler arasi %38-%100 olcek farki.

   STANDART (revize):
     1) Fotograf alani artik SABIT YUKSEKLIK DEGIL: oran 4:3, genislik kart
        genisliginden turer → fotograf kart genisligini doldurur, hicbir ekranda
        alt/ust kesilme olmaz (kutu orani = varlik orani = 4:3). Kirpma yok:
        object-fit: contain korunur.
     2) Etiketler icin ust bant AYRILIR (--etiket-bant): bant AKISTA durur
        (position: static) → fotograf etiketin ALTINDA baslar, ortusme matematigi
        yok. Bant yuksekligi butun kartlarda ayni → izgara hizasi korunur.
     3) Yan/alt dolgu 12/10px; kutu orani 4:3 oldugu icin fotograf cizilen
        genislik = kart genisligi - 24px.
   ========================================================================== */

:root {
  --foto-oran: 4 / 3;     /* varlik orani: 112 fotografin tamami 1200x900 */
  --gorsel-h: auto;       /* tasarim katmani bu degiskeni kullaniyor; sabit
                             yukseklik kaldirildi → auto (güvenli geri donus) */
  --etiket-ust: 12px;     /* etiketlerin foto kutusundaki ust boslugu (tasarim) */
  --etiket-h: 20px;       /* tek satir etiket yuksekligi */
  --etiket-bant: calc(var(--etiket-ust) + var(--etiket-h) + 4px);  /* = 36px */
  --foto-yan: 12px;
  --foto-alt: 10px;
}

/* Foto kutusu/link: sabit yukseklik YOK (yukseklik orandan turer).
   tasarim.css'teki "height: var(--gorsel-h)" kurallari gecersiz kalmasin diye
   burada acikca auto yazilir (degisken artik tanimli degil). */
.kart-gorsel,
.kart-gorsel-link,
.kart-gorsel img {
  height: auto;
  min-height: 0;
  max-height: none;
}

.kart-gorsel {
  overflow: hidden;   /* kart kosesi yuvarlatilirsa tasmasin */
}

/* Fotograf alani: 4:3, genislik-gudumlu, yan/alt dolgu linkte */
.kart-gorsel-link {
  display: block;
  padding: 0 var(--foto-yan) var(--foto-alt);
}

/* Fotograf: alani tam doldurur (4:3 = varlik orani), kirpilmaz, ortalanir */
.kart-gorsel img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  vertical-align: top;
  aspect-ratio: var(--foto-oran);
  object-fit: contain;
  object-position: center;
}

/* Etiket bandi: foto alaninin USTUNDE, akista durur (fotografi ortmez).
   Bant yuksekligi sabit (--etiket-bant) → butun kartlarda ayni hiza.
   Sol/sag dolgu fotograf dolgusuyla AYNI (etiket ile fotograf ayni hizada baslar). */
.kart-gorsel .etiket-kutu,
.kart-gorsel .etiket-kutu.etiket-kutu {
  position: static;
  box-sizing: border-box;
  padding: var(--etiket-ust) var(--foto-yan) 4px;
  overflow: hidden;
  align-items: flex-start;
}

.kart-gorsel .etiket-kutu .etiket {
  height: var(--etiket-h);
  min-height: var(--etiket-h);
  display: inline-flex;
  align-items: center;
}

/* Detay galerisi ve kucuk gorseller de ayni 4:3 standardinda:
   - kirpma yok, ortalama (object-fit: contain)
   - HTML'deki width/height oznitelikleri (720x540) ongorusel ipucu olarak
     yuksekligi 540px'e kilitliyordu → kutu ekranlara gore 0.96 / 1.27 / 0.60 gibi
     sacma oranlara dusuyor, 390px'te fotografin %55'i bos bant oluyordu.
     height:auto + aspect-ratio:4/3 ile kutu her ekranda fotografin kendi
     oranina oturur (1440: 521x391 · 390: 325x244). */
.detay-galeri img,
.minikler img {
  height: auto;
  max-height: none;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  object-position: center;
}


/* ==========================================================================
   11) ACILIS SAHNESI — ana sayfa, oturumda bir kez (kullanici karari 24.09.2026:
   "1-2 saniye gorunsun sonra kaybolsun, ana sayfa gorunsun ama carpici bir
   slogani olsun")
   Sahne SAYFAYI ENGELLEMEZ: icerik pesinen cizilir, perde ustunde durur.
   Olcu standardi (ekran basina tek): robot 420 / 340 / 260px · slogan 2 / 1.75
   / 1.375rem · "Atla" dugmesi buton standardinda (--btn-h).
   ========================================================================== */

/* Zemin (kullanici karari 24.09.2026: "bence beyaz zemin daha iyi") -> BEYAZ.
   ⚠️ Kritik detay: robot ve makineler de beyaz oldugu icin duz beyaz zeminde
   siluet kaybolur. Cozum: (1) cok hafif isik gecisi (merkez #fff -> kenar
   #e9eef6), (2) robotun ALFA siluetine oturan yumusak gölge (drop-shadow;
   kutu gölgesi degil, transparan zemin kare olarak gorunmez).
   Diger zemin secenekleri (istenirse tek satir):
   A duz lacivert : background: var(--lacivert); color: var(--metin-ters);
   B lacivert+spot: radial-gradient(125% 95% at 50% 36%, #2f68a8, #164272 45%, #0b2340);
   D izgara doku  : background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size:30px 30px;
   Metin/düğme renkleri beyaz zemine gore ayarlandi. */
.sahne-acik,
.sahne-acik body {
  overflow: hidden;
}

/* ChatGPT PARCA 1/2 olculeri (docs/CHATGPT-TASARIM-PARCA1-2026-09-24.md):
   robot 360/260 · icerik genisligi 680/342 · slogan 36/25 · alt metin 16/14 ·
   dugme 120x40 / 120x44 (yukseklik .btn standardindan --btn-h) */
.acilis-sahnesi {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5) var(--sp-4);
  background: #fff;
  background-image: radial-gradient(120% 90% at 50% 30%, #ffffff 0%, #f7f9fc 60%, #e9eef6 100%);
  color: var(--lacivert);
  text-align: center;
  opacity: 1;
  transition: opacity 240ms ease;
}

.sahne-gidiyor {
  opacity: 0;
}

.acilis-icerik {
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  max-width: 680px;
}

.acilis-gorsel img {
  display: block;
  height: 360px;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  object-fit: contain;
  /* Beyaz robot + beyaz zemin: alfa siluetine oturan gölge (kutu gölgesi degil) */
  filter: drop-shadow(0 16px 26px rgba(18, 52, 91, 0.16));
}

.acilis-metin h2 {
  margin: 0;
  color: var(--lacivert);
  font-size: 36px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.15px;
}

.acilis-metin p {
  margin: var(--sp-2) 0 0;
  color: var(--soluk);
  font-size: 16px;
}

/* Renk/yukseklik .btn standardindan gelir; sahne dügmesi yalnizca genislikte
   standarda bagli (tasarim: 120 x 40 masaustu / 120 x 44 mobil) */
.acilis-atla {
  width: 120px;
  margin-top: var(--sp-2);
}

@media (max-width: 620px) {
  .acilis-icerik {
    max-width: 342px;
    gap: var(--sp-2);
  }

  .acilis-gorsel img {
    height: 260px;
  }

  .acilis-metin h2 {
    font-size: 25px;
  }

  .acilis-metin p {
    font-size: 14px;
  }
}


/* ==========================================================================
   12) MOBIL LISTE — 2 KOLON KOMPAKT KART (ChatGPT PARCA 1/2, bolum 2-3;
   kullanici karari 24.09.2026: mobil katalog/liste yuksekligi 8-9 ekrandan
   5'in altina inecek)
   Olculer (tasarim): kart 169-173px · fotograf alani 148px · etiket bandi 36px ·
   govde ic dolgusu 10px · marka 11px · urun adi 13px · ozellik cipi 11px ·
   fiyat 15px · CTA 44px (--btn-h). Tasarim notu: kartta uzun aciklama olmaz,
   iki ozellik cipi oncelikli.
   ========================================================================== */
@media (max-width: 620px) {
  #icerik .izgara,
  #icerik .izgara-3,
  #icerik .liste-kartlar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* Kart govdesi: 10px dolgu, sik tipografi */
  #icerik .kart-govde {
    gap: 4px;
    padding: 10px;
  }

  #icerik .kart-govde > small {
    font-size: 11px;
  }

  #icerik .kart-govde > h3 {
    font-size: 13px;
    line-height: 1.3;
  }

  /* Tasarim: kartta uzun urun aciklamasi bulunmayacak */
  #icerik .kart-govde > p {
    display: none;
  }

  #icerik .kart-ozellik .cip {
    padding: 2px 6px;
    font-size: 11px;
  }

  /* Tasarim: iki ozellik cipi oncelikli */
  #icerik .kart-ozellik .cip:nth-child(n + 3) {
    display: none;
  }

  /* Dar kartta fiyat ve CTA alt alta (tasarim semasi: fiyat satiri + Incele) */
  #icerik .kart-alt {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px 10px 10px;
  }

  #icerik .kart-alt .btn {
    width: 100%;
  }

  #icerik .kart-alt .fiyat {
    font-size: 15px;
  }

  #icerik .kart-alt .fiyat-sor {
    font-size: 13px;
  }
}


/* ==========================================================================
   13) MOBIL KONTROL SERIDI + KATLANAN FILTRE (ChatGPT PARCA 1/2 bolum 2)
   Olcum: mobilde filtre paneli 1093px yer kapliyordu (5 alan) ve varsayilan
   ACIKTI; sonuclardan once geliyordu. Artik varsayilan kapali, "Filtrele"
   dugmesi aciyor. Sirala serite tasindi (paneldeki kopya mobilde gizli).
   Yalniz <=620px; masaustu duzeni degismez.
   ========================================================================== */

/* Serit masaustunde gizli (masaustu duzeni degismesin) */
#icerik .liste-kontrol {
  display: none;
}
@media (max-width: 620px) {
  #icerik .liste-kontrol {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
  }
  #icerik .liste-kontrol .gizli-etiket {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  #icerik .liste-arama {
    display: flex;
    gap: 8px;
  }

  #icerik .liste-arama input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    height: var(--btn-h);
    padding: 0 10px;
    border: 1px solid var(--cizgi);
    border-radius: var(--radius-sm);
    font-size: 13px;
  }

  #icerik .liste-arama .btn {
    flex: 0 0 auto;
  }

  #icerik .liste-araclar {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* TASARIM CATISMASI (bulundu 24.09.2026): tasarim.css ".liste-araclar .btn"
     icin width:100% veriyor → "Filtrele" tek basina satiri aliyor, "Sirala"
     0px'e sikisiyor ve select 14px yatay tasma yapiyordu (mobilde yatay kaydirma).
     Cozum: iki oge YAN YANA ve esit paylasimli. */
  #icerik .liste-araclar .filtre-ac {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }

  #icerik .liste-siralama {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  #icerik .liste-siralama label {
    font-size: 12px;
    color: var(--soluk);
  }

  #icerik .liste-siralama select {
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    height: var(--btn-h);
    padding: 0 8px;
    border: 1px solid var(--cizgi);
    border-radius: var(--radius-sm);
    background: #fff;
    font-size: 13px;
  }

  /* Filtre paneli mobilde varsayilan KAPALI */
  #icerik .ic-izgara > aside.filtre {
    display: none;
  }

  #icerik .ic-izgara > aside.filtre.acik {
    display: block;
    margin-bottom: var(--sp-4);
  }

  /* Siralamayi seritten yonetiyoruz: paneldeki kopya gizli */
  #icerik aside.filtre .f-siralama {
    display: none;
  }
}


/* ==========================================================================
   14) URUN DETAY — MOBIL ONCELIKLI YAPI (ChatGPT PARCA 1/2 bolum 4)
   - Uzun bolumler (yapilan islemler / teknik tablo / uzun aciklama) <details>
     ile katlanir. VARSAYILAN ACIK; yalniz <=620px'te JS kapatiyor →
     JS yoksa davranis degismez, icerik DOM'da kalir (SEO).
   - Mobilde bilgi kolonu sirasi: ad → model → FIYAT → DUGMELER → stok →
     aciklama → marka (tasarim: "foto + fiyat/CTA once").
   ========================================================================== */

details.katlanir > summary {
  position: relative;
  padding-right: 34px;
  list-style: none;
  cursor: pointer;
}

details.katlanir > summary::-webkit-details-marker {
  display: none;
}

details.katlanir > summary::after {
  content: '+';
  position: absolute;
  top: 2px;
  right: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--cizgi);
  border-radius: var(--radius-sm);
  color: var(--lacivert);
  font-weight: 600;
  line-height: 1;
}

details.katlanir[open] > summary::after {
  content: '−';
}

details.katlanir > summary .bolum-baslik {
  margin-bottom: 0;
}

@media (max-width: 620px) {
  #icerik .detay-bilgi {
    display: flex;
    flex-direction: column;
  }

  #icerik .detay-bilgi > * {
    order: 9;
  }

  #icerik .detay-bilgi > h1 {
    order: 1;
  }

  #icerik .detay-bilgi > .detay-fiyat {
    order: 2;
  }

  #icerik .detay-bilgi > .detay-dugme {
    order: 3;
  }

  #icerik .detay-bilgi > .stok {
    order: 4;
  }

  #icerik .detay-bilgi > .model {
    order: 5;
  }

  #icerik .detay-bilgi > .description {
    order: 6;
  }

  #icerik .detay-bilgi > .marka-not {
    order: 7;
  }

  #icerik .detay-bilgi > p:last-child {
    order: 8;
  }
}


/* ==========================================================================
   15) BOS DURUMLAR + MOBIL YAPISKAN SERIT + "FIYAT SORUNUZ"
   Tasarim: ChatGPT PARCA 1/2 bolum 5 ve son kararlar (02, 03).
   - Bos sepet / bos arama: robot KULLANILMAZ; tam genislik, 560px ortalanmis.
   - Mobil kontrol seridi YAPISKAN (tasarim karari 02).
   - "Fiyat Sorunuz": sakin lacivert metin, CTA ayri (tasarim karari 03).
   ========================================================================== */

.bos-kutu {
  max-width: 560px;
  margin: var(--sp-5) auto;
  text-align: center;
}

.bos-kutu h2 {
  margin: 0 0 var(--sp-2);
  color: var(--lacivert);
}

.bos-kutu p {
  margin: 0 0 var(--sp-4);
  color: var(--soluk);
}

/* Bos simge: CSS ile cizilen bos kutu (yeni gorsel/ikon gerekmez) */
.bos-simge {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--sp-4);
  border: 2px dashed var(--cizgi);
  border-radius: var(--radius-md);
  position: relative;
}

.bos-simge::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 18px;
  height: 2px;
  background: var(--cizgi);
}

/* Bos sepette iki kolonlu yerlesim devre disi */
#icerik .ic-izgara.tek-kolon {
  display: block;
}

/* "Fiyat Sorunuz": sakin lacivert metin */
#icerik .fiyat-sor {
  color: var(--lacivert);
  font-weight: 600;
}

#icerik .kart-alt .fiyat-sor small {
  display: block;
  color: var(--soluk);
  font-size: 11px;
  font-weight: 600;
}

/* 404 sayfasi (tasarim: .hata-sayfasi / .hata-kod / .hata-eylemler) */
#icerik .hata-sayfasi {
  padding: var(--sp-6) 0;
  text-align: center;
}

#icerik .hata-icerik {
  max-width: 560px;
  margin: 0 auto;
}

#icerik .hata-kod {
  display: block;
  color: var(--cizgi);
  font-size: 72px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
}

#icerik .hata-icerik h1 {
  margin: var(--sp-3) 0 var(--sp-2);
}

#icerik .hata-icerik p {
  margin: 0 0 var(--sp-4);
  color: var(--soluk);
}

#icerik .hata-eylemler {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
}

@media (max-width: 620px) {
  /* Tasarim karari 02: mobilde arama/filtre seridi yapiskan */
  #icerik .liste-kontrol {
    position: sticky;
    top: 0;
    z-index: 40;
    padding: 8px 0;
    background: #fff;
    border-bottom: 1px solid var(--cizgi);
  }

  #icerik .hata-kod {
    font-size: 56px;
  }
}


/* ==========================================================================
   16) LOGO ISARETI KALDIRILDI (kullanici karari 24.09.2026: "o logoyu kaldir")

   OLCUM (oncesi): span.logo-isaret = 49x47px · arka rgb(18,52,91) navy +
   kenarlik 4px sol / 8px sag / 4px alt / 4px ust rgb(23,105,170) mavi +
   radius 10px + beyaz "DÖ" → navy karenin cevresinde MAVI BIR KONTUR olusuyordu
   (kullanicinin ilk bildirdigi "sol basta kontur" izlenimi).

   COZUM: isaret gizlenir; marka yazisi ("Dörtler Ofis" + alt satir) kalir.
   Geri almak icin bu blogu silmek yeterli.
   ========================================================================== */
.logo-isaret {
  display: none;
}

/* ==========================================================================
   19) FOOTER LISTELERI 2 SUTUN (kullanici karari 24.09.2026:
   "footerda markalar cok uzamis asagi dogru, markalari 2 sutun yapalim")

   OLCUM (oncesi, 1440px): .altbilgi-izgara 4 kolon (306px) ama "Markalar"
   listesi TEK kolon · 11 baglanti · 298px yukseklik → footer 547px.
   620px ve altinda bu liste zaten 2 kolondu (PARCA 2.1 / karar C); simdi TUM
   genisliklerde 2 kolon. Marka adlari ~147px'lik alt kolona sigiyor
   (en uzun: "Konica Minolta"). Baglanti yukseklikleri (36/44px dokunma alani)
   ve okuma sirasi degismez: satir-major (sol→sag, sonra asagi).
   ========================================================================== */
.altbilgi-izgara ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
}

.altbilgi-izgara li {
  min-width: 0;
}

/* Uzun etiketler metin ORTASINDAN kirilmasin: bu uc baglanti tam satir alir.
   (302px'lik footer blogu 2 sutuna bolununce alt sutun ~145px kaliyor; etiket
   genislikleri 158/148/150px → "Firsat Urunleri / (yenilenmis)" gibi kirilma
   olusuyordu. Tam satirda tek satir kalir, 2 sutun duzeni bozulmaz.) */
.altbilgi-izgara li:has(> a[href^="/firsat-urunleri/"]),
.altbilgi-izgara li:has(> a[href^="/gizlilik-politikasi/"]),
.altbilgi-izgara li:has(> a[href^="/mesafeli-satis/"]) {
  grid-column: 1 / -1;
}

/* ==========================================================================
   18) AKTIF MENU LINKINDEKI NAVY CIZGILER KALDIRILDI (kullanici karari
   24.09.2026: "tum cihazlar linkinin altinda ve solunda navy cizgi var sabit
   her durumda onu kaldir, diger linkler gibi olmali")

   OLCUM (oncesi, /katalog/):
     .menu a.aktif → border-bottom: 3px solid rgb(23,105,170)
                     box-shadow: inset 0 -2px rgb(23,105,170)
   → alt kenarda UST USTE IKI navy cizgi (3+2 = 5px kalin bant). Link dolgusu
   yatayda 2px oldugu icin bant metnin SOLUNDAN da 2px tasiyordu. Diger
   linklerde alt kenarlik seffaf → yalnizca bu link "cizgili" gorunuyordu.

   COZUM: aktif linkte KALICI cizgi yok. Fare ile uzerine gelince cizgi cikmaya
   devam eder (fp.css hover kurali korunur) → artik diger linklerle ayni
   davranis. Aktif sayfa ayrimi link RENGINDE kalir (rgb(16,85,141)) ve
   erisilebilirlik icin `aria-current`/`.aktif` sinifi degismedi.
   ========================================================================== */
/* 24.09.2026 (ChatGPT karari 2): menu hiyerarsisi AGIRLIKLA kurulur —
   normal linkler 500, aktif link 600. Kurallar DOSYANIN SONUNDA (bkz. §21);
   orada olmasi zorunludur cunku asagidaki global 600 listesi ".menu a"
   secicisini de iceriyor ve ayni ozgullukte oldugu icin kaynak sirasi
   belirleyici — buraya yazilan 500 kurali eziliyordu (olculdu).
   Renk ayrimi aynen kalir; hover cizgisi YALNIZ hover'da.
   NOT: font artik gercek degisken agirlik ciziyor (tasarim.css
   @font-face font-weight:200 900); oncesinde 600 incelik gorunuyordu. */
.menu a.aktif {
  border-bottom-color: transparent;
  box-shadow: none;
  font-weight: 600;
}

/* Aktif linkte KALICI cizgi yok ama fare ile uzerine gelince cizgi cikar →
   diger linklerle birebir ayni davranis. (fp.css'teki ".menu a:hover,.menu a.aktif"
   kurali ile ".menu a.aktif" AYNI ozgulluktedir; bu dosya sonra yuklendigi icin
   hover'i da kapatmisti — bu yuzden hover acikca geri verilir.) */
.menu a.aktif:hover {
  border-bottom-color: var(--mavi);
}

/* Kucuk telefonlar: menu TEK SATIR ve KAYDIRMASIZ sigsin.
   Olcum (390px, once): menu icerigi 385px · ekran 375px → aktif "Tum Cihazlar"
   linki sagdan 22px tasiyor, yatay kaydirma gerekiyordu. Bosluk 10→8px ve yazi
   13→12.5px ile ~345px'e iner, kaydirma kalkar (359px'te de sigar). */
/* Kucuk telefonlar: menu degerleri TASARIM katmanindan alinir (<=620px: yazi 13px,
   bosluk 10px). Kirpma sorunu YAZI KUCULTMEKLE degil DAVRANISLA cozuldu:
   fp.js sayfa acilisinda aktif sekmeyi yatay kaydirarak gorunume getirir
   (menu tek satir + overflow-x: auto = tasarim sozlesmesi). */


/* ==========================================================================
   17) KUTU SOL SERITLERI KALDIRILDI (kullanici karari 24.09.2026:
   "bazi kartlarda sol basta kontur var onlari kaldir" → acik olan urun
   sayfasindaki "Kim icin uygun?" karti).

   OLCUM (oncesi, canli): .kutu.uygun → border-left 4px solid rgb(22,129,92);
   .kutu.uygun-degil → border-left 4px solid rgb(146,113,87). Bu kutular
   urun detayinda, ana sayfada ("Neden bizden almalisiniz?") ve firsat
   sayfasinda gorunuyor → sol bastaki renkli serit "kontur" gibi duruyordu.

   COZUM: kutu kenarligi artik DORT YONDEN AYNI (1px). Ayrimi zemin rengi
   (fp.css: #f2faf6 / #fdf5f4) ve kutu ici baslik tasiyor. Renkler fp.css'teki
   border-color degerleriyle birebir ayni → kutu cercevesi tek bicim.
   ========================================================================== */
.kutu.uygun {
  border-left: 1px solid #cbe8d9;
}

.kutu.uygun-degil {
  border-left: 1px solid #f0d6d2;
}


/* ==========================================================================
   20) AGIRLIK TAVANI — yalnizca 400 ve 600 kesimleri yuklu
   ChatGPT sicaklik karari (24.09.2026): "Source Sans 3 400 + 600; 700 kullanma."

   BULGU (canli olcum, 1440px): CSS'te 81 oge hala 700/800/900 istiyordu
   (32x .cip, 12x kart alt yazisi, 8x .etiket, hero etiketi, bolum ust yazilari,
   .fiyat, .tablo th ...). Fontta 700 kesimi OLMADIGI icin tarayici "sentetik
   kalin" uretiyordu: harfler sisiyor, kontrast sertlesiyor → sayfa soguk ve
   sahte duruyordu. Sicaklik hissini bozan asil sebep buydu.

   COZUM:
     a) Gorunur tum 700+ kurallar 600'e cekildi (mirror seciciler: ayni ozgulluk,
        duzeltme.css en son yuklendigi icin kazaniyor).
     b) Guvence: font-synthesis-weight: none. Listede olmayan / shorthand
        (font: 700 ...) ile yazan bir kural kalirsa tarayici 700'u UYDURMAZ,
        600'e duser → hicbir yerde sahte kalinlasma olmaz.

   BEKLENEN OLCUM: 700+ isteyen oge 0 · kalin metin gercek 600 · kontrast korunur.
   ========================================================================== */

body {
  font-synthesis-weight: none;
}

/* PARCA 9 (24.09.2026): global agirlik listesi KALDIRILDI.
   Agirliklar artik kaynak katmanda tanimli: fp.css sozlesme blogu + bilesen
   kurallari (19 kural -> 600, .menu a -> 500) ve duzeltme.css §21 (.menu a.aktif 600). */


/* ==========================================================================
   21) MENU HIYERARSISI — normal 500 / aktif 600 (ChatGPT karari 2, 24.09.2026)
   "Menu tamamen 600 oldugu icin aktif link ayirt edilemiyordu." 700 yerine
   tabani 500'e indirip aktif 600'de birakiyoruz: navigasyon bagirmaz, aktif
   bolum dogal olarak one cikar. Renk ayrimi degismez (normal lacivert
   rgb(18,52,91) / aktif mavi rgb(16,85,141)); hover cizgisi yalniz hover'da.

   DIKKAT — BU BLOK DOSYANIN SONUNDA OLMAK ZORUNDA: hemen yukaridaki global
   agirlik listesi ".menu a" secicisini de icerir; iki kural AYNI ozgullukte
   (0,1,1) oldugu icin yalnizca kaynak sirasi belirleyicidir. Blok yukarida
   (eski yeri) iken 500 kurali eziliyordu ve olcumde tum linkler 600 cikti.
   ========================================================================== */
.menu a {
  font-weight: 500;
}

.menu a.aktif {
  font-weight: 600;
}

/* ==========================================================================
   22) URUN DETAY — TEKNIK TABLO DUZENI (ChatGPT PARCA 4, 24.09.2026)
   Teslim: docs/CHATGPT-TASARIM-PARCA4-TEKNIK-TABLO-2026-09-24.md

   GERCEK DOM ILISKISI (olculdu, ChatGPT'nin sarti): tablo ".detay" icinde
   DEGIL → "table.tablo-teknik < details.katlanir < section.bolum < div.kap < main".
   Bu yuzden ChatGPT'nin ".detay .tablo" secicisi YERINE kapsamli kanca sinif
   ".tablo-teknik" kullanildi (includes/kart.php → ozellik_tablosu()).
   Boylece marka karsilastirma ve sepet tablolari (yalniz ".tablo") etkilenmez.

   DUZEN: masaustu/tablet iki kolon (34 / 66), mobil ≤620px etiket-ustte /
   deger-altta. Dikey ayrac YOK, zebra YOK, hover YOK; yalniz alt yatay ayrac.
   fp.css varsayilanlari (hucre cercevesi, th zemini, zebra) burada NOTRALLENIR.

   ESKI §6 blogu (≤767px) teknik tabloyu da blok yapiyordu → secicilerden
   ":not(.tablo-teknik)" ile cikarildi; teknik tablo artik bu bolumun sahibi.

   DIKKAT: Bu blok dosyanin SONUNDA olmak zorunda (ayni ozgullukte ust kurallar
   var; kaynak sirasi belirleyici — §21'de ayni tuzak yasandi).
   ========================================================================== */

/* --- Masaustu / tablet --- */
.tablo-teknik {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: #fff;
}

.tablo-teknik caption {
  padding: 14px 0 8px;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
}

.tablo-teknik th,
.tablo-teknik td {
  box-sizing: border-box;
  height: 46px; /* satir min. yuksekligi (tablo hucresinde height = min) */
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid var(--cizgi);
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: normal;
}

.tablo-teknik th {
  width: 34%;
  color: #6F6A63;
  background: transparent;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;
  text-align: left;
}

.tablo-teknik td {
  width: 66%;
  color: var(--metin);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 400;
}

/* fp.css zebra + th zemini teknik tabloda notrallenir */
.tablo-teknik tr:nth-child(even) td {
  background: transparent;
}

/* SADECE SON TABLO'nun son satiri cizgisiz. (ChatGPT tasarimi "tr:last-child"
   diyordu; ama her GRUP ayri bir <table> ve her tabloda 1 satir var → literal
   uygulama TUM ayraclari siliyordu (olculdu: yatayCerceve 0px). Tasarimin
   niyeti: satirlar ayracla ayrilir, tablo cizgiyle BITMEZ.) */
.tablo-teknik:last-of-type tr:last-child > * {
  border-bottom: 0;
}

/* --- Mobil ≤620px: etiket ustte, deger altta --- */
@media (max-width: 620px) {
  .tablo-teknik,
  .tablo-teknik tbody,
  .tablo-teknik tr,
  .tablo-teknik th,
  .tablo-teknik td {
    display: block;
    width: 100%;
  }

  .tablo-teknik th,
  .tablo-teknik td {
    height: auto;
  }

  .tablo-teknik tr {
    padding: 11px 0 12px;
    border: 0;
    border-bottom: 1px solid var(--cizgi);
  }

  .tablo-teknik tr:first-child {
    border-top: 0;
  }

  .tablo-teknik tr:last-child {
    border-bottom: 1px solid var(--cizgi);
  }

  .tablo-teknik:last-of-type tr:last-child {
    border-bottom: 0;
  }

  .tablo-teknik th,
  .tablo-teknik td {
    padding: 0 14px;
    border: 0;
  }

  .tablo-teknik th {
    margin-bottom: 4px;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
  }

  .tablo-teknik td {
    font-size: 14px;
    line-height: 1.50;
    font-weight: 400;
    overflow-wrap: anywhere;
  }
}

/* ==========================================================================
   23) MARKA SAYFASI — HERO LOGOSU + KARSILASTIRMA TABLOSU
   (ChatGPT PARCA 5, 24.09.2026)

   Kapsam: (a) marka hero logosu buyur, (b) markalar arasi karsilastirma
   tablosu teknik tablo disiplinine yaklasir ama kendi olculeriyle (24/76).
   Sira degisikligi — karsilastirma uygunluk kararindan SONRA gelir —
   marka/index.php icinde yapildi (mobil ve masaustu ayni anlamsal sira).

   Olcum (oncesi): 390px'te marka logosu 38x22px ciziliyordu (kaynak 240x72);
   mobil sayfa 4816px, son (karar) bolumu tek basina 1714px idi.

   DIKKAT: bu blok dosyanin SONUNDA olmalidir (ayni ozgullukte ust kurallar
   var; kaynak sirasi belirleyici — §21/§22'de ayni tuzak yasandi).
   ========================================================================== */

/* --- (a) Marka logosu: hero'da marka imzasi gibi davranir ---
   Kart/cerceve/golge YOK; kaynak 240x72 yeterli (yeni gorsel gerekmez). */
.marka-logo--buyuk {
  width: auto;
  height: auto;
  max-width: 180px;
  max-height: 54px;
  object-fit: contain;
}

@media (max-width: 620px) {
  .marka-logo--buyuk {
    max-width: 132px;
    max-height: 40px;
    margin-bottom: 12px; /* logo ile h1 arasi */
  }
}

/* Logo buyudu (390: 22 -> 40px) → hero yuksekligi ARTMAZ; fark MEVCUT
   bosluktan karsilanir (ChatGPT: "Hero'nun yuksekligini logo buyudu diye
   artirmayin"). Olcum hedefi: 390 → 379px (once) · 1440 → 394px (once). */
section.hero:has(.marka-logo--buyuk) .marka-logo--buyuk {
  margin-bottom: 8px;
}

section.hero:has(.marka-logo--buyuk) h1 {
  margin-bottom: 10px;
}

section.hero:has(.marka-logo--buyuk) p {
  margin-bottom: 8px;
}

/* Buton blogunun ust boslugu 24 -> 16px: kalan fark da mevcut bosluktan
   karsilanir (logo +18px buyudu; hero hedefi 390: 379 · 1440: 394). */
section.hero:has(.marka-logo--buyuk) .hero-dugme {
  margin-top: 16px;
}

@media (max-width: 620px) {
  section.hero:has(.marka-logo--buyuk) .marka-logo--buyuk {
    margin-bottom: 12px;
  }

  section.hero:has(.marka-logo--buyuk) h1 {
    margin-bottom: 8px;
  }

  section.hero:has(.marka-logo--buyuk) p {
    margin-bottom: 6px;
  }
}

/* --- (b) Markalar arasi karsilastirma tablosu: masaustu / tablet --- */
.tablo-karsilastirma {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: #fff;
}

.tablo-karsilastirma caption {
  padding: 0 0 8px;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
}

.tablo-karsilastirma th,
.tablo-karsilastirma td {
  box-sizing: border-box;
  height: 48px; /* satir min. yuksekligi (tablo hucresinde height = min) */
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid var(--cizgi);
  vertical-align: top;
  overflow-wrap: anywhere;
}

.tablo-karsilastirma th {
  width: 24%;
  color: #6F6A63;
  background: transparent;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;
  text-align: left;
}

.tablo-karsilastirma td {
  width: 76%;
  color: var(--metin);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 400;
}

/* fp.css zebra + th zemini karsilastirma tablosunda notrallenir */
.tablo-karsilastirma tr:nth-child(even) td {
  background: transparent;
}

.tablo-karsilastirma tr:last-child > * {
  border-bottom: 0;
}

/* --- Mobil ≤620px: marka ustte, aciklama altta --- */
@media (max-width: 620px) {
  .tablo-karsilastirma,
  .tablo-karsilastirma tbody,
  .tablo-karsilastirma tr,
  .tablo-karsilastirma th,
  .tablo-karsilastirma td {
    display: block;
    width: 100%;
  }

  .tablo-karsilastirma th,
  .tablo-karsilastirma td {
    height: auto;
  }

  .tablo-karsilastirma tr {
    padding: 11px 0 12px;
    border: 0;
    border-bottom: 1px solid var(--cizgi);
  }

  .tablo-karsilastirma tr:first-child {
    border-top: 0;
  }

  .tablo-karsilastirma tr:last-child {
    border-bottom: 0;
  }

  .tablo-karsilastirma th,
  .tablo-karsilastirma td {
    padding: 0 14px;
    border: 0;
  }

  .tablo-karsilastirma th {
    margin-bottom: 4px;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 600;
  }

  .tablo-karsilastirma td {
    font-size: 14px;
    line-height: 1.50;
    font-weight: 400;
  }

  /* Ilk 4 marka gorunur; kalan 6 marka katlanir ile acilir.
     Mevcut sozlesme: icerik DOM'da kalir, JS ≤620px'te <details> kapali tutar. */
  .bolum:has(details.katlanir[data-katlanir-mobil="4"]:not([open])) .tablo-karsilastirma tbody tr:nth-child(5)~tr {
    display: none;
  }
}

/* ==========================================================================
   26) KANONIK YAZI OLCEGI + KATLANIR BASLIK AGIRLIGI
   (ChatGPT PARCA 8, 24.09.2026 — kapsam yalniz Bulgu 1 + Bulgu 3)

   BULGU 1: tasarim katmani .katlanir summary'ye 16px/750 veriyordu; 750 tipografi
   kilidiyle celisen eski bir kalinti. Sozlesme: genel katlanir 15px/600 ·
   .sss summary 15px/600 · footer Markalar summary 14px/600 · dokunma alani 44px.

   BULGU 3: kanonik olcek 11·12·13·14·15·16·18·22·24·28·36.
    12,5 → 13 · 13,5/13,5008 → 14 · 17/17,6 → 18 · 21,6 → 22 · 23,04 → 24
   Mevcut TAM degerler korunur; 36px h1 kucultulmez; LINE-HEIGHT'lar
   degistirilmez (kart metni 1.60 dahil).

   DIKKAT: blok dosyanin SONUNDA olmali (ayni ozgullukte ust kurallar var).
   ========================================================================== */

/* --- Bulgu 1: katlanir basliklari --- */
.katlanir > summary {
  font-size: 15px;
  font-weight: 600;
}

/* Footer summary (14px/600) §25'te tanimli; ozgullugu daha yuksek → etkilenmez. */

/* --- Bulgu 3: eski katmandan gelen ara degerler → kanonik --- */

/* 12,5 → 13 */
.kirinti,
.detay-fiyat .kdv,
.adim span,
.asistan-form label,
.altbilgi-alt {
  font-size: 13px;
}

/* 13,5 → 14 (menu kucuk ekranda 13px kanonik oldugu icin kapsam disi) */
@media (min-width: 621px) {
  .menu a {
    font-size: 14px;
  }
}

.filtre label,
.filtre select,
.sonuc-sayi,
.stok,
.adim b,
.asistan-form select,
.altbilgi ul,
.altbilgi p {
  font-size: 14px;
}

/* 17 / 17,6 → 18: kart, liste ve detay fiyatlari (kapsam genis tutuldu;
   ".kart-alt .fiyat" gibi alt seciciler eski ara degeri geri getiriyordu) */
#icerik .fiyat,
.kart-alt .fiyat,
.kart .fiyat {
  font-size: 18px;
}

/* 24px kanonik: urun detay buyuk fiyati (akiskan clamp yerine) */
#icerik .detay-fiyat .fiyat {
  font-size: 24px;
}

/* 21,6 / 23,04 → 24 (masaustu) · 17,6 → 18 (mobil): sayfa icindeki TUM h2'ler.
   DIKKAT (ozgulluk): ".bolum-baslik h2" gibi SINIF secicileri "main h2" gibi
   yalniz element secicilerini ezer → ":not(#fpsYok)" ile ozgulluk id seviyesine
   cikarilir (kural yine de yalniz h2'lere uygulanir). */
/* NOT: bu iki kural "!important" tasir. Sebep: tasarim katmanindaki h2
   boyutlari baska bir yuksek ozgulluklu/!important kaynagindan geliyor
   (olcum: kural yazildigi halde 23,04px ve 17,60px ara degerleri kalıyordu).
   Yama katmani zaten "son soz" katmani oldugu icin burada !important mesrudur. */
main h2:not(#fpsYok),
#icerik h2 {
  font-size: 24px !important;
}

@media (max-width: 620px) {
  /* Mobil h2: 1,35rem = 21,6px ve 1,1rem = 17,6px ara degerleri → kanonik 18px */
  main h2:not(#fpsYok) {
    font-size: 18px !important;
  }

  /* Mobil h1: 1,35rem = 21,6px → kanonik 22px */
  main h1:not(#fpsYok),
  main .hero h1,
  main .detay-bilgi h1 {
    font-size: 22px;
  }
}

/* SSS paragrafI 14,5px ara degeri → kanonik 15px */
main .sss p,
.sss p {
  font-size: 15px;
}

/* Urun detay urun adi (h1): 23,04px ara degeri → masaustunde kanonik 24px.
   Mobilde ayni baslik 22px (asagidaki ≤620 blogu). */
@media (min-width: 621px) {
  main .detay-bilgi h1,
  main .sonuc-ust h1 {
    font-size: 24px !important;
  }
}

/* Form elemanlari tarayici varsayilani ile 13,33px ciziliyordu (0,8333 x 16).
   Kanonik 14px'e sabitlendi; img/option gibi cocuklar da bundan miras alir. */
main input,
main select,
main textarea,
main button {
  font-size: 14px;
}

/* ≤390 kart basligi 12,5 → 13 */
@media (max-width: 390px) {
  .kart-govde h3 {
    font-size: 13px;
  }
}

/* ==========================================================================
   25) FOOTER / ALT SABLON (ChatGPT PARCA 6, 24.09.2026)

   - Mobil ≤620px: "Markalar" kolonu KATLANIR (11 baglanti ikincil navigasyon).
     Masaustu/tablet yapisi DEGISMEZ. Sozlesme: fp.js [data-katlanir-mobil]
     ≤620px'te <details>'i kapatir, ustunde acar; JS kapaliysa liste acik kalir.
   - Dort footer basliginin gorsel agirligi AYNI: 14px / 600 (summary dahil).
   - Katlanma oku kucuk ve NOTR (currentColor); TURUNCU aksan yok.
   - Asistan balonu icin EKSTRA DIKEY bosluk YOK (ChatGPT karari): footer
     uzatilmaz; balon viewport'a gore sabit kalir.
   ========================================================================== */

.altbilgi-izgara b,
.altbilgi-izgara details.katlanir > summary {
  display: block;
  margin-bottom: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.altbilgi-izgara details.katlanir > summary {
  cursor: pointer;
}

/* Masaüstünde "Markalar" kolonu diğer 3 kolonla BİREBİR aynı kalmalı.
   ÖLÇÜM: summary'nin 12px dikey dolgusu + listenin global 16px dikey marjı
   footer'ı 390 → 438px yapıyordu (kolon 170 → 218px). Sıfırlandı → masaüstü
   yüksekliği değişmiyor (ChatGPT: "masaüstü/tablet yapısı değişmeyecek"). */
.altbilgi-izgara details.katlanir > summary {
  padding: 0;
  margin-bottom: 8px;
}

/* Tasarım katmanı akordeon summary'lerine 44px dokunma yüksekliği veriyor;
   masaüstünde footer başlığı 25px olmalı (diğer 3 kolonla aynı) → min-height
   sıfırlanır. Mobilde 44px KORUNUR (dokunma alanı). */
@media (min-width: 621px) {
  .altbilgi-izgara details.katlanir > summary {
    min-height: 0;
  }
}

.altbilgi-izgara details.katlanir > ul {
  margin-top: 0;
  margin-bottom: 0;
}

.altbilgi-izgara details.katlanir > summary::marker {
  color: currentColor;
  font-size: 0.85em;
}

@media (max-width: 620px) {
  /* Dokunma alanı: mobilde summary'ye dikey nefes (44px'e yakın hedef) —
     ama satır listesi kapalıyken sıfır yük, açıkken mevcut 2 sütun düzeni. */
  .altbilgi-izgara details.katlanir > summary {
    padding: 10px 0;
    margin-bottom: 0;
  }

  .altbilgi-izgara details.katlanir[open] > ul {
    margin-top: 8px;
  }

  /* --- ChatGPT PARCA 6 tiras seti (24.09.2026) ---
     Hedef revize: 390 ≈ 770px (kapanis ≤790) · 620 ≤ 720px.
     Yalniz BOSLUK tiraslanir; adres/saat metni, Guverce paragraflari ve marka
     kimligi aciklamasi KISALTILMAZ (ChatGPT: "icerik budamak yanlis olur").
     Markalar summary'si 44px KALIR — gercek bir mobil kontrol, ikincil link
     kuralina dahil edilmez. */
  /* (a) Ikincil metin baglantilari 36 -> 32px (tel/eposta/CTA 44px KALIR:
         onlar li icinde degil, bu yuzden kapsam disi) */
  .altbilgi-izgara li a {
    min-height: 32px;
  }

  /* (b) Grid satir boslugu 24 -> 16px (kolon boslugu 16px kalir) */
  .altbilgi-izgara {
    gap: 16px;
  }

  /* (c) Alt bilgi / telif blogu dikey dolgusu toplam ~28px azaltilir */
  .altbilgi-alt {
    margin-top: 12px;
    padding-top: 8px;
    padding-bottom: 0;
  }

  /* (d) Footer ust marji 40 -> 24px */
  .altbilgi {
    margin-top: 24px;
  }

  /* (e) Guverce paragraflari arasi bosluk ~8px azaltilir (metin ayni) */
  .altbilgi-izgara p {
    margin-bottom: 4px;
  }
}


/* =========================================================
   ASISTAN — SOHBET ÖNCELİKLİ PANEL (ChatGPT tasarımı 24.09.2026)
   Mevcut renk / tipografi / radius sözleşmesini kullanır.
   ========================================================= */

.asistan-panel {
  width: min(430px, calc(100vw - 24px));
  max-height: min(760px, calc(100dvh - 24px));
  overflow: hidden;

  background: var(--sicak-zemin);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius-md);
}

.asistan-ust {
  min-height: 60px;
  padding: 10px 12px 10px 16px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  border-bottom: 1px solid var(--cizgi);
}

.asistan-ust > div {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.asistan-ust strong {
  color: var(--metin);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.asistan-ust span {
  color: var(--soluk);
  font-size: 12px;
  line-height: 1.4;
}

.asistan-kapat {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  color: var(--lacivert);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);

  font: inherit;
  font-size: 22px;
  cursor: pointer;
}

.asistan-govde {
  max-height: calc(min(760px, calc(100dvh - 24px)) - 60px);
  padding: 14px;

  overflow-y: auto;
  overscroll-behavior: contain;

  display: grid;
  gap: 14px;
}

/* =========================================================
   ROBOT + KONUŞMA
   ========================================================= */

.asistan-sahne {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.asistan-robot-wrap {
  height: 118px;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  overflow: hidden;
}

.asistan-robot {
  display: block;
  width: auto;
  max-width: 100%;
  height: 118px;
  object-fit: contain;

  transform-origin: center bottom;
  transition:
    opacity 260ms ease,
    transform 260ms ease;
}

/* Sonuç geldikten sonra JS bu sınıfı panele ekler. */
.asistan-panel.is-sonuclu .asistan-sahne {
  grid-template-columns: 72px minmax(0, 1fr);
}

.asistan-panel.is-sonuclu .asistan-robot-wrap,
.asistan-panel.is-sonuclu .asistan-robot {
  height: 88px;
}

/* =========================================================
   KONUŞMA BALONU
   ========================================================= */

.asistan-metin,
.asistan-balon {
  min-width: 0;
  max-height: 132px;
  padding: 11px 12px;

  overflow-y: auto;
  overscroll-behavior: contain;

  color: var(--metin);
  background: var(--sicak-zemin);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius-md);

  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
}

/* =========================================================
   TERCİHLER / FORM
   ========================================================= */

.asistan-tercihler {
  border: 1px solid var(--cizgi);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.asistan-tercihler > summary {
  min-height: 44px;
  padding: 0 12px;

  display: flex;
  align-items: center;

  color: var(--lacivert);
  cursor: pointer;

  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.asistan-tercihler[open] > summary {
  border-bottom: 1px solid var(--cizgi);
}

.asistan-panel.is-sonuclu .asistan-tercihler > summary {
  color: var(--soluk);
  font-size: 0;
}

.asistan-panel.is-sonuclu .asistan-tercihler > summary::before {
  content: "Yanıtları değiştir";
  color: var(--lacivert);
  font-size: 14px;
}

.asistan-form {
  padding: 12px;

  display: grid;
  gap: 12px;
}

.asistan-secimler {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.asistan-form label {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.asistan-form label > span {
  color: var(--soluk);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.asistan-form select,
.asistan-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 9px 10px;

  color: var(--metin);
  background: var(--sicak-zemin);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius-sm);

  font: inherit;
  font-size: 14px;
}

.asistan-form textarea {
  min-height: 68px;
  max-height: 112px;
  resize: vertical;
  line-height: 1.5;
}

.asistan-form-eylem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.asistan-form-eylem .btn {
  min-height: 44px;
}

/* =========================================================
   SONUÇLAR
   ========================================================= */

.asistan-sonuc:empty {
  display: none;
}

.asistan-oneriler {
  display: grid;
  gap: 8px;
}

.asistan-urun {
  min-width: 0;
  padding: 8px;

  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;

  border: 1px solid var(--cizgi);
  border-radius: var(--radius-md);
}

.asistan-urun-gorsel {
  width: 68px;
  height: 68px;

  display: grid;
  place-items: center;

  overflow: hidden;
  border-radius: var(--radius-sm);
}

.asistan-urun-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.asistan-urun-bilgi {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.asistan-urun-marka {
  color: var(--soluk);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}

.asistan-urun-ad {
  color: var(--metin);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.asistan-urun-alt {
  margin-top: 2px;

  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

.asistan-urun-fiyat {
  color: var(--metin);
  font-size: 13px;
  font-weight: 600;
}

.asistan-urun-stok {
  color: var(--soluk);
  font-size: 11px;
  line-height: 1.3;
}

.asistan-urun-cta {
  min-width: 64px;
  min-height: 44px;
  padding-inline: 10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 3. ve 4. ürün */
.asistan-diger {
  border: 1px solid var(--cizgi);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.asistan-diger > summary {
  min-height: 44px;
  padding: 0 12px;

  display: flex;
  align-items: center;

  color: var(--lacivert);
  cursor: pointer;

  font-size: 14px;
  font-weight: 600;
}

.asistan-diger-liste {
  padding: 0 8px 8px;

  display: grid;
  gap: 8px;
}

/* =========================================================
   WHATSAPP DEVİR — mevcut .btn-wa sözleşmesi kullanılır
   ========================================================= */

.asistan-devir {
  padding: 12px;

  display: grid;
  gap: 6px;

  border: 1px solid var(--cizgi);
  border-radius: var(--radius-md);
}

.asistan-devir strong {
  color: var(--metin);
  font-size: 15px;
  font-weight: 600;
}

.asistan-devir p {
  margin: 0;

  color: var(--soluk);
  font-size: 13px;
  line-height: 1.55;
}

.asistan-devir-btn {
  width: 100%;
  min-height: 44px;
  margin-top: 4px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* =========================================================
   ŞEFFAFLIK
   ========================================================= */

.asistan-not {
  margin: 0;
  padding-top: 10px;

  color: var(--soluk);
  border-top: 1px solid var(--cizgi);

  font-size: 11px;
  font-weight: 400;
  line-height: 1.55;
}

/* =========================================================
   AÇILMA HAREKETİ (kullanıcı isteği: açılır/kapanır hareket)
   ========================================================= */

@keyframes asistanPanelAc {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.asistan-panel-ac { animation: asistanPanelAc 240ms ease-out; }

/* =========================================================
   MOBİL — 390×844 ANA SÖZLEŞME
   ========================================================= */

@media (max-width: 620px) {
  .asistan-panel {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: 8px;

    width: auto;
    max-height: 92dvh;
  }

  .asistan-govde {
    max-height: calc(92dvh - 60px);
    padding: 12px;
    gap: 12px;
  }

  .asistan-sahne {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 10px;
  }

  .asistan-robot-wrap,
  .asistan-robot {
    height: 112px;
  }

  .asistan-panel.is-sonuclu .asistan-sahne {
    grid-template-columns: 66px minmax(0, 1fr);
  }

  .asistan-panel.is-sonuclu .asistan-robot-wrap,
  .asistan-panel.is-sonuclu .asistan-robot {
    height: 82px;
  }

  .asistan-secimler {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .asistan-urun {
    grid-template-columns: 62px minmax(0, 1fr) 64px;
    gap: 8px;
  }

  .asistan-urun-gorsel {
    width: 62px;
    height: 62px;
  }
}

@media (max-width: 375px) {
  .asistan-panel {
    left: 6px;
    right: 6px;
    bottom: 6px;
  }

  .asistan-govde {
    padding: 10px;
  }

  .asistan-urun {
    grid-template-columns: 56px minmax(0, 1fr) 62px;
    padding: 7px;
  }

  .asistan-urun-gorsel {
    width: 56px;
    height: 56px;
  }
}

/* =========================================================
   HAREKET ERİŞİLEBİLİRLİĞİ
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .asistan-robot {
    transition: none;
  }
  .asistan-panel-ac {
    animation: none;
  }
}

/* =========================================================
   TEKNİK DÜZELTME (24.09.2026) — telefonda asistan tetikleyicisi
   NEDEN: tasarim.css satır 32'de eski "balon etiketi" için yazılmış
     @media(max-width:390px){ .asistan-dugme-balon{display:none} }
   kuralı, sohbet öncelikli v3 tasarımında TETİKLEYİCİ robot butonuna
   uygulanıyor ve telefonlarda asistanı tamamen gizliyordu.
   Ölçüm (canlı): 1280px → 74×74 görünür · 390px/360px → display:none.
   Bu katman son söz olduğu için tetikleyici her genişlikte geri gelir.
   ========================================================= */
@media (max-width: 390px) {
  .asistan-dugme-balon {
    display: block;
  }
}

/* =========================================================
   TEKNİK DÜZELTME (24.09.2026) — "Öneri bul" düğmesi basılamıyordu
   Kullanıcı: "seçenekleri girdikten sonra cevap alamıyorum"

   Ölçüm (canlı, 390px; masaüstünde de aynı):
     form      493→814   (321 px yer istiyor)
     tercihler 448→739   (overflow:hidden satırı büyütmüyor → form kırpılıyor)
     düğme     758→802   ·  .asistan-not 751→823  →  ÖRTÜŞME 51 px
     elementFromPoint(düğme merkezi) → P.asistan-not  →  tıklama HİÇ istek üretmiyordu.

   NEDEN: .asistan-tercihler{overflow:hidden} iken ızgara satırı formun içerik
   yüksekliğine büyümüyor; gövde (523 px) kırpma yapıp notu formun üstüne bindiriyor.
   ÇÖZÜM: kırpmayı kaldır → satır içeriğe göre büyür, gövde kayar (tasarım kararı:
   "yalnız gövde kayar"), not formun ALTINDA kalır.
   Ölçüm sonrası: örtüşme 51 → 0 px · düğme tıklanabilir · gövde 523/607 (kayar)
   ========================================================= */
.asistan-tercihler {
  overflow: visible;
}

/* =========================================================
   TEKNİK DÜZELTME (24.09.2026) — panel başlığı okunmuyordu
   Kullanıcı: "asistan penceresindeki headerda bulunan metinler görünmüyor"

   Ölçüm (canlı): başlık zemini rgb(18,52,91) koyu lacivert, metinler ise
   rgb(34,31,26) / rgb(111,106,99) koyu → okunamıyor. Kapatma düğmesi de
   color:var(--lacivert) olduğu için lacivert üstüne lacivert kalıyordu.

   NEDEN: yeni panel tasarımı AÇIK başlık varsayıyor
     (.asistan-ust strong{color:var(--metin)} · span{color:var(--soluk)} ·
      .asistan-kapat{color:var(--lacivert)} · .asistan-ust{border-bottom}),
   ama eski tasarım katmanındaki .asistan-ust{background:var(--lacivert);color:#fff}
   kuralı yeni katmanda ezilmediği için zemin koyu kalmıştı.
   ÇÖZÜM: başlık zemini panel zeminiyle aynı (açık) → metinler ve kapatma düğmesi okunur.
   ========================================================= */
.asistan-ust {
  background: var(--sicak-zemin);
  color: var(--metin);
}

/* =========================================================
   ChatGPT KARARI (24.09.2026) — tetikleyici köşeye yaklaşsın
   Eski tasarım katmanındaki `.asistan-dugme-balon{right:72px;bottom:12px}` kuralı butonu
   köşeden 99px içeriye itiyordu (gerekçesiz: balon etiketi döneminden kalma).
   Karar: masaüstü 20px / 20px · mobil (<=620px) 16px + safe-area; 74x74 boyut değişmez.
   Kapsayıcı (.asistan) zaten position:fixed;right:20px;bottom:20px — buton statik akışa
   alınınca köşeden tam 20px (mobilde 16px) içeride durur. Panel bottom:76px olduğu için
   butonla çakışmaz. ========================================================= */
.asistan-dugme-balon {
  position: static;
  right: auto;
  bottom: auto;
  max-width: none;
}

@media (max-width: 620px) {
  .asistan {
    right: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
  }
}

/* ==========================================================================
   24.09.2026 (ChatGPT onayli) — BOS ARAMA KUTUSUNDA IKI EYLEM
   ChatGPT karari: model/marka aramasi sonuc vermezse BIRINCIL eylem
   "Filtrelerle cihaz bul" (mobilde mevcut filtre panelini acar), ikincil
   "Filtreleri temizle". Iki dugme arasinda bosluk yoktu → teknik yerlesim
   duzeltmesi. Yeni gorsel dil yok; mevcut .btn siniflari kullanilir.
   ========================================================================== */
.arama-bos .bos-kutu .btn + .btn,
.arama-bos .bos-kutu button + .btn {
  margin-left: 10px;
}

@media (max-width: 620px) {
  .arama-bos .bos-kutu .btn,
  .arama-bos .bos-kutu button {
    display: block;
    width: 100%;
  }

  .arama-bos .bos-kutu .btn + .btn,
  .arama-bos .bos-kutu button + .btn {
    margin-left: 0;
    margin-top: 8px;
  }
}

/* ==========================================================================
   24.09.2026 (ChatGPT onayli) — MOBIL URUN DETAYI: ANA CTA ILK EKRANDA
   ChatGPT kapanis hedefi: "390x844'te ana CTA'nin 44px tamami + altinda en az
   12px nefes alani ilk viewport icinde olsun." Olculdu (once):
     fiyat sorulacak urun (tek adet) → CTA ust=845px → hedef ust<=788 → 57px FAZLA
     fiyatli urun                     → CTA ust=809px → 21px FAZLA
   Cozum: <=620px'te CTA ONCESINDEKI dikey alan kisaltilir. Metin, font boyutu ve
   buton yuksekligi DEGISMEZ; sticky bar EKLENMEZ (ChatGPT: gerek yok).
   Kirpilan yer: galeri gorsel orani, galeri/bilgi blogu ic bosluklari, dikey ritim.
   ========================================================================== */
@media (max-width: 620px) {
  #icerik .detay-galeri {
    padding: 10px 14px;
  }

  /* 4/3 → 16/10: gorsel object-fit:contain oldugu icin kirpilmaz, yalnizca kuculur */
  #icerik .detay-galeri > img,
  #icerik .detay-galeri img {
    aspect-ratio: 16 / 10;
  }

  #icerik .detay-bilgi {
    padding: 14px;
  }

  #icerik .detay-fiyat {
    padding: 12px 0;
    margin: 12px 0;
  }

  #icerik .detay-dugme {
    margin-top: 8px;
  }
}


/* --------------------------------------------------------------------------
   24.09.2026 (ChatGPT onayli) — MOBIL KIRINTI TEK SATIR
   Olcum: uzun model adli urunlerde kirinti 2-3 satira sariyor ve galeri/CTA'yi
   asagi itiyordu (konica-minolta-bizhub-c308-yenilenmis: kirinti 72px, CTA
   ust=817px → hedef 788px). Model adi H1'de zaten yazili oldugu icin kirintida
   tek satirda uc nokta ile kisaltilir. Yeni gorsel dil yok.
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  #icerik .kirinti {
    flex-wrap: nowrap;
    overflow: hidden;
  }

  #icerik .kirinti > a {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  #icerik .kirinti > span:last-child {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ==========================================================================
   24.09.2026 (ChatGPT onayli) — SIPARIS TALEBI EKRANI + SEPET BILDIRIMI
   Yeni gorsel dil YOK: mevcut tokenlar (.kutu, .btn, --cizgi, --radius-sm,
   --soluk) kullanilir. ChatGPT sartnamesi: kisa ozet + zorunlu Ad/Telefon/Il,
   opsiyonel E-posta/Ilce/Firma/Not; odeme alinmadigi acikca yazilir.
   ========================================================================== */
.sepet-bildirim {
  margin: 0 0 14px;
  padding: 11px 14px;
  border: 1px solid #b7e0c2;
  background: #eefaf1;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: #14532d;
}

.sepet-bildirim.hata {
  border-color: #f2c9c9;
  background: #fdf2f2;
  color: #8a1c1c;
}

.talep-izgara {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.talep-baslik {
  margin: 0 0 10px;
  font-size: 16px;
}

.talep-liste {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.7;
}

.talep-liste li {
  margin-bottom: 4px;
}

.talep-sor,
.talep-tutar {
  color: var(--soluk);
  font-size: 13px;
}

.talep-toplamlar {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--cizgi);
  font-size: 14px;
}

.talep-toplamlar div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
}

.talep-toplamlar dt,
.talep-toplamlar dd {
  margin: 0;
}

.talep-toplamlar .toplam {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--cizgi);
  font-size: 16px;
}

.talep-odeme,
.talep-note,
.talep-not {
  font-size: 13px;
  color: var(--soluk);
  margin: 12px 0 0;
}

.talep-form {
  display: grid;
  gap: 4px;
}

.talep-form label {
  font-size: 13px;
  font-weight: 600;
  margin-top: 8px;
}

.talep-form input[type="text"],
.talep-form input[type="tel"],
.talep-form input[type="email"],
.talep-form textarea {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid var(--cizgi);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 14px;
  background: #fff;
}

.talep-form textarea {
  resize: vertical;
}

.talep-form .zorunlu {
  color: #b91c1c;
}

.talep-form .istege-bagli {
  color: var(--soluk);
  font-weight: 400;
}

.talep-onay {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-weight: 400 !important;
  font-size: 13px !important;
  margin: 12px 0 4px;
  color: var(--soluk);
}

.talep-onay input {
  margin-top: 2px;
}

.talep-form .btn {
  justify-self: start;
  margin-top: 10px;
}

.talep-hata {
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid #f2c9c9;
  background: #fdf2f2;
  border-radius: var(--radius-sm);
  color: #8a1c1c;
  font-size: 14px;
}

.talep-sonuc h1 {
  margin: 0 0 8px;
}

.talep-sonuc .talep-no {
  font-size: 15px;
}

.talep-eylem {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

@media (max-width: 860px) {
  .talep-izgara {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  .talep-form .btn {
    justify-self: stretch;
    width: 100%;
  }
}

/* ==========================================================================
   24.09.2026 (ChatGPT onayli) — GER TUŞU KAYDIRMA RESTORASYONU
   Ölçüldü: ana sayfa 900px kaydırılmışken kataloğa gidip GER dönüldüğünde konum
   61px'e düşüyordu (kullanıcı aradığı yeri kaybediyordu). Neden: tasarim.css'teki
   `html{scroll-behavior:smooth}` — Chrome'da gezinme geçmişi kaydırma
   restorasyonunu bozan bilinen davranış. ChatGPT kararı: "navigasyon geçmişinin
   doğru çalışması dekoratif yumuşak kaydırmadan daha önemli".
   Çözüm: global smooth kapatılır (teknik katman). Yumuşak kaydırma isteyen
   etkileşimler bunu JS'te açıkça ister (ör. katalog filtre paneli açılışı).
   Görsel dil DEŞMEZ.
   ========================================================================== */
html {
  scroll-behavior: auto;
}

/* ===== Yönetim (operatör) paneli — 25.09.2026 =====
   YEN GÖRSEL DL ÜRETLMED: yalnız mevcut .talep-form ölçüleri password/select/number
   alanlarına ve panel tablosuna uygulandı (aynı çizgi/köşe/dolgu değerleri). */
.talep-form input[type="password"],
.talep-form input[type="number"],
.talep-form input[type="search"],
.talep-form select {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid var(--cizgi);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 14px;
  background: #fff;
}
.panel-ust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.panel-ust .panel-kim {
  font-size: 13px;
  color: var(--soluk);
}
/* NOT (7C): `.panel-sayac` kuralı KALDIRILDI — panel seçicisi müşteri katmanında durmaz;
   sayfa sayacı artık panel katmanında `pa-sayac` adıyla yaşıyor (assets/panel.css). */
.yonetim-tablo {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.yonetim-tablo th,
.yonetim-tablo td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--cizgi);
  text-align: left;
  vertical-align: top;
}
.yonetim-tablo th {
  font-size: 13px;
  color: var(--soluk);
  font-weight: 600;
}
.yonetim-tablo .rozet {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid var(--cizgi);
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
}
.yonetim-tablo .rozet-yeni {
  border-color: #b45309;
  color: #92400e;
  background: #fffbeb;
}
.yonetim-tablo .kismi {
  display: block;
  font-size: 12px;
  color: #92400e;
}
.yonetim-olaylar {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
}
.yonetim-olaylar li {
  padding: 7px 0;
  border-bottom: 1px dashed var(--cizgi);
}
.yonetim-olaylar .zaman {
  color: var(--soluk);
}
.yonetim-veri {
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  gap: 6px 14px;
  font-size: 14px;
}
.yonetim-veri dt {
  color: var(--soluk);
}
.yonetim-veri dd {
  margin: 0;
}
/* Yönetim tabloları: dar ekranda SAYFA taşmasın, tablo kendi içinde kaysın. */
.yonetim-kaydir {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.yonetim-tablo-liste {
  min-width: 620px;
}
/* Kategori karşılaştırma tablosu (ChatGPT §4, 25.09.2026): masaüstünde 10 sütun kendi içinde kayar,
   mobilde yalnız ana sütunlar görünür (dar ekranda sıkıştırma yok). */
.karsilastirma-kaydir { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.karsilastirma-tablo { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 14px; }
.karsilastirma-tablo th, .karsilastirma-tablo td { padding: 8px 10px; border-bottom: 1px solid var(--cizgi); text-align: left; vertical-align: top; }
.karsilastirma-tablo th { font-size: 13px; color: var(--soluk); font-weight: 600; white-space: nowrap; }
/* Telefon (<=480px, proje kirilim kurali): tablo kart gorunumune gecer. Ana alanlar
   (model, format, renk, hiz, fiyat, incele) gorunur; teknik alanlar satir bazinda
   "Teknik detay" ile acilir (ChatGPT §4). Masaustunde tum sutunlar aciktir. */
.karsilastirma-tablo .k-tumu { display: none; }
@media (max-width: 480px) {
  .karsilastirma-kaydir { overflow-x: visible; }
  .karsilastirma-tablo { min-width: 0; }
  .karsilastirma-tablo, .karsilastirma-tablo tbody, .karsilastirma-tablo tr, .karsilastirma-tablo td { display: block; }
  .karsilastirma-tablo thead { display: none; }
  .karsilastirma-tablo tr { border: 1px solid var(--cizgi); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
  .karsilastirma-tablo td { border: 0; padding: 2px 0; }
  .karsilastirma-tablo td[data-etiket]::before { content: attr(data-etiket) ": "; color: var(--soluk); }
  .karsilastirma-tablo .k-detay { display: none; }
  .karsilastirma-tablo tr.k-acik .k-detay { display: block; }
  .karsilastirma-tablo .k-tumu { display: block; margin-top: 8px; }
  .karsilastirma-tablo .k-detay-ac { width: 100%; }
}

/* ────────────────────────────────────────────────────────────────────────────
   26.09.2026 — CİHAZ ÇALIŞMA ALANI yerel sekme çubuğu (8A · teknik yama)
   ChatGPT kararı: sekmeler ayrı PHP route'ları, kullanıcı için TEK nesne.
   Yeni görsel dil üretilmedi: mevcut .pa-anchor-nav satırı kullanıldı; burada yalnız
   (1) mobilde yatay kaydırma — “kenarda sonraki öğenin bir kısmı görünsün” şartı,
   (2) aktif sekmenin görünür durumu (kenar çubuğunun aktif rengiyle aynı marka çizgisi).
   ChatGPT'nin görsel turunda değiştirilebilir; iş mantığını etkilemez.
   ──────────────────────────────────────────────────────────────────────────── */
.pa-anchor-nav[data-cihaz-nav] {
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pa-anchor-nav[data-cihaz-nav]::-webkit-scrollbar { display: none; }
.pa-anchor-nav[data-cihaz-nav] a { white-space: nowrap; flex: 0 0 auto; }
.pa-anchor-nav[data-cihaz-nav] a[aria-current="page"] {
  color: var(--pa-ink);
  background: var(--pa-surface);
  box-shadow: inset 0 -2px 0 var(--pa-brand);
  font-weight: 600;
}
/* Mobil: sekme çubuğu yatay kaydırılır; son öğenin bir kısmı görünür kalır (kaydırılabilirlik ipucu). */
@media (max-width: 620px) {
  .pa-anchor-nav[data-cihaz-nav] { padding-right: 24px; }
}

/* ────────────────────────────────────────────────────────────────────────────
   26.09.2026 — MARKA ÇALIŞMA ALANI yerel sekme çubuğu (8D · teknik yama)
   ChatGPT kararı: marka ekranları ayrı PHP route'ları ([ Genel ] [ Sorular ]) ve
   CİHAZLAR altında ikincil alan (Cihaz listesi · Markalar). Yeni görsel dil YOK:
   cihaz sekme çubuğunun (8A) BİREBİR eşi — aynı davranış, aynı aktif durum.
   ──────────────────────────────────────────────────────────────────────────── */
.pa-anchor-nav[data-marka-nav] {
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pa-anchor-nav[data-marka-nav]::-webkit-scrollbar { display: none; }
.pa-anchor-nav[data-marka-nav] a { white-space: nowrap; flex: 0 0 auto; }
.pa-anchor-nav[data-marka-nav] a[aria-current="page"] {
  color: var(--pa-ink);
  background: var(--pa-surface);
  box-shadow: inset 0 -2px 0 var(--pa-brand);
  font-weight: 600;
}
@media (max-width: 620px) {
  .pa-anchor-nav[data-marka-nav] { padding-right: 24px; }
}

/* ────────────────────────────────────────────────────────────────────────────
   26.09.2026 — SATILMIŞ CİHAZ SAYFASI (ChatGPT §3 · teknik yama)
   ChatGPT kararı: “fiyat-sor görünümünü aynen kullanma; ‘fiyat sorulacak’ ile ‘satılmış’ aynı ticari
   durum değil”. `SATILDI` nötr KOYU etiket (kırmızı değil), ardından düz cümle ve tek net aksiyon.
   “Benzer cihazlar” bloğu, satılmış sayfada birinci hedef (kullanıcıyı çıkmaza sokmamak) olduğu için
   vurgulanır. Yeni görsel dil YOK: mevcut tokenlar (--lacivert · --cizgi · --zemin) ve kart dili kullanıldı;
   ChatGPT kendi turunda tasarim.css katmanında yeniden biçimlendirebilir.
   ──────────────────────────────────────────────────────────────────────────── */
.durum-satildi {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 12px;
  background: var(--lacivert);
  color: #ffffff;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
}
.satildi-not {
  margin: 0;
  max-width: 560px;
  color: var(--soluk);
  font-size: 15px;
}
/* Satılmış sayfada benzer cihazlar bloğu: aynı kart dili, biraz daha güçlü çerçeve ve başlık. */
.bolum.benzerler-vurgu {
  background: #ffffff;
  border: 1px solid var(--cizgi);
  border-left: 4px solid var(--lacivert);
  border-radius: 14px;
  padding: 22px;
}
.bolum.benzerler-vurgu .bolum-baslik h2 { font-size: 30px; }