/* =============================================================
   kebandan — Marka Stilleri
   Design System token'ları + WordPress/WooCommerce override'ları
   ============================================================= */

/* ---- Self-hosted fonts ---- */
@font-face {
  font-family: 'Monofur';
  src: url('../uploads/kebandan/fonts/Monofur-Regular.ttf') format('truetype');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Monofur';
  src: url('../uploads/kebandan/fonts/Monofur-Bold.ttf') format('truetype');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Redland';
  src: url('../uploads/kebandan/fonts/Redland.otf') format('opentype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Design tokens ---- */
:root {
  /* Brand anchors */
  --brand-green: #2C3F31;
  --brand-terracotta: #D23016;
  --brand-leaf: #80A142;
  --brand-cream: #F7F5EF;
  --brand-warm-gray: #8A8A82;

  /* Green scale */
  --green-50: #eef3ef;
  --green-100: #dde8e0;
  --green-200: #c2d3c7;
  --green-300: #9bb3a2;
  --green-400: #6e8f79;
  --green-500: #4f705b;
  --green-600: #3e5a48;
  --green-700: #344b3c;
  --green-800: #2C3F31;
  --green-900: #1d2b22;
  --green-950: #131d17;

  /* Leaf scale */
  --leaf-100: #e8efd6;
  --leaf-200: #d3e1b3;
  --leaf-300: #b7cd8b;
  --leaf-400: #9bbb63;
  --leaf-500: #80A142;
  --leaf-600: #688736;
  /* Açık zeminde METİN olarak kullanılacak yaprak yeşili. leaf-500/600
     dekoratif olarak iyi ama metinde 2.96/3.93 kontrast veriyor (AA altı).
     Yalnız yazı renginde kullanılır; ikon ve kenarlıklarda leaf-500 kalır. */
  --leaf-700: #5C7830;

  /* Terracotta scale */
  --terracotta-100: #f9ddd6;
  --terracotta-200: #f2b8aa;
  --terracotta-300: #e88c79;
  --terracotta-400: #e36b52;
  --terracotta-500: #D23016;
  --terracotta-600: #ba2a13;
  --terracotta-700: #95220f;

  /* Sand scale */
  --sand-50: #fbfaf4;
  --sand-100: #F7F5EF;
  --sand-200: #ece8dc;
  --sand-300: #ddd6c6;
  --sand-400: #c8bda5;
  --sand-500: #ab9f88;

  /* Ink */
  --ink-900: #23251f;

  /* Semantic */
  --color-bg: var(--sand-100);
  --surface-card: #ffffff;
  --surface-dark: var(--brand-green);
  --text-strong: var(--brand-green);
  --text-body: var(--ink-900);
  /* Metin için okunabilir gri. Marka grisi (--brand-warm-gray #8A8A82)
     açık zeminde 3.33 kontrast veriyordu ve WCAG AA'nın altında kalıyordu;
     metin rolü bu yüzden bir ton koyulaştırıldı (sand üzerinde 4.79).
     Marka grisi çizgi/ikon gibi dekoratif kullanımlarda olduğu gibi durur. */
  --text-muted: #726F68;
  /* Birkaç yerde yedek değeriyle kullanılıyordu ama tanımlı değildi;
     tanımsız kalması yedeği unutulan yerlerde kontrast düşürüyor. */
  --text-secondary: #5F5E5A;
  --text-on-dark: var(--sand-100);
  --color-border: var(--sand-300);
  --color-border-strong: var(--sand-400);
  --color-accent: var(--brand-terracotta);
  --color-link: var(--green-700);
  --color-link-hover: var(--brand-green);

  /* Shadows — green-tinted, soft */
  --shadow-sm: 0 2px 6px rgba(44,63,49,0.07);
  --shadow-md: 0 6px 18px rgba(44,63,49,0.09);
  --shadow-lg: 0 14px 34px rgba(44,63,49,0.12);
  --shadow-cta: 0 6px 16px rgba(210,48,22,0.26);
  --shadow-cta-hover: 0 10px 24px rgba(210,48,22,0.32);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Motion */
  --dur: 200ms;
  --dur-slow: 340ms;
  --ease-out: cubic-bezier(0.22,1,0.36,1);

  /* Fonts */
  --font-display: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-body: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-mono: 'Monofur', ui-monospace, monospace;
}

/* =============================================================
   GLOBAL OVERRIDES
   ============================================================= */

body,
.wp-site-blocks {
  background-color: var(--color-bg) !important;
  font-family: var(--font-body) !important;
  color: var(--text-body) !important;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Fixed header offset — tüm sayfalarda içerik header'ın altından başlasın */
.wp-site-blocks > .wp-block-template-part:first-child + * {
  margin-top: 82px !important;
}
/* Ana sayfa hero: header'ın arkasından full-bleed başlar */
.wp-site-blocks > .wp-block-template-part:first-child + .kebandan-hero,
.wp-site-blocks > .wp-block-template-part:first-child + *:has(.kebandan-hero) {
  margin-top: 0 !important;
}

/* Headings */
h1, h2, h3, h4,
.wp-block-post-title,
.woocommerce div.product .product_title,
.woocommerce-loop-product__title {
  font-family: var(--font-display) !important;
  color: var(--text-strong) !important;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.14;
}

h1, .wp-block-post-title { font-size: 2.25rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

p, li, td, th, dd, dt {
  font-family: var(--font-body) !important;
}

/* Links — green, never terracotta */
a:not(.kebandan-wa-btn):not(.wp-block-navigation-item__content):not(.kebandan-cart-icon) {
  color: var(--color-link);
  transition: color var(--dur) var(--ease-out);
}
a:not(.kebandan-wa-btn):not(.wp-block-navigation-item__content):not(.kebandan-cart-icon):hover {
  color: var(--color-link-hover);
}

/* ---- Global focus & outline reset ---- */
*:focus {
  outline: none !important;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(128,161,66,0.45);
  border-radius: 4px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  box-shadow: 0 0 0 2px rgba(128,161,66,0.45), inset 0 0 0 1px var(--leaf-400);
}
a, button, [tabindex] {
  -webkit-tap-highlight-color: transparent;
}

/* =============================================================
   HEADER
   ============================================================= */

.kebandan-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--brand-green);
  border-bottom: none;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
/* İç flex: yatayda ortala */
.kebandan-header .alignwide {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 14px 32px !important;
}

.kebandan-logo-link img {
  height: 38px !important;
  width: auto !important;
}
/* Logo — no focus ring (decorative home link) */
.kebandan-header .kebandan-logo-link a:focus-visible {
  box-shadow: none !important;
}

/* Navigation links — white on dark green */
.kebandan-header .wp-block-navigation a {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  color: rgba(255,255,255,0.85) !important;
  text-decoration: none !important;
  position: relative;
  padding: 6px 2px;
  transition: color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.kebandan-header .wp-block-navigation a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--leaf-400);
  border-radius: 1px;
  transition: width var(--dur-slow) var(--ease-out), left var(--dur-slow) var(--ease-out);
}
.kebandan-header .wp-block-navigation a:hover {
  color: #fff !important;
}
.kebandan-header .wp-block-navigation a:hover::after {
  width: 100%;
  left: 0;
}
.kebandan-header .wp-block-navigation a:active {
  color: var(--leaf-300) !important;
  transform: scale(0.95);
}

/* Mobile menu toggle — white icon */
.kebandan-header .wp-block-navigation__responsive-container-open {
  color: #fff !important;
}
/* Mobile overlay panel */
.kebandan-header .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--brand-green) !important;
  color: #fff !important;
}
.kebandan-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  color: #fff !important;
}

/* =============================================================
   FOOTER
   ============================================================= */

.kebandan-footer {
  background: var(--surface-dark) !important;
  color: var(--text-on-dark) !important;
  padding: 3rem 1.5rem 2rem !important;
}

.kebandan-footer a {
  color: #b9c4ba !important;
  text-decoration: none !important;
  font-size: 14px;
  transition: color var(--dur) var(--ease-out);
}
.kebandan-footer a:hover {
  color: #fff !important;
}
.kebandan-footer a:focus-visible {
  box-shadow: 0 0 0 2px rgba(185,196,186,0.5) !important;
}

.kebandan-footer-slogan {
  font-family: var(--font-mono) !important;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--leaf-400);
  margin: 14px 0 24px;
}

.kebandan-footer-logo {
  height: 48px;
  width: auto;
}

.kebandan-footer-bottom {
  border-top: 1px solid var(--green-700);
  padding-top: 20px;
  margin-top: 24px;
}

.kebandan-footer-bottom .location {
  font-size: 14px;
  color: var(--text-on-dark);
  margin-bottom: 4px;
}

.kebandan-footer-bottom .note {
  font-size: 13px;
  color: #b9c4ba;
  margin-bottom: 8px;
}

.kebandan-footer-bottom .copyright {
  font-size: 11px;
  color: #94B09D;
}

/* =============================================================
   HAKKIMIZDA — logo imzası
   ("— kebandan" metin imzasının yerini aldı)
   ============================================================= */

