/* ==========================================================================
   sazbambudekor — tema özel düzeltmeleri
   theme.css'ten (derlenmiş Tailwind) SONRA yüklenir.
   Kural: her sınıf "saz-" önekli olacak; global sınıf adı kullanmak yasak
   (proje kuralı: CSS/JS çakışma yasağı).
   İstisna: OpenCart modüllerinin ürettiği hazır kabuklara (.saz-topbar-left içi)
   verilen inişler — onlar da yalnızca kendi sarmalayıcıları altında geçerlidir.
   ========================================================================== */

/* Sabit başlık (üst bar 40px + ana menü 66px + menü şeridi 46px) altında
   içerik kalmasın. Sayfa şablonları kendi <main> boşluğunu da verir; bu
   yalnızca güvenlik payıdır. */
.saz-body { padding-top: 0; }

/* theme.js "hidden" sınıfını kullanır; Tailwind'in .hidden'ı zaten var.
   Kendi gizleme sınıfımız yalnızca sunucudan basılan bloklar için. */
.saz-gizli { display: none !important; }

/* --------------------------------------------------------------------------
   Üst bardaki OpenCart dil ve para birimi modülleri
   Bu iki blok OpenCart'ın kendi şablonundan gelir (common/language.twig,
   common/currency.twig) ve Bootstrap düğme/dropdown yapısı basar.
   Tema kabuğuna oturması için burada sadeleştiriliyor.
   -------------------------------------------------------------------------- */
