/* ==========================================================
   TEMA: CANLI
   Yüksek kontrast indigo #4338ca + gül kırmızısı #e11d48
   Outfit / Plus Jakarta Sans · geniş yuvarlatma · kalın gölge

   Karakter farkı: köşeler çok yuvarlak (26px kart, tam yuvarlak
   buton), butonlar iri (52px) ve kalın, kartlarda kenarlık yok
   yalnızca renkli gölge, ürün medyası 4/5, tipografi %6 büyük.
   ========================================================== */

:root {
  /* --- Tipografi --- */
  --font-heading: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-scale: 1.06;
  --heading-tracking: -0.02em;
  --heading-transform: none;

  /* --- Renk --- */
  --primary: #4338ca;
  --primary-strong: #1e1b4b;
  --primary-hover: #3730a3;
  --primary-focus: #6366f1;
  --primary-line: #ddd9fb;
  --primary-soft: #f4f3ff;
  --on-primary: #ffffff;

  --accent: #e11d48;
  --accent-strong: #9f1239;
  --accent-light: #fb7185;
  --accent-soft: #ffe4e9;
  --on-accent: #ffffff;

  --title: #1e1b4b;
  --text: #3f3d56;
  --muted: #6b6890;
  --border: #e6e4f5;
  --border-strong: #cdc9ee;
  /* Etkileşimli denetim kenarlığı (WCAG 1.4.11 ≥3:1) — indigo tonu korunur
     (#cdc9ee değerinin %68'i). card/page #ffffff → 3,54:1 · surface #f6f5ff → 3,28:1 */
  --control-border: #8985a0;
  --control-border-strong: #625f78;
  --surface: #f6f5ff;
  --page-bg: #ffffff;
  --card-bg: #ffffff;

  /* --- Biçim: yuvarlak ve iri --- */
  --radius-sm: 10px;
  --radius: 18px;
  --card-radius: 26px;
  --pill: 999px;
  --btn-radius: 999px;
  --btn-height: 52px;
  --btn-tracking: 0.01em;
  --btn-transform: none;

  --card-shadow: 0 10px 30px rgba(67, 56, 202, 0.09);
  --card-hover-shadow: 0 18px 44px rgba(67, 56, 202, 0.2);
  --shadow-sm: 0 2px 6px rgba(30, 27, 75, 0.1);
  --shadow: 0 12px 32px rgba(30, 27, 75, 0.12);
  --shadow-lg: 0 26px 60px rgba(30, 27, 75, 0.22);

  --container: 1280px;
  --section-space: 64px;
}

/* --- Butonlar: iri, kalın, belirgin gölge --- */
.btn {
  font-size: calc(16px * var(--font-scale));
  font-weight: 700;
  padding: 0 28px;
}
.btn:hover { transform: translateY(-2px); }
.btn--gold {
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 60%, #be123c 100%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(225, 29, 72, 0.34);
}
.btn--gold:hover { background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%); }
.btn--navy {
  background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
  box-shadow: 0 10px 24px rgba(67, 56, 202, 0.3);
}
.btn--outline { border-width: 2px; border-color: var(--primary); color: var(--primary); }
.btn--outline:hover { background: var(--primary-soft); }
.btn--lg { min-height: 60px; font-size: calc(17px * var(--font-scale)); }
.btn--sm { min-height: 42px; font-size: calc(14px * var(--font-scale)); }

/* --- Formlar: kalın kenar, yuvarlak --- */
.field input, .field select, .field textarea, .coupon input, .listbar select {
  border-width: 2px;
  min-height: 50px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.22);
}
.field label { font-size: 14px; }

