/* ================================================================
   DOPAMIN TİCARET — NATIVE ANDROID / WEBVIEW TASARIM SİSTEMİ
   Mobile-First · Material Design 3 · Trendyol/Hepsiburada UX
   ================================================================ */

/* ──────────────────────────────────────────────────────────────
   1. DESIGN TOKENS
   ────────────────────────────────────────────────────────────── */
:root {
  --primary:       #ff5a3c;
  --primary-dark:  #e64a2e;
  --primary-2:     #ff7a28;
  --primary-grad:  linear-gradient(135deg,#ff5a3c 0%,#ff7a28 100%);
  --secondary:     #1f4ed8;
  --secondary-bg:  #eef5ff;

  --bg:            #e8edf480;
  --bg-soft:       #e8edf480;
  --surface:       #ffffff;
  --surface-2:     #f8fafc;
  --border:        #cdd5e0;
  --border-light:  #e2e8f0;

  --text:          #1a1d26;
  --text-2:        #42495a;
  --text-muted:    #6b7488;
  --text-subtle:   #a0a8b8;

  --success:       #16a34a;
  --success-bg:    #dcfce7;
  --warning:       #d97706;
  --warning-bg:    #fef3c7;
  --danger:        #dc2626;
  --danger-bg:     #fee2e2;
  --info:          #2563eb;
  --info-bg:       #eff6ff;

  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  18px;
  --r-xl:  22px;
  --r-2xl: 28px;
  --r-pill:999px;

  --shadow-sm:  0 1px 4px rgba(0,0,0,.07);
  --shadow-md:  0 4px 16px rgba(0,0,0,.09);
  --shadow-lg:  0 8px 28px rgba(0,0,0,.12);
  --shadow-xl:  0 16px 48px rgba(0,0,0,.15);

  --header-h:     56px;
  --bottom-nav-h: 58px;
  --safe-top:     env(safe-area-inset-top,0px);
  --safe-bottom:  env(safe-area-inset-bottom,0px);
}

/* ──────────────────────────────────────────────────────────────
   2. RESET & BASE
   ────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html {
  font-size:16px;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  height: -webkit-fill-available;
}

body {
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  background-color:var(--bg);
  color:var(--text);
  line-height:1.55;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  min-height:100vh;
  min-height:-webkit-fill-available;
  padding-top:var(--safe-top);
}

a { text-decoration:none; color:inherit; }
img { display:block; max-width:100%; height:auto; }
button,input,select,textarea { font-family:inherit; font-size:inherit; }
ul,ol { list-style:none; padding:0; margin:0; }
p { margin-bottom:.75rem; }
p:last-child { margin-bottom:0; }
h1,h2,h3,h4,h5,h6 { font-weight:700; line-height:1.25; }

/* ──────────────────────────────────────────────────────────────
   3. LAYOUT
   ────────────────────────────────────────────────────────────── */
.container {
  width:100%;
  max-width:1280px;
  margin-inline:auto;
  padding-inline:16px;
}

/* Bootstrap-compatible grid — mobile first */
.row { display:flex; flex-wrap:wrap; margin-inline:-8px; }
.row > * { padding-inline:8px; }
.col-12   { flex:0 0 100%; max-width:100%; }
.col-6    { flex:0 0 50%;  max-width:50%;  }

/* gy / gap helpers */
.gy-3 > * { margin-bottom:1rem; }
.gy-4 > * { margin-bottom:1.25rem; }
.g-3  { gap:1rem; }
.g-4  { gap:1.25rem; }

/* flex utils */
.d-flex          { display:flex; }
.d-grid          { display:grid; }
.d-none          { display:none; }
.d-block         { display:block; }
.d-inline-flex   { display:inline-flex; }
.flex-column     { flex-direction:column; }
.flex-wrap       { flex-wrap:wrap; }
.align-items-center { align-items:center; }
.align-items-start  { align-items:flex-start; }
.justify-content-between { justify-content:space-between; }
.justify-content-center  { justify-content:center; }
.justify-content-end     { justify-content:flex-end; }
.flex-grow-1 { flex-grow:1; }
.flex-shrink-0 { flex-shrink:0; }
.vstack { display:flex; flex-direction:column; }
.gap-1 { gap:.25rem; }
.gap-2 { gap:.5rem; }
.gap-3 { gap:.75rem; }
.gap-4 { gap:1rem; }

/* spacing */
.mt-1{margin-top:.25rem} .mt-2{margin-top:.5rem} .mt-3{margin-top:1rem} .mt-4{margin-top:1.5rem}
.mb-0{margin-bottom:0}   .mb-1{margin-bottom:.25rem} .mb-2{margin-bottom:.5rem} .mb-3{margin-bottom:1rem} .mb-4{margin-bottom:1.5rem}
.ms-1{margin-left:.25rem}.ms-2{margin-left:.5rem}
.me-1{margin-right:.25rem}
.my-3{margin-block:1rem} .my-4{margin-block:1.5rem}
.p-0{padding:0} .p-3{padding:1rem} .p-4{padding:1.5rem}
.px-3{padding-inline:1rem} .px-4{padding-inline:1.5rem}
.py-3{padding-block:1rem} .py-4{padding-block:1.5rem} .py-5{padding-block:3rem}
.pt-3{padding-top:1rem}

/* misc */
.w-100 { width:100%; }
.h-100 { height:100%; }
.min-w-0 { min-width:0; }
.overflow-hidden { overflow:hidden; }
.text-center { text-align:center; }
.text-end    { text-align:right; }
.text-muted  { color:var(--text-muted); }
.text-subtle { color:var(--text-subtle); }
.text-primary{ color:var(--primary); }
.fw-600 { font-weight:600; }
.fw-700 { font-weight:700; }
.fw-800 { font-weight:800; }
.small,small { font-size:.85rem; }
.list-unstyled { list-style:none; padding:0; margin:0; }
.rounded-circle { border-radius:50%; }
hr { border:none; border-top:1px solid var(--border); margin-block:1.25rem; }

/* ──────────────────────────────────────────────────────────────
   4. RIPPLE EFFECT (Material Design)
   ────────────────────────────────────────────────────────────── */
.ripple-host { position:relative; overflow:hidden; }
.ripple {
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,.38);
  transform:scale(0);
  animation:ripple-anim .5s ease-out forwards;
  pointer-events:none;
}
@keyframes ripple-anim { to { transform:scale(2.8); opacity:0; } }

/* ──────────────────────────────────────────────────────────────
   5. BUTTONS — Native Android feel
   ────────────────────────────────────────────────────────────── */
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-ghost,
.btn-danger,
.btn-kutu {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  min-height:48px;
  padding:.7rem 1.25rem;
  border-radius:var(--r-pill);
  font-weight:700;
  font-size:.95rem;
  border:none;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:transform .15s,box-shadow .15s,opacity .15s;
  white-space:nowrap;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  text-align:center;
}
.btn-primary:active,
.btn-secondary:active,
.btn-outline:active,
.btn-ghost:active,
.btn-danger:active { transform:scale(.96); }

.btn-primary,.btn-kutu {
  background:var(--primary-grad);
  color:#fff;
  box-shadow:0 4px 14px rgba(255,90,60,.3);
}
.btn-primary:hover,.btn-kutu:hover { box-shadow:0 6px 20px rgba(255,90,60,.4); }

.btn-secondary { background:var(--secondary-bg); color:var(--secondary); }
.btn-outline   { background:var(--surface); color:var(--text); border:1.5px solid var(--border); }
.btn-outline:hover { background:var(--bg); }
.btn-ghost     { background:transparent; color:var(--text-muted); border:none; }
.btn-danger    { background:var(--danger); color:#fff; }

.btn-sm { min-height:38px; padding:.45rem .9rem; font-size:.85rem; }
.btn-lg { min-height:54px; padding:.85rem 1.5rem; font-size:1rem; }
.btn-primary.disabled,.btn-primary[disabled] { opacity:.5; pointer-events:none; }
.btn-block { width:100%; }

/* ──────────────────────────────────────────────────────────────
   6. FORMS — Large inputs, keyboard-friendly
   ────────────────────────────────────────────────────────────── */
.form-label {
  display:block;
  font-size:.88rem;
  font-weight:600;
  color:var(--text-2);
  margin-bottom:.35rem;
}
.form-control,
.form-select,
.select-pill,
input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=tel],
input[type=date],
input[type=time],
input[type=color],
textarea,
select {
  width:100%;
  min-height:52px;
  padding:.75rem 1rem;
  border:1.5px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface);
  color:var(--text);
  font-size:1rem;
  transition:border-color .2s,box-shadow .2s;
  -webkit-appearance:none;
  appearance:none;
}
.form-control:focus,.form-select:focus,select:focus,
input[type=text]:focus,input[type=email]:focus,
input[type=password]:focus,input[type=number]:focus,
input[type=tel]:focus,textarea:focus {
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(255,90,60,.15);
}
textarea,.form-control[rows] { min-height:96px; resize:vertical; }
.form-control-sm,.form-select-sm { min-height:40px; padding:.4rem .7rem; font-size:.87rem; }
.form-group { margin-bottom:1rem; }
.form-check { display:flex; align-items:center; gap:.5rem; }
.form-check-input {
  width:20px; height:20px; border-radius:4px;
  border:2px solid var(--border); background:var(--surface);
  appearance:none; cursor:pointer; flex-shrink:0;
  transition:background .15s,border-color .15s;
}
.form-check-input:checked { background:var(--primary); border-color:var(--primary); }
.form-check-label { font-size:.93rem; cursor:pointer; }
input[type=radio] { border-radius:50%; }

/* ──────────────────────────────────────────────────────────────
   7. CARDS & SURFACES
   ────────────────────────────────────────────────────────────── */
