/* pages.css — sayfaya özel stiller. */

/* ============================ Sepet ============================ */
.cart-items { display: flex; flex-direction: column; gap: var(--space-3); }
/* Mobil (varsayılan): 2 satır — üstte görsel+bilgi+×, altta adet+tutar. Kompakt. */
.cart-item {
  display: grid; gap: var(--space-2) var(--space-3); align-items: center;
  grid-template-columns: 64px 1fr auto;
  grid-template-areas:
    "media info   remove"
    "media qty    total";
  padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
}
.cart-item__media { grid-area: media; align-self: start; }
.cart-item__media img { width: 64px; height: 64px; border-radius: var(--radius); object-fit: contain; background: var(--color-surface); }
.cart-item__info { grid-area: info; min-width: 0; }
.cart-item__qty { grid-area: qty; }
.cart-item__total { grid-area: total; justify-self: end; }
.cart-item__remove-form { grid-area: remove; justify-self: end; align-self: start; }

/* Tipografi hiyerarşisi: başlık (orta) > tutar (kalın, vurgulu) > varyant/birim (soluk) */
.cart-item__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--color-text); font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: var(--fs-400); line-height: 1.3;
}
.cart-item__title:hover { color: var(--color-primary); text-decoration: none; }
.cart-item__variant { font-size: var(--fs-300); color: var(--color-muted); margin: 0.15em 0 0; }
.cart-item__unit { font-size: var(--fs-300); color: var(--color-muted); margin: 0.1em 0 0; }
.cart-item__total { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-400); color: var(--color-text); white-space: nowrap; }
.cart-item__remove { color: var(--color-muted); font-size: 1.05rem; line-height: 1; padding: 0.25rem; }
.cart-item__remove:hover { color: var(--color-sale); }
/* Stepper içindeki input'a dokunma; yalnız stepper'sız input'lar (fallback) için. */
.cart-item__qty input:not(.qty-input) { width: 72px; min-height: var(--tap-min); padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius); text-align: center; }

/* Tablet+: tek satır tablo düzeni — görsel | bilgi | adet | tutar | × */
@media (min-width: 768px) {
  .cart-item {
    grid-template-columns: 80px 1fr auto auto auto;
    grid-template-areas: "media info qty total remove";
    gap: var(--space-4);
  }
  .cart-item__media { align-self: center; }
  .cart-item__remove-form { align-self: center; }
}
.cart-summary { margin-top: var(--space-4); padding: var(--space-4); background: var(--color-surface); border-radius: var(--radius-lg); }
.cart-summary__row { display: flex; justify-content: space-between; font-size: var(--fs-500); }
.cart-summary__row--total { border-top: 1px solid var(--color-border); margin-top: var(--space-2); padding-top: var(--space-2); font-size: var(--fs-600); }
.text-free { color: var(--color-primary); font-weight: var(--fw-semibold); }
/* Ödeme özeti — dengeli tipografi: kalem 13, ara satır 15, genel toplam 18px (varsayılan 18/22 kalemlere göre çok iriydi) */
.checkout__summary .cart-summary__row { font-size: var(--fs-400); }
.checkout__summary .cart-summary__row:not(.cart-summary__row--total) > span { color: var(--color-muted); }
.checkout__summary .cart-summary__row--total { font-size: var(--fs-500); }

/* Ödeme — ayrı fatura adresi bölümü */
.checkout__billing { border-top: 1px dashed var(--color-border); padding-top: var(--space-3); margin-top: var(--space-1); }
.checkout__billing[hidden] { display: none; }
.checkout__billing-title { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-400); margin-bottom: var(--space-2); }

/* Ödeme — giriş / üyelik / misafir seçenekleri */
.checkout__auth {
  margin-top: var(--space-3); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.checkout__auth-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.checkout__auth-q { color: var(--color-muted); font-size: var(--fs-400); }
.checkout__auth-row .btn { padding: 0.4rem 1rem; min-height: 0; }
.checkout__auth-sep { color: var(--color-border); margin-inline: var(--space-1); }
.checkout__auth-guest {
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-300); color: var(--color-muted); line-height: 1.6;
}
.checkout__auth-guest i { color: var(--color-primary); font-size: 1.15em; margin-right: 0.35em; vertical-align: -1px; }
.checkout__auth-note {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-3); color: var(--color-muted); font-size: var(--fs-400);
}
.checkout__auth-note i { color: var(--color-primary); font-size: 1.2em; }
@media (max-width: 575px) {
  .checkout__auth-sep { display: none; }
  .checkout__auth-row { gap: var(--space-1) var(--space-2); }
  .checkout__auth-row .btn { flex: 1 1 auto; }
}
/* Inline hesap oluşturma (checkout formu içinde) */
.checkout__account { padding: var(--space-3); border: 1px dashed var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.checkout__account-toggle { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.checkout__account-toggle em { color: var(--color-muted); font-style: normal; font-size: var(--fs-300); }
.checkout__account-pw { margin-top: var(--space-3); }
.checkout__account-pw[hidden] { display: none; }
.cart-summary__note { color: var(--color-muted); font-size: var(--fs-300); margin: var(--space-2) 0 var(--space-3); }
.cart-empty { text-align: center; padding: var(--space-6) 0; display: flex; flex-direction: column; gap: var(--space-3); align-items: center; }

/* ============================ Hero slider ============================ */
.hero__viewport { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.hero__track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.hero__track::-webkit-scrollbar { display: none; }
.hero__slide { flex: 0 0 100%; scroll-snap-align: start; position: relative; }
/* Gerçek hero: 1623×329 görünür (oran ~4.93:1, cover) */
.hero__slide img { width: 100%; aspect-ratio: 1623 / 329; object-fit: cover; }
@media (max-width: 767px) { .hero__slide img { aspect-ratio: 16 / 10; } }
/* Hero, ana içerik container'ından geniş; içerik tam 1623px (gerçek) → max 1623+padding */
.container--hero { max-width: 1655px; }
.hero__viewport { border-radius: 1.25rem; }

/* Sol overlay kutusu — yarı saydam beyaz zemin, mavi Lexend başlıklar */
.hero__box {
  position: absolute; left: 6%; top: 50%; transform: translateY(-50%);
  background: rgba(255, 255, 255, .59); border-radius: .5rem;
  padding: 1.4rem 2rem 1.6rem; display: flex; flex-direction: column;
  pointer-events: none;
}
/* Marka adı — baskın, bold, sıkı ama nefes alan tracking */
.hero__box-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5vw, 3.6rem); font-weight: 700;
  line-height: .9; letter-spacing: -0.03em; color: var(--color-primary);
}
/* Tagline — "Sağlıklı yaşam" ile aynı el yazısı font ("Shadows Into Light"):
   bold mavi marka adının altında sıcak, kişisel el yazısı dokunuş
   (mavi marka ↔ mercan el yazısı kontrastı). */
.hero__box-sub {
  font-family: "Shadows Into Light", cursive;
  font-size: clamp(1.6rem, 2.8vw, 2.5rem); font-weight: 400;
  line-height: 1; letter-spacing: 0; color: var(--color-secondary);
  margin-top: .5rem;
}
@media (max-width: 767px) {
  .hero__box { padding: .9rem 1.2rem 1rem; border-radius: .4rem; }
}

.hero__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: var(--tap-min); height: var(--tap-min);
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .85); color: var(--color-text);
  border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); font-size: 1.6rem;
}
.hero__nav:hover { background: #fff; color: var(--color-primary-dark); }
.hero__nav--prev { left: var(--space-3); }
.hero__nav--next { right: var(--space-3); }
.hero__dots { position: absolute; bottom: var(--space-3); left: 50%; transform: translateX(-50%); display: flex; gap: var(--space-2); }
.hero__dot { width: 10px; height: 10px; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, .6); border: 1px solid rgba(0, 0, 0, .15); }
.hero__dot--active { background: var(--color-primary); border-color: var(--color-primary); }
/* JS yokken ok/nokta gizli; track yine de kaydırılır (progressive enhancement) */
.no-js .hero__nav, .no-js .hero__dots { display: none; }

