/* =========================================================================
   VIRACUP — Kraft & Yeşil Vadi
   Tek kaynak stil dosyası. Tüm renk/ölçü/tipografi buradan yönetilir.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. YAZI TİPLERİ — kendi sunucumuzda barındırılıyor
   Google Fonts'a istek atılmıyor; ziyaretçi IP'si dışarı çıkmıyor.
   latin + latin-ext altkümeleri var (Türkçe ğ ş ı İ için latin-ext şart).
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo Narrow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/archivo-narrow-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo Narrow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/archivo-narrow-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo Narrow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/archivo-narrow-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo Narrow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/archivo-narrow-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/karla-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/karla-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/karla-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/karla-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/space-mono-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/space-mono-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* -------------------------------------------------------------------------
   1. TASARIM TOKENLARI
   Renk değiştirmek istediğinizde SADECE bu bloğu düzenleyin.
   ------------------------------------------------------------------------- */
:root {
  /* --- Marka paleti (brief'te verilen 6 renk) --- */
  --green-bottle:    #1E3D2F;  /* Koyu şişe yeşili — ana renk */
  --green-moss:      #6B8F71;  /* Yosun yeşili — dekoratif */
  --kraft-brown:     #7A4E2D;  /* Kraft kahverengisi */
  --kraft-cream:     #F3EDE0;  /* Kraft krem — zemin */
  --terracotta:      #D96C3F;  /* Pişmiş toprak turuncusu — vurgu */
  --wa:              #2F8F5B;  /* WhatsApp yeşili */

  /* --- Erişilebilirlik türevleri (WCAG AA) ---
     Yosun yeşili ve terrakota, krem zemin üstünde METİN olarak
     AA'yı geçmiyor (3.11:1 ve 2.92:1). Metin için aşağıdaki
     koyulaştırılmış varyantlar kullanılır — dekoratif kullanımda
     orijinal tonlar korunur. Detay: FAZ 6 notu. */
  --green-moss-ink:  #4E6B54;  /* krem üstünde 5.06:1 ✓ */
  --terracotta-ink:  #8F4319;  /* krem 6.03:1 ✓ | krem-lo 5.41:1 ✓ | turuncu tint 4.76:1 ✓ */
  --terracotta-lite: #E89A72;  /* KOYU zeminlerde metin — şişe yeşili üstünde 5.28:1 ✓ */
  --kraft-brown-ink: #6A4226;  /* krem üstünde 6.1:1  ✓ */
  --wa-ink:          #27784C;  /* beyaz metin taşıyan zeminler 5.42:1 ✓ */

  /* --- Yüzeyler --- */
  --cream:        var(--kraft-cream);
  --cream-hi:     #FAF6EE;   /* açık kart zemini */
  --cream-lo:     #E9E1D1;   /* koyu şerit / alternatif bölüm */
  --cream-deep:   #DED4C0;   /* en koyu kağıt tonu */
  --ink:          #1B1A14;   /* gövde metni */
  --ink-soft:     #4A4A42;   /* ikincil metin — krem üstünde 8.0:1 ✓ */
  --line:         #C9BFA9;   /* ince ayraç */

  /* --- Tipografi --- */
  --font-head:  "Archivo Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body:  "Karla", "Helvetica Neue", Arial, sans-serif;
  --font-mono:  "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Akışkan tipografi skalası — TÜM sayfalarda aynı.
     Mobil taban → masaüstü tavan. */
  --fs-h1:    clamp(2.25rem, 1.35rem + 3.85vw, 4rem);      /* 36 → 64 */
  --fs-h2:    clamp(1.75rem, 1.32rem + 1.85vw, 2.5rem);    /* 28 → 40 */
  --fs-h3:    clamp(1.375rem, 1.16rem + 0.93vw, 2rem);     /* 22 → 32 */
  --fs-h4:    clamp(1.125rem, 1.03rem + 0.4vw, 1.375rem);  /* 18 → 22 */
  --fs-lead:  clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);    /* 17 → 20 */
  --fs-body:  1rem;                                        /* 16 — iOS zoom eşiği */
  --fs-sm:    0.9375rem;                                   /* 15 */
  --fs-stamp: 0.875rem;                                    /* 14 */

  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-body:  1.6;

  /* --- Spacing skalası (4px / 8px grid) --- */
  --sp-1:  0.25rem;   /*  4 */
  --sp-2:  0.5rem;    /*  8 */
  --sp-3:  0.75rem;   /* 12 */
  --sp-4:  1rem;      /* 16 */
  --sp-5:  1.25rem;   /* 20 */
  --sp-6:  1.5rem;    /* 24 */
  --sp-8:  2rem;      /* 32 */
  --sp-10: 2.5rem;    /* 40 */
  --sp-12: 3rem;      /* 48 */
  --sp-16: 4rem;      /* 64 */
  --sp-24: 6rem;      /* 96 */

  /* Bölüm dikey boşluğu — mobilde 64, masaüstünde 120 */
  --section-y: clamp(var(--sp-16), 8vw, 7.5rem);
  --gutter:    var(--sp-6);
  --page-x:    clamp(var(--sp-4), 4vw, var(--sp-16));
  --maxw:      1280px;
  --maxw-text: 68ch;

  /* --- Şekil --- */
  --radius-cup: 24px 24px 0 0;   /* bardak ağzı: üst yuvarlak, alt keskin */
  --radius-cup-sm: 16px 16px 0 0;
  --torn-h: 28px;
  --torn-mask: url("../img/torn-edge.svg");
  --torn-mask-alt: url("../img/torn-edge-alt.svg");

  /* --- Hareket --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 160ms var(--ease);
  --t:      220ms var(--ease);
  --t-slow: 320ms var(--ease);

  /* --- Derinlik: "mürekkep taşması" ofsetleri --- */
  --ink-bleed:    3px 3px 0 0 var(--green-bottle);
  --ink-bleed-lg: 6px 6px 0 0 var(--green-bottle);
  --shadow-soft:  0 6px 20px rgba(30, 61, 47, 0.16);
  --shadow-lift:  0 14px 32px rgba(30, 61, 47, 0.22);

  /* --- Mobil WhatsApp çubuğu yüksekliği (içerik altına padding için) --- */
  --wabar-h: 0px;
}