.card,.page-card,.section-card,.filter-card,.hero-card,.promo-card {
  background:linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 8px 24px rgba(17,24,39,.04);
}
.card        { padding:1.25rem; }
.page-card   { padding:1.25rem; color:#111111; font-family:inherit; }
.section-card{ padding:1.25rem; }
.filter-card { padding:1rem; }
.hero-card   { padding:1.5rem; }
.promo-card  { padding:1rem; }
.promo-banner {
  background:linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border:1px solid var(--border);
  border-radius:16px;
  padding:1rem;
}
.page-hero {
  background:linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border:1px solid var(--border);
  border-radius:20px;
  padding:1.5rem;
  margin-bottom:1.25rem;
  box-shadow:0 6px 20px rgba(17,24,39,.03);
}
.page-card h2,
.page-card h3,
.page-card h4 {
  color:#111111;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-0.01em;
}
.page-card h2 { font-size:1.08rem; margin-bottom:.7rem; }
.page-card h3 { font-size:1rem; margin-bottom:.6rem; }
.page-card p,
.page-card li,
.page-card summary,
.page-card details > div,
.page-card .alert {
  color:#111111;
  font-weight:400;
  font-family:inherit;
}
.page-card .alert { font-weight:500; }
.page-card ul { display:grid; gap:.55rem; }
.page-card .page-list li { margin-left:0; }

/* ──────────────────────────────────────────────────────────────
   8. BADGE
   ────────────────────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center;
  padding:.22rem .6rem;
  border-radius:var(--r-pill);
  font-size:.74rem; font-weight:700;
  background:var(--secondary-bg); color:var(--secondary);
  white-space:nowrap; line-height:1.4;
}
.badge-success,.bg-success { background:var(--success-bg)!important; color:var(--success)!important; }
.badge-warning,.bg-warning { background:var(--warning-bg)!important; color:var(--warning)!important; }
.badge-danger, .bg-danger  { background:var(--danger-bg)!important;  color:var(--danger)!important;  }
.badge-muted,  .bg-secondary{ background:#f0f1f5!important; color:#555!important; }
.badge-primary,.bg-primary  { background:var(--primary)!important; color:#fff!important; }
.text-dark { color:var(--text)!important; }

/* ──────────────────────────────────────────────────────────────
   9. ALERTS
   ────────────────────────────────────────────────────────────── */
.alert {
  padding:.85rem 1rem; border-radius:var(--r-md);
  font-size:.93rem; font-weight:500; margin-bottom:1rem;
  display:flex; align-items:flex-start; gap:.5rem;
}
.alert:last-child { margin-bottom:0; }
.alert-danger  { background:var(--danger-bg);  color:#991b1b; border:1px solid #fca5a5; }
.alert-success { background:var(--success-bg); color:#166534; border:1px solid #86efac; }
.alert-warning { background:var(--warning-bg); color:#92400e; border:1px solid #fde68a; }
.alert-info    { background:var(--info-bg);    color:#1e40af; border:1px solid #bfdbfe; }

/* ──────────────────────────────────────────────────────────────
   10. TOAST — Bottom of screen for mobile
   ────────────────────────────────────────────────────────────── */
.toast-stack {
  position:fixed;
  left:12px; right:12px;
  bottom:calc(var(--bottom-nav-h) + var(--safe-bottom) + 12px);
  display:flex; flex-direction:column; gap:.5rem;
  z-index:900; pointer-events:none;
}
.toast-item {
  display:flex; align-items:center; gap:.5rem;
  background:#1e2130; color:#fff;
  padding:.7rem 1rem;
  border-radius:var(--r-md);
  box-shadow:var(--shadow-xl);
  font-weight:600; font-size:.9rem;
  animation:toast-in .25s ease;
  pointer-events:auto;
  max-width:440px; margin-inline:auto; width:100%;
}
@keyframes toast-in { from{opacity:0;transform:translateY(16px)} }
.toast-item.is-success { background:#0f2e1a; }
.toast-item.is-error   { background:#3b0f0f; }

/* ──────────────────────────────────────────────────────────────
   11. MAIN HEADER — Sticky, compact on scroll
   ────────────────────────────────────────────────────────────── */
.main-header {
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky;
  top:var(--safe-top);
  z-index:300;
  box-shadow:0 1px 8px rgba(0,0,0,.06);
  transition:padding .2s,box-shadow .2s,transform .25s;
}
.main-header .container {
  display:flex; align-items:center; gap:.75rem;
  min-height:var(--header-h); padding-block:.6rem;
}
.main-header.is-compact { box-shadow:0 2px 12px rgba(0,0,0,.1); }
.main-header.hide-up { transform:translateY(-110%); }

.brand {
  display:flex;align-items:center;gap:.6rem;color:var(--text);flex-shrink:0;
  min-width:220px;
}
.brand-logo {
  height:112px;
  width:auto;
  display:block;
  object-fit:contain;
}
.brand-copy strong{display:block;font-size:.95rem;}
.brand-copy small{color:var(--text-muted);font-size:.78rem;}
.brand-icon {
  width:40px;height:40px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--primary-grad);color:#fff;font-weight:700;font-size:1.1rem;
}

/* Desktop search */
.search-form {
  flex:1; max-width:640px;
  display:flex; align-items:center;
  background:var(--bg); border:1.5px solid var(--border);
  border-radius:var(--r-pill);
  padding:.25rem .35rem .25rem .9rem;
  position:relative;
  transition:border-color .2s;
}
.search-form:focus-within { border-color:var(--primary); }
.search-form input {
  flex:1; border:none; background:transparent; outline:none;
  min-height:40px; font-size:.95rem; border-radius:0;
  padding:0; width:100%;
}
.search-form button {
  min-height:38px; border:none; background:var(--primary-grad);
  color:#fff; padding:.55rem .95rem; border-radius:var(--r-pill);
  font-weight:700; cursor:pointer; flex-shrink:0; font-size:.88rem;
  transition:box-shadow .15s;
}
.search-suggestions {
  position:absolute; left:0; right:0; top:calc(100% + 6px);
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  display:none; z-index:400; overflow:hidden;
}
.search-suggestions.show{display:block;}
.suggestion-item{display:block;padding:.75rem 1rem;color:var(--text-2);font-size:.93rem;}
.suggestion-item:hover{background:var(--bg);}

/* Header actions */
.header-actions{display:flex;gap:.4rem;align-items:center;flex-shrink:0;}
.icon-link {
  display:inline-flex; align-items:center; justify-content:center;
  gap:.3rem; min-width:44px; min-height:44px;
  border-radius:var(--r-md);
  color:var(--text-2); background:var(--bg);
  border:1px solid var(--border);
  font-size:.82rem; font-weight:600;
  position:relative; overflow:hidden;
  padding:.5rem .7rem;
  transition:background .15s;
  cursor:pointer;
}
.icon-link span {
  font-size:.7rem; background:var(--primary); color:#fff;
  padding:.1rem .35rem; border-radius:var(--r-pill);
  position:absolute; top:-4px; right:-4px; line-height:1.4;
  font-weight:700;
}
.icon-link.has-badge span { position:static; }
.icon-link.orders-link { color:#a53f00; background:linear-gradient(135deg,#fff2e8,#fff8f3); border-color:#ffd9bf; }
.orders-glyph{display:block;}

/* Mobile toggle */
.mobile-menu-toggle {
  display:none; width:44px; height:44px;
  border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--surface); cursor:pointer;
  align-items:center; justify-content:center;
  flex-direction:column; gap:5px; flex-shrink:0;
}
.mobile-menu-toggle span{width:18px;height:2px;border-radius:2px;background:var(--text-2);transition:transform .2s,opacity .2s;}
.mobile-search-toggle{display:none;}

/* ──────────────────────────────────────────────────────────────
   13. CATEGORY NAV
   ────────────────────────────────────────────────────────────── */
.category-nav{background:var(--surface);border-bottom:1px solid var(--border);padding:.6rem 0;}
.category-nav-list{display:flex;gap:.5rem;flex-wrap:wrap;scrollbar-width:none;}
.category-nav-list::-webkit-scrollbar{display:none;}
.category-pill {
  display:inline-flex; align-items:center; gap:.35rem;
  flex:0 0 auto; padding:.45rem .8rem;
  border-radius:var(--r-pill); background:var(--bg);
  color:var(--text-2); border:1px solid var(--border);
  font-size:.88rem; white-space:nowrap; min-height:40px;
  position:relative; overflow:hidden; cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.category-pill:hover{background:#e8e8f0;}
.category-pill.active{background:var(--primary-grad);color:#fff;border-color:transparent;box-shadow:0 3px 10px rgba(255,90,60,.3);}

/* ──────────────────────────────────────────────────────────────
   14. MAIN CONTENT
   ────────────────────────────────────────────────────────────── */
.main-content {
  padding-bottom:2rem;
  background:transparent;
}
.py-4 { padding-block:1.5rem; }

/* ──────────────────────────────────────────────────────────────
   15. HERO SECTION
   ────────────────────────────────────────────────────────────── */
.hero-title{font-size:clamp(1.55rem,4vw,2.5rem);line-height:1.15;font-weight:800;color:#111111;letter-spacing:-0.02em;}
.hero-copy{color:#222222;line-height:1.7;font-weight:500;}
.hero-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.25rem;}
.hero-stats{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem;}
.hero-stats span{background:#f8f8fb;border:1px solid #ececf2;padding:.4rem .75rem;border-radius:999px;font-size:.83rem;color:#222222;font-weight:500;}

/* ──────────────────────────────────────────────────────────────
   16. SECTION HEADER
   ────────────────────────────────────────────────────────────── */
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;}
.section-title{font-size:1.1rem;font-weight:700;color:var(--text);}

/* ──────────────────────────────────────────────────────────────
   17. CATEGORY GRID
   ────────────────────────────────────────────────────────────── */
.category-grid{display:grid;gap:.75rem;grid-template-columns:repeat(6,minmax(0,1fr));}
.category-item{
  background:var(--surface);border:1px solid var(--border);
  padding:.9rem .5rem;border-radius:var(--r-lg);text-align:center;
  box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s;
  cursor:pointer;
}
.category-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.category-icon{font-size:1.5rem;margin-bottom:.35rem;}

/* ──────────────────────────────────────────────────────────────
   18. PRODUCT GRID & CARD — Trendyol style
   ────────────────────────────────────────────────────────────── */
.product-grid{display:grid;gap:.75rem;grid-template-columns:repeat(4,minmax(0,1fr));}

.product-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .2s,box-shadow .2s;
  display:flex; flex-direction:column;
  cursor:pointer;
  position:relative;
}
.product-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}

/* Kart tamamını tıklanabilir yapan overlay anchor */
.product-card-link {
  position:absolute; inset:0; z-index:1;
  border-radius:var(--r-lg);
}
/* Favori butonu ve sepete ekle overlay'in üzerinde */
.product-wishlist-btn,
.product-actions { position:relative; z-index:2; }

.product-image-wrap{position:relative;overflow:hidden;flex-shrink:0;}
.product-image {
  width:100%; height:200px;
  object-fit:cover;
  display:block;
  transition:transform .3s;
}
.product-card:hover .product-image{transform:scale(1.04);}

.product-discount-badge{
  position:absolute; top:8px; left:8px;
  background:var(--primary); color:#fff;
  font-size:.72rem; font-weight:800;
  padding:.18rem .45rem; border-radius:var(--r-sm);
  line-height:1.4;
}
.product-wishlist-btn {
  position:absolute; top:6px; right:6px;
  width:34px; height:34px;
  background:rgba(255,255,255,.9);
  border:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  transition:transform .15s,background .15s;
  backdrop-filter:blur(4px);
}
.product-wishlist-btn:active{transform:scale(.9);}
.product-wishlist-btn.active{background:rgba(255,230,224,.95);color:#c23014;}

.product-body{padding:.75rem;display:flex;flex-direction:column;flex:1;}
.product-meta{display:flex;justify-content:space-between;align-items:center;color:var(--text-muted);font-size:.78rem;margin-bottom:.35rem;}
.product-title{font-size:.88rem;font-weight:600;color:var(--text);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.product-brand{font-size:.78rem;color:var(--text-muted);margin-top:.2rem;}
.price-row{display:flex;align-items:flex-end;justify-content:space-between;margin-top:auto;padding-top:.5rem;}
.price{font-size:1.05rem;font-weight:800;color:var(--primary);}
.old-price{color:var(--text-subtle);text-decoration:line-through;font-size:.8rem;margin-left:.25rem;}
.product-rating{font-size:.76rem;color:var(--text-muted);}

.product-actions{display:flex;gap:.4rem;padding:.6rem .75rem .75rem;border-top:1px solid var(--border-light,var(--border));margin-top:auto;}
.product-actions .add-cart {
  flex:1;border:none;border-radius:var(--r-pill);padding:.6rem;
  font-weight:700;text-align:center;font-size:.83rem;
  background:var(--primary-grad);color:#fff;min-height:42px;
  display:flex;align-items:center;justify-content:center;gap:.3rem;
  cursor:pointer;position:relative;overflow:hidden;
  transition:box-shadow .15s;
}
.product-actions .add-cart:active{transform:scale(.97);}
.product-actions .wishlist {
  background:var(--bg);color:var(--text-2);
  border:1px solid var(--border);border-radius:var(--r-pill);
  min-width:42px;flex:0 0 42px;font-size:.95rem;cursor:pointer;
  min-height:42px;display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.product-actions .wishlist.active{background:#ffe9e4;color:#c23014;border-color:#ffd3c7;}

/* Flash sale */
.flash-sale{background:var(--primary-grad);color:#fff;padding:1.2rem;border-radius:var(--r-xl);}
.flash-sale .timer{display:flex;gap:.45rem;margin-top:.65rem;flex-wrap:wrap;}
.flash-sale .timer span{background:rgba(255,255,255,.2);padding:.35rem .55rem;border-radius:var(--r-sm);font-weight:700;font-size:.88rem;}
.flash-campaign-product{display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem;padding:.45rem;border-radius:var(--r-md);background:rgba(255,255,255,.92);color:var(--text);}
.flash-campaign-product img{width:52px;height:52px;border-radius:10px;object-fit:cover;border:1px solid var(--border);flex-shrink:0;}
.flash-campaign-product small{display:block;opacity:.65;font-size:.72rem;color:var(--text-muted);}
.flash-campaign-product div div{font-size:.88rem;font-weight:700;line-height:1.2;color:var(--text);}

/* Countdown */
.campaign-countdown{font-size:.8rem;color:var(--text-muted);margin-top:.3rem;}

/* Task card */
.task-card.completed{border:1px solid #86efac;background:linear-gradient(135deg,#f0fdf4,#f7fff9);}

/* ──────────────────────────────────────────────────────────────
   19. CHECKOUT STEPPER
   ────────────────────────────────────────────────────────────── */
.checkout-stepper{display:flex;gap:.4rem;margin-bottom:1.25rem;}
.checkout-stepper span {
  flex:1; min-height:38px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:700;
  border:1.5px solid var(--border); border-radius:var(--r-pill);
  color:var(--text-muted); background:var(--surface);
}
.checkout-stepper span.active{background:var(--primary-grad);color:#fff;border-color:transparent;box-shadow:0 3px 10px rgba(255,90,60,.28);}
.checkout-stepper span.done{background:var(--success-bg);color:var(--success);border-color:var(--success);}

/* Cart summary sticky */
.cart-summary-sheet{
  position:sticky;
  bottom:calc(var(--bottom-nav-h) + var(--safe-bottom) + .75rem);
}

/* ──────────────────────────────────────────────────────────────
   20. FILTER / SORT
   ────────────────────────────────────────────────────────────── */
.filter-group{display:flex;flex-direction:column;gap:.4rem;}
.filter-sidebar{display:flex;flex-direction:column;gap:1rem;}
.sort-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;}
.select-pill{padding:.55rem .9rem;border-radius:var(--r-pill);border:1.5px solid var(--border);background:var(--surface);font-size:.9rem;cursor:pointer;}
.shop-toolbar{display:flex;align-items:center;gap:.5rem;margin-bottom:.85rem;flex-wrap:wrap;}
.shop-search-form{flex:1;min-width:220px;display:flex;gap:.4rem;}
.shop-sort-form{display:flex;align-items:center;gap:.5rem;margin-left:auto;}
.filter-panel-card{display:grid;gap:.85rem;padding:1rem;}
.filter-panel-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.2rem;}
.filter-panel-head h4{margin:0;font-size:.95rem;font-weight:700;}
.filter-price-inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;}
.filter-actions{display:flex;gap:.5rem;flex-wrap:wrap;}
.filter-actions > *{flex:1 1 140px;}
#filterToggleBtn.is-active{background:var(--primary);color:#fff;border-color:var(--primary);}

/* ──────────────────────────────────────────────────────────────
   21. MOBILE DRAWER
   ────────────────────────────────────────────────────────────── */
.mobile-drawer{position:fixed;inset:0;z-index:500;pointer-events:none;}
.mobile-drawer-backdrop{position:absolute;inset:0;background:rgba(15,18,26,.55);opacity:0;transition:opacity .25s;}
.mobile-drawer-panel {
  position:absolute;left:0;top:0;
  width:min(88vw,340px);height:100%;
  background:var(--surface);
  transform:translateX(-105%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  border-right:1px solid var(--border);
  padding:calc(12px + var(--safe-top)) 14px calc(16px + var(--safe-bottom));
  overflow-y:auto;display:flex;flex-direction:column;gap:.8rem;
}
body.mobile-drawer-open .mobile-drawer{pointer-events:auto;}
body.mobile-drawer-open .mobile-drawer-backdrop{opacity:1;}
body.mobile-drawer-open .mobile-drawer-panel{transform:translateX(0);}
body.mobile-drawer-open{overflow:hidden;}

.mobile-drawer-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:.75rem;border-bottom:1px solid var(--border);}
.mobile-drawer-head strong{font-size:1rem;font-weight:700;}
.mobile-drawer-close{border:1px solid var(--border);background:var(--bg);width:40px;height:40px;border-radius:var(--r-md);cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;}
.mobile-drawer-nav,.mobile-drawer-categories{display:flex;flex-direction:column;gap:.35rem;}
.mobile-drawer-nav a,.mobile-drawer-categories a {
  display:flex;align-items:center;gap:.65rem;
  border:1px solid var(--border);background:var(--bg);
  border-radius:var(--r-md);padding:.75rem .9rem;
  color:var(--text);font-weight:600;font-size:.9rem;
  min-height:48px;transition:background .15s;
}
.mobile-drawer-nav a:hover,.mobile-drawer-categories a:hover{background:#e8e8f0;}
.mobile-drawer-divider{font-size:.75rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;padding:.5rem .25rem 0;}

/* ──────────────────────────────────────────────────────────────
   22. BOTTOM NAVIGATION — Native Android style
   ────────────────────────────────────────────────────────────── */
.mobile-bottom-nav {
  position:fixed; left:0; right:0; bottom:0; z-index:400;
  background:rgba(255,255,255,.97);
  border-top:1px solid var(--border);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  display:none;
  padding:.25rem .5rem calc(.25rem + var(--safe-bottom));
}
.mobile-bottom-nav a {
  flex:1; min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.1rem; border-radius:var(--r-md);
  color:var(--text-muted); min-height:var(--bottom-nav-h);
  font-size:.64rem; font-weight:600;
  position:relative; overflow:hidden;
  transition:color .15s;
  padding:.35rem .25rem;
}
.mobile-bottom-nav a span.nav-icon{font-size:1.2rem;line-height:1;transition:transform .15s;}
.mobile-bottom-nav a.active span.nav-icon{transform:scale(1.1);}
.mobile-bottom-nav a small{display:block;white-space:nowrap;font-size:.64rem;}
.mobile-bottom-nav a.active{color:var(--primary);}
.mobile-bottom-nav a.active::after{
  content:'';position:absolute;bottom:0;left:20%;right:20%;height:3px;
  background:var(--primary-grad);border-radius:var(--r-pill);
}
.nav-badge {
  position:absolute; top:2px; right:calc(50% - 14px);
  background:var(--primary); color:#fff;
  font-size:.58rem; font-weight:800;
  padding:0 .28rem; border-radius:var(--r-pill);
  min-width:16px; height:16px; text-align:center; line-height:16px;
  pointer-events:none; border:1.5px solid var(--surface);
  white-space:nowrap;
}

/* ──────────────────────────────────────────────────────────────
   23. FOOTER
   ────────────────────────────────────────────────────────────── */
.site-footer{background:var(--surface);border-top:1px solid var(--border);padding:2rem 0;margin-top:2rem;}
.site-footer h5{font-size:.95rem;margin-bottom:.75rem;font-weight:700;color:var(--text);}
.footer-section{border:0;background:transparent;}
.footer-section > summary{list-style:none;font-size:.95rem;margin-bottom:.75rem;font-weight:700;color:var(--text);cursor:default;pointer-events:none;}
.footer-section > summary::-webkit-details-marker{display:none;}
.site-footer p{color:#4e5565;line-height:1.55;margin-bottom:.65rem;font-size:.9rem;}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.4rem;}
.site-footer a{color:#535b6b;font-size:.88rem;transition:color .15s;}
.site-footer a:hover{color:var(--text);}
.newsletter-form{display:flex;gap:.5rem;flex-wrap:wrap;}
.newsletter-form input{flex:1;min-width:160px;border:1px solid var(--border);padding:.6rem .8rem;border-radius:var(--r-pill);font-size:.9rem;}
.newsletter-form button{border:none;background:var(--primary);color:#fff;border-radius:var(--r-pill);padding:.6rem .9rem;font-weight:700;cursor:pointer;white-space:nowrap;}

/* ──────────────────────────────────────────────────────────────
   24. SKELETON / SHIMMER
   ────────────────────────────────────────────────────────────── */
.skeleton,.shimmer{
  background:linear-gradient(90deg,#f2f2f4 25%,#e8e8ec 50%,#f2f2f4 75%);
  background-size:400% 100%;
  animation:shimmer 1.4s ease infinite;
  border-radius:var(--r-md);
}
@keyframes shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ──────────────────────────────────────────────────────────────
   25. PROGRESS
   ────────────────────────────────────────────────────────────── */
.progress{height:8px;border-radius:var(--r-pill);background:#f0f0f5;overflow:hidden;}
.progress-bar{height:100%;background:var(--primary-grad);border-radius:var(--r-pill);transition:width .4s;}
.progress-bar.bg-warning{background:var(--warning);}

/* ──────────────────────────────────────────────────────────────
   26. TABLE
   ────────────────────────────────────────────────────────────── */
.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table{width:100%;border-collapse:collapse;font-size:.88rem;}
.table th,.table td{padding:.7rem .85rem;text-align:left;border-bottom:1px solid var(--border);vertical-align:middle;}
.table th{font-weight:700;color:var(--text-muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;background:var(--bg);}
.table tbody tr:last-child td{border-bottom:none;}
.table tbody tr:hover td{background:#fafafa;}
.table.align-middle td,.table.align-middle th{vertical-align:middle;}

/* ──────────────────────────────────────────────────────────────
   27. PAGINATION
   ────────────────────────────────────────────────────────────── */
.pagination{display:flex;gap:.3rem;list-style:none;padding:0;margin:0;flex-wrap:wrap;}
.page-link{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;padding:.35rem .6rem;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface);color:var(--text);font-weight:600;cursor:pointer;font-size:.87rem;}
.page-item.active .page-link{background:var(--primary-grad);color:#fff;border-color:transparent;}
.page-item.disabled .page-link{opacity:.4;pointer-events:none;}
.pagination.justify-content-center{justify-content:center;}

/* ──────────────────────────────────────────────────────────────
   28. ADMIN NAV & COMPONENTS
   ────────────────────────────────────────────────────────────── */
.admin-nav-wrap{position:sticky;top:calc(var(--header-h) + var(--safe-top) + 4px);z-index:90;padding-block:.5rem;}
.admin-nav{display:flex;gap:.4rem;flex-wrap:wrap;}
.admin-nav-link{padding:.5rem .9rem;border-radius:var(--r-pill);background:var(--bg);border:1px solid var(--border);color:var(--text-2);font-weight:600;font-size:.87rem;transition:background .15s;}
.admin-nav-link.active{background:var(--primary-grad);color:#fff;border-color:transparent;}
.admin-stat-card{min-height:130px;}
.admin-chart-box{position:relative;width:100%;height:260px;max-height:260px;overflow:hidden;}

/* Admin orders */
.admin-orders-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem;}
.admin-orders-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:.7rem .85rem;}
.admin-orders-stat small{display:block;color:var(--text-muted);font-size:.76rem;}
.admin-orders-stat strong{display:block;margin-top:.2rem;font-size:1rem;}
.admin-order-list{display:grid;gap:.8rem;}
.admin-order-card{border:1px solid var(--border);border-radius:var(--r-lg);padding:.9rem;background:var(--surface);}
.admin-order-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin-bottom:.6rem;}
.admin-order-no{font-weight:800;color:var(--text);}
.admin-order-meta{margin-top:.2rem;display:inline-flex;align-items:center;gap:.3rem;color:var(--text-muted);font-size:.8rem;}
.admin-order-right{text-align:right;}
.admin-order-right strong{display:block;margin-top:.2rem;}
.admin-order-status{display:inline-flex;padding:.2rem .55rem;border-radius:var(--r-pill);font-size:.74rem;font-weight:700;}
.admin-order-status.pending{color:#8f3a05;background:#fff0e6;}
.admin-order-status.shipping{color:#1a4f95;background:#e8f2ff;}
.admin-order-status.delivered{color:#256131;background:#e5f7ea;}
.admin-order-body{display:grid;grid-template-columns:1fr 200px;gap:.85rem;}
.admin-order-items{border:1px solid var(--border);border-radius:var(--r-md);padding:.75rem;}
.admin-order-items h6{margin:0 0 .5rem;font-weight:700;}
.admin-order-item-row{display:grid;grid-template-columns:50px 1fr auto;gap:.55rem;align-items:center;border-top:1px dashed var(--border);padding-top:.5rem;margin-top:.5rem;}
.admin-order-item-row:first-of-type{border-top:none;margin-top:0;padding-top:0;}
.admin-order-item-row img{width:50px;height:50px;border-radius:var(--r-sm);object-fit:cover;border:1px solid var(--border);}
.admin-order-item-main strong{display:block;font-size:.88rem;}
.admin-order-item-main small{color:var(--text-muted);}
.admin-order-item-metrics{display:grid;justify-items:end;gap:.1rem;color:var(--text-muted);font-size:.77rem;}
.admin-order-actions{border:1px solid var(--border);border-radius:var(--r-md);padding:.7rem;background:var(--bg);}

/* ──────────────────────────────────────────────────────────────
   29. NOTIFICATION PAGE
   ────────────────────────────────────────────────────────────── */
.notification-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1.25rem;border-radius:var(--r-xl);border:1px solid #ffe0d1;background:linear-gradient(130deg,#fff7f2,#fff,#f6fbff);}
.notification-hero h2{margin:0;font-size:1.4rem;font-weight:800;}
.notification-hero p{margin:.35rem 0 0;color:var(--text-muted);}
.notification-stats{display:flex;gap:.6rem;}
.notification-stat-item{min-width:96px;padding:.65rem .8rem;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface);text-align:right;}
.notification-stat-item small{display:block;color:var(--text-muted);font-size:.76rem;}
.notification-stat-item strong{display:block;margin-top:.18rem;font-size:1.1rem;}
.notification-stat-item.unread{border-color:#ffd2bb;background:#fff3eb;}
.notification-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:1rem;box-shadow:var(--shadow-md);}
.notification-toolbar{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.35rem .35rem .85rem;border-bottom:1px solid var(--border);}
.notification-tabs{display:inline-flex;gap:.4rem;padding:.18rem;border-radius:var(--r-pill);background:#f5f5f8;}
.notification-tab{border:none;background:transparent;color:#595959;border-radius:var(--r-pill);padding:.4rem .85rem;font-weight:700;font-size:.86rem;cursor:pointer;}
.notification-tab.active{background:var(--surface);color:var(--text);box-shadow:0 3px 10px rgba(0,0,0,.08);}
.notification-list{display:grid;gap:.65rem;margin-top:.9rem;}
.notification-item{display:grid;grid-template-columns:42px 1fr auto;gap:.75rem;align-items:start;border:1px solid var(--border);border-radius:var(--r-lg);padding:.9rem;background:var(--surface);transition:box-shadow .2s,border-color .2s;}
.notification-item.is-unread{border-color:#ffd8c3;background:linear-gradient(180deg,#fffdfc,#fff);}
.notification-icon{width:42px;height:42px;border-radius:var(--r-md);display:inline-flex;align-items:center;justify-content:center;background:var(--bg);font-size:1.1rem;}
.notification-head{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;}
.notification-head h5{margin:0;font-size:.95rem;font-weight:700;}
.notification-body p{margin:.35rem 0 0;color:var(--text-2);line-height:1.45;font-size:.9rem;}
.notification-meta{margin-top:.55rem;display:flex;gap:.45rem;align-items:center;flex-wrap:wrap;}
.notification-state{display:inline-flex;align-items:center;border-radius:var(--r-pill);font-size:.74rem;font-weight:700;padding:.18rem .55rem;}
.notification-state.unread{color:#9d3307;background:#ffede3;}
.notification-state.read{color:#3f6f1d;background:#ebf6df;}
.notification-actions{align-self:center;}
.notification-item.is-read{opacity:.75;}
.notification-item.is-hidden{display:none;}
.notification-empty{border:1px dashed var(--border);border-radius:var(--r-lg);background:var(--bg);}

/* ──────────────────────────────────────────────────────────────
   30. ORDER PAGE & DETAIL
   ────────────────────────────────────────────────────────────── */
.order-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1.25rem;border-radius:var(--r-xl);border:1px solid #ffd9c2;background:linear-gradient(125deg,#fff6f0,#fff,#f4f9ff);}
.order-hero h2{margin:0;font-size:1.4rem;font-weight:800;}
.order-hero p{color:var(--text-muted);margin-top:.35rem;}
.order-hero-stats{display:flex;gap:.55rem;}
.order-hero-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:.65rem .85rem;min-width:120px;text-align:right;}
.order-hero-stat small{display:block;color:var(--text-muted);font-size:.76rem;}
.order-hero-stat strong{display:block;margin-top:.2rem;font-size:1rem;}
.order-list-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:1rem;box-shadow:var(--shadow-md);}
.order-list{display:grid;gap:.9rem;}
.order-card{position:relative;border:1px solid var(--border);border-radius:var(--r-lg);padding:1rem;background:var(--surface);transition:box-shadow .2s;}
.order-card:hover{box-shadow:var(--shadow-md);}
.order-card-anchor{position:absolute;inset:0;z-index:1;border-radius:var(--r-lg);}
.order-card-head{display:flex;justify-content:space-between;align-items:center;gap:.55rem;margin-bottom:.8rem;}
.order-no{font-size:.92rem;font-weight:700;}
.order-date{font-size:.8rem;color:var(--text-muted);margin-top:.12rem;}
.order-status-badge{display:inline-flex;align-items:center;gap:.28rem;padding:.28rem .65rem;border-radius:var(--r-pill);font-size:.76rem;font-weight:700;}
.order-status-badge.received,.order-status-badge.preparing,.order-status-badge.packed{background:#fff3e7;color:#9f4300;}
.order-status-badge.shipped,.order-status-badge.out{background:#e9f3ff;color:#12519f;}
.order-status-badge.delivered{background:#e7f8ec;color:#1f6a2b;}
.order-card-body{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;}
.order-main h5{margin:0;font-size:.97rem;font-weight:700;}
.order-sub{display:flex;gap:.65rem;margin-top:.35rem;color:var(--text-muted);font-size:.82rem;}
.order-progress-track{height:7px;border-radius:var(--r-pill);background:#f0f0f5;margin-top:.7rem;overflow:hidden;}
.order-progress-fill{height:100%;background:linear-gradient(135deg,#ff6a00,#ff8a35);}
.order-progress-label{margin-top:.3rem;font-size:.76rem;color:var(--text-muted);}
.order-price-box{position:relative;z-index:2;min-width:170px;border:1px solid var(--border);border-radius:var(--r-md);padding:.65rem;background:var(--bg);text-align:right;}
.order-price-box small{display:block;color:var(--text-muted);font-size:.76rem;}
.order-price-box strong{display:block;margin-top:.18rem;font-size:1.05rem;}
.order-items-preview{margin-top:.85rem;display:flex;gap:.45rem;flex-wrap:wrap;}
.order-item-chip{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--surface);padding:.22rem .5rem .22rem .22rem;max-width:220px;}
.order-item-chip img{width:26px;height:26px;border-radius:50%;object-fit:cover;}
.order-item-chip span{font-size:.78rem;color:#444;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.order-item-more{display:inline-flex;align-items:center;font-size:.76rem;color:var(--text-muted);background:var(--bg);border-radius:var(--r-pill);padding:.22rem .55rem;}
.order-empty{border:1px dashed var(--border);border-radius:var(--r-lg);background:var(--bg);padding:1.2rem;}
.order-detail-hero{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);padding:1rem 1.1rem;display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;}
.order-timeline{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.45rem;}
.order-step{display:flex;flex-direction:column;gap:.3rem;align-items:center;text-align:center;}
.order-step-dot{width:13px;height:13px;border-radius:50%;border:2px solid var(--border);background:var(--surface);}
.order-step.is-complete .order-step-dot{border-color:#22c55e;background:#22c55e;}
.order-step.is-current .order-step-dot{border-color:var(--primary);background:#fff2e8;}
.order-step-label{font-size:.72rem;color:var(--text-muted);line-height:1.2;}
.order-step.is-current .order-step-label,.order-step.is-complete .order-step-label{color:var(--text);font-weight:700;}
.order-note{background:#fff6ef;border:1px solid #ffe0c9;border-radius:var(--r-md);padding:.7rem .85rem;color:#7a3b0b;font-size:.88rem;}
.order-detail-items{display:grid;gap:.65rem;}
.order-detail-item{border:1px solid var(--border);border-radius:var(--r-md);padding:.7rem;display:grid;grid-template-columns:60px 1fr auto auto;gap:.7rem;align-items:center;}
.order-detail-item img{width:60px;height:60px;border-radius:var(--r-sm);object-fit:cover;border:1px solid var(--border);}
.order-detail-item-main h6{margin:0;font-weight:700;font-size:.9rem;}
.order-detail-meta{margin-top:.28rem;display:flex;flex-wrap:wrap;gap:.45rem;color:var(--text-muted);font-size:.78rem;}
.order-detail-qty,.order-detail-price{text-align:right;}
.order-detail-qty small,.order-detail-price small{color:var(--text-muted);font-size:.73rem;}
.order-detail-qty strong,.order-detail-price strong{display:block;margin-top:.16rem;}

/* ──────────────────────────────────────────────────────────────
   31. PROFILE PAGE
   ────────────────────────────────────────────────────────────── */
.profile-section{display:none;}
.profile-section.active{display:block;}
.profile-nav-btn{
  color:var(--text)!important;
  border:1px solid var(--border)!important;
  background:transparent!important;
  width:100%; justify-content:flex-start; padding:.65rem 1rem;
  border-radius:var(--r-md)!important;
  font-size:.9rem;
}
.profile-nav-btn:hover{background:var(--bg)!important;}
.profile-nav-btn.active{background:var(--primary-grad)!important;color:#fff!important;border-color:transparent!important;}

/* ──────────────────────────────────────────────────────────────
   32. ADMIN PRODUCT MANAGEMENT
   ────────────────────────────────────────────────────────────── */
.admin-product-toolbar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.9rem;}
.admin-product-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;}
.admin-product-form-grid .full{grid-column:1 / -1;}
.admin-product-modal-overlay{position:fixed;inset:0;background:rgba(8,15,24,.64);z-index:1200;display:flex;align-items:center;justify-content:center;padding:1rem;}
.admin-product-modal{width:min(980px,100%);max-height:90vh;overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);}
.admin-product-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;padding:1rem 1.1rem;border-bottom:1px solid var(--border);}
.admin-product-modal-body{padding:1rem 1.1rem;}
.admin-product-media-preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.6rem;}
.admin-product-media-item{padding:.45rem;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg);}
.admin-product-media-item img{width:100%;height:90px;object-fit:cover;border-radius:var(--r-sm);}
@media (max-width:768px){
  .admin-product-form-grid{grid-template-columns:1fr;}
  .admin-product-modal{max-height:100vh;border-radius:0;}
}

/* ──────────────────────────────────────────────────────────────
   32. LEADERBOARD
   ────────────────────────────────────────────────────────────── */
.leaderboard-wrap{display:grid;gap:1.25rem;}
.leaderboard-hero{border-radius:var(--r-xl);padding:1.35rem;border:1px solid #f0e5da;background:radial-gradient(circle at 12% 18%,rgba(255,184,140,.28),transparent 46%),radial-gradient(circle at 84% 20%,rgba(255,123,90,.16),transparent 40%),linear-gradient(125deg,#fff8f2,#fff3e8 58%,#fff9f6);}
.leaderboard-title{margin:0;color:#2f241b;font-weight:800;letter-spacing:-.02em;font-size:clamp(1.35rem,2.3vw,1.9rem);}
.leaderboard-subtitle{margin-top:.4rem;color:#7a6050;font-size:.93rem;}
.leaderboard-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-top:.9rem;}
.leaderboard-stat{border:1px solid #f0dfd0;background:#fff;border-radius:var(--r-md);padding:.85rem;}
.leaderboard-stat .label{color:#8a7260;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700;}
.leaderboard-stat .value{color:#2e2319;font-weight:800;margin-top:.25rem;font-size:1.05rem;}
.leaderboard-board{background:#fff;border:1px solid #ece3dc;border-radius:var(--r-xl);box-shadow:0 10px 28px rgba(24,17,11,.06);overflow:hidden;}
.leaderboard-board-head{display:grid;grid-template-columns:90px minmax(0,1fr) 130px 120px;gap:.45rem;padding:.85rem 1rem;font-size:.75rem;font-weight:700;color:#826a58;text-transform:uppercase;letter-spacing:.04em;background:linear-gradient(180deg,#fffaf5,#fff);border-bottom:1px solid #f1e8df;}
.leaderboard-row{display:grid;grid-template-columns:90px minmax(0,1fr) 130px 120px;gap:.45rem;align-items:center;padding:.8rem 1rem;border-bottom:1px solid #f5eee8;}
.leaderboard-row:last-child{border-bottom:0;}
.leaderboard-rank{width:40px;height:40px;border-radius:var(--r-sm);display:inline-flex;align-items:center;justify-content:center;font-weight:800;color:#5f4432;background:#fff3e8;border:1px solid #f2dfcf;font-size:.88rem;}
.leaderboard-rank.top-1{background:linear-gradient(140deg,#ffe59b,#ffd36b);color:#6a4300;border-color:#f6c95b;}
.leaderboard-rank.top-2{background:linear-gradient(140deg,#f3f5f8,#dce4ef);color:#394c63;border-color:#cfdae7;}
.leaderboard-rank.top-3{background:linear-gradient(140deg,#ffd8bf,#ffc08f);color:#6d3f1b;border-color:#ffb581;}
.leaderboard-user{min-width:0;}
.leaderboard-name{margin:0;color:#2b2119;font-size:.95rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.leaderboard-meta{margin-top:.16rem;color:#8a7362;font-size:.78rem;}
.leaderboard-xp{font-weight:800;color:#2f2318;text-align:right;}
.leaderboard-badge{display:inline-flex;justify-content:center;min-width:90px;padding:.32rem .5rem;border-radius:var(--r-pill);font-size:.7rem;font-weight:700;color:#744213;background:#ffe8cc;border:1px solid #ffd5a6;text-transform:uppercase;letter-spacing:.04em;}
.leaderboard-empty{padding:1.2rem;color:#7f6755;text-align:center;}

/* ──────────────────────────────────────────────────────────────
   33. MISCELLANEOUS PAGE COMPONENTS
   ────────────────────────────────────────────────────────────── */
.corporate-page{padding:.5rem 0 2rem;}
.page-list{display:grid;gap:.6rem;padding-left:1.1rem;color:#555;}
.list-group{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;}
.list-group-item{padding:.65rem .9rem;border-bottom:1px solid var(--border);font-size:.9rem;}
.list-group-item:last-child{border-bottom:none;}
.list-group-flush .list-group-item{border-left:0;border-right:0;border-radius:0;}
.list-group-item.d-flex{display:flex;}

/* Details/summary for edit inline */
details summary{cursor:pointer;}
details summary.btn-outline{display:inline-flex;list-style:none;}
details summary::-webkit-details-marker{display:none;}

/* Media sort */
.media-sort-list [draggable="true"]{user-select:none;cursor:grab;}

/* Display helpers */
.display-6{font-size:2rem;font-weight:700;}

/* Col overrides — mobile first (tüm col'lar mobilde tam genişlik) */
.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,
.col-md-3,.col-md-4,.col-md-6,.col-sm-6,.col-xl-3 { width:100%; }

/* ──────────────────────────────────────────────────────────────
   34. RESPONSIVE — TABLET (768px+)
   ────────────────────────────────────────────────────────────── */
@media (min-width:768px) {
  .col-md-3 { width:25%; }
  .col-md-4 { width:33.333%; }
  .col-md-6 { width:50%; }
  .col-sm-6 { width:50%; }
  .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .category-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .notification-item { grid-template-columns:42px 1fr auto; }
  .admin-order-body { grid-template-columns:1fr 200px; }
}

/* ──────────────────────────────────────────────────────────────
   35. RESPONSIVE — DESKTOP (992px+)
   ────────────────────────────────────────────────────────────── */
@media (min-width:992px) {
  :root { --header-h:64px; --bottom-nav-h:0px; }

  /* Grid columns */
  .col-lg-3 { width:25%; }
  .col-lg-4 { width:33.333%; }
  .col-lg-5 { width:41.666%; }
  .col-lg-6 { width:50%; }
  .col-lg-7 { width:58.333%; }
  .col-lg-8 { width:66.666%; }
  .col-lg-9 { width:75%; }
  .col-xl-3 { width:25%; }

  /* Topbar */
  .topbar { display:block; }

  /* Header */
  .main-header .container { padding-block:.8rem; gap:.75rem; }
  .brand {
    flex:0 0 auto;
    min-width:280px;
    margin-right:0;
  }
  .brand-copy { display:flex; }
  .brand-logo { height:84px; width:auto; }
  .search-form {
    display:flex;
    flex:1 1 0;
    max-width:760px;
    min-width:0;
    margin-inline:auto;
  }
  .header-actions { margin-left:auto; }
  .mobile-menu-toggle  { display:none !important; }
  .mobile-search-toggle{ display:none !important; }
  .mobile-bottom-nav   { display:none !important; }

  /* Show all header action links on desktop */
  .header-actions a { display:inline-flex !important; }

  /* Products / categories grids */
  .product-grid  { grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
  .category-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }

  /* Footer */
  .site-footer { margin-top:2rem; padding-bottom:2rem; }
  .site-footer .row > [class*="col-"] { padding-inline:8px; }
  .footer-section { border:none; background:transparent; border-radius:0; overflow:visible; }
  .footer-section > summary { pointer-events:none; cursor:default; margin-bottom:.8rem; min-height:auto; padding:0; }
  .footer-section > summary::after { display:none !important; }
  .footer-section[open] > summary { border-bottom:none; }
  .footer-section > :not(summary) { padding:0; }

  /* Main content — no bottom nav padding */
  .main-content { padding-bottom:2rem; }
  body { background-color:var(--bg); background-image:none; }

  /* Category nav — wrapping allowed */
  /* Cat nav desktop — wrap */
  .cat-nav-list { flex-wrap:wrap; overflow-x:visible; }

  /* Cart summary sticky */
  .cart-summary-sheet { position:sticky; top:calc(var(--header-h) + 1rem); bottom:auto; }

  /* Specific page grids */
  #cartPageGrid    { grid-template-columns:1fr 300px; }
  #checkoutGrid    { grid-template-columns:1fr 340px; }
  #profilGrid      { grid-template-columns:220px 1fr; }
  /* #shopLayout ve #filterPanel ayrı blokta tanımlı — duplicate kaldırıldı */

  /* Notification */
  .notification-hero { flex-direction:row; }
  .notification-item { grid-template-columns:42px 1fr auto; }

  /* Orders */
  .admin-orders-stats { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .admin-order-body   { grid-template-columns:1fr 200px; }
  .order-hero         { flex-direction:row; }
  .order-hero-stats   { flex-wrap:nowrap; }
  .order-card-body    { flex-direction:row; }
  .order-price-box    { min-width:180px; text-align:right; }
  .order-timeline     { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .order-detail-item  { grid-template-columns:60px 1fr auto auto; }
  .order-detail-qty, .order-detail-price { text-align:right; border-top:none; padding-top:0; }

  /* Leaderboard */
  .leaderboard-board-head { display:grid; }
  .leaderboard-row { grid-template-columns:90px minmax(0,1fr) 130px 120px; }
  .leaderboard-xp,.leaderboard-badge { grid-column:auto; text-align:right; }
}

/* ──────────────────────────────────────────────────────────────
   36. MOBILE — max 991px (Android WebView primary target)
   ────────────────────────────────────────────────────────────── */
@media (max-width:991px) {
  :root { --header-h:52px; }

  /* Hide desktop-only elements */
  .topbar { display:none; }
  .brand-copy { display:none; }
  .search-form { display:none !important; }
  body.mobile-search-open .search-form { display:none !important; }

  /* Mobile header: logo tam ortada, başka hiçbir şey yok */
  .main-header .container {
    display:flex !important;
    align-items:center;
    justify-content:center;
    padding-block:.55rem;
    position:relative;
  }

  /* Logo ortada */
  .brand {
    position:absolute !important;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    z-index:1;
    min-width:auto;
  }
  .brand-logo { height:54px; }

  /* Hamburger gizle */
  .mobile-menu-toggle { display:none !important; }

  /* Arama toggle gizle */
  .mobile-search-toggle { display:none !important; }

  /* Search form gizle */
  .search-form { display:none !important; }
  body.mobile-search-open .search-form { display:none !important; }

  /* Header actions tamamen gizle — sepet dahil */
  .header-actions { display:none !important; }

  /* Category nav horizontal scroll */
  .cat-nav { padding:.45rem 0; }
  .cat-nav-list { flex-wrap:nowrap; overflow-x:auto; padding-bottom:.25rem; }
  .category-pill { min-height:38px; padding:.4rem .75rem; font-size:.85rem; }

  /* Main content bottom padding for bottom nav */
  .main-content { padding-bottom:calc(var(--bottom-nav-h) + var(--safe-bottom) + 1rem); }
  .site-footer { padding-bottom:calc(var(--bottom-nav-h) + var(--safe-bottom) + 1.5rem); margin-top:1rem; padding-top:1.25rem; }

  /* Show bottom nav */
  .mobile-bottom-nav { display:flex; }

  /* Collapsible footer on mobile */
  .footer-section { border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg); overflow:hidden; }
  .footer-section > summary {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:0; min-height:46px; padding:.55rem .85rem;
    cursor:pointer; pointer-events:auto; font-size:.92rem;
  }
  .footer-section > summary::after { content:'+'; color:var(--text-muted); font-size:.95rem; font-weight:700; }
  .footer-section[open] > summary::after { content:'\2212'; }
  .footer-section[open] > summary { border-bottom:1px solid var(--border); }
  .footer-section > :not(summary) { padding:.6rem .85rem .75rem; }
  .site-footer .row { gap:.4rem 0; }
  .site-footer .row > [class*="col-"] { padding:0; }

  /* Newsletter */
  .newsletter-form { display:grid; grid-template-columns:1fr auto; gap:.45rem; }
  .newsletter-form input { min-width:0; }

  /* Product grid — 2 cols on mobile */
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
  .product-image { height:160px; }

  /* Category grid */
  .category-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; }

  /* Order hero */
  .order-hero { flex-direction:column; }
  .order-hero-stats { width:100%; flex-wrap:wrap; }
  .order-hero-stat { flex:1; min-width:100px; text-align:left; }
  .order-card-body { flex-direction:column; }
  .order-price-box { width:100%; text-align:left; }
  .order-timeline { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .order-detail-item { grid-template-columns:52px 1fr; }
  .order-detail-qty,.order-detail-price { text-align:left; border-top:1px dashed var(--border); padding-top:.45rem; }

  /* Notification */
  .notification-hero { flex-direction:column; }
  .notification-stats { width:100%; }
  .notification-stat-item { flex:1; text-align:left; }
  .notification-toolbar { flex-direction:column; align-items:stretch; }
  .notification-item { grid-template-columns:38px 1fr; }
  .notification-actions { grid-column:1/-1; justify-self:flex-end; }

  /* Admin orders */
  .admin-orders-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-order-body { grid-template-columns:1fr; }
  .admin-order-item-row { grid-template-columns:46px 1fr; }
  .admin-order-item-metrics { justify-items:start; grid-column:1/-1; border-top:1px dashed var(--border); padding-top:.4rem; margin-top:.2rem; }

  /* Leaderboard */
  .leaderboard-stats { grid-template-columns:1fr; }
  .leaderboard-board-head { display:none; }
  .leaderboard-row { grid-template-columns:54px minmax(0,1fr); row-gap:.3rem; }
  .leaderboard-xp,.leaderboard-badge { grid-column:2; text-align:left; }

  /* Cart summary */
  .cart-summary-sheet { position:relative; bottom:auto; }

  /* Page hero */
  .page-hero { padding:1.25rem; }
  .hero-card { padding:1.1rem; }
  .hero-title { font-size:1.45rem; }

  /* Topbar in body */
  .topbar-inner { flex-direction:column; align-items:flex-start; gap:.3rem; }
  .topbar-text { white-space:normal; }
  .topbar-benefits { width:100%; justify-content:flex-start; }
}

/* ──────────────────────────────────────────────────────────────
   37. SMALL MOBILE — max 480px
   ────────────────────────────────────────────────────────────── */
@media (max-width:480px) {
  .container { padding-inline:12px; }
  .page-card,.section-card,.promo-banner { padding:.85rem; }
  .card { padding:1rem; }
  .product-image { height:145px; }
  .product-body { padding:.6rem; }
  .product-actions { gap:.3rem; padding:.5rem .6rem .6rem; }
  .product-actions .add-cart { font-size:.8rem; }
  .product-actions .wishlist { min-width:38px; flex:0 0 38px; }
  .section-title { font-size:1rem; }
  .hero-title { font-size:1.3rem; }
  .toast-stack { left:8px; right:8px; }
  .checkout-stepper span { font-size:.72rem; padding:.35rem .4rem; }
  .admin-nav-link { padding:.42rem .72rem; font-size:.82rem; }

  /* 1 col product grid on very small screens */
  .product-grid.one-col { grid-template-columns:1fr; }
}

/* ──────────────────────────────────────────────────────────────
   38. ANDROID WEBVIEW SPECIFIC FIXES
   ────────────────────────────────────────────────────────────── */

/* Fix 100vh on Android Chrome */
.full-screen { height:100dvh; height:calc(var(--vh,1vh) * 100); }

/* Prevent layout shift when keyboard opens */
body.keyboard-open .mobile-bottom-nav { display:none; }
body.keyboard-open .main-content { padding-bottom:.5rem; }

/* Prevent text selection on UI elements */
.mobile-bottom-nav,.main-header,.cat-nav,.mobile-drawer-panel { user-select:none; }

/* Smooth scrolling containers */
.cat-nav-list,.mobile-drawer-panel { -webkit-overflow-scrolling:touch; }

/* Fix iOS/Android input zoom */
@media (max-width:991px) {
  input[type=text],input[type=email],input[type=password],
  input[type=number],input[type=tel],input[type=search],
  textarea,select { font-size:16px!important; }
}

/* Pull to refresh indicator space */
body { overscroll-behavior-y:contain; }

/* ── QTY CONTROL ── */
.qty-control { display:inline-flex; align-items:center; gap:0; border:1.5px solid var(--border); border-radius:var(--r-pill); overflow:hidden; background:var(--surface); }
.qty-btn {
  width:36px; height:36px; min-width:36px; min-height:36px;
  border:none; background:var(--bg); color:var(--text);
  font-size:1.15rem; cursor:pointer; line-height:1;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; transition:background .12s;
  flex-shrink:0;
}
.qty-btn:active { background:#d8d8e8; }
.qty-val {
  min-width:36px; text-align:center;
  font-weight:700; font-size:.92rem;
  padding:.4rem 0; line-height:1;
  border:none; background:transparent;
  -moz-appearance:textfield;
  appearance:textfield;
  /* Override global input styles */
  min-height:unset !important;
  height:36px;
  width:36px;
  border-radius:0 !important;
  box-shadow:none !important;
}
.qty-val::-webkit-outer-spin-button,
.qty-val::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

/* ── BADGE (header/bottom nav sayı) — TEK TANIMLI BLOK ── */
.icon-link { position:relative; }
.icon-link > span {
  position:absolute;
  top:-6px; right:-6px;
  min-width:18px; height:18px;
  padding:0 4px;
  border-radius:999px;
  background:var(--primary);
  color:#fff;
  font-size:.62rem;
  font-weight:800;
  line-height:18px;
  text-align:center;
  display:inline-block;
  white-space:nowrap;
  border:2px solid var(--surface);
  z-index:3;
  overflow:hidden;
  box-sizing:content-box;
}
[data-cart-badge],[data-cart-nav-badge] {
  display:inline-block;
  min-width:18px; height:18px;
  padding:0 4px;
  border-radius:999px;
  background:var(--primary);
  color:#fff;
  font-size:.62rem;
  font-weight:800;
  line-height:18px;
  text-align:center;
  white-space:nowrap;
}

.cart-item-row { border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); }
.cart-item-inner { display:flex; gap:.75rem; padding:.85rem; align-items:flex-start; }
.qty-control { display:inline-flex; align-items:center; gap:0; border:1px solid var(--border); border-radius:var(--r-pill); overflow:hidden; }
.qty-btn { width:36px; height:36px; border:none; background:var(--bg); color:var(--text); font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; font-weight:700; transition:background .12s; }
.qty-btn:active { background:#e0e0e8; }
.qty-val { min-width:32px; text-align:center; font-weight:700; font-size:.9rem; padding:.4rem 0; }
.cart-remove-btn { background:none; border:none; color:var(--text-muted); cursor:pointer; padding:.4rem; border-radius:var(--r-sm); flex-shrink:0; min-width:36px; min-height:36px; display:flex; align-items:center; justify-content:center; margin-left:auto; transition:color .15s,background .15s; }
.cart-remove-btn:hover { color:var(--danger); background:var(--danger-bg); }

/* ──────────────────────────────────────────────────────────────
   39. CART ITEMS (JS rendered)
   ────────────────────────────────────────────────────────────── */
   ────────────────────────────────────────────────────────────── */
.review-card { border:1px solid var(--border); border-radius:var(--r-lg); padding:1rem; background:var(--surface); margin-bottom:.65rem; }
.review-head { display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin-bottom:.25rem; }
.review-stars { color:#f59e0b; font-size:.88rem; letter-spacing:.05em; }
.review-date { font-size:.78rem; color:var(--text-muted); margin-bottom:.5rem; }
.review-body { font-size:.88rem; color:var(--text-2); line-height:1.5; }

/* ──────────────────────────────────────────────────────────────
   41. AUTH PAGES (login / register)
   ────────────────────────────────────────────────────────────── */
.auth-wrap {
  min-height: calc(100dvh - var(--header-h) - var(--bottom-nav-h) - 4rem);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem 0;
}
.auth-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-2xl); padding: 2rem 1.75rem;
  width: 100%; max-width: 440px;
  box-shadow: var(--shadow-lg);
}
.auth-card h2 { font-size: 1.5rem; margin-bottom: .35rem; }
.auth-card p  { color: var(--text-muted); margin-bottom: 1.5rem; font-size: .93rem; }
.auth-footer  { text-align: center; margin-top: 1.25rem; font-size: .9rem; color: var(--text-muted); }
.auth-footer a { color: var(--primary); font-weight: 700; }

/* ──────────────────────────────────────────────────────────────
   42. CHECKOUT ADDRESS PAGE
   ────────────────────────────────────────────────────────────── */
.address-option {
  display: flex; align-items: flex-start; gap: .65rem;
  border: 1.5px solid var(--border); border-radius: var(--r-lg);
  padding: .9rem 1rem; cursor: pointer;
  transition: border-color .18s, background .18s;
}
.address-option:has(input:checked) { border-color: var(--primary); background: linear-gradient(135deg,#fff9f7,#fff); }
.address-option input[type=radio] { margin-top: .2rem; width:20px; height:20px; }

/* ──────────────────────────────────────────────────────────────
   43. PAGE MISC FIXES
   ────────────────────────────────────────────────────────────── */
.page-card > hr { margin-inline: -1.25rem; }
.ms-auto { margin-left: auto; }
.me-auto { margin-right: auto; }
.opacity-50 { opacity: .5; }
.text-warning { color: var(--warning) !important; }
.text-success { color: var(--success) !important; }
.text-danger  { color: var(--danger)  !important; }
.bg-opacity-10 { opacity:.1; }
.col-auto { flex:0 0 auto; width:auto; }

/* Bootstrap btn overrides to avoid conflicts */
.btn { min-height:48px; border-radius:var(--r-pill); font-weight:700; }
.btn-outline-warning { border:1.5px solid var(--warning); color:var(--warning); background:transparent; }
.btn-check { position:absolute; clip:rect(0,0,0,0); pointer-events:none; }
.btn-group { display:flex; flex-wrap:wrap; gap:.4rem; }

/* ──────────────────────────────────────────────────────────────
   44. DESKTOP GRID (992px+) — override for 2-col layouts
   ────────────────────────────────────────────────────────────── */
@media (min-width:992px) {
  /* index.php hero 2 kolon */
  .hero-card .hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }

  /* admin dashboard 2-col stat grid */
  .admin-stat-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }

  /* Tüm 2-col layout'lar için yardımcı */
  .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
  .grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
  .grid-4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; }

  /* Sipariş detay — 8/4 split */
  .order-detail-layout { display:grid; grid-template-columns:1fr 320px; gap:1rem; align-items:start; }

  /* Profil — sidebar + content */
  .profile-layout { display:grid; grid-template-columns:240px 1fr; gap:1rem; align-items:start; }

  /* Checkout — 7/5 split */
  .checkout-layout { display:grid; grid-template-columns:1fr 340px; gap:1rem; align-items:start; }

  /* Cart — 8/4 split */
  .cart-layout { display:grid; grid-template-columns:1fr 300px; gap:1rem; align-items:start; }

  /* Magaza filter + products */
  .shop-layout { display:grid; grid-template-columns:240px 1fr; gap:1rem; align-items:start; }

  /* Admin forms 2-col */
  .admin-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:start; }
}

/* ──────────────────────────────────────────────────────────────
   45. DESKTOP — larger hero on index
   ────────────────────────────────────────────────────────────── */
@media (min-width:992px) {
  .hero-card { padding:2rem; }
  .site-footer { padding-top:2.5rem; }
  .footer-section > summary { pointer-events:none; }
  .footer-section > summary::after { display:none !important; }
  .footer-section[open] > summary { border-bottom:none; }
  .footer-section > :not(summary) { padding:0; }
}

/* ──────────────────────────────────────────────────────────────
   46. DESKTOP index.php hero — hero-inner-grid ile ayrı tanımlı
   ────────────────────────────────────────────────────────────── */
/* hero-inner-grid CSS ayrı blokta tanımlı — duplicate kaldırıldı */

/* ──────────────────────────────────────────────────────────────
   47. CHECKOUT / ORDER DETAIL / PROFIL desktop split
   ────────────────────────────────────────────────────────────── */
@media (min-width:992px) {
  /* checkout */
  #checkoutGrid { display:grid; grid-template-columns:1fr 340px; gap:1rem; align-items:start; }
  /* order detail */
  /* order detail — ayrı blokta tanımlı */
  /* profil */
  #profilGrid { display:grid; grid-template-columns:230px 1fr; gap:1rem; align-items:start; }
  /* magaza — ayrı blokta tanımlı */
}

/* ──────────────────────────────────────────────────────────────
   48. PROMO BANNER — kontrast düzeltme
   ────────────────────────────────────────────────────────────── */
.promo-banner h4,.promo-banner h5 { color:var(--text); }
.promo-banner p { color:var(--text-muted); }

/* ──────────────────────────────────────────────────────────────
   49. CHECKOUT CARD PREVIEW
   ────────────────────────────────────────────────────────────── */
#cardPreviewNum { font-family:monospace,sans-serif; letter-spacing:.18em; }

/* ──────────────────────────────────────────────────────────────
   50. DETAILS SUMMARY open/close indicator
   ────────────────────────────────────────────────────────────── */
details[open] > summary > span:last-child { transform:rotate(180deg); display:inline-block; }
details summary > span:last-child { transition:transform .2s; display:inline-block; }

/* ──────────────────────────────────────────────────────────────
   51. INPUT FILE OVERRIDE
   ────────────────────────────────────────────────────────────── */
input[type=file] { padding:.45rem .75rem; cursor:pointer; min-height:44px; }

/* ──────────────────────────────────────────────────────────────
   52. BTN-BLOCK helper
   ────────────────────────────────────────────────────────────── */
.btn-block { width:100%; display:flex; }

/* ──────────────────────────────────────────────────────────────
   53. BACK-COMPAT — old promo-banner used as cart item was
       "promo-banner d-flex justify-content-between" — now replaced
       by cart-item-row but keep class safe
   ────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────
   54. LEADERBOARD mobile responsive (already in main block,
       ensure grid-template is reset on mobile)
   ────────────────────────────────────────────────────────────── */
@media (max-width:991px) {
  .leaderboard-stats { grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem; }
  .leaderboard-stat { padding:.6rem .7rem; }
  .leaderboard-stat .value { font-size:.95rem; }
}
@media (max-width:480px) {
  .leaderboard-stats { grid-template-columns:1fr; }
}

/* ──────────────────────────────────────────────────────────────
   55. ORDER detail page grid (desktop)
   ────────────────────────────────────────────────────────────── */
/* Order Detail Grid */
#orderDetailGrid {
  display:grid;
  gap:1rem;
  grid-template-columns:1fr; /* mobil: tek kolon */
}
@media (min-width:992px) {
  #orderDetailGrid { grid-template-columns:1fr 300px; align-items:start; }
}

/* Order timeline — mobilde 2 satır */
@media (max-width:767px) {
  .order-timeline { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* ──────────────────────────────────────────────────────────────
   PROFIL LAYOUT
   ────────────────────────────────────────────────────────────── */
#profilGrid { grid-template-columns:1fr; }
.profil-sidebar .profile-nav-btn { text-align:left; }
.profil-content .profile-section { display:none; }
.profil-content .profile-section.active { display:block; }

@media (min-width:992px) {
  #profilGrid { grid-template-columns:230px 1fr; }
  /* Desktop'ta tab bar değil sol sidebar */
  #profilNav { flex-direction:column; }
}

/* ── ÜRÜN DETAY RESİM ── */
#mainProductImg {
  width:100%;
  height:auto;
  max-height:480px;
  object-fit:contain;
  background:#f8f8fa;
  display:block;
}
@media (max-width:991px) {
  #mainProductImg { max-height:320px; }
}
/* ── PRODUCT CARD OVERLAY LINK ── */
.product-card-link {
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:inherit;
}
.product-card .product-image-wrap,
.product-card .product-body,
.product-card .product-actions { position:relative; z-index:2; }

/* ── INDEX HERO ── */
.hero-inner-grid {
  display:grid;
  gap:1.25rem;
  grid-template-columns:1fr; /* mobil: tek kolon */
}
/* 768px+ → yan yana */
@media (min-width:768px) {
  .hero-inner-grid {
    grid-template-columns:1.2fr 1fr;
    align-items:center;
  }
}
/* ── MAĞAZA SIDEBAR ── */
#shopLayout {
  display:grid;
  gap:1rem;
}
#filterPanel {
  display:none; /* mobile: gizli, JS'e gerek yok */
}
@media (min-width:992px) {
  #shopLayout { grid-template-columns:220px 1fr; }
  #filterPanel { display:block !important; }
  #filterToggleBtn { display:none !important; }
}
@media (max-width:991px) {
  #shopLayout { grid-template-columns:1fr; }
  /* filterPanel JS ile toggle edilir */
}
/* ── ADMİN DASHBOARD STATS ── */
@media (min-width:992px) {
  .admin-dash-stats { grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* ================================================================
   UI POLISH — KATEGORİ NAV · FOOTER · BADGE · CART
   ================================================================ */

/* ── YENİ KATEGORİ NAV ─────────────────────────────────────── */
.cat-nav {
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:.55rem 0;
}
.cat-nav-list {
  display:flex;
  gap:.5rem;
  overflow-x:auto;
  scrollbar-width:none;
  padding-bottom:2px; /* scrollbar space */
  -webkit-overflow-scrolling:touch;
}
.cat-nav-list::-webkit-scrollbar { display:none; }

.cat-nav-pill {
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:.28rem;
  flex:0 0 auto;
  padding:.55rem .85rem;
  border-radius:var(--r-lg);
  background:var(--bg);
  border:1.5px solid var(--border);
  color:var(--text-2);
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:background .18s, border-color .18s, color .18s, transform .15s, box-shadow .18s;
  min-width:60px;
  text-align:center;
  text-decoration:none;
}
.cat-nav-pill:hover {
  background:var(--surface);
  border-color:var(--primary);
  color:var(--primary);
  box-shadow:0 2px 10px rgba(255,90,60,.14);
  transform:translateY(-1px);
}
.cat-nav-pill:active { transform:scale(.95); }
.cat-nav-pill.active {
  background:var(--primary-grad);
  color:#fff;
  border-color:transparent;
  box-shadow:0 4px 14px rgba(255,90,60,.28);
}
.cat-nav-icon { font-size:1.3rem; line-height:1; display:block; }
.cat-nav-label { font-size:.7rem; font-weight:700; white-space:nowrap; letter-spacing:.01em; }

/* Desktop: yatay + biraz daha geniş */
@media (min-width:768px) {
  .cat-nav-pill { min-width:72px; padding:.6rem 1rem; }
  .cat-nav-icon { font-size:1.45rem; }
  .cat-nav-label { font-size:.75rem; }
}
@media (min-width:992px) {
  .cat-nav-list { flex-wrap:wrap; overflow-x:visible; }
  .cat-nav-pill { min-width:76px; }
}

/* ── FOOTER YENİ TASARIM ───────────────────────────────────── */
.site-footer {
  background:var(--surface);
  border-top:1px solid var(--border);
  padding:1.5rem 0 1rem;
  margin-top:2rem;
}
.footer-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5rem 2rem;
  align-items:start;
}
.footer-grid-4 {
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.footer-col {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.footer-brand {
  display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem;
}
.footer-brand-name {
  font-weight:800; font-size:.95rem; color:var(--text);
}
.footer-desc {
  font-size:.82rem; color:var(--text-muted); line-height:1.55; margin-bottom:.7rem;
}
.footer-links-inline {
  display:flex; align-items:center; gap:1.25rem;
  font-size:.82rem;
}
.footer-links-inline a { color:var(--text-muted); transition:color .15s; }
.footer-links-inline a:hover { color:var(--primary); }
.footer-links-inline span { color:var(--border); }
.footer-links-highlight { justify-content:center; gap:2rem; }
.footer-links-highlight a { font-weight:700; color:var(--text); padding:0 .35rem; }
.footer-links-highlight a:hover { color:var(--primary); }

.footer-col-title {
  font-size:.88rem; font-weight:700; color:var(--text);
  margin-bottom:.65rem; display:block;
}
.footer-col-link {
  text-decoration:none;
  transition:color .15s;
}
.footer-col-link:hover { color:var(--primary); }
.footer-accordion summary {
  font-size:.88rem; font-weight:700; color:var(--text);
  list-style:none; cursor:default; pointer-events:none;
  margin-bottom:.65rem; display:block;
}
.footer-accordion summary::-webkit-details-marker { display:none; }

/* Desktop: accordion da tıklanabilir olur, mobildeki davranış bozulmaz */
@media (min-width:576px) {
  .footer-accordion summary {
    cursor:pointer;
    pointer-events:auto;
    margin-bottom:0;
  }
  .footer-accordion summary::after { display:none !important; }
}

.footer-link-list {
  display:grid; gap:.55rem; list-style:none; padding:0; margin:0;
  justify-items:center;
}
.footer-link-list a {
  font-size:.82rem; color:var(--text-muted); transition:color .15s;
  display:inline-flex; align-items:center; min-height:28px;
}
.footer-link-list a:hover { color:var(--primary); }

.footer-newsletter-col {
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:1rem;
  background:linear-gradient(135deg, rgba(255,90,60,.06), rgba(255,90,60,.02));
}
.footer-newsletter-copy {
  font-size:.78rem;
  line-height:1.55;
  color:var(--text-muted);
  margin:0 0 .7rem;
}
.footer-newsletter {
  display:grid; grid-template-columns:1fr auto; gap:.45rem;
}
.footer-newsletter input {
  min-height:40px; padding:.55rem .8rem;
  border:1.5px solid var(--border); border-radius:999px;
  font-size:.85rem; background:var(--surface); color:var(--text);
  width:100%;
}
.footer-newsletter input:focus {
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(255,90,60,.12);
}
.footer-newsletter button {
  min-height:40px; padding:.55rem .95rem;
  border:none; border-radius:999px;
  background:var(--primary-grad); color:#fff;
  font-weight:700; font-size:.83rem; cursor:pointer; white-space:nowrap;
  box-shadow:0 8px 20px rgba(255,90,60,.2);
}
.footer-bottom-bar {
  margin-top:1rem;
  padding-top:.9rem;
  border-top:1px solid var(--border);
  display:flex; justify-content:center; align-items:center;
}
.footer-copy {
  font-size:.75rem; color:var(--text-subtle); margin:0;
  text-align:center;
  line-height:1.6;
  max-width:720px;
}

/* Tablet: 2 kolon */
@media (max-width:991px) {
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 1.5rem; }
  .footer-grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-accordion summary { pointer-events:auto; cursor:pointer; margin-bottom:0; }
  .footer-accordion { border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; }
  .footer-accordion summary {
    display:flex; justify-content:space-between; align-items:center;
    padding:.6rem .85rem; background:var(--bg);
  }
  .footer-accordion summary::after { content:'+'; color:var(--text-muted); font-weight:700; font-size:1rem; }
  .footer-accordion[open] summary::after { content:'−'; }
  .footer-accordion[open] summary { border-bottom:1px solid var(--border); }
  .footer-accordion .footer-link-list { padding:.65rem .85rem .75rem; }
  .footer-links-row { flex-wrap:wrap; gap:.55rem .8rem; }
  .site-footer { padding-bottom:calc(1rem + var(--safe-bottom)); }
}

/* Mobil: 1 kolon, daha sıkışık */
@media (max-width:575px) {
  .footer-grid { grid-template-columns:1fr; gap:.65rem; }
  .footer-grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .site-footer { padding-top:1rem; margin-top:1rem; }
  .footer-brand { margin-bottom:.35rem; }
  .footer-newsletter { grid-template-columns:1fr; }
  .footer-newsletter button { width:100%; }
  .footer-links-row { flex-direction:column; align-items:flex-start; gap:.35rem; }
  .footer-bottom-bar { margin-top:.75rem; padding-top:.75rem; }
  .site-footer { padding-bottom:calc(var(--bottom-nav-h) + var(--safe-bottom) + .75rem); }
}

/* ── SEPET ADET CLS FIX (Layout Shift önleme) ────────────── */

/* Cart item row — sabit min-height ile CLS önle */
.cart-item-row {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  /* Sabit minimum yükseklik — adet değişse de row kaymasın */
  min-height:110px;
  contain:layout style;
}
.cart-item-inner {
  display:flex;
  gap:.85rem;
  padding:.9rem;
  align-items:flex-start;
  /* width sabit */
  width:100%;
  box-sizing:border-box;
}

/* Ürün resmi — src değişse de boyut sabit kalır */
.cart-item-img-wrap {
  width:76px; height:76px;
  flex:0 0 76px;
  border-radius:var(--r-md);
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--bg);
  /* will-change ile GPU'ya taşı — reflow yok */
  will-change:transform;
}
.cart-item-img-wrap img {
  width:100%; height:100%;
  object-fit:cover; display:block;
}

/* Adet ve fiyat bölümü — transform ile güncellenir, reflow yok */
.cart-qty-price {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:.6rem;
  flex-wrap:nowrap;
  gap:.5rem;
  /* min-height sabit → fiyat değişse bile kaymaz */
  min-height:40px;
}
.cart-item-price {
  font-weight:800;
  color:var(--primary);
  font-size:1rem;
  white-space:nowrap;
  /* Transition ile yumuşak değişim */
  transition:color .2s;
}
.cart-item-price.updating {
  opacity:.6;
}

/* ── DESKTOP SEPET 2-KOLON ─────────────────────────────────── */
#cartPageGrid {
  display:grid;
  gap:1.25rem;
  align-items:start;
}
@media (min-width:768px) {
  #cartPageGrid { grid-template-columns:1fr 300px; }
}
@media (min-width:992px) {
  #cartPageGrid { grid-template-columns:1fr 320px; }
  .cart-summary-sheet {
    position:sticky;
    top:calc(var(--header-h) + 1rem);
    bottom:auto;
  }
}

/* ================================================================
   3) BADGE — Tam görünür, yuvarlak, net
   ================================================================ */

/* Header icon-link badge — kesin override */
.icon-link {
  position:relative;
  overflow:visible !important; /* badge kesilmesin */
}
.icon-link > span:not([class]) ,
.icon-link > span[data-cart-badge] {
  /* Konumlandırma */
  position:absolute;
  top:-7px;
  right:-7px;
  z-index:10;

  /* Boyut — min-width ile çift haneli sayılar için */
  min-width:20px;
  height:20px;
  padding:0 5px;
  box-sizing:border-box;

  /* Görünüm */
  background:var(--primary);
  color:#fff;
  border-radius:999px;
  border:2px solid var(--surface);

  /* Metin */
  font-size:.62rem;
  font-weight:800;
  line-height:20px;
  text-align:center;
  white-space:nowrap;

  /* Display */
  display:inline-block !important;
}

/* ================================================================
   FLASH CAMPAIGN SLIDER
   ================================================================ */
.flash-slider-wrap {
  display:flex;
  flex-direction:column;
  gap:.65rem;
  width:100%;
}

/* Slider container — overflow hidden, tek slayt görünür */
.flash-slider {
  position:relative;
  overflow:hidden;
  border-radius:var(--r-xl);
  min-height:200px;
}

/* Her slayt */
.flash-slide {
  display:none;
  animation:slideIn .35s ease;
}
.flash-slide.is-active {
  display:block;
}
@keyframes slideIn {
  from { opacity:0; transform:translateX(18px); }
  to   { opacity:1; transform:translateX(0); }
}
.flash-slide .promo-banner {
  border-radius:var(--r-xl);
  margin:0;
}

/* Kontrol satırı */
.flash-slider-controls {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.75rem;
}

/* Önceki / Sonraki buton */
.flash-slider-btn {
  width:34px;
  height:34px;
  border-radius:50%;
  border:1.5px solid var(--border);
  background:var(--surface);
  color:var(--text);
  font-size:1.2rem;
  line-height:1;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .15s, border-color .15s;
  flex-shrink:0;
}
.flash-slider-btn:hover {
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}
.flash-slider-btn:active { transform:scale(.93); }

/* Dot'lar */
.flash-slider-dots {
  display:flex;
  gap:.4rem;
  align-items:center;
}
.flash-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--border);
  border:none;
  cursor:pointer;
  padding:0;
  transition:background .2s, width .2s;
}
.flash-dot.active {
  background:var(--primary);
  width:22px;
  border-radius:4px;
}

/* Mobil: slide'ı swipe ile kaydırılabilir yap */
@media (max-width:767px) {
  .flash-slider-wrap { gap:.5rem; }
  .flash-slider-btn { width:30px; height:30px; font-size:1rem; }
}