/* ============================ Güven rozetleri ============================ */
/* Canlı site: ikon solda + başlık/alt metin; mobilde yatay kaydırma. */
.section--trust { padding-block: var(--space-2); }  /* Avantajlar: alt/üst padding (2rem → 0.5rem, iki kez yarıya) */
/* Mobilde Avantajlar ile Kategoriler yer değiştirir (promo ortada kalır) */
@media (max-width: 767px) {
  .home-swap { display: flex; flex-direction: column; }
  .home-swap__cats { order: 1; }
  .home-swap__promo { order: 2; }
  .home-swap .section--trust { order: 3; }
}
.trust {
  display: flex; justify-content: space-between; gap: var(--space-4);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-block: var(--space-2);
}
.trust::-webkit-scrollbar { display: none; }
.trust__item { display: flex; align-items: center; gap: var(--space-3); flex: 0 0 auto; scroll-snap-align: start; }
.trust__item h3 { color: var(--color-text); font-family: var(--font-display); font-size: 1rem; font-weight: var(--fw-semibold); line-height: 1.3; }
.trust__item p { font-size: 0.8125rem; color: var(--color-muted); }
.trust__icon { width: 44px; height: 44px; color: var(--color-primary); flex: 0 0 auto; }
i.trust__icon { font-size: 44px; line-height: 1; width: auto; height: auto; text-align: center; }
/* Mobil: tek-tek kaydırmalı — her seferinde tek öğe, ortalı (scroll-snap) */
@media (max-width: 767px) {
  .trust {
    display: flex; gap: 0; padding-block: var(--space-2);
    justify-content: flex-start;
    overflow-x: auto; scroll-snap-type: x mandatory;
  }
  .trust__item {
    flex: 0 0 100%; justify-content: center;
    gap: var(--space-3); scroll-snap-align: center;
  }
  i.trust__icon { font-size: 40px; }
}

/* ============================ Özel Seçim bannerları ============================ */
.promo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
@media (max-width: 991px) {
  .promo-row { grid-template-columns: 1fr 1fr; }
  .promo-banner--image, .promo-banner--campaign { grid-column: 1 / -1; }
}
@media (max-width: 575px) { .promo-row { grid-template-columns: 1fr; } }
.promo-banner {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  min-height: 234px; padding: 2rem 2.3rem 2.2rem;
  border-radius: 1.25rem; overflow: hidden;
  background-color: #4368af; background-size: cover; background-position: right center;
  color: #fff;
}
.promo-banner:hover { text-decoration: none; }
.promo-banner--warm { background-color: var(--color-warm); }
.promo-banner__kicker {
  font-family: var(--font-display); font-size: 1em; font-weight: var(--fw-medium);
  letter-spacing: -0.025em; color: #fff; margin-bottom: .35em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .3);  /* görsel/renk zemin üstünde okunurluk */
}
.promo-banner__title {
  font-size: 1.875em; font-weight: var(--fw-semibold); line-height: 1.2;
  letter-spacing: -0.025em; color: #fff; margin-bottom: .9em; max-width: 9em;
}
/* Tek sütun (mobil) kartlarda başlık ürün görselinin üstüne binmesin —
   sol renk alanında 2 satıra insin (ürün sağa sabit, tam görünür).
   NOT: base kuraldan SONRA olmalı — media query specificity eklemez. */
