/* ============================================================
   intfa-modern — intfa-common.css
   Mockup style.css'in HEADER/FOOTER/COMMON kısmı birebir port.
   Reset + Variables + Header + Top bar + Promo + Nav + Mobil
   menü + Breadcrumb + Trust + Footer + Support.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue:        #2887C8;
  --blue-dark:   #1e6fa8;
  --blue-light:  #e8f4fd;
  --blue-mid:    #c8e0f5;
  --blue-soft:   #4FA3D1;
  --green:       #4E9433;
  --green-dark:  #3d7628;
  --green-light: #eaf4e6;
  --orange:      #ed8936;
  --orange-dark: #c05621;
  --orangered:        #FF4500;
  --orangered-dark:   #cc3700;
  --red:         #e53e3e;
  --red-dark:    #c53030;
  --red-light:   #fed7d7;
  --red-border:  #feb2b2;
  --warn:        #d69e2e;
  --warn-bg:     #fffbeb;
  --warn-border: #fbd38d;
  --rating:      #f6ad55;
  --bg:          #f5f7fa;
  --white:       #ffffff;
  --text:        #1a2533;
  --text-mid:    #4a5568;
  --text-light:  #718096;
  --border:      #e2e8f0;
  --radius:      10px;
  --max-w:       1280px;
  --shadow-sm:   0 1px 4px rgba(0,0,0,.07);
  --shadow-md:   0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:   0 8px 32px rgba(0,0,0,.13);
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --gray-50:     #f8f9fa;
  --gray-100:    #f1f3f5;
  --gray-200:    #e9ecef;
  --gray-300:    #dee2e6;
  --gray-400:    #ced4da;
  --gray-500:    #adb5bd;
  --gray-600:    #868e96;
  --gray-700:    #495057;
  --gray-800:    #343a40;
  --gray-900:    #212529;
  --text-muted:  #6c757d;
  --container-max: 1280px;
  --transition:  150ms ease;
}

html { max-width: 100%; }
body { max-width: 100%; overflow-x: clip; }
body { font-family: 'Poppins', sans-serif; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; }
a { text-decoration: none; color: inherit; }

/* ── ÜST BANTLAR: arka planları da site genişliğinde kalsın ───
   Renkli/border'lı bant zeminleri (promo, top-bar, header, navbar,
   breadcrumb, trust) tam viewport'a yayılmasın; içerik gibi --max-w ile
   sınırlanıp ortalansın. Geniş ekranda kenarlarda --bg görünür.
   <=1280px'de zaten %100 genişlik olduğundan görsel değişiklik yok. */
.promo-banner,
.top-bar,
.site-header,
.main-nav,
.bc,
.trust,
.site-footer,
.home-features,
.section,
.newsletter,
.related {
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
}

/* ── PROMO BANNER (kampanya/uyarı şeridi — en üst) ───────── */
.promo-banner { background: var(--blue-light); padding: 13px 0; text-align: center; border-bottom: 1px solid var(--blue-mid); }
.promo-banner-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.promo-banner i { color: var(--blue); font-size: 24px; }
.promo-banner span { color: var(--blue-dark); font-size: 17px; font-weight: 500; font-style: italic; }
.promo-banner strong { color: var(--blue-dark); font-weight: 700; }

/* ── TOP BAR (telefon/e-posta/hesabım) ────────────────────── */
.top-bar { background: #f4f4f2; border-bottom: 1px solid #e8e8e5; padding: 6px 0; }
.top-bar-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--text-mid);
}
.top-bar a { color: var(--text-mid); transition: color .15s; text-decoration: none; }
.top-bar a:hover { color: var(--blue); }
.tb-left, .tb-right { display: flex; gap: 18px; align-items: center; }
.tb-left i, .tb-right i { margin-right: 6px; font-size: 16px; color: var(--blue); vertical-align: -2px; }
.tb-left .fa-square-whatsapp, .tb-right .fa-square-whatsapp { font-size: 19px; }

/* ── HEADER ───────────────────────────────────────────────── */
header { background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; left: 0; right: 0; width: 100%; z-index: 200; box-shadow: var(--shadow-sm); }
.header-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 24px;
  height: 107px; display: grid;
  grid-template-columns: 200px 1fr auto;
  align-items: center; gap: 28px;
}
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo img { width: 180px; max-width: 180px; height: auto; display: block; }
.search-wrap { position: relative; width: 100%; }
/* Phase 14.37: mobil sticky arama bari — desktop'ta gizli, 768 alti goruntulenir */
.mobile-search-sticky { display: none; }
/* Specificity: header parent eklenerek alt taraftaki form base
   (.form-control, input[type="text"], ...) kuralının override etmesi engellendi.
   Phase 14.37: mobile-search-sticky de aynı stili paylaşıyor. */
