/* ==========================================================================
   3Doruk — WooCommerce Tema Şablonu
   Tasarım dili: ajans/stüdyo — açık zemin, sıkı tipografi
   --------------------------------------------------------------------------
   Beyaz ve sıcak kırık beyaz (#f5f4f1) dönüşümlü bölümler · tek koyu hero ·
   Inter Tight ile çok sıkı harf aralığı · gölge yok, hairline çerçeve var ·
   ikon rozetli hap butonlar · geniş bölüm boşluğu (128px).
   Aksan: logo mavisi #2491eb ve ondan türetilen degrade.
   --------------------------------------------------------------------------
   00 Token · 01 Reset · 02 Tipografi · 03 Düzen · 04 Buton & Form
   05 Navigasyon · 06 Hero · 07 Bölümler · 08 Ürün · 09 Mağaza
   10 Ürün detay · 11 Özel tasarım · 12 Sepet & Ödeme · 13 Footer
   14 Katmanlar · 15 Hareket · 16 Responsive
   ========================================================================== */

/* ==========================================================================
   00 · TOKEN
   ========================================================================== */
:root {
  /* Zemin */
  --paper: #ffffff;
  --paper-2: #f5f4f1;   /* sıcak kırık beyaz — dönüşümlü bölüm */
  --card: #fafaf9;
  --ring: #ececec;
  --ring-2: #dedddb;
  --dark: #0a0a0a;      /* hero ve footer */
  --dark-2: #141414;

  /* Metin */
  --ink: #0a0a0a;
  --ink-2: #4b4b4b;
  --ink-3: #8a8a86;

  /* Marka */
  --blue: #2491eb;
  --blue-d: #1673c2;
  --blue-l: #6ea8ff;
  --blue-soft: #eaf3fd;
  --grad: linear-gradient(92deg, #2491eb 0%, #6ea8ff 52%, #a9cffb 100%);

  /* Sinyal renkleri */
  --coral: #e2503f;
  --go: #17994f;
  --go-d: #12813f;

  /* Tipografi */
  --f: "Montserrat", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;

  --stage: 1280px;
  --pad: clamp(1.15rem, 4vw, 3rem);
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --pill: 999px;

  --gap-sec: clamp(3.5rem, 8vw, 8rem);
  --nav-h: 76px;
  --nav-total: 75px;   /* .nav__in 74px + 1px alt çerçeve */
  --ease: cubic-bezier(0.22, 0.7, 0.3, 1);
  --slow: cubic-bezier(0.2, 1, 0.3, 1);
}

/* ==========================================================================
   01 · RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; }

body {
  font-family: var(--f);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }
::selection { background: var(--ink); color: #fff; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -100%; left: 1rem; z-index: 999;
  background: var(--ink); color: #fff; padding: 0.7rem 1.2rem;
  border-radius: var(--pill); font-weight: 600; font-size: 0.86rem;
}
.skip-link:focus { top: 0.75rem; }

/* ==========================================================================
   02 · TİPOGRAFİ & BAŞLIK HİYERARŞİSİ
   Sayfa başına tek h1 · h2 bölüm · h3 kart · seviye atlaması yok.
   Görsel boyut için etiket düşürmeyin, .t1–.t5 sınıflarını kullanın.
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--f);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.032em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 1.5rem + 3.6vw, 3.95rem); }
h2 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem); }
h3 { font-size: 1.06rem; letter-spacing: -0.018em; line-height: 1.35; }
h4, h5, h6 { font-size: 0.94rem; letter-spacing: -0.018em; }

.t1 { font-size: clamp(2.6rem, 1.5rem + 4.4vw, 4.6rem); font-weight: 700; letter-spacing: -0.038em; line-height: 1.03; }
.t2 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem); }
.t3 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.3rem); }
.t4 { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); }
.t5 { font-size: 1.06rem; }

p { text-wrap: pretty; }
p + p { margin-top: 0.8em; }
strong, b { font-weight: 600; color: var(--ink); }

.lead { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); color: var(--ink-2); max-width: 58ch; }
.dim { color: var(--ink-3); }

/* Degrade vurgulu kelime */
.grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Göz etiketi — küçük, çok geniş harf aralıklı, önünde nokta */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.688rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); }
.eyebrow--plain::before { display: none; }
.on-dark .eyebrow, .dark-block .eyebrow { color: rgba(255, 255, 255, 0.85); }

/* Etiket / rozet */
.chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.7rem; border-radius: var(--pill);
  font-size: 0.75rem; font-weight: 500; line-height: 1.45; white-space: nowrap;
  background: var(--card); color: var(--ink-2); border: 1px solid var(--ring);
}
.chip--blue { background: var(--blue-soft); color: var(--blue-d); border-color: #cfe5fa; }
.chip--sale { background: #fdeeec; color: var(--coral); border-color: #f7d5d0; }
.chip--dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip--out { background: #f2f2f0; color: var(--ink-3); }
.chip--stock { background: #eaf7ef; color: #12813f; border-color: #cdeadb; font-weight: 500; }
.chip--stock svg { flex: none; }
.dark-block .chip { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.2); }

.stars { display: inline-flex; gap: 1px; color: var(--ink); font-size: 0.76rem; line-height: 1; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: var(--ink-3); padding-block: 1.15rem; }
.crumbs li { display: flex; align-items: center; gap: 0.45rem; }
.crumbs li + li::before { content: "/"; color: #cfcfcb; }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink); }

/* ==========================================================================
   03 · DÜZEN
   ========================================================================== */
.stage { width: min(100% - (var(--pad) * 2), var(--stage)); margin-inline: auto; }
.shell { width: min(100% - (var(--pad) * 2), 940px); margin-inline: auto; }

.sec { padding-block: var(--gap-sec); position: relative; }
.sec--tight { padding-block: clamp(2rem, 4vw, 3.5rem); }
.sec--s1 { background: var(--paper-2); }
.sec--dark { background: var(--dark); color: rgba(255, 255, 255, 0.72); }
.sec--dark h1, .sec--dark h2, .sec--dark h3 { color: #fff; }
.sec--dark .lead { color: rgba(255, 255, 255, 0.78); }

.head { display: grid; gap: 1.1rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.head__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.head p { color: var(--ink-2); max-width: 58ch; }
.head--center { justify-items: center; text-align: center; }
.head--center p { margin-inline: auto; }
/* Sola yaslı, sıkışık bölüm başlığı */
.head--lead { gap: 0.7rem; margin-bottom: clamp(1.25rem, 2.5vw, 1.85rem); justify-items: start; }
.head--lead .head__row { width: 100%; align-items: center; }
.head--lead h2 { max-width: 22ch; }
.head--lead p { max-width: 62ch; }

.hr { border: 0; border-top: 1px solid var(--ring); }

/* ==========================================================================
   04 · BUTON & FORM
   Buton = hap + sağında dairesel ok rozeti (::after ile, HTML gerekmez)
   ========================================================================== */
.btn {
  --bg-c: var(--ink);
  --fg-c: #fff;
  --bd-c: var(--ink);
  --badge-bg: #fff;
  --badge-fg: #0a0a0a;
  display: inline-flex; align-items: center; gap: 0.85rem;
  padding: 5px 5px 5px 1.35rem;
  min-height: 44px;
  border: 1px solid var(--bd-c);
  border-radius: var(--pill);
  background: var(--bg-c);
  color: var(--fg-c);
  font-size: 0.875rem; font-weight: 500; letter-spacing: -0.01em;
  cursor: pointer; white-space: nowrap;
  transition: background-color 0.22s var(--ease), border-color 0.22s var(--ease),
              color 0.22s var(--ease), transform 0.18s var(--ease);
}
.btn::after {
  content: "";
  width: 34px; height: 34px; flex: none;
  display: block; line-height: 0; font-size: 0;
  border-radius: 50%;
  background-color: var(--badge-bg);
  background-image: var(--arrow);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 15px 15px;
  transition: transform 0.28s var(--ease), background-color 0.22s var(--ease);
}
.btn { --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12h13m-6-6l6 6-6 6' stroke='%230a0a0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.btn:hover { transform: translateY(-1px); }
.btn:hover::after { transform: translateX(3px); }
.btn:active { transform: translateY(0); }

/* Beyaz buton (koyu zemin üstünde) */
.btn--light {
  --bg-c: #fff; --fg-c: var(--ink); --bd-c: #fff;
  --badge-bg: var(--ink);
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12h13m-6-6l6 6-6 6' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Çizgili buton */
.btn--line {
  --bg-c: transparent; --fg-c: var(--ink); --bd-c: var(--ring-2);
  --badge-bg: var(--card);
}
.btn--line:hover { --bd-c: var(--ink); }
.dark-block .btn--line, .sec--dark .btn--line {
  --fg-c: #fff; --bd-c: rgba(255, 255, 255, 0.32); --badge-bg: rgba(255, 255, 255, 0.14);
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12h13m-6-6l6 6-6 6' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.dark-block .btn--line:hover, .sec--dark .btn--line:hover { --bd-c: #fff; }
/* İkincil buton — ince çerçeveli, sakin */
.btn--ghost {
  --bg-c: transparent; --fg-c: var(--ink-2); --bd-c: var(--ring);
  --badge-bg: var(--card);
}
.btn--ghost:hover { --bg-c: var(--card); --fg-c: var(--ink); --bd-c: var(--ring-2); }
.dark-block .btn--ghost, .sec--dark .btn--ghost, .phead .btn--ghost, .drawer--dark .btn--ghost {
  --fg-c: #fff; --bd-c: rgba(255, 255, 255, 0.3); --badge-bg: rgba(255, 255, 255, 0.14);
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12h13m-6-6l6 6-6 6' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.dark-block .btn--ghost:hover, .sec--dark .btn--ghost:hover { --bg-c: rgba(255, 255, 255, 0.08); --bd-c: rgba(255, 255, 255, 0.5); }

/* Mavi buton */
.btn--blue { --bg-c: var(--blue); --fg-c: #fff; --bd-c: var(--blue); --badge-bg: #fff; }
.btn--blue:hover { --bg-c: var(--blue-d); --bd-c: var(--blue-d); }

/* Sepete ekle — logo mavisi + çanta ikonu */
.btn--cart {
  --bg-c: var(--blue); --fg-c: #fff; --bd-c: var(--blue); --badge-bg: #fff;
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5.5 7.5h13l-1 11.5a1.6 1.6 0 0 1-1.6 1.5H8.1a1.6 1.6 0 0 1-1.6-1.5L5.5 7.5Z' stroke='%232491eb' stroke-width='1.9' stroke-linejoin='round'/%3E%3Cpath d='M9.2 10V6.6a2.8 2.8 0 0 1 5.6 0V10' stroke='%232491eb' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
}
.btn--cart:hover { --bg-c: var(--blue-d); --bd-c: var(--blue-d); }
.btn--cart:hover::after { transform: none; }

/* Hemen satın al — yeşil + şimşek ikonu */
.btn--buy {
  --bg-c: var(--go); --fg-c: #fff; --bd-c: var(--go); --badge-bg: #fff;
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%2317994f'%3E%3Cpath d='M13.2 2.5 5 13.4a.6.6 0 0 0 .48.96h4.34l-1.1 6.9a.6.6 0 0 0 1.07.46l8.2-10.9a.6.6 0 0 0-.48-.96h-4.34l1.1-6.9a.6.6 0 0 0-1.07-.46Z'/%3E%3C/svg%3E");
}
.btn--buy:hover { --bg-c: var(--go-d); --bd-c: var(--go-d); }
.btn--buy:hover::after { transform: none; }
/* Rozetsiz sade buton */
.btn--plain { padding: 0.72rem 1.35rem; }
.btn--plain::after { display: none; }
.btn--block { width: 100%; justify-content: space-between; }
.btn--block > span, .btn--block::before { flex: 1; }
.btn--lg { min-height: 52px; padding-left: 1.6rem; font-size: 0.95rem; }
.btn--lg::after { width: 40px; height: 40px; }
.btn--sm { min-height: 36px; padding-left: 1rem; font-size: 0.8rem; gap: 0.6rem; }
.btn--sm::after { width: 28px; height: 28px; background-size: 13px; }
.btn[disabled], .btn.is-off { opacity: 0.42; pointer-events: none; }

.tlink {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.875rem; font-weight: 500; color: var(--ink);
  border-bottom: 1px solid var(--ring-2); padding-bottom: 3px;
  transition: gap 0.22s var(--ease), border-color 0.2s;
}
.tlink:hover { gap: 0.75rem; border-color: var(--ink); }
.dark-block .tlink { color: #fff; border-color: rgba(255, 255, 255, 0.35); }

/* Form */
.field { display: block; margin-bottom: 1rem; }
.field__label { display: block; font-size: 0.8rem; font-weight: 500; color: var(--ink-2); margin-bottom: 0.4rem; }
.req { color: var(--coral); }

.input, .select, .textarea, .file {
  width: 100%;
  padding: 0.8rem 1rem;
  background: var(--paper);
  border: 1px solid var(--ring-2);
  border-radius: var(--r-sm);
  font-size: 0.94rem;
  color: var(--ink);
  transition: border-color 0.18s, box-shadow 0.18s;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus, .file:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.07);
}
.textarea { min-height: 118px; resize: vertical; }
.select {
  appearance: none; cursor: pointer; padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234b4b4b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
}
.file { padding: 0.55rem 0.65rem; cursor: pointer; font-size: 0.86rem; }
.file::file-selector-button {
  font-size: 0.8rem; font-weight: 500; padding: 0.5rem 1rem; margin-right: 0.8rem;
  background: var(--ink); color: #fff; border: 0; border-radius: var(--pill); cursor: pointer;
}

.check { display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer; font-size: 0.86rem; color: var(--ink-2); }
.check input {
  appearance: none; flex: none; width: 18px; height: 18px; margin-top: 2px;
  border: 1px solid var(--ring-2); border-radius: 5px; background: var(--paper); cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.check input:checked {
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 11 8'%3E%3Cpath d='M1 4l3 3 6-6' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat;
  border-color: var(--ink);
}
.check input[type="radio"] { border-radius: 50%; }
.check input[type="radio"]:checked { background: var(--paper); box-shadow: inset 0 0 0 5px var(--ink); border-color: var(--ink); }
.dark-block .check { color: rgba(255, 255, 255, 0.75); }
.dark-block .check input { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); }
.dark-block .check input:checked { background-color: #fff; box-shadow: none; border-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 11 8'%3E%3Cpath d='M1 4l3 3 6-6' stroke='%230a0a0a' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--ring-2); border-radius: var(--pill); background: var(--paper); padding: 3px; }
.qty button {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink);
  font-size: 1rem; cursor: pointer; transition: background-color 0.16s;
}
.qty button:hover { background: var(--card); }
.qty input {
  width: 38px; height: 32px; border: 0; background: none; text-align: center;
  font-weight: 600; font-size: 0.88rem; color: var(--ink); -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty--sm button { width: 27px; height: 27px; }
.qty--sm input { width: 32px; height: 27px; }

/* ==========================================================================
   05 · NAVİGASYON
   ========================================================================== */
/* Header — ana sayfada şeffaf (slider üstünde), kaydırınca beyaz
   Diğer sayfalarda .nav--solid ile baştan beyaz. */
.nav {
  position: sticky; top: 0; z-index: 70;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.32s var(--ease), border-color 0.32s var(--ease), box-shadow 0.32s var(--ease);
}
.nav__in {
  display: flex; align-items: center; gap: clamp(0.6rem, 1.6vw, 1.5rem);
  height: 74px;
}

/* --- Beyaz (sticky / iç sayfa) durumu --- */
.nav.is-stuck,
.nav--solid {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: var(--ring);
}
.nav.is-stuck { box-shadow: 0 8px 26px -18px rgba(0, 0, 0, 0.35); }

/* Logo: şeffafta beyaz, beyazda asıl renk */
.brand { flex: none; display: block; }
.brand img { height: 40px; width: auto; }   /* masaüstü; ≤900px'te 21px */
.brand__c { display: none; }
.nav.is-stuck .brand__w, .nav--solid .brand__w { display: none; }
.nav.is-stuck .brand__c, .nav--solid .brand__c { display: block; }

.menu { margin-inline: auto; }
.menu__list { display: flex; align-items: center; gap: 0.1rem; }
.menu__link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.5rem 0.85rem; border-radius: var(--pill);
  font-size: 0.875rem; font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: color 0.2s, background-color 0.2s, text-shadow 0.2s;
}
.menu__link:hover { color: #fff; background: rgba(255, 255, 255, 0.16); }
.menu__link[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, 0.2); }
.nav.is-stuck .menu__link, .nav--solid .menu__link { color: var(--ink-2); font-weight: 500; text-shadow: none; }
.nav.is-stuck .menu__link:hover, .nav--solid .menu__link:hover { color: var(--ink); background: var(--card); }
.nav.is-stuck .menu__link[aria-current="page"], .nav--solid .menu__link[aria-current="page"] { color: var(--ink); background: var(--card); }
.menu__link .chev { opacity: 0.7; transition: transform 0.22s; }

.menu__item { position: relative; }
.mega {
  /* Ürünler öğesine soldan hizalı — ortalanınca sol kenardan taşıyordu */
  position: absolute; z-index: 72; top: calc(100% + 14px); left: 0;
  transform: translate(0, -8px);
  width: min(760px, calc(100vw - 2 * var(--pad)));
  background: var(--paper);
  border: 1px solid var(--ring);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -22px rgba(0, 0, 0, 0.3);
  padding: 1.6rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem 1.75rem;
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s var(--ease), transform 0.26s var(--ease), visibility 0.2s;
  transition-delay: 0.14s;            /* kapanırken kısa bir tolerans */
}
/* Menü ile panel arasındaki 14px boşluğu kapatan görünmez köprü —
   imleç aşağı inerken hover kopmaz, panel kaçmaz */
.mega::before {
  content: ""; position: absolute;
  left: 0; right: 0; top: -18px; height: 18px;
}
.menu__item:hover .mega, .menu__item:focus-within .mega {
  opacity: 1; visibility: visible; transform: translate(0, 0);
  transition-delay: 0s;
}
.menu__item:hover .chev { transform: rotate(180deg); }
.mega__t {
  font-size: 0.688rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-3); padding-bottom: 0.6rem; margin-bottom: 0.55rem; border-bottom: 1px solid var(--ring);
}
.mega__col ul { display: grid; gap: 0.1rem; }
.mega__col a { display: block; padding: 0.4rem 0.6rem; margin-left: -0.6rem; border-radius: 8px; font-size: 0.88rem; color: var(--ink-2); }
.mega__col a:hover { background: var(--card); color: var(--ink); }
.mega__promo {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.1rem 1.25rem; border-radius: var(--r);
  background: var(--paper-2); border: 1px solid var(--ring);
}
.mega__promo p { font-size: 0.87rem; }

.nav__acts { display: flex; align-items: center; gap: 0.1rem; flex: none; }
.ico {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: transparent; color: #fff; cursor: pointer;
  filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.6)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
  transition: background-color 0.2s, color 0.2s, filter 0.2s;
}
.ico:hover { background: rgba(255, 255, 255, 0.18); }
.nav.is-stuck .ico, .nav--solid .ico { color: var(--ink); filter: none; }
.nav.is-stuck .ico:hover, .nav--solid .ico:hover { background: var(--card); }
.ico__n {
  position: absolute; top: 3px; right: 1px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center; border-radius: var(--pill);
  background: var(--blue); color: #fff; font-size: 0.63rem; font-weight: 600;
}
.ico--burger { display: none; }

/* Arama katmanı — hap altında yüzen kart */
/* Arama — header altında yüzen kart (akıştan bağımsız) */
.nav { position: sticky; }
.search {
  /* Kapalıyken tıklama/hover'ı geçirmeli; aksi hâlde header altındaki
     her şeyi (mega menü dâhil) yutuyor */
  pointer-events: none;
  position: absolute; z-index: 71;
  top: 100%; left: 50%; transform: translateX(-50%);
  width: min(100% - (var(--pad) * 2), var(--stage));
}
.search__card {
  margin-top: 0.5rem;
  background: var(--paper); border: 1px solid var(--ring); border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -22px rgba(0, 0, 0, 0.3);
  padding: 1.15rem 1.25rem;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity 0.24s var(--ease), transform 0.28s var(--ease), visibility 0.24s;
}
.search.is-open { pointer-events: auto; }
.search.is-open .search__card { opacity: 1; visibility: visible; transform: none; }
.search form { display: flex; gap: 0.6rem; }
.search input { flex: 1; }
.search__h { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.85rem; font-size: 0.8rem; color: var(--ink-3); }
.search__h a { padding: 0.3rem 0.8rem; border-radius: var(--pill); border: 1px solid var(--ring); color: var(--ink-2); }
.search__h a:hover { border-color: var(--ink); color: var(--ink); }
/* Dar ekranda arama panelinde yalnızca giriş alanı görünür */
@media (max-width: 900px) { .search__h { display: none; } }

/* ==========================================================================
   06 · HERO SLIDER — tam genişlik, yalnızca görsel
   Slaytlarda metin yoktur. Yüzen navbar görselin üzerinde durur; kontroller
   sağ alt köşede cam bir hap içindedir.
   ========================================================================== */
/* Slider header'ın tam altına oturur: header yüksekliği kadar yukarı çekilir.
   --nav-total = içerik yüksekliği + 1px alt çerçeve; kırılma noktasına göre değişir. */
.hero { position: relative; margin-top: calc(var(--nav-total) * -1); }
.hero__box { position: relative; overflow: hidden; background: var(--card); }
.hero__track { position: relative; display: block; width: 100%; }

.slide {
  position: absolute; inset: 0; display: block;
  opacity: 0; visibility: hidden;
  transition: opacity 0.7s var(--ease), visibility 0.7s;
}
.slide:first-child { position: relative; }
.slide[aria-hidden="false"] { opacity: 1; visibility: visible; z-index: 1; }
.slide img {
  width: 100%;
  height: clamp(430px, 62vw, 700px);
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 5s var(--slow);
}
.slide[aria-hidden="false"] img { transform: scale(1); }

/* Üstte navbarın okunması için ince karartma */
.hero__box::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 230px; z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.42) 45%, transparent 100%);
}

/* İlerleme çizgileri — sol altta */
.hero__dots {
  position: absolute; z-index: 3;
  left: max(var(--pad), calc((100% - var(--stage)) / 2));
  bottom: clamp(1.25rem, 3vw, 2rem);
  display: flex; gap: 0.4rem; width: min(240px, 34vw);
}
.hero__dots button {
  position: relative; flex: 1; height: 3px; padding: 0;
  border: 0; border-radius: 3px; cursor: pointer;
  background: rgba(255, 255, 255, 0.35); overflow: hidden;
}
.hero__dots button::after {
  content: ""; position: absolute; inset: 0 100% 0 0;
  background: #fff; border-radius: 3px;
}
.hero__dots button[aria-current="true"]::after { animation: fillbar 6s linear forwards; }

/* Kontrol hapı — sağ altta */
.hero__pad {
  position: absolute; z-index: 3;
  right: max(var(--pad), calc((100% - var(--stage)) / 2));
  bottom: clamp(1.1rem, 3vw, 1.85rem);
  display: flex; align-items: center; gap: 0.15rem;
  padding: 5px;
  border-radius: var(--pill);
  background: rgba(14, 14, 14, 0.55);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.hero__count {
  padding-inline: 0.6rem;
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85); font-variant-numeric: tabular-nums;
}
.hero__nav {
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: transparent; color: #fff;
  display: grid; place-items: center; cursor: pointer;
  transition: background-color 0.2s;
}
.hero__nav:hover { background: rgba(255, 255, 255, 0.18); }

@keyframes fillbar { from { inset: 0 100% 0 0; } to { inset: 0 0 0 0; } }

/* ==========================================================================
   07 · BÖLÜMLER
   ========================================================================== */

/* Güven şeridi — açık zemin, eşit aralık, dikey ayraç, sonsuz döngü */
.marq {
  position: relative; overflow: hidden;
  background: var(--paper-2);
  border-block: 1px solid var(--ring);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marq__t { display: flex; width: max-content; animation: marq 48s linear infinite; }
.marq__g { display: flex; flex: none; }
.marq__g span {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 1.05rem 2.25rem;
  font-size: 0.875rem; font-weight: 500; letter-spacing: -0.012em;
  color: var(--ink); white-space: nowrap;
  border-right: 1px solid var(--ring);
}
.marq__g span svg { color: var(--blue); flex: none; }
.marq:hover .marq__t { animation-play-state: paused; }
@keyframes marq { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* Üç kategori kutusu — yan yana */
.catboxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.15rem; }
.catbox {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--ring); border-radius: var(--r-xl);
  overflow: hidden;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.catbox:hover { border-color: var(--ring-2); transform: translateY(-3px); }
.catbox__f { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--card); }
.catbox__f img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--slow); }
.catbox:hover .catbox__f img { transform: scale(1.05); }
.catbox__b { padding: 1.5rem; display: grid; gap: 0.8rem; align-content: start; flex: 1; }
.catbox__b h3 { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem); letter-spacing: -0.035em; }
.catbox__b h3 a:hover { color: var(--blue-d); }
.catbox__b > p { font-size: 0.92rem; }
.catbox__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.catbox__tags .chip { font-size: 0.72rem; padding: 0.25rem 0.6rem; }
.catbox .btn { margin-top: auto; width: auto; align-self: stretch; justify-content: space-between; }

/* Sayı vurguları */
.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.figures > li { background: var(--paper); border: 1px solid var(--ring); border-radius: var(--r-lg); padding: clamp(1.35rem, 3vw, 2rem); }
.sec--s1 .figures > li { background: var(--paper); }
.figures dt { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); font-weight: 600; letter-spacing: -0.045em; color: var(--ink); line-height: 1; }
.figures dd { font-size: 0.86rem; color: var(--ink-3); margin-top: 0.6rem; }

/* Yatay ürün rayı */
.rail-wrap { position: relative; }
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(248px, 1fr);
  gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-block: 0.35rem; scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.rail-btn {
  width: 38px; height: 38px; border: 1px solid var(--ring-2); border-radius: 50%;
  background: var(--paper); color: var(--ink); cursor: pointer;
  display: grid; place-items: center; transition: background-color 0.18s, border-color 0.18s;
}
.rail-btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.rail-ctl { display: flex; gap: 0.45rem; }

/* Sekme çubuğu */
.tabbar { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.tabbar button {
  padding: 0.5rem 1.05rem; border: 1px solid var(--ring-2); border-radius: var(--pill);
  background: transparent; font-size: 0.83rem; font-weight: 500; color: var(--ink-2);
  cursor: pointer; transition: all 0.18s;
}
.tabbar button:hover { border-color: var(--ink); color: var(--ink); }
.tabbar button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Geniş kampanya bloğu */
.promo {
  position: relative; display: grid; align-items: center;
  min-height: clamp(300px, 40vw, 480px);
  border-radius: var(--r-xl); overflow: hidden; background: var(--dark);
}
.promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--slow); }
.promo:hover img { transform: scale(1.03); }
.promo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(88deg, rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0.55) 48%, rgba(10, 10, 10, 0.12) 82%);
}
.promo__c { position: relative; z-index: 2; padding: clamp(1.75rem, 4vw, 3.25rem); display: grid; gap: 0.9rem; justify-items: start; max-width: 46ch; }
.promo__h { font-size: clamp(1.5rem, 1.1rem + 2vw, 2.6rem); font-weight: 600; letter-spacing: -0.04em; color: #fff; line-height: 1.05; }
.promo__c p { color: rgba(255, 255, 255, 0.78); }
.promo__c h1, .promo__c h2, .promo__c h3 { color: #fff; }
.promo__c .lead { color: rgba(255, 255, 255, 0.82); }

.promo-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.promo-2 .promo { min-height: clamp(240px, 25vw, 320px); }
.promo-2 .promo::after { background: linear-gradient(to top, rgba(10, 10, 10, 0.92) 0%, rgba(10, 10, 10, 0.4) 58%, rgba(10, 10, 10, 0.1) 100%); }
.promo-2 .promo__c { align-self: end; }

/* Özel üretim bloğu */
.custom { border-radius: var(--r-xl); overflow: hidden; background: var(--dark); }
.custom__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.88fr); align-items: center; }
.custom__c { padding: clamp(1.75rem, 4vw, 3.25rem); display: grid; gap: 1.1rem; justify-items: start; }
.custom__c h2 { color: #fff; }
.custom__c p { color: rgba(255, 255, 255, 0.78); }
.custom__list { display: grid; gap: 0.6rem; }
.custom__list li { display: flex; gap: 0.6rem; font-size: 0.92rem; color: rgba(255, 255, 255, 0.8); }
.custom__list svg { color: #fff; flex: none; margin-top: 4px; }
.custom__f { position: relative; min-height: 300px; align-self: stretch; }
.custom__f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.custom__f::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--dark) 0%, transparent 42%); }

