/* ==========================================================================
   BAHO — TASARIM SİSTEMİ
   ==========================================================================
   Masaüstü ve mobilin paylaştığı tek dil. Her cihazda yüklenir.
   Yalnızca mobile ait kurallar baho-mobile.css'te durur.

   Yaklaşım: kurumsal kimlik korunur (terracotta paleti, logonun sıcaklığı),
   modernleşme tipografi değişiminden değil ARALIK, HİYERARŞİ ve BİLEŞEN
   tasarımından gelir. Şablon görünümünü yaratan şey font seçimi değil,
   sıkışık boşluklar ve zayıf hiyerarşidir.

   İÇİNDEKİLER
     1. Token'lar
     2. Temel (tipografi)
     3. Düzen
     4. Butonlar
     5. Kartlar
     6. Formlar
     7. Rozet / çip
     8. Yardımcılar
   ========================================================================== */


/* ==========================================================================
   1. TOKEN'LAR
   ========================================================================== */

:root {

  /* --- Marka: logodan ve mevcut kategori kartlarından türetildi --- */
  --c-brand:          #CE7757;  /* terracotta — kartların zemini, ana vurgu */
  --c-brand-deep:     #A85B3F;  /* basılı/hover hâli */
  --c-brand-bright:   #E8712A;  /* logonun turuncusu — ikincil vurgu */

  /* Terracotta'nın şeffaf tonları: zemin, kenarlık ve odak halkaları için.
     Sabit açık renk yerine alpha kullanmak koyu zeminlerde de tutar. */
  --c-brand-a08:      rgba(206, 119, 87, .08);
  --c-brand-a16:      rgba(206, 119, 87, .16);
  --c-brand-a32:      rgba(206, 119, 87, .32);

  /* --- Mürekkep --- */
  --c-ink:            #1A1A1A;  /* başlıklar — #333'ten daha keskin */
  --c-ink-body:       #3D3D3D;  /* gövde metni */
  --c-ink-muted:      #757079;  /* ikincil, yardımcı metin */
  --c-ink-faint:      #A9A29D;  /* placeholder, devre dışı */

  /* --- Yüzeyler ---
     Nötrler bilinçli olarak SICAK (kırmızıya kaçık). Saf gri (#F5F5F5)
     terracotta'nın yanında ölü ve ucuz durur; sıcak nötr paleti bir arada tutar. */
  --c-surface:        #FFFFFF;
  --c-surface-sunken: #FAF8F7;  /* sayfa zemini */
  --c-surface-warm:   #F5F0EC;  /* bölüm ayrımı, sakin bloklar */
  --c-line:           #E8E2DD;  /* kenarlık */
  --c-line-strong:    #D6CEC7;

  /* --- Durum --- */
  --c-success:        #2F8F4E;
  --c-success-bg:     #EAF5EE;
  --c-warning:        #B57A16;
  --c-warning-bg:     #FBF3E2;
  --c-danger:         #C0392B;
  --c-danger-bg:      #FBEDEB;

  /* --- Tipografi ---
     Montserrat ve Belleza korunuyor: marka sürekliliği. Modernlik
     harf aralığı, ağırlık kontrastı ve satır yüksekliğinden geliyor. */
  --f-body:    'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --f-display: 'Belleza', 'Montserrat', sans-serif;

  /* Ölçek — 1.200 (minör üçlü). Küçük ekranda sıkışmayacak kadar dar,
     hiyerarşiyi taşıyacak kadar geniş. */
  --t-xs:   11px;
  --t-sm:   13px;
  --t-base: 15px;   /* 14 değil 15: uzun metinde okunabilirlik farkı gerçek */
  --t-md:   17px;
  --t-lg:   20px;
  --t-xl:   25px;
  --t-2xl:  31px;
  --t-3xl:  39px;
  --t-4xl:  48px;

  --lh-tight: 1.15;   /* büyük başlıklar */
  --lh-snug:  1.35;   /* alt başlık, kart başlığı */
  --lh-body:  1.65;   /* gövde metni */

  /* Başlıklarda negatif harf aralığı — büyük puntoda en belirgin
     "profesyonel" sinyallerinden biri. */
  --ls-tight: -.02em;
  --ls-flat:   0;
  --ls-wide:   .06em;   /* küçük, büyük harfli etiketler */

  /* --- Aralık: 4px tabanlı --- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  /* --- Yuvarlaklık --- */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   22px;
  --r-full: 999px;

  /* --- Gölge ---
     Gri değil SICAK gölge: nötr siyah gölge terracotta yüzeylerde
     kirli/mor görünür. Kahverengi tabanlı alpha doğal durur. */
  --sh-sm: 0 1px 2px rgba(74, 48, 36, .06), 0 1px 3px rgba(74, 48, 36, .05);
  --sh-md: 0 2px 6px rgba(74, 48, 36, .07), 0 6px 16px rgba(74, 48, 36, .06);
  --sh-lg: 0 4px 12px rgba(74, 48, 36, .08), 0 16px 32px rgba(74, 48, 36, .08);
  --sh-focus: 0 0 0 3px var(--c-brand-a32);

  /* --- Hareket: kısa ve amaçlı. 300ms+ arayüzü ağır hissettirir. --- */
  --e-out: cubic-bezier(.2, .8, .3, 1);
  --d-fast: .12s;
  --d-base: .2s;

  /* --- Düzen --- */
  --w-container: 1280px;
  --w-prose:     68ch;   /* okunabilir metin genişliği üst sınırı */

  /* --- Dokunma hedefi (WCAG 2.5.5 / HIG) --- */
  --touch-min: 44px;

  /* --- Güvenli alan; viewport-fit=cover header.twig'de ayarlı --- */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
}


