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

/* ============================ Sepet ============================ */
.cart-items { display: flex; flex-direction: column; gap: var(--space-3); }
.cart-item {
  display: grid; align-items: center; gap: var(--space-3);
  grid-template-columns: 64px 1fr auto; /* mobil: medya / bilgi / çıkar */
  padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
}
.cart-item__media img { border-radius: var(--radius); object-fit: contain; background: var(--color-surface); }
.cart-item__title { color: var(--color-text); font-weight: var(--fw-medium); }
.cart-item__variant, .cart-item__unit { font-size: var(--fs-300); color: var(--color-muted); }
.cart-item__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; }
.cart-item__total { font-weight: var(--fw-semibold); color: var(--color-text); }
.cart-item__remove { color: var(--color-muted); font-size: var(--fs-500); }
.cart-item__remove:hover { color: var(--color-sale); }
/* mobilde adet/total ikinci satıra aksın */
.cart-item__qty, .cart-item__total { grid-column: 2; }
@media (min-width: 768px) {
  .cart-item { grid-template-columns: 80px 1fr auto auto auto; }
  .cart-item__qty, .cart-item__total { grid-column: auto; }
}
.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__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;
}
.hero__box-title {
  font-family: var(--font-display); font-size: 3.125rem; font-weight: var(--fw-medium);
  line-height: 1; letter-spacing: -0.05em; color: var(--color-primary);
}
.hero__box-sub {
  font-family: var(--font-display); font-size: 1.75rem; font-weight: 700;
  letter-spacing: -0.025em; color: var(--color-primary); margin: .3em 0 0 .8em;
}
@media (max-width: 767px) {
  .hero__box { padding: .9rem 1.2rem 1rem; border-radius: .4rem; }
  .hero__box-title { font-size: 1.9rem; }
  .hero__box-sub { font-size: 1.15rem; }
}

.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) */
.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; }

/* ============================ Ö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 { 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: 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: rgba(255, 255, 255, .7); margin-bottom: .35em;
}
.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;
}
/* Görsel + "fırsat" marquee'li blok */
.promo-banner--image { background: #faf4da; padding: 0; position: relative; align-items: center; }
.promo-banner--image img { width: 100%; height: 100%; object-fit: contain; }
.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;
  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 18s linear infinite;
}
.promo-marquee__track svg { width: 12px; height: 16px; 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; }
.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ı ============================ */
.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; gap: var(--space-5); flex-wrap: wrap;
  background-color: var(--color-surface); background-repeat: no-repeat;
  background-position: center left; background-size: cover;
  border-radius: 1.25rem; padding: 2.6rem 3rem 3.15rem;
}
.counter-banner--health { background-image: url("../img/banner-4.jpg"); }
.counter-banner--trust { background-image: url("../img/banner-5.jpg"); }
.counter-banner__num {
  font-family: var(--font-display); font-size: 3.4rem; font-weight: var(--fw-semibold);
  letter-spacing: -0.025em; line-height: 1; color: var(--color-text);
}
.counter-banner__num span { font-size: .55em; }
.counter-banner__label {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: var(--fw-medium);
  color: var(--color-text); align-self: flex-end; margin-left: calc(-1 * var(--space-4));
}
.counter-banner__heading { font-size: 1.45rem; font-weight: var(--fw-semibold); letter-spacing: -0.025em; line-height: 1.25; }
.counter-banner__heading span { display: block; font-size: .68em; font-weight: var(--fw-medium); color: var(--color-muted); margin-bottom: .2em; }

/* ============================ 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: 300px; height: auto; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .12)); }
@media (max-width: 767px) {
  .healthy__inner { flex-direction: column; }
  .healthy__media img { width: 220px; }
}

/* ============================ 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 { max-width: 82.2%; width: auto; height: auto; }
@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__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; }
.toolbar { display: flex; align-items: center; justify-content: space-between; 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; gap: var(--space-1); font-size: var(--fs-300); color: var(--color-muted); margin-bottom: var(--space-3); }
.breadcrumb a { color: var(--color-muted); }
.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); }
.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; }
.qty-input { width: 80px; 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; }
.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); }
.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); }

/* ============================ İ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; }
@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); }
.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;
}
/* AA/YY + CVV + Taksit tek satır */
.payment__row { display: grid; grid-template-columns: 1.3fr 1fr 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;
}

/* Sağ sütun: özet + güvence */
.payment__aside { display: flex; flex-direction: column; gap: var(--space-4); }
.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; }

/* ============================ 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; }