/* Yorumlar */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.quote { background: var(--paper); border: 1px solid var(--ring); border-radius: var(--r-lg); padding: 1.75rem; display: grid; gap: 0.9rem; align-content: start; transition: border-color 0.25s; }
.quote:hover { border-color: var(--ring-2); }
.quote p { color: var(--ink); font-size: 0.98rem; }
.quote__by { display: flex; align-items: center; gap: 0.7rem; padding-top: 0.9rem; border-top: 1px solid var(--ring); }
.quote__av { width: 38px; height: 38px; border-radius: 50%; background: var(--paper-2); color: var(--ink); display: grid; place-items: center; font-weight: 600; font-size: 0.8rem; flex: none; }
.quote__by h3 { font-size: 0.9rem; }
.quote__by small { display: block; color: var(--ink-3); font-size: 0.78rem; }

/* Bülten */
.news { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding: clamp(1.75rem, 4vw, 3rem); border-radius: var(--r-xl); background: var(--paper-2); border: 1px solid var(--ring); }
.news form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.news .input { flex: 1 1 210px; }

/* Serbest metin */
.prose { max-width: 72ch; }
.prose h3 { font-size: 1.12rem; margin: 1.75rem 0 0.5rem; }
.prose h3:first-child { margin-top: 0; }
.prose ul { display: grid; gap: 0.4rem; margin: 0.75rem 0; }
.prose li { padding-left: 1.35rem; position: relative; }
.prose li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); }
.prose a { color: var(--ink); border-bottom: 1px solid var(--ring-2); }
.prose a:hover { border-color: var(--ink); }

/* ==========================================================================
   08 · ÜRÜN KARTI
   ========================================================================== */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--ring); border-radius: var(--r-lg);
  overflow: hidden; transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.card:hover { border-color: var(--ring-2); transform: translateY(-3px); }
.card.is-hidden { display: none; }

.card__f { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--card); }
.card__f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.35s var(--ease), transform 0.9s var(--slow); }
.card__f .alt { opacity: 0; }
/* .main yalnızca arkasında ikinci görsel VARSA soluklaşır (.card__f--dual).
   Tek görselli üründe kart hover'da bomboş kalıyordu. */
.card:hover .card__f--dual .main { opacity: 0; }
.card:hover .card__f .alt { opacity: 1; }
.card:hover .card__f img { transform: scale(1.04); }

.card__badges { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.card__badges .chip { background: rgba(255, 255, 255, 0.94); }

.card__b { padding: 1.1rem 1.15rem 1.25rem; display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }
.card__cat { font-size: 0.688rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.card h3 { font-size: 0.97rem; color: var(--ink); }
.card h3 a:hover { color: var(--blue-d); }
.card__rate { display: flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--ink-3); }

.price { margin-top: auto; padding-top: 0.85rem; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.price__now { font-size: 1.18rem; font-weight: 700; letter-spacing: -0.035em; color: var(--ink); }
.price__old { font-size: 0.83rem; color: var(--ink-3); text-decoration: line-through; }
.price__off { font-size: 0.73rem; font-weight: 500; color: var(--coral); }

.card .btn { margin: 0 1.15rem 1.15rem; width: auto; align-self: stretch; justify-content: space-between; padding-left: 1.1rem; }

/* ==========================================================================
   09 · MAĞAZA
   ========================================================================== */
.pagehead { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem); display: grid; gap: 1rem; justify-items: start; }
.pagehead p { max-width: 62ch; }

.shop { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }

.filters { position: sticky; top: calc(var(--nav-h) + 16px); display: grid; }
.fgrp { border-bottom: 1px solid var(--ring); }
.fgrp:first-child { border-top: 1px solid var(--ring); }
.fgrp > summary {
  list-style: none; cursor: pointer; padding: 1rem 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: 0.9rem; font-weight: 600; color: var(--ink); letter-spacing: -0.02em;
}
.fgrp > summary::-webkit-details-marker { display: none; }
.fgrp .pm { position: relative; width: 12px; height: 12px; flex: none; color: var(--ink-3); }
.fgrp .pm::before, .fgrp .pm::after { content: ""; position: absolute; background: currentColor; border-radius: 2px; transition: transform 0.2s; }
.fgrp .pm::before { inset: 5px 0; height: 2px; }
.fgrp .pm::after { inset: 0 5px; width: 2px; }
.fgrp[open] .pm::after { transform: scaleY(0); }
.fgrp__b { padding-bottom: 1.15rem; display: grid; gap: 0.55rem; }
.fgrp__b .check span { flex: 1; }
.fgrp__b .n { font-size: 0.76rem; color: var(--ink-3); }

.range { display: grid; gap: 0.75rem; }
.range__in { display: flex; align-items: center; gap: 0.45rem; }
.range__in .input { padding: 0.45rem 0.6rem; font-size: 0.85rem; }
input[type="range"] { width: 100%; appearance: none; height: 3px; border-radius: 3px; background: var(--ring-2); cursor: pointer; }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); }
input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--ink); }