header .search-wrap input,
.mobile-search-sticky .search-wrap input {
  width: 100%; height: 42px; border: 1.5px solid var(--border); border-radius: 8px;
  padding: 0 46px 0 16px; font-family: 'Poppins', sans-serif; font-size: 14px;
  color: var(--text); outline: none; transition: border-color .2s; background: var(--bg);
}
header .search-wrap input:focus,
.mobile-search-sticky .search-wrap input:focus { border-color: var(--blue); background: #fff; }
header .search-wrap input::placeholder,
.mobile-search-sticky .search-wrap input::placeholder { color: var(--text-light); font-size: 14px; }
.search-btn {
  position: absolute; right: 0; top: 0; width: 42px; height: 42px;
  background: var(--blue); border: none; border-radius: 0 8px 8px 0;
  color: #fff; cursor: pointer; display: flex; align-items: center;
  justify-content: center; font-size: 14px; transition: background .2s;
}
.search-btn:hover { background: var(--blue-dark); }
.header-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.hact {
  width: 40px; height: 40px; border-radius: 8px; border: none;
  background: none; color: var(--text-mid); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; position: relative; transition: background .15s;
}
.hact:hover { background: var(--bg); color: var(--blue); }
.hact .cnt {
  position: absolute; top: 2px; right: 2px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  line-height: 14px; /* height - 2*border; tek satir vertical center */
  background: var(--blue); color: #fff;
  border: 2px solid #fff; border-radius: 9px;
  font-size: 10px; font-weight: 700;
  display: inline-block; text-align: center;
  box-sizing: border-box;
  font-variant-numeric: tabular-nums;
}
.btn-cart {
  display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 18px;
  background: var(--blue); color: #fff; border: none; border-radius: 8px;
  font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .2s; white-space: nowrap;
  text-decoration: none;
}
.btn-cart:hover { background: var(--blue-dark); color: #fff; }

/* ── NAV / MEGA MENÜ ──────────────────────────────────────── */
nav { background: var(--blue); position: relative; z-index: 190; }
/* Nav-inner: dar viewport'larda 2. satıra wrap eder (height değil min-height). */
.nav-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; min-height: 53px; }
.nav-item { position: relative; height: 53px; display: flex; align-items: center; }
/* Wide mega-menu host item: drop nav genişliği boyunca açılsın */
.nav-item--wide { position: static; }
.nav-link {
  display: flex; align-items: center; gap: 4px; height: 53px; padding: 0 14px;
  color: rgba(255,255,255,.88); font-size: 13px; font-weight: 500;
  transition: all .15s; white-space: nowrap; cursor: pointer; user-select: none;
  text-decoration: none;
}
.nav-link i.ca { font-size: 9px; margin-top: 1px; transition: transform .2s; }
.nav-item:hover .nav-link { color: #fff; background: rgba(255,255,255,.1); }
.nav-item:hover .ca { transform: rotate(180deg); }
.nav-link.active { color: #fff; background: rgba(255,255,255,.12); }

.drop {
  position: absolute; top: 53px; left: 0; background: #fff;
  border: 1px solid var(--border); border-top: 3px solid var(--blue);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-lg); padding: 8px 0; min-width: 220px;
  display: none; z-index: 400;
}
.nav-item:hover .drop { display: block; }
/* Wide mega-menu: nav-inner genişliği boyunca tam açılır,
   içerik max-width var(--max-w) ile sınırlanıp ortalanır. */
.drop.wide {
  left: 0; right: 0; width: 100%;
  display: none; padding: 24px 0;
  flex-direction: column;
}
.nav-item:hover .drop.wide { display: flex; }
.drop-wide-inner {
  width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 24px;
  display: flex; flex-direction: row;
}
/* Sagdaki nav-itemlerin basit dropdown'i viewport disina tasmasin: 6. nav-item ve sonrasi
   icin drop parent'in sag kenarina hizalanir, sola dogru acilir.
   Wide drop bu kuraldan haric (zaten tam genislikte). */
.nav-item:not(.nav-item--wide):nth-child(n+6) .drop {
  left: auto; right: 0;
}
.drop-col { flex: 1; padding: 0 20px; border-right: 1px solid var(--border); }
.drop-col:last-child { border-right: none; }
.drop-col-head {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .8px; color: var(--blue);
  margin-bottom: 10px; padding-bottom: 7px; border-bottom: 2px solid var(--blue-light);
}
.drop-link { display: flex; align-items: center; gap: 7px; padding: 7px 20px; font-size: 13px; color: var(--text-mid); transition: all .15s; text-decoration: none; }
.drop-link:hover { background: var(--blue-light); color: var(--blue); }
.drop-link i { font-size: 9px; color: var(--green); width: 12px; }
.drop-col-link { display: flex; align-items: center; gap: 7px; padding: 6px 0; font-size: 13px; color: var(--text-mid); transition: color .15s; text-decoration: none; }
.drop-col-link:hover { color: var(--blue); }
.drop-col-link i { font-size: 9px; color: var(--green); width: 12px; }

/* ── BREADCRUMB ───────────────────────────────────────────── */
.bc { background: #fff; border-bottom: 1px solid var(--border); }
.bc-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 9px 24px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12px; color: var(--text-light);
}
/* Ara linkler (ana sayfa, kategoriler) ve ayraçlar bütün kalır; sığmazsa
   öğe komple alt satıra geçer (kelime ortasından kırılmaz). */
.bc-inner a { color: var(--text-light); transition: color .15s; white-space: nowrap; flex-shrink: 0; }
.bc-inner a:hover { color: var(--blue); }
.bc-inner .sep { font-size: 8px; flex-shrink: 0; }
/* Son öğe (uzun ürün adı) gerekirse kelime bazında kırılıp çok satıra yayılır. */
.bc-inner .cur { color: var(--text); font-weight: 500; min-width: 0; overflow-wrap: anywhere; }

/* ── TRUST BAR ────────────────────────────────────────────── */
.trust { background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-top: 16px; }
.trust-in {
  max-width: var(--max-w); margin: 0 auto; padding: 16px 24px;
  display: grid; grid-template-columns: repeat(4,1fr); gap: 16px;
}
.ti { display: flex; align-items: center; gap: 12px; }
.ti-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ti-icon.b { background: var(--blue-light); }
.ti-icon.g { background: var(--green-light); }
.ti-icon i { font-size: 17px; }
.ti-icon.b i { color: var(--blue); }
.ti-icon.g i { color: var(--green); }
.ti-txt strong { display: block; font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.ti-txt span { font-size: 11px; color: var(--text-light); }

/* ── FOOTER ───────────────────────────────────────────────── */
footer { background: #f4f4f2; border-top: 1px solid #e8e8e5; color: var(--text-mid); }
/* Phase 14.11: footer logo inline style'lar class'a alindi */
.footer-logo { margin-bottom: 12px; }
.footer-logo img { width: 150px; height: auto; display: block; opacity: .85; }

/* Phase 14.11: banner module — swiper kaldirildi, basit gorsel listesi.
   Birden fazla banner varsa flex column dikey stack. */
.banner-stack { display: flex; flex-direction: column; gap: 12px; }
.banner-item { display: block; line-height: 0; }
.banner-item img { width: 100%; height: auto; display: block; border-radius: var(--radius); }

/* ============================================================
   Phase 14.14: Modernize edilen yardımcı sayfa stilleri
   (auth, hesap, bilgi, sepet, error, sitemap)
   ============================================================ */

/* Sayfa başlığı — modern tüm yardımcı sayfalarda standart h1 */
.page-title {
  font-size: 24px; font-weight: 700; color: var(--text);
  margin: 0 0 18px; line-height: 1.2; letter-spacing: -.3px;
}
@media (max-width: 768px) { .page-title { font-size: 20px; margin-bottom: 14px; } }

/* Standart kart (auth formları, hesap blokları, bilgi içeriği) */
.card-box {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 24px; box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
}
.card-box h2,
.card-box h3 { font-size: 17px; font-weight: 700; color: var(--text); margin: 0 0 12px; }
.card-box p { font-size: 13px; color: var(--text-mid); line-height: 1.6; margin: 0 0 12px; }
.card-box p:last-child { margin-bottom: 0; }

/* İki sütunlu auth grid (login/register yan yana) */
.auth-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin-bottom: 24px;
}
@media (max-width: 768px) { .auth-grid { grid-template-columns: 1fr; } }

/* Form satırları (auth + hesap formları) */
.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-row label { font-size: 12px; font-weight: 600; color: var(--text-mid); }
.form-row .opt-input,
.form-row .opt-select,
.form-row .opt-textarea { width: 100%; }
.form-row .opt-textarea { min-height: 90px; }
.form-row .help { font-size: 11px; color: var(--text-light); margin-top: 2px; }
.form-row.required label::after { content: ' *'; color: var(--red); }

/* Alert kutuları — modern (Bootstrap-uyumlu .alert da var; bunlar kart-style) */
.alert-box {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--radius);
  font-size: 13px; line-height: 1.5;
  margin-bottom: 14px;
  border: 1px solid;
}
.alert-box i { font-size: 14px; flex-shrink: 0; margin-top: 2px; }
.alert-box.success { background: var(--green-light); color: var(--green-dark); border-color: var(--green); }
.alert-box.error   { background: var(--red-light); color: var(--red-dark); border-color: var(--red-border); }
.alert-box.info    { background: var(--blue-light); color: var(--blue-dark); border-color: var(--blue-mid); }
.alert-box.warn    { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-border); }

/* Genel sayfa wrapper'lari — Phase 14.17: tum sayfalar header/footer ile ayni
   dis genislikte (var(--max-w) = 1280px), icerik tam genislige yayilir.
   Onceki child-cap rule'u (760/1080) icerigi sola/saga kaydirip "her sayfada
   ayni genislik" tutarliligini bozuyordu. Form layout'larinda gerekiyorsa
   form'un kendisine inline veya class-bazli max-width verilir (ornek:
   .auth-grid login sayfasinda 760'a kadar dar).

   Phase 14.19: .page ve .page.full intfa-category.css'ten common.css'e
   tasindi cunku account sayfalari (order/return/transaction/reward/download/
   wishlist/etc) kategori CSS'i yuklemiyor; .page wrapper'inda padding/
   max-width yoksa icerik tum sayfada sol kenara yayiliyordu. */
.page {
  max-width: var(--max-w); margin: 0 auto;
  padding: 18px 24px 56px;
  display: grid; grid-template-columns: 210px 1fr; gap: 18px; align-items: start;
}
.page.full { grid-template-columns: 1fr; }

.page-narrow,
.page-medium {
  max-width: var(--max-w); margin: 0 auto;
  padding: 18px 24px 56px;
}
@media (max-width: 768px) {
  .page-narrow, .page-medium { padding: 14px 16px 40px; }
}
/* Login/affiliate-login: 2-sutun auth-grid 1280'de cok genis durur, 760'a sinirla. */
.page-narrow .auth-grid {
  max-width: 760px; margin-left: auto; margin-right: auto;
}

/* Hesap menüsü (account sidebar / dashboard) */
.acc-menu {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm);
  position: sticky; top: 130px;
}
.acc-menu .acc-head {
  background: var(--blue); color: #fff;
  padding: 11px 14px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .7px;
  display: flex; align-items: center; gap: 7px;
}
.acc-menu a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; font-size: 12px; color: var(--text-mid);
  text-decoration: none; border-left: 3px solid transparent;
  border-bottom: 1px solid var(--border);
  transition: all .15s;
}
.acc-menu a:last-child { border-bottom: none; }
.acc-menu a:hover { background: var(--bg); color: var(--blue); border-left-color: var(--blue); }
.acc-menu a.active { color: var(--blue); font-weight: 600; background: var(--blue-light); border-left-color: var(--blue); }
.acc-menu a i { font-size: 11px; opacity: .6; }

/* Tablo (sipariş listesi, iade, transaction vs.) */
.tbl-box {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
}
.tbl-box table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl-box thead th {
  background: var(--bg); color: var(--text-mid);
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; text-align: left;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.tbl-box tbody td {
  padding: 11px 14px; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.tbl-box tbody tr:last-child td { border-bottom: none; }
.tbl-box tbody tr:hover td { background: var(--bg); }
.tbl-box .tbl-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.tbl-empty { padding: 32px 24px; text-align: center; color: var(--text-light); font-size: 14px; }

/* Tablo -> Kart donusumu (mobile, opt-in) — Phase 14.41/14.42: wishlist + cart icin */
@media (max-width: 600px) {
  .tbl-box.mobile-cards {
    overflow: visible; box-shadow: none; border: none;
    background: transparent; margin-bottom: 16px;
  }
  .tbl-box.mobile-cards table,
  .tbl-box.mobile-cards thead,
  .tbl-box.mobile-cards tbody,
  .tbl-box.mobile-cards tr,
  .tbl-box.mobile-cards td { display: block; width: 100%; box-sizing: border-box; }
  .tbl-box.mobile-cards thead { position: absolute; left: -9999px; top: -9999px; }
  .tbl-box.mobile-cards tbody tr {
    margin-bottom: 12px; padding: 12px;
    border: 1px solid var(--border); border-radius: 8px;
    background: #fff; box-shadow: var(--shadow-sm);
  }
  .tbl-box.mobile-cards tbody tr:hover td { background: transparent; }
  .tbl-box.mobile-cards td {
    border: none; padding: 5px 0;
    text-align: left !important; white-space: normal !important;
  }
  .tbl-box.mobile-cards td:before {
    content: attr(data-label);
    display: inline-block; min-width: 90px; font-weight: 600;
    color: var(--text-light); font-size: 11px; text-transform: uppercase;
    letter-spacing: .5px; margin-right: 8px; vertical-align: top;
  }
  /* Resim hucresi: label gizli, merkezde, alt border */
  .tbl-box.mobile-cards td.td-image:before { display: none; }
  .tbl-box.mobile-cards td.td-image {
    text-align: center !important; padding: 0 0 10px;
    margin-bottom: 8px; border-bottom: 1px solid var(--border);
  }
  .tbl-box.mobile-cards td.td-image img {
    width: 90px !important; height: 90px !important;
  }
  /* Aksiyon hucresi: label gizli, butonlar saga yasli */
  .tbl-box.mobile-cards td.td-actions:before { display: none; }
  .tbl-box.mobile-cards td.td-actions {
    display: flex !important; gap: 6px; justify-content: flex-end;
    padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--border);
  }
}

/* Çift sütun grid (hesap blokları yan yana) */
.acc-grid {
  display: grid; grid-template-columns: 220px 1fr; gap: 18px;
  align-items: start;
}
@media (max-width: 768px) {
  .acc-grid { grid-template-columns: 1fr; }
  .acc-menu { position: static; }
}

/* Buton varyasyonları — Phase 14.14/14.16: site genelinde modern primary + outline +
   danger + secondary. .btn-primary tam standalone (height/radius/padding kendinde),
   bootstrap fallback olan eski .btn rule'una bağlı kalmıyor — <a class="btn-primary">
   ve <button class="btn-primary"> aynı görünür. */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 44px; padding: 0 22px;
  background: var(--blue); color: #fff;
  border: 0; border-radius: 9px;
  font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600;
  line-height: 1; cursor: pointer; text-decoration: none;
  transition: background .15s, transform .1s;
}
.btn-primary:hover, .btn-primary:focus { background: var(--blue-dark); color: #fff; text-decoration: none; }
.btn-primary:active { transform: translateY(1px); }
.btn-primary[disabled], .btn-primary.disabled { opacity: .55; cursor: not-allowed; }

.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 16px;
  background: #fff; color: var(--blue);
  border: 1.5px solid var(--blue); border-radius: 8px;
  font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .15s; text-decoration: none;
}
.btn-outline:hover { background: var(--blue); color: #fff; }
.btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 16px;
  background: var(--red); color: #fff;
  border: 0; border-radius: 8px;
  font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .15s; text-decoration: none;
}
.btn-danger:hover { background: var(--red-dark); color: #fff; }
.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 16px;
  background: var(--bg); color: var(--text-mid);
  border: 1px solid var(--border); border-radius: 8px;
  font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .15s; text-decoration: none;
}
.btn-secondary:hover { background: var(--blue-light); color: var(--blue); border-color: var(--blue); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 12px; }
.btn-block { width: 100%; }