/* ==========================================================================
   2. TEMEL

   Bileşenler .b- önekli ve .b-scope altında kapsamlı.
   Sebebi: default temanın Bootstrap stilleri hâlâ devrede — henüz
   devralmadığımız sayfalar onlara muhtaç. Global eleman seçicisi
   yazarsak o sayfaları bozarız. Sayfaları devraldıkça kapsam genişler.
   ========================================================================== */

.b-scope *,
.b-scope *::before,
.b-scope *::after {
  box-sizing: border-box;
}

.b-scope {
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--c-ink-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.b-h1, .b-h2, .b-h3, .b-h4 {
  margin: 0;
  font-family: var(--f-body);
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}

.b-h1 { font-size: var(--t-3xl); }
.b-h2 { font-size: var(--t-2xl); }
.b-h3 { font-size: var(--t-xl); line-height: var(--lh-snug); }
.b-h4 { font-size: var(--t-md); line-height: var(--lh-snug); letter-spacing: var(--ls-flat); }

/* Belleza zarif ama ince; yalnızca büyük vitrin başlıklarında kullanılır,
   arayüz metninde değil. */
.b-display {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: var(--ls-flat);
}

/* Bölüm üstü küçük etiket — "YENİ GELENLER" gibi */
.b-eyebrow {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-brand);
}

.b-lead {
  font-size: var(--t-md);
  line-height: var(--lh-body);
  color: var(--c-ink-muted);
  max-width: var(--w-prose);
}

.b-muted { color: var(--c-ink-muted); }
.b-small { font-size: var(--t-sm); }

/*
  Çıplak `a` seçicisi BİLİNÇLİ olarak kullanılmıyor.

  `.b-scope a` (bir sınıf + bir eleman) spesifiklik olarak `.b-btn--primary`
  gibi tek sınıflı bileşen kurallarını EZER. İlk denemede tam bu oldu:
  hero'daki butonun yazısı terracotta zemin üzerinde terracotta çıktı,
  yani görünmez oldu.

  Tek butonu yamamak sorunu çözmez — aynı tuzak her `<a>` tabanlı bileşende
  (kart, çip, sekme) yeniden kurulur. Bu yüzden bağlantı rengi artık açık
  bir sınıfla veriliyor; bileşenler kendi rengine sahip.
*/
.b-link {
  color: var(--c-brand);
  text-decoration: none;
  transition: color var(--d-fast) var(--e-out);
}