.swatches { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.swatches button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--ring-2); cursor: pointer; transition: box-shadow 0.18s, transform 0.18s; }
.swatches button:hover { transform: scale(1.12); }
.swatches button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.85rem; padding-bottom: 1.15rem; border-bottom: 1px solid var(--ring); margin-bottom: 1.5rem; }
.toolbar__n { font-size: 0.86rem; color: var(--ink-3); }
.toolbar__n b { color: var(--ink); }
.toolbar__r { display: flex; align-items: center; gap: 0.5rem; }
.toolbar .select { width: auto; padding: 0.5rem 2.2rem 0.5rem 0.9rem; font-size: 0.85rem; border-radius: var(--pill); }
.vtog { display: flex; gap: 2px; padding: 3px; border-radius: var(--pill); background: var(--card); border: 1px solid var(--ring); }
.vtog button { width: 32px; height: 28px; display: grid; place-items: center; border: 0; border-radius: var(--pill); background: none; color: var(--ink-3); cursor: pointer; }
.vtog button[aria-pressed="true"] { background: var(--ink); color: #fff; }

.pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.15rem; }
.pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.45rem 0.3rem 0.85rem; border-radius: var(--pill); border: 1px solid var(--ring); font-size: 0.8rem; color: var(--ink-2); }
.pill button { width: 17px; height: 17px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--card); color: var(--ink-3); font-size: 0.62rem; cursor: pointer; }
.pill button:hover { background: var(--ink); color: #fff; }

.pager { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 2.5rem; }
.pager a, .pager span { min-width: 40px; height: 40px; padding: 0 0.6rem; display: grid; place-items: center; border: 1px solid var(--ring); border-radius: var(--pill); font-size: 0.85rem; font-weight: 500; color: var(--ink-2); transition: all 0.18s; }
.pager a:hover { border-color: var(--ink); color: var(--ink); }
.pager [aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.pager .dots { border: 0; }

/* ==========================================================================
   10 · ÜRÜN DETAY
   ========================================================================== */
.pdp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }

.gal { display: grid; gap: 0.7rem; }
.gal__m { position: relative; aspect-ratio: 1; border-radius: var(--r-xl); overflow: hidden; background: var(--card); }
.gal__m img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--slow); }
.gal__m:hover img { transform: scale(1.06); }
.gal__badges { position: absolute; top: 16px; left: 16px; z-index: 2; display: flex; gap: 6px; }
.gal__badges .chip { background: rgba(255, 255, 255, 0.94); }
.gal__t { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.6rem; }
.gal__t button { aspect-ratio: 1; border: 1px solid var(--ring); border-radius: 12px; overflow: hidden; padding: 0; background: var(--card); cursor: pointer; transition: border-color 0.2s; }
.gal__t img { width: 100%; height: 100%; object-fit: cover; }
.gal__t button[aria-current="true"] { border-color: var(--ink); }

.buy { position: sticky; top: calc(var(--nav-h) + 20px); display: grid; gap: 1.1rem; }
.buy h1 { font-size: clamp(1.65rem, 1.2rem + 1.6vw, 2.4rem); }
.buy__rate { display: flex; align-items: center; gap: 0.5rem; font-size: 0.84rem; color: var(--ink-3); }
.buy__rate a { color: var(--ink); border-bottom: 1px solid var(--ring-2); }