/* -------------------------------------------------------------------------
   2. RESET / TABAN
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 108px; /* sabit header altında kalmasın */
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background-color: var(--cream);
  /* Kraft kağıt: mikro delik deseni + kağıt lifi dokusu */
  background-image:
    radial-gradient(circle, rgba(30, 61, 47, 0.055) 1px, transparent 1px);
  background-size: 8px 8px;
  overflow-x: hidden;           /* yatay taşma güvenliği */
  padding-bottom: var(--wabar-h);
  -webkit-font-smoothing: antialiased;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--terracotta); color: #fff; }

/* -------------------------------------------------------------------------
   3. TİPOGRAFİ
   ------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--green-bottle);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-snug); letter-spacing: -0.01em; }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-snug); }

p { margin: 0 0 var(--sp-4); max-width: var(--maxw-text); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-soft);
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-stamp);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-stamp);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta-ink);
  margin: 0 0 var(--sp-3);
}

/* -------------------------------------------------------------------------
   4. LAYOUT
   ------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--page-x);
}

.section {
  --section-bg: transparent;
  position: relative;
  padding-block: var(--section-y);
  background-color: var(--section-bg);
}
.section--cream-lo   { --section-bg: var(--cream-lo); }
.section--deep       { --section-bg: var(--green-bottle); color: var(--cream); }
.section--deep .eyebrow { color: var(--terracotta-lite); }
.section--deep .lead    { color: rgba(243, 237, 224, 0.86); }
.section--deep h1, .section--deep h2,
.section--deep h3, .section--deep h4 { color: var(--cream); }
.section--tight      { padding-block: clamp(var(--sp-12), 5vw, var(--sp-16)); }

/* --- Kapanış CTA --- */
/* Bölüm AÇIK kalır, içindeki kart koyudur. Böylece koyu yeşil footer ile
   arada krem bir şerit oluşur ve iki koyu blok birbirine yapışmaz. */
.section--cta {
  /* Kendi kağıt tonu: hem --cream hem --cream-lo bölümlerinden ayrışır,
     böylece önceki bölüm ne olursa olsun net bir bant oluşur. */
  --section-bg: var(--cream-deep);
  padding-block: clamp(var(--sp-12), 5.5vw, var(--sp-16));
}

.cta-card {
  position: relative;
  display: grid;
  gap: var(--sp-8);
  align-items: center;
  grid-template-columns: 1fr;
  padding: clamp(var(--sp-8), 5vw, var(--sp-16));
  background: var(--green-bottle);
  color: var(--cream);
  border: 2px solid var(--green-bottle);
  border-radius: var(--radius-cup);
  box-shadow: 8px 8px 0 0 var(--green-moss);
}
@media (min-width: 860px) { .cta-card { grid-template-columns: 1fr auto; } }

.cta-card h2 { color: var(--cream); margin-bottom: var(--sp-4); }
.cta-card .eyebrow { color: var(--terracotta-lite); }
.cta-card .lead { color: rgba(243, 237, 224, 0.86); margin-bottom: var(--sp-8); }
.cta-card .cluster { margin: 0; }
.cta-card__aside {
  display: flex;
  justify-content: center;
  align-items: center;
  /* döndürülmüş mühür layout genişliğini aşıyor, kenarda pay bırak */
  padding-inline: var(--sp-4);
}