/* 404 / boş durum */
.empty-page {
  text-align: center; padding: 60px 24px;
}
.empty-page i { font-size: 64px; color: var(--blue-mid); margin-bottom: 18px; }
.empty-page h1 { font-size: 28px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.empty-page p { font-size: 14px; color: var(--text-light); margin-bottom: 22px; max-width: 520px; margin-left: auto; margin-right: auto; line-height: 1.6; }

/* Hesap dashboard — 2-3 kolonlu grid. card-box başlıkları icon + text */
.acc-dash-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin-bottom: 24px;
}
@media (max-width: 1024px) { .acc-dash-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .acc-dash-grid { grid-template-columns: 1fr; } }
.acc-dash-grid .card-box h2 { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.acc-dash-grid .card-box h2 i { font-size: 16px; }

/* Hesap link listesi (.card-box içinde) */
.acc-link-list { list-style: none; padding: 0; margin: 0; }
.acc-link-list li { border-top: 1px solid var(--border); }
.acc-link-list li:first-child { border-top: 0; }
.acc-link-list a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 4px; font-size: 13px; color: var(--text-mid);
  text-decoration: none; transition: color .15s, padding .15s;
}
.acc-link-list a:hover { color: var(--blue); padding-left: 8px; }
.acc-link-list a i { width: 16px; font-size: 12px; color: var(--text-light); }
.acc-link-list a:hover i { color: var(--blue); }

/* Adres listesi grid (account/address_list) — 2 kolon adres kartları */
.acc-addr-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 600px) { .acc-addr-grid { grid-template-columns: 1fr; } }

/* Sipariş ozeti grid — 2 sütun (order_info üst blok ve adresler) */
.order-summary-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-bottom: 14px;
}
.order-summary-grid p { font-size: 13px; color: var(--text-mid); margin: 0 0 6px; line-height: 1.6; }
.order-summary-grid p strong { color: var(--text); }
@media (max-width: 600px) { .order-summary-grid { grid-template-columns: 1fr; } }

/* Information rich-text içerik — admin'den girilen description HTML'i */
.info-content { font-size: 14px; line-height: 1.7; color: var(--text-mid); }
.info-content h2, .info-content h3 { color: var(--text); margin: 18px 0 10px; }
.info-content h2 { font-size: 18px; }
.info-content h3 { font-size: 16px; }
.info-content p { margin: 0 0 12px; }
.info-content ul, .info-content ol { margin: 0 0 12px 20px; }
.info-content a { color: var(--blue); }
.info-content img { max-width: 100%; height: auto; border-radius: var(--radius); }

/* İletişim sayfası — bilgi grid + lokasyon accordion */
.contact-info-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.contact-info-grid .ci-block {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 0;
}
.contact-info-grid .ci-block i { font-size: 18px; color: var(--blue); margin-top: 2px; flex-shrink: 0; }
.contact-info-grid .ci-block strong { display: block; font-size: 12px; color: var(--text); margin-bottom: 3px; }
.contact-info-grid .ci-block span,
.contact-info-grid .ci-block a { font-size: 13px; color: var(--text-mid); }
.contact-info-grid .ci-block a:hover { color: var(--blue); }

.contact-locations { margin-top: 18px; }
.contact-locations details {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 10px; box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.contact-locations details[open] { border-color: var(--blue); }
.contact-location-summary {
  padding: 14px 18px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--text);
  list-style: none; display: flex; align-items: center; justify-content: space-between;
}
.contact-location-summary::-webkit-details-marker { display: none; }
.contact-location-summary::after { content: '+'; font-size: 18px; color: var(--text-light); }
details[open] .contact-location-summary::after { content: '−'; }
.contact-locations details > div { padding: 0 18px 16px; }

/* Sitemap — 2-3 kolon grid + alt kategori girinti */
.sitemap-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.sitemap-tree { font-size: 13px; }
.sitemap-subtree { padding-left: 16px; border-left: 1px solid var(--border); margin: 4px 0 8px; }
.sitemap-subtree a { padding: 6px 4px; font-size: 12px; }

/* Sepet sayfası — Phase 14.15: 2-sütun grid (sol ürünler, sağ sticky toplam).
   Phase 14.16: max-w header/footer ile ayni (var(--max-w)). */
.cart-page {
  max-width: var(--max-w); margin: 0 auto; padding: 18px 24px 56px;
}
.cart-grid {
  display: grid; grid-template-columns: 1fr 320px;
  gap: 18px; align-items: start;
}
.cart-main { min-width: 0; }
.cart-sidebar { position: sticky; top: 130px; }
@media (max-width: 900px) {
  .cart-grid { grid-template-columns: 1fr; }
  .cart-sidebar { position: static; }
}
@media (max-width: 768px) {
  .cart-page { padding: 14px 14px 40px; }
}

.cart-qty-ctl {
  display: inline-flex; align-items: center; gap: 6px;
}
.cart-qty-input {
  width: 56px; height: 32px; text-align: center; padding: 0 4px;
  font-weight: 600;
}
.label-info-pill {
  display: inline-block;
  background: var(--blue-light); color: var(--blue-dark);
  padding: 2px 8px; border-radius: 12px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
}

.cart-totals { padding: 18px !important; }
.cart-total-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; font-size: 13px; color: var(--text-mid);
  border-bottom: 1px solid var(--border);
}
.cart-total-row:last-child { border-bottom: 0; }
.cart-total-row strong { color: var(--text); }
.cart-total-final {
  font-size: 15px; padding-top: 12px; margin-top: 4px;
  border-top: 2px solid var(--blue); border-bottom: 0;
}
.cart-total-final span:last-child { color: var(--blue); font-weight: 700; font-size: 18px; }

/* ============================================================
   Phase 14.16: Ortak input + button compose (.input-bar)
   Header arama çubuğu (.search-wrap) ile aynı görsel pattern.
   Input solda flex, buton sağda yapışık. Border ve background
   kapsayıcıdan; inner elementler şeffaf. focus-within ile odakta
   kapsayıcı border'ı maviye döner.
   Kullanım örnekleri: kupon kodu, hediye çeki, abonelik formu,
   bülten kayıt, kargo posta kodu sorgu, vs.
   ============================================================ */