.pricebox { display: grid; gap: 0.3rem; padding: 1.15rem 1.25rem; border-radius: var(--r); background: var(--paper-2); border: 1px solid var(--ring); }
.pricebox .row { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.pricebox .now { font-size: clamp(1.7rem, 1.4rem + 1.1vw, 2.2rem); font-weight: 700; letter-spacing: -0.045em; color: var(--ink); }
.pricebox .old { font-size: 0.92rem; color: var(--ink-3); text-decoration: line-through; }
.pricebox small { font-size: 0.8rem; color: var(--ink-3); }
.pricebox .inst { font-size: 0.84rem; color: var(--blue-d); font-weight: 500; }

.opt-g { display: grid; gap: 0.55rem; }
.opt-g__l { font-size: 0.82rem; color: var(--ink-3); }
.opt-g__l b { color: var(--ink); }
.opt-r { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.opt {
  padding: 0.55rem 1rem; border: 1px solid var(--ring-2); border-radius: var(--pill);
  background: var(--paper); font-size: 0.86rem; font-weight: 500; color: var(--ink-2);
  cursor: pointer; transition: all 0.18s;
}
.opt:hover { border-color: var(--ink); color: var(--ink); }
.opt[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.opt[disabled] { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
.opt--sw { width: 34px; height: 34px; padding: 0; border-width: 2px; border-color: var(--paper); box-shadow: 0 0 0 1px var(--ring-2); }
.opt--sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }

.buy__row { display: flex; gap: 0.6rem; align-items: center; }
.buy__row .btn { flex: 1; justify-content: space-between; }

/* Ürün detay — güvence kartları (USP) */
.usps { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.usps li {
  display: flex; align-items: flex-start; gap: 0.65rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--ring); border-radius: var(--r);
  background: var(--paper);
  transition: border-color 0.2s var(--ease);
}
.usps li:hover { border-color: var(--ring-2); }
.usps li:last-child { grid-column: 1 / -1; }
.usps--one { grid-template-columns: 1fr; }
.usps .ic {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; background: var(--paper-2); color: var(--ink);
}
.usps b { display: block; font-size: 0.85rem; font-weight: 600; color: var(--ink); letter-spacing: -0.015em; }
.usps span { display: block; font-size: 0.78rem; color: var(--ink-3); margin-top: 1px; }
.usps a { color: var(--blue-d); font-weight: 600; }
.usps a:hover { text-decoration: underline; }
.usps li.is-accent { background: var(--blue-soft); border-color: #cfe5fa; }
.usps li.is-accent .ic { background: #fff; color: var(--blue-d); }

/* Sepet özetindeki sade güvence listesi */
.assure { display: grid; gap: 0.6rem; padding-top: 1.15rem; border-top: 1px solid var(--ring); }
.assure li { display: flex; gap: 0.6rem; font-size: 0.87rem; align-items: flex-start; }
.assure svg { color: var(--ink); flex: none; margin-top: 3px; }
.assure a { color: var(--ink); border-bottom: 1px solid var(--ring-2); }

.buy__meta { font-size: 0.79rem; color: var(--ink-3); display: grid; gap: 0.2rem; }
.buy__meta b { color: var(--ink-2); }

/* Sabit alt satın alma çubuğu */
.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 65;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--ring);
  transform: translateY(110%);
  transition: transform 0.35s var(--ease);
}
.buybar.is-on { transform: translateY(0); }
.buybar__in { display: flex; align-items: center; gap: 1rem; padding-block: 0.7rem; }
.buybar__f { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; flex: none; background: var(--card); }
.buybar__f img { width: 100%; height: 100%; object-fit: cover; }
.buybar__i { flex: 1; min-width: 0; }
.buybar__i h2 { font-size: 0.92rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybar__i span { font-size: 0.8rem; color: var(--ink-3); }
.buybar__p { font-weight: 700; font-size: 1.1rem; letter-spacing: -0.035em; color: var(--ink); flex: none; }

/* Sekmeler */
.tabs__n { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 2rem; }
.tabs__n button {
  padding: 0.55rem 1.15rem; border: 1px solid var(--ring-2); border-radius: var(--pill);
  background: transparent; font-size: 0.86rem; font-weight: 500; color: var(--ink-2);
  cursor: pointer; transition: all 0.18s;
}
.tabs__n button:hover { border-color: var(--ink); color: var(--ink); }
.tabs__n button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.tabs__p[hidden] { display: none; }

.spec { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.spec caption { text-align: left; font-weight: 600; color: var(--ink); padding-bottom: 0.85rem; letter-spacing: -0.02em; }
.spec th, .spec td { padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid var(--ring); vertical-align: top; }
.spec th { width: 34%; color: var(--ink-3); font-weight: 400; }
.spec td { color: var(--ink); }
.spec tr:first-child th, .spec tr:first-child td { border-top: 1px solid var(--ring); }

.rate-sum { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 2rem; align-items: center; padding: 1.5rem; border: 1px solid var(--ring); border-radius: var(--r-lg); background: var(--paper-2); margin-bottom: 1.5rem; }
.rate-sum__b { text-align: center; }
.rate-sum__b strong { display: block; font-size: 3rem; font-weight: 600; line-height: 1; letter-spacing: -0.05em; color: var(--ink); }
.rate-sum__b small { display: block; color: var(--ink-3); margin-top: 0.4rem; }
.bars { display: grid; gap: 0.4rem; }
.bar { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) 2.2rem; align-items: center; gap: 0.7rem; font-size: 0.78rem; color: var(--ink-3); }
.bar__t { height: 5px; border-radius: 3px; background: var(--paper); overflow: hidden; }
.bar__f { height: 100%; background: var(--ink); border-radius: 3px; }

.revs { display: grid; gap: 0.85rem; }
.revs > li { border: 1px solid var(--ring); border-radius: var(--r); padding: 1.15rem 1.25rem; display: grid; gap: 0.45rem; }
.revs__h { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.revs__d { font-size: 0.77rem; color: var(--ink-3); margin-left: auto; }

/* ==========================================================================
   11 · ÖZEL TASARIM
   ========================================================================== */
.tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.track { background: var(--paper); border: 1px solid var(--ring); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.25s; }
.track:hover { border-color: var(--ring-2); }
.track__f { position: relative; display: block; aspect-ratio: 16 / 8; background: var(--card); overflow: hidden; }
/* Görsel mutlak konumlanır; aksi hâlde kendi oranı kutuyu esnetir */
.track__f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.track__f > .chip { position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(255, 255, 255, 0.94); border-color: rgba(255, 255, 255, 0.94); color: var(--ink); }
.track__c { padding: 1.5rem; display: grid; gap: 0.75rem; align-content: start; flex: 1; justify-items: start; }
.track ul { display: grid; gap: 0.45rem; }
.track ul li { display: flex; gap: 0.55rem; font-size: 0.89rem; }
.track ul li svg { color: var(--ink); flex: none; margin-top: 4px; }
/* Butonlar kartın altına yapışır ve iki kartta aynı genişlikte olur */
.track .btn { margin-top: auto; }
.track .btn--block { justify-self: stretch; width: 100%; }
.track__c > .chip--blue { min-height: 29px; }

.matrix { width: 100%; border-collapse: collapse; font-size: 0.89rem; }
.matrix th, .matrix td { padding: 0.95rem 1rem; text-align: left; border-bottom: 1px solid var(--ring); vertical-align: top; }
.matrix thead th { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.matrix tbody th { font-weight: 600; color: var(--ink); width: 20%; letter-spacing: -0.02em; }

.steps5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.steps5 li { background: var(--paper); border: 1px solid var(--ring); border-radius: var(--r-lg); padding: 1.35rem; display: grid; gap: 0.45rem; align-content: start; }
.steps5 .n { width: 34px; height: 34px; border-radius: 50%; background: var(--paper-2); color: var(--ink); display: grid; place-items: center; font-weight: 600; font-size: 0.85rem; margin-bottom: 0.4rem; }
.steps5 li:first-child .n { background: var(--ink); color: #fff; }
.steps5 p { font-size: 0.86rem; }

.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.tiers li { background: var(--paper); border: 1px solid var(--ring); border-radius: var(--r-lg); padding: 1.5rem; }
.tiers li:last-child { background: var(--ink); border-color: var(--ink); }
.tiers li:last-child .q, .tiers li:last-child p { color: rgba(255, 255, 255, 0.7); }
.tiers li:last-child .v { color: #fff; }
.tiers .q { font-size: 0.82rem; color: var(--ink-3); }
.tiers .v { display: block; font-size: 1.85rem; font-weight: 600; letter-spacing: -0.045em; color: var(--ink); margin: 0.3rem 0 0.5rem; }
.tiers p { font-size: 0.85rem; }

.refs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.refs figure { border: 1px solid var(--ring); border-radius: var(--r); overflow: hidden; background: var(--paper); }
.refs img { aspect-ratio: 1; object-fit: cover; width: 100%; transition: transform 0.6s var(--slow); }
.refs figure:hover img { transform: scale(1.04); }
.refs figcaption { padding: 0.85rem 1rem 1rem; font-size: 0.8rem; color: var(--ink-3); }
.refs figcaption b { display: block; color: var(--ink); font-size: 0.88rem; margin-bottom: 0.1rem; }

.brief { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
.brief__a { position: sticky; top: calc(var(--nav-h) + 20px); background: var(--paper-2); border: 1px solid var(--ring); border-radius: var(--r-lg); padding: 1.5rem; display: grid; gap: 1rem; }
.brief__a ol { display: grid; gap: 0.75rem; counter-reset: b; }
.brief__a ol > li { display: grid; grid-template-columns: 26px 1fr; gap: 0.65rem; font-size: 0.86rem; }
.brief__a ol > li::before {
  counter-increment: b; content: counter(b);
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--ring); color: var(--ink);
  display: grid; place-items: center; font-weight: 600; font-size: 0.76rem;
}
.callbox { padding: 1rem 1.15rem; border-radius: var(--r); background: var(--paper); border: 1px solid var(--ring); }
.callbox b { display: block; font-size: 1.15rem; color: var(--ink); letter-spacing: -0.03em; }

.faq { display: grid; gap: 0.5rem; }
.faq details { background: var(--paper); border: 1px solid var(--ring); border-radius: var(--r); overflow: hidden; }
.faq details[open] { border-color: var(--ring-2); }
.faq summary { list-style: none; cursor: pointer; padding: 1.15rem 3rem 1.15rem 1.35rem; position: relative; font-weight: 600; font-size: 0.96rem; color: var(--ink); letter-spacing: -0.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--paper-2); color: var(--ink-2); font-size: 1rem; }
.faq details[open] summary::after { content: "\2013"; background: var(--ink); color: #fff; }
.faq p { padding: 0 1.35rem 1.25rem; font-size: 0.9rem; }

/* ==========================================================================
   12 · SEPET & ÖDEME
   ========================================================================== */
/* Sepet sayfası düzeni. Doğrudan .woocommerce çocuğuna bağlı:
   WooCommerce'in sepete ekleme formu da "cart" sınıfını taşıyor. */
.woocommerce > .cart { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: start; }

.lines { display: grid; gap: 0.6rem; }
.lines__h { display: grid; grid-template-columns: minmax(0,1fr) 118px 108px 40px; gap: 1rem; padding: 0 1.25rem 0.4rem; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.line { display: grid; grid-template-columns: minmax(0,1fr) 118px 108px 40px; gap: 1rem; align-items: center; background: var(--paper); border: 1px solid var(--ring); border-radius: var(--r); padding: 1rem 1.25rem; }
.line__p { display: flex; gap: 1rem; align-items: center; }
.line__f { display: block; width: 72px; aspect-ratio: 1; flex: none; border-radius: 10px; overflow: hidden; background: var(--card); }
.line__f img { width: 100%; height: 100%; object-fit: cover; }
.line__i { display: block; min-width: 0; }
.line h3 { font-size: 0.95rem; margin-bottom: 0.2rem; }
.line h3 a:hover { color: var(--blue-d); }
.line__v { font-size: 0.79rem; color: var(--ink-3); }
.line__pr { font-weight: 700; font-size: 1.04rem; letter-spacing: -0.03em; color: var(--ink); text-align: right; }
.line__x { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--ring); border-radius: 50%; background: transparent; color: var(--ink-3); cursor: pointer; justify-self: end; transition: all 0.18s; }
.line__x:hover { border-color: var(--coral); color: var(--coral); }

.cart-foot { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: space-between; padding-top: 0.5rem; }
.coupon { display: flex; gap: 0.45rem; flex: 1 1 270px; }
.coupon .input { max-width: 200px; border-radius: var(--pill); }

.summary { position: sticky; top: calc(var(--nav-h) + 20px); background: var(--paper-2); border: 1px solid var(--ring); border-radius: var(--r-lg); padding: 1.5rem; }
.summary h2 { font-size: 1.1rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--ring); margin-bottom: 1rem; }
.sum-rows { display: grid; gap: 0.55rem; }
.sum-row { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.88rem; }
.sum-row b { color: var(--ink); font-weight: 600; }
.sum-row .free { color: var(--blue-d); font-weight: 600; }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--ring); }
.sum-total dt { font-weight: 600; color: var(--ink); }
.sum-total dd { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.045em; color: var(--ink); }
.summary .btn { margin-top: 1.15rem; width: 100%; justify-content: space-between; }
.summary__note { font-size: 0.77rem; color: var(--ink-3); text-align: center; margin-top: 0.6rem; }

.freeship { padding: 0.85rem 1rem; border-radius: var(--r); background: var(--paper); border: 1px solid var(--ring); margin-bottom: 1rem; }
.freeship p { font-size: 0.85rem; margin-bottom: 0.5rem; }
.freeship__t { height: 5px; border-radius: 3px; background: var(--paper-2); overflow: hidden; }
.freeship__f { height: 100%; background: var(--ink); border-radius: 3px; transition: width 0.4s; }

.minis { display: grid; gap: 0.8rem; }
.mini { display: flex; gap: 0.75rem; align-items: center; }
.mini__f { display: block; position: relative; width: 52px; aspect-ratio: 1; flex: none; border-radius: 9px; overflow: hidden; background: var(--card); }
.mini__f img { width: 100%; height: 100%; object-fit: cover; }
.mini__q { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; display: grid; place-items: center; border-radius: var(--pill); background: var(--ink); color: #fff; font-size: 0.64rem; font-weight: 600; border: 2px solid var(--paper); }
.mini__i { display: block; flex: 1; min-width: 0; }
.mini__i h3 { font-size: 0.86rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini__i small { color: var(--ink-3); font-size: 0.76rem; }
.mini__p { font-weight: 700; font-size: 0.9rem; flex: none; color: var(--ink); letter-spacing: -0.02em; }

.steps { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; font-size: 0.83rem; font-weight: 500; color: var(--ink-3); }
.steps li { display: flex; align-items: center; gap: 0.45rem; }
.steps li + li::before { content: ""; width: 26px; height: 1px; background: var(--ring-2); margin-right: 0.35rem; }
.steps .n { width: 24px; height: 24px; border-radius: 50%; background: var(--card); border: 1px solid var(--ring); color: var(--ink-3); display: grid; place-items: center; font-size: 0.74rem; }
.steps [aria-current] { color: var(--ink); }
.steps [aria-current] .n { background: var(--ink); border-color: var(--ink); color: #fff; }
.steps .done { color: var(--ink-2); }
.steps .done .n { background: var(--paper-2); border-color: var(--ring-2); color: var(--ink); }

.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1rem; align-items: start; }
.panel { background: var(--paper); border: 1px solid var(--ring); border-radius: var(--r-lg); padding: 1.5rem; }
.panel + .panel { margin-top: 0.85rem; }
.panel > h2, .panel > h3 { font-size: 1.05rem; margin-bottom: 1.15rem; display: flex; align-items: center; gap: 0.6rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--ring); }
.panel > h2 .n, .panel > h3 .n { width: 25px; height: 25px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 0.76rem; font-weight: 600; flex: none; }

.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.85rem; }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 0.85rem; }

.picks { display: grid; gap: 0.55rem; }
.pick { display: block; border: 1px solid var(--ring-2); border-radius: var(--r); padding: 0.95rem 1.15rem; cursor: pointer; transition: border-color 0.18s, background-color 0.18s; }
.pick:hover { border-color: var(--ink-3); }
.pick.is-on { border-color: var(--ink); background: var(--paper-2); }
.pick__top { display: flex; align-items: center; gap: 0.7rem; }
.pick__top > span { flex: 1; font-size: 0.9rem; color: var(--ink); }
.pick__top b { font-size: 0.89rem; font-weight: 600; }
.pick input[type="radio"] { appearance: none; width: 18px; height: 18px; flex: none; border: 1px solid var(--ring-2); border-radius: 50%; background: var(--paper); }
.pick.is-on input[type="radio"] { border-color: var(--ink); box-shadow: inset 0 0 0 5px var(--ink); }
.pick__body { display: none; padding-top: 0.9rem; }
.pick.is-on .pick__body { display: block; }
.pick__body p { font-size: 0.87rem; }
.paylogos { display: flex; gap: 0.3rem; }
.paylogos i { width: 32px; height: 20px; border-radius: 4px; background: var(--card); border: 1px solid var(--ring); display: block; }

/* ==========================================================================
   13 · FOOTER
   ========================================================================== */
.foot { background: var(--dark); color: rgba(255, 255, 255, 0.6); margin-top: clamp(3rem, 6vw, 5rem); }
.foot__cols { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr) 1.2fr; gap: 2rem; padding-block: clamp(2.5rem, 5vw, 4rem); }
.foot__brand img { height: 26px; margin-bottom: 1rem; }
.foot__brand p { font-size: 0.87rem; max-width: 34ch; }
.foot__social { display: flex; gap: 0.45rem; margin-top: 1.25rem; }
.foot__social a { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.8); transition: all 0.2s; }
.foot__social a:hover { background: #fff; border-color: #fff; color: var(--ink); }
.foot__col h3 { color: #fff; font-size: 0.87rem; margin-bottom: 0.9rem; }
.foot__col ul { display: grid; gap: 0.5rem; }
.foot__col a { font-size: 0.87rem; }
.foot__col a:hover { color: #fff; }
.foot__contact { display: grid; gap: 0.75rem; font-size: 0.87rem; }
.foot__contact a, .foot__contact p { display: flex; gap: 0.55rem; align-items: flex-start; }
.foot__contact svg { color: rgba(255, 255, 255, 0.5); flex: none; margin-top: 3px; }
.foot__contact b { display: block; color: #fff; }

.foot__bar { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-block: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.8rem; }
.foot__legal { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.foot__legal a:hover { color: #fff; }
.foot__pay { display: flex; gap: 0.35rem; }
.foot__pay i { width: 38px; height: 24px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); display: block; }

/* ==========================================================================
   14 · KATMANLAR
   ========================================================================== */
.scrim { position: fixed; inset: 0; z-index: 80; background: rgba(10, 10, 10, 0.4); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
.scrim.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed; top: 0; right: 0; z-index: 90;
  height: 100dvh; width: min(400px, 92vw);
  background: var(--paper); border-left: 1px solid var(--ring);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.36s var(--ease);
}
.drawer.is-open { transform: translateX(0); }
.drawer--l { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--ring); transform: translateX(-100%); }
.drawer--l.is-open { transform: translateX(0); }
.drawer__h { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.35rem; border-bottom: 1px solid var(--ring); }
.drawer__h h2 { font-size: 1rem; }
.drawer__b { flex: 1; overflow-y: auto; padding: 1.35rem; }
.drawer__f { padding: 1.25rem 1.35rem; border-top: 1px solid var(--ring); }

.dnav { display: grid; gap: 0.2rem; }
.dnav > li > a, .dnav__t {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 0.85rem 1rem; border: 0; border-radius: 10px;
  background: transparent; text-align: left; cursor: pointer;
  font-size: 0.96rem; font-weight: 500; color: var(--ink);
  transition: background-color 0.18s;
}
.dnav > li > a:hover, .dnav__t:hover { background: var(--card); }
.dnav__sub { display: grid; gap: 0.1rem; padding: 0.35rem 0 0.65rem 1rem; }
.dnav__sub a { display: block; padding: 0.5rem 0.8rem; border-radius: 8px; font-size: 0.88rem; color: var(--ink-2); }
.dnav__sub a:hover { background: var(--card); color: var(--ink); }
.dnav__t[aria-expanded="false"] + .dnav__sub { display: none; }
.dnav__t .chev { transition: transform 0.22s; }
.dnav__t[aria-expanded="true"] .chev { transform: rotate(180deg); }

.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 120;
  transform: translate(-50%, 180%);
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.35rem; border-radius: var(--pill);
  background: var(--ink); color: #fff;
  font-size: 0.88rem; max-width: calc(100vw - 2rem);
  transition: transform 0.36s var(--ease);
}
.toast.is-open { transform: translate(-50%, 0); }
.toast svg { color: #fff; flex: none; }

/* ==========================================================================
   15 · HAREKET
   ========================================================================== */
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

.tabs__p:not([hidden]) { animation: rise 0.35s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   16 · RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .catboxes { gap: 0.85rem; }
  .figures, .tiers, .refs { grid-template-columns: repeat(2, 1fr); }
  .foot__cols { grid-template-columns: 1fr 1fr 1fr; }
  .pdp { grid-template-columns: minmax(0, 1fr) 340px; }
}

@media (max-width: 1000px) {
  .menu, .ticker__links { display: none; }
  .ico--burger { display: inline-flex; }
  .menu { margin-inline: 0; }
  .nav__acts { margin-inline-start: auto; }
  .custom__in, .news, .tracks, .promo-2 { grid-template-columns: 1fr; }
  .catboxes { grid-template-columns: 1fr; }
  .custom__f { min-height: 240px; }
  .custom__f::after { background: linear-gradient(to bottom, var(--dark) 0%, transparent 45%); }
  .quotes { grid-template-columns: 1fr; }
  .shop { grid-template-columns: 1fr; }
  .filters { position: static; display: none; }
  .filters.is-open { display: grid; }
  .pdp { grid-template-columns: 1fr; }
  .buy { position: static; }
  .cart, .checkout, .brief { grid-template-columns: 1fr; }
  .summary, .brief__a { position: static; }
  .steps5 { grid-template-columns: repeat(3, 1fr); }
  .rate-sum { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .grid, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slide__c { max-width: 100%; }
  .figures, .steps5, .tiers, .refs { grid-template-columns: 1fr 1fr; }
  .lines__h { display: none; }
  /* Sepet satırı: üstte ürün, altta adet + tutar; silme düğmesi sağ üstte */
  .line {
    position: relative;
    grid-template-columns: auto 1fr;
    grid-template-areas: "p p" "q pr";
    gap: 0.9rem 1rem; padding: 1rem 1.1rem;
  }
  .line__p { grid-area: p; align-items: flex-start; padding-right: 2.9rem; }
  .line h3 { font-size: 0.9rem; line-height: 1.3; }
  .line__v { font-size: 0.76rem; }
  .line .qty { grid-area: q; justify-self: start; }
  .line__pr { grid-area: pr; text-align: right; align-self: center; }
  .line__x { position: absolute; top: 0.75rem; right: 0.85rem; }
  .g2, .g3 { grid-template-columns: 1fr; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
  .matrix thead { display: none; }
  .matrix tbody th, .matrix td { display: block; width: auto; border-bottom: 0; padding-block: 0.25rem; }
  .matrix tbody tr { display: block; border-bottom: 1px solid var(--ring); padding-block: 0.85rem; }
  /* Dar ekranda yalnızca bulunulan adımın etiketi yazar */
  .steps li:not([aria-current]) span:not(.n) { display: none; }
  .steps { font-size: 0.78rem; }
  .steps li + li::before { width: 18px; }
  /* Ödeme başlığı: SSL notu dar ekranda gizlenir */
  .cossl { display: none !important; }
  .cobck { margin-inline-start: auto !important; }
  .buybar__i span { display: none; }
}

@media (max-width: 480px) {
  .figures, .steps5, .tiers, .refs, .foot__cols { grid-template-columns: 1fr; }
}

@media print {
  .nav, .ticker, .foot, .drawer, .scrim, .hero, .buybar { display: none !important; }
  body { background: #fff; }
}

@media (max-width: 900px) {
  .slide img { height: clamp(360px, 68vw, 520px); }
}
@media (max-width: 520px) {
  .hero__dots { width: 40vw; }
}

/* Hero'su olmayan sayfalarda yüzen navbar için üst boşluk */


/* Hero'daki navbar görselin üstünde durduğu için sayfa ona göre kayar */
.hero + * { position: relative; }

/* ==========================================================================
   EK · Sayfa başlık bölümü — koyu bant
   Header zaten şeffaf/beyaz olduğu için başlık bandı koyu zeminde durur;
   sayfanın üstünü net bir blokla açar.
   ========================================================================== */
.phead {
  position: relative;
  background: var(--dark);
  color: rgba(255, 255, 255, 0.72);
  overflow: hidden;
  padding-top: clamp(1.25rem, 3vw, 2rem);
}
.phead::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 46vw; aspect-ratio: 1; max-width: 620px;
  right: -10%; top: -46%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(36, 145, 235, 0.28) 0%, transparent 64%);
}
.phead > .stage { position: relative; z-index: 1; }
.phead h1, .phead h2 { color: #fff; }
.phead .grad { background: linear-gradient(92deg, #6ea8ff 0%, #9fc9f7 55%, #cfe4fb 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.phead .lead { color: rgba(255, 255, 255, 0.75); }
.phead .crumbs { padding-block: 0 1rem; color: rgba(255, 255, 255, 0.5); }
.phead .crumbs a:hover { color: #fff; }
.phead .crumbs [aria-current] { color: rgba(255, 255, 255, 0.9); }
.phead .crumbs li + li::before { color: rgba(255, 255, 255, 0.25); }

.phead__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  align-items: end;
  gap: clamp(1rem, 4vw, 3.5rem);
  padding-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
}
.phead__top h1 { max-width: 14ch; }
.phead__top .lead { padding-bottom: 0.4rem; }

/* Alt çizgili kategori sekmeleri */
.phead__bar { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.ptabs { display: flex; flex-wrap: wrap; gap: clamp(0.9rem, 2.5vw, 2rem); }
.ptabs a {
  position: relative;
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  padding-block: 1rem;
  font-size: 0.94rem; font-weight: 500; color: rgba(255, 255, 255, 0.62);
  transition: color 0.2s var(--ease);
}
.ptabs a b { font-size: 0.78rem; font-weight: 500; opacity: 0.7; }
.ptabs a::after {
  content: ""; position: absolute; left: 0; right: 0; top: -1px;
  height: 2px; background: var(--blue-l);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.28s var(--ease);
}
.ptabs a:hover { color: #fff; }
.ptabs a:hover::after { transform: scaleX(1); }
.ptabs a[aria-current="page"] { color: #fff; font-weight: 600; }
.ptabs a[aria-current="page"]::after { transform: scaleX(1); }
.ptabs a[aria-current="page"] b { opacity: 1; }

@media (max-width: 860px) {
  .phead__top { grid-template-columns: 1fr; align-items: start; }
  .phead__top h1 { max-width: none; }
  .ptabs { gap: 1.15rem; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .ptabs::-webkit-scrollbar { display: none; }
  .ptabs a { white-space: nowrap; }
}

/* ==========================================================================
   EK · Ürün bilgisi — açıklama + teknik föy (sekme yerine iki sütun)
   ========================================================================== */
.pinfo {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.pinfo__main > h3 { margin-bottom: 0.85rem; }
.pinfo__main .prose { max-width: none; }

/* Kutu içeriği — sıkışık liste */
.kit {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--ring); border: 1px solid var(--ring); border-radius: var(--r);
  overflow: hidden; margin-top: 1.35rem;
}
.kit li { background: var(--paper); padding: 0.8rem 0.95rem; }
.kit b { display: block; font-size: 0.88rem; font-weight: 600; color: var(--ink); letter-spacing: -0.015em; }
.kit span { display: block; font-size: 0.79rem; color: var(--ink-3); margin-top: 1px; }

/* Teknik föy — sıkışık, yapışkan */
.pinfo__spec {
  position: sticky; top: calc(74px + 16px);
  background: var(--paper); border: 1px solid var(--ring); border-radius: var(--r-lg);
  padding: 1.25rem 1.35rem 1.35rem;
}
.pinfo__spec h3 { margin-bottom: 0.85rem; }
.sheet { display: grid; }
.sheet > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-block: 0.55rem;
  border-bottom: 1px solid var(--ring);
  font-size: 0.87rem;
}
.sheet > div:last-child { border-bottom: 0; padding-bottom: 0; }
.sheet dt { color: var(--ink-3); }
.sheet dd { color: var(--ink); font-weight: 500; text-align: right; }

@media (max-width: 900px) {
  .pinfo { grid-template-columns: 1fr; }
  .pinfo__spec { position: static; }
  .kit { grid-template-columns: 1fr; }
}

/* ==========================================================================
   EK · Hakkımızda & İletişim sayfaları
   ========================================================================== */
/* İkonlu madde listesi (değerler, adres bilgileri) */
.track-list { display: grid; gap: 0.85rem; }
.track-list li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.88rem; }
.track-list li > svg { color: var(--blue); flex: none; margin-top: 2px; }
.track-list b { display: block; font-size: 0.9rem; font-weight: 600; color: var(--ink); letter-spacing: -0.015em; }
.track-list span { color: var(--ink-2); }
.track-list b + * { margin-top: 1px; }

/* İletişim kanal kartları */
.contact-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.contact-cards li {
  background: var(--paper); border: 1px solid var(--ring); border-radius: var(--r-lg);
  padding: 1.35rem; display: grid; gap: 0.3rem; align-content: start;
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.contact-cards li:hover { border-color: var(--ring-2); transform: translateY(-3px); }
.contact-cards .ic {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  background: var(--paper-2); color: var(--ink); margin-bottom: 0.55rem;
}
.contact-cards h3 { font-size: 0.82rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.contact-cards p { font-size: 1.02rem; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
.contact-cards p a:hover { color: var(--blue-d); }
.contact-cards small { font-size: 0.79rem; color: var(--ink-3); }

/* Adres / harita bloğu */
.mapbox {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 1rem; align-items: stretch;
}
.mapbox__info {
  background: var(--paper-2); border: 1px solid var(--ring); border-radius: var(--r-lg);
  padding: 1.5rem; display: grid; gap: 1.25rem; align-content: start; justify-items: start;
}
.mapbox__map {
  border: 1px solid var(--ring); border-radius: var(--r-lg);
  overflow: hidden; background: var(--card);
  min-height: 360px;
}
.mapbox__map img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
.mapbox__map iframe { display: block; width: 100%; height: 100%; min-height: 360px; border: 0; }

@media (max-width: 1000px) {
  .contact-cards { grid-template-columns: 1fr 1fr; }
  .mapbox { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .contact-cards { grid-template-columns: 1fr; }
}

/* ==========================================================================
   MOBİL — 900px altı için ayrıntılı düzenleme
   Mobil öncelikli: dokunma hedefleri ≥44px, tek sütun akış, yatay taşma yok.
   ========================================================================== */
@media (max-width: 900px) {
  :root { --pad: 1.15rem; --gap-sec: clamp(2.5rem, 8vw, 3.75rem); }

  /* iOS'ta odaklanınca yakınlaşmayı önlemek için 16px taban */
  .input, .select, .textarea, .file, .qty input { font-size: 16px; }

  /* Navigasyon */
  :root { --nav-total: 63px; }   /* 62px + 1px çerçeve */
  .nav__in { height: 62px; }
  .brand img { height: 21px; }
  .ico { width: 42px; height: 42px; }

  /* Hero */
  .slide img { height: clamp(340px, 58vw + 200px, 460px); }
  .hero__pad { padding: 4px; gap: 0; }
  .hero__nav { width: 38px; height: 38px; }
  .hero__count { font-size: 0.74rem; padding-inline: 0.45rem; }
  .hero__dots { width: 38vw; gap: 0.3rem; }

  /* Şerit */
  .marq__g span { padding: 0.85rem 1.35rem; font-size: 0.82rem; }

  /* Bölüm başlıkları */
  .head { margin-bottom: 1.5rem; }
  .head__row { gap: 1rem; }

  /* Ürün ızgarası ve rayları */
  .grid, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .rail { grid-auto-columns: minmax(62vw, 240px); gap: 0.75rem; }
  .card__b { padding: 0.85rem 0.9rem 1rem; }
  .card h3 { font-size: 0.9rem; }
  .card .btn { margin: 0 0.9rem 0.9rem; }
  .price__now { font-size: 1.08rem; }

  /* Kategori kutuları */
  .catbox__b { padding: 1.25rem; gap: 0.65rem; }

  /* Sayılar */
  .figures > li { padding: 1.15rem 1.25rem; }

  /* Ürün detay */
  .buy { gap: 0.9rem; }
  .buy__row { flex-wrap: wrap; }
  .buy__row .qty { flex: none; }
  .buy__row .btn { flex: 1 1 60%; }
  /* Küçük görseller tek satırda yatay kaydırma */
  .gal__t {
    display: flex; gap: 0.5rem;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .gal__t::-webkit-scrollbar { display: none; }
  .gal__t button { flex: 0 0 68px; scroll-snap-align: start; }
  .pinfo { gap: 1.5rem; }

  /* Sepet & ödeme */
  .line { padding: 0.9rem 1rem; }
  .line__f { width: 64px; }
  /* Dokunma hedefleri en az 44px */
  .qty--sm button { width: 40px; height: 40px; font-size: 1.05rem; }
  .qty--sm input { width: 40px; height: 40px; }
  .line__x { width: 38px; height: 38px; top: 0.6rem; right: 0.6rem; }
  .summary, .panel, .brief__a { padding: 1.15rem; }

  /* Mağaza araç çubuğu */
  .toolbar { gap: 0.6rem; }
  .toolbar__r { width: 100%; justify-content: space-between; }
  .toolbar .select { flex: 1; min-width: 0; }

  /* Footer */
  .foot__cols { gap: 1.75rem; padding-block: 2.25rem; }
  .foot__bar { flex-direction: column; align-items: flex-start; gap: 0.85rem; }

  /* Dokunma hedefleri */
  .mega__col a, .foot__col a, .dnav__sub a { padding-block: 0.55rem; }
  .crumbs { font-size: 0.78rem; }
}

@media (max-width: 560px) {
  /* Ürün ızgarası tek sütuna düşmesin — mobilde 2'li daha kullanışlı */
  .grid, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card__cat { font-size: 0.64rem; letter-spacing: 0.12em; }
  .card h3 { font-size: 0.86rem; }
  .card__rate { font-size: 0.72rem; }
  .card .btn { font-size: 0.78rem; padding-left: 0.85rem; gap: 0.4rem; }
  .card .btn::after { width: 26px; height: 26px; background-size: 12px 12px; }

  /* Başlık bandı */
  .phead__top { padding-bottom: 1.25rem; }
  .ptabs a { padding-block: 0.85rem; font-size: 0.88rem; }

  /* Ürün detay satın alma */
  .buy__row .btn { flex: 1 1 100%; }
  .buybar__in { gap: 0.6rem; padding-block: 0.55rem; }
  .buybar__f { width: 38px; height: 38px; }
  .buybar .btn { padding-left: 0.95rem; font-size: 0.8rem; }
  .buybar .btn::after { width: 28px; height: 28px; }

  /* Formlar */
  .coupon { flex-wrap: wrap; }
  .coupon .input { max-width: none; flex: 1 1 100%; }
  .cart-foot .btn { width: 100%; justify-content: space-between; }

  /* İletişim */
  .mapbox__map, .mapbox__map iframe { min-height: 280px; }
  .contact-cards li { padding: 1.15rem; }

  /* Footer */
  .foot__cols { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  .rail { grid-auto-columns: minmax(74vw, 190px); }
  .gal__t button { flex-basis: 62px; }
  .card .btn { font-size: 0.74rem; }
}
/* Çok dar ekranlarda tek sütun */
@media (max-width: 330px) {
  .grid, .grid--3 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   MOBİL MENÜ — yandan açılan çekmece içeriği
   ========================================================================== */
.drawer__b { display: grid; gap: 1.25rem; align-content: start; }

.dsearch { display: flex; gap: 0.4rem; }
.dsearch .input { flex: 1; }
.dsearch button {
  flex: none; width: 46px; border: 0; border-radius: var(--r-sm);
  background: var(--ink); color: #fff; display: grid; place-items: center; cursor: pointer;
}

.dnav > li > a, .dnav__t { min-height: 48px; }

.dquick {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
  padding-top: 1.15rem; border-top: 1px solid var(--ring);
}
.dquick a {
  display: flex; align-items: center; gap: 0.55rem;
  min-height: 46px; padding: 0.6rem 0.8rem;
  border: 1px solid var(--ring); border-radius: var(--r-sm);
  font-size: 0.86rem; font-weight: 500; color: var(--ink-2);
  transition: border-color 0.18s, color 0.18s;
}
.dquick a:hover { border-color: var(--ink); color: var(--ink); }
.dquick svg { color: var(--ink-3); flex: none; }

.dphone { margin-top: 0.7rem; text-align: center; }
.dphone a {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.9rem; font-weight: 600; color: var(--ink);
}
.dphone svg { color: var(--blue); }

@media (max-width: 380px) {
  .dquick { grid-template-columns: 1fr; }
}

/* ==========================================================================
   MOBİL — ızgara öğelerinin taşmasını engelle
   Grid öğelerinin otomatik asgari genişliği "auto" olduğu için içerik
   sütundan taşabiliyor; hepsini 0'a sabitliyoruz.
   ========================================================================== */
.shop > *, .pdp > *, .cart > *, .checkout > *, .brief > *,
.pinfo > *, .mapbox > *, .custom__in > *, .phead__top > *,
.grid > *, .catboxes > *, .figures > *, .quotes > *,
.contact-cards > *, .tracks > *, .steps5 > *, .tiers > *,
.refs > *, .promo-2 > *, .news > * { min-width: 0; }

/* Uzun kelime / kod taşmalarını kır */
.card h3, .line h3, .mini__i h3, .prose, .lead,
.buy__meta, .sheet dd, .contact-cards p { overflow-wrap: anywhere; }

/* ==========================================================
   EK · İletişim sayfası (mobil öncelikli)
   ========================================================== */

/* Kanal kartları — tamamı tıklanabilir */
.ccards { display: grid; gap: 0.7rem; grid-template-columns: 1fr; }
.ccard {
  position: relative; display: flex; gap: 0.9rem; align-items: flex-start;
  background: var(--paper); border: 1px solid var(--ring); border-radius: var(--r);
  padding: 1.05rem 1.15rem; transition: border-color 0.2s, background-color 0.2s;
}
.ccard:hover { border-color: var(--ring-2); background: var(--card); }
.ccard__ic {
  flex: none; width: 42px; height: 42px; border-radius: 13px;
  background: var(--blue-soft); color: var(--blue-d); display: grid; place-items: center;
}
.ccard__b { min-width: 0; }
.ccard h3 { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.3rem; }
.ccard__v { display: block; font-size: 0.98rem; font-weight: 700; letter-spacing: -0.025em; color: var(--ink); overflow-wrap: anywhere; }
a.ccard__v::after { content: ""; position: absolute; inset: 0; }
a.ccard__v:hover { color: var(--blue-d); }
.ccard small { display: block; font-size: 0.78rem; color: var(--ink-3); margin-top: 0.25rem; }

/* Form + atölye sütunu */
.cwrap { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: start; }

/* Atölye kartı */
.wshop { border: 1px solid var(--ring); border-radius: var(--r); overflow: hidden; background: var(--paper); }
.wshop__map { position: relative; display: block; aspect-ratio: 16 / 11; background: var(--card); }
.wshop__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.wshop__b { padding: 1.15rem; display: grid; gap: 1.05rem; }
.wlist { display: grid; gap: 0.8rem; font-size: 0.86rem; color: var(--ink-2); }
.wlist li { display: flex; gap: 0.65rem; align-items: flex-start; }
.wlist svg { flex: none; margin-top: 2px; color: var(--blue); }
.wlist b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 0.1rem; }
.wlist a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ring-2); }
.wlist a:hover { color: var(--blue-d); }

/* Çalışma saatleri */
.hours { display: grid; gap: 0; font-size: 0.85rem; border-top: 1px solid var(--ring); }
.hours div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--ring); }
.hours dt { color: var(--ink-2); }
.hours dd { font-weight: 600; color: var(--ink); }
.hours .off dd { color: var(--ink-3); font-weight: 500; }

/* SSS iki sütun */
.faq2 { display: grid; gap: 0 2.5rem; grid-template-columns: 1fr; }

@media (min-width: 620px) {
  .ccards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .faq2 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .ccards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.85rem; }
  .cwrap { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.5rem; }
  .wshop { position: sticky; top: calc(var(--nav-h) + 1rem); }
}

/* ==========================================================
   EK · WooCommerce uyum katmanı
   WooCommerce'in kendi işaretlemesi (shop_table, cart_item,
   form-row, wc_payment_methods…) mevcut tasarım diline bağlanır.
   ========================================================== */

.woocommerce .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.woocommerce-Price-amount bdi { white-space: nowrap; }
.woocommerce-notices-wrapper:empty { display: none; }

/* --- Sepet tablosu: satırlar kart olarak çizilir --- */
.woocommerce-cart-form { display: block; }
.shop_table.cart { display: block; width: 100%; border-collapse: collapse; }
.shop_table.cart thead { display: none; }
.shop_table.cart tbody { display: grid; gap: 0.6rem; }

.shop_table.cart tr.cart_item {
  position: relative; display: grid; align-items: center;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-areas: "thumb name" "qty subtotal";
  gap: 0.9rem 1rem;
  background: var(--paper); border: 1px solid var(--ring); border-radius: var(--r);
  padding: 1rem 1.1rem;
}
.shop_table.cart td { display: block; padding: 0; border: 0; }
.shop_table.cart .cart_item .product-thumbnail { grid-area: thumb; align-self: start; }
.shop_table.cart .cart_item .product-thumbnail img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; background: var(--card); display: block; }
.shop_table.cart .cart_item .product-name { grid-area: name; align-self: start; padding-right: 3.4rem; }
.shop_table.cart .cart_item .product-name > a { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.025em; color: var(--ink); }
.shop_table.cart .cart_item .product-name > a:hover { color: var(--blue-d); }
.shop_table.cart .cart_item .variation { display: flex; flex-wrap: wrap; gap: 0 0.3rem; margin: 0.25rem 0 0; font-size: 0.76rem; line-height: 1.5; color: var(--ink-3); }
.shop_table.cart .cart_item .variation dt { font-weight: 500; }
.shop_table.cart .cart_item .variation dd { margin: 0; }
.shop_table.cart .cart_item .variation dd::after { content: "·"; margin-left: 0.35rem; color: var(--ring-2); }
.shop_table.cart .cart_item .variation dd:last-of-type::after { content: none; }
.shop_table.cart .cart_item .variation p { margin: 0; display: inline; }
.shop_table.cart .cart_item .product-name .chip { margin-top: 0.45rem; }
.shop_table.cart td.product-price { display: none; }   /* dar ekranda ara toplam yeterli */
.shop_table.cart .cart_item .product-quantity { grid-area: qty; justify-self: start; }
.shop_table.cart .cart_item .product-subtotal { grid-area: subtotal; text-align: right; font-weight: 700; font-size: 1.04rem; letter-spacing: -0.03em; color: var(--ink); }
.shop_table.cart .cart_item .product-remove { position: absolute; top: 0.7rem; right: 0.8rem; }
.shop_table.cart .cart_item .remove {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--ring); border-radius: 50%;
  font-size: 1.15rem; line-height: 1; color: var(--ink-3);
  transition: border-color 0.18s, color 0.18s;
}
.shop_table.cart .cart_item .remove:hover { border-color: var(--coral); color: var(--coral); }

/* Sepet alt eylemleri */
.shop_table.cart td.actions {
  display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center;
  padding: 1rem 0 0; border: 0;
}
.shop_table.cart td.actions .coupon { display: flex; gap: 0.5rem; flex: 1 1 260px; min-width: 0; }
.shop_table.cart td.actions .coupon .input-text { flex: 1; min-width: 0; }
.shop_table.cart tbody tr:last-child { background: none; border: 0; padding: 0; display: block; }

/* --- Sepet toplamı --- */
.cart-collaterals { min-width: 0; }
.cart_totals {
  background: var(--paper-2); border: 1px solid var(--ring); border-radius: var(--r);
  padding: clamp(1.15rem, 3vw, 1.5rem);
}
.cart_totals > h2 { font-size: 1.02rem; letter-spacing: -0.03em; margin-bottom: 1rem; }
.cart_totals .shop_table { display: block; width: 100%; }
.cart_totals .shop_table tbody { display: grid; }
.cart_totals .shop_table tr { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; font-size: 0.88rem; }
.cart_totals .shop_table th { font-weight: 400; color: var(--ink-2); text-align: left; }
.cart_totals .shop_table td { text-align: right; font-weight: 600; color: var(--ink); }
.cart_totals .shop_table .free { color: var(--go); }
.cart_totals .order-total { margin-top: 0.5rem; padding-top: 0.85rem; border-top: 1px solid var(--ring-2); align-items: baseline; }
.cart_totals .order-total th { font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.cart_totals .order-total td strong { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.035em; }
.wc-proceed-to-checkout { margin-top: 1.1rem; }

/* --- Ödeme formu --- */
form.woocommerce-checkout .col2-set { display: grid; gap: 1rem; }
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 { font-size: 1.02rem; letter-spacing: -0.03em; margin-bottom: 1rem; }
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper { display: grid; grid-template-columns: 1fr; gap: 0.85rem 1rem; }
.form-row { display: block; margin: 0; min-width: 0; }
.form-row > label { display: block; font-size: 0.79rem; font-weight: 500; color: var(--ink-2); margin-bottom: 0.4rem; }
.form-row abbr.required { color: var(--coral); text-decoration: none; border: 0; }
.woocommerce-input-wrapper { display: block; }
.form-row .input-text,
.form-row select,
.form-row textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--ring-2); border-radius: 12px;
  padding: 0.72rem 0.9rem; transition: border-color 0.18s, box-shadow 0.18s;
}
.form-row textarea { min-height: 110px; resize: vertical; }
.form-row select {
  appearance: none; padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234b4b4b' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.95rem center;
}
.form-row .input-text:focus,
.form-row select:focus,
.form-row textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.form-row.woocommerce-invalid .input-text { border-color: var(--coral); }
.form-row-wide, .notes, .form-row.place-order { grid-column: 1 / -1; }
.woocommerce-form__label-for-checkbox { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.85rem; color: var(--ink-2); cursor: pointer; }
.woocommerce-form__input-checkbox { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--blue); }

#ship-to-different-address { margin: 0; }
#ship-to-different-address label { display: flex; gap: 0.6rem; align-items: center; font-size: 0.92rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.shipping_address { margin-top: 1rem; }

/* Sipariş özeti tablosu */
.woocommerce-checkout-review-order-table { display: block; width: 100%; }
.woocommerce-checkout-review-order-table thead { display: none; }
.woocommerce-checkout-review-order-table tbody { display: grid; gap: 0.85rem; padding-bottom: 0.95rem; border-bottom: 1px solid var(--ring); }
.woocommerce-checkout-review-order-table tbody tr { display: flex; gap: 0.85rem; align-items: center; }
.woocommerce-checkout-review-order-table td { display: block; padding: 0; border: 0; }
.woocommerce-checkout-review-order-table .product-name { flex: 1; min-width: 0; font-size: 0.87rem; color: var(--ink-2); }
.woocommerce-checkout-review-order-table .product-name img { width: 46px; height: 46px; border-radius: 9px; object-fit: cover; float: left; margin-right: 0.7rem; }
.woocommerce-checkout-review-order-table .product-name > span:first-of-type { display: block; font-weight: 600; color: var(--ink); }
.woocommerce-checkout-review-order-table .product-quantity { color: var(--ink-3); font-weight: 500; }
.woocommerce-checkout-review-order-table .product-total { font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.woocommerce-checkout-review-order-table tfoot { display: grid; padding-top: 0.85rem; }
.woocommerce-checkout-review-order-table tfoot tr { display: flex; justify-content: space-between; gap: 1rem; padding: 0.42rem 0; font-size: 0.88rem; }
.woocommerce-checkout-review-order-table tfoot th { font-weight: 400; color: var(--ink-2); text-align: left; }
.woocommerce-checkout-review-order-table tfoot td { text-align: right; font-weight: 600; }
.woocommerce-checkout-review-order-table tfoot .order-total { margin-top: 0.45rem; padding-top: 0.8rem; border-top: 1px solid var(--ring-2); align-items: baseline; }
.woocommerce-checkout-review-order-table tfoot .order-total th { font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.woocommerce-checkout-review-order-table tfoot .order-total td strong { font-size: 1.3rem; letter-spacing: -0.035em; }

/* Ödeme yöntemleri */
#payment { margin-top: 1.15rem; }
.wc_payment_methods { display: grid; gap: 0.55rem; }
/* WooCommerce'te radyo düğmesi etiketin kardeşidir; satır düzenini grid kurar */
.wc_payment_method {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; column-gap: 0.7rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--ring); border-radius: 14px; background: var(--paper);
}
.wc_payment_method > label { display: flex; gap: 0.7rem; align-items: center; min-height: 26px; font-size: 0.9rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.wc_payment_method .input-radio { width: 18px; height: 18px; flex: none; margin: 0; accent-color: var(--blue); }
.wc_payment_method:has(.input-radio:checked) { border-color: var(--blue); background: var(--blue-soft); }
.payment_box { display: none; grid-column: 2; padding: 0.7rem 0 0; font-size: 0.83rem; color: var(--ink-2); }
.wc_payment_method:has(.input-radio:checked) .payment_box { display: block; }
.payment_box p { margin: 0; }
.woocommerce-terms-and-conditions-wrapper { margin: 1.1rem 0; }
.form-row.place-order { display: grid; gap: 0.7rem; }
.woocommerce-privacy-policy-text { font-size: 0.79rem; color: var(--ink-3); }

@media (min-width: 620px) {
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr 1fr; }
  .form-row-wide, .form-row-full { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  /* Geniş ekranda sepet satırı gerçek tablo düzenine yaklaşır */
  .shop_table.cart tr.cart_item {
    grid-template-columns: 72px minmax(0, 1fr) 110px 132px 118px;
    grid-template-areas: "thumb name price qty subtotal";
    padding: 1rem 3.2rem 1rem 1.15rem;
  }
  .cart_item .product-name { padding-right: 0; }
  .shop_table.cart td.product-price { display: block; grid-area: price; color: var(--ink-2); font-size: 0.9rem; }
  .cart_item .product-quantity { grid-area: qty; justify-self: center; }
  .cart_item .product-remove { top: 50%; right: 1rem; transform: translateY(-50%); }
  .shop_table.cart thead {
    display: grid; grid-template-columns: 72px minmax(0, 1fr) 110px 132px 118px;
    gap: 1rem; padding: 0 3.2rem 0.5rem 1.15rem;
    font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
  }
  .shop_table.cart thead tr { display: contents; }
  .shop_table.cart thead th { text-align: left; font-weight: inherit; }
  .shop_table.cart thead .product-quantity { text-align: center; }
  .shop_table.cart thead .product-subtotal { text-align: right; }
  .shop_table.cart thead .product-remove { display: none; }
  .cart_item .product-subtotal { text-align: right; }
}

/* Çekmece başlığındaki kapatma düğmesi — beyaz zeminde görünür olmalı */
.drawer .ico { color: var(--ink); filter: none; }
.drawer .ico:hover { background: var(--card); }
.drawer__h .ico { border: 1px solid var(--ring); }

/* --- Ödeme sayfası düzeni --- */
/* Yalnızca form; WooCommerce aynı sınıfı <body>'ye de ekliyor. */
form.woocommerce-checkout { display: grid; gap: 1rem; align-items: start; }
.panel > h2.wc-h,
.wc-review > h2 { font-size: 1.05rem; margin-bottom: 1.15rem; display: flex; align-items: center; gap: 0.6rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--ring); }
.panel > h2.wc-h .n { width: 25px; height: 25px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 0.76rem; font-weight: 600; flex: none; }
.woocommerce-billing-fields, .woocommerce-shipping-fields,
.woocommerce-shipping-methods, .woocommerce-additional-fields { min-width: 0; }
.col-1 > .panel + .panel, .col2-set > .col-2 > .panel { margin-top: 0.85rem; }

.shipping_methods { display: grid; gap: 0.55rem; }
.shipping-method { display: flex; align-items: center; gap: 0.7rem; border: 1px solid var(--ring); border-radius: 14px; padding: 0.85rem 1rem; min-height: 48px; }
.shipping-method:has(.input-radio:checked) { border-color: var(--blue); background: var(--blue-soft); }
.shipping-method .input-radio { width: 18px; height: 18px; flex: none; accent-color: var(--blue); }
.shipping-method label { display: flex; flex: 1; gap: 1rem; justify-content: space-between; align-items: center; font-size: 0.88rem; font-weight: 500; color: var(--ink); cursor: pointer; }
.shipping-method .free { color: var(--go); font-weight: 700; }

/*
 * Sipariş özeti — sayfanın geri kalanıyla aynı açık kart dili.
 * Önceden koyu (var(--dark)) bir bloktu; formun yanında ağır duruyordu ve
 * üzerine binen otuz kadar beyaz-metin kuralı düzeni takip etmeyi zorlaştırıyordu.
 */
.wc-review {
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--ring); border-radius: var(--r-lg);
  padding: clamp(1.25rem, 3vw, 1.6rem); min-width: 0;
}
.wc-review > h2 { color: var(--ink); border-bottom-color: var(--ring); }

/* Ürün satırı: görsel · (ad + seçenek) · adet · fiyat
   Eskiden görsel float:left idi; "× 1" seçenek satırının altına kayıyordu. */
.wc-review .woocommerce-checkout-review-order-table tbody tr {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem; align-items: center;
}
.wc-review .product-name {
  display: grid; grid-template-columns: 46px minmax(0, 1fr);
  column-gap: 0.75rem; row-gap: 0.2rem; align-items: center;
  font-size: 0.87rem; color: var(--ink-2);
}
.wc-review .product-name img {
  float: none; margin: 0;
  grid-column: 1; grid-row: 1 / -1; align-self: center;
  width: 46px; height: 46px; border-radius: 9px; object-fit: cover;
  background: var(--card);
}
.wc-review .product-name > span:first-of-type {
  grid-column: 2; font-weight: 600; color: var(--ink); line-height: 1.35;
}
.wc-review .wc-item-meta {
  display: block; grid-column: 2;
  font-size: 0.78rem; color: var(--ink-3); line-height: 1.4;
}
.wc-review .product-quantity {
  grid-column: 2; justify-self: start;
  font-size: 0.74rem; font-weight: 600; color: var(--ink-3);
  background: var(--card); border: 1px solid var(--ring);
  border-radius: var(--pill); padding: 0.08rem 0.5rem;
}
.wc-review .product-total {
  align-self: center; font-weight: 700; color: var(--ink); white-space: nowrap;
}

.wc-review .free { color: var(--go); font-weight: 700; }
.wc-review .paylogos { display: inline-flex; gap: 0.25rem; margin-inline-start: auto; }
.wc-review .paylogos i { width: 26px; height: 17px; border-radius: 3px; background: var(--ring-2); display: block; }
.wc-review #payment h3.wc-h { font-size: 0.96rem; margin-bottom: 0.85rem; padding-bottom: 0; border: 0; }

/* Gönderim satırı tam genişlik: üç kargo seçeneği "Ara toplam" gibi tek satırlık
   bir hücreye sıkışmasın, seçilebilir kutular hâlinde alt alta dursun. */
.wc-review tfoot .woocommerce-shipping-totals { display: block; padding: 0.7rem 0; }
.wc-review tfoot .woocommerce-shipping-totals th {
  display: block; margin-bottom: 0.5rem;
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
}
.wc-review tfoot .woocommerce-shipping-totals td { display: block; text-align: left; font-weight: 400; }
.wc-review #shipping_method li {
  align-items: center; gap: 0.6rem;
  border: 1px solid var(--ring); border-radius: 12px; padding: 0.6rem 0.75rem;
  transition: border-color 0.16s, background-color 0.16s;
}
.wc-review #shipping_method li:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); }
.wc-review #shipping_method input[type="radio"] { margin-top: 0; }
.wc-review #shipping_method label { display: flex; gap: 0.6rem; justify-content: space-between; align-items: center; }

/* Toplam bloğu ile ürün listesi arasında nefes payı */
.wc-review .woocommerce-checkout-review-order-table tbody { gap: 1rem; padding-bottom: 1.1rem; }
.wc-review .woocommerce-checkout-review-order-table tfoot { padding-top: 0.7rem; }

@media (min-width: 1000px) {
  form.woocommerce-checkout { grid-template-columns: minmax(0, 1fr) 380px; gap: 1.25rem; }
  .wc-review { position: sticky; top: calc(var(--nav-h) + 1rem); }
}

/* ==========================================================
   EK · Hesabım (WooCommerce myaccount)
   ========================================================== */

.woocommerce-MyAccount { display: grid; gap: 1rem; align-items: start; }
.woocommerce-MyAccount > * { min-width: 0; }
.woocommerce-MyAccount-navigation { min-width: 0; }

/* Yan menü */
/* Dar ekranda menü yatay kaydırılan şerit olur, dikey yer kaplamaz */
.woocommerce-MyAccount-navigation ul {
  display: flex; gap: 0.45rem;
  overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad) 2px;
}
.woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
.woocommerce-MyAccount-navigation-link { flex: none; scroll-snap-align: start; }
.woocommerce-MyAccount-navigation-link a { white-space: nowrap; }
.woocommerce-MyAccount-navigation-link a {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.8rem 1rem; min-height: 46px;
  border: 1px solid var(--ring); border-radius: 14px;
  background: var(--paper); color: var(--ink-2);
  font-size: 0.89rem; font-weight: 500;
  transition: border-color 0.18s, background-color 0.18s, color 0.18s;
}
.woocommerce-MyAccount-navigation-link a svg { flex: none; color: var(--ink-3); }
.woocommerce-MyAccount-navigation-link a:hover { border-color: var(--ring-2); background: var(--card); color: var(--ink); }
.woocommerce-MyAccount-navigation-link.is-active a { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-d); font-weight: 600; }
.woocommerce-MyAccount-navigation-link.is-active a svg { color: var(--blue); }
.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--ink-3); }

/* İçerik */
.woocommerce-MyAccount-content { min-width: 0; display: grid; gap: 0.85rem; }
.acc-block { background: var(--paper); border: 1px solid var(--ring); border-radius: var(--r-lg); padding: clamp(1.15rem, 3vw, 1.5rem); scroll-margin-top: calc(var(--nav-h) + 1rem); }
.acc-h { font-size: 1.05rem; letter-spacing: -0.03em; margin-bottom: 1.15rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--ring); }

/* Panel rakamları */
.acc-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.acc-stats > li { background: var(--paper-2); border: 1px solid var(--ring); border-radius: 14px; padding: 0.95rem 1rem; }
.acc-stats__n { display: block; font-size: 1.55rem; font-weight: 700; letter-spacing: -0.04em; color: var(--ink); }
.acc-stats__l { display: block; font-size: 0.78rem; color: var(--ink-3); margin-top: 0.15rem; }
.acc-note {
  display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; justify-content: space-between;
  margin-top: 0.85rem; padding: 1rem 1.15rem;
  background: var(--blue-soft); border: 1px solid #cfe3f8; border-radius: 14px;
  font-size: 0.87rem; color: var(--ink-2);
}
.acc-note p { margin: 0; min-width: 0; }

/* Sipariş tablosu */
.woocommerce-orders-table { display: block; width: 100%; }
.woocommerce-orders-table thead { display: none; }
.woocommerce-orders-table tbody { display: grid; gap: 0.6rem; }
.woocommerce-orders-table__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 1rem; align-items: center;
  border: 1px solid var(--ring); border-radius: 14px; padding: 0.95rem 1.05rem;
}
.woocommerce-orders-table__cell { display: block; padding: 0; border: 0; font-size: 0.85rem; color: var(--ink-2); }
.woocommerce-orders-table__cell-order-number a { display: inline-block; font-weight: 700; font-size: 0.88rem; white-space: nowrap; color: var(--ink); letter-spacing: -0.02em; }
.woocommerce-orders-table__cell-order-number a:hover { color: var(--blue-d); }
.woocommerce-orders-table__cell-order-date { justify-self: end; color: var(--ink-3); font-size: 0.79rem; }
.woocommerce-orders-table__cell-order-total { font-weight: 600; color: var(--ink); }
.woocommerce-orders-table__cell-order-actions { justify-self: end; }
.woocommerce-orders-table__cell-order-status { grid-column: 1 / -1; }
.order-status {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.24rem 0.65rem; border-radius: var(--pill);
  font-size: 0.75rem; font-weight: 600; letter-spacing: -0.01em;
}
.order-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.order-status--completed { background: #e8f6ee; color: var(--go-d); }
.order-status--processing { background: var(--blue-soft); color: var(--blue-d); }
.order-status--cancelled { background: #fdecea; color: var(--coral); }

/* Özel üretim talepleri */
.acc-briefs { display: grid; gap: 0.6rem; }
.acc-briefs > li {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem;
  border: 1px solid var(--ring); border-radius: 14px; padding: 0.95rem 1.05rem;
}
.acc-briefs h3 { font-size: 0.94rem; letter-spacing: -0.025em; }
.acc-briefs p { font-size: 0.79rem; margin-top: 0.2rem; }
.acc-briefs .order-status { justify-self: start; }
.acc-briefs .btn { justify-self: start; }

/* Adresler */
.woocommerce-Addresses { display: grid; gap: 0.7rem; }
.woocommerce-Address { border: 1px solid var(--ring); border-radius: 14px; padding: 1.05rem 1.15rem; background: var(--paper-2); }
.woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.7rem; }
.woocommerce-Address-title h3 { font-size: 0.92rem; letter-spacing: -0.02em; }
.woocommerce-Address-title .edit { font-size: 0.8rem; font-weight: 500; color: var(--blue-d); text-decoration: underline; text-underline-offset: 3px; }
.woocommerce-Address address { font-style: normal; font-size: 0.86rem; line-height: 1.75; color: var(--ink-2); }

/* Giriş / kayıt */
#customer_login { display: grid; gap: 0.85rem; }
#customer_login .panel { min-width: 0; }
.woocommerce-LostPassword { margin-top: 0.85rem; font-size: 0.83rem; }
.woocommerce-LostPassword a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.woocommerce-LostPassword a:hover { color: var(--blue-d); }
/* Izgara sarmalayıcı içindeki satırlar aralığı grid gap'ten alır */
.woocommerce-form > .form-row + .form-row { margin-top: 0.85rem; }
.woocommerce-form input.input-text { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--paper); border: 1px solid var(--ring-2); border-radius: 12px; padding: 0.72rem 0.9rem; transition: border-color 0.18s, box-shadow 0.18s; }
.woocommerce-form input.input-text:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.woocommerce-form__label-for-checkbox input { width: 18px; height: 18px; flex: none; accent-color: var(--blue); }

@media (min-width: 620px) {
  .acc-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .acc-briefs > li { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 1rem; }
  .acc-briefs .btn { justify-self: end; }
  .woocommerce-Addresses { grid-template-columns: 1fr 1fr; }
  #customer_login { grid-template-columns: 1fr 1fr; gap: 1rem; }
}
@media (min-width: 900px) {
  .woocommerce-MyAccount { grid-template-columns: 260px minmax(0, 1fr); gap: 1.25rem; }
  .woocommerce-MyAccount-navigation { position: sticky; top: calc(var(--nav-h) + 1rem); }
  .woocommerce-MyAccount-navigation ul { display: grid; gap: 0.3rem; overflow: visible; margin: 0; padding: 0; }
  .woocommerce-MyAccount-navigation-link a { white-space: normal; }
  .woocommerce-orders-table__row { grid-template-columns: minmax(0, 1.1fr) 1fr 1fr 1fr auto; }
  .woocommerce-orders-table__cell-order-status { grid-column: auto; }
  .woocommerce-orders-table__cell-order-date { justify-self: start; }
  .woocommerce-orders-table thead {
    display: grid; grid-template-columns: minmax(0, 1.1fr) 1fr 1fr 1fr auto;
    gap: 1rem; padding: 0 1.05rem 0.5rem;
    font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
  }
  .woocommerce-orders-table thead tr { display: contents; }
  .woocommerce-orders-table thead th { text-align: left; font-weight: inherit; }
}

/* ==========================================================
   EK · Hesap alt sayfaları, sipariş onayı, boş sepet
   ========================================================== */

/* Panel kısayolları */
.acc-links { display: grid; gap: 0.55rem; }
.acc-links a {
  display: block; padding: 0.95rem 1.05rem;
  border: 1px solid var(--ring); border-radius: 14px;
  transition: border-color 0.18s, background-color 0.18s;
}
.acc-links a:hover { border-color: var(--ring-2); background: var(--card); }
.acc-links b { display: block; font-size: 0.93rem; letter-spacing: -0.02em; color: var(--ink); }
.acc-links span { display: block; font-size: 0.81rem; color: var(--ink-3); margin-top: 0.15rem; }
.woocommerce-MyAccount-greeting { font-size: 0.88rem; color: var(--ink-2); margin-bottom: 1.15rem; }
.woocommerce-MyAccount-greeting a { color: var(--blue-d); text-decoration: underline; text-underline-offset: 3px; }

.acc-fieldset { border: 0; padding: 1.15rem 0 0; margin-top: 1.15rem; border-top: 1px solid var(--ring); }
.acc-fieldset legend { padding: 0 0 0.85rem; font-size: 0.92rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }

/* Sipariş sayfalama */
.woocommerce-pagination { display: flex; gap: 0.4rem; margin-top: 1.15rem; }
.woocommerce-pagination .button {
  min-width: 40px; min-height: 40px; padding: 0 0.85rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ring); border-radius: var(--pill);
  font-size: 0.85rem; font-weight: 500; color: var(--ink-2);
}
.woocommerce-pagination .button:hover { border-color: var(--ring-2); background: var(--card); color: var(--ink); }
.woocommerce-pagination .is-current { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Sipariş detayı */
.woocommerce-order-details__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-size: 0.87rem; color: var(--ink-2); margin-bottom: 1.15rem; }
.order-track { display: grid; gap: 0; margin-bottom: 1.5rem; }
.order-track li { position: relative; padding: 0 0 1.15rem 1.75rem; font-size: 0.86rem; color: var(--ink-3); }
.order-track li::before { content: ""; position: absolute; left: 0; top: 3px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--ring-2); background: var(--paper); }
.order-track li::after { content: ""; position: absolute; left: 5px; top: 14px; bottom: 0; width: 1px; background: var(--ring); }
.order-track li:last-child { padding-bottom: 0; }
.order-track li:last-child::after { content: none; }
.order-track .is-done::before { border-color: var(--go); background: var(--go); }
.order-track .is-now::before { border-color: var(--blue); background: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.order-track b { display: block; color: var(--ink); font-weight: 600; font-size: 0.9rem; }
.order-track .is-now b { color: var(--blue-d); }

/* Sipariş detay tablosu (view-order · thankyou) */
.order_details { display: block; width: 100%; }
.order_details thead { display: none; }
.order_details tbody { display: grid; gap: 0.85rem; padding-bottom: 0.95rem; border-bottom: 1px solid var(--ring); }
.order_details tbody tr { display: flex; gap: 1rem; justify-content: space-between; align-items: flex-start; }
.order_details td { display: block; padding: 0; border: 0; }
.order_details .product-name { font-size: 0.9rem; min-width: 0; }
.order_details .product-name > a { font-weight: 600; color: var(--ink); }
.order_details .product-name > a:hover { color: var(--blue-d); }
.order_details .product-quantity { color: var(--ink-3); font-weight: 500; }
.order_details .product-total { font-weight: 700; white-space: nowrap; letter-spacing: -0.02em; }
.order_details .variation { display: flex; flex-wrap: wrap; gap: 0 0.3rem; margin: 0.25rem 0 0; font-size: 0.76rem; color: var(--ink-3); }
.order_details .variation dd { margin: 0; }
.order_details .variation dd::after { content: "·"; margin-left: 0.35rem; color: var(--ring-2); }
.order_details .variation dd:last-of-type::after { content: none; }
.order_details .variation p { display: inline; margin: 0; }
.order_details tfoot { display: grid; padding-top: 0.85rem; }
.order_details tfoot tr { display: flex; justify-content: space-between; gap: 1rem; padding: 0.42rem 0; font-size: 0.88rem; }
.order_details tfoot th { font-weight: 400; color: var(--ink-2); text-align: left; }
.order_details tfoot td { text-align: right; font-weight: 600; color: var(--ink); }
.order_details tfoot .free { color: var(--go); }
.order_details tfoot .order-total { margin-top: 0.45rem; padding-top: 0.8rem; border-top: 1px solid var(--ring-2); align-items: baseline; }
.order_details tfoot .order-total th { font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.order_details tfoot .order-total td strong { font-size: 1.3rem; letter-spacing: -0.035em; }

/* Sipariş alındı */
.thanks { text-align: center; padding: clamp(1.5rem, 5vw, 3rem) 0 clamp(1.5rem, 4vw, 2.5rem); }
.thanks__ic { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #e8f6ee; color: var(--go-d); margin-bottom: 1.15rem; }
.thanks h1 { margin-bottom: 0.75rem; }
.thanks p { max-width: 52ch; margin: 0 auto; color: var(--ink-2); }
.woocommerce-order-overview {
  display: grid; grid-template-columns: 1fr; gap: 0;
  background: var(--paper-2); border: 1px solid var(--ring); border-radius: var(--r-lg);
  padding: 0.4rem 1.15rem; margin-bottom: 0.85rem;
}
.woocommerce-order-overview > li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--ring); font-size: 0.87rem; }
.woocommerce-order-overview > li:last-child { border-bottom: 0; }
.woocommerce-order-overview span { color: var(--ink-3); }
.woocommerce-order-overview strong { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }

/* Boş sepet */
.cart-empty-wrap { text-align: center; padding: clamp(2rem, 6vw, 4rem) 0; border: 1px dashed var(--ring-2); border-radius: var(--r-lg); background: var(--paper-2); }
.cart-empty__ic { display: inline-grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: var(--paper); border: 1px solid var(--ring); color: var(--ink-3); margin-bottom: 1.15rem; }
.cart-empty { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.025em; color: var(--ink); margin-bottom: 1.25rem; }

/* Dar formlar (şifre sıfırlama, sipariş takibi) */
.narrow-form { max-width: 520px; margin-inline: auto; }
.narrow-form .form-row + .form-row { margin-top: 0.85rem; }
.narrow-form label { display: block; font-size: 0.79rem; font-weight: 500; color: var(--ink-2); margin-bottom: 0.4rem; }
.narrow-form .input-text { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--paper); border: 1px solid var(--ring-2); border-radius: 12px; padding: 0.72rem 0.9rem; transition: border-color 0.18s, box-shadow 0.18s; }
.narrow-form .input-text:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }

@media (min-width: 620px) {
  .woocommerce-order-overview { grid-template-columns: 1fr 1fr; column-gap: 2rem; padding: 0.4rem 1.35rem; }
}
@media (min-width: 900px) {
  .woocommerce-order-overview { grid-template-columns: repeat(3, 1fr); column-gap: 2.5rem; }
}

/* ==========================================================
   EK · Giriş / Kayıt (iki panelli kimlik düzeni)
   ========================================================== */

.auth { display: grid; grid-template-columns: 1fr; align-items: stretch; }
.auth__form { display: flex; align-items: center; justify-content: center; padding: clamp(2rem, 7vw, 4.5rem) var(--pad); }
.auth__in { width: 100%; max-width: 440px; }
.auth__in .crumbs { margin-bottom: 1.5rem; }
.auth__in h1 { letter-spacing: -0.045em; margin-bottom: 0.6rem; }
.auth__lead { font-size: 0.92rem; color: var(--ink-2); margin-bottom: 1.5rem; }

/* Giriş ⇄ Üye ol geçişi */
.auth__tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  background: var(--paper-2); border: 1px solid var(--ring); border-radius: var(--pill);
  padding: 3px; margin-bottom: 1.75rem;
}
.auth__tabs a {
  display: flex; align-items: center; justify-content: center;
  min-height: 42px; border-radius: var(--pill);
  font-size: 0.89rem; font-weight: 600; color: var(--ink-3);
  transition: background-color 0.2s, color 0.2s;
}
.auth__tabs a:hover { color: var(--ink); }
.auth__tabs a[aria-current="page"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }

/* Şifre göster/gizle */
.password-input { position: relative; display: block; }
.password-input .input-text { padding-right: 3rem; }
.show-password-input {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--ink-3); cursor: pointer; transition: background-color 0.18s, color 0.18s;
}
.show-password-input:hover { background: var(--card); color: var(--ink); }
.show-password-input .off { display: none; }
.show-password-input[aria-pressed="true"] .on { display: none; }
.show-password-input[aria-pressed="true"] .off { display: block; }

.auth__meta { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; justify-content: space-between; margin-top: 1rem; }
.auth__meta a { font-size: 0.83rem; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ring-2); }
.auth__meta a:hover { color: var(--blue-d); }
.auth__submit { margin-top: 1.5rem; }
.auth__alt { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--ring); font-size: 0.88rem; color: var(--ink-2); text-align: center; }
.auth__alt a { color: var(--blue-d); font-weight: 600; }
.auth__legal { margin-top: 1rem; font-size: 0.78rem; color: var(--ink-3); }
.auth__legal a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }

/* Güç göstergesi */
.pw-hint { margin-top: 0.45rem; font-size: 0.76rem; color: var(--ink-3); }

/* Sağdaki tanıtım paneli */
.auth__side { position: relative; display: none; overflow: hidden; background: var(--dark); color: #fff; isolation: isolate; }
.auth__side img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.72; z-index: 0; }
.auth__side::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(165deg, rgba(10,10,10,0.15) 0%, rgba(10,10,10,0.72) 46%, rgba(10,10,10,0.95) 88%); }
.auth__side-in { position: relative; z-index: 2; align-self: end; padding: clamp(2rem, 4vw, 3.5rem); max-width: 520px; }
.auth__side .eyebrow { color: rgba(255, 255, 255, 0.66); }
.auth__side .eyebrow::before { background: var(--blue-l); }
.auth__side h2 { font-size: clamp(1.6rem, 2.4vw, 2.15rem); letter-spacing: -0.045em; color: #fff; margin: 0.85rem 0 1.35rem; }
.auth__perks { display: grid; gap: 0.8rem; margin-bottom: 2rem; }
.auth__perks li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.9rem; color: rgba(255, 255, 255, 0.78); }
.auth__perks svg { flex: none; margin-top: 3px; color: var(--blue-l); }
.auth__perks b { display: block; color: #fff; font-weight: 600; margin-bottom: 0.1rem; }
.auth__quote { padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.auth__quote p { font-size: 0.95rem; line-height: 1.6; color: rgba(255, 255, 255, 0.86); margin-bottom: 0.7rem; }
.auth__quote footer { font-size: 0.8rem; color: rgba(255, 255, 255, 0.5); }

@media (min-width: 900px) {
  .auth { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100vh - var(--nav-h)); }
  .auth__side { display: grid; }
}
@media (min-width: 1200px) {
  .auth { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

/* ==========================================================
   EK · Genel sayfa şablonu (page.php) — uzun metin içerik
   ========================================================== */

.page-tpl { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: start; }

/* İçindekiler */
.toc {
  background: var(--paper-2); border: 1px solid var(--ring); border-radius: var(--r-lg);
  padding: 1.25rem 1.35rem; min-width: 0;
}
.toc h2 { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.9rem; }
.toc ol { display: grid; gap: 0.1rem; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a {
  display: flex; gap: 0.6rem; padding: 0.45rem 0;
  font-size: 0.86rem; color: var(--ink-2); transition: color 0.16s;
}
.toc a::before { content: counter(toc) "."; flex: none; width: 1.35rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.toc a:hover { color: var(--blue-d); }

/* Metin gövdesi */
.entry-content { min-width: 0; max-width: 74ch; }
.entry-content > * + * { margin-top: 1.05rem; }

/*
 * İçerikte kalan h1'ler bölüm başlığı gibi görünsün. page.php bunları h2'ye
 * indiriyor; bu kural, filtreden geçmeyen içerikler (kısa kod, eklenti çıktısı)
 * için güvenlik ağı — aksi hâlde global h1 kuralıyla 63px basılırlar.
 */
.entry-content h1,
.entry-content h2 {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem); letter-spacing: -0.035em;
  margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--ring);
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}
.entry-content > h1:first-child,
.entry-content > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.entry-content h3 { font-size: 1.02rem; letter-spacing: -0.025em; margin-top: 1.75rem; }
.entry-content p, .entry-content li { font-size: 0.95rem; line-height: 1.75; color: var(--ink-2); }
.entry-content strong, .entry-content b { color: var(--ink); font-weight: 600; }
.entry-content a { color: var(--blue-d); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #bcd9f5; }
.entry-content a:hover { text-decoration-color: currentColor; }
.entry-content ul, .entry-content ol { display: grid; gap: 0.55rem; padding-left: 1.3rem; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li::marker { color: var(--ink-3); }
.entry-content li > ul { margin-top: 0.55rem; }
.entry-content hr { border: 0; border-top: 1px solid var(--ring); margin: 2rem 0; }
.entry-content blockquote {
  padding: 1.05rem 1.25rem; border-left: 3px solid var(--blue);
  background: var(--blue-soft); border-radius: 0 12px 12px 0;
}
.entry-content blockquote p { color: var(--ink-2); margin: 0; }
.entry-content .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.entry-content table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 0.88rem; }
.entry-content th, .entry-content td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--ring); vertical-align: top; }
.entry-content thead th { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.entry-content tbody th { font-weight: 600; color: var(--ink); }
.entry-content td { color: var(--ink-2); }

/* Yayın bilgisi */
.entry-meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center;
  padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--ring);
  font-size: 0.83rem; color: var(--ink-3);
}
.entry-meta b { color: var(--ink-2); font-weight: 600; }

/* Sayfa sonu iletişim kutusu */
.entry-cta {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  margin-top: 2.5rem; padding: 1.25rem 1.35rem;
  background: var(--paper-2); border: 1px solid var(--ring); border-radius: var(--r-lg);
}
.entry-cta p { margin: 0; font-size: 0.89rem; color: var(--ink-2); min-width: 0; }
.entry-cta b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 0.15rem; }