/* --- Belge / rozet şeridi --- */
.certs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cert {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 1 1 210px;
  padding: var(--sp-4) var(--sp-5);
  background: var(--cream-hi);
  border: 2px solid var(--green-bottle);
  border-radius: var(--radius-cup-sm);
  transition: transform var(--t), box-shadow var(--t);
}
.cert:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.cert svg { width: 30px; height: 30px; flex: none; color: var(--kraft-brown-ink); }
.cert b {
  display: block;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--green-bottle);
  line-height: 1.2;
}
.cert span {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Yırtık kraft kağıt ayracı — düz çizgi yerine bunu kullan */
.section--torn::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: calc(-1 * var(--torn-h) + 1px);
  height: var(--torn-h);
  background-color: var(--section-bg);
  -webkit-mask: var(--torn-mask) repeat-x center bottom / 1200px 100%;
  mask: var(--torn-mask) repeat-x center bottom / 1200px 100%;
  z-index: 2;
  pointer-events: none;
}
.section--torn-alt::after {
  -webkit-mask-image: var(--torn-mask-alt);
  mask-image: var(--torn-mask-alt);
}

.section-head { margin-bottom: var(--sp-12); max-width: var(--maxw-text); }
.section-head p:last-child { margin-bottom: 0; }

.grid { display: grid; gap: var(--gutter); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid--regions { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* -------------------------------------------------------------------------
   5. HEADER / NAVİGASYON
   ------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100%;
  z-index: 200;
  background: var(--terracotta-ink);
  color: #fff;
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--font-mono);
  font-weight: 700;
  text-decoration: none;
  transition: top var(--t);
}
.skip-link:focus { top: var(--sp-4); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--green-bottle);
  color: var(--cream);
}
/* Header'ın altına yırtık kraft kenarı */
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: calc(-1 * var(--torn-h) + 1px);
  height: var(--torn-h);
  background-color: var(--green-bottle);
  -webkit-mask: var(--torn-mask) repeat-x center bottom / 1200px 100%;
  mask: var(--torn-mask) repeat-x center bottom / 1200px 100%;
  pointer-events: none;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 80px;
  padding-block: var(--sp-2);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 44px;              /* dokunma hedefi ≥44px */
  padding-block: var(--sp-1);
  text-decoration: none;
  color: var(--cream);
  transition: opacity var(--t);
}
.brand:hover { opacity: 0.85; }
.brand img { height: 60px; width: auto; object-fit: contain; }
@media (max-width: 600px) {
  .brand img { height: 46px; }
  .header-inner { min-height: 68px; }
}
/* Footer'da daha büyük */
.site-footer .brand img { height: 88px; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;      /* dokunma hedefi ≥44px */
  background: none;
  border: 2px solid rgba(243, 237, 224, 0.35);
  color: var(--cream);
  cursor: pointer;
  padding: 0;
  transition: border-color var(--t), background-color var(--t);
}
.nav-toggle:hover { border-color: var(--terracotta); background: rgba(217, 108, 63, 0.18); }
.nav-toggle-bars { display: block; width: 20px; height: 14px; position: relative; }
.nav-toggle-bars i {
  position: absolute; left: 0;
  display: block; width: 100%; height: 2px;
  background: currentColor;
  transition: transform var(--t), opacity var(--t-fast);
}
.nav-toggle-bars i:nth-child(1) { top: 0; }
.nav-toggle-bars i:nth-child(2) { top: 6px; }
.nav-toggle-bars i:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-menu { display: flex; align-items: center; gap: var(--sp-2); }
.nav-menu a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  font-weight: 600;
  text-decoration: none;
  color: rgba(243, 237, 224, 0.86);
  border-bottom: 2px solid transparent;
  transition: color var(--t), border-color var(--t), transform var(--t);
}
.nav-menu a:hover { color: #fff; border-bottom-color: var(--terracotta); transform: translateY(-2px); }
.nav-menu a[aria-current="page"] { color: #fff; border-bottom-color: var(--terracotta); }

@media (max-width: 900px) {
  .nav-menu {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--green-bottle);
    padding: var(--sp-2) var(--page-x) var(--sp-6);
    border-top: 1px solid rgba(243, 237, 224, 0.15);
    box-shadow: var(--shadow-soft);
    /* kapalı durum */
    display: none;
  }
  .nav-menu[data-open="true"] { display: flex; }
  .nav-menu a {
    min-height: 52px;
    padding-inline: 0;
    border-bottom: 1px solid rgba(243, 237, 224, 0.12);
    font-size: 1.0625rem;
  }
  .nav-menu a:hover { transform: none; border-bottom-color: var(--terracotta); }
}
@media (min-width: 901px) {
  .nav-toggle { display: none; }
}

/* -------------------------------------------------------------------------
   6. BUTONLAR
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 48px;                       /* dokunma hedefi */
  padding: var(--sp-3) var(--sp-6);
  font-family: var(--font-mono);
  font-size: var(--fs-stamp);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border: 2px solid var(--green-bottle);
  border-radius: 0;
  background: var(--green-bottle);
  color: var(--cream);
  cursor: pointer;
  box-shadow: var(--ink-bleed);
  transition: transform var(--t), box-shadow var(--t),
              background-color var(--t), color var(--t), border-color var(--t);
}
.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--ink-bleed-lg);
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: #fff;
}
.btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 0 var(--green-bottle); }