.b-link:hover {
  color: var(--c-brand-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Serbest metin içindeki bağlantılar (açıklama, bilgi sayfaları) */
.b-prose a {
  color: var(--c-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.b-prose a:hover { color: var(--c-brand-deep); }

/* Klavye kullanıcısı için görünür odak; fare tıklamasında görünmez */
.b-scope :focus-visible {
  outline: none;
  box-shadow: var(--sh-focus);
  border-radius: var(--r-sm);
}


/* ==========================================================================
   3. DÜZEN
   ========================================================================== */

.b-container {
  width: 100%;
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

/* Bölüm dikey ritmi. Mevcut sitenin en görünür sorunlarından biri
   bölümlerin nefes alamamasıydı — burada cömert davranıyoruz. */
.b-section        { padding-block: var(--s-16); }
.b-section--tight { padding-block: var(--s-10); }
.b-section--warm  { background: var(--c-surface-warm); }

.b-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-8);
}

/* Otomatik duyarlı grid: sütun sayısını medya sorgusu olmadan kendi
   ayarlar. --min ile sütun taban genişliği değiştirilir. */
.b-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fill, minmax(var(--min, 240px), 1fr));
}

.b-stack > * + * { margin-top: var(--s-4); }


/* ==========================================================================
   4. BUTONLAR
   ========================================================================== */

.b-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);

  min-height: var(--touch-min);
  padding: 0 var(--s-6);

  font-family: var(--f-body);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;

  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;

  transition: background var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out),
              color var(--d-fast) var(--e-out),
              transform var(--d-fast) var(--e-out),
              box-shadow var(--d-fast) var(--e-out);
  -webkit-tap-highlight-color: transparent;
}

.b-btn:active { transform: translateY(1px); }

.b-btn[disabled],
.b-btn.is-disabled {
  opacity: .5;
  pointer-events: none;
}

/* Birincil eylem terracotta.
   Mevcut sitede "Sepete Ekle" YEŞİLDİ; markayla ilgisi yoktu ve
   terracotta'nın yanında uyumsuz duruyordu. Yeşil artık yalnızca
   başarı durumlarında kullanılıyor. */
.b-btn--primary {
  background: var(--c-brand);
  color: #fff;
  box-shadow: var(--sh-sm);
}

.b-btn--primary:hover {
  background: var(--c-brand-deep);
  color: #fff;
  box-shadow: var(--sh-md);
}

.b-btn--secondary {
  background: var(--c-surface);
  color: var(--c-ink);
  border-color: var(--c-line-strong);
}

.b-btn--secondary:hover {
  background: var(--c-surface-warm);
  border-color: var(--c-brand);
  color: var(--c-brand-deep);
}

.b-btn--ghost {
  background: transparent;
  color: var(--c-ink);
  padding-inline: var(--s-3);
}

.b-btn--ghost:hover {
  background: var(--c-brand-a08);
  color: var(--c-brand-deep);
}

.b-btn--lg    { min-height: 52px; padding-inline: var(--s-8); font-size: var(--t-base); }
.b-btn--sm    { min-height: 36px; padding-inline: var(--s-4); font-size: var(--t-xs); }
.b-btn--block { display: flex; width: 100%; }

/* Yalnızca ikon içeren buton — kare ve dokunma hedefine uygun */
.b-btn--icon {
  padding: 0;
  width: var(--touch-min);
  min-width: var(--touch-min);
}

.b-btn svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==========================================================================
   5. KARTLAR
   ========================================================================== */

.b-card {
  display: flex;
  flex-direction: column;

  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;

  transition: border-color var(--d-base) var(--e-out),
              box-shadow var(--d-base) var(--e-out),
              transform var(--d-base) var(--e-out);
}

.b-card--interactive:hover {
  border-color: var(--c-brand-a32);
  box-shadow: var(--sh-lg);
  transform: translateY(-2px);
}

/* Görsel kabının oranı SABİT: grid'de kartlar hizalanır ve görseller
   yüklenirken sayfa zıplamaz (CLS). */
.b-card-media {
  position: relative;
  aspect-ratio: var(--card-ratio, 1 / 1);
  background: var(--c-surface-warm);
  overflow: hidden;
}

.b-card-media img {
  width: 100%;
  height: 100%;
  /* contain: ürün fotoğrafları kırpılmamalı. cover kullanınca
     kupanın kulbu, biblonun tepesi kesiliyor. */
  object-fit: contain;
  display: block;
  transition: transform .4s var(--e-out);
}

.b-card--interactive:hover .b-card-media img { transform: scale(1.04); }

.b-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  flex: 1;
}