@media (min-width: 1000px) {
  .page-tpl { grid-template-columns: 260px minmax(0, 1fr); gap: 2.5rem; }
  .toc { position: sticky; top: calc(var(--nav-h) + 1rem); }

  /*
   * İçindekiler listesi yoksa iki sütunlu ızgara kurulmamalı — aksi hâlde
   * .entry-content ilk sütuna, yani 260px'lik yan sütuna düşüp sıkışıyor.
   * page.php içindekiler basmadığında .page-tpl--solo ekliyor; :only-child
   * kuralı da şablon dışından gelen durumlar için güvenlik ağı.
   */
  .page-tpl--solo { grid-template-columns: minmax(0, 1fr); }
  .page-tpl > .entry-content:only-child { grid-column: 1 / -1; }
}

/* ==========================================================
   EK · Özel Tasarım — kurumsal düzen
   ========================================================== */

/* Başlık bandı altındaki rakam şeridi */
.phead__facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--r-lg);
  overflow: hidden;
}
.phead__facts > li { background: var(--dark); padding: 1rem 1.15rem; }
.phead__facts b { display: block; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.035em; color: #fff; }
.phead__facts span { display: block; font-size: 0.78rem; color: rgba(255, 255, 255, 0.55); margin-top: 0.1rem; }

/* Kurumsal satış temsilcisi kutusu */
.repcard {
  display: flex; gap: 0.85rem; align-items: flex-start;
  margin: 0.25rem 0; padding: 1.05rem 1.15rem;
  background: var(--paper); border: 1px solid var(--ring); border-radius: 14px;
}
.repcard__ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--blue-soft); color: var(--blue-d); }
.repcard > div { min-width: 0; }
.repcard b { display: block; color: var(--ink); font-size: 0.9rem; font-weight: 600; letter-spacing: -0.02em; }
.repcard .dim { display: block; font-size: 0.78rem; color: var(--ink-3); margin: 0.15rem 0 0.6rem; }
.repcard a { display: block; font-size: 0.88rem; font-weight: 600; color: var(--blue-d); overflow-wrap: anywhere; }
.repcard a:hover { text-decoration: underline; text-underline-offset: 3px; }
.repcard a + a { margin-top: 0.15rem; }