.btn--wa {
  background: var(--wa-ink);              /* beyaz metinle AA geçen ton */
  border-color: var(--wa-ink);
  color: #fff;
  box-shadow: 3px 3px 0 0 var(--green-bottle);
}
.btn--wa:hover { background: var(--terracotta); border-color: var(--terracotta); }

.btn--ghost {
  background: transparent;
  color: var(--green-bottle);
  box-shadow: none;
}
.btn--ghost:hover { background: var(--green-bottle); color: var(--cream); border-color: var(--green-bottle); }

.btn--on-dark {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--green-bottle);
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.35);
}
.btn--on-dark:hover { background: var(--terracotta); border-color: var(--terracotta); color: #fff; }

/* Koyu zemin üstündeki ghost buton */
.btn--on-deep { color: var(--cream); border-color: var(--cream); }
.btn--on-deep:hover { background: var(--terracotta); border-color: var(--terracotta); color: #fff; }

/* Adres, e-posta, kullanıcı adı gibi birebir yazılması gereken metinler:
   büyük harfe çevirme (Türkçe'de i→İ dönüşümü yanlış sonuç veriyor). */
.btn--asis {
  text-transform: none;
  letter-spacing: 0.02em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sm);
}

.btn--block { width: 100%; }
.btn--sm { min-height: 44px; padding: var(--sp-2) var(--sp-4); font-size: 0.8125rem; }

.btn .ico { width: 1.15em; height: 1.15em; flex: none; transition: transform var(--t); }
.btn:hover .ico--arrow { transform: translateX(4px); }

/* -------------------------------------------------------------------------
   7. KARTLAR — bardak ağzı motifi (üst yuvarlak, alt keskin)
   Tüm kart tiplerinde AYNI temel: .card
   ------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--cream-hi);
  border: 2px solid var(--green-bottle);
  border-radius: var(--radius-cup);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), background-color var(--t);
}
.card__media {
  position: relative;
  /* Ürün fotoğrafları dikey (3:4) çekildi — yatay kırpmak bardağın
     üstünü/altını kesiyordu, bu yüzden slot dikeye çevrildi. */
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--cream-deep);
  border-bottom: 2px solid var(--green-bottle);
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  flex: 1 1 auto;
}
.card__body > p { margin-bottom: 0; }
/* damga içeriğine sarılsın — flex sütununda gerilmesin */
.card__body > .stamp { align-self: flex-start; }
.card__title { margin: 0; }
.card__foot { margin-top: auto; padding-top: var(--sp-4); }

/* Ürün kartı: hacim ve cidar satırı */
.urun-hacim {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--terracotta-ink);
  margin: 0;
}
.urun-cidar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}
.urun-cidar .ico { width: 15px; height: 15px; flex: none; color: var(--kraft-brown-ink); }
.urun-min {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-moss-ink);
  margin: 0;
}
.urun-min .ico { width: 15px; height: 15px; flex: none; color: var(--green-moss-ink); }

/* Hover/focus: hafif kalkma + gölge artışı (200–250ms) */
.card:hover,
.card:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}
.card:hover .card__media img { transform: scale(1.05); }

/* Kartın altında ilerleyen mürekkep çizgisi */
.card::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 4px; width: 100%;
  background: var(--terracotta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow);
}
.card:hover::after, .card:focus-within::after { transform: scaleX(1); }

/* Varyantlar */
.card--flat   { background: var(--cream); }
.card--moss   { background: color-mix(in srgb, var(--green-moss) 16%, transparent); }

/* Kart içi ikon kutusu */
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border: 2px solid var(--green-bottle);
  border-radius: 14px 14px 0 0;
  background: var(--cream);
  color: var(--green-bottle);
  flex: none;
  transition: background-color var(--t), color var(--t);
}
.card:hover .card__icon { background: var(--terracotta); border-color: var(--terracotta); color: #fff; }
.card__icon svg { width: 26px; height: 26px; }

/* -------------------------------------------------------------------------
   8. ROZET / MÜREKKEP DAMGASI
   ------------------------------------------------------------------------- */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--green-bottle);
  border: 2px solid currentColor;
  background: rgba(243, 237, 224, 0.6);
  transform: rotate(-2deg);
  /* dokulu mürekkep: kenarlarda hafif kopma */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  transition: transform var(--t), background-color var(--t), color var(--t);
}
.stamp:nth-of-type(even) { transform: rotate(2deg); }
.stamp--terracotta { color: var(--terracotta-ink); background: color-mix(in srgb, var(--terracotta) 14%, transparent); }
.stamp--moss       { color: var(--green-moss-ink); background: color-mix(in srgb, var(--green-moss) 16%, transparent); }
.stamp--brown      { color: var(--kraft-brown-ink);
                     background: color-mix(in srgb, var(--kraft-brown) 12%, transparent);
                     border-color: color-mix(in srgb, var(--kraft-brown) 55%, transparent); }