/* --- Üst bar + header --- */
.topbar { background: linear-gradient(90deg, #1e1b4b 0%, #4338ca 100%); color: rgba(255, 255, 255, 0.92); }
.topbar a:hover { color: #fde68a; }
.hdr { border-bottom: 0; box-shadow: 0 4px 20px rgba(30, 27, 75, 0.07); }
.hdr__inner { min-height: 84px; }
.hdr__logo-mark {
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
  color: #fff;
  width: 46px;
  height: 46px;
  font-size: 20px;
}
.search { border-width: 2px; }
.search button { background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%); }
.hdr__action-count { box-shadow: 0 4px 10px rgba(225, 29, 72, 0.4); }

/* --- Kategori menüsü --- */
.catnav { background: linear-gradient(90deg, #4338ca 0%, #6366f1 100%); }
.catnav__link { font-weight: 600; }
.catnav__link:hover, .catnav__item:hover > .catnav__link { background: rgba(255, 255, 255, 0.18); }
.catnav__sub { border: 0; border-radius: 0 0 22px 22px; }

/* --- Hero: canlı degrade --- */
.hero {
  background:
    radial-gradient(circle at 80% 10%, rgba(225, 29, 72, 0.4) 0%, rgba(225, 29, 72, 0) 46%),
    radial-gradient(circle at 10% 90%, rgba(56, 189, 248, 0.28) 0%, rgba(56, 189, 248, 0) 42%),
    linear-gradient(140deg, #4338ca 0%, #1e1b4b 100%);
  color: rgba(255, 255, 255, 0.9);
}
.hero h1 { font-weight: 800; }
.hero__badge {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.34);
  color: #fff;
  font-weight: 700;
}
.hero__card { background: rgba(255, 255, 255, 0.11); border-radius: 22px; }
.hero__card-icon { background: rgba(255, 255, 255, 0.2); color: #fff; }

.trust { background: var(--primary-strong); }
.trust__item svg { color: #fb7185; }

/* --- Bölüm başlığı --- */
.section-head h2 { font-weight: 700; }
.eyebrow {
  /* --accent (#e11d48) üzeri --accent-soft yalnızca 3.92:1 idi (12px/600 metin
     için WCAG AA 4.5:1 gerekir); --accent-strong ile 6.69:1'e çıkarıldı. */
  color: var(--accent-strong);
  background: var(--accent-soft);
  padding: 5px 14px;
  border-radius: 999px;
  letter-spacing: 0.06em;
}

/* --- Ürün kartı: kenarlıksız, yumuşak gölge, dikey medya --- */
.pcard { border: 0; }
.pcard:hover { transform: translateY(-6px); }
.pcard__media { aspect-ratio: 4 / 5; background: var(--surface); }
.pcard__media img { transition: transform 320ms var(--ease); }
.pcard:hover .pcard__media img { transform: scale(1.05); }
.pcard__body { padding: 16px 18px 8px; }
.pcard__foot { padding: 0 18px 18px; }
.pcard__name { font-weight: 600; }
.pcard__price strong { font-weight: 800; color: var(--accent-strong); }
.pcard__fav { width: 42px; height: 42px; box-shadow: 0 6px 16px rgba(30, 27, 75, 0.18); }
.pcard__stars { color: #f59e0b; }
.pcard .btn { min-height: 48px; }

/* --- Kategori kartı: renkli zemin --- */
.catcard { border: 0; background: var(--surface); }
.catcard:hover { background: var(--primary-soft); transform: translateY(-4px); }
.catgrid { gap: 18px; }

/* --- Rozetler: iri ve kalın --- */
.badge { font-size: 12px; font-weight: 700; padding: 5px 12px; }
.badge--gold { background: var(--accent); color: #fff; }

/* --- Liste / sayfalama --- */
.filters { border: 0; box-shadow: var(--card-shadow); }
.filters__title { color: var(--primary); }
.pagination a, .pagination span { border-radius: 14px; border-width: 2px; }
.pagination .is-current { background: var(--primary); border-color: var(--primary); color: #fff; }
.empty { border: 0; background: var(--surface); }

/* --- Ürün detay --- */
.pinfo__price strong { color: var(--accent-strong); font-weight: 800; }
.optlist label { border-width: 2px; min-height: 48px; }
.optlist label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.qty { border-width: 2px; }
.tabs__btn { font-weight: 600; }
.tabs__btn.is-active { border-bottom-width: 4px; border-bottom-color: var(--accent); color: var(--primary); }

/* --- Sepet / ödeme --- */
.cartlist, .summary, .panel, .accnav, .datatable, .statcard { border: 0; box-shadow: var(--card-shadow); }
.radio-card { border-width: 2px; }
.radio-card:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.summary__row--total { font-weight: 800; color: var(--accent-strong); }
.accnav a.is-active { background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%); color: #fff; }
.datatable th { background: var(--primary-soft); color: var(--primary); }
.steps__item.is-active .steps__no { background: var(--accent); border-color: var(--accent); color: #fff; }

/* --- Footer --- */
.ftr { background: linear-gradient(160deg, #1e1b4b 0%, #312e81 100%); }
.ftr h4 { color: #fff; font-weight: 700; }
.ftr a:hover { color: #fb7185; }
.ftr__badges li { border-radius: 999px; border-color: rgba(255, 255, 255, 0.26); }