/* Mobil yapışkan teklif çubuğu */
.quotebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.7rem var(--pad) calc(0.7rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96); backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--ring);
}
.quotebar b { display: block; font-size: 0.88rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.quotebar span { display: block; font-size: 0.76rem; color: var(--ink-3); }
.quotebar .btn { flex: none; }

@media (min-width: 620px) {
  .phead__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .quotebar { display: flex; }
  body:has(.quotebar) .foot { padding-bottom: 5.5rem; }
}

/*
 * Yan sepette satır silme düğmesi.
 *
 * min-width: 0 şart. .drawer__b bir ızgara; içindeki .minis ızgara öğesi olarak
 * min-width:auto taşır, yani min-content genişliğinin altına inemez. Ürün
 * başlığı white-space:nowrap olduğu için min-content = başlığın tam genişliği
 * oluyordu; dar ekranda sütun çekmeceden geniş kalıp satırı taşırıyor, fiyat ve
 * silme düğmesi görüş alanının dışında kalıyordu (.mini__i üzerindeki
 * min-width:0 yetmiyor — o yalnızca esnek kutu içinde daralmayı sağlıyor).
 */
.drawer__b > *,
.minis,
.mini { min-width: 0; }

.mini { position: relative; padding-right: 2rem; }
.mini__p { margin-inline-start: auto; }
.mini__x {
  position: absolute; top: 50%; right: 0; transform: translateY(-50%);
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--ink-3); cursor: pointer;
  transition: background-color 0.18s, color 0.18s;
}
.mini__x:hover { background: #fdeeec; color: var(--coral); }
@media (max-width: 560px) { .mini__x { width: 34px; height: 34px; } }


/* ==========================================================
   EK · Koyu yüzeylerde kalın metin rengi
   `strong, b { color: var(--ink) }` genel kuralı koyu zeminlerde
   siyah-üstüne-siyah üretiyordu; bu yüzeylerde renk devralınır.
   ========================================================== */
.phead b, .phead strong,
.sec--dark b, .sec--dark strong,
.dark-block b, .dark-block strong,
.band--ink b, .band--ink strong,
.auth__side b, .auth__side strong,
.foot b, .foot strong,
.drawer--dark b, .drawer--dark strong { color: inherit; }

/* Onay kutusu metnindeki bağlantılar — açık zeminde okunur mavi */
.check a { color: var(--blue-d); text-decoration: underline; text-underline-offset: 3px; }
.check a:hover { color: var(--blue); }
.band--ink .check a, .sec--dark .check a { color: var(--blue-l); }

/* Form sonucu bildirimi */
.formnote {
  padding: 0.9rem 1.15rem; margin-bottom: 1.15rem;
  border-radius: 14px; font-size: 0.9rem; font-weight: 500;
  border: 1px solid transparent;
}
.formnote--ok  { background: #e8f6ee; border-color: #c7e8d6; color: var(--go-d); }
.formnote--err { background: #fdeeec; border-color: #f7d5d0; color: var(--coral); }

/* ==========================================================
   EK · WooCommerce form sarmalayıcıları
   Sepete ekleme formu ve varyasyon sarmalayıcıları .buy
   ızgarasında görünmez olmalı; aksi hâlde seçenek grupları
   yan yana diziliyor.
   ========================================================== */
.buy form.cart,
.buy .variations_form,
.buy .woocommerce-variation-add-to-cart,
.buy .variations { display: contents; }
.buy .woocommerce-variation.single_variation { display: none; }
.buy .woocommerce-variation-price { display: none; }
.buy .stock { margin: 0; }
.buy p.stock.in-stock { display: none; }     /* stok bilgisi zaten .chip--stock ile veriliyor */
.buy .reset_variations { display: none; }

/* Varyasyonlu üründe seçili varyasyon fiyatı ana fiyat kutusunu günceller */
.buy .pricebox .now .woocommerce-Price-amount { font: inherit; letter-spacing: inherit; }

/* ==========================================================
   EK · WooCommerce bildirimleri ve kargo seçenekleri
   ========================================================== */

/* Bildirim kutuları */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center;
  padding: 0.95rem 1.15rem; margin: 0 0 1.15rem;
  border: 1px solid transparent; border-radius: 14px;
  font-size: 0.9rem; font-weight: 500; list-style: none;
}
.woocommerce-message { background: #e8f6ee; border-color: #c7e8d6; color: var(--go-d); }
.woocommerce-info    { background: var(--blue-soft); border-color: #cfe3f8; color: var(--blue-d); }
.woocommerce-error   { background: #fdeeec; border-color: #f7d5d0; color: var(--coral); display: block; }
.woocommerce-error li { list-style: none; }
.woocommerce-error li + li { margin-top: 0.35rem; }
.woocommerce-message .button,
.woocommerce-info .button {
  margin-inline-start: auto; padding: 0.4rem 0.9rem;
  border: 1px solid currentColor; border-radius: var(--pill);
  font-size: 0.82rem; font-weight: 600; color: inherit;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover { background: rgba(255, 255, 255, 0.55); }
.woocommerce-notices-wrapper:empty { display: none; }

/* Sepet toplamındaki kargo seçenekleri */
#shipping_method { display: grid; gap: 0.4rem; margin: 0; text-align: left; }
#shipping_method li { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.85rem; }
#shipping_method input[type="radio"] { width: 16px; height: 16px; flex: none; margin-top: 2px; accent-color: var(--blue); }
#shipping_method label { flex: 1; color: var(--ink-2); cursor: pointer; }
#shipping_method .amount { font-weight: 600; color: var(--ink); }
.woocommerce-shipping-destination { display: block; margin-top: 0.5rem; font-size: 0.78rem; color: var(--ink-3); }
.woocommerce-shipping-calculator { margin-top: 0.5rem; font-size: 0.8rem; }
.woocommerce-shipping-calculator .shipping-calculator-button { color: var(--blue-d); text-decoration: underline; text-underline-offset: 3px; }
.cart_totals .shop_table .woocommerce-shipping-totals { display: block; }
.cart_totals .shop_table .woocommerce-shipping-totals th { display: block; margin-bottom: 0.4rem; }
.cart_totals .shop_table .woocommerce-shipping-totals td { display: block; text-align: left; font-weight: 400; }
.includes_tax { display: block; font-size: 0.76rem; font-weight: 400; color: var(--ink-3); }


/* Miktar giriş kutusu WooCommerce sarmalayıcısı */
.quantity.qty { display: inline-flex; }

/* ==========================================================
   EK · WordPress yönetim çubuğu
   Oturum açık kullanıcıda üstte 32px'lik çubuk var; yapışkan
   header ve diğer yapışkan bloklar onun altına konumlanmalı.
   ========================================================== */

:root { --admin-bar: 0px; }

body.admin-bar { --admin-bar: 32px; }
body.admin-bar .nav { top: var(--admin-bar); }

/* Yapışkan yan bloklar da çubuğun altından başlasın */
body.admin-bar .filters,
body.admin-bar .buy,
body.admin-bar .brief__a,
body.admin-bar .summary,
body.admin-bar .wshop,
body.admin-bar .wc-review,
body.admin-bar .woocommerce-MyAccount-navigation,
body.admin-bar .toc { top: calc(var(--nav-h) + var(--admin-bar) + 1rem); }

/* 782px altında yönetim çubuğu 46px */
@media screen and (max-width: 782px) {
  body.admin-bar { --admin-bar: 46px; }
}
/* 600px altında çubuk sayfayla birlikte kayar; ofset gerekmez */
@media screen and (max-width: 600px) {
  body.admin-bar { --admin-bar: 0px; }
}

/* ==========================================================
   EK · Görsel büyütme (lightbox)
   Ürün sayfasında ana görsele tıklayınca açılır. İşaretlemeyi
   assets/js/main.js oluşturur; burada yalnızca görünüm var.
   ========================================================== */

.lb {
  position: fixed; inset: 0; z-index: 200;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: clamp(0.5rem, 2vw, 1.5rem);
  padding: clamp(1rem, 4vw, 2.5rem);
  background: rgba(10, 10, 10, 0.94);
  opacity: 0; transition: opacity 0.2s var(--ease);
}
.lb.is-on { opacity: 1; }
.lb[hidden] { display: none; }

.lb__f { grid-column: 2; display: grid; place-items: center; min-width: 0; height: 100%; margin: 0; }
.lb__img {
  max-width: 100%; max-height: calc(100vh - 6rem);
  width: auto; height: auto; object-fit: contain;
  border-radius: var(--r-lg); background: var(--card);
}

.lb__x, .lb__nav {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff; cursor: pointer; transition: background 0.16s, border-color 0.16s;
}
.lb__x:hover, .lb__nav:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.4); }
.lb__x:focus-visible, .lb__nav:focus-visible { outline: 2px solid var(--blue-l); outline-offset: 2px; }
.lb__x { position: absolute; top: clamp(0.75rem, 2vw, 1.5rem); right: clamp(0.75rem, 2vw, 1.5rem); }
.lb__nav--prev { grid-column: 1; }
.lb__nav--next { grid-column: 3; }
.lb__nav[hidden] { display: none; }

.lb__n {
  position: absolute; left: 50%; bottom: clamp(0.75rem, 2vw, 1.5rem); transform: translateX(-50%);
  font-size: 0.8rem; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.7);
  font-variant-numeric: tabular-nums;
}
.lb__n[hidden] { display: none; }

/* Mobilde oklar görselin altına iner, alan dar */
@media (max-width: 700px) {
  .lb { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .lb__f { grid-column: 1; }
  .lb__nav { grid-column: 1; grid-row: 2; }
  .lb__nav--prev { justify-self: start; }
  .lb__nav--next { justify-self: end; grid-row: 2; margin-top: -44px; }
  .lb__img { max-height: calc(100vh - 10rem); }
}

@media (prefers-reduced-motion: reduce) {
  .lb { transition: none; }
}

/* ==========================================================
   EK · WooCommerce AJAX sepete ekleme
   Ürün kartındaki düğme WooCommerce'in .ajax_add_to_cart
   sınıfını taşır; WooCommerce düğmeden sonra kendi
   "sepeti görüntüle" bağlantısını ekler ve düğmeye
   .loading / .added sınıflarını basar. Bunların hiçbirinin
   karşılığı yoktu, bağlantı kart düzeninden taşıyordu.
   ========================================================== */

/* WooCommerce'in eklediği "sepeti görüntüle" bağlantısı gizli: geri bildirim
   zaten toast + üstteki sepet sayacı + yan sepetle veriliyor. Stilsiz olduğu
   için ürün kartından taşıyordu. */
.added_to_cart { display: none; }

/* Yükleniyor durumu — düğme soluklaşır ve tıklanamaz olur */
.btn.loading,
.btn.is-loading { opacity: 0.6; pointer-events: none; }

.btn.loading::after,
.btn.is-loading::after {
  content: ""; flex: none;
  width: 14px; height: 14px; margin-left: 0.5rem;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: doruk-spin 0.6s linear infinite;
}

@keyframes doruk-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .btn.loading::after, .btn.is-loading::after { animation: none; }
}

/* ==========================================================
   EK · Kısa kodla eklenen iletişim formu
   İletişim sayfasında panele bir form kısa kodu girildiğinde
   (WPForms, Contact Form 7 …) çıktı .doruk-formsc kartına
   düşer. Eklentinin kendi görünümü yerine temanın form dili
   uygulanır.
   ========================================================== */

.doruk-formsc > :first-child { margin-top: 0; }
.doruk-formsc > :last-child { margin-bottom: 0; }

/* --- Sağlayıcıdan bağımsız temel (CF7, Forminator, düz HTML) --- */
.doruk-formsc input[type="text"],
.doruk-formsc input[type="email"],
.doruk-formsc input[type="tel"],
.doruk-formsc input[type="url"],
.doruk-formsc input[type="number"],
.doruk-formsc input[type="date"],
.doruk-formsc select,
.doruk-formsc textarea {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--ring-2);
  border-radius: var(--r-sm);
  font-family: inherit; font-size: 0.94rem; color: var(--ink);
  transition: border-color 0.18s, box-shadow 0.18s;
}
.doruk-formsc input::placeholder,
.doruk-formsc textarea::placeholder { color: var(--ink-3); }
.doruk-formsc input:focus,
.doruk-formsc select:focus,
.doruk-formsc textarea:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.07);
}
.doruk-formsc textarea { min-height: 118px; resize: vertical; }
.doruk-formsc input[type="checkbox"],
.doruk-formsc input[type="radio"] { width: auto; accent-color: var(--blue); }

/* --- WPForms (modern) ---
   Eklenti ayarlarını satır içi <style id="wpforms-css-vars-…"> ile
   #wpforms-<id> üzerine basıyor. Kimlik seçicisini yenmek için
   değişkenler !important ile veriliyor — tek temiz yol bu. */
.doruk-formsc .wpforms-container {
  --wpforms-field-border-radius: var(--r-sm) !important;
  --wpforms-field-border-color: var(--ring-2) !important;
  --wpforms-field-border-size: 1px !important;
  --wpforms-field-background-color: var(--paper) !important;
  --wpforms-field-text-color: var(--ink) !important;
  --wpforms-field-size-input-height: 50px !important;
  --wpforms-field-size-padding-h: 16px !important;
  --wpforms-field-size-font-size: 15px !important;
  --wpforms-field-size-line-height: 20px !important;
  --wpforms-field-size-input-spacing: 18px !important;
  --wpforms-field-size-sublabel-spacing: 6px !important;

  --wpforms-label-color: var(--ink-2) !important;
  --wpforms-label-size-font-size: 13px !important;
  --wpforms-label-size-line-height: 18px !important;
  --wpforms-label-sublabel-color: var(--ink-3) !important;
  --wpforms-label-size-sublabel-font-size: 12px !important;
  --wpforms-label-size-sublabel-line-height: 16px !important;
  --wpforms-label-error-color: var(--coral) !important;

  /* Modern sürüm NORMAL durumda -alt değişkenini okur; hover'ı kendi
     karartır. İkisi de marka mavisi olmalı, yoksa düğme sürekli koyu kalır. */
  --wpforms-button-background-color: var(--blue) !important;
  --wpforms-button-background-color-alt: var(--blue) !important;
  --wpforms-button-text-color: #ffffff !important;
  --wpforms-button-text-color-alt: #ffffff !important;
  --wpforms-button-border-radius: var(--pill) !important;
  --wpforms-button-border-size: 0 !important;
  --wpforms-button-size-height: 50px !important;
  --wpforms-button-size-font-size: 15px !important;
  --wpforms-button-size-margin-top: 4px !important;

  /* Kart zaten çerçeveli; eklentinin ikinci çerçevesi kalkar */
  --wpforms-container-padding: 0 !important;
  --wpforms-container-border-width: 0 !important;
  --wpforms-container-border-radius: 0 !important;
  --wpforms-background-color: transparent !important;

  margin: 0; padding: 0; font-family: inherit;
}

/* Eklenti girdileri "medium/small" sınıfıyla %60 / %25'e kısıyor —
   kart içinde alanlar tam genişlik olmalı. */
.doruk-formsc .wpforms-container input,
.doruk-formsc .wpforms-container select,
.doruk-formsc .wpforms-container textarea,
.doruk-formsc .wpforms-container .wpforms-field-row {
  max-width: 100% !important;
}
.doruk-formsc .wpforms-container input[type="checkbox"],
.doruk-formsc .wpforms-container input[type="radio"] { width: auto !important; }

.doruk-formsc .wpforms-field { padding: 0 0 var(--wpforms-field-size-input-spacing, 18px); }
.doruk-formsc .wpforms-field-label { font-weight: 500; letter-spacing: -0.005em; }
.doruk-formsc .wpforms-required-label { color: var(--coral); }

/* Ad-Soyad gibi iki parçalı satırlar.
   Eklenti satırı flex yapıp parçalara "%50 - 10px" genişlik ve float veriyor.
   Araya boşluk eklenince toplam satırı aşıp alt alta düşüyordu; bu yüzden
   sabit genişlik yerine parçalar flex ile eşit paylaşıyor. */
.doruk-formsc .wpforms-container .wpforms-field-row {
  display: flex !important; flex-wrap: nowrap; gap: 0.85rem; width: 100%;
}
.doruk-formsc .wpforms-container .wpforms-field-row > .wpforms-field-row-block {
  float: none !important; width: auto !important;
  flex: 1 1 0 !important; min-width: 0;
  margin: 0 !important; padding: 0 !important;
}

/* Hata ve onay mesajları */
.doruk-formsc .wpforms-error,
.doruk-formsc label.wpforms-error { font-size: 0.78rem; color: var(--coral); margin-top: 0.3rem; }
.doruk-formsc input.wpforms-error,
.doruk-formsc select.wpforms-error,
.doruk-formsc textarea.wpforms-error { border-color: var(--coral) !important; }
.doruk-formsc .wpforms-confirmation-container-full,
.doruk-formsc .wpcf7-response-output {
  margin: 0; padding: 0.9rem 1.1rem;
  background: var(--paper-2); border: 1px solid var(--ring); border-radius: var(--r-sm);
  font-size: 0.88rem; color: var(--ink-2);
}
.doruk-formsc .wpforms-confirmation-container-full p:last-child { margin-bottom: 0; }

/* --- Contact Form 7 karşılıkları --- */
.doruk-formsc .wpcf7-form-control-wrap { display: block; }
.doruk-formsc .wpcf7-not-valid-tip { font-size: 0.78rem; color: var(--coral); margin-top: 0.3rem; }
.doruk-formsc .wpcf7-submit,
.doruk-formsc button[type="submit"],
.doruk-formsc input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 50px; padding: 0 1.4rem;
  background: var(--blue); border: 0; border-radius: var(--pill);
  font-family: inherit; font-size: 0.95rem; font-weight: 600; color: #fff;
  cursor: pointer; transition: background-color 0.18s;
}
.doruk-formsc .wpcf7-submit:hover,
.doruk-formsc button[type="submit"]:hover,
.doruk-formsc input[type="submit"]:hover { background: var(--blue-d); }

/* --- Dar ekran --- */
@media (max-width: 700px) {
  /* Ad-Soyad gibi iki parçalı satırlar tek sütuna iner */
  .doruk-formsc .wpforms-container .wpforms-field-row { flex-wrap: wrap; gap: 0.75rem; }
  .doruk-formsc .wpforms-container .wpforms-field-row > .wpforms-field-row-block { flex: 1 1 100% !important; }

  /* WPForms'ta yan yana yerleştirilmiş alanlar (E-posta | Telefon) alt alta.
     Bu kural yalnızca dar ekranda geçerli — masaüstünde iki sütun korunur. */
  .doruk-formsc .wpforms-container .wpforms-one-half,
  .doruk-formsc .wpforms-container .wpforms-one-third,
  .doruk-formsc .wpforms-container .wpforms-two-thirds,
  .doruk-formsc .wpforms-container .wpforms-three-fourths,
  .doruk-formsc .wpforms-container .wpforms-one-fourth,
  .doruk-formsc .wpforms-container .wpforms-first,
  .doruk-formsc .wpforms-container .wpforms-field.wpforms-one-half {
    float: none !important; clear: both !important;
    margin-left: 0 !important; width: 100% !important;
  }

  .doruk-formsc .wpforms-container {
    --wpforms-field-size-font-size: 16px !important;  /* iOS'ta odakta yakınlaşmayı önler */
    --wpforms-field-size-input-height: 48px !important;
  }
}