@media (max-width: 575px) { .promo-banner__title { max-width: 6em; } }
/* Kampanya banner'ı (Fırsat Günleri) — görselsiz, tamamen HTML + "fırsat" marquee */
.promo-banner--campaign {
  background: #faf4da; color: var(--color-text); position: relative;
  align-items: center; justify-content: center; text-align: center;
  padding-bottom: 3.4rem;
}
.promo-campaign__icon { color: var(--color-primary); line-height: 0; margin-bottom: .35rem; }
.promo-campaign__icon svg { width: 38px; height: 38px; }
.promo-campaign__title {
  font-family: var(--font-display); font-size: 2em; font-weight: var(--fw-semibold);
  line-height: 1.02; letter-spacing: -0.03em; text-transform: uppercase;
  color: var(--color-primary); margin: 0 0 .2em;
}
.promo-campaign__sub { color: var(--color-muted); font-size: .95em; margin: 0 0 1em; max-width: 22em; }
.promo-marquee {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: #f9edc8; padding: .95em 0 .75em; overflow: hidden; white-space: nowrap;
}
.promo-marquee__track {
  display: inline-flex; align-items: center; gap: .8em;
  width: max-content;   /* öğeler kaba sıkışıp ezilmesin; track içerik kadar geniş olsun */
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: -0.025em; color: rgba(34, 37, 41, .7);
  animation: marquee 48s linear infinite;
}
.promo-marquee__track svg { flex: none; width: 15px; height: 15px; color: #f5b301; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .promo-marquee__track { animation: none; } }

/* ============================ Kategori daireleri ============================ */
.cat-circles { display: flex; gap: var(--space-4); flex-wrap: wrap; }
@media (max-width: 767px) { .cat-circles { justify-content: center; } }
/* Kategoriler bölümü — alt/üst boşluk azaltıldı (fazlaydı) */
.home-swap__cats { padding-block: var(--space-3); }
@media (max-width: 767px) { .home-swap__cats { padding-block: var(--space-2); } }
.cat-circle { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.cat-circle:hover { text-decoration: none; }
.cat-circle__ring {
  width: 132px; height: 132px; border: 1px dashed var(--color-primary);
  border-radius: 50%; display: grid; place-items: center;
}
.cat-circle__inner {
  width: 112px; height: 112px; background: var(--color-surface-tint);
  border-radius: 50%; display: grid; place-items: center; transition: transform .3s;
}
.cat-circle:hover .cat-circle__inner { transform: scale(1.1); }
.cat-circle__inner img { width: 47px; height: auto; }
.cat-circle__title { font-size: var(--fs-500); font-weight: var(--fw-medium); letter-spacing: -0.025em; color: var(--color-text); }
@media (max-width: 767px) {
  .cat-circle__ring { width: 90px; height: 90px; }
  .cat-circle__inner { width: 74px; height: 74px; }
  .cat-circle__inner img { width: 38px; }
}

/* ============================ %100 Sağlık / Güven sayaç bannerları ============================ */
/* Canlı site birebir (Elementor değerleri): görsel solda görünür, içerik sağa yaslı;
   "100" mavi 900; "%" konturlu; etiket UPPERCASE mavi; radius .5rem. */
.counter-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 991px) { .counter-row { grid-template-columns: 1fr; } }
.counter-banner {
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap;
  gap: 1.25rem;
  background-color: var(--color-surface); background-repeat: no-repeat;
  background-position: center left; background-size: cover;
  border-radius: 0.5rem; padding: 3.65em 3.3em 3.7em 10%;
}
.counter-banner--trust { padding-right: 4.2em; }
.counter-banner--health { background-image: url("../img/banner-4.jpg"); }
.counter-banner--trust { background-image: url("../img/banner-5.jpg"); }
/* Rakam grubu: "100" + [% üstte / etiket altta] */
.counter-banner__nums { display: flex; flex-wrap: nowrap; flex: 0 0 auto; }
.counter-banner__100 {
  font-family: var(--font-display); font-size: 3.75em; font-weight: 900;
  text-transform: uppercase; line-height: .72; letter-spacing: -0.05em;
  color: var(--color-primary); margin-right: 0.08em;   /* "%" sağda, bindirme yok (beyaz kontur kalktığından negatif marj çakışıyordu) */
}
.counter-banner__col { display: flex; flex-direction: column; }
.counter-banner__pct {
  font-family: var(--font-display); font-size: 3.75em; font-weight: 900;
  line-height: .72; letter-spacing: -0.05em; color: var(--color-primary);
  -webkit-text-stroke: 2px var(--color-primary);   /* kontur da mavi: beyaz dış hat yok */
}
.counter-banner__label {
  font-family: var(--font-display); font-size: 1.875em; font-weight: 700;
  text-transform: uppercase; line-height: .72; letter-spacing: -0.05em;
  color: var(--color-primary); margin-top: 0.35em;
}
/* Metin kolonu: küçük soluk üst satır + kalın başlık */
.counter-banner__text { flex: 0 0 auto; }
.counter-banner__kicker {
  font-size: 0.9375em; font-weight: 500; line-height: 1.4;
  letter-spacing: -0.025em; color: rgba(34, 37, 41, .7); margin-bottom: 0.15em;
}
.counter-banner__heading {
  font-size: 2.375em; font-weight: 700; line-height: 1; letter-spacing: -0.025em;
}
/* Tablet: canlı ara değerler */
@media (max-width: 1199px) {
  .counter-banner { padding: 2.7em 2em 2.7em 10%; }
  .counter-banner__heading { font-size: 2.2em; }
}
/* Mobil: canlı değerler (küçük rakam, %23 sol padding — görsel solda kalır) */
@media (max-width: 767px) {
  .counter-banner { gap: 10px; padding: 1.5rem 1.4rem 1.5rem 23%; }
  .counter-banner__100, .counter-banner__pct { font-size: 30px; }
  .counter-banner__pct { -webkit-text-stroke-width: 1px; }
  .counter-banner__label { font-size: 13px; }
  .counter-banner__kicker { font-size: 10px; margin-bottom: 0.35rem; }
  .counter-banner__heading { font-size: 16px; }
}

/* ============================ Sağlıklı yaşam ============================ */
.healthy {
  background: var(--color-surface) url("../img/spoor.png") left bottom no-repeat;
  padding: var(--space-6) 0; margin-block: var(--space-5);
}
.healthy__inner { display: flex; align-items: center; gap: var(--space-6); }
.healthy__text { flex: 1; }
.script-heading { font-family: "Shadows Into Light", cursive; font-size: 2.1rem; color: var(--color-secondary, #e36159); margin-bottom: var(--space-1); }
.healthy__text h2 {
  font-size: 1.5rem; font-weight: var(--fw-semibold); letter-spacing: -0.025em;
  line-height: 1.35; max-width: 34rem; margin-bottom: var(--space-4);
}
.check-list { list-style: none; padding: 0; }
.check-list li {
  display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2);
  font-size: .9375rem; font-weight: var(--fw-medium); color: var(--color-text);
}
.check-circle {
  width: 1.8rem; height: 1.8rem; border-radius: 50%; flex: 0 0 auto;
  background: var(--color-primary); color: #fff;
  display: grid; place-items: center; font-size: .9rem; font-weight: 700;
}
.healthy__media img {
  width: 400px; max-width: 100%; height: auto; display: block;
  border-radius: 12px; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .12));
}
@media (max-width: 767px) {
  .healthy__inner { flex-direction: column; }
  .healthy__media img { width: 100%; }
}