.kebandan-imza {
  margin-top: 36px !important;
  padding-top: 24px;
  border-top: 1px solid var(--color-border, #ddd6c6);
}

.kebandan-imza img {
  height: 30px;
  width: auto;
  opacity: 0.85;
  transition: opacity var(--dur, 200ms) var(--ease-out, ease);
}

.kebandan-imza img:hover { opacity: 1; }

@media (max-width: 600px) {
  .kebandan-imza { margin-top: 28px !important; padding-top: 20px; }
  .kebandan-imza img { height: 26px; }
}

/* =============================================================
   SIK SORULAN SORULAR (ürün sayfası akordiyonu)
   native <details>/<summary> — JavaScript yok
   ============================================================= */

.kebandan-sss {
  max-width: 780px;
  margin: 48px auto 8px;
  padding: 0 4px;
}

.kebandan-sss__baslik {
  font-family: var(--font-display, sans-serif) !important;
  font-size: 1.5rem !important;
  font-weight: 600;
  color: var(--text-strong, #2C3F31) !important;
  margin: 0 0 20px !important;
  text-align: center;
}

.kebandan-sss__liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kebandan-sss__oge {
  background: var(--surface-card, #fff);
  border: 1px solid var(--color-border, #ddd6c6);
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  transition: border-color var(--dur, 200ms) var(--ease-out, ease),
              box-shadow var(--dur, 200ms) var(--ease-out, ease);
}

.kebandan-sss__oge[open] {
  border-color: var(--leaf-300, #b7cd8b);
  box-shadow: var(--shadow-sm, 0 2px 6px rgba(44,63,49,0.07));
}

.kebandan-sss__soru {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display, sans-serif);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-strong, #2C3F31);
  transition: color var(--dur, 200ms) var(--ease-out, ease);
  -webkit-tap-highlight-color: transparent;
}

/* Tarayıcıların varsayılan üçgen işaretini kaldır */
.kebandan-sss__soru::-webkit-details-marker { display: none; }
.kebandan-sss__soru::marker { content: ''; }

.kebandan-sss__soru:hover { color: var(--green-600, #3e5a48); }

.kebandan-sss__ok {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--leaf-500, #80A142);
  transition: transform var(--dur-slow, 340ms) var(--ease-out, cubic-bezier(0.22,1,0.36,1));
}

.kebandan-sss__oge[open] .kebandan-sss__ok { transform: rotate(180deg); }

.kebandan-sss__cevap {
  padding: 0 18px 18px;
  font-family: var(--font-body, sans-serif);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-body, #23251f);
}

@media (max-width: 600px) {
  .kebandan-sss { margin-top: 36px; }
  .kebandan-sss__baslik { font-size: 1.3rem !important; }
  .kebandan-sss__soru { padding: 14px 15px; font-size: 15px; }
  .kebandan-sss__cevap { padding: 0 15px 15px; }
}

/* =============================================================
   ÜRETİM ROZETLERİ (ürün sayfalarında)
   İlaçsız · Yapay Gübresiz · El Yapımı
   ============================================================= */

.kebandan-rozetler {
  display: grid;
  /* 4 rozet var. Ürün özeti sütunu dar olduğu için tek sırada 4 sütun
     sıkışıyordu; 2×2 hem nefes alıyor hem başlıklar tek satırda kalıyor. */
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 18px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.kebandan-rozet {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 16px 10px 14px;
  background: var(--sand-50, #fbfaf4);
  border: 1px solid var(--color-border, #ddd6c6);
  border-radius: var(--radius-md, 12px);
  margin: 0 !important;
  list-style: none !important;
  transition: border-color var(--dur, 200ms) var(--ease-out, ease),
              background var(--dur, 200ms) var(--ease-out, ease);
}

.kebandan-rozet:hover {
  background: #fff;
  border-color: var(--leaf-300, #b7cd8b);
}

.kebandan-rozet__ikon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--leaf-100, #e8efd6);
  color: var(--green-600, #3e5a48);
  flex-shrink: 0;
}

.kebandan-rozet__ikon svg {
  width: 20px;
  height: 20px;
}

.kebandan-rozet__metin {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kebandan-rozet__baslik {
  font-family: var(--font-display, sans-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-strong, #2C3F31);
  letter-spacing: -0.01em;
}

.kebandan-rozet__alt {
  font-family: var(--font-body, sans-serif);
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--text-muted, #8A8A82);
}

/* Dar ekran: üç sütun sıkışmasın, tek sütunda yan yana dizilsin */
@media (max-width: 480px) {
  .kebandan-rozetler {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .kebandan-rozet {
    flex-direction: row;
    text-align: left;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
  }
  .kebandan-rozet__ikon {
    width: 34px;
    height: 34px;
  }
}

/* =============================================================
   WHATSAPP CTA BUTTON (ürün sayfalarında)
   ============================================================= */

.kebandan-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--brand-green, #2C3F31) !important;
  color: #fff !important;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display) !important;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(44, 63, 49, 0.3);
  transition: all var(--dur) var(--ease-out);
  line-height: 1;
}
.kebandan-wa-btn:hover {
  background: var(--green-700, #344b3c) !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(44, 63, 49, 0.4);
  transform: translateY(-1px);
}
.kebandan-wa-btn:active {
  transform: translateY(0) scale(0.98);
}
.kebandan-wa-btn svg {
  flex-shrink: 0;
}
.kebandan-wa-btn.is-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
  box-shadow: none;
  transform: none !important;
}

/* İkincil (küçük/az vurgulu) varyant — Sepete Ekle birincil olduğunda */
.kebandan-wa-btn--secondary {
  background: transparent !important;
  color: var(--text-secondary, #5F5E5A) !important;
  padding: 8px 4px;
  box-shadow: none;
  font-size: 14px;
  font-weight: 500;
  gap: 6px;
}
.kebandan-wa-btn--secondary svg {
  width: 16px;
  height: 16px;
}
.kebandan-wa-btn--secondary svg path {
  fill: var(--text-secondary, #5F5E5A);
}
.kebandan-wa-btn--secondary:hover {
  background: transparent !important;
  color: var(--brand-green, #2C3F31) !important;
  box-shadow: none;
  transform: none;
}
.kebandan-wa-btn--secondary:hover svg path {
  fill: var(--brand-green, #2C3F31);
}

/* ---- Site geneli sabit (floating) WhatsApp butonu ---- */
.kebandan-float-wa {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  /* WhatsApp teal (#128C7E ailesi). Açık yeşil #25D366 üzerinde
     beyaz metin/ikon 1.98 kontrast veriyordu; bu ton 4.75 ile WCAG AA'yı
     geçerken WhatsApp'ın resmi paletinde kalıyor. */
  background: #108176;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(16, 129, 118, 0.35);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  animation: kebandan-float-wa-pulse 2.6s ease-in-out infinite;
}
.kebandan-float-wa:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.55);
}
@keyframes kebandan-float-wa-pulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(16, 129, 118, 0.35), 0 0 0 0 rgba(37, 211, 102, 0.35); }
  50% { box-shadow: 0 4px 14px rgba(16, 129, 118, 0.35), 0 0 0 10px rgba(37, 211, 102, 0); }
}
@media (max-width: 480px) {
  .kebandan-float-wa {
    right: 14px;
    bottom: 14px;
    width: 50px;
    height: 50px;
  }
}
/* Ürün sayfasında sticky mobil sepete-ekle çubuğu varken WhatsApp butonu
   onunla çakışmasın diye biraz yukarı alınır (kebandan-technical.php). */
body.single-product .kebandan-float-wa {
  bottom: 84px;
}
@media (min-width: 769px) {
  body.single-product .kebandan-float-wa {
    bottom: 20px;
  }
}

/* =============================================================
   SEPET → ADRES AKIŞI (kebandan-cart-address.php)
   ============================================================= */
.kebandan-address-wrap {
  max-width: 640px;
  margin: 2.5rem auto 0;
  padding: 0 1rem;
}

/* Sepet toplamları (sidebar) kutusunun ÜSTÜNE JS ile taşındığındaki hâl —
   artık kendi başına ortalanmış bir bölüm değil, sidebar'ın ilk elemanı. */
.kebandan-address-wrap.kebandan-address-wrap--in-sidebar {
  max-width: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
.kebandan-address-wrap--in-sidebar .kebandan-address-trigger {
  text-align: left;
  padding: 0;
  border-top: none;
  border-bottom: none;
}
.kebandan-address-wrap--in-sidebar .kebandan-btn-primary {
  width: 100%;
  justify-content: center;
}
.kebandan-address-wrap--in-sidebar .kebandan-address-form {
  margin-bottom: 1.5rem;
  padding: 1.5rem;
}
.kebandan-address-trigger {
  text-align: center;
  padding: 1.5rem 0;
  border-top: 1px solid var(--color-border, #ddd6c6);
}

/* "Sıradaki adım / Son adım" ipucu — minimal, sakin bir nabız (pulse) ile
   dikkat çeker ama göz yormaz (yavaş döngü, düşük opaklık farkı). */
.kebandan-next-step-hint {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary, #5F5E5A);
}
.kebandan-pulse-dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--brand-terracotta, #D23016);
  animation: kebandan-dot-pulse 2.2s ease-in-out infinite;
}
.kebandan-pulse-dot--wa {
  background: var(--brand-green, #2C3F31);
}
@keyframes kebandan-dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.55; }
}

/* Butonun kendisi için yumuşak, yavaş bir "nefes alan" halka animasyonu */
.kebandan-btn-pulse {
  animation: kebandan-ring-pulse-terracotta 2.8s ease-in-out infinite;
}
@keyframes kebandan-ring-pulse-terracotta {
  0%, 100% { box-shadow: 0 0 0 0 rgba(210, 48, 22, 0.28); }
  50% { box-shadow: 0 0 0 9px rgba(210, 48, 22, 0); }
}
.kebandan-wa-btn.kebandan-btn-pulse {
  animation-name: kebandan-ring-pulse-green;
}
@keyframes kebandan-ring-pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(44, 63, 49, 0.28); }
  50% { box-shadow: 0 0 0 9px rgba(44, 63, 49, 0); }
}
/* Adres düzenlenirken pasif olan WhatsApp butonu sakin dursun, nabız atmasın */
.kebandan-wa-btn.is-disabled.kebandan-btn-pulse {
  animation: none;
}
.kebandan-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand-terracotta) !important;
  color: #fff !important;
  border: none;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display) !important;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none !important;
  transition: all 0.2s ease-out;
}
.kebandan-btn-primary:hover {
  background: #b3280f !important;
  transform: translateY(-1px);
}
.kebandan-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent !important;
  color: var(--brand-green) !important;
  border: 1px solid var(--color-border, #ddd6c6);
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display) !important;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.kebandan-address-form {
  background: var(--sand-50, #faf8f3);
  border: 1px solid var(--color-border, #ddd6c6);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
}
.kebandan-address-form h3 {
  margin-top: 0;
  font-family: var(--font-display) !important;
  color: var(--text-strong);
}
.kebandan-address-form label,
.kebandan-review-address-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #5F5E5A);
  margin-bottom: 6px;
}
.kebandan-address-form .field,
.kebandan-review-address-form .field {
  margin-bottom: 16px;
}
.kebandan-address-form .field-row,
.kebandan-review-address-form .field-row {
  display: flex;
  gap: 16px;
}
.kebandan-address-form .field-row .field,
.kebandan-review-address-form .field-row .field {
  flex: 1;
}
.kebandan-address-form input[type="text"],
.kebandan-address-form input[type="tel"],
.kebandan-address-form textarea,
.kebandan-review-address-form input[type="text"],
.kebandan-review-address-form input[type="tel"],
.kebandan-review-address-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--color-border, #ddd6c6);
  border-radius: 10px;
  font-family: var(--font-body, inherit);
  font-size: 14px;
  background: #fff;
}
.kebandan-address-form input:focus,
.kebandan-address-form textarea:focus,
.kebandan-review-address-form input:focus,
.kebandan-review-address-form textarea:focus {
  outline: 2px solid var(--brand-leaf);
  outline-offset: 1px;
}
.kebandan-review-address-form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.kebandan-btn-small {
  font-size: 14px !important;
  padding: 10px 20px !important;
}
.kebandan-review-address-cancel {
  background: none;
  border: none;
  font-size: 13px;
  color: var(--text-secondary, #5F5E5A);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.kebandan-review-address-delete {
  background: none;
  border: none;
  font-size: 13px;
  color: var(--brand-terracotta, #D23016);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  opacity: 0.75;
  transition: opacity var(--dur, 0.15s) var(--ease-out, ease);
}
.kebandan-review-address-delete:hover {
  opacity: 1;
}
.kebandan-address-saved {
  background: var(--green-50, #eef3ef);
  border: 1px solid var(--brand-leaf);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
}
.kebandan-address-saved .check-line {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-green);
  font-weight: 600;
  margin-bottom: 12px;
}
.kebandan-address-summary-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary, #5F5E5A);
  margin-bottom: 16px;
}

/* Onay ekranı — sepet (sol) + adres (sağ) yan yana */
.kebandan-review-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1rem;
}
.kebandan-review-title {
  text-align: center;
  font-family: var(--font-display) !important;
  color: var(--text-strong);
  margin-bottom: 1.5rem;
}
.kebandan-review-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 2rem;
}
@media (max-width: 700px) {
  .kebandan-review-columns {
    grid-template-columns: 1fr;
  }
}
.kebandan-review-col {
  background: #fff;
  border: 1px solid var(--color-border, #ddd6c6);
  border-radius: 16px;
  padding: 1.5rem;
}
.kebandan-review-col h4 {
  margin: 0 0 1rem;
  font-family: var(--font-display) !important;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #5F5E5A);
}
.kebandan-review-address-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 1rem;
}
.kebandan-review-address-head h4 {
  margin: 0;
}
.kebandan-review-edit-address {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  background: var(--sand-100, #F7F5EF);
  border: 1px solid var(--color-border, #ddd6c6);
  border-radius: var(--radius-pill, 999px);
  padding: 5px 12px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-strong);
  cursor: pointer;
  transition: background var(--dur, 0.15s) var(--ease-out, ease), border-color var(--dur, 0.15s) var(--ease-out, ease);
}
.kebandan-review-edit-address:hover {
  background: var(--green-50, #eef3ef);
  border-color: var(--brand-green, #2C3F31);
}
.kebandan-review-edit-address svg {
  flex-shrink: 0;
}
/* Bir ürün kartı — aynı ürünün farklı gramaj/dizi seçimleri burada tek
   kalemde toplanır, ayrı satır olarak açılmaz. */
.kebandan-review-product {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border, #ddd6c6);
}
.kebandan-review-product:last-child {
  border-bottom: none;
}
.kebandan-review-product img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  margin-top: 2px;
}
.kebandan-review-product-body {
  flex: 1 1 auto;
  min-width: 0;
}
.kebandan-review-product-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
  line-height: 1.4;
  margin-bottom: 4px;
}
.kebandan-review-product-total {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-terracotta, #D23016);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--color-border, #ddd6c6);
}

/* Ürün kartı içindeki tek bir varyasyon satırı (gramaj/dizi + adet) */
.kebandan-review-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
}
.kebandan-review-item-weight {
  font-size: 13px;
  color: var(--text-secondary, #5F5E5A);
}
.kebandan-review-item-qty {
  font-size: 13px;
  color: var(--text-secondary, #5F5E5A);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.kebandan-review-item-weight {
  font-weight: 600;
  color: var(--text-strong);
}
.kebandan-qty-btn {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--color-border, #ddd6c6);
  background: #fff;
  color: var(--text-strong);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background var(--dur, 0.15s) var(--ease-out, ease);
}
.kebandan-qty-btn:hover {
  background: var(--sand-200, #ece8dc);
}
.kebandan-qty-input {
  width: 40px;
  text-align: center;
  font-size: 13px;
  border: 1px solid var(--color-border, #ddd6c6);
  border-radius: 6px;
  padding: 3px 2px;
  color: var(--text-strong);
  font-family: var(--font-body);
}
.kebandan-review-address-text {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-strong);
}
.kebandan-review-actions {
  text-align: center;
}
.kebandan-review-actions .kebandan-btn-primary,
.kebandan-review-actions .kebandan-wa-btn {
  font-size: 17px;
  padding: 16px 36px;
}

/* Header sepet ikonu */
.kebandan-cart-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* BOŞ sepet: krem — başlıktaki logo ve menü ile aynı dilde, sakin durur.
     Dolu olunca terracotta'ya döner (aşağıdaki .kebandan-cart-dolu).
     20 Ağu 2026: önce ikon her zaman terracotta idi; boş sepet gereksiz yere
     dikkat çekiyor, dolu-boş ayrımı için elde koz kalmıyordu. */
  color: var(--brand-cream, #F7F5EF);
  transition: color 0.25s ease;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: opacity 0.15s ease;
}
.kebandan-cart-icon:hover {
  opacity: 0.8;
}
.kebandan-cart-icon svg {
  width: 22px;
  height: 22px;
}
.kebandan-cart-count {
  position: absolute;
  top: -8px;
  right: -10px;
  background: var(--brand-terracotta, #D23016);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* DOLU sepet: açık terracotta. Tek sinyal renk — ek şekil, hare veya çip yok.
   Rozet zaten sayıyı veriyor; renk "içinde bir şey var" der.

   NEDEN terracotta-500 DEĞİL: koyu yeşil başlıkta zıtlığı 2,24 — WCAG ikon
   eşiği olan 3,0'ın altında. Yani dolu sepet, boş sepetten (krem, 10,34) daha
   zor görünüyordu; tam tersi olmalı. Tonlar ölçüldü:
     terracotta-500  yeşilde 2,24 ✗  · kremden farkı 4,61
     terracotta-400  yeşilde 3,49 ✓  · kremden farkı 2,97   ← seçildi
     terracotta-300  yeşilde 4,54 ✓  · kremden farkı 2,28
     terracotta-200  yeşilde 6,56 ✓  · kremden farkı 1,58 (krem'e fazla yakın)
   400, hem eşiği geçiyor hem boş durumdan net ayrılıyor. */
.kebandan-cart-icon.kebandan-cart-dolu {
  color: var(--terracotta-400, #e36b52);
}

/* Sepete ekleme animasyonu — kullanıcının fark edeceği görsel geri bildirim */
@keyframes kebandan-cart-bump-icon {
  0% { transform: scale(1) rotate(0); }
  30% { transform: scale(1.3) rotate(-10deg); }
  55% { transform: scale(0.95) rotate(8deg); }
  75% { transform: scale(1.12) rotate(-4deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes kebandan-cart-bump-badge {
  0% { transform: scale(1); }
  40% { transform: scale(1.5); }
  100% { transform: scale(1); }
}
.kebandan-cart-icon.kebandan-cart-bump {
  animation: kebandan-cart-bump-icon 0.55s ease;
}
.kebandan-cart-count.kebandan-cart-bump {
  animation: kebandan-cart-bump-badge 0.45s ease;
}

/* Not: hareket azaltma (prefers-reduced-motion) bu dosyanın ilerisinde
   GLOBAL olarak ele alınıyor — tüm animasyonlar orada kapatılıyor.
   Kalıcı daire vurgusu bir animasyon değil, o yüzden korunur. */

/* Fiyat sorgusu metin stili */
.kebandan-price-inquiry {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  color: var(--green-600);
}

/* =============================================================
   WOOCOMMERCE — MAĞAZA (SHOP) SAYFASI
   ============================================================= */

/* Product grid — classic WooCommerce */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px !important;
}
@media (min-width: 768px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1080px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Product grid — WooCommerce block theme */
.wc-block-product-template,
ul.wc-block-product-template {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
  list-style: none !important;
  padding: 0 !important;
}
@media (min-width: 768px) {
  .wc-block-product-template,
  ul.wc-block-product-template {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (min-width: 1080px) {
  .wc-block-product-template,
  ul.wc-block-product-template {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* Product card — both classic and block */
.woocommerce ul.products li.product,
li.wc-block-product {
  background: var(--surface-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  float: none !important;
}
.woocommerce ul.products li.product:hover,
li.wc-block-product:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg) !important;
}

/* Product image */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .woocommerce-placeholder,
li.wc-block-product img {
  border-radius: 0 !important;
  margin: 0 !important;
  aspect-ratio: 4/3;
  object-fit: cover;
  width: 100%;
}

/* Product info area */
.woocommerce ul.products li.product a,
li.wc-block-product a {
  text-decoration: none !important;
}

/* Product title — both classic and block */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
li.wc-block-product .wp-block-post-title,
li.wc-block-product .wc-block-components-product-name {
  font-family: var(--font-display) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text-strong) !important;
  padding: 12px 14px 4px !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

/* Product price — both. Başlıktan belirgin şekilde ayrışsın diye daha
   büyük + marka rengi terracotta (fiyat = harekete geçirici bilgi,
   göz taramasında öne çıkmalı — nöropazarlamada "price salience"). */
.woocommerce ul.products li.product .price,
li.wc-block-product .wc-block-components-product-price,
li.wc-block-product .price {
  font-family: var(--font-display) !important;
  font-weight: 700;
  color: var(--brand-terracotta) !important;
  font-size: 18px !important;
  padding: 2px 14px 14px !important;
  margin: 0 !important;
}

/* Category link on shop page */
.woocommerce ul.products li.product .product-category {
  font-family: var(--font-mono) !important;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--text-muted);
  padding: 0 14px;
}

/* Sepete Ekle — mağaza kartlarında (grid), her kartta aynı hizada */
.woocommerce ul.products li.product,
li.wc-block-product {
  display: flex !important;
  flex-direction: column !important;
}
.woocommerce ul.products li.product .wc-block-components-product-button,
li.wc-block-product .wc-block-components-product-button {
  margin-top: auto !important;
  margin-bottom: 16px !important;
  padding: 0 14px !important;
  width: 100% !important;
  box-sizing: border-box;
}
.woocommerce ul.products li.product .add_to_cart_button,
li.wc-block-product .add_to_cart_button {
  display: block !important;
  width: 100% !important;
  background: var(--brand-terracotta, #D23016) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 12px 0 !important;
  text-align: center !important;
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.woocommerce ul.products li.product .add_to_cart_button:hover,
li.wc-block-product .add_to_cart_button:hover {
  background: #b3280f !important;
  transform: translateY(-1px);
}

/* Mağaza kartlarında gramaj seçici (varyasyonlu ürünler) */
.kebandan-grid-variation {
  margin-top: auto !important;
  margin-bottom: 16px !important;
  padding: 0 14px !important;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kebandan-grid-gramaj-select {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body) !important;
  font-size: 13px;
  padding: 9px 10px;
  border: 1px solid var(--color-border, #ddd6c6);
  border-radius: 8px;
  background: #fff;
  color: var(--text-strong);
}
.kebandan-grid-add-btn {
  display: block;
  width: 100%;
  background: var(--brand-terracotta, #D23016);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-display) !important;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 0;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.kebandan-grid-add-btn:hover:not(:disabled) {
  background: #b3280f;
  transform: translateY(-1px);
}
.kebandan-grid-add-btn:disabled {
  background: var(--sand-400, #c8bda5);
  cursor: not-allowed;
}

/* =============================================================
   WOOCOMMERCE — ÜRÜN DETAY SAYFASI
   ============================================================= */

.woocommerce div.product {
  font-family: var(--font-body) !important;
}

.woocommerce div.product .product_title {
  font-size: 2rem !important;
  margin-bottom: 8px !important;
}

.woocommerce div.product p.price {
  font-family: var(--font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: var(--text-strong) !important;
}

/* Product category badge */
.woocommerce div.product .posted_in {
  font-family: var(--font-mono) !important;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.woocommerce div.product .posted_in a {
  color: var(--green-500) !important;
  text-decoration: none;
}

/* Description tab area */
.woocommerce div.product .woocommerce-Tabs-panel {
  font-family: var(--font-body) !important;
}
.woocommerce div.product .woocommerce-Tabs-panel h3 {
  font-size: 1.25rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.woocommerce div.product .woocommerce-Tabs-panel ul {
  padding-left: 1.25rem;
}
.woocommerce div.product .woocommerce-Tabs-panel li {
  margin-bottom: 0.4rem;
  line-height: 1.55;
}

/* Related products */
.woocommerce div.product .related.products h2 {
  font-size: 1.5rem !important;
  margin-bottom: 1rem;
}

/* =============================================================
   SAYFA İÇERİKLERİ (Hakkımızda, Teslimat vb.)
   ============================================================= */

.entry-content,
.wp-block-post-content {
  font-family: var(--font-body) !important;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-body);
}

.entry-content h3,
.wp-block-post-content h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.entry-content strong,
.wp-block-post-content strong {
  font-weight: 600;
  color: var(--text-strong);
}

/* =============================================================
   GENEL DÜZENLEMELER
   ============================================================= */

/* Remove WooCommerce default breadcrumb styling */
.woocommerce .woocommerce-breadcrumb {
  font-family: var(--font-body) !important;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.woocommerce .woocommerce-breadcrumb a {
  color: var(--color-link) !important;
}

/* Taze ürünler sarı uyarı kutusu — marka uyumlu */
.woocommerce div.product .woocommerce-Tabs-panel div[style*="background:#fff3cd"],
.woocommerce div.product .woocommerce-Tabs-panel div[style*="background: #fff3cd"] {
  border-radius: var(--radius-md) !important;
  font-family: var(--font-body) !important;
}

/* WooCommerce tab styling */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding-left: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--font-display) !important;
  font-weight: 500;
  color: var(--text-strong);
}

/* =============================================================
   VARYASYON + ADET + SEPETE EKLE — 2x2 grid (Gramaj/Adet üstte
   etiketler, altta alanlar), buton altta sola hizalı.
   WooCommerce'in table.variations / .single_variation_wrap /
   .woocommerce-variation-add-to-cart sarmalayıcıları "display:contents"
   ile görünmez kılınıp içerikleri form.cart'ın doğrudan grid öğesi
   hâline getiriliyor — DOM'a dokunmadan gerçek bir grid kuruluyor.
   ============================================================= */
.woocommerce div.product form.cart {
  display: grid !important;
  grid-template-columns: minmax(160px, 280px) minmax(74px, 120px);
  column-gap: 16px;
  row-gap: 8px;
  align-items: start;
  margin: 16px 0;
  max-width: 420px;
}
.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart .single_variation_wrap,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
  display: contents;
}
.woocommerce div.product form.cart .reset_variations_alert {
  display: none;
}

/* Satır 1 — etiketler (Gramaj / Adet), yatayda aynı hizada */
.woocommerce div.product table.variations th.label {
  grid-column: 1;
  grid-row: 1;
  text-align: left;
  padding: 0;
}
.woocommerce div.product table.variations th.label label {
  font-family: var(--font-display) !important;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #5F5E5A);
}
.kebandan-qty-visible-label {
  /* WooCommerce Blocks'un satır içi stili (.wp-block-woocommerce-add-to-cart-form
     form.cart > :not(.quantity)) form.cart'ın TÜM alt öğelerine grid-column:1/-1
     dayatıyor ve display:contents ile "yükseltilen" bu öğeye de bulaşıyor;
     bunu ezmek için !important gerekiyor. */
  grid-column: 2 !important;
  grid-row: 1 !important;
  font-family: var(--font-display) !important;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #5F5E5A);
}

/* Satır 2 — alanlar (dropdown / adet girişi), yatayda aynı hizada */
.woocommerce div.product table.variations td.value {
  grid-column: 1;
  grid-row: 2;
  padding: 0;
}
.woocommerce div.product table.variations select {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--color-border, #ddd6c6);
  border-radius: 10px;
  font-family: var(--font-body, inherit) !important;
  font-size: 15px;
  color: var(--text-strong);
  background: #fff;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.woocommerce div.product table.variations select:hover {
  border-color: var(--brand-green, #2C3F31);
}
.woocommerce div.product table.variations select:focus {
  outline: none;
  border-color: var(--brand-leaf);
  box-shadow: 0 0 0 3px rgba(128, 161, 66, 0.2);
}
.woocommerce div.product .reset_variations {
  display: inline-block;
  grid-column: 1;
  grid-row: 3;
  margin-top: 4px;
  font-family: var(--font-body, inherit);
  font-size: 13px;
  color: var(--text-secondary, #5F5E5A) !important;
  text-decoration: underline;
  transition: color var(--dur) var(--ease-out);
}
.woocommerce div.product .reset_variations:hover {
  color: var(--brand-green, #2C3F31) !important;
}

.woocommerce div.product form.cart .quantity {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
}
.woocommerce div.product form.cart .quantity input.qty {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 10px;
  border: 1px solid var(--color-border, #ddd6c6);
  border-radius: 10px;
  font-family: var(--font-body, inherit);
  font-size: 15px;
  color: var(--text-strong);
  text-align: center;
  background: #fff;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.woocommerce div.product form.cart .quantity input.qty:focus {
  outline: none;
  border-color: var(--brand-leaf);
  box-shadow: 0 0 0 3px rgba(128, 161, 66, 0.2);
}

/* Varyasyon açıklama/fiyat alanı (genelde boş) — grid'i bozmasın */
.woocommerce div.product .woocommerce-variation.single_variation {
  grid-column: 1 / -1;
  grid-row: 3;
}
.woocommerce div.product .woocommerce-variation.single_variation:empty {
  display: none;
}

/* Satır 4 — Sepete Ekle, sola hizalı, iki sütuna da yayılmadan */
.woocommerce div.product form.cart .single_add_to_cart_button {
  grid-column: 1 / -1;
  grid-row: 4;
  justify-self: start;
  margin-top: 8px;
  background: var(--brand-terracotta, #D23016) !important;
  color: #fff !important;
  border: none;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display) !important;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur) var(--ease-out);
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
  background: #b3280f !important;
  transform: translateY(-1px);
}
.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled {
  background: var(--sand-300, #ddd6c6) !important;
  color: var(--text-secondary, #5F5E5A) !important;
  cursor: not-allowed;
  opacity: 1 !important;
  transform: none !important;
}

/* Basit ürünlerde (varyasyon tablosu yok) sol sütun boş kalıyor ve adet kutusu
   sağda öksüz duruyordu. Adet, Sepete Ekle butonuyla aynı hizaya alınır. */
/* NOT: grid-template-columns'a dokunulmuyor. Tek sütuna indirilirse Sepete Ekle
   (grid-column: 1 / -1) o dar sütuna sıkışıp iki satıra düşüyor. */
.woocommerce div.product form.cart:not(:has(table.variations)) .kebandan-qty-visible-label {
  grid-column: 1 !important;
}
.woocommerce div.product form.cart:not(:has(table.variations)) .quantity {
  grid-column: 1;
  max-width: 120px;
}

/* Varyasyonlu üründe de adet, dropdown'ın yanında değil butonun üstünde:
   satır 1 gramaj etiketi · 2 dropdown · 3 adet etiketi · 4 adet · 5 buton. */
.woocommerce div.product form.cart:has(table.variations) .kebandan-qty-visible-label {
  grid-column: 1 !important;
  grid-row: 3 !important;
  margin-top: 12px;
}
.woocommerce div.product form.cart:has(table.variations) .quantity {
  grid-column: 1;
  grid-row: 4;
  max-width: 120px;
}
.woocommerce div.product form.cart:has(table.variations) .reset_variations {
  grid-row: 5;
}
.woocommerce div.product form.cart:has(table.variations) .woocommerce-variation.single_variation {
  grid-row: 6;
}
.woocommerce div.product form.cart:has(table.variations) .single_add_to_cart_button {
  grid-row: 7;
}

/* ---------------------------------------------------------------------------
   İNDİRİM ROZETİ
   İki ayrı işaretleme var: ürün sayfasında klasik `span.onsale`, mağaza ve
   ilgili ürünler gridinde blok tabanlı `.wc-block-components-product-sale-badge`.
   Tema varsayılanı dolgu yeşil daireydi; yerine marka diliyle uyumlu hap rozet.
   Terracotta bilinçli kullanılmadı — o renk CTA'lara ayrılmış durumda.
--------------------------------------------------------------------------- */
/* Rozet, görseli kapsayan kutuya sabitlenmeli. Blok gridinde
   `__inner-container` görselin ALTINDA duran boş bir sarmalayıcı (yükseklik
   ~24px); oraya sabitlenirse rozet görselin altına düşüyor. Görseli asıl
   kapsayan `.wc-block-components-product-image` zaten relative. */
.woocommerce div.product .wp-block-woocommerce-product-image-gallery,
.wc-block-components-product-image {
  position: relative;
}
.wc-block-components-product-image__inner-container {
  position: static;
}
.woocommerce span.onsale,
.wc-block-components-product-sale-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  right: auto;
  z-index: 2;

  display: inline-flex;
  align-items: center;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 7px 15px;

  background: var(--brand-green, #2C3F31);
  color: var(--sand-100, #F7F5EF);
  border: 0;
  border-radius: var(--radius-pill, 999px);
  box-shadow: 0 2px 10px rgba(35, 37, 31, 0.22);

  font-family: var(--font-display), sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  text-decoration: none;
  white-space: nowrap;
}
/* WooCommerce blok rozetin kendi hizalama kuralları iki sınıflı seçici
   kullanıyor (`.wc-block-components-product-image .…--align-right`) ve tek
   sınıflı kuralımızı eziyor; hem top hem right'ı geri alıyordu. Aynı
   özgüllükle karşılık veriliyor. */
.wc-block-components-product-image .wc-block-components-product-sale-badge,
.wc-block-components-product-image .wc-block-components-product-sale-badge--align-left,
.wc-block-components-product-image .wc-block-components-product-sale-badge--align-center,
.wc-block-components-product-image .wc-block-components-product-sale-badge--align-right {
  top: 14px;
  left: 14px;
  right: auto;
  margin: 0;
  transform: none;
}
/* Blok rozetin dış sarmalayıcısı konumlandırmayı bozmasın */
.wp-block-woocommerce-product-sale-badge {
  position: static;
  margin: 0;
  padding: 0;
}
.wc-block-components-product-sale-badge__text {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* Mobilde dropdown metninin kesilmeden okunabilmesi için tek sütuna in */
@media (max-width: 480px) {
  .woocommerce div.product form.cart {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
  .kebandan-qty-visible-label {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }
  .woocommerce div.product form.cart .quantity {
    grid-column: 1;
    grid-row: 4;
    max-width: 120px;
  }
  .woocommerce div.product .reset_variations {
    grid-row: 5;
  }
  .woocommerce div.product .woocommerce-variation.single_variation {
    grid-row: 6;
  }
  .woocommerce div.product form.cart .single_add_to_cart_button {
    grid-row: 7;
  }
}

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

/* =============================================================
   ANA SAYFA
   ============================================================= */

/* Ana sayfa: header ile hero arasındaki boşluğu kaldır */
.page-id-61 > .wp-site-blocks > main,
.home > .wp-site-blocks > main {
  margin-top: 0 !important;
}
.page-id-61 > .wp-site-blocks > main > .wp-block-group,
.home > .wp-site-blocks > main > .wp-block-group {
  padding-top: 0 !important;
}
.page-id-61 .wp-block-post-content,
.home .wp-block-post-content {
  margin-top: 0 !important;
}

/* Sayfa başlığını ve featured image'ı gizle — hero bölümü var */
.page-id-61 .wp-block-post-title,
.home .wp-block-post-title { display: none; }
.page-id-61 .wp-block-post-featured-image,
.home .wp-block-post-featured-image { display: none; }
/* Query (blog preview) içindeki başlıkları geri aç */
.page-id-61 .wp-block-query .wp-block-post-title,
.home .wp-block-query .wp-block-post-title { display: block !important; }

/* Shared arrow animation for links */
.kebandan-arrow {
  display: inline-block;
  transition: transform var(--dur) var(--ease-out);
}

/* ---- Section rhythm ---- */
.kebandan-section {
  padding: 64px 24px;
}
.kebandan-section--alt {
  background: #fff;
}
.kebandan-section-title {
  font-size: clamp(1.5rem, 3vw, 1.8rem);
  color: var(--brand-green);
  margin-bottom: 12px !important;
}
.kebandan-section-subtitle {
  font-size: 1rem;
  color: var(--text-muted) !important;
  max-width: 480px;
  margin: 0 auto 40px !important;
  line-height: 1.6;
}

/* ---- HERO ---- */
.kebandan-hero {
  text-align: center;
  padding: 120px 24px 96px !important;
  background: linear-gradient(160deg, rgba(44,63,49,0.55) 0%, rgba(44,63,49,0.35) 100%),
              url('/wp-content/uploads/2026/07/baraj-hero-v2.jpg') center/cover no-repeat;
  border-radius: 0 !important;
  position: relative;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  overflow-x: hidden;
}
.kebandan-hero__title {
  font-size: clamp(2.2rem, 5.5vw, 3.5rem) !important;
  color: #fff !important;
  margin-bottom: 16px !important;
  text-shadow: 0 2px 20px rgba(0,0,0,0.15);
}
.kebandan-hero__subtitle {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.9) !important;
  max-width: 580px;
  margin: 0 auto 20px !important;
  line-height: 1.7;
  text-shadow: 0 1px 8px rgba(0,0,0,0.1);
}
.kebandan-hero__tagline {
  font-family: var(--font-mono) !important;
  font-size: 1.1rem;
  letter-spacing: 0.26em;
  color: #fff !important;
  text-transform: lowercase;
  margin-bottom: 32px !important;
  text-shadow: 0 1px 12px rgba(0,0,0,0.3);
  opacity: 0.92;
}
.kebandan-hero__cta .wp-block-button__link {
  background: #fff !important;
  color: var(--brand-green) !important;
  font-family: var(--font-display) !important;
  font-weight: 600;
  padding: 16px 40px;
  border-radius: var(--radius-lg);
  font-size: 1rem;
  box-shadow: var(--shadow-md);
  transition: all var(--dur) var(--ease-out);
}
.kebandan-hero__cta .wp-block-button__link:hover {
  background: var(--sand-100) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* ---- KATEGORI KARTLARI ---- */
.kebandan-categories {
  padding: 64px 24px;
  background: #fff;
}
.kebandan-cat-grid {
  display: grid !important;
  /* auto-fit (21 Ağu 2026): kategori sayısı sabit 4 değil. Pestil eklenince
     repeat(4,1fr) beşinci kartı tek başına alt satıra düşürüyordu. auto-fit
     boş rayları toplar, yani 4 kartta yine 4 sütun çıkar; 5 kartta 5 olur. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 20px !important;
  max-width: 100% !important;
  width: 100%;
  align-items: stretch;
}
.kebandan-cat-grid > .wp-block-group {
  height: 100%;
}
.kebandan-cat-card {
  background: var(--sand-50) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 28px 24px 24px !important;
  transition: all var(--dur-slow) var(--ease-out);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  /* Kartın tamamı artık bir <a> — link görünümünü sıfırla */
  text-decoration: none !important;
  color: inherit !important;
  height: 100%;
  /* box-sizing ZORUNLU (19 Ağu 2026): <a> öğesi content-box miras alıyordu.
     height:100% ızgara satırını İÇERİK kutusuyla dolduruyor, üstüne 52px padding
     + 2px kenarlık ekleniyordu → kart satırdan 54px taşıp, 20px boşluk düşünce
     alttaki karta 34px biniyordu. Mobilde tek sütun olduğu için orada göze
     çarpıyordu. border-box padding ve kenarlığı yüksekliğin İÇİNE alır. */
  box-sizing: border-box;
  cursor: pointer;
}
.kebandan-cat-card__emoji {
  display: block;
  text-align: center;
  font-size: 2.25rem;
  line-height: 1;
  margin-bottom: 12px;
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1);
}
.kebandan-cat-card:hover .kebandan-cat-card__emoji {
  transform: scale(1.22) rotate(-8deg);
}
.kebandan-cat-card__title {
  text-align: center;
  margin-top: 0 !important;
}
.kebandan-cat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--brand-green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
  z-index: 2;
}
.kebandan-cat-card:hover::before {
  transform: scaleX(1);
}
/* Hover'da köşeden geçen ışık huzmesi — dikkat çekici ama abartısız,
   "premium/interaktif" hissi veren nöropazarlama dokunuşu. */
.kebandan-cat-card::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.65), transparent);
  transform: skewX(-20deg);
  transition: left 0.7s ease;
  pointer-events: none;
  z-index: 1;
}
.kebandan-cat-card:hover::after {
  left: 140%;
}
.kebandan-cat-card:hover {
  box-shadow: var(--shadow-md), 0 8px 24px -8px rgba(210, 48, 22, 0.18);
  transform: translateY(-6px);
  border-color: var(--green-200) !important;
}
/* Sayfa yüklendiğinde/kaydırıldığında bir kez oynayan giriş animasyonu
   (kebandan-brand.php'deki IntersectionObserver ile tetiklenir). */
.kebandan-cat-card.kebandan-anim-init {
  opacity: 0;
  transform: translateY(28px);
}
.kebandan-cat-card.kebandan-anim-init.kebandan-in-view {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(.16,1,.3,1);
}
.kebandan-cat-card h3 {
  font-size: 1.1rem !important;
  margin-bottom: 8px !important;
  line-height: 1.3;
}
.kebandan-cat-card .kebandan-cat-card__desc {
  font-size: 0.875rem;
  color: var(--text-muted) !important;
  line-height: 1.6;
  flex: 1;
  margin-bottom: 16px !important;
}
.kebandan-cat-card__link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-green) !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
}
.kebandan-cat-card:hover .kebandan-cat-card__link .kebandan-arrow {
  transform: translateX(4px);
}

/* ---- ÖNE ÇIKAN ÜRÜNLER ---- */
.kebandan-featured {
  padding: 64px 24px;
}
.kebandan-featured-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  max-width: 100% !important;
  width: 100%;
  align-items: stretch;
}
.kebandan-featured-grid > .wp-block-group {
  height: 100%;
}
.kebandan-product-highlight {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg) !important;
  padding: 0 !important;
  overflow: hidden;
  transition: all var(--dur-slow) var(--ease-out);
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
/* Hover'da köşeden geçen ışık huzmesi — kategori kartlarıyla aynı dil */
.kebandan-product-highlight::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.65), transparent);
  transform: skewX(-20deg);
  transition: left 0.7s ease;
  pointer-events: none;
  z-index: 2;
}
.kebandan-product-highlight:hover::after {
  left: 140%;
}
/* Giriş animasyonu — kategori kartlarıyla aynı mekanizma */
.kebandan-product-highlight.kebandan-anim-init {
  opacity: 0;
  transform: translateY(28px);
}
.kebandan-product-highlight.kebandan-anim-init.kebandan-in-view {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(.16,1,.3,1);
}
/* Kartın tamamını tıklanabilir yapan görünmez katman. Anchor'a position
   VERİLMİYOR — böylece ::after'ın absolute konumu kendi üstündeki en yakın
   positioned ata olan .kebandan-product-highlight'a (position:relative)
   göre hesaplanır ve kartın tamamını kaplar; sadece link kutusunu değil. */
.kebandan-product-highlight__link a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.kebandan-product-highlight__img {
  height: 180px;
  overflow: hidden;
}
.kebandan-product-highlight__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transition: transform var(--dur-slow) var(--ease-out);
}
.kebandan-product-highlight:hover .kebandan-product-highlight__img img {
  transform: scale(1.05);
}
.kebandan-product-highlight__body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.kebandan-product-highlight:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}
.kebandan-product-highlight h3 {
  font-size: 1.15rem !important;
  color: var(--brand-green) !important;
  margin-bottom: 8px !important;
}
.kebandan-product-highlight p {
  font-size: 0.875rem;
  color: var(--text-muted) !important;
  line-height: 1.6;
}
.kebandan-product-highlight__link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-terracotta) !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto !important;
}
.kebandan-product-highlight:hover .kebandan-product-highlight__link .kebandan-arrow {
  transform: translateX(4px);
}

/* ---- BLOG PREVIEW ---- */
.kebandan-blog-preview {
  padding: 64px 24px;
  background: #fff;
}
.kebandan-blog-preview-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  max-width: 100% !important;
  width: 100%;
}
.kebandan-blog-preview-grid.wp-block-post-template.is-layout-grid {
  grid-template-columns: repeat(3, 1fr) !important;
}
.kebandan-blog-preview-grid .kebandan-blog-card {
  position: relative;
  height: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  background: var(--sand-50);
  box-shadow: var(--shadow-sm);
  transition: all var(--dur-slow) var(--ease-out);
  display: flex;
  flex-direction: column;
}
.kebandan-blog-preview-grid .kebandan-blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--green-300);
}
/* Kapak görseli — sabit oran (blok özniteliğinde 16/10), hover'da hafif zoom */
.kebandan-blog-preview-grid .kebandan-blog-card__img img {
  transition: transform var(--dur-slow) var(--ease-out);
}
.kebandan-blog-preview-grid .kebandan-blog-card:hover .kebandan-blog-card__img img {
  transform: scale(1.05);
}
/* Blog preview kart gövdesi — kategori üstte pill, başlık belirgin.
   height:100% + flex ile üç kart da aynı toplam yükseklikte durur;
   başlık (2 satır) ve özet (3 satır) kırpılınca içerik farkı fark edilmez. */
.kebandan-blog-preview-grid .kebandan-blog-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.kebandan-blog-preview-grid .kebandan-blog-card__cat {
  order: -1;
  margin-bottom: 8px !important;
  /* Kartın tamamını kaplayan "devamını oku" katmanının ÜSTÜNDE kalsın —
     aksi halde kategori etiketi tıklanamaz hale gelir. */
  position: relative;
  z-index: 2;
}
.kebandan-blog-preview-grid .kebandan-blog-card__cat a {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em;
  color: #fff !important;
  /* leaf-500 zeminde beyaz metin 2.96 kontrast veriyordu (AA altı);
     bir ton koyu yaprak yeşiliyle 5.02'ye çıkarıldı. */
  background: var(--leaf-700);
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  text-decoration: none !important;
  text-transform: lowercase;
  display: inline-block;
}
.kebandan-blog-preview-grid .kebandan-blog-card__title {
  margin: 0 0 6px !important;
}
.kebandan-blog-preview-grid .kebandan-blog-card__title a {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--text-strong) !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Özet — kart boyutuna göre 3 satırla sabit, uzun/kısa metin fark etmeksizin
   aynı yüksekliği kaplar (kelime sayısı excerptLength ile de sınırlı). */
.kebandan-blog-preview-grid .kebandan-blog-card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* "Devamını oku" — kartın altına sabitlenir (margin-top:auto), tüm kart
   tıklanabilir olsun diye ::after ile kartın tamamını kaplayan görünmez
   bir katman ekliyoruz (stretched-link deseni). */
.kebandan-blog-preview-grid .kebandan-blog-card__more {
  margin-top: auto !important;
  padding-top: 10px;
}
.kebandan-blog-preview-grid .kebandan-blog-card__more {
  display: inline-flex;
  align-items: center;
  /* Öne çıkan ürün kartındaki "Ürüne git" ile birebir aynı boşluk */
  gap: 6px;
  font-family: var(--font-display) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: var(--brand-terracotta) !important;
  text-decoration: none !important;
  transition: color var(--dur) var(--ease-out);
}
/* Ok, metnin SAĞINDA dursun. ::after görünmez tıklama katmanı için
   kullanıldığından ok ::before olarak kalıyor; flex `order` ile metinden
   sonraya alınıyor. Sonuç "Ürüne git" ile aynı: ok sağda, hover'da sağa kayar. */
.kebandan-blog-preview-grid .kebandan-blog-card__more::before {
  content: '→';
  order: 1;
  transition: transform var(--dur) var(--ease-out);
}
.kebandan-blog-preview-grid .kebandan-blog-card:hover .kebandan-blog-card__more {
  color: #b3280f !important;
}
.kebandan-blog-preview-grid .kebandan-blog-card:hover .kebandan-blog-card__more::before {
  transform: translateX(4px);
}
/* Kartın tamamını tıklanabilir yapan görünmez katman */
.kebandan-blog-preview-grid .kebandan-blog-card__more::after {
  content: '';
  position: absolute;
  inset: 0;
}
.kebandan-blog-preview .kebandan-all-posts-link {
  text-align: center;
  margin-top: 32px !important;
}
.kebandan-blog-preview .kebandan-all-posts-link a {
  font-family: var(--font-display) !important;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--brand-green) !important;
  text-decoration: none !important;
  padding: 12px 32px;
  border: 2px solid var(--brand-green);
  border-radius: var(--radius-lg);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--dur) var(--ease-out);
}
.kebandan-blog-preview .kebandan-all-posts-link a:hover {
  background: var(--brand-green);
  color: #fff !important;
}

/* ---- HAKKIMIZDA ---- */
.kebandan-about-brief {
  padding: 72px 24px;
  background: linear-gradient(135deg, var(--green-100) 0%, var(--sand-200) 100%);
  border-radius: var(--radius-xl);
  max-width: 900px;
  margin: 0 auto 0;
  border: 1px solid var(--green-200);
}
.kebandan-about-brief p {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-body) !important;
  line-height: 1.8;
  font-size: 1.05rem;
}
.kebandan-about-btn .wp-block-button__link {
  color: var(--brand-green) !important;
  border: 2px solid var(--brand-green) !important;
  background: transparent !important;
  font-family: var(--font-display) !important;
  font-weight: 600;
  border-radius: var(--radius-lg);
  padding: 14px 36px;
  transition: all var(--dur) var(--ease-out);
}
.kebandan-about-btn .wp-block-button__link:hover {
  background: var(--brand-green) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ---- WHATSAPP CTA ---- */
.kebandan-wa-cta-section {
  padding: 64px 24px;
  text-align: center;
  background: var(--green-50);
}
.kebandan-wa-cta-title {
  font-size: clamp(1.5rem, 3vw, 1.8rem);
  color: var(--brand-green);
  margin-bottom: 12px !important;
}
.kebandan-wa-cta-section .kebandan-wa-cta-desc {
  /* Bu bölümün zemini green-50; text-muted burada 4.46'da kalıyordu. */
  color: var(--text-secondary) !important;
  max-width: 460px;
  margin: 0 auto 28px !important;
  line-height: 1.6;
}
.kebandan-wa-cta-btn .wp-block-button__link {
  /* bkz. yukarıdaki not — beyaz metin için AA uyumlu WhatsApp tonu */
  background: #108176 !important;
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-weight: 600;
  font-size: 1.05rem;
  padding: 16px 40px;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 14px rgba(16, 129, 118, 0.28);
  transition: all var(--dur) var(--ease-out);
}
.kebandan-wa-cta-btn .wp-block-button__link:hover {
  background: #0D6B61 !important;
  box-shadow: 0 8px 24px rgba(16, 129, 118, 0.35);
  transform: translateY(-2px);
}

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
  .kebandan-hero { padding: 80px 20px 64px !important; }
  .kebandan-section { padding: 48px 16px; }
  .kebandan-cat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .kebandan-featured-grid,
  .kebandan-blog-preview-grid,
  .kebandan-blog-preview-grid.wp-block-post-template.is-layout-grid {
    grid-template-columns: 1fr !important;
    max-width: 400px;
    margin: 0 auto;
  }
  .kebandan-categories,
  .kebandan-featured,
  .kebandan-blog-preview,
  .kebandan-about-brief,
  .kebandan-wa-cta-section { padding: 48px 16px; }
  .kebandan-about-brief { border-radius: var(--radius-lg); margin: 0 8px; }
}
@media (max-width: 480px) {
  .kebandan-cat-grid {
    grid-template-columns: 1fr !important;
    max-width: 340px;
    margin: 0 auto;
  }
}

/* =============================================================
   BLOG ARŞİV SAYFASI
   ============================================================= */

.kebandan-blog-hero {
  text-align: center;
  background: linear-gradient(135deg, var(--green-50) 0%, var(--sand-50) 100%);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  margin-bottom: 40px;
}
.kebandan-blog-hero__title {
  font-size: 2rem !important;
  color: var(--brand-green) !important;
  margin-bottom: 8px !important;
}
.kebandan-blog-hero__desc {
  font-size: 1.05rem;
  color: var(--text-muted) !important;
  max-width: 540px;
  margin: 0 auto 24px !important;
  line-height: 1.6;
}

/* Category pill filters */
.kebandan-blog-cats {
  gap: 8px !important;
  justify-content: center;
}
.kebandan-blog-cats p {
  margin: 0 !important;
}
.kebandan-cat-pill {
  display: inline-block;
  padding: 7px 18px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display) !important;
  font-size: 13px;
  font-weight: 500;
  color: var(--green-700) !important;
  background: var(--surface-card);
  border: 1px solid var(--color-border);
  text-decoration: none !important;
  transition: all var(--dur) var(--ease-out);
  line-height: 1.4;
}
.kebandan-cat-pill:hover {
  background: var(--green-100);
  border-color: var(--green-300);
  color: var(--brand-green) !important;
}
.kebandan-cat-pill--active,
.kebandan-cat-pill--active:hover {
  background: var(--brand-green) !important;
  color: #fff !important;
  border-color: var(--brand-green) !important;
}

/* Blog card grid */
.kebandan-blog-grid {
  padding: 0 24px !important;
  gap: 24px !important;
}
.kebandan-blog-grid.wp-block-post-template.is-layout-grid {
  grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 1024px) {
  .kebandan-blog-grid.wp-block-post-template.is-layout-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  .kebandan-blog-grid.wp-block-post-template.is-layout-grid {
    grid-template-columns: 1fr !important;
  }
  .kebandan-blog-grid { padding: 0 16px !important; }
}

/* Blog card */
.kebandan-blog-card {
  background: var(--surface-card) !important;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.kebandan-blog-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* Card image */
.kebandan-blog-card__img {
  margin: 0 !important;
}
.kebandan-blog-card__img img {
  width: 100%;
  display: block;
  border-radius: 0 !important;
}

/* Card body */
.kebandan-blog-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Card category tag */
.kebandan-blog-card__cat {
  margin: 0 !important;
}
.kebandan-blog-card__cat a {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.04em;
  color: var(--leaf-700) !important;
  text-decoration: none !important;
  text-transform: lowercase;
}
.kebandan-blog-card__cat .wp-block-post-terms__separator {
  color: var(--text-muted);
}

/* Card title */
.kebandan-blog-card__title {
  margin: 0 !important;
  line-height: 1.3 !important;
}
.kebandan-blog-card__title a {
  font-family: var(--font-display) !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: var(--text-strong) !important;
  text-decoration: none !important;
  transition: color var(--dur) var(--ease-out);
}
.kebandan-blog-card__title a:hover {
  color: var(--green-500) !important;
}

/* Card excerpt */
.kebandan-blog-card__excerpt {
  margin: 0 !important;
  font-size: 0.875rem !important;
  color: var(--text-muted) !important;
  line-height: 1.55;
}
.kebandan-blog-card__excerpt .wp-block-post-excerpt__excerpt {
  margin: 0 !important;
}

/* Card date */
.kebandan-blog-card__date {
  margin: 4px 0 0 !important;
  font-size: 12px !important;
  /* sand-500 kum tonudur; zemin/kenarlık için. Metinde 2.61 kontrast
     veriyordu — okunabilir griye alındı. */
  color: var(--text-muted) !important;
}

/* Blog pagination */
.kebandan-blog-pagination {
  padding: 40px 24px 60px !important;
}
.kebandan-blog-pagination .wp-block-query-pagination {
  gap: 8px;
}
.kebandan-blog-pagination .wp-block-query-pagination a,
.kebandan-blog-pagination .wp-block-query-pagination-numbers .page-numbers {
  font-family: var(--font-display) !important;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  color: var(--green-700) !important;
  text-decoration: none !important;
  transition: all var(--dur) var(--ease-out);
}
.kebandan-blog-pagination .wp-block-query-pagination a:hover,
.kebandan-blog-pagination .wp-block-query-pagination-numbers .page-numbers:hover {
  background: var(--green-50);
}
.kebandan-blog-pagination .wp-block-query-pagination-numbers .page-numbers.current {
  background: var(--brand-green);
  color: #fff !important;
}

/* =============================================================
   SEPET → "Ödemeye git" (native WooCommerce Blocks butonu) — marka rengine getir
   ============================================================= */
.wc-block-cart__submit-button.wc-block-components-button {
  background: var(--brand-terracotta) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: all 0.2s ease-out;
}
.wc-block-cart__submit-button.wc-block-components-button:hover {
  background: #b3280f !important;
  color: #fff !important;
  transform: translateY(-1px);
}
.wc-block-cart__submit-button.wc-block-components-button:focus-visible {
  outline: 2px solid var(--brand-leaf);
  outline-offset: 2px;
}

/* =============================================================
   SİTE GENELİ — WooCommerce'den kalan varsayılan butonlar → marka terracotta.
   WhatsApp butonlarına (kebandan-wa-btn, yeşil) DOKUNMA — bilinçli marka kararı.
   ============================================================= */
.wc-block-components-button.wp-element-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-message a.button,
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-components-checkout-place-order-button {
  background: var(--brand-terracotta) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: all 0.2s ease-out;
}
.wc-block-components-button.wp-element-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-page a.button:hover,
.woocommerce-message a.button:hover,
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wc-block-components-checkout-place-order-button:hover {
  background: #b3280f !important;
  color: #fff !important;
  transform: translateY(-1px);
}
.wc-block-components-button.wp-element-button:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible {
  outline: 2px solid var(--brand-leaf);
  outline-offset: 2px;
}

/* =============================================================
   TEKLİ ÜRÜN — mobil sticky sepete-ekle çubuğu + gramaj nudge
   ============================================================= */
.kebandan-sticky-atc {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 998;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  border-top: 1px solid var(--color-border, #ddd6c6);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
  padding: 10px 14px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform var(--dur-slow) var(--ease-out);
}
@media (max-width: 768px) {
  .kebandan-sticky-atc {
    display: flex;
  }
}
.kebandan-sticky-atc--visible {
  transform: translateY(0);
}
.kebandan-sticky-atc__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.kebandan-sticky-atc__name {
  font-family: var(--font-display) !important;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kebandan-sticky-atc__price {
  font-family: var(--font-display) !important;
  font-weight: 700;
  color: var(--brand-terracotta) !important;
  font-size: 15px;
}
.kebandan-sticky-atc__price .woocommerce-Price-amount {
  color: var(--brand-terracotta) !important;
}
.kebandan-sticky-atc__btn {
  flex-shrink: 0;
  background: var(--brand-terracotta) !important;
  color: #fff !important;
  border: none;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display) !important;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.kebandan-sticky-atc__btn:active {
  transform: scale(0.97);
}

/* Gramaj seçilmeden Sepete Ekle'ye basılırsa — nazik titreme + ipucu */
@keyframes kebandan-nudge-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
.kebandan-nudge-shake {
  animation: kebandan-nudge-shake 0.45s ease-in-out;
  outline: 2px solid var(--brand-terracotta) !important;
  outline-offset: 2px;
}
.kebandan-gramaj-hint {
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand-terracotta);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.kebandan-gramaj-hint--show {
  opacity: 1;
  transform: translateY(0);
}

/* ---- MOBİL DOKUNMA HEDEFLERİ (19 Ağu 2026) ----
   Sepet ikonu ve hamburger menü görsel olarak 24×24 px. Bu, WCAG 2.2 AA'nın
   (2.5.8) tam sınırı ve parmakla isabetli basmak için küçük; önerilen 44×44.
   İkonu büyütmek başlığın hizasını bozardı, bunun yerine görünmez bir
   ::after katmanıyla dokunma alanı genişletiliyor. Düzen etkilenmez. */
@media (max-width: 768px) {
  .kebandan-cart-icon,
  .kebandan-header .wp-block-navigation__responsive-container-open {
    position: relative;
  }
  .kebandan-cart-icon::after,
  .kebandan-header .wp-block-navigation__responsive-container-open::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    /* yalnız dokunma alanı — görünmez ve altındaki rozeti gizlemez */
    background: transparent;
  }
}

/* ---- MAĞAZA SIRALAMA KUTUSU — MOBİL TAŞMA (19 Ağu 2026) ----
   /shop/ sayfasında sayfa yatayda 25px kayıyordu. Sebep: sıralama <select>'i
   doğal genişliği olan 253,5px'te diretiyordu. Kapsayıcı flex satırı
   `flex-wrap: nowrap` ve `min-width: auto` olduğu için küçülemiyor, 375px
   ekranda 400px'e taşıyordu. min-width:0 flex öğesinin küçülmesine izin verir. */
@media (max-width: 768px) {
  /* Sıralama satırını sarmalı yap ve kutuyu kendi satırına, tam genişliğe al.
     Sonuç sayısıyla yan yana sıkıştığında "Varsayılan Sıralama" metni okun
     altına giriyordu. */
  .wp-block-group:has(> .wc-block-catalog-sorting) {
    flex-wrap: wrap;
  }
  .wc-block-catalog-sorting {
    flex: 1 0 100%;
    min-width: 0;
    max-width: 100%;
  }
  .woocommerce-ordering {
    min-width: 0;
    max-width: 100%;
  }
  .woocommerce-ordering select.orderby {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px 34px 10px 12px;   /* sağda oka yer ayır */
    border-radius: 10px;
    border: 1px solid var(--color-border, #ddd6c6);
    background: #fff;
    font-family: var(--font-body, inherit);
    font-size: 15px;
  }

  /* Mağaza ızgarasındaki varyasyon açılır kutuları: metin native okun altına
     giriyordu. Sağ dolgu oka yer açar, metin okun üstüne binmeden kesilir. */
  .wc-block-add-to-cart-form select,
  .wp-block-woocommerce-product-collection select,
  ul.products li.product select {
    box-sizing: border-box;
    max-width: 100%;
    padding-right: 30px;
    text-overflow: ellipsis;
  }
}

/* Varyasyonlu ürünlerde "…'den başlayan" eki — fiyattan bir tık silik ve
   küçük, göz önce rakama gitsin (bkz. kebandan-technical.php). */
.kebandan-fiyat-baslangic {
  display: inline-block;
  max-width: 100%;
}
/* 20 Ağu 2026: "165,00 ₺'den başlayan" tek satırda 177px sürüyor, mağaza
   kartı ise mobilde 157px. `white-space: nowrap` sarmayı engellediği için
   metin kartın dışına taşıp `overflow:hidden` ile kesiliyordu.
   Çözüm: ek ifadeyi ALT SATIRA al. Göz önce rakama gidiyor, nitelik altta
   sakin duruyor — hem sığıyor hem okunaklı. */
.kebandan-fiyat-ek {
  display: block;
  font-size: 0.72em;
  font-weight: 400;
  line-height: 1.25;
  color: var(--text-muted, #726F68);
  margin-left: 0;
  margin-top: 1px;
  white-space: normal;
}

/* =============================================================
   MİNİ SEPET (modal) — 20 Ağu 2026
   Sepet ikonuna tıklayınca aynı sayfada özet açılır; alışveriş kesilmez.
   Arka plan bulanıklaştırılıp karartılır, odak sepete çekilir.
   ============================================================= */

.kebandan-mini-sepet-katman[hidden] { display: none; }
.kebandan-mini-sepet-katman {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 16px;
}
.kebandan-mini-sepet-arka {
  position: absolute;
  inset: 0;
  background: rgba(44, 63, 49, 0.45);       /* marka yeşili, yarı saydam */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: kebandan-ms-arka-gir 0.22s ease;
}
@keyframes kebandan-ms-arka-gir { from { opacity: 0; } to { opacity: 1; } }

.kebandan-mini-sepet {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--sand-50, #fbfaf4);
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  animation: kebandan-ms-gir 0.26s cubic-bezier(.16, 1, .3, 1);
}
@keyframes kebandan-ms-gir {
  from { opacity: 0; transform: translateY(-14px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.kebandan-mini-sepet-bas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-border, #ddd6c6);
  background: #fff;
}
.kebandan-mini-sepet-bas h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--brand-green, #2C3F31);
}
.kebandan-mini-sepet-kapat {
  border: 0;
  background: transparent;
  font-size: 30px;
  line-height: 1;
  width: 44px;              /* dokunma hedefi */
  height: 44px;
  cursor: pointer;
  color: var(--text-muted, #726F68);
  border-radius: 50%;
}
.kebandan-mini-sepet-kapat:hover { background: rgba(0,0,0,.05); color: var(--brand-green); }

.kebandan-mini-sepet-govde {
  overflow-y: auto;
  padding: 8px 20px;
  -webkit-overflow-scrolling: touch;
}
.kebandan-mini-sepet-yukleniyor,
.kebandan-ms-bos { padding: 28px 0; text-align: center; color: var(--text-muted); }

.kebandan-ms-satir {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border, #ddd6c6);
  transition: opacity 0.2s ease;
}
.kebandan-ms-satir:last-child { border-bottom: 0; }
.kebandan-ms-gorsel {
  /* !important gerekli: blok tema global olarak img'ye height:auto veriyor,
     kare küçük resim 56x42'ye düşüyordu. */
  width: 56px !important;
  height: 56px !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  background: #eee;
  display: block;
}
.kebandan-ms-ad {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--brand-green) !important;
  text-decoration: none !important;
}
.kebandan-ms-varyasyon-metin {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.kebandan-ms-gramaj {
  margin-top: 6px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 6px 26px 6px 8px;
  font-size: 0.8rem;
  border: 1px solid var(--color-border, #ddd6c6);
  border-radius: 8px;
  background: #fff;
}
.kebandan-ms-adet {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.kebandan-ms-eksi,
.kebandan-ms-arti {
  width: 30px; height: 30px;
  border: 1px solid var(--color-border, #ddd6c6);
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: var(--brand-green);
}
.kebandan-ms-sayi { min-width: 22px; text-align: center; font-weight: 600; }
.kebandan-ms-sil {
  margin-left: 6px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.78rem;
  text-decoration: underline;
  cursor: pointer;
}
.kebandan-ms-sil:hover { color: var(--brand-terracotta, #D23016); }
.kebandan-ms-tutar { font-weight: 700; font-size: 0.9rem; white-space: nowrap; color: var(--brand-terracotta); }

.kebandan-mini-sepet-alt {
  padding: 16px 20px 20px;
  border-top: 1px solid var(--color-border, #ddd6c6);
  background: #fff;
}
.kebandan-mini-sepet-toplam {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1rem;
}
.kebandan-mini-sepet-toplam strong { font-size: 1.15rem; color: var(--brand-terracotta); }
.kebandan-mini-sepet-not { margin: 4px 0 14px; font-size: 0.76rem; color: var(--text-muted); }
.kebandan-mini-sepet-butonlar { display: flex; gap: 10px; }
.kebandan-mini-sepet-devam,
.kebandan-mini-sepet-git {
  flex: 1;
  padding: 13px 14px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  text-decoration: none !important;
  border: 1px solid var(--color-border, #ddd6c6);
}
.kebandan-mini-sepet-devam { background: #fff; color: var(--brand-green) !important; }
.kebandan-mini-sepet-git {
  background: var(--brand-terracotta, #D23016);
  border-color: var(--brand-terracotta, #D23016);
  color: #fff !important;
}
.kebandan-mini-sepet-git:hover { filter: brightness(0.94); }

/* Modal açıkken arka plan kaymasın */
body.kebandan-ms-acik { overflow: hidden; }

@media (max-width: 480px) {
  .kebandan-mini-sepet-katman { padding: 0; align-items: flex-end; }
  .kebandan-mini-sepet {
    max-width: 100%;
    max-height: 88vh;
    border-radius: 18px 18px 0 0;
    animation: kebandan-ms-gir-alt 0.26s cubic-bezier(.16,1,.3,1);
  }
  @keyframes kebandan-ms-gir-alt {
    from { transform: translateY(100%); }
    to   { transform: none; }
  }
}

/* Sepet sayfasında gramaj değiştirici (bkz. kebandan-mini-sepet.php) */
.kebandan-sepet-gramaj-yuva {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 4px;
}
.kebandan-sepet-gramaj-yuva > span {
  font-size: 0.78rem;
  color: var(--text-muted, #726F68);
}
.kebandan-sepet-gramaj {
  box-sizing: border-box;
  max-width: 100%;
  padding: 7px 28px 7px 10px;
  font-size: 0.85rem;
  font-family: var(--font-body, inherit);
  border: 1px solid var(--color-border, #ddd6c6);
  border-radius: 8px;
  background: #fff;
  color: var(--text-strong, #2C3F31);
  cursor: pointer;
}
.kebandan-sepet-gramaj:disabled { opacity: 0.6; cursor: wait; }

/* ---- LOGO OPTİK HİZALAMA (20 Ağu 2026) ----
   Logo kutusu başlıkta geometrik olarak TAM ortalı (kutu merkezi 33px, menü ve
   sepet ikonu da 33px). Buna rağmen göze aşağı kaymış görünüyordu.

   Sebep, logonun İÇİNDEKİ mürekkep dağılımı: K'nın üstündeki yaprak ince bir
   çıkıntı, kutuyu yukarı uzatıyor ama görsel ağırlığı yok. Ölçüm:
     mürekkep KUTUSU merkezi  : görselin tam ortası  (sapma 0)
     mürekkep KÜTLE merkezi   : 62px aşağıda → 38px'e ölçekli +6,3px
     üst %40'ta mürekkebin yalnız %12'si, alt %50'de %72'si

   Yani "kutu ortalı" ama "kütle aşağıda". Göz ikisinin arasını okur, bu yüzden
   iki ölçütün ortası alındı: -3px. Bu değerde kütle merkezi 3,2px aşağıda,
   kutu merkezi 3px yukarıda kalıyor — dengeli.

   transform kullanıldı (margin değil): düzeni ve tıklama alanını bozmuyor.

   YÜZDE kullanıldı (sabit px değil): translateY yüzdesi öğenin KENDİ
   yüksekliğine göre hesaplanır, yani logo boyutu değişince düzeltme de
   kendiliğinden ölçeklenir. 38px'te -3,0px · 52px'te -4,2px.
   Sabit -3px bıraksaydık masaüstünde logo büyüyünce düzeltme eksik kalırdı. */
.kebandan-header .kebandan-logo-link img {
  transform: translateY(-8%);
}

/* =============================================================
   BAŞLIK — MASAÜSTÜNDE BÜYÜTME (20 Ağu 2026)

   Neden: öğeler küçük kalıyordu ve logodaki "dan" hecesinin üstündeki
   yaprak ayıraç 38px yükseklikte seçilemiyordu. Tüm öğeler orantılı
   büyütüldü, aralarındaki dikey hizalama korundu.

     logo        38px → 52px   (yaprak artık okunur boyutta)
     menü metni  14px → 16px
     sepet ikonu 24px → 28px
     iç dolgu    14px → 18px
     ————————————————————————————
     başlık      66px → 88px
     içerik üst boşluğu 82px → 104px (88 + 16 nefes payı)

   MOBİL DEĞİŞMEDİ: kurallar 769px ve üzeriyle sınırlı. Mobilde başlık
   zaten dar ve logo/hamburger/sepet sığıyor; büyütmek yeri daraltırdı.
   ============================================================= */
@media (min-width: 769px) {

  .kebandan-header .alignwide {
    padding: 18px 32px !important;
  }

  .kebandan-logo-link img {
    height: 52px !important;
  }

  .kebandan-header .wp-block-navigation a {
    font-size: 16px !important;
    padding: 8px 2px;
  }

  /* Menü öğeleri arası boşluk da orantılı açılsın */
  .kebandan-header .wp-block-navigation__container {
    gap: 28px !important;
  }

  .kebandan-cart-icon {
    width: 28px;
    height: 28px;
  }
  .kebandan-cart-icon svg {
    width: 26px;
    height: 26px;
  }
  /* Rozet ikonla orantılı büyüsün */
  .kebandan-cart-count {
    font-size: 12px;
    min-width: 18px;
    height: 18px;
    top: -9px;
    right: -11px;
  }

  /* Sabit başlık büyüdü, altındaki içerik de aşağı kaysın */
  .wp-site-blocks > .wp-block-template-part:first-child + * {
    margin-top: 104px !important;
  }
}

/* Kilo bazlı stok göstergeleri (bkz. kebandan-stok.php) */
.kebandan-stok-az,
.kebandan-stok-yok,
.kebandan-stok-var {
  font-size: 0.85rem;
  font-weight: 600;
  margin: 6px 0 0;
}
.kebandan-stok-az  { color: var(--brand-terracotta, #D23016); }
.kebandan-stok-yok { color: var(--text-muted, #726F68); }
.kebandan-stok-var { color: var(--leaf-600, #688736); }

/* İç bağlantı kutusu — ürün sayfası altı (21 Ağu 2026)
   Ürün sayfalarından blog yazılarına giden bağlantı yoktu; içerik planı iki
   yönlü bağlantı istiyor. Kutu sekme/açıklama alanının altına giriyor. */
.kebandan-ilgili-yazilar {
  margin: 40px 0 8px;
  padding: 24px 28px;
  background: var(--sand-50, #fbfaf4);
  border: 1px solid var(--color-border, #ddd6c6);
  border-radius: var(--radius-lg, 16px);
}
.kebandan-ilgili-yazilar__baslik {
  margin: 0 0 14px;
  font-size: 19px;
  line-height: 1.3;
  color: var(--green-800, #2C3F31);
}
.kebandan-ilgili-yazilar__liste {
  margin: 0;
  padding: 0;
  list-style: none;
}
.kebandan-ilgili-yazilar__liste li { margin: 0; }
.kebandan-ilgili-yazilar__liste li + li {
  border-top: 1px solid var(--sand-300, #ddd6c6);
}
.kebandan-ilgili-yazilar__liste a {
  display: block;
  /* 44px dokunma hedefi — mobilde liste öğeleri parmakla seçilebilir olmalı */
  min-height: 44px;
  padding: 11px 0;
  color: var(--green-700, #344b3c);
  text-decoration: none;
  font-size: 16px;
  line-height: 1.45;
}
.kebandan-ilgili-yazilar__liste a:hover,
.kebandan-ilgili-yazilar__liste a:focus-visible {
  color: var(--terracotta-500, #D23016);
  text-decoration: underline;
}
@media (max-width: 600px) {
  .kebandan-ilgili-yazilar { padding: 20px 18px; margin-top: 32px; }
}



/* Çerez tercihleri — iki katmanlı (21 Ağu 2026, yerleşim v2)
   ÖNCEKİ SORUN: özet katmanı yatay flex'ti; butonlar shrink olmadığı için
   metne 766 px'lik kutuda yalnız 214 px kalıyor, metin 8 satırlık dar bir
   sütuna sıkışıyordu. Mobilde ise butonlar sağa yaslı ve her biri kendi
   genişliğindeydi, sol kenar tırtıklı duruyordu.
   ÇÖZÜM: her iki katman da dikey akıyor. Metin tam genişlik, butonlar altta.
   Mobilde butonlar tam genişlik ve alt alta. */
.kebandan-cerez[hidden],
.kebandan-cerez__katman[hidden] { display: none !important; }

.kebandan-cerez {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 9998;                        /* yüzen WhatsApp butonu 9999'da */
  max-width: 640px;
  margin: 0 auto;
  padding: 22px 24px;
  background: var(--brand-cream, #F7F5EF);
  border: 1px solid var(--color-border, #ddd6c6);
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 10px 32px rgba(35, 37, 31, .20);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

.kebandan-cerez__baslik {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--green-800, #2C3F31);
}
.kebandan-cerez__metin p,
.kebandan-cerez__kategori-aciklama {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-900, #23251f);
}
.kebandan-cerez__kategori-aciklama { color: var(--text-muted, #726F68); }
.kebandan-cerez__metin a { color: var(--green-700, #344b3c); text-decoration: underline; }

/* kategoriler (katman 2) */
.kebandan-cerez__kategori {
  padding: 14px 0;
  border-top: 1px solid var(--sand-300, #ddd6c6);
}
.kebandan-cerez__kategori-ust {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 5px;
}
.kebandan-cerez__kategori-ad {
  font-size: 15px; font-weight: 600; color: var(--green-800, #2C3F31); cursor: pointer;
}
.kebandan-cerez__rozet {
  font-size: 12px; font-weight: 600; white-space: nowrap;
  color: var(--green-700, #344b3c);
  background: var(--green-100, #dde8e0);
  padding: 4px 10px; border-radius: 999px;
}

/* anahtar */
.kebandan-cerez__anahtar { position: relative; flex-shrink: 0; cursor: pointer; }
.kebandan-cerez__anahtar input {
  position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer;
}
.kebandan-cerez__anahtar-govde {
  display: block; width: 44px; height: 26px; border-radius: 999px;
  background: var(--sand-400, #c8bda5);
  transition: background var(--dur-fast, .15s) var(--ease-out, ease);
}
.kebandan-cerez__anahtar-govde::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  transition: transform var(--dur-fast, .15s) var(--ease-out, ease);
}
.kebandan-cerez__anahtar input:checked + .kebandan-cerez__anahtar-govde {
  background: var(--leaf-600, #688736);
}
.kebandan-cerez__anahtar input:checked + .kebandan-cerez__anahtar-govde::after {
  transform: translateX(18px);
}
.kebandan-cerez__anahtar input:focus-visible + .kebandan-cerez__anahtar-govde {
  outline: 2px solid var(--green-700, #344b3c); outline-offset: 2px;
}

/* ——— BUTONLAR ———
   Mobil varsayılan: tam genişlik, alt alta. Sol kenar hizalı. */
.kebandan-cerez__butonlar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}
.kebandan-cerez__btn {
  width: 100%;
  min-height: 46px;                     /* 44 px dokunma hedefinin üstünde */
  padding: 12px 20px;
  border-radius: 999px;                 /* marka kuralı: pill */
  border: 1px solid transparent;
  font-size: 15px; font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur-fast, .15s) var(--ease-out, ease);
}
.kebandan-cerez__btn--birincil { background: var(--brand-terracotta, #D23016); color: #fff; }
.kebandan-cerez__btn--birincil:hover { background: var(--terracotta-600, #b32912); }
.kebandan-cerez__btn--ikincil {
  background: transparent; color: var(--green-800, #2C3F31);
  border-color: var(--color-border, #ddd6c6);
}
.kebandan-cerez__btn--ikincil:hover { background: var(--sand-200, #ece8dc); }
.kebandan-cerez__btn:focus-visible {
  outline: 2px solid var(--green-700, #344b3c); outline-offset: 2px;
}

/* alt bilgideki "Çerez tercihleri" bağlantısı — rıza geri alınabilsin */
.kebandan-cerez-ayar-satiri { text-align: center; padding: 0 16px 20px; }
.kebandan-cerez-ayar-satiri a {
  font-size: 13px; color: var(--text-muted, #726F68); text-decoration: underline;
}
.kebandan-cerez-ayar-satiri a:hover { color: var(--green-800, #2C3F31); }

/* ——— MASAÜSTÜ ———
   Metin tam genişlik kalır (dar sütuna sıkışmaz), butonlar altta sağa yaslı
   tek sıra. Genişlik içeriğe göre, hepsi aynı yükseklikte. */
@media (min-width: 560px) {
  .kebandan-cerez { padding: 24px 26px; }
  .kebandan-cerez__butonlar {
    flex-direction: row;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .kebandan-cerez__btn { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .kebandan-cerez__btn,
  .kebandan-cerez__anahtar-govde,
  .kebandan-cerez__anahtar-govde::after { transition: none; }
}

/* Blog yazısı altındaki "Bu yazıda geçen ürünler" kutusu (25 Ağu 2026)
   Ürün -> yazı kutusuyla aynı görsel dil; yön farklı. */
.kebandan-yazi-urunler {
  margin: 44px 0 8px;
  padding: 24px 26px;
  background: var(--green-50, #eef3ef);
  border: 1px solid var(--green-200, #c2d3c7);
  border-radius: var(--radius-lg, 16px);
}
.kebandan-yazi-urunler__baslik {
  margin: 0 0 14px;
  font-size: 19px;
  line-height: 1.3;
  color: var(--green-800, #2C3F31);
}
.kebandan-yazi-urunler__liste { margin: 0; padding: 0; list-style: none; }
.kebandan-yazi-urunler__liste li + li { border-top: 1px solid var(--green-200, #c2d3c7); }
.kebandan-yazi-urunler__liste a {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  min-height: 44px;                    /* dokunma hedefi */
  padding: 11px 0;
  color: var(--green-700, #344b3c);
  text-decoration: none;
  font-size: 16px; line-height: 1.45;
}
.kebandan-yazi-urunler__liste a:hover .kebandan-yazi-urunler__ad,
.kebandan-yazi-urunler__liste a:focus-visible .kebandan-yazi-urunler__ad {
  color: var(--terracotta-500, #D23016); text-decoration: underline;
}
.kebandan-yazi-urunler__rozet {
  font-size: 12px; font-weight: 600; white-space: nowrap;
  color: var(--text-muted, #726F68);
  background: var(--sand-200, #ece8dc);
  padding: 3px 9px; border-radius: 999px;
}
@media (max-width: 600px) {
  .kebandan-yazi-urunler { padding: 20px 18px; margin-top: 32px; }
}

/* ══════════════════════════════════════════════════════════════════
   BLOG TABLOLARI — 25 Ağustos 2026
   İşaretleme `kebandan-tablo.php` tarafından hazırlanıyor.
   Besin bileşimi serisi yayına girene kadar tabloların hiç stili yoktu.
   ══════════════════════════════════════════════════════════════════ */

.kb-tablo {
  margin: 2.5rem 0;
  padding: 0;
}

/* Tablo kendi içinde kayar; sayfa gövdesi asla yana kaymaz. */
.kb-tablo__kaydir {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
}

/* Klavyeyle kaydırılabildiği için odak halkası görünür kalmalı. */
.kb-tablo__kaydir:focus-visible {
  outline: 2px solid var(--brand-terracotta);
  outline-offset: 2px;
}

.kb-tablo table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.95rem;
  line-height: 1.45;
  margin: 0;
}

.kb-tablo thead th {
  background: var(--brand-green);
  color: var(--text-on-dark);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-align: left;
  padding: 0.85rem 1rem;
  white-space: nowrap;
  position: sticky;
  top: 0;
}

.kb-tablo tbody td {
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--sand-200);
  color: var(--text-body);
  vertical-align: top;
}

/* İlk sütun satırın adı; kaydırırken kaybolmaması için sabitleniyor. */
.kb-tablo tbody td:first-child {
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
  position: sticky;
  left: 0;
  background: inherit;
}

.kb-tablo tbody tr {
  background: var(--surface-card);
}

.kb-tablo tbody tr:nth-child(even) {
  background: var(--sand-50);
}

.kb-tablo tbody tr:hover {
  background: var(--green-50);
}

/* Hizalama SÜTUN bazlıdır: gövdesi ağırlıklı sayısal olan sütunda hem
   başlık hem hücreler sağa yaslanır. Önceden yalnız td'ler yaslanıyordu ve
   sütun başlığı ile altındaki sayı ayrı hizada kalıyordu. */
.kb-tablo thead th.kb-sayi,
.kb-tablo td.kb-sayi {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Sayısal sütunda ama kendisi sayı olmayan hücre ("veri yok", "ölçülmemiş"):
   hizası korunur, rengi soluklaşır. */
.kb-tablo td.kb-bos {
  color: var(--text-secondary);
  font-variant-numeric: normal;
}

/* Kaynak notu artık tablonun figcaption'ı. */
.kb-tablo__kaynak {
  margin: 0.75rem 0 0;
  padding-left: 0.9rem;
  border-left: 3px solid var(--leaf-500);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.kb-tablo__kaynak em {
  font-style: normal;
}

@media (max-width: 600px) {
  .kb-tablo { margin: 2rem 0; }
  .kb-tablo table { font-size: 0.88rem; }
  .kb-tablo thead th { padding: 0.7rem 0.75rem; font-size: 0.78rem; }
  .kb-tablo tbody td { padding: 0.6rem 0.75rem; }
}

/* ══════════════════════════════════════════════════════════════════
   BLOG ARŞİV KARTLARI — EŞİT YÜKSEKLİK · 25 Ağustos 2026
   Kartların toplam yüksekliği başlık ve özet uzunluğuna göre
   değişiyordu; ızgarada satır satır tutarsız görünüyordu.

   Aynı sorun ana sayfadaki `.kebandan-blog-preview-grid` için daha önce
   çözülmüştü. Burada o çözüm arşiv ızgarasına taşınıyor: yükseklik
   eşitlenir, başlık iki satırda, özet üç satırda kırpılır, tarih
   kartın altına sabitlenir.

   ⚠️ Kırpma satır sayıları iki ızgarada AYNI tutulmalı. Birini
   değiştirip diğerini unutmak, aynı yazının iki yerde farklı
   uzunlukta görünmesine yol açar.
   ══════════════════════════════════════════════════════════════════ */

/* Izgara hücresi kart yüksekliğini dayatsın. */
.kebandan-blog-grid > li.wp-block-post {
  display: flex;
}

.kebandan-blog-grid .kebandan-blog-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.kebandan-blog-grid .kebandan-blog-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Başlık: her zaman tam iki satır.
   Yalnız -webkit-line-clamp yetmiyor: o bir ÜST sınır koyuyor, tek satırlık
   başlığı iki satıra tamamlamıyordu. 18 yazının 17'sinde başlık iki satır,
   birinde tek satırdı ve tek başına 22 px fark yaratıyordu. min-height ile
   alt sınır da sabitlendi. */
.kebandan-blog-grid .kebandan-blog-card__title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;   /* yedek: satır yüksekliği ~1,3 kabulüyle */
  min-height: 2lh;     /* destekleyen tarayıcıda tam iki satır */
}

/* Özet: her zaman tam üç satır. Aynı gerekçe. */
.kebandan-blog-grid .kebandan-blog-card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 4.65em;
  min-height: 3lh;
}

/* Tarih her kartta aynı hizada, en altta dursun. */
.kebandan-blog-grid .kebandan-blog-card__date {
  margin-top: auto;
  padding-top: 12px;
}