/* Ürün başlığı 2 satırda kesilir: kartların yüksekliği eşit kalır.
   Mevcut sitede tek satırda "..." ile kesiliyor ve isimler okunmuyordu. */
.b-card-title {
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--c-ink);
  margin: 0;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.b-price {
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: var(--ls-tight);
}

.b-price--old {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--c-ink-faint);
  text-decoration: line-through;
  margin-left: var(--s-2);
}

.b-price--new { color: var(--c-brand); }


/* ==========================================================================
   6. FORMLAR
   ========================================================================== */

.b-field { display: flex; flex-direction: column; gap: var(--s-2); }

.b-label {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-ink);
}

.b-input,
.b-select,
.b-textarea {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--s-3) var(--s-4);

  font-family: var(--f-body);
  /* iOS'ta 16px ALTINDAKİ input'a odaklanınca sayfa kendiliğinden zoom
     yapar ve düzen kayar. Mobilde en sık gözden kaçan "web sitesi"
     sinyallerinden biri budur — bu yüzden token değil sabit 16px. */
  font-size: 16px;
  color: var(--c-ink);

  background: var(--c-surface);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);

  transition: border-color var(--d-fast) var(--e-out),
              box-shadow var(--d-fast) var(--e-out);
  appearance: none;
}

.b-input::placeholder,
.b-textarea::placeholder { color: var(--c-ink-faint); }

.b-input:focus,
.b-select:focus,
.b-textarea:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: var(--sh-focus);
}

.b-input.is-invalid,
.b-select.is-invalid { border-color: var(--c-danger); }

.b-help  { font-size: var(--t-sm); color: var(--c-ink-muted); }
.b-error { font-size: var(--t-sm); color: var(--c-danger); }

.b-select {
  /* Yerleşik ok yerine kendi ikonumuz: tarayıcılar arası tutarlılık */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23757079' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
  background-size: 18px;
  padding-right: var(--s-10);
}


/* ==========================================================================
   7. ROZET / ÇİP
   ========================================================================== */

.b-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);

  padding: 3px var(--s-2);

  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.5;

  border-radius: var(--r-sm);
  background: var(--c-brand-a16);
  color: var(--c-brand-deep);
}

.b-badge--success { background: var(--c-success-bg); color: var(--c-success); }
.b-badge--warning { background: var(--c-warning-bg); color: var(--c-warning); }
.b-badge--danger  { background: var(--c-danger-bg);  color: var(--c-danger); }
.b-badge--solid   { background: var(--c-brand);      color: #fff; }

/* Filtre/sıralama seçenekleri için tıklanabilir çip */
.b-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);

  min-height: 36px;
  padding: 0 var(--s-4);

  font-size: var(--t-sm);
  font-weight: 500;

  background: var(--c-surface);
  color: var(--c-ink-body);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-full);
  cursor: pointer;

  transition: background var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out),
              color var(--d-fast) var(--e-out);
  -webkit-tap-highlight-color: transparent;
}

.b-chip:hover { border-color: var(--c-brand); color: var(--c-brand-deep); }

.b-chip.is-active {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: #fff;
}


/* ==========================================================================
   8. BREADCRUMB
   --------------------------------------------------------------------------
   PAYLAŞILAN bileşen, bu yüzden tasarım sisteminde duruyor.
   Önce baho-catalog.css'teydi ve ürün sayfası o dosyayı yüklemediği için
   breadcrumb OpenCart'ın varsayılan mavisine (#23A1D1) düşüyordu.
   Aynı hata .bh-rail'de de olmuştu: birden fazla sayfada kullanılan
   bileşen, tek bir sayfanın dosyasında tanımlanmaz.
   ========================================================================== */