.saz-topbar-left form { display: inline-block; margin: 0; }
.saz-topbar-left .btn-group { position: relative; display: inline-block; }
.saz-topbar-left .btn,
.saz-topbar-left button.btn-link {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .5rem; height: auto; min-height: 24px;
  font-size: .72rem; font-weight: 600; line-height: 1;
  color: #3f4a35; background: transparent; border: 0; border-radius: .35rem;
  text-decoration: none; cursor: pointer;
}
.saz-topbar-left .btn:hover { color: #3f6212; background: rgba(101,163,13,.10); }
.saz-topbar-left .dropdown-menu { min-width: 8.5rem; margin-top: .25rem; }
.saz-topbar-left img { height: 12px; width: auto; }

/* --------------------------------------------------------------------------
   Sepet paneli — açık durum
   theme.js paneli sınıf değiştirerek değil, stil vererek açar; iki yolu da
   destekleyelim (panel translate-x-full ile kapalı başlar).
   -------------------------------------------------------------------------- */
.saz-cart [data-cart-panel].saz-acik { transform: translateX(0); }
.saz-cart [data-cart-backdrop].saz-acik { opacity: 1; pointer-events: auto; }

/* --------------------------------------------------------------------------
   Akordeon içerik kesilmesi düzeltmesi
   Kaynak temada cevap paneli max-h-96 (384px) ile sınırlıydı; admin'den uzun
   cevap girilince metin SESSİZCE kesiliyordu. grid satırı ile sınırsız yaparız.
   (keşif bulgusu — SSS akordeon içerik kesilmesi)
   -------------------------------------------------------------------------- */
[data-accordion] [data-accordion-panel] { max-height: none; }

/* --------------------------------------------------------------------------
   Arama önerileri (sunucudan gelen satırlar)
   -------------------------------------------------------------------------- */
.saz-oneri {
  display: flex; align-items: center; gap: .75rem;
  padding: .625rem 1rem; transition: background-color .15s; text-decoration: none;
}
.saz-oneri:hover { background: #f2f4ef; }
.saz-oneri-gorsel { width: 2.5rem; height: 2.5rem; border-radius: .5rem; overflow: hidden; background: #e6e9e1; flex-shrink: 0; }
.saz-oneri-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.saz-oneri-orta { flex: 1; min-width: 0; }
.saz-oneri-ad { font-size: .875rem; font-weight: 500; color: #1c2517; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saz-oneri-alt { font-size: .75rem; color: #6b7563; }
.saz-oneri-fiyat { font-size: .875rem; font-weight: 700; color: #4d7c0f; white-space: nowrap; flex-shrink: 0; }
.saz-oneri-eski { font-size: .75rem; color: #9ca396; text-decoration: line-through; display: block; }

/* --------------------------------------------------------------------------
   Yükleniyor göstergesi
   -------------------------------------------------------------------------- */
.saz-yukleniyor { padding: 1.25rem; text-align: center; font-size: .8rem; color: #6b7563; }

/* --------------------------------------------------------------------------
   Bal küpü alanı (form spam koruması) — ekranda görünmez, ekran okuyucuda yok
   -------------------------------------------------------------------------- */
.website_alt, .saz-honeypot {
  position: absolute !important; left: -9999px !important;
  width: 1px !important; height: 1px !important; opacity: 0 !important;
}

/* ==========================================================================
   DERLENMİŞ ALT KÜMEDE OLMAYAN TAILWIND YARDIMCILARI
   ==========================================================================
   theme.css DERLENMİŞ bir Tailwind alt kümesidir: yalnızca özgün tasarım
   HTML'inde geçen sınıflar üretilmiştir. OpenCart'a taşırken yazdığımız
   şablonlarda (hesap sayfaları, wg_* modülleri, ürün detayı…) alt kümede
   OLMAYAN sınıflar kullanıldı; tarayıcı bunları SESSİZCE yok sayıyordu —
   hata yok, konsol temiz, test geçiyor, ama düzen bozuluyor.
   (2026-08-07: blog arama düğmesi `right-1.5` yüzünden formun dışına
   taşıyor ve mobilde 28px yatay kaydırma yaratıyordu.)

   Aşağıdakiler Tailwind'in KENDİ ölçeğiyle (1 birim = .25rem), theme.css'in
   renk biçimiyle (oklch(var(--x) / opacity) ve rgb(R G B/opacity)) ve aynı
   kırılma noktalarıyla (sm 640 · md 768 · lg 1024) birebir yazılmıştır.
   Yeni sınıf eklemeden önce:  php temalar/_ortak/sinif_denetimi.php sazbambudekor
   ========================================================================== */

/* --- çeşitli --- */
.align-top{vertical-align:top}
.break-words{overflow-wrap:break-word}
.items-stretch{align-items:stretch}
.min-h-0{min-height:0}
.not-italic{font-style:normal}

/* --- boşluk --- */
.p-0{padding:0}
.p-10{padding:2.5rem}
.pt-2{padding-top:.5rem}
.pt-10{padding-top:2.5rem}
.pr-24{padding-right:6rem}
.m-0{margin:0}
.my-2{margin-top:.5rem;margin-bottom:.5rem}
.mt-14{margin-top:3.5rem}
.last\:mb-0:last-child{margin-bottom:0}

/* --- konum --- */
.bottom-2{bottom:.5rem}
.right-1\.5{right:.375rem}

/* --- ölçü --- */
.w-auto{width:auto}
.w-24{width:6rem}
.w-1\/3{width:33.333333%}
.max-w-0{max-width:0}
.max-w-\[12rem\]{max-width:12rem}
.max-w-\[240px\]{max-width:240px}
.max-w-\[260px\]{max-width:260px}
.max-w-\[560px\]{max-width:560px}
.min-w-\[150px\]{min-width:150px}

/* --- flex / grid --- */
.flex-col-reverse{flex-direction:column-reverse}
.order-1{order:1}
.order-2{order:2}
.gap-x-2{column-gap:.5rem}
.gap-x-4{column-gap:1rem}
.gap-x-8{column-gap:2rem}
.gap-y-1{row-gap:.25rem}
.gap-y-4{row-gap:1rem}
.gap-y-6{row-gap:1.5rem}

/* --- kenarlık --- */
.border-0{border-width:0}
.border-dashed{border-style:dashed}
.rounded-l-lg{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}
.rounded-r-lg{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}

/* --- renk: tema paleti (oklch değişkenleri theme.css :root'ta tanımlı) --- */
.text-foreground-300{--tw-text-opacity:1;color:oklch(var(--foreground-300) / var(--tw-text-opacity,1))}
.text-primary-300{--tw-text-opacity:1;color:oklch(var(--primary-300) / var(--tw-text-opacity,1))}
.text-background-200\/80{color:oklch(var(--background-200) / .8)}
.border-primary-700\/60{border-color:oklch(var(--primary-700) / .6)}
.bg-background-50\/85{background-color:oklch(var(--background-50) / .85)}
.bg-background-100\/40{background-color:oklch(var(--background-100) / .4)}
.bg-foreground-950\/70{background-color:oklch(var(--foreground-950) / .7)}
.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}

/* --- renk: durum paleti (Tailwind amber/emerald/red — theme.css'te kısmen var) --- */
.bg-amber-50{--tw-bg-opacity:1;background-color:rgb(255 251 235/var(--tw-bg-opacity,1))}
.border-amber-200{--tw-border-opacity:1;border-color:rgb(253 230 138/var(--tw-border-opacity,1))}
.text-amber-500{--tw-text-opacity:1;color:rgb(245 158 11/var(--tw-text-opacity,1))}
.text-amber-800{--tw-text-opacity:1;color:rgb(146 64 14/var(--tw-text-opacity,1))}
.hover\:border-emerald-200:hover{--tw-border-opacity:1;border-color:rgb(167 243 208/var(--tw-border-opacity,1))}
.hover\:text-emerald-700:hover{--tw-text-opacity:1;color:rgb(4 120 87/var(--tw-text-opacity,1))}
.hover\:border-red-200:hover{--tw-border-opacity:1;border-color:rgb(254 202 202/var(--tw-border-opacity,1))}
.hover\:border-red-300:hover{--tw-border-opacity:1;border-color:rgb(252 165 165/var(--tw-border-opacity,1))}

/* --- group-hover (theme.css ile aynı seçici biçimi) --- */
.group:hover .group-hover\:pr-2{padding-right:.5rem}
.group:hover .group-hover\:max-w-xs{max-width:20rem}

/* --- duyarlı --- */
@media (min-width:640px){
  .sm\:order-1{order:1}
  .sm\:order-2{order:2}
  .sm\:justify-between{justify-content:space-between}
  .sm\:grid-cols-\[1fr_180px\]{grid-template-columns:1fr 180px}
}
@media (min-width:768px){
  .md\:h-20{height:5rem}
  .md\:w-20{width:5rem}
  .md\:gap-x-12{column-gap:3rem}
  .md\:border-l-0{border-left-width:0}
  .md\:inline-block{display:inline-block}
}

/* ==========================================================================
   YÖNETİCİNİN GİRDİĞİ HTML — İÇERİK TİPOGRAFİSİ
   ==========================================================================
   Tailwind'in preflight'ı başlıkları ve listeleri SIFIRLAR:
       h1..h6 { font-size:inherit; font-weight:inherit }
       ol,ul,menu { margin:0; padding:0; list-style:none }
   Bu yüzden yöneticinin editörden girdiği HTML — bilgi sayfaları (Hakkımızda,
   KVKK, Gizlilik, Mesafeli Satış), blog yazısı gövdesi, ürün açıklama sekmesi,
   iletişim sayfası — başlıksız, madde işaretsiz, DÜMDÜZ bir metin yığını
   olarak basılıyordu. Editörde doğru görünüyor, vitrinde kayboluyordu.

   Kapsam bilinçli olarak DAR: yalnızca içerik sarmalayıcılarının içi. Tema
   kendi bileşenlerini Tailwind sınıflarıyla kuruyor; global h2/ul kuralı
   yazmak onları bozardı.
   ========================================================================== */
.saz-icerik, .sbd-icerik { color: inherit; }

.saz-icerik > *:first-child, .sbd-icerik > *:first-child { margin-top: 0; }
.saz-icerik > *:last-child,  .sbd-icerik > *:last-child  { margin-bottom: 0; }

.saz-icerik h1, .sbd-icerik h1 { font-size: 1.75rem; line-height: 1.25; }
.saz-icerik h2, .sbd-icerik h2 { font-size: 1.4rem;  line-height: 1.3; }
.saz-icerik h3, .sbd-icerik h3 { font-size: 1.175rem; line-height: 1.35; }
.saz-icerik h4, .sbd-icerik h4,
.saz-icerik h5, .sbd-icerik h5,
.saz-icerik h6, .sbd-icerik h6 { font-size: 1rem; line-height: 1.4; }
.saz-icerik :is(h1,h2,h3,h4,h5,h6),
.sbd-icerik :is(h1,h2,h3,h4,h5,h6) {
  font-weight: 700; color: #1c2517; margin: 1.75em 0 .6em;
}

.saz-icerik p, .sbd-icerik p { margin: 0 0 1em; }

.saz-icerik ul, .sbd-icerik ul { list-style: disc;    margin: 0 0 1em; padding-left: 1.5rem; }
.saz-icerik ol, .sbd-icerik ol { list-style: decimal; margin: 0 0 1em; padding-left: 1.5rem; }
.saz-icerik li, .sbd-icerik li { margin: .35em 0; }
.saz-icerik li > ul, .sbd-icerik li > ul,
.saz-icerik li > ol, .sbd-icerik li > ol { margin: .35em 0; }

.saz-icerik a, .sbd-icerik a {
  color: #4d7c0f; text-decoration: underline; text-underline-offset: 2px;
}
.saz-icerik a:hover, .sbd-icerik a:hover { color: #3f6212; }

.saz-icerik strong, .sbd-icerik strong, .saz-icerik b, .sbd-icerik b { font-weight: 700; color: #1c2517; }
.saz-icerik em, .sbd-icerik em, .saz-icerik i, .sbd-icerik i { font-style: italic; }

.saz-icerik blockquote, .sbd-icerik blockquote {
  margin: 1.25em 0; padding: .75rem 1rem; border-left: 3px solid #a3b18a;
  background: #f2f4ef; border-radius: .5rem; color: #3f4a35;
}

.saz-icerik img, .sbd-icerik img { max-width: 100%; height: auto; border-radius: .75rem; margin: 1.25em 0; }
.saz-icerik hr, .sbd-icerik hr { margin: 2em 0; border: 0; border-top: 1px solid #e6e9e1; }

/* Tablolar yönetici HTML'inde geniş olabilir — sarmalayıcısı yoksa sayfayı
   yatay kaydırmasın diye blok kaydırma verilir. */
.saz-icerik table, .sbd-icerik table {
  width: 100%; margin: 1.25em 0; border-collapse: collapse; font-size: .9em;
  display: block; overflow-x: auto;
}
.saz-icerik :is(th,td), .sbd-icerik :is(th,td) {
  border: 1px solid #e6e9e1; padding: .5rem .75rem; text-align: left;
}
.saz-icerik th, .sbd-icerik th { background: #f2f4ef; font-weight: 600; color: #1c2517; }

.saz-icerik :is(code,kbd,samp), .sbd-icerik :is(code,kbd,samp) {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .875em;
  background: #f2f4ef; padding: .1em .35em; border-radius: .25rem;
}
.saz-icerik pre, .sbd-icerik pre {
  margin: 1.25em 0; padding: .875rem 1rem; background: #f2f4ef;
  border-radius: .5rem; overflow-x: auto;
}
.saz-icerik pre code, .sbd-icerik pre code { background: none; padding: 0; }

/* --------------------------------------------------------------------------
   Yazdırma
   -------------------------------------------------------------------------- */
@media print {
  [data-header-topbar], [data-header-main], #mega-menu, #search-modal,
  #mobile-menu, #mobile-categories, .saz-cart [data-cart-panel],
  .saz-cart [data-cart-backdrop], footer, #cookie-banner, #cookie-backdrop { display: none !important; }
  body { padding-top: 0 !important; }
  /* Sayfa içi eylem şeridi (Yazdır / Devam Et) kağıda basılmaz —
     hesap/sipariş detayı gibi yazdırılabilir sayfalar için. */
  .saz-baskida-gizle { display: none !important; }
}