/* ============================ 404 / hata sayfası ============================ */
.error-page { text-align: center; max-width: 640px; margin-inline: auto; padding: var(--space-5) 0; }
.error-page__code { font-family: var(--font-display); font-size: 6rem; font-weight: var(--fw-bold); color: var(--color-primary); line-height: 1; margin: 0; letter-spacing: -0.04em; }
.error-page__title { font-size: 1.75rem; margin: var(--space-2) 0 var(--space-3); }
.error-page__text { color: var(--color-muted); margin-bottom: var(--space-4); line-height: 1.6; }
.error-page__subtitle { font-size: 1.15rem; margin: var(--space-5) 0 var(--space-3); }
.error-page__links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.error-page__links a { display: inline-block; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-pill); color: var(--color-text); font-size: var(--fs-300); }
.error-page__links a:hover { border-color: var(--color-primary); color: var(--color-primary-dark); text-decoration: none; }

/* ============================ CTA bandı ============================ */
.cta-band { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; padding: var(--space-4); }
.cta-band h2 { font-size: var(--fs-600); font-weight: var(--fw-semibold); letter-spacing: -0.025em; }

/* ============================ Marka şeridi ============================ */
/* Canlı site: tam dış çerçeveli (0.5rem) yuvarlak kutu; içinde eşit hücreler,
   aralarında ince #E7E7E7 ayraç çizgileri; logolar ortalı.
   Grid + 1px gap tekniği: ızgaranın zemini gri, hücreler beyaz → hücre araları
   gri çizgi olarak görünür. Dış çerçeve tek; çift kenar imkânsız, köşeler
   her zaman düzgün yuvarlak (masaüstü 6 sütun, mobil 3 sütun). */
.brand-strip {
  border: 1px solid var(--color-border);
  border-radius: 0.5rem; overflow: hidden;
}
.brand-strip__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);   /* masaüstü: 6 sütun */
  gap: 1px;
  background: var(--color-border);          /* boşluklardan görünen ayraç rengi */
}
.brand-strip__grid > * {
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.brand-strip img { width: 167px; height: auto; max-width: 100%; }  /* kaynak zaten 167×112; sabit genişlik, oran korunur */
@media (max-width: 767px) {
  .brand-strip__grid { grid-template-columns: repeat(3, 1fr); }   /* mobil: 3 sütun (canlı ile aynı) */
}


/* ============================ Kategori (liste) ============================ */
.catalog { display: grid; gap: var(--space-4); grid-template-columns: 1fr; margin-top: var(--space-4); }
@media (min-width: 1024px) { .catalog { grid-template-columns: 260px 1fr; } }
.filters { display: flex; flex-direction: column; gap: var(--space-4); }
/* Mobil filtre katlama: <1024px'te blok kapalı başlar, düğmeyle açılır.
   Ürünler böylece sayfanın üstünde kalır (canlı sitedeki mobil davranış). */
.filters__toggle {
  display: none; align-items: center; justify-content: space-between;
  min-height: var(--tap-min); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  font-family: var(--font-display); font-weight: var(--fw-medium); color: var(--color-text);
  background: var(--color-surface); width: 100%; text-align: left;
}
.filters__toggle-arrow {
  width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .2s; margin-left: var(--space-2);
}
.filters__toggle[aria-expanded="true"] .filters__toggle-arrow { transform: rotate(225deg); }
@media (max-width: 1023px) {
  .filters__toggle { display: flex; }
  .filters > *:not(.filters__toggle) { display: none; }
  .filters.is-open > *:not(.filters__toggle) { display: block; }
}
/* Alt kategori link listesi (SEO iç linkleme + gezinme).
   Marka fieldset'iyle aynı görünüm: başlık çerçeve çizgisinin üstüne oturur. */
.cat-nav { position: relative; border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3); }
.cat-nav__title {
  position: absolute; top: 0; left: var(--space-2); transform: translateY(-50%);
  margin: 0; padding-inline: var(--space-1); background: var(--color-bg);
  font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-400); line-height: 1;
}
.cat-nav__title a { color: var(--color-text); }
.cat-nav__title a:hover { color: var(--color-primary); text-decoration: none; }
.cat-nav__title a[aria-current="page"] { color: var(--color-primary); font-weight: var(--fw-semibold); }
.cat-nav__list { list-style: none; padding: 0; margin: 0; }
.cat-nav__list a { display: block; min-height: 36px; padding: var(--space-1) var(--space-2); border-radius: var(--radius); color: var(--color-text); }
.cat-nav__list a:hover { background: var(--color-surface); color: var(--color-primary-dark); text-decoration: none; }
.cat-nav__list a[aria-current="page"] { color: var(--color-primary); font-weight: var(--fw-semibold); background: var(--color-surface-tint); }
.filters fieldset { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3); }
.filters legend { font-family: var(--font-display); font-weight: var(--fw-medium); padding-inline: var(--space-1); }
.filters label { display: flex; align-items: center; gap: var(--space-2); min-height: 36px; }
/* Kategori başlığı satırı: h1 solda + sıralama menüsü sağda (aynı hizada) */
.category-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.category-head .toolbar { margin-bottom: 0; }
.toolbar { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; }
.toolbar select { min-height: var(--tap-min); padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); font-size: var(--fs-300); color: var(--color-muted); margin-bottom: var(--space-3); }
.breadcrumb a { color: var(--color-muted); }
/* Ana sayfa: metin yerine ev ikonu (Porto) */
.breadcrumb__home { display: inline-flex; align-items: center; line-height: 0; }
.breadcrumb__home i { font-size: 1.05em; }
.breadcrumb__home:hover { color: var(--color-primary); }
.category-intro { color: var(--color-muted); margin-bottom: var(--space-4); }
.seo-text { margin-top: var(--space-6); color: var(--color-muted); font-size: var(--fs-300); }
.last-updated { font-size: var(--fs-300); color: var(--color-muted); margin-top: var(--space-3); }