/*
  Tek breadcrumb dili — HER SAYFADA.

  İki ayrı işaretleme var ve ikisi de aynı görünmek zorunda:
    .bh-crumbs   devraldığımız şablonlar
    ul.breadcrumb  OpenCart'ın kendi şablonları

  İkincisini de burada biçimlendirmek şart: henüz devralmadığımız her
  sayfada (site haritası, marka listesi, iade formu…) Bootstrap'ın gri
  kutulu, çevron oklu breadcrumb'ı çıkıyordu ve sayfa anında "OpenCart"
  gibi görünüyordu. Kural burada durduğu sürece yeni bir sayfa devralmayı
  beklemeden düzelmiş oluyor.

  Ayraç ::after ile basılıyor, boşluk gap'ten geliyor — Bootstrap'ın
  content:"/" + padding kalıbı iki ayrı yerden boşluk üretip hizayı
  bozuyordu.
*/
/* Yıkıcı eylem düğmesi — hesap silme gibi geri alınamaz işler.
   Terracotta ile karışmaması için ayrı bir kırmızı: markanın sıcak
   kırmızısı "sil" sinyali vermiyor. */
.b-btn--danger {
  background: var(--c-danger);
  color: #fff;
}

.b-btn--danger:hover {
  background: #9C2E22;
  color: #fff;
}


.bh-crumbs,
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);

  margin: 0;
  padding: var(--s-5) 0;
  list-style: none;

  background: none;
  border-radius: 0;

  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .02em;
}

.bh-crumb,
.breadcrumb > li,
.breadcrumb > li > a {
  color: var(--c-ink-muted);
  text-decoration: none;
  transition: color var(--d-fast) var(--e-out);
}

.bh-crumb:hover,
.breadcrumb > li > a:hover {
  color: var(--c-brand-deep);
  text-decoration: none;
}

.bh-crumb.is-current { color: var(--c-ink); }

/* Son öğe geçerli sayfa: vurgulu ve bağlantı gibi davranmıyor. */
.breadcrumb > li:last-child,
.breadcrumb > li:last-child > a {
  color: var(--c-ink);
  pointer-events: none;
}

.bh-crumb-sep { color: var(--c-ink-faint); }

/*
  DEFAULT TEMANIN ÇEVRON OKLARI SÖNDÜRÜLÜYOR.
  catalog/view/theme/default/stylesheet/stylesheet.css:359 her <li>'ye
  ::after ile 26x26 döndürülmüş bir kutu basıp gri çevron çiziyor ve
  li'lere 0 20px padding veriyor. Bu iki kural birlikte breadcrumb'ı
  "OpenCart" yapan şeyin kendisi.

  ::after'ı content:none ile susturmak YETMEZ — kural `border-right`,
  `transform` ve `position:absolute` da veriyor; content boşsa bile
  kutu çizilmeye devam eder. O yüzden display:none.
*/
.breadcrumb {
  border: 0;
}

.breadcrumb > li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0;
  text-shadow: none;
  white-space: nowrap;
}

.breadcrumb > li::after { display: none; }

.breadcrumb > li + li::before { content: none; padding: 0; }

/* Ayraç: her öğenin ARDINDAN, sondaki hariç. Ayrı bir ::before/::after
   yerine tek yön kullanmak, yukarıdaki display:none ile çakışmaması için
   ::before'a taşındı. */
.breadcrumb > li + li::before {
  content: "/";
  display: inline;
  color: var(--c-ink-faint);
  font-weight: 400;
}

/*
  Ana sayfa öğesi bir Font Awesome ev ikonu (i.fa-home) taşıyor.
  Font Awesome bu sayfalarda YÜKLÜ, yani ikon çıkıyor — ama ölçüsü
  metinden farklı ve satırı aşağı çekiyor. Metne çevriliyor: breadcrumb
  bir yol göstergesi, ikon burada bilgi taşımıyor.
*/
/*
  Ana sayfa öğesi bir Font Awesome ev ikonu taşıyor (breadcrumb.text
  içinde <i class="fa fa-home"></i> olarak geliyor — hem OpenCart'ın
  şablonlarında hem bizimkilerde, çünkü metin controller'dan öyle
  üretiliyor). Font Awesome yüklü, yani ikon çıkıyor; ama ölçüsü metinden
  farklı ve satır tabanını aşağı çekiyor. Metne çevriliyor: breadcrumb bir
  yol göstergesi, ikon burada bilgi taşımıyor.
*/
.breadcrumb i.fa,
.bh-crumbs i.fa { display: none; }

.breadcrumb > li:first-child > a::after,
.bh-crumbs > .bh-crumb:first-child::after { content: "Ana Sayfa"; }

@media (max-width: 767px) {
  .bh-crumbs,
  .breadcrumb { padding-block: var(--s-3); }
}


