/* ==========================================================================
   novatek — tema özel kuralları
   theme.css'ten (Tailwind, temalar/novatek/tasarim) SONRA yüklenir.
   Kural: her sınıf "nv-" önekli; global sınıf adı yazmak yasak (CSS/JS çakışma
   yasağı). Renkler DAİMA token'dan: oklch(var(--primary-600)) — hex yazma, palet
   tek yerden (tasarim/giris.css :root) değişsin.
   İstisna: OpenCart'ın hazır bastığı kabuklar (.nv-ust-sol içindeki dil/para
   birimi) — yalnızca kendi sarmalayıcıları altında.

   NOT: Tailwind artık Twig'leri tarayarak derleniyor; "alt kümede olmayan
   yardımcı" yazmaya GEREK YOK (sazbambudekor'dan kalan o bölüm silindi).
   Şablona yeni sınıf yazdıysan: cd temalar/novatek/tasarim && npm run css
   ========================================================================== */

.nv-gizli { display: none !important; }

/* --------------------------------------------------------------------------
   Duyuru çubuğundaki OpenCart dil / para birimi modülleri (Bootstrap kabuğu)
   -------------------------------------------------------------------------- */
.nv-ust-sol form { display: inline-block; margin: 0; }
.nv-ust-sol .btn-group { position: relative; display: inline-block; }
.nv-ust-sol .btn,
.nv-ust-sol button.btn-link {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .45rem; min-height: 22px;
  font-size: .72rem; font-weight: 500; line-height: 1;
  color: oklch(var(--background-50)); background: transparent; border: 0; border-radius: .35rem;
  text-decoration: none; cursor: pointer;
}
.nv-ust-sol .btn:hover { color: oklch(var(--primary-300)); }
.nv-ust-sol .dropdown-menu { min-width: 8.5rem; margin-top: .25rem; z-index: 60; }
.nv-ust-sol .dropdown-menu :is(a, button) { color: oklch(var(--foreground-800)); }
.nv-ust-sol img { height: 12px; width: auto; }

/* --------------------------------------------------------------------------
   Sepet paneli — açık durum (theme.js iki yolu da kullanır)
   -------------------------------------------------------------------------- */
.nv-cart [data-cart-panel].nv-acik { transform: translateX(0); }
.nv-cart [data-cart-backdrop].nv-acik { opacity: 1; pointer-events: auto; }
/* Kapalı panel klavye sırasından çıkar (transform odaklanabilirliği kaldırmaz) */
.nv-cart [data-cart-panel].translate-x-full {
  visibility: hidden;
  transition: transform .3s ease-out, visibility 0s linear .3s;
}

/* Akordeon: admin'den uzun cevap girilince kesilmesin */
[data-accordion] [data-accordion-panel] { max-height: none; }

/* Arama önerileri: satırlar Tailwind sınıflarıyla novatek.js aramaOnerileri() içinde üretilir
   (React SearchModal.tsx birebir) — buradaki eski nv-oneri-* kuralları 2026-10-01 kaldırıldı. */

/* Bal küpü alanı (form spam koruması) */
.website_alt, .nv-honeypot {
  position: absolute !important; left: -9999px !important;
  width: 1px !important; height: 1px !important; opacity: 0 !important;
}

/* --------------------------------------------------------------------------
   YÖNETİCİNİN GİRDİĞİ HTML — içerik tipografisi
   Tailwind preflight h1..h6 ve ul/ol'u sıfırlar; bilgi sayfası, blog, ürün
   açıklaması düz metin yığını olurdu. Kapsam DAR: yalnız sarmalayıcının içi.
   -------------------------------------------------------------------------- */