/* ============================ Ürün detay ============================ */
.product { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 768px) { .product { grid-template-columns: 1fr 1fr; align-items: start; } }
.gallery__main { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); }
.gallery__main img { width: 100%; aspect-ratio: 1/1; object-fit: contain; }
.gallery__thumbs { display: flex; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }
.gallery__thumbs img { width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
/* Marka meta — canlı site: sepete ekle altında, sola hizalı, marka sayfasına link */
.product-info__brandmeta {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.product-info__brand { display: inline-flex; align-items: center; line-height: 0; }
.product-info__brand img { max-width: min(100%, 180px); max-height: 120px; width: auto; height: auto; object-fit: contain; }
.product-info__brand-name { line-height: 1.2; color: var(--color-text); font-weight: var(--fw-medium); }
/* Ürün meta — Kategoriler / Marka (linkli) */
.product-info__meta { margin-top: var(--space-3); font-size: var(--fs-300); color: var(--color-muted); }
.product-meta__row { margin: 0 0 var(--space-1); }
.product-meta__label { font-weight: var(--fw-semibold); color: var(--color-text); margin-right: 0.35em; }
.product-info__meta a { color: var(--color-muted); }
.product-info__meta a:hover { color: var(--color-primary); }

.product-info__price { display: flex; align-items: baseline; gap: var(--space-3); margin: var(--space-3) 0; }
.product-info__price-now { font-size: var(--fs-700); font-weight: var(--fw-semibold); color: var(--color-text); }
.product-info__price-old { text-decoration: line-through; color: var(--color-muted); }
.variant-options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.variant-options label { display: inline-flex; align-items: center; min-height: var(--tap-min); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-pill); cursor: pointer; }
.variant-options input { position: absolute; opacity: 0; }
.variant-options input:checked + span { color: var(--color-primary-dark); font-weight: var(--fw-semibold); }
.variant-options label:has(input:checked) { border-color: var(--color-primary); }
.product-add fieldset { border: none; padding: 0; margin: var(--space-3) 0; }
.product-add legend { font-family: var(--font-display); font-weight: var(--fw-medium); margin-bottom: var(--space-2); }
.product-add__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; position: relative; }
/* Adet stepper — [−] [adet] [+] (ana sitedeki gibi) */
.qty-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; height: var(--tap-min); }
.qty-stepper__btn {
  width: 40px; flex: 0 0 auto; display: grid; place-items: center;
  font-size: 1.25rem; line-height: 1; color: var(--color-text); background: var(--color-surface);
  transition: background-color .15s, color .15s;
}
.qty-stepper__btn:hover { background: var(--color-primary); color: #fff; }
.qty-input {
  width: 48px; border: 0; border-inline: 1px solid var(--color-border);
  text-align: center; background: #fff; -moz-appearance: textfield; appearance: textfield;
  font-family: var(--font-display); font-weight: var(--fw-medium);
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.product-add__actions .product-card__fav { position: static; background: transparent; border: 1px solid var(--color-border); }
/* Mobil: sepete ekle her zaman ulaşılabilir alt sabit bar */
@media (max-width: 767px) {
  .product-add__actions { position: sticky; bottom: 0; background: var(--color-bg); padding: var(--space-2) 0; border-top: 1px solid var(--color-border); z-index: 20; }
  .product-add__actions .btn--primary { flex: 1; }
}
.product-tabs { margin-top: var(--space-5); }
/* Ürün açıklaması geniş WooCommerce içeriği (tablo/görsel) taşır; 70ch okuma
   sınırını kaldırıp kap genişliğini kullansın (blog/statik sayfalar 70ch kalır). */
.product-tabs.prose { max-width: none; }
.product-tabs h2 { margin-bottom: var(--space-2); }
.nutrition { width: 100%; border-collapse: collapse; }
.nutrition th, .nutrition td { text-align: left; padding: var(--space-2); border-bottom: 1px solid var(--color-border); }
.reviews__item { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.stars { color: var(--color-primary); letter-spacing: 2px; }

/* ============================ FAQ ============================ */
.faq details { border-bottom: 1px solid var(--color-border); }
.faq summary { min-height: var(--tap-min); display: flex; align-items: center; cursor: pointer; font-family: var(--font-display); font-weight: var(--fw-medium); color: var(--color-text); padding: var(--space-2) 0; }
.faq p { padding-bottom: var(--space-3); }

/* ============================ Blog ============================ */
.blog-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 600px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
.blog-card { border: 1px solid var(--color-border); border-radius: 0.7rem; overflow: hidden; background: var(--color-bg); }
.blog-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.blog-card__media { position: relative; display: block; }
.blog-card__body { padding: var(--space-3) var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.blog-card__title { font-size: var(--fs-500); font-weight: var(--fw-semibold); letter-spacing: -0.025em; line-height: 1.35; }
.blog-card__title a { color: var(--color-text); }
.blog-card__title a:hover { color: var(--color-primary-dark); text-decoration: none; }
.blog-card__excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card__more { font-weight: var(--fw-semibold); color: var(--color-primary); font-size: 0.875rem; }
/* Görsel üzerinde gün/ay rozeti */
.blog-card__date {
  position: absolute; left: var(--space-3); bottom: var(--space-3);
  background: #fff; border-radius: .5rem; padding: .45rem .7rem .35rem;
  text-align: center; font-size: .75rem; line-height: 1.2; color: var(--color-muted);
  box-shadow: var(--shadow-sm);
}
.blog-card__date b { display: block; font-family: var(--font-display); font-size: 1.1rem; color: var(--color-text); }
.prose { max-width: 70ch; }
.prose p { margin-bottom: var(--space-3); }
.prose p:empty { display: none; }                 /* WP içeriğindeki boş paragraflar */
.prose h4 { margin-bottom: var(--space-1); }
.prose hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-4) 0; }
/* WooCommerce içeriğindeki tablolar (ör. günlük beslenme miktarları) */
.prose table { width: 100%; border-collapse: collapse; margin: var(--space-3) 0; font-size: var(--fs-300); }
.prose th, .prose td { border: 1px solid var(--color-border); padding: var(--space-2); text-align: center; }
.prose th { background: var(--color-surface); font-weight: var(--fw-semibold); }
/* Geniş tablolar dar ekranda yatay kayar (satır sarması yerine) */
@media (max-width: 640px) {
  .prose table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
}

/* ============================ İletişim ============================ */
/* Canlı site düzeni: iki lokasyon kartı (İstanbul gri · Belgrad mavi). */
.loc-cards { display: grid; gap: var(--space-4); grid-template-columns: 1fr; margin-top: var(--space-4); }
@media (min-width: 768px) { .loc-cards { grid-template-columns: 1fr 1fr; } }
.loc-card { border-radius: 0.6rem; padding: 2.1rem; }
.loc-card--light { background: var(--color-surface); color: var(--color-text); }
.loc-card--primary { background: var(--color-primary); color: #fff; }
/* Başlıklar base.css'te koyu renk alır; mavi kartta beyaza zorla. */
.loc-card--primary .loc-card__phone,
.loc-card--primary .loc-card__phone a,
.loc-card--primary .loc-card__city { color: #fff; }
.loc-card__icon { display: block; font-size: 32px; line-height: 1; margin-bottom: var(--space-3); }
.loc-card--light .loc-card__icon { color: #333; }
.loc-card--primary .loc-card__icon { color: #fff; }
.loc-card__phone { font-family: var(--font-display); font-size: 1.125rem; font-weight: var(--fw-semibold); margin-bottom: var(--space-2); }
.loc-card__phone a { color: inherit; }
.loc-card__phone a:hover { text-decoration: underline; }
.loc-card__hours { font-size: 1.125rem; margin-bottom: var(--space-4); opacity: .95; }
.loc-card__city { font-family: var(--font-display); font-size: 1.625rem; font-weight: var(--fw-medium); margin-bottom: var(--space-2); }
.loc-card__address { font-style: normal; font-size: 0.9375rem; line-height: 1.7; }
.loc-card--light .loc-card__address { color: var(--color-muted); }
.loc-card__mail {
  display: inline-block; margin-top: var(--space-3); font-size: 14px;
  color: var(--color-text); border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.loc-card__mail:hover { color: var(--color-primary); text-decoration: none; }

/* ============================ Checkout / Ödeme ============================ */
.checkout { display: grid; gap: var(--space-4); grid-template-columns: 1fr; align-items: start; }
/* Grid öğeleri içeriğe göre viewport'u aşmasın (dar mobilde özet kartı/kupon taşmasını önler). */
.checkout > * { min-width: 0; }
@media (min-width: 900px) { .checkout { grid-template-columns: 1.6fr 1fr; } }
/* Mobilde tek kolon (139px'e sıkışan inputlar); 600px+ iki kolon. */
.checkout__grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 600px) { .checkout__grid { grid-template-columns: 1fr 1fr; } }
.checkout__full { grid-column: 1 / -1; }
.checkout__summary .card { position: sticky; top: var(--space-4); }
.checkout__items { list-style: none; padding: 0; margin: 0 0 var(--space-3); }
.checkout__items li { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) 0; border-bottom: 1px solid var(--color-border); font-size: var(--fs-300); }

/* --- Kupon kutusu (checkout) --- */
.coupon { margin: var(--space-2) 0 var(--space-3); }
.coupon__toggle > summary { cursor: pointer; font-size: var(--fs-300); color: var(--color-primary); font-weight: var(--fw-semibold); list-style: none; padding: var(--space-1) 0; }
.coupon__toggle > summary::-webkit-details-marker { display: none; }
.coupon__toggle > summary::before { content: "＋ "; }
.coupon__toggle[open] > summary::before { content: "− "; }
.coupon__form { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.coupon__input { flex: 1; min-width: 0; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius); text-transform: uppercase; }
.coupon__apply { white-space: nowrap; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-primary); background: transparent; color: var(--color-primary); border-radius: var(--radius); font-weight: var(--fw-semibold); cursor: pointer; }
.coupon__apply:hover { background: var(--color-primary); color: #fff; }
.coupon__error { color: var(--color-danger, #c0392b); font-size: var(--fs-200); margin-top: var(--space-1); }
.coupon__applied { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2); border: 1px dashed var(--color-primary); border-radius: var(--radius); background: color-mix(in srgb, var(--color-primary) 6%, transparent); }
.coupon__applied-code { font-weight: var(--fw-semibold); }
.coupon__applied-amount { color: var(--color-primary); font-weight: var(--fw-semibold); }
.coupon__remove { margin-left: auto; background: none; border: 0; color: var(--color-muted); text-decoration: underline; cursor: pointer; font-size: var(--fs-200); }
.cart-summary__row--discount > span, .cart-summary__row--discount > strong { color: var(--color-primary); }

/* --- Kuponlarım (hesap paneli) --- */
.coupon-cards { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-top: var(--space-3); }
.coupon-card { display: flex; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.coupon-card__discount { flex: 0 0 84px; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-2); font-size: var(--fs-500); font-weight: var(--fw-bold); color: #fff; background: var(--color-primary); }
.coupon-card__body { flex: 1; padding: var(--space-3); }
.coupon-card__code { display: flex; align-items: center; gap: var(--space-2); }
.coupon-card__code code { font-size: var(--fs-500); font-weight: var(--fw-semibold); letter-spacing: 0.5px; }
.coupon-card__copy { background: none; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 2px var(--space-2); font-size: var(--fs-200); cursor: pointer; }
.coupon-card__meta { color: var(--color-muted); font-size: var(--fs-200); margin-top: var(--space-1); }
.pay-methods { display: flex; flex-direction: column; gap: var(--space-2); }
.pay-method { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); cursor: pointer; }
.pay-method:has(input:checked) { border-color: var(--color-primary); }

/* ============================ Güvenli Ödeme (kart formu) ============================ */
.payment { max-width: 960px; margin-inline: auto; }
.payment__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.payment__lock {
  width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto;
  background: var(--color-surface-tint); color: var(--color-primary);
  display: grid; place-items: center;
}
.payment__lock i { font-size: 26px; line-height: 1; }
.payment__title { font-size: var(--fs-700); font-weight: var(--fw-semibold); letter-spacing: -0.025em; }
.payment__sub { color: var(--color-muted); }

.payment__grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .payment__grid { grid-template-columns: 1.5fr 1fr; } }

/* Form paneli */
.payment__card {
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) { .payment__card { padding: var(--space-5); } }
.payment__card-title {
  font-size: var(--fs-500); font-weight: var(--fw-semibold); letter-spacing: -0.025em;
  margin-bottom: var(--space-3); padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
/* Kart no alanı: sağda kart ikonu */
.payment__cardno { position: relative; }
.payment__cardno input { padding-right: 48px; font-size: 1.05rem; letter-spacing: .06em; }
.payment__cardno-icon {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--color-muted); font-size: 22px; line-height: 1;
}
/* Son Kullanma (AA/YY) + CVV tek satır */
.payment__row { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-3); }
.payment__expiry { display: flex; align-items: center; gap: 6px; }
.payment__expiry input { text-align: center; }
.payment__expiry span { color: var(--color-muted); }
.payment__hint {
  display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 4px;
  border-radius: 50%; background: var(--color-surface); border: 1px solid var(--color-border);
  font-size: 11px; color: var(--color-muted); cursor: help;
}
/* Ödeme butonu */
.payment__pay {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  width: 100%; min-height: 52px; margin-top: var(--space-4);
  background: var(--color-primary); color: #fff; border-radius: var(--radius);
  font-family: var(--font-display); font-size: 1.05rem; font-weight: var(--fw-semibold);
  transition: background-color .15s;
}
.payment__pay:hover { background: var(--color-primary-dark); }
.payment__pay i { font-size: 20px; line-height: 1; }
.payment__3ds {
  margin-top: var(--space-3); padding: var(--space-2) var(--space-3);
  background: var(--color-surface-tint); border-radius: var(--radius);
  font-size: var(--fs-300); color: var(--color-text); line-height: 1.6;
}
/* Hosted'a geçiş linki (3DPay sayfasında alternatif) */
.payment__alt {
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px solid rgba(0, 0, 0, .08);
  text-align: center; display: flex; flex-direction: column; gap: var(--space-1);
}
.payment__alt-or { font-size: var(--fs-300); color: var(--color-text); opacity: .55; }
.payment__alt-link {
  font-size: var(--fs-300); color: var(--color-primary);
  text-decoration: underline; line-height: 1.5;
}
.payment__alt-link:hover { color: var(--color-primary-dark); }

/* Sağ sütun: özet + güvence */
.payment__aside { display: flex; flex-direction: column; gap: var(--space-4); }
/* Mobil/tek sütun (<900px): yalnızca GÜVENCE panelini (VakıfBank + rozetler)
   kart formunun ÜSTÜNE al; Sipariş Özeti aşağıda kalsın. aside'a display:contents
   verince çocukları (summary + trust) doğrudan grid öğesi olur, tek tek sıralanabilir. */
@media (max-width: 899px) {
  .payment__aside { display: contents; }
  .payment__trust { order: -1; }
}
.payment__summary {
  background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-4);
}
.payment__items { list-style: none; padding: 0; margin: 0 0 var(--space-2); }
.payment__items li {
  display: flex; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-1) 0; border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-300);
}
.payment__srow { display: flex; justify-content: space-between; padding: var(--space-1) 0; font-size: var(--fs-300); color: var(--color-muted); }
.payment__srow--total { font-size: var(--fs-500); color: var(--color-text); border-top: 1px solid var(--color-border); margin-top: var(--space-1); padding-top: var(--space-2); }

.payment__trust {
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-4); text-align: center;
}
.payment__bank { width: 170px; height: auto; margin: 0 auto var(--space-3); }
.payment__badges { list-style: none; padding: 0; margin: 0; text-align: left; }
.payment__badges li {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) 0; font-size: var(--fs-300); color: var(--color-text);
}
.payment__badges i { color: var(--color-primary); font-size: 18px; line-height: 1; width: 22px; text-align: center; }