/* Damga dokusu: mürekkebin eksik bastığı noktalar */
.stamp::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 18% 30%, rgba(255,255,255,0.55) 0.7px, transparent 0.8px),
    radial-gradient(circle at 72% 66%, rgba(255,255,255,0.45) 0.6px, transparent 0.7px),
    radial-gradient(circle at 45% 82%, rgba(255,255,255,0.4)  0.5px, transparent 0.6px);
  background-size: 7px 7px, 11px 11px, 9px 9px;
  opacity: 0.9;
}
.stamp { position: relative; }

a.stamp:hover, button.stamp:hover { transform: rotate(0deg) scale(1.04); }

/* Yuvarlak "onay damgası" — Yerli Üretim vb. */
.stamp-seal {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 108px; height: 108px;
  padding: var(--sp-3);
  border: 3px double var(--terracotta-ink);
  border-radius: 50%;
  color: var(--terracotta-ink);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
  transform: rotate(-8deg);
  background: rgba(217, 108, 63, 0.08);
  transition: transform var(--t);
}
.stamp-seal:hover { transform: rotate(-3deg) scale(1.05); }
/* --- Mürekkep mührü (CTA kartı) --- */
.muhur {
  width: clamp(170px, 24vw, 250px);
  height: auto;
  color: var(--terracotta-lite);
  transform: rotate(-9deg);
  overflow: visible;
  transition: transform var(--t-slow);
}
.cta-card:hover .muhur { transform: rotate(-4deg) scale(1.04); }

.muhur__dis {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-dasharray: 2 7;
  stroke-linecap: round;
  opacity: 0.75;
}
.muhur__ic {
  fill: rgba(232, 154, 114, 0.09);
  stroke: currentColor;
  stroke-width: 3;
}
.muhur__nokta { fill: currentColor; opacity: 0.8; }
.muhur__cizgi { stroke: currentColor; stroke-width: 1.5; opacity: 0.55; }

.muhur__yay {
  fill: currentColor;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 5px;
  text-anchor: middle;
}
.muhur__ana {
  fill: currentColor;
  font-family: var(--font-head);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-anchor: middle;
}
.muhur__alt {
  fill: currentColor;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 6px;
  text-anchor: middle;
  opacity: 0.9;
}

@media (max-width: 859px) {
  .muhur { width: clamp(150px, 42vw, 200px); }
}
@media (prefers-reduced-motion: reduce) {
  .cta-card:hover .muhur { transform: rotate(-9deg); }
}

/* -------------------------------------------------------------------------
   9. HERO
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(var(--sp-12), 6vw, var(--sp-24));
  background-color: var(--cream);
}
.hero__grid {
  display: grid;
  gap: clamp(var(--sp-8), 5vw, var(--sp-16));
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; }
}
.hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-6); }
.hero__content h1 { margin: 0; }
.hero__content h1 .accent { color: var(--green-moss-ink); display: block; }
.hero__content p { margin: 0; }

.hero__media { position: relative; }
.hero__media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 2px solid var(--green-bottle);
  border-radius: var(--radius-cup);
  position: relative;
  z-index: 1;
}
/* mürekkep taşması ofseti */
.hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(14px, 14px);
  border: 2px solid var(--green-moss);
  border-radius: var(--radius-cup);
  z-index: 0;
}
.hero__seal { position: absolute; right: -14px; bottom: -22px; z-index: 3; background: var(--cream); }

@media (max-width: 600px) {
  .hero__media img { aspect-ratio: 4 / 3; }
  .hero__seal { width: 84px; height: 84px; font-size: 0.5625rem; right: -6px; bottom: -16px; }
}

/* -------------------------------------------------------------------------
   10. ÜRÜN ŞERİDİ — mobilde scroll-snap, masaüstünde grid
   ------------------------------------------------------------------------- */