.input-bar {
  display: flex; align-items: stretch;
  border: 1.5px solid var(--border); border-radius: 9px;
  background: var(--bg); overflow: hidden;
  transition: border-color .15s, background .15s;
  width: 100%;
}
.input-bar:focus-within { border-color: var(--blue); background: #fff; }
.input-bar > input,
.input-bar > select,
.input-bar > textarea,
.input-bar > .form-control,
.input-bar > .opt-input,
.input-bar > .opt-select {
  flex: 1 1 auto; min-width: 0;
  height: 42px; padding: 0 16px;
  border: 0; outline: none; background: transparent;
  font-family: 'Poppins', sans-serif; font-size: 14px; color: var(--text);
  box-shadow: none;
}
.input-bar > input::placeholder,
.input-bar > textarea::placeholder { color: var(--text-light); font-size: 14px; }
.input-bar > textarea { padding: 10px 16px; height: auto; min-height: 42px; resize: vertical; }
.input-bar > button,
.input-bar > .btn,
.input-bar > input[type="submit"],
.input-bar > input[type="button"],
.input-bar > a.btn-primary {
  flex: 0 0 auto;
  height: 42px; min-width: 42px; padding: 0 18px;
  background: var(--blue); color: #fff;
  border: 0; border-radius: 0;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; line-height: 1;
  text-decoration: none; transition: background .15s;
}
.input-bar > button:hover,
.input-bar > .btn:hover,
.input-bar > input[type="submit"]:hover,
.input-bar > a.btn-primary:hover { background: var(--blue-dark); color: #fff; }

/* OpenCart core'un urettigi .input-group (kupon, hediye ceki, kargo modulleri,
   header search core wrapper'i) ayni .input-bar gorsel pattern'ine uysun.
   Phase 13.2'de Bootstrap kaldirildi, .input-group default flex degildi
   ve butonlar input ile yan yana stillenmemisti. */
.input-group { /* alias: ayni stiller */
  display: flex; align-items: stretch;
  border: 1.5px solid var(--border); border-radius: 9px;
  background: var(--bg); overflow: hidden;
  width: 100%;
}
.input-group:focus-within { border-color: var(--blue); background: #fff; }
.input-group > .form-control,
.input-group > input,
.input-group > select {
  flex: 1 1 auto; min-width: 0;
  height: 42px; padding: 0 16px;
  border: 0; outline: none; background: transparent;
  font-family: 'Poppins', sans-serif; font-size: 14px; color: var(--text);
  box-shadow: none;
}
.input-group > .input-group-btn { display: flex; flex-shrink: 0; }
.input-group > .input-group-btn > .btn,
.input-group > .input-group-btn > input[type="submit"],
.input-group > .input-group-btn > button,
.input-group > .input-group-addon {
  height: 42px; min-width: 42px; padding: 0 18px;
  background: var(--blue); color: #fff;
  border: 0; border-radius: 0;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; line-height: 1;
  text-decoration: none; transition: background .15s;
}
.input-group > .input-group-btn > .btn:hover,
.input-group > .input-group-btn > input[type="submit"]:hover,
.input-group > .input-group-btn > button:hover { background: var(--blue-dark); color: #fff; }
.input-group > .input-group-addon {
  background: var(--bg); color: var(--text-mid);
  border-right: 1px solid var(--border);
  font-weight: 500;
}

/* Sepetteki modüller (kupon, hediye çeki, kargo) — Bootstrap panel-group yerine
   modern accordion. .cart-modules core OpenCart panel HTML'ini styling'le sarar. */
.cart-modules { margin-bottom: 12px; }
.cart-modules .panel,
.cart-modules .panel-default {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 10px; overflow: hidden; box-shadow: var(--shadow-sm);
}
.cart-modules .panel-heading {
  padding: 14px 18px; background: #fff; border-bottom: 0;
  font-size: 14px; font-weight: 600;
}
.cart-modules .panel-heading a {
  color: var(--text); text-decoration: none;
  display: flex; align-items: center; justify-content: space-between;
}
.cart-modules .panel-heading a:hover { color: var(--blue); }
.cart-modules .panel-heading .fa-caret-down,
.cart-modules .panel-heading i.fas,
.cart-modules .panel-heading i.fa { transition: transform .2s; font-size: 12px; }
.cart-modules .panel-heading a.collapsed .fa-caret-down,
.cart-modules .panel-heading a.collapsed i.fa { transform: rotate(-90deg); }
.cart-modules .panel-body { padding: 16px 18px 18px; border-top: 1px solid var(--border); }
.cart-modules .panel-body label,
.cart-modules .panel-body .control-label {
  display: block; font-size: 12px; font-weight: 600; color: var(--text-mid);
  margin-bottom: 6px;
}
/* cart-modules formunda Bootstrap col-* + control-label reset — modern blok layout */
.cart-modules .form-group { margin: 0 0 12px; }
.cart-modules [class*="col-sm-"],
.cart-modules [class*="col-md-"],
.cart-modules [class*="col-xs-"] {
  width: 100%; padding: 0; float: none; max-width: none;
}
.cart-modules .panel-body label,
.cart-modules .panel-body .control-label {
  display: block; padding: 0; margin: 0 0 6px;
  font-size: 12px; font-weight: 600; color: var(--text-mid);
  text-align: left;
}

/* Standalone input/select/textarea (input-group disinda) — modern stil */
.cart-modules .panel-body > input[type="text"],
.cart-modules .panel-body > input[type="email"],
.cart-modules .panel-body > input[type="number"],
.cart-modules .panel-body > select,
.cart-modules .panel-body > textarea,
.cart-modules .panel-body > .form-control {
  height: 44px; padding: 0 14px; width: 100%;
  border: 1.5px solid var(--border); border-radius: 9px;
  background: #fff; font-family: 'Poppins', sans-serif; font-size: 14px; color: var(--text);
  outline: none; transition: border-color .15s;
}
.cart-modules .panel-body > textarea { height: auto; padding: 12px 14px; }

/* Kupon/voucher/shipping formundaki "input + button" — header search-wrap pattern.
   .input-group rule'u common'da zaten flex+border+radius veriyor; cart-modules
   scope'unda fazladan height ayari + Bootstrap fallback override */
.cart-modules .input-group { height: 44px; }
.cart-modules .input-group > .form-control,
.cart-modules .input-group > input { height: 44px !important; padding: 0 16px !important; border: 0 !important; background: transparent !important; }
.cart-modules .input-group > .input-group-btn > .btn,
.cart-modules .input-group > .input-group-btn > input[type="submit"],
.cart-modules .input-group > .input-group-btn > input[type="button"],
.cart-modules .input-group > .input-group-btn > button {
  height: 44px !important; padding: 0 20px !important; border: 0 !important; border-radius: 0 !important;
  background: var(--blue); color: #fff;
}
.cart-modules .input-group > .input-group-btn > .btn:hover,
.cart-modules .input-group > .input-group-btn > input:hover,
.cart-modules .input-group > .input-group-btn > button:hover { background: var(--blue-dark); }

/* Bootstrap collapse — sadece .in class'ı varsa açık göster.
   Phase 13.2'de Bootstrap JS kaldırılınca panel-collapse hep açıktı.
   Aşağıdaki rule + intfa-core.js'teki vanilla handler ile collapse çalışır. */
.cart-modules .panel-collapse,
.collapse { display: none; }
.cart-modules .panel-collapse.in,
.collapse.in,
.collapse.show { display: block; }

/* Marka A-Z dizini (manufacturer_list) */
.mfg-index {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  margin-bottom: 18px;
}
.mfg-index strong { font-size: 12px; color: var(--text-light); margin-right: 4px; }
.mfg-index a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 8px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  font-size: 13px; font-weight: 600; color: var(--text-mid);
  text-decoration: none; transition: all .15s;
}
.mfg-index a:hover { background: var(--blue); color: #fff; border-color: var(--blue); }

.mfg-letter {
  font-size: 22px; font-weight: 700; color: var(--blue);
  margin: 26px 0 10px; padding-bottom: 6px;
  border-bottom: 2px solid var(--blue-mid);
}
.mfg-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 900px) { .mfg-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .mfg-grid { grid-template-columns: repeat(2, 1fr); } }
.mfg-link {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 14px 10px; min-height: 120px;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; color: var(--text-mid); text-decoration: none;
  transition: all .15s; text-align: center;
}
.mfg-link img {
  max-height: 55px; max-width: 100%; object-fit: contain;
}
.mfg-link .mfg-icon { font-size: 32px; color: var(--text-light); }
.mfg-link .mfg-name { font-weight: 500; line-height: 1.25; }
.mfg-link:hover { background: var(--blue-light); color: var(--blue); border-color: var(--blue); }

/* Karşılaştırma tablosu */
.compare-tbl table { table-layout: auto; }
.compare-tbl td:first-child {
  background: var(--bg); width: 160px;
  font-size: 12px; color: var(--text-mid);
}
.compare-tbl thead th { font-size: 13px; color: var(--blue); }
.footer-in {
  max-width: var(--max-w); margin: 0 auto; padding: 36px 24px 24px;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px;
}
.fdesc { font-size: 12px; line-height: 1.8; margin-bottom: 16px; max-width: 240px; color: var(--text-mid); }
.fsoc { display: flex; gap: 10px; flex-wrap: wrap; }
.fsb {
  width: 42px; height: 42px; background: #fff;
  border: 1px solid #e8e8e5; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-mid); font-size: 18px;
  transition: transform .15s, box-shadow .15s, background .15s, color .15s;
  cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.fsb .icon { width: 20px; height: 20px; stroke: none; }
.fsb:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); color: #fff; }
.fsb-blog:hover { background: var(--green); border-color: var(--green); }
.fsb-facebook:hover { background: #1877f2; border-color: #1877f2; }
.fsb-instagram:hover { background: #e4405f; border-color: #e4405f; }
.fsb-youtube:hover { background: #ff0000; border-color: #ff0000; }
.fsb-x:hover { background: #000; border-color: #000; }
.fc h4,
.fc .footer-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--text); margin-bottom: 13px; }
.fc a { display: flex; align-items: center; gap: 7px; color: var(--text-mid); font-size: 12px; margin-bottom: 9px; transition: color .15s; text-decoration: none; }
.fc a:hover { color: var(--blue); }
.fc a i { font-size: 14px; color: var(--green); width: 18px; }
.fc a .fa-square-whatsapp { font-size: 17px; }
.fbot {
  max-width: var(--max-w); margin: 0 auto; padding: 15px 24px;
  border-top: 1px solid #e8e8e5; display: flex; align-items: center;
  justify-content: space-between; font-size: 11px; color: var(--text-light);
}
.fpay { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fpay img { height: 13px; width: auto; display: block; }
.ssl-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--green); white-space: nowrap; margin-right: 4px; }
.ssl-badge i { font-size: 12px; }
.fpay-logos { display: flex; align-items: center; gap: 12px; }

/* ── FLOATING WHATSAPP ────────────────────────────────────── */
.floating-whatsapp {
  position: fixed;
  left: 22px;
  bottom: 32px;
  z-index: 260;
  width: 56px;
  height: 56px;
  display: block;
  transition: transform .15s;
}
.floating-whatsapp img { width: 100%; height: 100%; display: block; }
.floating-whatsapp:hover {
  transform: scale(1.08);
}

/* ── FLOATING TELEFON (WhatsApp yuvarlağı genişliğinde, üstünde) ── */
.floating-call {
  position: fixed;
  left: 26px;               /* 47px daire, WhatsApp diskinin merkeziyle hizalı */
  bottom: 94px;             /* WhatsApp diskinin hemen üstünde */
  z-index: 260;
  width: 47px;
  height: 47px;
  box-sizing: border-box;
  border: 3px solid #fff;   /* WhatsApp diskindeki beyaz halkayla aynı kalınlık */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #3f97cf 0%, var(--blue) 52%, #2179b0 100%); /* çok hafif geçiş */
  color: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,.22);
  transition: transform .15s;
}
.floating-call i { font-size: 19px; line-height: 1; }
.floating-call:hover { transform: scale(1.08); color: #fff; }

/* ── HAMBURGER + MOBİL NAV ───────────────────────────────── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  border: none; background: none;
  cursor: pointer; padding: 6px;
  border-radius: 8px;
  transition: background .15s;
  flex-shrink: 0;
}
.hamburger:hover { background: var(--bg); }
.hamburger span {
  display: block; width: 100%; height: 2px; border-radius: 2px;
  background: var(--text); transition: all .25s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile-nav header'in (sticky, z-index:200) ustune cikmali; mockup'ta z-index 180 olarak
   tanimlanmis ama bu sticky header'dan dusuk. Lokalde 300/301'e cekildi. */
.mobile-nav {
  display: none;
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.45);
}
.mobile-nav.open { display: block; }

.mobile-menu {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 300px; background: #fff;
  z-index: 301; overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow: var(--shadow-lg);
}
.mobile-nav.open .mobile-menu { transform: translateX(0); }

.mobile-menu-head {
  background: var(--blue); color: #fff;
  padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.mobile-menu-head strong { font-size: 15px; font-weight: 700; }
.mobile-close {
  width: 32px; height: 32px; background: rgba(255,255,255,.15);
  border: none; border-radius: 6px; color: #fff;
  font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

.mobile-cat { list-style: none; padding: 8px 0; }
.mobile-cat li { border-bottom: 1px solid var(--border); }
.mobile-cat-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 20px; font-size: 14px; font-weight: 500;
  color: var(--text); cursor: pointer; transition: background .15s;
  text-decoration: none;
}
.mobile-cat-link:hover, .mobile-cat-link.active-m { background: var(--blue-light); color: var(--blue); }
.mobile-cat-link i { font-size: 10px; color: var(--text-light); transition: transform .2s; }
.mobile-cat-link.open .mobile-cat-toggle i { transform: rotate(90deg); }
.mobile-cat-row { padding: 0; cursor: default; }
.mobile-cat-main {
  flex: 1; min-width: 0;
  padding: 13px 20px;
  color: inherit; text-decoration: none;
}
.mobile-cat-main span { display: flex; align-items: center; }
.mobile-cat-main .fa-leaf,
.mobile-cat-link > span .fa-leaf { font-size: 14px; color: var(--green); }
.mobile-cat-toggle {
  width: 52px; min-height: 48px;
  border: 0; background: transparent;
  color: var(--text); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.mobile-cat-toggle:hover { background: rgba(40,135,200,.1); }
.mobile-cat-toggle i {
  font-size: 16px;
  color: var(--text);
  font-weight: 900;
}

.mobile-sub { display: none; background: var(--bg); padding: 4px 0 8px; }
.mobile-sub.open { display: block; }
.mobile-sub a {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 20px 9px 32px;
  font-size: 13px; color: var(--text-mid); transition: color .15s;
  text-decoration: none;
}
.mobile-sub a:hover { color: var(--blue); }
.mobile-sub a i { font-size: 9px; color: var(--green); }

/* ── FLOATING SUPPORT ─────────────────────────────────────── */
.support-float {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  overflow: visible;
}
.support-tab {
  transform: rotate(-90deg);
  transform-origin: bottom right;
  margin-right: 0;
  margin-bottom: -1px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 8px 8px 0 0;
  padding: 10px 18px;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  letter-spacing: .3px;
  white-space: nowrap;
  transition: background .2s;
  box-shadow: -2px 0 10px rgba(0,0,0,.15);
}
.support-tab:hover { background: var(--blue-dark); }
.support-tab i {
  font-size: 15px;
  transform: rotate(90deg);
  display: inline-block;
  flex-shrink: 0;
}
.support-tab-short { display: none; }
.support-panel {
  position: fixed;
  right: -300px;
  top: 50%;
  transform: translateY(-50%);
  width: 280px;
  background: #fff;
  border-radius: 12px 0 0 12px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  border-right: none;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: right .3s cubic-bezier(.4,0,.2,1), opacity .25s;
  z-index: 9998;
}
.support-float.open .support-panel {
  right: 0;
  opacity: 1;
  pointer-events: all;
}
.support-panel-head {
  background: var(--blue);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.support-panel-head i { font-size: 20px; }
.support-panel-head strong { display: block; font-size: 14px; font-weight: 700; }
.support-panel-head span { font-size: 11px; color: rgba(255,255,255,.75); }
.support-panel-body { padding: 14px 16px; }
.support-panel-body p { font-size: 12px; color: var(--text-mid); line-height: 1.7; margin-bottom: 14px; }
.support-links { display: flex; flex-direction: column; gap: 8px; }
.support-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 600;
  text-decoration: none; color: #fff;
  transition: filter .15s;
}
.support-link:hover { filter: brightness(.92); color: #fff; }
.support-link.sl-phone { background: var(--orange); }
.support-link.sl-wa { background: #25d366; }
.support-link i { font-size: 16px; flex-shrink: 0; }
.support-link .sl-txt strong { display: block; font-size: 12px; }
.support-link .sl-txt span { font-size: 10px; opacity: .85; }
.support-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 24px; height: 24px;
  background: rgba(255,255,255,.2);
  border: none; border-radius: 50%;
  color: #fff; font-size: 12px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.support-close:hover { background: rgba(255,255,255,.35); }

/* ── ICON / UTILITY (Phase 1'den korunan) ─────────────────── */
.icon { width: 1em; height: 1em; fill: currentColor; stroke: currentColor; vertical-align: middle; flex-shrink: 0; display: inline-block; }
.icon-sm { width: 14px; height: 14px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 28px; height: 28px; }
.icon-xl { width: 36px; height: 36px; }

/* ── FA(far/fab)→sprite geçişi: inline ikonları, yerini aldıkları font-ikonla aynı boyut/renk/hizada tut ── */
.tb-left .icon, .tb-right .icon { font-size: 19px; margin-right: 6px; color: var(--blue); vertical-align: -3px; }
.fc a .icon { font-size: 17px; color: var(--green); }
.pc-stars .st .icon { font-size: 9px; color: var(--rating); }
.acc-link-list a .icon { width: 16px; font-size: 12px; color: var(--text-light); }
.acc-link-list a:hover .icon { color: var(--blue); }
.acc-dash-grid .card-box h2 .icon { font-size: 16px; }

img, picture, video, svg { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; border: 0; background: transparent; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
body.is-locked { overflow: hidden; }
.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; }
main { flex: 1; min-height: 50vh; }

/* btn helper'ları (anchor/cta sayfaları için)
   .btn-primary'in beyaz metni, sayfa-spesifik [id^="..."] a rule'larıyla
   specificity savaşına girmemesi için type+class tutuşu (html body .btn-primary
   selector'ı = 0,1,1) ile cascade'in en güvenli noktasında garanti edildi. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; font-size: 15px; font-weight: 500; border-radius: var(--radius-md); transition: all var(--transition); line-height: 1.2; cursor: pointer; text-align: center; white-space: nowrap; }
html body .btn-primary { background: var(--blue);     color: #fff; }
html body .btn-primary:hover { background: var(--blue-dark); color: #fff; }
html body .btn-success { background: var(--green);    color: #fff; }
html body .btn-success:hover { background: var(--green-dark); color: #fff; }
html body .btn-outline { background: transparent; color: var(--blue); border: 2px solid var(--blue); }
html body .btn-outline:hover { background: var(--blue); color: #fff; }
html body .btn-ghost   { background: transparent; color: var(--text); }
html body .btn-ghost:hover   { background: var(--gray-100); }
.btn-block { width: 100%; }

/* Form base */
.form-control, input[type="text"], input[type="email"], input[type="search"], input[type="password"], input[type="tel"], input[type="number"], textarea, select {
  display: block; width: 100%;
  padding: 10px 14px; font-size: 15px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(40, 135, 200, 0.15);
}

/* Information / static page'ler için brand uyum */
[id^="information-"], #error-not-found, [id^="page-"] {
  max-width: var(--max-w); margin: 0 auto; padding: 24px;
}
[id^="information-"] h1, #error-not-found h1 { font-size: 26px; font-weight: 700; color: var(--text); margin-bottom: 16px; }
[id^="information-"] h2, [id^="information-"] h3 { color: var(--text); margin: 16px 0 10px; }
[id^="information-"] p { font-size: 14px; color: var(--gray-700); line-height: 1.7; margin-bottom: 12px; }
[id^="information-"] > .breadcrumb, #error-not-found > .breadcrumb {
  list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 9px 0; margin-bottom: 12px;
  font-size: 12px; color: var(--text-light); background: transparent; border-bottom: 1px solid var(--border);
}
[id^="information-"] > .breadcrumb li { display: inline; }
[id^="information-"] > .breadcrumb li + li::before { content: '›'; color: var(--text-light); margin: 0 6px; }
#error-not-found { text-align: center; padding: 60px 24px; }
#error-not-found h1 { font-size: 36px; }
#error-not-found p { color: var(--text-light); font-size: 15px; max-width: 480px; margin: 12px auto; }
#error-not-found .btn-primary { height: 44px; padding: 0 22px; background: var(--blue); color: #fff; border: 0; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }

/* ── ORTA LAPTOP / KÜÇÜK DESKTOP — nav-link kompaktlaşır ───── */
@media (max-width: 1280px) {
  .nav-link { padding: 0 10px; font-size: 12px; }
}

/* ── TABLET 1024px ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .header-inner { grid-template-columns: 160px 1fr auto; gap: 16px; padding: 0 16px; height: 80px; }
  .logo img { width: 150px; }
  .nav-link { padding: 0 10px; font-size: 12px; }
  .trust-in { grid-template-columns: repeat(2,1fr); }
  .footer-in { grid-template-columns: 1fr 1fr; gap: 24px; padding: 28px 16px 20px; }
  .fbot { padding: 14px 16px; flex-direction: column; gap: 8px; text-align: center; }
  .fpay { justify-content: center; }
}

/* ── MOBİL 768px ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .top-bar { display: none; }
  .promo-banner span { font-size: 13px; }
  .promo-banner i { font-size: 18px; }
  /* Mobil header: flexbox (grid+order+absolute kırılgandı — bazı mobil
     tarayıcılarda hamburger düşüyor / logo sepete biniyordu). Sıralama:
     hamburger + logo solda, aksiyonlar sağda (margin-left:auto ile itilir). */
  .header-inner { display: flex; align-items: center; gap: 8px; height: 62px; padding: 0 12px; position: relative; }
  .hamburger { display: flex; order: 1; flex-shrink: 0; }
  .logo { order: 2; position: static; transform: none; flex-shrink: 1; min-width: 0; justify-content: flex-start; }
  /* Logo dinamik ortalama: JS (intfa-core.js adjustLogoCentering) favori
     butonuyla arasinda >=20px bosluk varsa .logo-centered ekler; aksi halde
     kaldirir, logo hamburger yaninda sola yaslanir. */
  .logo.logo-centered { position: absolute; left: 50%; transform: translateX(-50%); }
  .logo img { width: 120px; max-width: 100%; }
  .search-wrap { display: none; }
  .header-actions { order: 3; margin-left: auto; flex-shrink: 0; }
  nav { display: none; }
  /* Phase 14.37: mobil arama bari header altinda sticky. Asagi scroll
     edince translateY(-150%) ile gizleniyor (transform layout shift
     yapmaz, header sticky'sinin altinda smooth slide). */
  .mobile-search-sticky {
    display: block;
    position: sticky;
    top: 62px; /* header height (mobile) */
    z-index: 199;
    background: #fff;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    transition: transform .25s ease;
  }
  .mobile-search-sticky .search-wrap { display: block; }
  .mobile-search-sticky .search-wrap input { height: 40px; font-size: 13px; }
  .mobile-search-sticky .search-btn { width: 40px; height: 40px; }
  .mobile-search-sticky.hidden { transform: translateY(-150%); }
  .floating-whatsapp { left: 14px; bottom: 24px; width: 50px; height: 50px; }
  .floating-whatsapp .icon { width: 27px; height: 27px; }
  .floating-call { left: 18px; bottom: 78px; width: 42px; height: 42px; }
  .floating-call i { font-size: 17px; }
  .bc-inner { font-size: 11px; padding: 7px 14px; }
  .trust-in { grid-template-columns: repeat(2,1fr); padding: 9px 14px; gap: 4px 14px; }
  .ti-txt span { display: none; }
  .ti { gap: 9px; }
  .ti-icon { width: 32px; height: 32px; border-radius: 8px; }
  .ti-icon i { font-size: 14px; }
  .ti-txt strong { font-size: 12px; margin-bottom: 0; }
  .footer-in { grid-template-columns: 1fr 1fr; gap: 20px; padding: 24px 14px 16px; }
  /* Phase 14.34: footer logo alti yazi (.fdesc) ve sosyal ikonlar (.fsoc)
     mobil/tablette de gosteriliyor (eskiden gizliydi). */
  /* Phase 14.23: support-float mobilde de dikey kalsin (desktop ile ayni gorunum).
     Panel genisligi viewport'a sigsin diye kucultuldu, panel ve tab ayni dikey
     hizada (top: 50%) — acildigi zaman tab'in solundan cikar. */
  .support-tab-full { display: none; }
  .support-tab-short { display: inline; }
  .support-panel {
    width: calc(100vw - 56px);
    max-width: 280px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }
  [id^="information-"], #error-not-found { padding: 14px; }
}

/* ── KÜÇÜK MOBİL 600px (telefon) ──────────────────────────────
   Phase 14.24: tablet portrait (>=600px) ile telefon (<600px) ayriliyor.
   Telefonda btn-cart icon-only + cart-count badge butonun sag ust kosesinde
   absolute (butonu genisletmemesi icin). Tablette Sepetim text gorunur. */
@media (max-width: 600px) {
  .btn-cart-label { display: none; }
  .btn-cart { padding: 0 12px; gap: 6px; position: relative; overflow: visible; }
  .btn-cart .cart-count.has-items {
    position: absolute;
    top: -7px;
    right: -7px;
    margin-left: 0;
    padding: 0 4px;
    min-width: 22px;
    height: 22px;
    line-height: 18px; /* height - 2*border; tek satir text vertical center */
    border-radius: 11px;
    border: 2px solid #fff;
    font-size: 11px;
    font-weight: 700;
    background: var(--blue);
    color: #fff;
    display: inline-block;
    text-align: center;
    box-sizing: border-box;
    font-variant-numeric: tabular-nums;
  }
}

/* ── KÜÇÜK MOBİL 480px ─────────────────────────────────────── */
@media (max-width: 480px) {
  .promo-banner { padding: 9px 0; }
  .promo-banner span { font-size: 11px; }
  .header-inner { padding: 0 10px; height: 56px; }
  .logo img { width: 100px; }
  .trust-in { grid-template-columns: 1fr; }
  .footer-in { grid-template-columns: 1fr; }
  /* Phase 14.37: arama bari header'in 56px yuksekliginin altina yapis */
  .mobile-search-sticky { top: 56px; padding: 6px 10px; }
}

/* ============================================================
   Phase 13.1: BOOTSTRAP FALLBACK
   Bootstrap CSS yüklenmediği için OpenCart core ve legacy extension
   twig'lerinin kullandığı temel class'lar burada minimum kapsamla
   yeniden tanımlandı. Hedef: layout bozulmadan çalışmaya devam etsin.
   Estetik uyum, intfa-* sayfa dosyalarında zaten override edildi.
   ============================================================ */

/* ── Grid (12 kolon flex-based) ─────────────────────────────── */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}
.row::before, .row::after { content: ""; display: table; clear: both; }

[class*="col-xs-"], [class*="col-sm-"], [class*="col-md-"], [class*="col-lg-"] {
  position: relative;
  padding-right: 15px;
  padding-left: 15px;
  box-sizing: border-box;
  width: 100%;
}

/* xs (her zaman) */
.col-xs-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
.col-xs-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-xs-3  { flex: 0 0 25%;        max-width: 25%; }
.col-xs-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-xs-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-xs-6  { flex: 0 0 50%;        max-width: 50%; }
.col-xs-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-xs-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-xs-9  { flex: 0 0 75%;        max-width: 75%; }
.col-xs-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-xs-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-xs-12 { flex: 0 0 100%;       max-width: 100%; }

/* sm: 768+ */
@media (min-width: 768px) {
  .col-sm-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
  .col-sm-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-sm-3  { flex: 0 0 25%;        max-width: 25%; }
  .col-sm-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-sm-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-sm-6  { flex: 0 0 50%;        max-width: 50%; }
  .col-sm-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-sm-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-sm-9  { flex: 0 0 75%;        max-width: 75%; }
  .col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-sm-12 { flex: 0 0 100%;       max-width: 100%; }
}

/* md: 992+ */
@media (min-width: 992px) {
  .col-md-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
  .col-md-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-md-3  { flex: 0 0 25%;        max-width: 25%; }
  .col-md-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-md-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-md-6  { flex: 0 0 50%;        max-width: 50%; }
  .col-md-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-md-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-md-9  { flex: 0 0 75%;        max-width: 75%; }
  .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-md-12 { flex: 0 0 100%;       max-width: 100%; }
}

/* lg: 1200+ */
@media (min-width: 1200px) {
  .col-lg-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
  .col-lg-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-lg-3  { flex: 0 0 25%;        max-width: 25%; }
  .col-lg-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-lg-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-lg-6  { flex: 0 0 50%;        max-width: 50%; }
  .col-lg-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-lg-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-lg-9  { flex: 0 0 75%;        max-width: 75%; }
  .col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-lg-12 { flex: 0 0 100%;       max-width: 100%; }
}

/* hidden / visible — Bootstrap responsive helpers */
@media (max-width: 767px)  { .hidden-xs { display: none !important; } }
@media (min-width: 768px) and (max-width: 991px) { .hidden-sm { display: none !important; } }
@media (min-width: 992px) and (max-width: 1199px){ .hidden-md { display: none !important; } }
@media (min-width: 1200px) { .hidden-lg { display: none !important; } }
@media (max-width: 767px)  { .visible-xs { display: block !important; } }
@media (min-width: 768px)  { .visible-sm { display: block !important; } }

/* ── Float helpers ──────────────────────────────────────────── */
.pull-left   { float: left  !important; }
.pull-right  { float: right !important; }
.text-left   { text-align: left   !important; }
.text-right  { text-align: right  !important; }
.text-center { text-align: center !important; }
.clearfix::before, .clearfix::after { content: " "; display: table; }
.clearfix::after { clear: both; }

/* ── Form base ──────────────────────────────────────────────── */
/* .form-control zaten yukarıda intfa-common'da tanımlı; burada tekrar etmiyoruz. */
.form-group { margin-bottom: 15px; }
.form-horizontal .control-label { padding-top: 7px; margin-bottom: 0; }
.form-horizontal .form-group { margin-right: -15px; margin-left: -15px; }
.input-group { position: relative; display: flex; flex-wrap: nowrap; align-items: stretch; width: 100%; }
.input-group .form-control { flex: 1 1 0%; min-width: 0; }
.input-group-addon, .input-group-btn { display: flex; align-items: center; }
.input-group-btn .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.help-block { display: block; margin-top: 5px; font-size: 13px; color: var(--text-muted); }
.text-danger { color: var(--red); }

/* ── Button variants (intfa-common'da .btn ve .btn-primary var; ek varyant) ── */
.btn-default {
  background: #fff;
  color: var(--gray-700);
  border: 1px solid var(--border);
}
.btn-default:hover { background: var(--gray-50); border-color: var(--gray-400); }
.btn-info { background: var(--blue); color: #fff; }
.btn-info:hover { background: var(--blue-dark); color: #fff; }
.btn-warning { background: #f0ad4e; color: #fff; }
.btn-warning:hover { background: #ec971f; }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: #c53030; }
.btn-link { background: transparent; color: var(--blue); padding: 0; border: 0; }
.btn-link:hover { color: var(--blue-dark); text-decoration: underline; }
.btn-xs { padding: 1px 5px;  font-size: 12px; line-height: 1.5; border-radius: 3px; }
.btn-sm { padding: 5px 10px; font-size: 13px; line-height: 1.5; border-radius: 3px; }
.btn-lg { padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 6px; }
.btn-group { position: relative; display: inline-flex; vertical-align: middle; }
.btn-group > .btn:not(:first-child) { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.btn-group > .btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* ── Panel (legacy Bootstrap 3 component) ─────────────────────── */
.panel {
  margin-bottom: 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.panel-default { border-color: var(--border); }
.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid var(--border);
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
  background: var(--gray-50);
}
.panel-title { font-size: 16px; font-weight: 600; margin: 0; color: var(--text); }
.panel-body { padding: 15px; }
.panel-footer { padding: 10px 15px; background: var(--gray-50); border-top: 1px solid var(--border); border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }

/* ── Tablo (legacy Bootstrap) ───────────────────────────────── */
.table { width: 100%; max-width: 100%; margin-bottom: 20px; border-collapse: collapse; background: #fff; }
.table > thead > tr > th, .table > tbody > tr > td { padding: 8px; line-height: 1.5; vertical-align: top; border-top: 1px solid var(--border); }
.table > thead > tr > th { vertical-align: bottom; border-bottom: 2px solid var(--border); font-weight: 600; }
.table-bordered { border: 1px solid var(--border); }
.table-bordered > thead > tr > th, .table-bordered > tbody > tr > td { border: 1px solid var(--border); }
.table-striped > tbody > tr:nth-of-type(odd) > td { background: var(--gray-50); }
.table-hover > tbody > tr:hover > td { background: var(--blue-light); }
.table-responsive { overflow-x: auto; }

/* ── Breadcrumb (legacy) ────────────────────────────────────── */
.breadcrumb {
  padding: 8px 15px;
  margin-bottom: 20px;
  list-style: none;
  background: var(--gray-50);
  border-radius: var(--radius-md);
}
.breadcrumb > li { display: inline-block; }
.breadcrumb > li + li::before { content: "/"; padding: 0 5px; color: var(--text-muted); }
.breadcrumb > .active { color: var(--text-muted); }

/* ── Modal (legacy) — minimum görünüm ───────────────────────── */
.modal { display: none; position: fixed; inset: 0; z-index: 1050; overflow: auto; background: rgba(0,0,0,0.5); }
.modal.in { display: block; }
.modal-dialog { position: relative; width: auto; margin: 30px auto; max-width: 720px; padding: 0 14px; }
.modal-content { background: #fff; border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-lg); }
.modal-title { font-size: 17px; font-weight: 700; color: var(--text); margin: 0; padding-right: 30px; }
.modal-header { position: relative; border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 16px; }
.modal-body { font-size: 13px; color: var(--text-mid); line-height: 1.55; max-height: 65vh; overflow-y: auto; }
.modal-body p { margin-bottom: 8px; }
.modal-footer { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 12px; text-align: right; }
body.modal-open { overflow: hidden; }
.close {
  float: right; font-size: 24px; font-weight: 700; line-height: 1;
  color: #000; opacity: 0.4; background: transparent; border: 0; cursor: pointer;
}
.close:hover { opacity: 0.75; }

/* ── Dropdown (legacy) ─────────────────────────────────────── */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  position: absolute; top: 100%; left: 0; z-index: 1000;
  display: none; min-width: 160px; padding: 5px 0;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.dropdown-menu.open, .dropdown.open .dropdown-menu, .open > .dropdown-menu { display: block; }
.dropdown-menu > li > a { display: block; padding: 6px 16px; color: var(--text); text-decoration: none; }
.dropdown-menu > li > a:hover { background: var(--blue-light); color: var(--blue); }

/* ── Pagination (legacy Bootstrap fallback) ──────────────────
   3rd-party extension twig'lerinde <ul class="pagination"> kullanılıyorsa
   minimum çalışır görünüm. Modern stil .pagination-nav scope'unda override edilir. */
.pagination { display: inline-flex; padding-left: 0; margin: 20px 0; border-radius: var(--radius-md); }
.pagination > li { display: inline; }
.pagination > li > a, .pagination > li > span {
  position: relative;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.5;
  color: var(--blue);
  background: #fff;
  border: 1px solid var(--border);
  text-decoration: none;
}
.pagination > li:first-child > a, .pagination > li:first-child > span { margin-left: 0; border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); }
.pagination > li:last-child > a,  .pagination > li:last-child > span  { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
.pagination > li > a:hover { background: var(--blue-light); }
.pagination > .active > a, .pagination > .active > span { background: var(--blue); color: #fff; border-color: var(--blue); }

/* ── Modern pagination (.pagination-nav) — site genelinde standart ──
   Phase 14.11: kategori/marka/arama/indirim/yorum sayfalarinda kullanilan
   modern pill buton tarzi pagination. Bootstrap legacy .pagination
   fallback'lerini override eder; mavi bant gozukmesin diye butun arka
   planlar transparent. */
.pagination-nav {
  margin: 28px 0; padding: 0;
  display: flex; justify-content: center;
  background: transparent; border: 0;
}
.pagination-nav ul,
.pagination-nav .pagination,
.pagination-nav ul.pagination {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0; margin: 0; list-style: none;
  background: transparent; border: 0; border-radius: 0;
}
.pagination-nav li,
.pagination-nav .pagination > li {
  display: flex; margin: 0; padding: 0;
}
.pagination-nav li a,
.pagination-nav li span,
.pagination-nav .pagination > li > a,
.pagination-nav .pagination > li > span {
  display: flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 7px;
  background: #fff; color: var(--text-mid);
  font-size: 13px; font-weight: 500; line-height: 1;
  text-decoration: none; transition: all .15s;
  margin: 0;
  position: static;
}
.pagination-nav li.active a,
.pagination-nav li.active span,
.pagination-nav .pagination > .active > a,
.pagination-nav .pagination > .active > span {
  background: var(--blue); color: #fff; border-color: var(--blue);
}
.pagination-nav li a:hover,
.pagination-nav .pagination > li > a:hover {
  background: var(--blue-light); color: var(--blue); border-color: var(--blue);
}

/* ── Img helpers ───────────────────────────────────────────── */
.img-thumbnail { padding: 4px; line-height: 1.42857143; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); display: inline-block; max-width: 100%; height: auto; }
.img-responsive { display: block; max-width: 100%; height: auto; }

/* ── Container variants ─────────────────────────────────────── */
.container-fluid { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }

/* ── Well ───────────────────────────────────────────────────── */
.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background: var(--gray-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

/* ── Badge / Label ──────────────────────────────────────────── */
.badge { display: inline-block; min-width: 10px; padding: 3px 7px; font-size: 12px; font-weight: 700; line-height: 1; color: #fff; text-align: center; vertical-align: middle; background: var(--gray-600); border-radius: 10px; }
.label { display: inline; padding: 2px 6px; font-size: 75%; font-weight: 700; line-height: 1; color: #fff; background: var(--gray-600); border-radius: 4px; }
.label-default { background: var(--gray-600); }
.label-primary { background: var(--blue); }
.label-success { background: var(--green); }
.label-info    { background: var(--blue); }
.label-warning { background: #f0ad4e; }
.label-danger  { background: var(--red); }

/* ── Nav-tabs (legacy Bootstrap 3) ─────────────────────────── */
.nav-tabs {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--border);
}
.nav-tabs > li { margin-bottom: -1px; }
.nav-tabs > li > a {
  display: block; padding: 10px 16px;
  color: var(--text-muted); text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.nav-tabs > li > a:hover { background: var(--gray-50); border-color: var(--border); }
.nav-tabs > li.active > a { color: var(--text); background: #fff; border: 1px solid var(--border); border-bottom-color: #fff; }
.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.active { display: block; }

/* ── List group ─────────────────────────────────────────────── */
.list-group { padding-left: 0; margin-bottom: 20px; }
.list-group-item { position: relative; display: block; padding: 10px 15px; background: #fff; border: 1px solid var(--border); margin-bottom: -1px; }
.list-group-item:first-child { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
.list-group-item:last-child { margin-bottom: 0; border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }

/* ── Sticky / utility ──────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.list-unstyled { padding-left: 0; list-style: none; }

/* ── Bootstrap fallback responsive grid sıfırlama ──────────── */
@media (max-width: 767px) {
  .row { margin-right: -10px; margin-left: -10px; }
  [class*="col-"] { padding-right: 10px; padding-left: 10px; }
}

/* ── TOAST BİLDİRİMLER (cart.add / wishlist.add UI feedback) ── */
.toast-container {
  position: fixed;
  top: 88px; right: 20px;
  z-index: 10000;
  display: flex; flex-direction: column; gap: 10px;
  max-width: 360px;
  pointer-events: none;
}
.toast {
  background: #fff;
  border-left: 4px solid var(--blue);
  border-radius: var(--radius);
  padding: 12px 16px;
  box-shadow: var(--shadow-lg);
  font-size: 13px; color: var(--text);
  pointer-events: all;
  animation: toast-in .3s ease-out;
  display: flex; align-items: flex-start; gap: 10px;
  max-width: 360px; word-break: break-word;
}
.toast i { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.toast.toast-success { border-left-color: var(--green); }
.toast.toast-success i { color: var(--green); }
.toast.toast-error { border-left-color: #e74c3c; }
.toast.toast-error i { color: #e74c3c; }
.toast.toast-info { border-left-color: var(--blue); }
.toast.toast-info i { color: var(--blue); }
.toast.toast-fade { animation: toast-out .3s ease-out forwards; }

@keyframes toast-in {
  from { transform: translateX(110%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes toast-out {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(110%); opacity: 0; }
}

/* Sepet badge — header .btn-cart icindeki sayim */
.btn-cart { position: relative; }
.btn-cart .cart-count {
  display: none;
  background: #fff;
  color: var(--blue);
  font-size: 11px; font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  margin-left: 6px;
  min-width: 20px;
  text-align: center;
}
.btn-cart .cart-count.has-items { display: inline-block; }

/* ============================================================
   Phase 14.2: Ürün kartı (.pc) — anasayfa + kategori + arama ortak
   intfa-home.css'ten taşındı; kategori sayfasında home.css yüklenmediği
   için kart stilleri eksik kalıyordu (img-primary/img-hover absolute
   pozisyon kuralı yoktu, görseller alt alta dizilip kart bozuluyordu).

   Phase 14.5: .home-grid + .pgrid ortak grid kurallari da burada;
   tüm sayfalarda (home/category/search/manufacturer/special/related)
   ayni kart grid'i kullanilabilir.
   ============================================================ */
.home-grid,
.pgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1024px) {
  .home-grid, .pgrid { grid-template-columns: repeat(3, 1fr); }
}
/* Phase 14.30: 768'de pgrid/home-grid 1024 rule'undan 3 sutun olarak miras
   alir; eski 2 sutun rule'u kaldirildi (kullanici tabletta 3 istiyordu). */
@media (max-width: 480px) {
  /* Phase 14.29: kucuk telefonda da 2 sutun (eskiden 1 sutundu) */
  .home-grid, .pgrid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  /* Kart icindeki Sepete Ekle butonu sigsin diye sadece + ikon */
  .btn-add .btn-add-label { display: none; }
  .btn-add { padding: 0 10px; gap: 0; }
}

.pc {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: box-shadow .2s, transform .2s, border-color .2s;
  display: flex; flex-direction: column; position: relative;
  text-decoration: none;
  color: inherit;
}
.pc:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--blue); color: inherit; }
.pc:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Görsel — 1:1 kare, hover geçişi */
/* <a> tag için display:block şart (eski <div>'den farklı olarak inline default) */
.pc-img { display: block; aspect-ratio: 1/1; overflow: hidden; background: #fff; position: relative; text-decoration: none; }
.pc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-img .img-primary { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .45s ease; opacity: 1; }
.pc-img .img-hover   { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .45s ease; opacity: 0; }
/* Phase 14.2: hover fade-out yalnizca 2. gorsel varsa (.has-swap class) calisir;
   aksi halde primary kalir, bos arkaplan olusmaz. */
.pc:hover .pc-img.has-swap .img-primary { opacity: 0; }
.pc:hover .pc-img.has-swap .img-hover   { opacity: 1; }

/* Rozet & favori */
.pc-badges { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 4px; z-index: 2; }
.pbg { padding: 2px 8px; border-radius: 4px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.pbg-c { background: var(--green); color: #fff; }
.pbg-s { background: var(--red); color: #fff; }
.pbg-n { background: var(--blue); color: #fff; }
.pc-wish { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; background: rgba(255,255,255,.92); border-radius: 7px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s; cursor: pointer; border: none; color: var(--text-light); font-size: 13px; box-shadow: var(--shadow-sm); z-index: 2; }
.pc:hover .pc-wish { opacity: 1; }
.pc-wish:hover { color: var(--red); }

/* Kart içerik */
.pc-body { padding: 12px 12px 0; display: flex; flex-direction: column; flex: 1; background: #fff; }
.pc-var { font-size: 9px; font-weight: 600; color: var(--blue); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }
.pc-name { font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.4; margin: 0 0 8px; }
.pc-stars { display: flex; align-items: center; gap: 5px; margin-bottom: 10px; }
.pc-stars .st { display: flex; gap: 1px; }
.pc-stars .st i,
.pc-stars .st .fa,
.pc-stars .st .fas,
.pc-stars .st .far { font-size: 9px; color: var(--rating); }
.pc-stars .rc { font-size: 10px; color: var(--text-light); }

/* Fiyat + sepet — beyaz zemin, üstte ince ayraç çizgisiyle bilgi alanından ayrılır.
   Phase 14.2: pc-body içinde olduğu için pc-body padding'ini iptal eden negatif
   margin (-12px) ile kart kenarına yaslandı; iç padding (12px) sayesinde içerik
   pc-name/pc-var ile aynı sol/sağ hizada durur. */
.pc-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin: auto -12px 0;
  padding: 10px 12px;
  background: #fff; border-top: 1px solid var(--border); gap: 8px;
}
.pc-price .old { font-size: 10px; color: var(--text-light); text-decoration: line-through; margin-bottom: 1px; }
.pc-price .cur { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1; }
.pc-price .cur small { font-size: 11px; font-weight: 400; color: var(--text-mid); margin-left: 1px; }
.btn-add { height: 31px; padding: 0 12px; background: var(--blue); color: #fff; border: none; border-radius: 7px; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: background .15s; white-space: nowrap; flex-shrink: 0; }
.btn-add:hover { background: var(--blue-dark); }
.btn-add i,
.btn-add .fa,
.btn-add .fas { font-size: 10px; }
.btn-add .icon { width: 12px; height: 12px; }

/* Kart giriş animasyonu */
@keyframes fu { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.pc { animation: fu .4s ease both; }
.pc:nth-child(1){animation-delay:.03s} .pc:nth-child(2){animation-delay:.06s}
.pc:nth-child(3){animation-delay:.09s} .pc:nth-child(4){animation-delay:.12s}
.pc:nth-child(5){animation-delay:.15s} .pc:nth-child(6){animation-delay:.18s}
.pc:nth-child(7){animation-delay:.21s} .pc:nth-child(8){animation-delay:.24s}

/* ── MINI CART (sepet hover dropdown) ─────────────────────── */
.mini-cart-wrap { position: relative; }
.mini-cart {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 340px; max-height: 480px; overflow-y: auto;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  z-index: 250; padding: 14px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.mini-cart-wrap:hover .mini-cart,
.mini-cart-wrap:focus-within .mini-cart {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.mini-cart-empty { color: var(--text-light); font-size: 13px; text-align: center; padding: 20px 0; margin: 0; }
.mini-cart-list { list-style: none; padding: 0; margin: 0; }
.mini-cart-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.mini-cart-item:last-child { border-bottom: none; }
.mini-cart-item img {
  width: 50px; height: 50px; object-fit: cover;
  border-radius: 6px; flex-shrink: 0; border: 1px solid var(--border);
}
.mini-cart-item-body { flex: 1; min-width: 0; }
.mini-cart-item-name {
  display: block; font-size: 12px; line-height: 1.35;
  color: var(--text); text-decoration: none; font-weight: 600;
  margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.mini-cart-item-name:hover { color: var(--blue); }
.mini-cart-item-row { display: flex; justify-content: space-between; align-items: center; }
.mini-cart-item-qty { font-size: 11px; color: var(--text-light); }
.mini-cart-item-price { font-size: 12px; font-weight: 700; color: var(--blue); white-space: nowrap; }
.mini-cart-item-remove {
  width: 24px; height: 24px; border: none; background: transparent;
  color: var(--text-light); cursor: pointer; border-radius: 4px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background .15s, color .15s;
}
.mini-cart-item-remove:hover { background: var(--red-light); color: var(--red); }
.mini-cart-totals { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px; }
.mini-cart-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-mid); margin-bottom: 4px; }
.mini-cart-row.total { font-size: 14px; font-weight: 700; color: var(--text); margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); }
.mini-cart-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.mini-cart-btn {
  flex: 0 0 auto; width: 100%; height: 40px; border-radius: 8px;
  font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600;
  text-decoration: none; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0 18px;
  transition: background .15s, color .15s, border-color .15s;
}
.mini-cart-btn.view { background: var(--blue-light); color: var(--blue-dark); border: 1px solid var(--blue-mid); }
.mini-cart-btn.view:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.mini-cart-btn.checkout { background: var(--blue); color: #fff; border: 2px solid var(--blue); }
.mini-cart-btn.checkout:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; }

/* Close button (mobil drawer'da görünür) */
.mini-cart-close {
  display: none; position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg); border: none; cursor: pointer;
  color: var(--text-mid); font-size: 14px;
  align-items: center; justify-content: center;
  z-index: 1;
}
.mini-cart-close:hover { background: var(--gray-200); color: var(--text); }

/* Backdrop (mobil drawer'da görünür) */
.mini-cart-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.45); z-index: 240;
  opacity: 0; visibility: hidden;
  transition: opacity .25s, visibility .25s;
}

@media (max-width: 768px) {
  .mini-cart {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    width: min(360px, 88vw); max-height: none; height: 100vh;
    border-radius: 0; padding: 50px 16px 16px;
    transform: translateX(100%);
    transition: transform .25s ease, visibility .25s, opacity .25s;
    box-shadow: -8px 0 24px rgba(0,0,0,.12);
    overflow-y: auto;
  }
  /* Mobilde hover ile açılmasın; sadece .is-open ile */
  .mini-cart-wrap:hover .mini-cart,
  .mini-cart-wrap:focus-within .mini-cart {
    opacity: 0; visibility: hidden; transform: translateX(100%);
  }
  .mini-cart-wrap.is-open .mini-cart {
    opacity: 1; visibility: visible; transform: translateX(0);
  }
  .mini-cart-close { display: flex; }
  .mini-cart-backdrop { display: block; }
  .mini-cart-wrap.is-open .mini-cart-backdrop {
    opacity: 1; visibility: visible;
  }
  body.mini-cart-open { overflow: hidden; }
}

/* ──────────────────────────────────────────────────────────
   Phase 1: SEO H tag refactor — yeni semantik class'lar
   ────────────────────────────────────────────────────────── */

/* Tekrarlı bölüm başlıkları (h2/h3/h4 yerine, PDF kuralı: tekrarlı alanda H yasak) */
.section-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 1.5em 0 0.75em;
    color: var(--intfa-text-primary, #222);
    line-height: 1.2;
}

/* Sidebar başlıkları (KAPIDA ÖDEME, WHATSAPP SİPARİŞ vb.) */
.sidebar-title {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.5em;
    color: var(--intfa-text-primary, #222);
}

/* Ürün kartı başlığı — heading_tag farkı olmadan aynı görünüm */
.pc-name,
h2.pc-name {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.3;
    margin: 0.5em 0;
    color: inherit;
}
/* Browser default h2 büyüklüğünü kategori grid'inde sıfırla */
h2.pc-name {
    font-size: 0.95rem;
    font-weight: 500;
}
/* Ürün kartı başlığı içindeki <a> default mavi/underline'ı sıfırla */
.pc-name a {
    color: inherit;
    text-decoration: none;
}

/* Görsel olarak gizli ama SEO + ekran okuyucu görür (sr = screen reader) */
.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;
}