/* --- Mobil ince ayarlar --- */
@media (max-width: 520px) {
  .payment__head { gap: var(--space-2); margin-bottom: var(--space-3); }
  .payment__lock { width: 44px; height: 44px; }
  .payment__lock i { font-size: 22px; }
  .payment__title { font-size: var(--fs-600); }
  .payment__card { padding: var(--space-3); }
  /* Son Kullanma + CVV yan yana */
  .payment__row { grid-template-columns: 1fr 1fr; }
  .payment__expiry input { flex: 1; min-width: 0; }
  .payment__pay { font-size: 1rem; }
  .payment__summary, .payment__trust { padding: var(--space-3); }
}

/* ============================ Hakkımızda ============================ */
.about-intro { display: grid; gap: var(--space-5); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .about-intro { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-6); } }
.about-intro__eyebrow {
  font-family: var(--font-display);          /* Lexend — site başlık/marka fontuyla uyum */
  text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-300);
  font-weight: var(--fw-semibold); color: var(--color-primary); margin-bottom: var(--space-2);
}
.about-intro h1 { font-size: var(--fs-800); line-height: 1.15; letter-spacing: -0.03em; margin-bottom: var(--space-3); }
@media (max-width: 767px) { .about-intro h1 { font-size: var(--fs-700); } }
.about-lead { font-size: var(--fs-500); color: var(--color-text); line-height: 1.6; margin-bottom: var(--space-3); }
.about-intro__text p { color: var(--color-muted); line-height: 1.75; margin-bottom: var(--space-3); }
.about-intro__text p strong { color: var(--color-text); }
.about-intro__media { position: relative; margin: 0; }
.about-intro__media > img:not(.about-intro__paw) {
  width: 100%; height: auto; border-radius: var(--radius-lg); object-fit: cover;
  box-shadow: var(--shadow); display: block;
}
.about-intro__paw {
  position: absolute; width: 84px; height: auto; opacity: .12;
  top: calc(-1 * var(--space-3)); left: calc(-1 * var(--space-3)); z-index: -1;
}