.rail {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
/* 3 ve 6 kartlı şeritler: 3 sütun → satır sonunda tek kart kalmasın */
.rail--3up { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }

@media (max-width: 767px) {
  .rail {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--page-x);
    /* kenarlara taşırıp tam genişlik şerit hissi ver */
    margin-inline: calc(-1 * var(--page-x));
    padding-inline: var(--page-x);
    padding-bottom: var(--sp-4);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .rail > * {
    flex: 0 0 min(78vw, 300px);
    scroll-snap-align: start;
  }
  .rail::-webkit-scrollbar { height: 6px; }
  .rail::-webkit-scrollbar-track { background: var(--cream-deep); }
  .rail::-webkit-scrollbar-thumb { background: var(--green-moss); }
  /* mobilde hover kalkması yerine düz dursun */
  .rail .card:hover { transform: none; }
}

.rail-hint {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (max-width: 767px) { .rail-hint { display: flex; } }

/* -------------------------------------------------------------------------
   11. AKORDİYON — bölgeler (mobil) / tam grid (masaüstü)
   ------------------------------------------------------------------------- */
.region { border: 2px solid var(--green-bottle); border-radius: var(--radius-cup); background: var(--cream-hi); overflow: hidden; }
/* Aynı gün teslimat yapılan öncelikli iller */
.region--priority { box-shadow: 6px 6px 0 0 var(--terracotta); }
.region--priority .region__head { background: color-mix(in srgb, var(--terracotta) 10%, transparent); }

.region__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  min-height: 56px;
  padding: var(--sp-4) var(--sp-5);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-head);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--green-bottle);
  transition: background-color var(--t);
}
.region__head:hover { background: rgba(107, 143, 113, 0.14); }
.region__chev {
  flex: none;
  width: 24px; height: 24px;
  transition: transform var(--t);
  color: var(--terracotta-ink);
}
.region__head[aria-expanded="true"] .region__chev { transform: rotate(180deg); }

.region__panel { padding: 0 var(--sp-5) var(--sp-5); }
.region__panel[hidden] { display: none; }

.ilce-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
}
.ilce-list li {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--line);
  background: var(--cream);
  color: var(--ink-soft);
}

/* Masaüstünde akordiyon açık ve buton pasif görünür */
@media (min-width: 768px) {
  .region__head { cursor: default; pointer-events: none; }
  .region__chev { display: none; }
  .region__panel[hidden] { display: block !important; }
}

/* --- Yasal metin sayfaları (gizlilik / KVKK) --- */
.legal { max-width: 78ch; }
.legal h2 { margin-top: var(--sp-12); }
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { margin-top: var(--sp-8); font-size: var(--fs-h4); }
.legal ul, .legal ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-6); }
/* Cümle içi linkler — WCAG 2.5.5'in "inline" istisnası kapsamında,
   yine de belirgin ve rahat dokunulur olsun */
.legal a {
  color: var(--terracotta-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  padding: 2px 1px;
  transition: color var(--t), background-color var(--t);
}
.legal a:hover { color: #fff; background: var(--terracotta-ink); }
.legal li { margin-bottom: var(--sp-2); }
.legal table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--sp-6);
  font-size: var(--fs-sm);
}
.legal th, .legal td {
  border: 1px solid var(--line);
  padding: var(--sp-3);
  text-align: left;
  vertical-align: top;
}
.legal th { background: var(--cream-lo); font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
.legal .table-scroll { overflow-x: auto; }
/* Tıklanabilir iletişim çipi — dokunma hedefi ≥44px */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--green-bottle);
  background: var(--cream-hi);
  border: 2px solid var(--green-bottle);
  border-radius: 12px 12px 0 0;
  transition: transform var(--t), background-color var(--t), color var(--t);
}
.chip:hover {
  transform: translateY(-2px);
  background: var(--green-bottle);
  color: var(--cream);
}
.chip .ico { width: 17px; height: 17px; flex: none; }

.legal-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: var(--sp-4) var(--sp-5);
  border-left: 4px solid var(--terracotta);
  background: var(--cream-lo);
  margin-bottom: var(--sp-10);
}

/* --- Kırıntı navigasyonu (breadcrumb) --- */
.kirinti {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.kirinti a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* dokunma hedefi */
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding: 0 2px;
  transition: color var(--t), border-color var(--t);
}
.kirinti span[aria-current] { display: inline-flex; align-items: center; min-height: 44px; }
.kirinti a:hover { color: var(--terracotta-ink); border-color: var(--terracotta-ink); }
.kirinti span[aria-current] { color: var(--green-bottle); font-weight: 700; }
/* Ayraç metin düğümü değil, CSS ile üretiliyor */
.kirinti > *:not(:first-child)::before {
  content: "/";
  margin-right: var(--sp-2);
  color: var(--line);
}