/* ==========================================================================
   9. YARDIMCILAR
   ========================================================================== */

.b-divider {
  height: 1px;
  background: var(--c-line);
  border: 0;
  margin: 0;
}

/* Görsel olarak gizli ama ekran okuyucuya açık */
.b-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
  Yatay kaydırmalı şerit — ilgili ürünler, son gezilenler vb.
  scroll-snap kaydırmayı "kartlar arasında duran" hâle getirir.

  ADLANDIRMA NOTU: bu her zaman YATAY bir şerittir. Ana sayfadaki ürün
  bölümü ise masaüstünde ızgara, mobilde şerit oluyor — o ayrı bir
  bileşen ve .bh-pgrid adını taşıyor. İkisi bir ara aynı ismi
  paylaşıyordu ve ürün sayfasındaki şeritler dikey diziliyordu.
*/
.bh-rail {
  display: flex;
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.bh-rail::-webkit-scrollbar { display: none; }
.bh-rail > * { scroll-snap-align: start; flex: none; }

/* "Hareketi azalt" tercihine saygı — erişilebilirlik gereği */
@media (prefers-reduced-motion: reduce) {
  .b-scope *,
  .b-scope *::before,
  .b-scope *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   10. BOŞ DURUM / BULUNAMADI SAYFASI
   --------------------------------------------------------------------------
   Paylaşılan bileşen: hem 404 hem boş sepet bunu kullanıyor (OpenCart'ın
   cart controller'ı sepet boşken error/not_found render ediyor).
   Bu yüzden sayfa dosyasında değil tasarım sisteminde duruyor.
   ========================================================================== */

.bh-empty-page {
  background: var(--c-surface-sunken);
  padding-bottom: var(--s-16);
}

.bh-empty-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);

  max-width: 520px;
  margin-inline: auto;
  padding-block: var(--s-16);
  text-align: center;
}

.bh-empty-ico {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;

  color: var(--c-brand);
  background: var(--c-brand-a08);
  border-radius: var(--r-full);
}

.bh-empty-ico svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bh-empty-box .b-lead { text-align: center; }

.bh-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
  margin-top: var(--s-2);
}


/* ==========================================================================
   MESAFELİ SATIŞ SÖZLEŞMESİ
   ==========================================================================
   Metin oc_information_description'da duruyor ve yer tutucularla yazılmış;
   doldurma işini baho_agreement.php yapıyor (model olayı). Buradaki stiller
   hem tam sayfada hem ödeme sayfasındaki modalda geçerli.

   MODAL NEDEN BOOTSTRAP: sözleşme bağlantısına (a.agree) OpenCart'ın
   common.js'i global bir delegated listener bağlıyor ve #modal-agree'yi
   kendisi kuruyor. Bizim akış JS'imiz o bağlantıya dokunmuyor — modal
   sayfada kalmayı sağladığı için yeni sekmeden daha iyi.
   ========================================================================== */

/* Sözleşme gövdesi: uzun hukuki metin, okunabilirlik önce gelir. */
.bh-ag {
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  color: var(--c-ink-body);
}

.bh-ag h2 {
  margin: var(--s-6) 0 var(--s-3);
  font-family: var(--f-body);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-brand-deep);
}

.bh-ag h2:first-child { margin-top: 0; }

.bh-ag h3 {
  margin: var(--s-4) 0 var(--s-2);
  font-family: var(--f-body);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--c-ink);
}

.bh-ag p { margin: 0 0 var(--s-3); }

.bh-ag ul {
  margin: 0 0 var(--s-3);
  padding-left: var(--s-5);
}

.bh-ag li { margin-bottom: var(--s-1); }

/* Taraf bilgileri: etiket/değer çiftleri. Tablo değil, çünkü dar ekranda
   tek kolona düşmesi gerekiyor. */
.bh-ag-dl {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
  gap: var(--s-1) var(--s-4);
  margin: 0 0 var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--c-surface-sunken);
}

.bh-ag-dl dt {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-faint);
}