/* İstatistik bandı */
.about-stats-band { background: var(--color-primary); border-radius: var(--radius-lg); }
.about-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-3); text-align: center; }
@media (min-width: 768px) { .about-stats { grid-template-columns: repeat(4, 1fr); } }
.about-stat { display: flex; flex-direction: column; gap: 2px; color: #fff; }
.about-stat__num { font-family: var(--font-display); font-size: var(--fs-800); font-weight: var(--fw-bold); line-height: 1; }
.about-stat__num sup { font-size: .5em; top: -0.6em; }
.about-stat__label { font-size: var(--fs-300); color: rgba(255, 255, 255, .85); }

/* Değerler başlığı + grid (trust stilini kullanır) */
.about-values-head { max-width: 720px; margin: 0 auto var(--space-5); text-align: center; }
.about-values-head h2 { font-size: var(--fs-700); letter-spacing: -0.025em; margin-bottom: var(--space-2); }
.about-values-head p { color: var(--color-muted); line-height: 1.7; }
.about-values { border-top: none; padding: 0; }

/* CTA */
.about-cta { text-align: center; max-width: 640px; margin-inline: auto; }
.about-cta h2 { font-size: var(--fs-600); letter-spacing: -0.02em; margin-bottom: var(--space-2); }
.about-cta p { color: var(--color-muted); margin-bottom: var(--space-4); }

/* ============================ Hesap ============================ */
.account { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 768px) { .account { grid-template-columns: 220px 1fr; } }
.account-nav a { display: block; min-height: var(--tap-min); padding: var(--space-2) var(--space-3); border-radius: var(--radius); color: var(--color-text); }
.account-nav a:hover, .account-nav a[aria-current="page"] { background: var(--color-surface); color: var(--color-primary-dark); }
.auth-card { max-width: 420px; margin-inline: auto; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.auth-card--wide { max-width: none; text-align: left; }
.account-nav__logout { width: 100%; text-align: left; min-height: var(--tap-min); padding: var(--space-2) var(--space-3); border-radius: var(--radius); color: var(--color-sale); }
.account-nav__logout:hover { background: var(--color-surface); }
.field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
.field input, .field textarea, .field select { min-height: var(--tap-min); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); width: 100%; }
/* Onay kutusu / radyo: tam genişlik + 44px yükseklik almasın (devasa görünürdü) */
.field input[type="checkbox"], .field input[type="radio"] {
  width: auto; min-height: 0; padding: 0; margin-right: 6px;
  vertical-align: middle; accent-color: var(--color-primary);
}
.field label:has(> input[type="checkbox"]) { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.field__error { color: var(--color-sale); font-size: var(--fs-300); }
.btn--google { background: #fff; color: var(--color-text); border-color: var(--color-border); }
.divider { display: flex; align-items: center; gap: var(--space-2); color: var(--color-muted); font-size: var(--fs-300); margin: var(--space-3) 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { text-align: left; padding: var(--space-2); border-bottom: 1px solid var(--color-border); }
.status-pill { display: inline-block; padding: 2px var(--space-2); border-radius: var(--radius-pill); font-size: var(--fs-300); background: var(--color-surface); }
.status-pill--lg { padding: var(--space-1) var(--space-3); font-size: var(--fs-400); background: var(--color-primary); color: var(--color-on-primary); white-space: nowrap; }
.status-pill--bad { background: #e05656; }

/* ============================ Sipariş takibi ============================ */
.track { max-width: 760px; margin-inline: auto; }
.track__intro { text-align: center; margin-bottom: var(--space-4); }
.track-meta { color: var(--color-muted); font-size: var(--fs-300); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mb-2 { margin-bottom: var(--space-2); }

/* Form */
.track-form { margin-bottom: var(--space-4); }
.track-form__row { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 600px) { .track-form__row { grid-template-columns: 1fr 1fr; } }
.track-form__submit { width: 100%; margin-top: var(--space-3); }

/* Sonuç başlığı */
.track-result__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.track-result__no { font-size: var(--fs-600); margin-top: 2px; }
.track-result__meta { margin-top: var(--space-2); }

/* Durum adımları (stepper) */
.stepper { display: flex; list-style: none; padding: 0; margin: var(--space-5) 0; }
.stepper__step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); text-align: center; position: relative; }
.stepper__step:not(:first-child)::before {
  content: ""; position: absolute; top: 14px; right: 50%; width: 100%; height: 2px;
  background: var(--color-border); z-index: 0;
}
.stepper__step--done:not(:first-child)::before,
.stepper__step--current:not(:first-child)::before { background: var(--color-primary); }
.stepper__dot {
  position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-300); font-weight: var(--fw-semibold);
  background: var(--color-surface); color: var(--color-muted); border: 2px solid var(--color-border);
}
.stepper__step--done .stepper__dot { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.stepper__step--current .stepper__dot { background: #fff; border-color: var(--color-primary); color: var(--color-primary-dark); box-shadow: 0 0 0 4px rgba(98, 185, 89, .18); }
.stepper__label { font-size: var(--fs-300); color: var(--color-muted); line-height: 1.25; }
.stepper__step--done .stepper__label, .stepper__step--current .stepper__label { color: var(--color-text); font-weight: var(--fw-medium); }

/* Kargo kutusu */
.track-shipment { display: flex; flex-wrap: wrap; gap: var(--space-5); padding: var(--space-3) var(--space-4); background: var(--color-surface-tint); border-radius: var(--radius); margin: var(--space-4) 0; }
.track-shipment > div { display: flex; flex-direction: column; gap: 2px; }

/* İptal/iade uyarısı */
.track-notice { padding: var(--space-3); border-radius: var(--radius); margin: var(--space-4) 0; }
.track-notice--bad { background: #fde8e8; color: #a12727; }

/* İki sütun (geçmiş + ürünler) */
.track-cols { display: grid; gap: var(--space-5); grid-template-columns: 1fr; margin-top: var(--space-4); }
@media (min-width: 768px) { .track-cols { grid-template-columns: 1fr 1fr; } }
.track-subtitle { font-size: var(--fs-500); margin-bottom: var(--space-2); }

/* Zaman çizelgesi */
.timeline { list-style: none; padding: 0; margin: var(--space-2) 0; }
.timeline__item { display: flex; gap: var(--space-3); padding-bottom: var(--space-3); position: relative; }
.timeline__item:not(:last-child)::before { content: ""; position: absolute; left: 5px; top: 16px; bottom: 0; width: 2px; background: var(--color-border); }
.timeline__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--color-primary); flex: 0 0 auto; margin-top: 4px; }