/* --- SSS --- */
.sss { max-width: 78ch; }
.sss-madde {
  padding: var(--sp-8) 0;
  border-bottom: 1px solid var(--line);
}
.sss-madde:first-child { padding-top: 0; }
.sss-madde:last-child { border-bottom: 0; }
.sss-soru {
  font-size: var(--fs-h4);
  font-weight: 700;
  margin-bottom: var(--sp-4);
  padding-left: var(--sp-8);
  position: relative;
}
.sss-soru::before {
  content: "?";
  position: absolute;
  left: 0;
  top: -2px;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: #fff;
  background: var(--terracotta-ink);
  border-radius: 8px 8px 0 0;
}
.sss-cevap { padding-left: var(--sp-8); }
.sss-cevap p, .sss-cevap ul, .sss-cevap ol { margin-bottom: var(--sp-3); }
.sss-cevap > :last-child { margin-bottom: 0; }
.sss-cevap ul, .sss-cevap ol { padding-left: var(--sp-6); }
.sss-cevap li { margin-bottom: var(--sp-2); }
.sss-cevap a {
  color: var(--terracotta-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}
/* Kendi paragrafında tek başına duran yönlendirme bağlantısı:
   cümle içi değil, gerçek bir aksiyon → ≥44px hedef */
/* Kendi satırında duran yönlendirme bağlantısı — cümle içi link DEĞİL.
   :only-child kullanılamaz: CSS metin düğümlerini kardeş saymaz, o yüzden
   cümlenin ortasındaki tek <a> de eşleşiyordu. Açık sınıf gerekiyor. */
a.devam {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-2);
  text-decoration: none;
  border: 2px solid var(--terracotta-ink);
  border-radius: 12px 12px 0 0;
  transition: background-color var(--t), color var(--t), transform var(--t);
}
a.devam:hover {
  background: var(--terracotta-ink);
  color: #fff;
  transform: translateY(-2px);
}
@media (max-width: 600px) {
  .sss-soru, .sss-cevap { padding-left: 0; }
  .sss-soru::before { position: static; display: inline-grid; margin-right: var(--sp-2); vertical-align: middle; }
}

/* Rehber içi vurgu kutusu — cümle içerir, büyük harfe çevrilmez */
.ipucu {
  padding: var(--sp-5) var(--sp-6);
  margin: var(--sp-10) 0;
  background: var(--cream-lo);
  border-left: 4px solid var(--terracotta);
  border-radius: 0 12px 0 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.ipucu > :last-child { margin-bottom: 0; }
.ipucu strong { color: var(--green-bottle); }
.ipucu-hesap {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  margin-top: var(--sp-3);
  color: var(--terracotta-ink);
}

/* --- Rehber makaleleri --- */
.rehber h2 { margin-top: var(--sp-12); }
.rehber h3 { margin-top: var(--sp-8); color: var(--green-moss-ink); }
.rehber .lead { margin-bottom: var(--sp-8); }
.rehber code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--cream-deep);
  padding: 1px 5px;
  border-radius: 3px;
}
.rehber ol { counter-reset: adim; list-style: none; padding-left: 0; }
.rehber ol > li {
  position: relative;
  padding-left: var(--sp-10);
  margin-bottom: var(--sp-4);
}
.rehber ol > li::before {
  counter-increment: adim;
  content: counter(adim);
  position: absolute;
  left: 0; top: 0;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fff;
  background: var(--green-bottle);
  border-radius: 9px 9px 0 0;
}

/* -------------------------------------------------------------------------
   12. FORM
   ------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.field label {
  font-family: var(--font-mono);
  font-size: var(--fs-stamp);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-bottle);
}
.field input, .field textarea, .field select {
  width: 100%;
  min-height: 48px;
  padding: var(--sp-3) var(--sp-4);
  font-size: 1rem;                 /* ≥16px: iOS otomatik zoom'u engeller */
  font-family: var(--font-body);
  background: var(--cream-hi);
  border: 2px solid var(--green-bottle);
  border-radius: 0;
  color: var(--ink);
  transition: border-color var(--t), background-color var(--t), box-shadow var(--t);
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: #8A8478; }
.field input:hover, .field textarea:hover, .field select:hover { background: #fff; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--terracotta);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(217, 108, 63, 0.28);
}
.field-hint { font-size: var(--fs-sm); color: var(--ink-soft); }

/* --- Harita (Leaflet + OpenStreetMap) --- */
.map-wrap {
  position: relative;
  border: 2px solid var(--green-bottle);
  border-radius: var(--radius-cup);
  overflow: hidden;
  background: var(--cream-lo);
}
#harita {
  height: clamp(280px, 42vw, 440px);
  width: 100%;
  background: var(--cream-lo);
}
/* Tile'lar yüklenene kadar görünen bilgi */
.map-wrap[data-loaded="false"]::after {
  content: "Harita yükleniyor…";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-stamp);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  pointer-events: none;
}
/* Leaflet'in kendi kontrollerini markaya uydur */
.leaflet-container { font-family: var(--font-body); }
.leaflet-control-zoom a {
  color: var(--green-bottle) !important;
  border-radius: 0 !important;
  font-weight: 700;
}
.leaflet-control-attribution {
  background: rgba(243, 237, 224, 0.9) !important;
  font-size: 10px !important;
}
.leaflet-popup-content-wrapper {
  border-radius: 12px 12px 0 0;
  border: 2px solid var(--green-bottle);
  background: var(--cream-hi);
}
.leaflet-popup-content { margin: var(--sp-4); font-size: var(--fs-sm); line-height: 1.5; }
.leaflet-popup-tip { border: 2px solid var(--green-bottle); background: var(--cream-hi); }