.bh-ag-dl dd {
  margin: 0;
  font-weight: 600;
  color: var(--c-ink);
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .bh-ag-dl { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .bh-ag-dl dd { margin-bottom: var(--s-2); }
}

/* Değeri henüz girilmemiş alan (Mersis No gibi) boş bir <dd> olarak
   basılıyor; satırın çökmemesi için asgari yükseklik. */
.bh-ag-dl dd:empty::before { content: "—"; color: var(--c-ink-faint); }

.bh-ag-table {
  width: 100%;
  margin: var(--s-4) 0;
  border-collapse: collapse;
  font-size: var(--t-sm);
}

.bh-ag-table th,
.bh-ag-table td {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--c-line);
  text-align: left;
  vertical-align: top;
}

.bh-ag-table thead th {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-faint);
  border-bottom-color: var(--c-line-strong);
}

.bh-ag-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.bh-ag-table tfoot .bh-ag-total td { font-weight: 600; }

.bh-ag-table tfoot tr:last-child td {
  border-bottom: 0;
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--c-brand-deep);
}

.bh-ag-empty {
  margin: var(--s-4) 0;
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--c-line-strong);
  background: var(--c-surface-sunken);
  font-size: var(--t-sm);
  color: var(--c-ink-muted);
}

/*
  Sözleşme modalı — Bootstrap'in kendi görünümü bastırılıyor.
  Tablo dar ekranda kendi kapsayıcısında kaydırılıyor; gövde yatay
  kaydırmaz.
*/
#modal-agree .modal-dialog {
  max-width: 760px;
  width: calc(100% - var(--s-8));
}

#modal-agree .modal-content {
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}

#modal-agree .modal-header {
  align-items: center;
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--c-line);
}

#modal-agree .modal-title {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  font-weight: 400;
  letter-spacing: var(--ls-tight);
  color: var(--c-ink);
}

#modal-agree .modal-body {
  padding: var(--s-6);
  max-height: 70vh;
  overflow-y: auto;
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  color: var(--c-ink-body);
}

#modal-agree .modal-body > * { overflow-wrap: anywhere; }

/* Tablo taşarsa gövde değil tablo kaydırılır */
#modal-agree .modal-body .bh-ag-table { display: block; overflow-x: auto; }

#modal-agree .close {
  font-size: 28px;
  line-height: 1;
  opacity: .5;
}

#modal-agree .close:hover { opacity: 1; }


/* ==========================================================================
   GENEL BAŞARI / BİLGİ EKRANI
   ==========================================================================
   common/success dokuz ayrı route tarafından kullanılıyor: çıkış, kayıt,
   iade talebi, iletişim mesajı, ödeme başarısız, hediye çeki…

   NEDEN BURADA (baho.css) ve baho-order.css'te DEĞİL:
   o dosya yalnızca checkout/success ve account/order/info route'larında
   yükleniyor. Çıkış sayfası onu almadığı için tik SVG'si `fill: none`
   alamıyor ve dev bir SİYAH ÜÇGENE dönüşüyordu — path olduğu gibi
   dolduruluyor ve kapsayıcı genişliğine ölçekleniyor. Bu blok her sayfada
   yüklenen dosyada durmak zorunda.
   ========================================================================== */

.bh-msg {
  max-width: 560px;
  margin: var(--s-10) auto var(--s-16);
  padding: var(--s-10) var(--s-8);
  text-align: center;

  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--sh-sm);
}

.bh-msg h1 { margin: 0 0 var(--s-3); }

.bh-msg-ico {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin: 0 auto var(--s-5);
  border-radius: var(--r-full);
  background: var(--c-success-bg);
  color: var(--c-success);
}

.bh-msg-ico svg {
  width: 28px;
  height: 28px;
  /* fill:none ZORUNLU — yoksa path dolu bir üçgen olarak çiziliyor. */
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bh-msg-text {
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  color: var(--c-ink-muted);
}

.bh-msg-text p { margin: 0 0 var(--s-2); }

/* Kayıt sonrası "son bir adım" bilgisi: metin, düğmenin gerekçesi. */
.bh-msg-next {
  margin-top: var(--s-5);
  padding: var(--s-4);
  border-radius: var(--r-md);
  border-left: 3px solid var(--c-brand);
  background: var(--c-brand-a08);
  text-align: left;
}

.bh-msg-next-text {
  margin: 0;
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  color: var(--c-ink-body);
}

.bh-msg-next-text strong { color: var(--c-ink); }

.bh-msg-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-6);
}