.nv-icerik { color: inherit; }
.nv-icerik > *:first-child { margin-top: 0; }
.nv-icerik > *:last-child  { margin-bottom: 0; }
.nv-icerik h1 { font-size: 1.75rem; line-height: 1.25; }
.nv-icerik h2 { font-size: 1.35rem; line-height: 1.3; padding-bottom: .35em; border-bottom: 1px solid oklch(var(--background-200)); }
.nv-icerik h3 { font-size: 1.15rem; line-height: 1.35; }
.nv-icerik :is(h4, h5, h6) { font-size: 1rem; line-height: 1.4; }
.nv-icerik :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-heading); font-weight: 700; color: oklch(var(--foreground-950)); margin: 1.6em 0 .6em; }
.nv-icerik p { margin: 0 0 1em; }
.nv-icerik ul { list-style: disc;    margin: 0 0 1em; padding-left: 1.5rem; }
.nv-icerik ol { list-style: decimal; margin: 0 0 1em; padding-left: 1.5rem; }
.nv-icerik li { margin: .35em 0; }
.nv-icerik li > :is(ul, ol) { margin: .35em 0; }
.nv-icerik a { color: oklch(var(--primary-700)); text-decoration: underline; text-underline-offset: 2px; }
.nv-icerik a:hover { color: oklch(var(--primary-800)); }
.nv-icerik :is(strong, b) { font-weight: 700; color: oklch(var(--foreground-950)); }
.nv-icerik :is(em, i) { font-style: italic; }
.nv-icerik blockquote { margin: 1.25em 0; padding: .75rem 1rem; border-left: 3px solid oklch(var(--primary-400)); background: oklch(var(--primary-50)); border-radius: .375rem; }
.nv-icerik img { max-width: 100%; height: auto; border-radius: .5rem; margin: 1.25em 0; }
.nv-icerik hr { margin: 2em 0; border: 0; border-top: 1px solid oklch(var(--background-200)); }
.nv-icerik table { width: 100%; margin: 1.25em 0; border-collapse: collapse; font-size: .9em; display: block; overflow-x: auto; }
.nv-icerik :is(th, td) { border: 1px solid oklch(var(--background-200)); padding: .5rem .75rem; text-align: left; }
.nv-icerik th { background: oklch(var(--background-100)); font-weight: 600; color: oklch(var(--foreground-950)); }
.nv-icerik tbody tr:nth-child(even) td { background: oklch(var(--background-100) / .5); }
.nv-icerik :is(code, kbd, samp) { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .875em; background: oklch(var(--background-100)); padding: .1em .35em; border-radius: .25rem; }
.nv-icerik pre { margin: 1.25em 0; padding: .875rem 1rem; background: oklch(var(--background-100)); border-radius: .5rem; overflow-x: auto; }
.nv-icerik pre code { background: none; padding: 0; }

/* --------------------------------------------------------------------------
   Erişilebilirlik: odak halkası + "İçeriğe atla"
   -------------------------------------------------------------------------- */
.nv-body :is(a, button, input, select, textarea):focus-visible { outline: 2px solid oklch(var(--primary-600)); outline-offset: 2px; }
/* Arama kutuları: odağı SARMALAYICI gösterir (focus-within halkası / modal başlığı) — girdinin
   kendi çerçevesi kutunun dışına taşan turuncu dikdörtgen çiziyordu (React'te yok). */
.nv-body :is([data-search-input], [data-nv-mega-ara], [data-nv-mobil-ara]):focus-visible { outline: none; }
.nv-atla {
  position: fixed; top: 0; left: 0; z-index: 100; transform: translateY(-120%);
  padding: .75rem 1.25rem; border-radius: 0 0 .5rem 0; text-decoration: none;
  background: oklch(var(--secondary-900)); color: #fff; font-weight: 600; font-size: .875rem; line-height: 1;
  transition: transform .15s ease-out;
}
.nv-atla:focus { transform: translateY(0); }
.nv-atla-hedef { outline: none; }
/* Yapışkan başlık (~130px masaüstü) odaklanan öğeyi örtmesin */
html { scroll-padding-top: 140px; }
@media (max-width: 767px) { html { scroll-padding-top: 130px; } }

/* --------------------------------------------------------------------------
   Kategori şeridi kenar solması (React: from-background-50 to-transparent)
   -------------------------------------------------------------------------- */
.nv-serit-sol  { background: linear-gradient(to right, oklch(var(--background-50)), transparent); }
.nv-serit-sag  { background: linear-gradient(to left,  oklch(var(--background-50)), transparent); }

/* --------------------------------------------------------------------------
   Yazdırma
   -------------------------------------------------------------------------- */
@media print {
  .nv-duyuru, .nv-header, #nv-mega, #search-modal, #nv-mobil-menu, #mobile-categories,
  .nv-cart [data-cart-panel], .nv-cart [data-cart-backdrop], .nv-alt-nav, .nv-yuzen,
  footer, #cookie-banner, #cookie-backdrop { display: none !important; }
  .nv-baskida-gizle { display: none !important; }
}

/* --------------------------------------------------------------------------
   Ürün kartı düğmeleri — KAPSAYICI SORGUSU (kart genişliği, ekran değil)
   Aynı kart 288px raf, 233px kategori ızgarası (xl 4 sütun) ve 173px mobilde basılır.
   Ekran kırılımıyla (md:flex-row) 233px kartta "Sepete Ekle"/"Hemen Al" yazıları kenara
   yapışıyordu. Kart ≥ 250px ise yan yana, değilse alt alta.
   -------------------------------------------------------------------------- */
.nv-kart { container-type: inline-size; }
@container (min-width: 250px) {
  .nv-kart-dugmeler { flex-direction: row; }
}

/* --------------------------------------------------------------------------
   Yüzen düğmeler çerez bandının üstünde (novatek.js yuzenCerez → --nv-cerez-h).
   `translate` bağımsız özellik: Tailwind'in hover:scale (transform) efektini ezmez.
   -------------------------------------------------------------------------- */
.nv-yuzen > a { translate: 0 calc(-1 * var(--nv-cerez-h, 0px)); transition: translate .3s ease-out, transform .15s; }