/* -------------------------------------------------------------------------
   13. WHATSAPP — masaüstü FAB + mobil sabit çubuk
   ------------------------------------------------------------------------- */
.wa-fab {
  position: fixed;
  right: var(--sp-6);
  bottom: var(--sp-6);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--wa);
  color: #fff;
  box-shadow: var(--shadow-soft);
  transition: transform var(--t), box-shadow var(--t), background-color var(--t);
}
.wa-fab:hover { transform: translateY(-4px) scale(1.05); box-shadow: var(--shadow-lift); background: var(--wa-ink); }
.wa-fab svg { width: 30px; height: 30px; }

.wa-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  display: none;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  background: var(--green-bottle);
  border-top: 2px solid var(--green-moss);
  box-shadow: 0 -6px 20px rgba(30, 61, 47, 0.25);
}
.wa-bar__text {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
}
.wa-bar__text b { display: block; font-size: 0.875rem; color: #fff; }
.wa-bar .btn { flex: none; min-height: 48px; }

@media (max-width: 767px) {
  .wa-fab { display: none; }
  .wa-bar { display: flex; }
  /* içerik sabit çubuğun altında kalmasın */
  :root { --wabar-h: 84px; }
}

/* --- Çerez onay bandı --- */
.cookie-bar {
  position: fixed;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 120;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
  max-width: 840px;
  margin-inline: auto;
  padding: var(--sp-5) var(--sp-6);
  background: var(--green-bottle);
  color: var(--cream);
  border: 2px solid var(--green-moss);
  border-radius: var(--radius-cup);
  box-shadow: 0 12px 40px rgba(30, 61, 47, 0.4);
  transform: translateY(140%);
  opacity: 0;
  transition: transform var(--t-slow), opacity var(--t-slow);
}
.cookie-bar[data-acik="true"] { transform: translateY(0); opacity: 1; }

.cookie-bar__text {
  flex: 1 1 340px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: rgba(243, 237, 224, 0.86);
}
.cookie-bar__text b {
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--font-head);
  font-size: 1.125rem;
  color: var(--cream);
}
.cookie-bar__text a {
  color: var(--terracotta-lite);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.cookie-bar__actions {
  display: flex;
  gap: var(--sp-3);
  flex: 0 0 auto;
}

/* Mobilde WhatsApp çubuğunun üstünde dursun */
@media (max-width: 767px) {
  .cookie-bar {
    bottom: calc(var(--wabar-h) + var(--sp-3));
    padding: var(--sp-4);
    gap: var(--sp-4);
  }
  .cookie-bar__actions { width: 100%; }
  .cookie-bar__actions .btn { flex: 1 1 0; }
}

/* -------------------------------------------------------------------------
   14. FOOTER
   ------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  background: var(--green-bottle);
  color: rgba(243, 237, 224, 0.78);
  padding-block: var(--sp-16) var(--sp-10);
  margin-top: var(--torn-h);
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(-1 * var(--torn-h) + 1px);
  height: var(--torn-h);
  background-color: var(--green-bottle);
  -webkit-mask: var(--torn-mask-alt) repeat-x center top / 1200px 100%;
  mask: var(--torn-mask-alt) repeat-x center top / 1200px 100%;
  transform: scaleY(-1);
  pointer-events: none;
}
.footer-grid {
  display: grid;
  gap: var(--sp-10);
  grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1.1fr 1.2fr; } }

.site-footer h3 {
  font-family: var(--font-mono);
  font-size: var(--fs-stamp);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta-lite);
  margin-bottom: var(--sp-4);
}
.site-footer .brand span { font-size: 1.375rem; }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  color: rgba(243, 237, 224, 0.78);
  transition: color var(--t), transform var(--t);
}
.footer-links a:hover,
.footer-linkbtn:hover { color: var(--terracotta); transform: translateX(4px); }

/* Çerez tercihi — JS aksiyonu olduğu için <a href="#"> değil <button> */
.footer-linkbtn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  color: rgba(243, 237, 224, 0.78);
  cursor: pointer;
  transition: color var(--t), transform var(--t);
}

/* İletişim sütunu — ikonlu satırlar */
.footer-links--contact a { gap: var(--sp-3); word-break: break-word; }
.footer-links--contact .ico {
  width: 18px; height: 18px;
  flex: none;
  color: var(--terracotta-lite);
}

.footer-bottom {
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(243, 237, 224, 0.18);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: rgba(243, 237, 224, 0.62);   /* koyu yeşil üstünde 5.9:1 ✓ */
}

/* -------------------------------------------------------------------------
   15. ERİŞİLEBİLİRLİK & HAREKET
   ------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 2px;
}
.site-header :focus-visible,
.section--deep :focus-visible,
.site-footer :focus-visible { outline-color: #F2A98A; }

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

/* Yazdırma */
@media print {
  .site-header, .wa-bar, .wa-fab, .skip-link { display: none !important; }
  body { background: #fff; padding-bottom: 0; }
}