/* Kromozom Susurluk — tasarım sistemi v2 ("dolu", doğal / geleneksel)
   Kaynak: PLAN.md §3 DESIGN SPEC.

   Yazı tipleri (tek istek; <link> etiketi build.mjs layout() içinde):
   https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;0,700;1,600&family=Source+Sans+3:wght@400;600;700&display=swap

   İŞARETLEME SÖZLEŞMESİ — §3.4'te adı verilmeyen alt öğeler için bu sınıflar kullanılır:
   Hero ........ section.hero > svg.orn-kose + .wrap.hero-grid > ( .hero-text > .eyebrow + h1 + p.lead + .btns )
                                                             + ( .hero-visual > .stamp-shadow > figure.stamp-frame > img + figcaption > span + span )
                                                               + img.brand-stamp + a.gi-card + img.hero-bottle? )  + span.orn-bordur
                 ardından: div.wrap > ul.feature-strip (hero'nun altına 48 px biner)
   Showcase .... .showcase-head > ( .showcase-title > h2 ) + a.link-arrow + p.lead?
   SKU kartı ... article.sku > .sku-stage > (img | div.pack-card) + span.card-badge? ; .sku-body > h3 > a ; p.sku-size ; p.sku-fact ; p.sku-storage > svg + metin ;
                 .sku-actions > a.link-arrow + button.btn.btn-sm   (telefonda düğme ikincil: şeffaf, yeşil yazı)
                 Ana sayfa vitrini: section.showcase[data-limit][data-on] (data-on: etkin sekme, app.js) ; #p-show ardından p.showcase-more > a.btn.btn-ghost
   GI spotlight  .gi-spot > ( .gi-spot-text > .eyebrow + h2 + p + dl.gi-facts > div > dt + dd + .btns + p.fine )
                          + ( .gi-spot-visual > button.gi-cert > img  +  span.ci-lockup )
   Why ......... .why-grid > article.why > svg.ico + h3 + p   (4'ün katı kutucuk için .why-grid.cols-4: ana sayfa 8, Bayilik 4)
   Process ..... section.section > svg.orn-vazo ×2 + .wrap > ... ol.process > li.process-step > span.process-ico > svg.ico ; span.process-num ; h3 ; p
   Pro band .... .pro-band > .pro-text > h2 + p ; .btns ; img.pro-mark (logo-amblem-krem, aria-hidden)
   Contact ..... ul.contact-strip > li > svg.ico + div > span.cs-label + p.cs-value + a?
   Footer ...... footer.footer > hr.bordur + .wrap > .footer-grid > (.footer-brand + 4 × div > h2.footer-h + ul) ; p.footer-credential ; .footer-bottom
   Page hero ... .page-hero > svg.orn-kose + .wrap.page-hero-grid > .page-hero-text (+ .page-hero-media(.desk-only) | img.page-hero-mark) + span.orn-bordur
                 .page-hero-media > ( div.hero-card(.dark|.hero-card-fam|.hero-card-topics|.hero-card-steps|.hero-card-wa) > .eyebrow + ul.hero-card-list > li > strong + span
                                      | ol.hero-steps > li > span.n + metin | p.hero-card-big ; div.hero-card-foot ; img.krem-sign (yalnızca .dark) )
                                    | ( div.hero-cert > button.gi-cert + p.hero-cert-cap > strong + span ) | ( div.logo-card.hero-logo > img + p + p.hero-logo-no )
   GI takvimi .. section.section-tight.gi-steps#tescil-takvimi > .wrap > .head + ol.timeline.timeline-row > li > time + strong + p ; .process-foot
   Zincir ...... (Kromozom Organik) .band-dark > .wrap > .chain-head > (div > .eyebrow + h2) + img.krem-sign ; ol.chain > li > strong + span.chain-tag + p + a.link-arrow
   Trust ....... ul.trust-strip > li > svg + span > strong + metin  ; p.trust-scope
   Ürün detayı . .pd > .pd-gallery (sol, 1. satır) + .pd-info (sağ, iki satır boyunca) + .pd-aside (sol, 2. satır: ul.trust-strip + p.trust-scope?
                   + .aside-card.dark.pd-ask > p.pd-ask-title + p + a.btn + p.pd-ask-tel) ; telefonda DOM sırası: galeri, bilgi, aside
                 .story-blocks > article (h3 + p) + article.story-pro > h3 + div > ul.label-list + p + p.story-links > a.link-arrow ×2
                 section.fam-compare > .head + .table-wrap > table.compare > tr.is-current > td > metin + span.cmp-here
   Brand arch .. .brand-arch > .brand-box + .brand-box   (kutular arası bağlantı CSS ile)
   Diğer ....... .family-cols > div.fam-card > .fam-stage > (img | div.pack-card) ; h2 ; p.fam-chips > span.text-badge? + span × ; p ; a  · .storage-strip · .catalog-cta · .info-box · .aside-card(.dark) · .channel-lists
                 div.pack-card > img.pack-card-mark + span.pack-card-fam + span.pack-card-name + span.pack-card-rule + span.pack-card-size
                 (div.pack-card.pack-card-family: /urunler aile sahnesi; boy aralığı ve ambalaj sayısı) · p.table-hint (telefonda kayan tablo ipucu) · span.nw
                   (fotoğrafı gizli ambalaj: .sku-stage, .pd-stage#pd-stage-card, .cat-product; küçük resim span.pack-thumb, liste span.line-pack)
                 .logo-card · .steps.steps-stack · .field-label.plain · .view-toggle · .cat-trust · .nf-mark · .fade-in (app.js)
                 .doc > .logo-card · .doc > .sec-ico (Üretim belge kartları) · #belgeler h3#markalar (marka tablosu başlığı)
                 span.anchor (Ürünler: #ayran #koyun #inek #pro sekme çapaları) · fieldset.field > legend.field-label.plain (Bayilik onay kutuları)
                 İç sayfalar: span.sec-ico > svg · .why-grid.cols-2 · .cert-aside > button.gi-cert · .emblem-card · .quote-card · .place-card
                 .panel-h · .cat-name > h3 + .ci-lockup · .center-btns · .process-long (Üretim) · .compare-narrow · section.nf
                 .gallery > figure.g1–g4.photo-frame (7+5 / 5+7 sütun; tek figure.g1 ortada 8 sütun)
                 .stamp-gallery > div ×3 > .stamp-shadow > figure.stamp-frame (Hikayemiz #eski-kareler; telefonda tek sütun)
                 aside.did-you-know > h3 + p + p.source-line (Hikayemiz) · .why-grid.cols-2.fact-pair > article.why > svg + h3 + p + p.source-line (Coğrafi İşaret)
                 .info-box > h3 + p + p.source-line (ürün sayfası p.infoBox, Üretim #saklama mevzuat sınırı) · section#yore > .split > div + .label-card (Coğrafi İşaret)
                 span.text-badge (coğrafi işaret metin rozeti, D17) · div.gi-note > span.text-badge + p > strong + metin ; a.link-arrow (İletişim)
                 .place-cards > .contact-card.place-card ×2 (Üretim: Fabrika + Merkez) · p.place-tags > span (İletişim adres kartları)
                 .values > div.value ×4 > svg + h3 + p + a.link-arrow · section#on-talep > .steps > .step (İletişim) · .faq-group#<grup-slug> (SSS)
*/

:root {
  /* brand */
  --red: #DD1B0F;        /* logo red: CTA fills, badges, active tab, display accents ≥24px */
  --red-ink: #B8170D;    /* red TEXT on paper (eyebrows, links, small labels), CTA hover */
  --red-soft: #F7DCD7;   /* chip / badge tint */
  /* deep secondary */
  --green: #1E4636;      /* panels, secondary buttons, heading accent */
  --green-deep: #16352A; /* footer, topbar, dark bands */
  --green-mid: #2E6B4F;  /* icons, links on paper */
  /* --gi-green #00A550 exists ONLY inside the emblem file; never declare it for text or surfaces */
  /* paper */
  --paper: #F6EFE3;  --paper-2: #EFE4CF;  --paper-3: #E6D7BA;  --card: #FFFBF3;  --line: #D9C8A6;
  --line-strong: #8C7B62;  /* form ve adet kutularının kenarı (≥3:1, WCAG 1.4.11); --line yalnızca süs çizgileri için */
  --focus: var(--red-ink); /* odak halkası; koyu ve kırmızı yüzeylerde açık renge döner */
  /* ink */
  --ink: #2B2320;  --ink-2: #5A4E45;  --ink-3: #6B5F55;
  /* accent */
  --copper: #A8682F;      /* ornaments, numerals ≥24px, rules; not body text */
  --copper-ink: #8A5A2B;  /* copper small text */
  --cream-on-dark: #E8DCC4;  --gold-on-dark: #C9A46A;
  /* type */
  --f-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --f-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-label: var(--f-body);
  --fs-hero: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
  --fs-h2: clamp(2rem, 1.5rem + 2vw, 3rem);
  --fs-h3: clamp(1.375rem, 1.2rem + .7vw, 1.75rem);
  --fs-lead: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
  --fs-label: .75rem;
  /* layout */
  --w: 1240px;  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(56px, 7vw, 96px);  --section-tight: clamp(40px, 5vw, 64px);
  --r-sm: 6px;  --r: 12px;  --r-lg: 20px;  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(43,35,32,.06), 0 4px 14px -6px rgba(43,35,32,.14);
  --shadow-2: 0 2px 4px rgba(43,35,32,.06), 0 18px 40px -18px rgba(43,35,32,.30);
  --shadow-pack: drop-shadow(0 18px 16px rgba(43,35,32,.22));
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* textures (data URIs) */
  --noise-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --noise-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .42 0 0 0 0 .25 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
  --hdr: 84px;
}

/* ================= Base ================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 16px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--f-body);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
/* kağıt dokusu: ince tane + düşük frekanslı lekelenme */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .06;
  background-image: var(--noise-fine);
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .05;
  background-image: var(--noise-soft); background-size: 600px 600px; mix-blend-mode: multiply;
}
main, header, footer, .topbar { position: relative; z-index: 1; }
img { max-width: 100%; height: auto; display: block; }
svg { flex: none; }
a { color: var(--green-mid); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--red-ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.topbar, .footer, .band-dark, .gi-spot, .aside-card.dark, .nav-contact, .toast, .lightbox, .full-photo { --focus: var(--paper); }
.pro-band { --focus: #fff; }
::selection { background: var(--paper-3); }

h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; line-height: 1.05; margin: 0 0 .5em; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.15; letter-spacing: 0; }
h4 { font-size: 1.25rem; font-weight: 700; line-height: 1.15; letter-spacing: 0; }
p { margin: 0 0 1em; }
em, .italic { font-family: var(--f-display); font-style: italic; font-weight: 600; font-size: 1.06em; }
.lead { font-size: var(--fs-lead); color: var(--ink-2); max-width: 46ch; line-height: 1.55; }
.eyebrow {
  font: 700 var(--fs-label)/1.25 var(--f-label); letter-spacing: .16em; text-transform: uppercase;
  color: var(--red-ink); display: inline-flex; align-items: center; gap: .8em; margin-bottom: 1.1em;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; flex: none; }
.center { text-align: center; }
.center .eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; flex: none; }
.center .lead { margin-inline: auto; }
.muted { color: var(--ink-2); }
.small { font-size: .9rem; }
.nw { white-space: nowrap; }   /* bölünmemesi gereken kısa dizi (telefon numarası) */
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 10px 16px; z-index: 100; border-radius: var(--r-sm); }
.skip:focus { left: 8px; }

[hidden] { display: none !important; }
.sku[hidden], .tabs[hidden], .view-toggle[hidden], .drawer[hidden], .drawer-backdrop[hidden] { display: none; }

.wrap { width: min(100% - 2 * var(--gutter), var(--w)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2 * var(--gutter), 800px); margin-inline: auto; }
.section { padding-block: var(--section); position: relative; }
.section-tight { padding-block: var(--section-tight); position: relative; }
/* tek panelli bölümler (GI spotlight, bayilik bandı) ve aynı zemindeki ardışık bölümler boşluk yığmasın */
.section:has(> .wrap > .gi-spot:only-child), .section:has(> .wrap > .pro-band:only-child) { padding-block: var(--section-tight); }
.showcase + .section:has(> .wrap > .gi-spot) { padding-top: 0; }
.band { background: var(--paper-grain), var(--paper-2); }
.band-3 { background: var(--paper-grain), var(--paper-3); }
.band-dark { background: var(--green-deep); color: var(--cream-on-dark); }
.band-dark h2, .band-dark h3 { color: var(--paper); }
.band-dark .eyebrow { color: var(--gold-on-dark); }
.band-dark .lead, .band-dark .muted, .band-dark p { color: var(--cream-on-dark); }
.band-dark a:not(.btn) { color: var(--paper); }

/* koyu yüzeyler için gren katmanı */
.noise, .band-dark, .gi-spot, .pro-band, .footer, .topbar, .aside-card.dark, .hero-card.dark { position: relative; isolation: isolate; }
.noise::before, .band-dark::before, .gi-spot::before, .pro-band::before, .footer::before, .aside-card.dark::before, .hero-card.dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background-image: var(--noise-fine); opacity: .08; mix-blend-mode: overlay;
}

/* ---------- Osmanlı bordürü: çift çizgi arasında rozet + lale frizi (altbilgi üstü, hero ve sayfa başı alt kenarı) ---------- */
.bordur, .orn-bordur { display: block; height: 30px; border: 0; margin: 0; width: 100%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='30' viewBox='0 0 64 30'%3E%3Cg fill='none' stroke='%23A8682F' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' color='%23A8682F'%3E%3Cpath d='M0 1.5h64M0 4.5h64M0 25.5h64M0 28.5h64' stroke-width='.8'/%3E%3Cpath d='M0 15c6-8 14-8 16 0s10 8 16 0 14-8 16 0 10 8 16 0' opacity='.55'/%3E%3Cellipse cx='20.9' cy='15' rx='4' ry='1.8' transform='rotate(0 20.9 15)'/%3E%3Cellipse cx='19.5' cy='18.5' rx='4' ry='1.8' transform='rotate(45 19.5 18.5)'/%3E%3Cellipse cx='16' cy='19.9' rx='4' ry='1.8' transform='rotate(90 16 19.9)'/%3E%3Cellipse cx='12.5' cy='18.5' rx='4' ry='1.8' transform='rotate(135 12.5 18.5)'/%3E%3Cellipse cx='11.1' cy='15' rx='4' ry='1.8' transform='rotate(180 11.1 15)'/%3E%3Cellipse cx='12.5' cy='11.5' rx='4' ry='1.8' transform='rotate(225 12.5 11.5)'/%3E%3Cellipse cx='16' cy='10.1' rx='4' ry='1.8' transform='rotate(270 16 10.1)'/%3E%3Cellipse cx='19.5' cy='11.5' rx='4' ry='1.8' transform='rotate(315 19.5 11.5)'/%3E%3Cellipse cx='19.5' cy='16.4' rx='2.5' ry='1.2' transform='rotate(22.5 19.5 16.4)' fill='%23A8682F' fill-opacity='.22'/%3E%3Cellipse cx='17.4' cy='18.5' rx='2.5' ry='1.2' transform='rotate(67.5 17.4 18.5)' fill='%23A8682F' fill-opacity='.22'/%3E%3Cellipse cx='14.6' cy='18.5' rx='2.5' ry='1.2' transform='rotate(112.5 14.6 18.5)' fill='%23A8682F' fill-opacity='.22'/%3E%3Cellipse cx='12.5' cy='16.4' rx='2.5' ry='1.2' transform='rotate(157.5 12.5 16.4)' fill='%23A8682F' fill-opacity='.22'/%3E%3Cellipse cx='12.5' cy='13.6' rx='2.5' ry='1.2' transform='rotate(202.5 12.5 13.6)' fill='%23A8682F' fill-opacity='.22'/%3E%3Cellipse cx='14.6' cy='11.5' rx='2.5' ry='1.2' transform='rotate(247.5 14.6 11.5)' fill='%23A8682F' fill-opacity='.22'/%3E%3Cellipse cx='17.4' cy='11.5' rx='2.5' ry='1.2' transform='rotate(292.5 17.4 11.5)' fill='%23A8682F' fill-opacity='.22'/%3E%3Cellipse cx='19.5' cy='13.6' rx='2.5' ry='1.2' transform='rotate(337.5 19.5 13.6)' fill='%23A8682F' fill-opacity='.22'/%3E%3Ccircle cx='16' cy='15' r='1.8'/%3E%3Ccircle cx='16' cy='15' r='0.6' fill='%23A8682F'/%3E%3Cg transform='translate(48 23) rotate(0) scale(0.5)'%3E%3Cpath d='M0-30c4 6 4 13 0 19-4-6-4-13 0-19z' fill='%23A8682F' fill-opacity='.25'/%3E%3Cpath d='M0-11c-6-1-9-6-8-14 1 6 4 10 8 14zM0-11c6-1 9-6 8-14-1 6-4 10-8 14z'/%3E%3Cpath d='M-8-25c-2-1-4-1-5 0M8-25c2-1 4-1 5 0'/%3E%3Cpath d='M0-11V0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat-x center; }
.rule { display: flex; align-items: center; gap: 14px; color: var(--copper); margin: 0 auto 1.4rem; width: max-content; }
.rule::before, .rule::after { content: ""; width: 56px; height: 1px; background: currentColor; }
.rule svg { width: 18px; height: 24px; }

/* ---------- Butonlar ---------- */
.btn {
  --bg: var(--red); --fg: #fff; --bd: var(--red);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: .75em 1.5em; border: 1.5px solid var(--bd); border-radius: var(--r-sm);
  background: var(--bg); color: var(--fg); cursor: pointer;
  font: 700 .82rem/1.1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; text-align: center;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover { --bg: var(--red-ink); --bd: var(--red-ink); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-ghost { --bg: transparent; --fg: var(--green); --bd: var(--green); }
.btn-ghost:hover { --bg: var(--green); --bd: var(--green); color: var(--paper); }
.btn-green, .btn-toprak { --bg: var(--green); --bd: var(--green); }
.btn-green:hover, .btn-toprak:hover { --bg: var(--green-deep); --bd: var(--green-deep); }
.btn-light { --bg: var(--paper); --fg: var(--green-deep); --bd: var(--paper); }
.btn-light:hover { --bg: var(--card); --bd: var(--card); color: var(--green-deep); }
.btn-line-light { --bg: transparent; --fg: var(--cream-on-dark); --bd: rgba(232, 220, 196, .6); }
.btn-line-light:hover { --bg: var(--cream-on-dark); --bd: var(--cream-on-dark); color: var(--green-deep); }
.btn-sm { min-height: 44px; padding: .55em 1em; font-size: .75rem; }
.btn-block { width: 100%; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.link-arrow { font: 700 .8rem/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; gap: .6em; color: var(--red-ink); min-height: 44px; background: none; border: 0; padding: 0; cursor: pointer; }
.link-arrow::after { content: "→"; font-size: 1.15em; transition: transform .25s var(--ease); }
.link-arrow:hover { color: var(--green); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ================= Chrome ================= */
/* ---------- Üst bilgi ---------- */
.topbar { background: var(--green-deep); color: var(--cream-on-dark); font-size: .8rem; z-index: 51; }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 38px; }
.topbar a { color: var(--cream-on-dark); text-decoration: none; }
.topbar a:hover { color: #fff; }
.topbar-items { display: flex; gap: 22px; align-items: center; }
.topbar-items a { white-space: nowrap; }
.topbar-items svg { width: 15px; height: 15px; display: inline-block; vertical-align: -3px; margin-right: 6px; }
.topbar-note { font-weight: 600; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 8px; }
.topbar-note::before { content: ""; width: 7px; height: 7px; transform: rotate(45deg); background: var(--gold-on-dark); flex: none; }
.topbar-note .short { display: none; }

/* ---------- Başlık ---------- */
.header { position: sticky; top: 0; z-index: 50; background: rgba(246, 239, 227, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
.header.scrolled { border-color: var(--line); box-shadow: 0 6px 24px -18px rgba(43, 35, 32, .5); }
.header .wrap { display: flex; align-items: center; gap: 24px; min-height: var(--hdr); }
.logo { display: block; flex: none; }
.logo img { height: 56px; width: auto; }
.nav { margin-left: auto; }
.nav ul { list-style: none; display: flex; gap: clamp(14px, 1.8vw, 26px); margin: 0; padding: 0; }
.nav a { font: 600 15px/1 var(--f-body); color: var(--ink); text-decoration: none; padding: 10px 0; position: relative; display: inline-block; }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px; background: var(--red); transition: right .3s var(--ease); }
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }
.nav a[aria-current="page"] { color: var(--red-ink); }
.nav-contact { display: none; }
.list-btn { position: relative; flex: none; }
.list-count {
  position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 11px; background: var(--green-deep); color: var(--cream-on-dark); font: 700 .72rem/22px var(--f-body); text-align: center; letter-spacing: 0;
  box-shadow: 0 0 0 2px var(--paper);
}
.list-count[data-count="0"] { display: none; }
.burger { display: none; background: none; border: 0; width: 44px; height: 44px; padding: 10px; cursor: pointer; margin-left: 4px; }
.burger span { display: block; height: 1.5px; background: var(--ink); margin: 6px 0; transition: transform .3s, opacity .3s; }

/* ---------- Çekmece ---------- */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(22, 53, 42, .5); z-index: 80; opacity: 0; transition: opacity .3s; }
.drawer-backdrop.show { opacity: 1; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--paper); z-index: 81; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .4s var(--ease); box-shadow: -20px 0 50px -20px rgba(0, 0, 0, .3); }
.drawer.open { transform: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--line); background: var(--paper-2); }
.drawer-head h2 { font-size: 1.7rem; margin: 0; }
.drawer-body { flex: 1; overflow-y: auto; padding: 8px 24px; }
.drawer-foot { padding: 18px 24px 24px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.x { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); cursor: pointer; font-size: 1.3rem; line-height: 1; color: var(--ink); }
.x:hover { border-color: var(--ink); }

/* ---------- WhatsApp yüzen ---------- */
/* Sağ alt düğmeler: Osmanlı madalyonu (16 dilimli altın şemse kenarı, içte renkli göbek). Üstte Instagram, altta WhatsApp + ön talep listesi. */
.fab { --fab-bg: var(--green); --fab-bg-hover: var(--green-deep); position: fixed; right: 16px; bottom: 16px; z-index: 60; width: 66px; height: 66px; background: transparent; color: #fff; display: grid; place-items: center; border: 0; cursor: pointer; filter: drop-shadow(0 10px 18px rgba(22, 53, 42, .38)); transition: transform .3s var(--ease); }
.fab::before, .fab::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.fab::before { inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23C9A46A'%3E%3Ccircle cx='50' cy='50' r='43'/%3E%3Ccircle cx='93.00' cy='50.00' r='7'/%3E%3Ccircle cx='89.73' cy='66.46' r='7'/%3E%3Ccircle cx='80.41' cy='80.41' r='7'/%3E%3Ccircle cx='66.46' cy='89.73' r='7'/%3E%3Ccircle cx='50.00' cy='93.00' r='7'/%3E%3Ccircle cx='33.54' cy='89.73' r='7'/%3E%3Ccircle cx='19.59' cy='80.41' r='7'/%3E%3Ccircle cx='10.27' cy='66.46' r='7'/%3E%3Ccircle cx='7.00' cy='50.00' r='7'/%3E%3Ccircle cx='10.27' cy='33.54' r='7'/%3E%3Ccircle cx='19.59' cy='19.59' r='7'/%3E%3Ccircle cx='33.54' cy='10.27' r='7'/%3E%3Ccircle cx='50.00' cy='7.00' r='7'/%3E%3Ccircle cx='66.46' cy='10.27' r='7'/%3E%3Ccircle cx='80.41' cy='19.59' r='7'/%3E%3Ccircle cx='89.73' cy='33.54' r='7'/%3E%3C/g%3E%3Cg fill='%23F6EFE2'%3E%3Ccircle cx='92.17' cy='58.39' r='1.3'/%3E%3Ccircle cx='85.75' cy='73.89' r='1.3'/%3E%3Ccircle cx='73.89' cy='85.75' r='1.3'/%3E%3Ccircle cx='58.39' cy='92.17' r='1.3'/%3E%3Ccircle cx='41.61' cy='92.17' r='1.3'/%3E%3Ccircle cx='26.11' cy='85.75' r='1.3'/%3E%3Ccircle cx='14.25' cy='73.89' r='1.3'/%3E%3Ccircle cx='7.83' cy='58.39' r='1.3'/%3E%3Ccircle cx='7.83' cy='41.61' r='1.3'/%3E%3Ccircle cx='14.25' cy='26.11' r='1.3'/%3E%3Ccircle cx='26.11' cy='14.25' r='1.3'/%3E%3Ccircle cx='41.61' cy='7.83' r='1.3'/%3E%3Ccircle cx='58.39' cy='7.83' r='1.3'/%3E%3Ccircle cx='73.89' cy='14.25' r='1.3'/%3E%3Ccircle cx='85.75' cy='26.11' r='1.3'/%3E%3Ccircle cx='92.17' cy='41.61' r='1.3'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; border-radius: 0; transition: transform .6s var(--ease); }
.fab::after { inset: 9px; background: var(--fab-bg); box-shadow: inset 0 0 0 2px var(--fab-bg), inset 0 0 0 3px rgba(246, 239, 226, .55); transition: background .3s; }
.fab > svg { position: relative; z-index: 1; width: 25px; height: 25px; }
.fab:hover { transform: translateY(-2px); color: #fff; }
.fab:hover::before { transform: rotate(22.5deg); }
.fab:hover::after { background: var(--fab-bg-hover); box-shadow: inset 0 0 0 2px var(--fab-bg-hover), inset 0 0 0 3px rgba(246, 239, 226, .55); }
.fab .list-count { z-index: 2; top: 2px; right: 2px; background: var(--red); color: #fff; }
.fab-ig { --fab-bg: var(--red); --fab-bg-hover: #B8140B; bottom: 90px; filter: drop-shadow(0 10px 18px rgba(120, 20, 12, .3)); }
.fab-ig > svg { width: 23px; height: 23px; }
@media (max-width: 560px) { .fab { width: 58px; height: 58px; right: 12px; bottom: 12px; } .fab::after { inset: 8px; } .fab-ig { bottom: 76px; } }
@media (prefers-reduced-motion: reduce) { .fab::before { transition: none; } }
body:has(.burger[aria-expanded="true"]) .fab { display: none; }   /* mobil menü açıkken menünün üstünde durmasın */

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: var(--green-deep); color: var(--paper); padding: 14px 20px; border-radius: var(--r); z-index: 95; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s; display: flex; gap: 16px; align-items: center; font-size: .95rem; max-width: calc(100% - 32px); box-shadow: var(--shadow-2); pointer-events: none; }
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; transition-delay: 0s; }
.toast a, .toast button { color: var(--gold-on-dark); background: none; border: 0; font: 700 .8rem var(--f-body); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; text-decoration: underline; white-space: nowrap; min-height: 44px; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; background: rgba(22, 53, 42, .94); z-index: 90; display: grid; place-items: center; padding: 24px; }
.lightbox img { max-height: 90vh; width: auto; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }
.lightbox button { position: absolute; top: 16px; right: 16px; }

/* ---------- Altbilgi ---------- */
.footer { background: var(--green-deep); color: var(--cream-on-dark); font-size: .95rem; overflow: hidden; }
.footer > .bordur { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='30' viewBox='0 0 64 30'%3E%3Cg fill='none' stroke='%23E8DCC4' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' color='%23E8DCC4'%3E%3Cpath d='M0 1.5h64M0 4.5h64M0 25.5h64M0 28.5h64' stroke-width='.8'/%3E%3Cpath d='M0 15c6-8 14-8 16 0s10 8 16 0 14-8 16 0 10 8 16 0' opacity='.55'/%3E%3Cellipse cx='20.9' cy='15' rx='4' ry='1.8' transform='rotate(0 20.9 15)'/%3E%3Cellipse cx='19.5' cy='18.5' rx='4' ry='1.8' transform='rotate(45 19.5 18.5)'/%3E%3Cellipse cx='16' cy='19.9' rx='4' ry='1.8' transform='rotate(90 16 19.9)'/%3E%3Cellipse cx='12.5' cy='18.5' rx='4' ry='1.8' transform='rotate(135 12.5 18.5)'/%3E%3Cellipse cx='11.1' cy='15' rx='4' ry='1.8' transform='rotate(180 11.1 15)'/%3E%3Cellipse cx='12.5' cy='11.5' rx='4' ry='1.8' transform='rotate(225 12.5 11.5)'/%3E%3Cellipse cx='16' cy='10.1' rx='4' ry='1.8' transform='rotate(270 16 10.1)'/%3E%3Cellipse cx='19.5' cy='11.5' rx='4' ry='1.8' transform='rotate(315 19.5 11.5)'/%3E%3Cellipse cx='19.5' cy='16.4' rx='2.5' ry='1.2' transform='rotate(22.5 19.5 16.4)' fill='%23E8DCC4' fill-opacity='.22'/%3E%3Cellipse cx='17.4' cy='18.5' rx='2.5' ry='1.2' transform='rotate(67.5 17.4 18.5)' fill='%23E8DCC4' fill-opacity='.22'/%3E%3Cellipse cx='14.6' cy='18.5' rx='2.5' ry='1.2' transform='rotate(112.5 14.6 18.5)' fill='%23E8DCC4' fill-opacity='.22'/%3E%3Cellipse cx='12.5' cy='16.4' rx='2.5' ry='1.2' transform='rotate(157.5 12.5 16.4)' fill='%23E8DCC4' fill-opacity='.22'/%3E%3Cellipse cx='12.5' cy='13.6' rx='2.5' ry='1.2' transform='rotate(202.5 12.5 13.6)' fill='%23E8DCC4' fill-opacity='.22'/%3E%3Cellipse cx='14.6' cy='11.5' rx='2.5' ry='1.2' transform='rotate(247.5 14.6 11.5)' fill='%23E8DCC4' fill-opacity='.22'/%3E%3Cellipse cx='17.4' cy='11.5' rx='2.5' ry='1.2' transform='rotate(292.5 17.4 11.5)' fill='%23E8DCC4' fill-opacity='.22'/%3E%3Cellipse cx='19.5' cy='13.6' rx='2.5' ry='1.2' transform='rotate(337.5 19.5 13.6)' fill='%23E8DCC4' fill-opacity='.22'/%3E%3Ccircle cx='16' cy='15' r='1.8'/%3E%3Ccircle cx='16' cy='15' r='0.6' fill='%23E8DCC4'/%3E%3Cg transform='translate(48 23) rotate(0) scale(0.5)'%3E%3Cpath d='M0-30c4 6 4 13 0 19-4-6-4-13 0-19z' fill='%23E8DCC4' fill-opacity='.25'/%3E%3Cpath d='M0-11c-6-1-9-6-8-14 1 6 4 10 8 14zM0-11c6-1 9-6 8-14-1 6-4 10-8 14z'/%3E%3Cpath d='M-8-25c-2-1-4-1-5 0M8-25c2-1 4-1 5 0'/%3E%3Cpath d='M0-11V0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); opacity: .45; margin-top: 14px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr; gap: 36px; padding-block: 36px 48px; }
.footer-h, .footer h2, .footer h4 { font: 700 .78rem/1.2 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-on-dark); margin: 0 0 18px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer a { color: var(--cream-on-dark); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer-brand img { width: 150px; height: auto; margin-bottom: 20px; }
.footer-brand p { max-width: 34ch; }
.footer-brand .small { opacity: .9; }
.footer address { font-style: normal; }
.footer-credential { font-size: .85rem; text-align: center; margin: 0; padding: 18px 0; border-top: 1px solid rgba(232, 220, 196, .14); color: var(--cream-on-dark); line-height: 1.7; }
/* İki satır (coğrafi işaret + marka tescili, <br> ile): blok düzen, elmas ilk satırın başında */
.footer-credential::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; vertical-align: .1em; transform: rotate(45deg); background: var(--gold-on-dark); }
.footer-bottom { border-top: 1px solid rgba(232, 220, 196, .14); padding-block: 20px 28px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .85rem; }
.footer-bottom ul { display: flex; gap: 18px; flex-wrap: wrap; }

/* ================= Ornaments ================= */
.orn-kose, .orn-vazo, .orn-bordur { pointer-events: none; }
/* köşebent: hero sol üst, sayfa başı sağ üst (aynalı) */
.hero > .orn-kose, .page-hero > .orn-kose { position: absolute; top: 0; width: clamp(110px, 13vw, 190px); height: auto; color: var(--copper); opacity: .5; }
.hero > .orn-kose { left: 0; width: clamp(96px, 10vw, 150px); }
@media (max-width: 560px) { .hero > .orn-kose { left: auto; right: 0; width: 84px; transform: scaleX(-1); opacity: .4; } }   /* telefonda üst yazıya binmesin */
.page-hero > .orn-kose { right: 0; transform: scaleX(-1); }
.hero > .orn-bordur, .page-hero > .orn-bordur, .full-photo > .orn-bordur { position: absolute; left: 0; right: 0; bottom: 14px; opacity: .55; }
.full-photo > .orn-bordur { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='30' viewBox='0 0 64 30'%3E%3Cg fill='none' stroke='%23E8DCC4' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' color='%23E8DCC4'%3E%3Cpath d='M0 1.5h64M0 4.5h64M0 25.5h64M0 28.5h64' stroke-width='.8'/%3E%3Cpath d='M0 15c6-8 14-8 16 0s10 8 16 0 14-8 16 0 10 8 16 0' opacity='.55'/%3E%3Cellipse cx='20.9' cy='15' rx='4' ry='1.8' transform='rotate(0 20.9 15)'/%3E%3Cellipse cx='19.5' cy='18.5' rx='4' ry='1.8' transform='rotate(45 19.5 18.5)'/%3E%3Cellipse cx='16' cy='19.9' rx='4' ry='1.8' transform='rotate(90 16 19.9)'/%3E%3Cellipse cx='12.5' cy='18.5' rx='4' ry='1.8' transform='rotate(135 12.5 18.5)'/%3E%3Cellipse cx='11.1' cy='15' rx='4' ry='1.8' transform='rotate(180 11.1 15)'/%3E%3Cellipse cx='12.5' cy='11.5' rx='4' ry='1.8' transform='rotate(225 12.5 11.5)'/%3E%3Cellipse cx='16' cy='10.1' rx='4' ry='1.8' transform='rotate(270 16 10.1)'/%3E%3Cellipse cx='19.5' cy='11.5' rx='4' ry='1.8' transform='rotate(315 19.5 11.5)'/%3E%3Cellipse cx='19.5' cy='16.4' rx='2.5' ry='1.2' transform='rotate(22.5 19.5 16.4)' fill='%23E8DCC4' fill-opacity='.22'/%3E%3Cellipse cx='17.4' cy='18.5' rx='2.5' ry='1.2' transform='rotate(67.5 17.4 18.5)' fill='%23E8DCC4' fill-opacity='.22'/%3E%3Cellipse cx='14.6' cy='18.5' rx='2.5' ry='1.2' transform='rotate(112.5 14.6 18.5)' fill='%23E8DCC4' fill-opacity='.22'/%3E%3Cellipse cx='12.5' cy='16.4' rx='2.5' ry='1.2' transform='rotate(157.5 12.5 16.4)' fill='%23E8DCC4' fill-opacity='.22'/%3E%3Cellipse cx='12.5' cy='13.6' rx='2.5' ry='1.2' transform='rotate(202.5 12.5 13.6)' fill='%23E8DCC4' fill-opacity='.22'/%3E%3Cellipse cx='14.6' cy='11.5' rx='2.5' ry='1.2' transform='rotate(247.5 14.6 11.5)' fill='%23E8DCC4' fill-opacity='.22'/%3E%3Cellipse cx='17.4' cy='11.5' rx='2.5' ry='1.2' transform='rotate(292.5 17.4 11.5)' fill='%23E8DCC4' fill-opacity='.22'/%3E%3Cellipse cx='19.5' cy='13.6' rx='2.5' ry='1.2' transform='rotate(337.5 19.5 13.6)' fill='%23E8DCC4' fill-opacity='.22'/%3E%3Ccircle cx='16' cy='15' r='1.8'/%3E%3Ccircle cx='16' cy='15' r='0.6' fill='%23E8DCC4'/%3E%3Cg transform='translate(48 23) rotate(0) scale(0.5)'%3E%3Cpath d='M0-30c4 6 4 13 0 19-4-6-4-13 0-19z' fill='%23E8DCC4' fill-opacity='.25'/%3E%3Cpath d='M0-11c-6-1-9-6-8-14 1 6 4 10 8 14zM0-11c6-1 9-6 8-14-1 6-4 10-8 14z'/%3E%3Cpath d='M-8-25c-2-1-4-1-5 0M8-25c2-1 4-1 5 0'/%3E%3Cpath d='M0-11V0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); opacity: .5; z-index: 1; }
/* lale demeti: süreç bölümlerinin alt köşeleri */
.section > .orn-vazo { position: absolute; left: 4px; top: 50%; translate: 0 -50%; width: 52px; height: auto; color: var(--copper); opacity: .5; }
.section > .orn-vazo ~ .orn-vazo { left: auto; right: 4px; transform: scaleX(-1); }
@media (max-width: 1299px) { .section > .orn-vazo { display: none; } }   /* yalnızca yan boşlukta dursun, yazıya binmesin */

/* ================= Hero ================= */
.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 0%, transparent 60%, rgba(166, 128, 74, .10)), var(--paper-grain), var(--paper-2);
  padding-block: clamp(48px, 6vw, 88px) clamp(80px, 9vw, 120px);
}
.hero-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 72px); align-items: center; min-height: 620px; position: relative; z-index: 1; }
.hero-text { position: relative; z-index: 2; }
.hero h1 { margin-bottom: .35em; }
.hero h1 em { color: var(--green); font-size: 1em; font-weight: 600; display: inline; }
.hero .lead { margin-bottom: 2rem; }
.hero-visual { position: relative; padding: 36px 0 44px; }
.hero-visual .stamp-shadow { width: 88%; margin-left: auto; transform: rotate(-2deg); }
.hero-bottle { position: absolute; right: 2%; bottom: 0; width: 22%; max-width: 150px; filter: var(--shadow-pack); z-index: 3; }

/* ---------- Pul çerçeve ---------- */
.stamp-shadow { filter: drop-shadow(0 18px 30px rgba(43, 35, 32, .25)); }
.stamp-frame {
  position: relative; margin: 0; padding: 16px 16px 12px; background: var(--card);
  -webkit-mask: linear-gradient(#000 0 0) 6px 6px / calc(100% - 12px) calc(100% - 12px) no-repeat, radial-gradient(circle 6px at 6px 6px, #0000 96%, #000) -6px -6px / 12px 12px;
  mask: linear-gradient(#000 0 0) 6px 6px / calc(100% - 12px) calc(100% - 12px) no-repeat, radial-gradient(circle 6px at 6px 6px, #0000 96%, #000) -6px -6px / 12px 12px;
  -webkit-mask-composite: source-over; mask-composite: add;
}
.stamp-frame::after { content: ""; position: absolute; inset: 11px; border: 1px solid var(--line); pointer-events: none; }
.stamp-frame img { width: 100%; filter: sepia(.18) contrast(1.02); }
.stamp-frame figcaption { font: italic 600 .95rem/1.3 var(--f-display); color: var(--ink-2); padding: 10px 4px 4px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.heritage .stamp-shadow, .split .stamp-shadow { transform: rotate(-1.2deg); }

/* eski foto çerçevesi (galeri vb.) */
.photo-frame { position: relative; margin: 0; padding: 12px; background: var(--card); box-shadow: var(--shadow-1); border-radius: var(--r-sm); }
.photo-frame::after { content: ""; position: absolute; inset: 6px; border: 1px solid var(--line); pointer-events: none; border-radius: 3px; }
.photo-frame img { filter: sepia(.18) contrast(1.02); width: 100%; }
.photo-frame figcaption { font: italic 600 .95rem/1.3 var(--f-display); color: var(--ink-2); padding: 12px 6px 2px; display: flex; justify-content: space-between; gap: 12px; }

/* ---------- Marka mührü ---------- */
.brand-stamp {
  position: absolute; top: 0; right: -4px; z-index: 3; width: 132px; height: 132px; padding: 14px;
  background: var(--card); border-radius: 50%; object-fit: contain;
  outline: 1px dashed var(--copper); outline-offset: 6px; box-shadow: var(--shadow-1);
  transform: rotate(-8deg); animation: stamp-float 6s ease-in-out infinite;
}
@keyframes stamp-float { 0%, 100% { transform: rotate(-8deg) translateY(-4px); } 50% { transform: rotate(-8deg) translateY(4px); } }

/* ---------- Coğrafi işaret amblem birimi (filtre / opaklık / dönüşüm YOK) ---------- */
.ci-lockup { display: inline-flex; align-items: center; gap: 14px; text-align: left; }
.ci-emblem {
  --s: 72px; flex: none; display: grid; place-items: center;
  width: calc(var(--s) * 1.12); height: calc(var(--s) * 1.12); padding: calc(var(--s) * .06);
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #00A550, var(--shadow-1);
}
.ci-emblem img, .ci-lockup .ci-emblem img { width: var(--s); height: var(--s); max-width: none; display: block; border-radius: 50%; }
.ci-cap { display: grid; gap: 2px; line-height: 1.25; }
.ci-cap strong { font: 700 1.2rem/1.1 var(--f-display); color: var(--ink); }
.ci-cap span { font-size: .8rem; color: var(--ink-3); }

/* ---------- GI kartı (hero) ---------- */
.gi-card {
  position: absolute; left: -24px; bottom: -28px; z-index: 4; display: block; max-width: 300px;
  padding: 14px 18px; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow-2);
  color: var(--ink); text-decoration: none; border: 1px solid var(--line); transition: box-shadow .3s var(--ease), border-color .3s;
}
.gi-card:hover { color: var(--ink); border-color: var(--green-mid); box-shadow: 0 0 0 1px var(--green-mid), var(--shadow-2); }
.gi-card .ci-cap strong { font-size: 1.15rem; }

/* ---------- Özellik şeridi ---------- */
.feature-strip {
  list-style: none; margin: -48px 0 0; padding: 0; position: relative; z-index: 5;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-1), 0 0 0 1px rgba(217, 200, 166, .6);
}
.feature-strip li { padding: 22px; display: grid; justify-items: center; text-align: center; gap: 6px; }
.feature-strip li + li { border-left: 1px solid var(--line); }
.feature-strip .ico, .feature-strip svg { width: 40px; height: 40px; color: var(--green-mid); margin-bottom: 4px; }
.feature-strip strong { font: 700 .75rem/1.25 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.feature-strip span { font-size: .875rem; line-height: 1.4; color: var(--ink-2); }

/* ================= Bölüm başlıkları ================= */
.head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(28px, 4vw, 48px); flex-wrap: wrap; }
.head h2 { margin: 0; max-width: 20ch; }
.head p { max-width: 46ch; margin: 0; color: var(--ink-2); }
.section-intro { max-width: 62ch; color: var(--ink-2); }
.source-line { font-size: .85rem; color: var(--ink-3); margin-top: 24px; }

/* ================= Ürün vitrini ================= */
.showcase-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 14px 24px; margin-bottom: 24px; }
.showcase-title { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.showcase-head h2 { color: var(--red); margin: 0; font-size: var(--fs-h2); font-weight: 700; }
.showcase-head > .link-arrow { justify-self: end; }
.showcase-head > .lead, .showcase-head > p { grid-column: 1 / -1; }
.showcase-head > .lead, .showcase-head > p { max-width: 64ch; margin: 4px 0 0; }

/* ---------- Sekmeler ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.tab {
  min-height: 48px; padding: 0 20px; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px;
  font: 600 1rem/1 var(--f-body); color: var(--ink-2); cursor: pointer; white-space: nowrap; scroll-snap-align: start;
  transition: color .2s, border-color .2s, background .2s; border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.tab:hover { color: var(--ink); background: rgba(239, 228, 207, .6); }
.tab[aria-selected="true"] { color: var(--red-ink); border-bottom-color: var(--red); }

.view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; margin-bottom: 20px; background: var(--card); }
.view-toggle button { min-height: 44px; padding: 0 18px; border: 0; background: none; font: 600 .9rem/1 var(--f-body); color: var(--ink-2); cursor: pointer; }
.view-toggle button + button { border-left: 1px solid var(--line); }
.view-toggle button[aria-pressed="true"] { background: var(--green); color: var(--paper); }

/* ---------- Ambalaj ızgarası ---------- */
.pack-grid, .related { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 24px); }

/* ---------- SKU kartı ---------- */
.sku {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border-radius: var(--r); box-shadow: var(--shadow-1);
  transition: translate .35s var(--ease), box-shadow .35s var(--ease);
}
.sku:hover { translate: 0 -4px; box-shadow: var(--shadow-2); }
.sku-stage { position: relative; aspect-ratio: 1; background: radial-gradient(60% 50% at 50% 55%, #fff, transparent), var(--paper-2); }
.sku-stage > img {
  position: absolute; inset: 11%; width: 78%; height: 78%; object-fit: contain;
  filter: var(--shadow-pack); mix-blend-mode: multiply; transition: transform .5s var(--ease);
}
.sku:hover .sku-stage > :is(img, .pack-card) { transform: scale(1.04); }

/* Ambalaj bilgi kartı: etiketi eski maya adını taşıyan fotoğrafların yerine (build.mjs packCard, D27). Etiket taklidi değil,
   bilgi kartıdır: amblem + aile + ad + ambalaj. Sahneyi doldurur (absolute); yazı boyutları kart genişliğine göre (cqi). */
.pack-card {
  position: absolute; inset: 7%; container-type: inline-size; z-index: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 10% 9%; border: 1px solid var(--line); border-radius: var(--r);
  background:
    radial-gradient(80% 55% at 50% 30%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%),
    radial-gradient(60% 40% at 50% 105%, rgba(168, 104, 47, .10), rgba(168, 104, 47, 0) 70%),
    var(--paper-grain), var(--card);
  box-shadow: inset 0 0 0 5px var(--card), inset 0 0 0 6px rgba(217, 200, 166, .7), 0 14px 26px -18px rgba(43, 35, 32, .35);
  color: var(--ink); transition: transform .5s var(--ease);
}
.pack-card .pack-card-mark { width: clamp(44px, 30cqi, 120px); height: auto; margin-bottom: 6cqi; }
.pack-card-fam { font: 700 clamp(.75rem, 4cqi, .8rem)/1.3 var(--f-label); letter-spacing: .16em; text-transform: uppercase; color: var(--copper-ink); margin-bottom: 2.5cqi; }
.pack-card-name { font: 700 clamp(1.15rem, 13.5cqi, 2.9rem)/1.02 var(--f-display); color: var(--green); text-wrap: balance; max-width: 100%; }
.pack-card-rule { position: relative; width: 40cqi; height: 1px; margin: max(12px, 6cqi) 0 max(12px, 5cqi); background: var(--line); }   /* elmas + gölgesi ~10 px: yazıya binmesin */
.pack-card-rule::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; background: var(--red);
  transform: translate(-50%, -50%) rotate(45deg); box-shadow: 0 0 0 4px var(--card);
}
.pack-card-size { display: flex; flex-direction: column; align-items: center; gap: 1cqi; }
.pack-card-size > [data-pack-size] { font: 600 clamp(1.05rem, 10cqi, 2.4rem)/1 var(--f-display); font-variant-numeric: lining-nums tabular-nums; color: var(--ink); }
.pack-card-pack { font: 600 clamp(.75rem, 4.8cqi, 1rem)/1.3 var(--f-body); color: var(--ink-2); }
.sku-stage > .pack-card:has(~ .card-badge), .pd-stage > .card-badge ~ .pack-card { padding-top: 18%; }
.pd-stage > .pack-card { inset: 9%; }
/* dar kart (telefonda iki sütun, katalog): aile satırı ve ambalaj türü kartın altındaki metinde zaten var */
@container (max-width: 190px) {
  .pack-card .pack-card-mark { width: 30cqi; margin-bottom: 4cqi; }
  .pack-card-fam, .pack-card-pack { display: none; }
  .pack-card-rule { margin: max(12px, 5cqi) 0 max(12px, 4cqi); }
}
.pack-thumb { display: flex; flex-direction: column; align-items: center; gap: 2px; font: 700 .75rem/1 var(--f-body); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pack-thumb img { width: 28px; height: 28px; }
.line-pack { width: 64px; height: 64px; display: grid; place-items: center; background: var(--paper-2); border-radius: var(--r-sm); }
.line-pack img { width: 36px; height: 36px; opacity: .85; }
.cat-product > div > .pack-card { position: relative; inset: auto; min-height: 200px; max-width: 240px; padding: 18px 14px; }
.card-badge {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  font: 700 .75rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase;
  background: var(--green-deep); color: var(--cream-on-dark); border-radius: var(--r-sm); padding: 7px 10px;
}
.sku-body { padding: 16px 20px 20px; display: flex; flex-direction: column; flex: 1; gap: 4px; }
.sku h3 { font: 700 1.35rem/1.15 var(--f-display); margin: 0 0 2px; }
.sku h3 a { color: var(--ink); text-decoration: none; }
.sku h3 a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.sku h3 a:hover { color: var(--green); }
.sku-size { font-weight: 600; font-size: .9rem; color: var(--ink-2); font-variant-numeric: tabular-nums; margin: 0; }
.sku-fact { font-size: .85rem; color: var(--ink-3); margin: 0; line-height: 1.45; }
.sku-storage { display: flex; gap: 6px; align-items: center; font-size: .8rem; color: var(--ink-3); margin: 2px 0 0; }
.sku-storage svg { width: 15px; height: 15px; color: var(--green-mid); }
.sku-actions { margin-top: auto; padding-top: 14px; display: flex; gap: 10px; align-items: center; justify-content: space-between; position: relative; z-index: 1; flex-wrap: wrap; }
.sku-actions .btn { flex: 1 1 auto; max-width: 100%; }
.showcase-more { display: none; justify-content: center; margin: 24px 0 0; }
.fade-in { animation: fade-in .24s var(--ease) both; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Tablo görünümü ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); background: var(--card); border-radius: var(--r); }
.table-wrap:has(> .compare-narrow) { max-width: 760px; }   /* iki sütunlu tablo (saklama, besin) geniş ekranda boş yayılmasın */
.table-hint { display: none; }   /* telefonda yatay kayan tablonun ipucu (760 px bloğu) */
table.compare { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 760px; }
.compare th, .compare td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--paper-3); vertical-align: top; }
.compare thead th { font: 700 .75rem/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--red-ink); background: var(--paper-2); border-bottom: 1px solid var(--line); }
.compare tbody tr:hover { background: #FBF6EC; }
.compare td:first-child { font-family: var(--f-display); font-size: 1.15rem; font-weight: 700; }
.compare .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.compare tr[hidden] { display: none; }

/* ================= GI spotlight ================= */
.gi-spot {
  display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 5vw, 64px); align-items: center;
  background: var(--green); color: var(--cream-on-dark); border-radius: var(--r-lg);
  padding: clamp(28px, 5vw, 64px); box-shadow: var(--shadow-2); overflow: hidden;
}
.gi-spot::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(201, 164, 106, .3); border-radius: calc(var(--r-lg) - 6px); pointer-events: none; z-index: -1; }
.gi-spot h2, .gi-spot h3 { color: var(--paper); }
.gi-spot .eyebrow { color: var(--gold-on-dark); }
.gi-spot p { color: var(--cream-on-dark); max-width: 62ch; }
.gi-spot a:not(.btn) { color: var(--paper); }
.gi-spot .btn-ghost { --fg: var(--cream-on-dark); --bd: rgba(232, 220, 196, .6); }
.gi-spot .btn-ghost:hover { --bg: var(--cream-on-dark); --bd: var(--cream-on-dark); color: var(--green-deep); }
.gi-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin: 1.6rem 0; }
.gi-facts > div { padding: 12px 0; border-top: 1px solid rgba(232, 220, 196, .2); }
.gi-facts > div:nth-last-child(-n+2) { border-bottom: 1px solid rgba(232, 220, 196, .2); }
.gi-facts dt { font: 700 .78rem/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-on-dark); margin-bottom: 2px; }
.gi-facts dd { margin: 0; font: 700 1.2rem/1.25 var(--f-display); color: var(--paper); }
.gi-spot .fine, .gi-spot .small { font-size: .85rem; color: rgba(232, 220, 196, .8); margin: 1.4rem 0 0; }
.gi-spot-visual { position: relative; display: grid; justify-items: center; padding: 10px 0 56px; }
.gi-cert { display: block; width: min(300px, 100%); padding: 10px; background: var(--card); border: 0; border-radius: 4px; cursor: zoom-in; transform: rotate(3deg); box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .55); transition: box-shadow .3s; }
.gi-cert:hover { box-shadow: 0 28px 50px -16px rgba(0, 0, 0, .65); }
.gi-cert img { width: 100%; border: 1px solid var(--line); }
.gi-spot-visual .ci-lockup { position: absolute; left: 0; bottom: 0; z-index: 2; }
.gi-spot .ci-cap { background: var(--card); color: var(--ink); padding: 10px 14px; border-radius: var(--r); box-shadow: var(--shadow-1); }
.gi-spot .ci-cap strong { color: var(--ink); }
.gi-spot .ci-cap span { color: var(--ink-3); }

/* ================= Neden ================= */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); }
.why-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.why { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow-1); padding: 24px; position: relative; overflow: hidden; }
.why::after { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 3px; background: linear-gradient(90deg, var(--copper), transparent); opacity: .6; }
.why .ico, .why > svg { width: 40px; height: 40px; color: var(--green-mid); margin-bottom: 14px; }
.why h3 { font-size: 22px; margin-bottom: .4em; }
.why p { color: var(--ink-2); margin: 0; font-size: .98rem; }

/* ================= Değerler (Üretim) ================= */
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 24px); }
.value { padding: clamp(24px, 3vw, 36px); position: relative; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow-1); display: flex; flex-direction: column; align-items: flex-start; }
.value .link-arrow { margin-top: auto; min-height: 32px; }
.value .ico { width: 48px; height: 48px; color: var(--green-mid); margin-bottom: 1rem; }
.value h3 { margin-bottom: .45em; }
.value p { color: var(--ink-2); margin-bottom: 1rem; }
.value .num { position: absolute; top: 22px; right: 24px; font: italic 600 1.1rem/1 var(--f-display); color: var(--copper); }

/* ================= Üretim süreci ================= */
.process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 28px 18px; position: relative; z-index: 1; }
.process-step { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; }
.process-ico { width: 72px; height: 72px; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 1px var(--copper), var(--shadow-1); display: grid; place-items: center; color: var(--green); position: relative; z-index: 1; margin-bottom: 12px; }
.process-ico svg { width: 38px; height: 38px; }
.process-step::after { content: ""; position: absolute; top: 36px; left: calc(50% + 46px); right: calc(-50% + 46px - 18px); border-top: 2px dotted var(--copper); opacity: .8; }
.process-step:last-child::after { display: none; }
.process-num { font: 600 1.4rem/1 var(--f-display); color: var(--copper-ink); margin-bottom: 6px; }
.process-step h3 { font-size: 1.15rem; margin-bottom: .35em; }
.process-step p { font-size: .92rem; color: var(--ink-2); margin: 0; line-height: 1.5; }
.process-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; margin-top: clamp(28px, 4vw, 44px); position: relative; z-index: 1; }
.process-foot .source-line { margin: 0; }

/* eski adımlar (bayilik vb.) */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 4vw, 56px); }
.step { border-top: 1px solid var(--copper); padding-top: 22px; }
.step .n { font: 600 clamp(2.6rem, 5vw, 3.8rem)/1 var(--f-display); color: var(--copper); display: block; margin-bottom: 12px; }
.step h3 { font-size: 1.4rem; }
.step p { color: var(--ink-2); }
.band-dark .step p { color: var(--cream-on-dark); }
.steps-stack { grid-template-columns: 1fr; gap: 20px; margin-top: 32px; }
.steps-stack .step .n { font-size: 2.4rem; }

/* ================= Split / Miras ================= */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.split.rev > :first-child { order: 2; }
.split.top { align-items: start; }
.split-img { position: relative; }
.split-img img { width: 100%; border-radius: var(--r); }
.split-img .stamp-frame img, .split-img .photo-frame img { border-radius: 0; }
.quote { font: italic 600 1.45rem/1.35 var(--f-display); color: var(--green); border-left: 2px solid var(--copper); padding-left: 20px; margin: 1.6rem 0; }
.quote p { margin: 0 0 .5em; }
.quote cite { display: block; font: 400 .8rem/1.4 var(--f-body); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- Tam fotoğraf bandı ---------- */
.full-photo { position: relative; min-height: 360px; display: grid; align-items: center; color: var(--paper); overflow: hidden; background: var(--green-deep); }
.full-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.full-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22, 53, 42, .92) 0%, rgba(22, 53, 42, .82) 50%, rgba(22, 53, 42, .3) 100%); }
.full-photo .wrap { position: relative; z-index: 2; padding-block: clamp(48px, 7vw, 96px); }
.full-photo h2 { color: var(--paper); max-width: 20ch; }
.full-photo p { max-width: 52ch; color: var(--cream-on-dark); }
.full-photo .eyebrow { color: var(--cream-on-dark); }  /* altın renk açık piksellerde 4.5:1'in altına düşüyordu */
.full-photo .link-arrow { color: var(--paper); }

/* ================= Marka yolculuğu ================= */
.journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; position: relative; }
.journey::before { content: ""; position: absolute; left: 7px; right: 7px; top: 7px; height: 1px; background: var(--copper); }
.journey li { position: relative; padding-top: 32px; }
.journey li::before { content: ""; position: absolute; left: 0; top: 0; width: 14px; height: 14px; transform: rotate(45deg); background: var(--paper); border: 1px solid var(--copper); box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 7px var(--red); }
.journey li:last-child::before { background: var(--red); }
.journey h3 { font-size: 1.45rem; margin-bottom: .4em; }
.journey h3 > span, .journey .journey-label { display: block; font: 700 .75rem/1.2 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--copper-ink); margin-bottom: 8px; }
.journey p { color: var(--ink-2); font-size: .98rem; margin: 0; }

/* ================= Bayilik bandı ================= */
.pro-band {
  display: grid; grid-template-columns: 1.4fr auto; gap: 24px 48px; align-items: center;
  background: var(--red); color: #fff; border-radius: var(--r-lg); padding: clamp(28px, 5vw, 56px); overflow: hidden; box-shadow: var(--shadow-2);
}
.pro-band h2 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); line-height: 1.12; color: #fff; margin-bottom: .4em; max-width: 22ch; }
.pro-band p { color: #fff; margin: 0; max-width: 58ch; }
.pro-band .eyebrow { color: #fff; }
.pro-band .btns { position: relative; z-index: 1; }
.pro-band .btn-light { --bg: var(--paper); --fg: var(--red-ink); --bd: var(--paper); }
.pro-band .btn-light:hover { --bg: #fff; --bd: #fff; color: var(--red-ink); }
.pro-band .btn-line-light { --fg: #fff; --bd: rgba(255, 255, 255, .7); }
.pro-band .btn-line-light:hover { --bg: #fff; --bd: #fff; color: var(--red-ink); }
.pro-text { position: relative; z-index: 1; }
.pro-mark { position: absolute; right: -70px; top: 50%; width: 280px; height: 280px; transform: translateY(-50%); opacity: .08; pointer-events: none; z-index: 0; }

/* ---------- CTA bandı ---------- */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 22ch; margin-inline: auto; }
.cta-band .lead { margin-inline: auto; }
.cta-band .btns { justify-content: center; margin-top: 2rem; }

/* ================= İletişim şeridi ================= */
.contact-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--card); border-radius: var(--r); box-shadow: var(--shadow-1); overflow: hidden; }
.contact-strip > li { padding: 22px; display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.contact-strip > li + li { border-left: 1px solid var(--line); }
.contact-strip .ico, .contact-strip > li > svg { width: 40px; height: 40px; color: var(--green-mid); }
.contact-strip address, .cs-value { font-style: normal; margin: 0 0 6px; font-size: .95rem; color: var(--ink); overflow-wrap: anywhere; }
.cs-label { display: block; font: 700 .78rem/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--red-ink); margin-bottom: 6px; }
.contact-strip a { overflow-wrap: anywhere; }
.contact-strip p { margin: 0 0 4px; font-size: .92rem; }

/* ================= Sayfa başlığı v2 ================= */
.page-hero { position: relative; overflow: hidden; background: var(--paper-grain), var(--paper-2); padding-block: clamp(40px, 6vw, 80px); padding-bottom: clamp(56px, 8vw, 104px); }
.page-hero-grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; position: relative; z-index: 1; }
.page-hero-grid:has(> .page-hero-media) { grid-template-columns: 7fr 5fr; }
.page-hero-text { position: relative; z-index: 1; }
.page-hero h1 { max-width: 20ch; }
.page-hero .lead { margin-top: .4rem; max-width: 56ch; }
.page-hero-media { display: grid; justify-items: center; }
.page-hero-media .stamp-shadow { width: min(100%, 420px); transform: rotate(-1.5deg); }
.page-hero-media .ci-lockup { flex-direction: column; text-align: center; background: var(--card); padding: 24px 28px; border-radius: var(--r-lg); box-shadow: var(--shadow-2); }
.page-hero-media .ci-cap { text-align: center; }
.page-hero-mark { position: absolute; right: clamp(0px, 4vw, 60px); top: 50%; width: 220px; height: 220px; transform: translateY(-50%); opacity: .07; pointer-events: none; z-index: 0; }
.crumbs { font-size: .85rem; color: var(--ink-3); margin-bottom: 1.4rem; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--red-ink); }
.crumbs span[aria-hidden] { color: var(--copper); }

/* ================= Ürünler sayfası ================= */
.family-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); }
.family-cols > * { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow-1); padding: 24px; border-top: 3px solid var(--green-mid); }
.family-cols > *:first-child { border-top-color: var(--red); }
.family-cols h2 { font-size: var(--fs-h3); font-weight: 700; margin-bottom: .35em; }
.family-cols p { color: var(--ink-2); }
.family-cols > .fam-card { overflow: hidden; display: flex; flex-direction: column; }
.fam-card > .link-arrow { margin-top: auto; align-self: start; }
.fam-stage { position: relative; aspect-ratio: 4 / 3; margin: -24px -24px 20px; background: radial-gradient(60% 50% at 50% 55%, #fff, transparent), var(--paper-2); }
.fam-stage > img { position: absolute; inset: 10%; width: 80%; height: 80%; object-fit: contain; filter: var(--shadow-pack); mix-blend-mode: multiply; }
.fam-stage > .pack-card { inset: 8% 14%; }
.fam-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 .8em; }
.fam-chips > span:not(.text-badge) { font: 600 .8rem/1 var(--f-body); font-variant-numeric: tabular-nums; color: var(--green); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 10px; white-space: nowrap; }
.storage-strip { display: flex; gap: 18px; align-items: center; padding: 20px 24px; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow-1); }
.storage-strip .ico, .storage-strip > svg { width: 44px; height: 44px; color: var(--green-mid); }
.storage-strip p { margin: 0; color: var(--ink-2); }
.catalog-cta { display: flex; justify-content: space-between; align-items: center; gap: 20px 32px; flex-wrap: wrap; padding: clamp(24px, 4vw, 40px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.catalog-cta h2 { font-size: var(--fs-h3); margin-bottom: .25em; }
.catalog-cta p { margin: 0; color: var(--ink-2); }

/* ================= Ürün detayı ================= */
.pd { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; gap: 28px clamp(32px, 6vw, 80px); align-items: start; }
/* Masaüstünde galerinin altı boş kalmasın: güven şeridi ve WhatsApp kartı galerinin altında; bilgi sütunu iki satır boyunca */
.pd-gallery { grid-column: 1; grid-row: 1; }
.pd-info { grid-column: 2; grid-row: 1 / span 2; }
.pd-aside { grid-column: 1; grid-row: 2; display: grid; gap: 16px; position: sticky; top: 110px; }   /* 2. satır bilgi sütunuyla uzar; aside içinde kayar */
.pd-aside .trust-strip { grid-template-columns: 1fr; margin: 0; }
.pd-aside .trust-scope { margin: -6px 0 0; }
.pd-ask { display: grid; gap: 10px; }
.pd-ask p { margin: 0; }
.pd-ask-title { font: 700 1.5rem/1.15 var(--f-display); color: var(--paper); }
.pd-ask .btn { margin-top: 4px; }
.pd-ask-tel { font-size: .9rem; }
.pd-ask-tel a { color: var(--paper); }
.pd-stage { aspect-ratio: 1; position: relative; border-radius: var(--r-lg); overflow: hidden; background: radial-gradient(60% 50% at 50% 55%, #fff, transparent), var(--paper-2); box-shadow: var(--shadow-1); }
.pd-stage > img { position: absolute; inset: 10%; width: 80%; height: 80%; object-fit: contain; transition: opacity .3s; filter: var(--shadow-pack); mix-blend-mode: multiply; }
.pd-stage .card-badge { top: 16px; left: 16px; }
.pd-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pd-thumbs button { width: 72px; height: 72px; padding: 6px; background: var(--card); border: 2px solid var(--line); border-radius: var(--r); cursor: pointer; display: grid; place-items: center; overflow: hidden; transition: border-color .2s; }
.pd-thumbs button:hover { border-color: var(--green-mid); }
.pd-thumbs button[aria-pressed="true"] { border-color: var(--green); }
.pd-thumbs button > img { width: 56px; height: 56px; object-fit: contain; mix-blend-mode: multiply; }
.pd-info h1 { font-size: clamp(2.3rem, 1.8rem + 2.2vw, 3.5rem); }
.pd-info .lead { margin-bottom: 1.4rem; }

.highlights { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.highlights li { background: var(--card); border-radius: var(--r); padding: 14px; box-shadow: var(--shadow-1); display: grid; gap: 4px; align-content: start; }
.highlights strong { font: 700 clamp(1.25rem, 1rem + .6vw, 1.6rem)/1 var(--f-display); color: var(--green); white-space: nowrap; }
.highlights span { font-size: .8rem; color: var(--ink-2); line-height: 1.35; }

.gi-box { display: flex; gap: 18px; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); margin-bottom: 1.6rem; font-size: .92rem; }
.gi-box p { margin: 0 0 6px; color: var(--ink-2); }
.gi-box .gi-title { font: 700 1.25rem/1.2 var(--f-display); color: var(--ink); margin-bottom: 6px; }
.gi-box .gi-meta { font-size: .8rem; color: var(--ink-3); }
.gi-box a { font-weight: 600; }

.picker { padding: 22px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); margin-bottom: 1.4rem; }
.picker legend, .field-label { font: 700 .75rem/1.2 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--red-ink); margin-bottom: 12px; display: block; padding: 0; }
.field-label.plain { color: var(--ink); font: 600 .92rem/1.4 var(--f-body); letter-spacing: 0; text-transform: none; margin-bottom: 6px; }
.field-label.plain .opt { font-weight: 400; color: var(--ink-2); }
.picker fieldset { border: 0; margin: 0 0 18px; padding: 0; }
.size-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.size-opts label { position: relative; }
.size-opts input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.size-opts span { display: inline-flex; align-items: center; min-height: 44px; padding: .4em 1em; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-weight: 600; font-variant-numeric: tabular-nums; transition: background .2s, color .2s, border-color .2s; background: var(--paper); }
.size-opts input:checked + span { background: var(--green); color: var(--paper); border-color: var(--green); }
.size-opts input:focus-visible + span { outline: 2px solid var(--red-ink); outline-offset: 2px; }
.picker-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
.picker-row .btn { flex: 1; min-width: 200px; }
.qty { display: inline-flex; min-height: 48px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--paper); overflow: hidden; }
.qty button { width: 44px; min-height: 44px; border: 0; background: none; font-size: 1.2rem; cursor: pointer; color: var(--ink); }
.qty button:hover { background: var(--paper-2); }
.qty input { width: 56px; border: 0; background: none; text-align: center; font: 600 1rem var(--f-body); color: var(--ink); -moz-appearance: textfield; appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.ask { display: inline-flex; gap: 8px; align-items: center; font-size: .92rem; margin-top: 14px; min-height: 44px; }
.ask svg { width: 18px; height: 18px; }

.kunye { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); position: relative; margin-top: 8px; overflow: hidden; }
.kunye::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--paper-3); border-radius: 8px; pointer-events: none; }
.kunye-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 22px 14px; border-bottom: 3px double var(--line); flex-wrap: wrap; }
.kunye-head h2 { font-size: 1.6rem; margin: 0; }
.kunye-head .eyebrow { margin: 0; }
.kunye dl { margin: 0; display: grid; grid-template-columns: minmax(120px, 34%) 1fr; }
.kunye dt, .kunye dd { padding: 12px 22px; border-bottom: 1px solid var(--paper-3); margin: 0; }
.kunye dt { font: 700 .75rem/1.6 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); padding-top: 14px; }
.kunye dd { font-variant-numeric: tabular-nums; }
.kunye dl > :nth-last-child(-n+2) { border-bottom: 0; }
.kunye .ask-rep { color: var(--ink-2); font-style: italic; font-family: var(--f-display); font-size: 1.05rem; }
.story-blocks { display: grid; gap: 0; margin-top: 8px; }
.story-blocks article { padding: 26px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 220px 1fr; gap: 24px; }
.story-blocks h3 { font-size: 1.4rem; margin: 0; }
.story-blocks p { margin: 0; color: var(--ink-2); }
.story-pro > div { display: grid; gap: 12px; }
.story-pro .label-list { grid-template-columns: 1fr; gap: 4px; }
.story-pro .label-list strong { color: var(--ink); }
.story-links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.fam-compare tr.is-current { background: var(--paper-2); }
.fam-compare tr.is-current td:first-child { color: var(--green); }
.cmp-here { display: block; font: 700 .75rem/1.3 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--copper-ink); margin-top: 4px; }
.footnote { font-size: .82rem; color: var(--ink-2); margin-top: 18px; }

.trust-strip { list-style: none; margin: 28px 0 0; padding: 18px 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 24px; background: var(--paper-2); border-radius: var(--r); }
.trust-strip li { display: flex; gap: 12px; align-items: center; font-size: .9rem; color: var(--ink-2); line-height: 1.35; }
.trust-strip svg { width: 32px; height: 32px; color: var(--green-mid); }
.trust-strip strong { display: block; color: var(--ink); font-weight: 700; }
.trust-scope { font-size: .82rem; color: var(--ink-3); margin: 10px 0 0; }

/* ================= Tescil kartı / listeler ================= */
.label-card { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); position: relative; box-shadow: var(--shadow-1); overflow: hidden; }
.label-card::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--copper); border-radius: 8px; opacity: .45; pointer-events: none; }
.label-card .top { text-align: center; padding: 26px 24px 18px; border-bottom: 3px double var(--line); }
.label-card .top .eyebrow { margin-bottom: .6em; }
.label-card .top h3 { margin: 0; }
.label-card dl { margin: 0; display: grid; grid-template-columns: 42% 1fr; }
.label-card dt, .label-card dd { margin: 0; padding: 11px 24px; border-bottom: 1px solid var(--paper-3); }
.label-card dt { font: 700 .75rem/1.6 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.label-card dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.label-card .foot { padding: 14px 24px 20px; font-size: .85rem; color: var(--ink-2); }

.checklist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.checklist li { padding: 16px 0 16px 40px; border-top: 1px solid var(--line); position: relative; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 18px; width: 22px; height: 22px; border: 1px solid var(--copper); transform: rotate(45deg) scale(.72); }
.checklist li::after { content: ""; position: absolute; left: 8px; top: 26px; width: 6px; height: 6px; background: var(--red); transform: rotate(45deg); }
.checklist-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 48px; }
.checklist-groups h3 { font-size: 1.4rem; margin-bottom: .6em; }
.checklist-groups .checklist { grid-template-columns: 1fr; }

.label-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; }
.label-list li { position: relative; padding: 8px 0 8px 40px; border-bottom: 1px dashed var(--line); }
.label-list li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 28px; height: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%232E6B4F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6h18l8 8v28H12z'/%3E%3Cpath d='M30 6v8h8M17 22h16M17 28h16M17 34h10'/%3E%3C/svg%3E") center / contain no-repeat;
}
.label-list li:has(> svg)::before { display: none; }
.label-list li > svg { position: absolute; left: 0; top: 6px; width: 28px; height: 28px; color: var(--green-mid); }

.note { padding: 18px 22px; border-left: 3px solid var(--copper); background: var(--paper-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: .95rem; }

/* ================= Zaman çizelgesi ================= */
.timeline { list-style: none; margin: 0; padding: 0 0 0 40px; position: relative; max-width: 760px; }
.timeline::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 1px; background: var(--copper); }
.timeline li { position: relative; padding: 0 0 28px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -36px; top: 8px; width: 16px; height: 16px; transform: rotate(45deg); background: var(--paper); border: 1px solid var(--copper); box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 8px var(--red); }
.band .timeline li::before { background: var(--paper-2); box-shadow: inset 0 0 0 3px var(--paper-2), inset 0 0 0 8px var(--red); }
.timeline time { display: block; font: 700 1.4rem/1.1 var(--f-display); color: var(--red-ink); margin-bottom: 4px; }
.timeline p { margin: 0; color: var(--ink-2); }

/* ================= Marka yapısı ================= */
.brand-arch { display: grid; gap: 56px; max-width: 560px; margin-inline: auto; }
.brand-arch > * { position: relative; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow-1); padding: 24px 28px; text-align: center; border: 1px solid var(--line); }
.brand-arch > * + *::before { content: ""; position: absolute; left: 50%; top: -57px; height: 46px; border-left: 1px solid var(--copper); }
.brand-arch > * + *::after { content: ""; position: absolute; left: calc(50% - 6px); top: -16px; width: 10px; height: 10px; border-right: 1px solid var(--copper); border-bottom: 1px solid var(--copper); transform: rotate(45deg); }
.brand-arch > :last-child { border-top: 3px solid var(--red); }
.brand-arch img { height: 56px; width: auto; margin: 0 auto 12px; }
.brand-arch h3 { margin-bottom: .2em; }
.brand-arch p { margin: 0; color: var(--ink-2); font-size: .95rem; }

/* ================= Sayfa düzenleri ================= */
.with-aside { display: grid; grid-template-columns: 8fr 4fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.with-aside > aside { position: sticky; top: 110px; display: grid; gap: 18px; }
.aside-card { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow-1); padding: 22px; border: 1px solid var(--line); }
.aside-card.dark { background: var(--green-deep); color: var(--cream-on-dark); border-color: var(--green-deep); overflow: hidden; }
.aside-card.dark h2, .aside-card.dark h3 { color: var(--paper); font-size: 1.6rem; }
.aside-card.dark p { color: var(--cream-on-dark); }
.aside-card .ci-lockup { margin-bottom: 12px; }
.info-box { margin-top: 24px; padding: 20px 22px; background: var(--paper-2); border-radius: var(--r); border-left: 3px solid var(--green-mid); }
.info-box h3 { font-size: 1.3rem; margin-bottom: .4em; }
.info-box p { color: var(--ink-2); font-size: .95rem; }
.channel-lists { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 32px); }
.channel-lists > * { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow-1); padding: 24px; }
.channel-lists ul { margin: 0; padding-left: 1.1em; columns: 2; column-gap: 24px; }
.channel-lists li { margin-bottom: .35em; break-inside: avoid; }
.channel-lists li::marker { color: var(--copper); }
.logo-card { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: clamp(24px, 4vw, 48px); display: grid; place-items: center; border: 1px solid var(--line); }
.logo-card > img { width: min(260px, 70%); }
.nf-mark { width: 96px; height: 96px; margin: 0 auto 20px; }
.nf { padding-block: clamp(72px, 10vw, 140px); }
.anchor { display: block; width: 0; height: 0; overflow: hidden; }
.hero .fine { font-size: .85rem; color: var(--ink-3); margin: 1.1rem 0 0; }

/* ---------- İç sayfa ekleri ---------- */
.sec-ico { width: 64px; height: 64px; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 1px var(--copper), var(--shadow-1); display: grid; place-items: center; color: var(--green); margin-bottom: 18px; }
.sec-ico svg { width: 34px; height: 34px; }
.center .sec-ico { margin-inline: auto; }
.why-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
table.compare.compare-narrow { min-width: 0; }
.cert-aside { margin: 28px 0 8px; padding-left: 8px; }
.cert-aside .gi-cert { width: min(260px, 80%); }
.emblem-card .ci-lockup { flex-direction: column; text-align: center; }
.emblem-card .ci-cap { text-align: center; }
.place-card address { margin-bottom: 8px; }
.quote-card { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-1); border: 1px solid var(--line); padding: clamp(24px, 4vw, 44px); }
.quote-card .quote { margin-bottom: 0; }
.info-box .links, .center-btns { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.center-btns { justify-content: center; margin-top: 24px; }
.panel-h, .panel-head h2 { font-size: 1.9rem; }
.panel-head { margin-bottom: 12px; }
.band .journey li:not(:last-child)::before { background: var(--paper-2); box-shadow: inset 0 0 0 3px var(--paper-2), inset 0 0 0 7px var(--red); }
.cat-name { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: .4em; }
.cat-name h3 { margin: 0; }
.catalog-cover .lead { margin-inline: auto; }
.channel-lists .sec-ico { width: 52px; height: 52px; margin-bottom: 12px; }
.channel-lists h3 { margin-bottom: .5em; }
@media (min-width: 901px) {
  /* hero GI kartı başlığın sol yarısını örter: yalnızca kaynak satırı sağda kalsın */
  .hero .stamp-frame figcaption { justify-content: flex-end; }
  .hero .stamp-frame figcaption span:first-child { display: none; }
}
@media (min-width: 1101px) {
  .process-long .process { grid-template-columns: repeat(3, 1fr); gap: 40px 24px; }
  .process-long .process-step:nth-child(3n)::after { display: none; }
}
@media (max-width: 760px) { .why-grid.cols-2 { grid-template-columns: 1fr; } }

/* ---------- Galeri ---------- */
.gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(12px, 2vw, 24px); }
.gallery figure { margin: 0; }
.gallery .g1 { grid-column: span 7; }
.gallery .g2 { grid-column: span 5; }
.gallery .g3 { grid-column: span 5; }
.gallery .g4 { grid-column: span 7; }
.gallery > .g1:only-child { grid-column: 3 / span 8; }  /* tek kare: ortada, sağ taraf boş kalmasın */
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery .photo-frame { height: 100%; display: flex; flex-direction: column; }
.gallery .photo-frame img { flex: 1; min-height: 0; }
/* Hikayemiz "Eski kareler": 3 sütunlu pul çerçeve ızgarası; kareler farklı açılarla hafif döndürülür, aynı en-boy oranında kırpılır */
.stamp-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; padding-block: 8px 4px; }
.stamp-gallery .stamp-shadow { transform: rotate(-1.6deg); }
.stamp-gallery > :nth-child(2) .stamp-shadow { transform: rotate(1.2deg) translateY(14px); }
.stamp-gallery > :nth-child(3) .stamp-shadow { transform: rotate(-.6deg); }
/* Kare kesit: build.mjs OLD_PHOTOS sırasıyla 1. karede imza üstte, 2. karede altta; “Susurluk sevdalıları – susev” imzası kesilmesin. */
.stamp-gallery img { aspect-ratio: 1; object-fit: cover; height: auto; }
.stamp-gallery > :nth-child(1) img { object-position: center top; }
.stamp-gallery > :nth-child(2) img { object-position: center bottom; }
.stamp-gallery figcaption { font-size: .9rem; }

/* "Biliyor muydunuz?" kutusu (Hikayemiz, ortalanmış bant içinde sola hizalı) */
.did-you-know { margin: clamp(28px, 4vw, 44px) auto 0; max-width: 640px; text-align: left; background: var(--card); border: 1px dashed var(--copper); border-radius: var(--r); padding: 20px 24px; }
.did-you-know h3 { font-size: 1.3rem; margin-bottom: .4em; color: var(--green); }
.did-you-know p { color: var(--ink-2); font-size: .98rem; margin: 0; }
.did-you-know .source-line { margin-top: 12px; font-size: .8rem; }

/* Coğrafi işaret sayfası: "Ayran nedir?" ve "Tescil ne anlama gelir?" kutuları; kaynak satırı kutunun içinde */
.fact-pair { margin-top: clamp(32px, 5vw, 56px); }
.why .source-line { margin-top: 14px; font-size: .8rem; }
.info-box .source-line { margin-top: 12px; font-size: .8rem; }

/* ---------- Belgeler ---------- */
.docs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 36px); }
.doc { display: grid; grid-template-columns: 160px 1fr; gap: 24px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); box-shadow: var(--shadow-1); align-items: start; }
.doc button { padding: 0; border: 1px solid var(--line); background: none; cursor: zoom-in; }
.doc h3 { font-size: 1.35rem; margin-bottom: .4em; }
.doc p { color: var(--ink-2); font-size: .95rem; margin: 0; }
.doc > .logo-card { padding: 12px; border-radius: var(--r); box-shadow: none; }
.doc > .logo-card img { width: 100%; height: auto; }
.doc > .sec-ico { margin: 0 auto; }
.docs > .doc:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* tek kalan kart sağında boş hücre bırakmasın */
#belgeler h3#markalar { margin-top: 40px; }

/* ---------- Formlar ---------- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.form .full { grid-column: 1 / -1; }
.field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.field label .opt { font-weight: 400; color: var(--ink-2); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--card); color: var(--ink); font: 400 1rem/1.4 var(--f-body); transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green-mid); box-shadow: 0 0 0 3px rgba(46, 107, 79, .18); }
.field .err { display: none; color: var(--red-ink); font-size: .85rem; margin-top: 6px; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--red-ink); }
.field.invalid .err { display: block; }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.field > legend { padding: 0; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.checks label { display: inline-flex; gap: 8px; align-items: center; font-weight: 400; font-size: .95rem; margin: 0; min-height: 36px; }
.checks input { width: 18px; height: 18px; min-height: 0; accent-color: var(--green); }
.hp { position: absolute; left: -9999px; }
.form-note { font-size: .85rem; color: var(--ink-2); }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(22px, 4vw, 40px); box-shadow: var(--shadow-1); }

/* ---------- Sipariş sayfası ---------- */
.order { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
.order-side { position: sticky; top: 110px; }
.line-items { list-style: none; margin: 0; padding: 0; }
.line { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--paper-3); }
.line > img { width: 64px; height: 64px; object-fit: contain; background: var(--paper-2); padding: 6px; border-radius: var(--r-sm); mix-blend-mode: multiply; }
.line h3, .line h4 { font-size: 1.15rem; margin: 0 0 2px; }
.line .meta { font-size: .85rem; color: var(--ink-2); }
.line .ctrl { display: flex; gap: 8px; align-items: center; }
.line .qty { min-height: 44px; }
.line .qty button { width: 36px; }
.line .qty input { width: 44px; }
.remove { background: none; border: 0; color: var(--ink-2); cursor: pointer; padding: 8px; min-height: 44px; font-size: .8rem; text-decoration: underline; }
.remove:hover { color: var(--red-ink); }
.empty { text-align: center; padding: 36px 12px; color: var(--ink-2); }
.empty svg { width: 48px; height: 48px; color: var(--copper); margin: 0 auto 12px; }
.disclaimer { font-size: .88rem; padding: 14px 16px; background: var(--paper-2); border-left: 3px solid var(--green-mid); border-radius: 0 var(--r-sm) var(--r-sm) 0; margin-top: 18px; }
.preview { white-space: pre-wrap; font: .85rem/1.5 ui-monospace, Consolas, monospace; background: var(--paper); border: 1px dashed var(--line); border-radius: var(--r-sm); padding: 14px; max-height: 240px; overflow: auto; margin: 12px 0 0; }
.order-actions { display: grid; gap: 10px; margin-top: 18px; }
.order-actions .row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }

/* ---------- SSS ---------- */
.faq-group { margin-bottom: 48px; }
.faq-group h2 { font-size: 1.9rem; margin-bottom: 14px; }
details.faq { border-top: 1px solid var(--line); }
details.faq:last-of-type { border-bottom: 1px solid var(--line); }
details.faq summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative; font: 700 1.25rem/1.3 var(--f-display); }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font: 400 1.7rem/1 var(--f-body); color: var(--red-ink); transition: transform .3s; }
details.faq[open] summary::after { transform: translateY(-50%) rotate(45deg); }
details.faq .a { padding: 0 0 22px; color: var(--ink-2); max-width: 70ch; }

/* ---------- İletişim ---------- */
.contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.contact-card { padding: 28px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); box-shadow: var(--shadow-1); }
.contact-card h3 { margin-bottom: .2em; }
.contact-card address { font-style: normal; color: var(--ink-2); margin-bottom: 16px; }
.phones { list-style: none; padding: 0; margin: 0; }
.phones li { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--paper-3); flex-wrap: wrap; }
.phones span { color: var(--ink-2); font-size: .92rem; }
.phones a { font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none; }

/* ---------- Metin sayfaları ---------- */
.prose h2 { font-size: 1.9rem; margin-top: 2em; }
.prose h3 { font-size: 1.4rem; margin-top: 1.6em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 1em 0 1.6em; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.prose th { background: var(--paper-2); }

/* ---------- Kromozom ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(232, 220, 196, .2); }
.stats div { padding: 28px 24px 0 0; }
.stats strong { display: block; font: 600 2.6rem/1 var(--f-display); color: var(--paper); margin-bottom: 8px; }
.stats span { color: var(--cream-on-dark); font-size: .95rem; }

/* Kromozom Organik koyu bandı: merkez → fabrika → soğuk zincir (kesikli bağlantı ve ok), krem logo imzası (D26) */
.chain-head { display: flex; justify-content: space-between; align-items: end; gap: 20px 32px; flex-wrap: wrap; }
.chain-head h2 { max-width: 26ch; margin: 0; }
.krem-sign { width: 150px; height: auto; opacity: .92; }
.chain { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 64px; border-top: 1px solid rgba(232, 220, 196, .2); }
.chain li { position: relative; padding-top: 28px; min-width: 0; }
.chain li + li::before { content: ""; position: absolute; left: -54px; top: 46px; width: 40px; border-top: 1px dashed var(--gold-on-dark); opacity: .8; }
.chain li + li::after { content: ""; position: absolute; left: -20px; top: 42px; width: 8px; height: 8px; border-top: 1px solid var(--gold-on-dark); border-right: 1px solid var(--gold-on-dark); transform: rotate(45deg); }
.chain strong { display: block; font: 600 clamp(2rem, 1.6rem + 1.2vw, 2.6rem)/1 var(--f-display); color: var(--paper); margin-bottom: 10px; }
.chain-tag { display: block; font: 700 .75rem/1.3 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-on-dark); margin-bottom: 10px; }
.chain p { font-size: .95rem; margin: 0 0 4px; overflow-wrap: anywhere; }

/* Ana sayfa "Sayılarla" şeridi (marka yolculuğu bölümünün altı) */

/* Ana sayfa "Tescil takvimi" şeridi: ≥761 px yatay, altında dikey (.timeline temel stili) */
.gi-steps .timeline strong { display: block; font: 700 .75rem/1.3 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--copper-ink); margin-bottom: 6px; }
.gi-steps .timeline p { font-size: .95rem; }
@media (min-width: 761px) {
  .timeline-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 28px; max-width: none; padding: 30px 0 0; }
  .timeline-row::before { left: 8px; right: 8px; top: 8px; bottom: auto; width: auto; height: 1px; }
  .timeline-row li { padding: 0; }
  .timeline-row li::before { left: 0; top: -30px; }
}

/* İç sayfa hero kartları (pageHero media: heroCard, .hero-cert, .hero-logo) */
.hero-card { position: relative; width: min(100%, 420px); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: clamp(22px, 2.4vw, 30px); }
.hero-card > .eyebrow { margin-bottom: .8em; }
.hero-card-list { list-style: none; margin: 0; padding: 0; }
.hero-card-list li { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--paper-3); }
.hero-card-list li:last-child { padding-bottom: 4px; }
.hero-card-list strong { font: 700 1.45rem/1.15 var(--f-display); color: var(--green); }
.hero-card-list strong a { color: inherit; text-decoration: none; }
.hero-card-list strong a:hover { color: var(--red-ink); }
.hero-card-list span { font-size: .9rem; color: var(--ink-2); line-height: 1.4; }
.hero-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--paper-3); }
.hero-card-foot .link-arrow { min-height: 32px; }
.hero-card-topics .hero-card-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
.hero-card-topics .hero-card-list strong { font-size: 1.2rem; }
.hero-card-fam .hero-card-list strong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.hero-card-list .text-badge, .hero-card-foot .text-badge { color: var(--cream-on-dark); font-size: .75rem; line-height: 1; }
.hero-steps { list-style: none; margin: 0; padding: 0; }
.hero-steps li { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--paper-3); font: 700 1.3rem/1.2 var(--f-display); color: var(--ink); }
.hero-steps .n { font: 600 1.9rem/1 var(--f-display); color: var(--copper); min-width: 2ch; }
.hero-card.dark { background: var(--green-deep); color: var(--cream-on-dark); border-color: var(--green-deep); overflow: hidden; isolation: isolate; --focus: var(--paper); }
.hero-card.dark .eyebrow { color: var(--gold-on-dark); }
.hero-card.dark p { color: var(--cream-on-dark); }
.hero-card.dark a:not(.btn) { color: var(--paper); }
.hero-card.dark .hero-card-foot { border-top-color: rgba(232, 220, 196, .2); font-size: .92rem; }
.hero-card.dark .hero-card-list li { border-top-color: rgba(232, 220, 196, .2); }
.hero-card.dark .hero-card-list strong { color: var(--gold-on-dark); font-variant-numeric: tabular-nums; }
.hero-card.dark .hero-card-list span { color: var(--cream-on-dark); }
.hero-card-big { margin: 0 0 .5em; font: 600 clamp(1.9rem, 1.5rem + 1.2vw, 2.5rem)/1.1 var(--f-display); font-variant-numeric: tabular-nums; }
.hero-card-big a { text-decoration: none; }
.hero-card.dark .krem-sign { width: 116px; margin-top: 18px; }
.hero-cert { display: grid; justify-items: center; gap: 22px; }
.hero-cert .gi-cert { width: min(240px, 66%); }
.hero-cert-cap { margin: 0; display: grid; gap: 2px; text-align: center; font-size: .9rem; color: var(--ink-2); }
.hero-cert-cap strong { font: 700 1.35rem/1.2 var(--f-display); color: var(--ink); }
.hero-logo { width: min(100%, 380px); gap: 10px; text-align: center; box-shadow: var(--shadow-2); }
.logo-card.hero-logo > img { width: min(190px, 56%); margin-bottom: 8px; }
.hero-logo p { margin: 0; color: var(--ink-2); font-size: .95rem; max-width: 30ch; }
.hero-logo .hero-logo-no { max-width: none; font: 700 .75rem/1.3 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--red-ink); }

/* Coğrafi işaret metin rozeti (amblemin izinli olmadığı dar yerler, D17) */
.text-badge { display: inline-flex; align-items: center; font: 700 .75rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; background: var(--green-deep); color: var(--cream-on-dark); border-radius: var(--r-sm); padding: 6px 9px; white-space: nowrap; }
.gi-note { margin-top: 28px; padding: 18px 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); display: grid; gap: 10px; justify-items: start; }
.gi-note p { margin: 0; font-size: .95rem; color: var(--ink-2); }
.gi-note strong { display: block; font: 700 1.2rem/1.25 var(--f-display); color: var(--ink); margin-bottom: 2px; }
.gi-note .link-arrow { min-height: 32px; }

/* Üretim yeri (Fabrika + Merkez kartları) ve İletişim adres kartlarındaki alt etiketler */
.place-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.place-cards .contact-card { padding: 24px 22px; display: flex; flex-direction: column; align-items: flex-start; }
.place-cards .sec-ico { width: 52px; height: 52px; margin-bottom: 14px; }
.place-cards .link-arrow { margin-top: auto; }
.place-card .link-arrow { min-height: 32px; }
.place-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; }
.place-tags span { font: 700 .75rem/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--green); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 10px; }

/* ---------- Animasyon ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease) calc(var(--i, 0) * 60ms), transform .8s var(--ease) calc(var(--i, 0) * 60ms); }
.reveal.in { opacity: 1; transform: none; }
.js-off .reveal { opacity: 1; transform: none; }
.sku.reveal { transition: opacity .8s var(--ease) calc(var(--i, 0) * 60ms), transform .8s var(--ease) calc(var(--i, 0) * 60ms), translate .35s var(--ease), box-shadow .35s var(--ease); }

/* ---------- Katalog ---------- */
.catalog-page { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(24px, 5vw, 56px); margin-bottom: 32px; }
.catalog-cover { text-align: center; padding-block: 80px; }
.catalog-cover img { width: 260px; margin: 0 auto 32px; }
.cat-trust { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cat-trust li { padding: 12px 14px; background: var(--paper-2); border-radius: var(--r-sm); font-weight: 600; font-size: .92rem; }
.cat-product { display: grid; grid-template-columns: 180px 1fr; gap: 28px; padding: 24px 0; border-top: 1px solid var(--line); break-inside: avoid; }
.cat-product > div > img { height: 200px; width: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cat-product .ci-emblem img { height: var(--s); width: var(--s); mix-blend-mode: normal; }
.cat-product h3 { margin-bottom: .2em; }
.cat-product table { width: 100%; border-collapse: collapse; font-size: .88rem; margin-top: 10px; }
.cat-product th, .cat-product td { border: 1px solid var(--paper-3); padding: 6px 10px; text-align: left; }
.cat-product th { width: 32%; font-weight: 600; background: var(--paper); }

/* ================= Responsive ================= */
@media (min-width: 1440px) {
  :root { --w: 1320px; }
  .hero-grid { min-height: 660px; }
}

/* 901–1259 px: 5fr sütunda hero düğmeleri (2 × ~225 px) alt alta düşüyordu; metin sütunu biraz genişler */
@media (min-width: 901px) and (max-width: 1259px) {
  .hero-grid { grid-template-columns: 11fr 9fr; }
}
@media (min-width: 901px) and (max-width: 1059px) {
  .hero .btns .btn { padding-inline: 1.1em; letter-spacing: .08em; }
}

@media (max-width: 1100px) {
  .pack-grid, .related { grid-template-columns: repeat(3, 1fr); }
  .highlights { grid-template-columns: repeat(2, 1fr); }
  .process { grid-template-columns: repeat(3, 1fr); gap: 36px 24px; }
  .process-step:nth-child(3n)::after { display: none; }
  .why-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .values { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1060px) {
  .burger { display: block; }
  .header .wrap { gap: 12px; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%; height: calc(100vh - var(--hdr)); height: calc(100dvh - var(--hdr));
    background: var(--paper-2); margin: 0; padding: 8px var(--gutter) 80px; transform: translateY(-10px); opacity: 0;
    transition: transform .35s var(--ease), opacity .35s var(--ease), visibility .35s; overflow-y: auto; visibility: hidden; display: flex; flex-direction: column;
    border-top: 1px solid var(--line); box-shadow: 0 20px 30px -20px rgba(43, 35, 32, .35);
  }
  .nav.open { transform: none; opacity: 1; visibility: visible; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav li { border-bottom: 1px solid var(--line); }
  .nav a { display: flex; align-items: center; min-height: 56px; padding: 0; font: 600 1.5rem/1.1 var(--f-display); }
  .nav a::after { display: none; }
  .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--red); padding-left: 12px; }
  .nav-contact { display: grid; gap: 10px; margin-top: 28px; padding: 20px; background: var(--green-deep); border-radius: var(--r); }
  .nav-contact a { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; border-radius: var(--r-sm); font: 700 .82rem/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--green-deep); background: var(--paper); text-align: center; }
  .nav-contact a + a { background: transparent; color: var(--cream-on-dark); border: 1.5px solid rgba(232, 220, 196, .6); }
  .nav-contact svg { width: 18px; height: 18px; }
  .list-btn { margin-left: auto; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .order { grid-template-columns: 1fr; }
  .order-side { position: static; }
}

@media (max-width: 900px) {
  .hero { padding-bottom: 56px; }
  .hero-grid { grid-template-columns: 1fr; min-height: 0; gap: 28px; }
  .hero-visual { padding: 24px 0 0; max-width: 620px; width: 100%; margin-inline: auto; }
  .hero-visual .stamp-shadow { width: 100%; }
  .brand-stamp { width: 88px; height: 88px; padding: 9px; top: 4px; right: 4px; }
  .gi-card { position: static; max-width: none; margin-top: 20px; }
  .hero-bottle { bottom: auto; top: 46%; right: 4%; width: 20%; }
  .feature-strip { margin-top: 24px; grid-template-columns: 1fr 1fr; }
  .feature-strip li + li { border-left: 0; }
  .feature-strip li { border-top: 1px solid var(--line); }
  .feature-strip li:nth-child(-n+2) { border-top: 0; }
  .feature-strip li:nth-child(even) { border-left: 1px solid var(--line); }
  .feature-strip li:nth-child(5) { grid-column: 1 / -1; border-left: 0; }
  .gi-spot { grid-template-columns: 1fr; }
  .gi-spot-visual { order: -1; }
  .gi-cert { width: 70%; max-width: 300px; }
  .split { grid-template-columns: 1fr; }
  .split.rev > :first-child { order: 0; }
  .page-hero-grid:has(> .page-hero-media) { grid-template-columns: 1fr; }
  .page-hero-mark { width: 150px; height: 150px; top: 24px; transform: none; }
  .page-hero-media.desk-only { display: none; }
  .logo-card.hero-logo > img { width: 130px; }
  .page-hero-media .hero-card, .page-hero-media .hero-logo { width: min(100%, 520px); }
  .pd { grid-template-columns: 1fr; grid-template-rows: none; }
  .pd-gallery, .pd-info, .pd-aside { grid-column: auto; grid-row: auto; }
  .pd-aside { position: static; }
  .fam-stage { aspect-ratio: 16 / 10; }
  .fam-stage > .pack-card { inset: 6% 22%; }   /* telefonda kart 190 px kompakt eşiğinin üstünde kalsın */
  .story-blocks article { grid-template-columns: 1fr; gap: 8px; }
  .contact-strip { grid-template-columns: 1fr 1fr; }
  .contact-strip > li + li { border-left: 0; }
  .contact-strip > li:nth-child(even) { border-left: 1px solid var(--line); }
  .contact-strip > li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .with-aside { grid-template-columns: 1fr; }
  .with-aside > aside { position: static; }
  .pro-band { grid-template-columns: 1fr; }
  .family-cols { grid-template-columns: 1fr; }
  .chain { grid-template-columns: 1fr; gap: 0; }
  .chain li { padding: 24px 0 24px; }
  .chain li + li { border-top: 1px dashed rgba(201, 164, 106, .5); }
  .chain li + li::before { left: 50%; top: -14px; width: 0; height: 14px; border-top: 0; border-left: 1px dashed var(--gold-on-dark); }
  .chain li + li::after { left: calc(50% - 4px); top: -6px; transform: rotate(135deg); }
  .highlights { grid-template-columns: repeat(2, 1fr); }
  .trust-strip { grid-template-columns: 1fr; }
  .docs { grid-template-columns: 1fr; }
  .doc { grid-template-columns: 110px 1fr; }
  .topbar-items a[href^="mailto:"] { display: none; }
  .topbar-note .long { display: none; }
  .topbar-note .short { display: inline; }
}

@media (max-width: 760px) {
  :root { --hdr: 68px; }
  .topbar .wrap { justify-content: center; }
  .topbar-items, .topbar .hide-sm { display: none; }
  .topbar-note { justify-content: center; text-align: center; }
  .topbar-note .long { display: none; }
  .topbar-note .short { display: inline; }
  .logo img { height: 44px; }
  .pack-grid, .related { grid-template-columns: repeat(2, 1fr); }
  .tabs {
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent);
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 0 16px; flex: none; }
  .showcase-head { grid-template-columns: 1fr; }
  .showcase-head > .link-arrow { justify-self: start; grid-row: 4; }   /* başlık, süs çizgisi ve metinden sonra */
  .hero .fine { padding-right: 72px; }   /* sabit WhatsApp düğmesi satırın sonunu örtmesin */
  .table-hint { display: block; margin: 8px 0 0; }
  .sku-body { padding: 12px 12px 14px; }
  .sku h3 { font-size: 1.15rem; }
  .sku-actions .link-arrow { display: none; }
  .sku-actions .btn { width: 100%; flex-basis: 100%; padding-inline: .5em; letter-spacing: .06em; }
  /* D24: telefonda kartlardaki "Listeye Ekle" ikincil görünür (12 kırmızı düğme vitrini kırmızıya boğmasın) */
  .sku-actions .btn { --bg: transparent; --fg: var(--green); --bd: var(--line-strong); min-height: 40px; font-size: .75rem; }
  .sku-actions .btn:hover { --bg: var(--green); --bd: var(--green); color: var(--paper); }
  /* Ana sayfa vitrini: "Tümü" sekmesinde ilk 6 kart (build.mjs SHOWCASE_LIMIT), altında /urunler bağlantısı */
  .showcase[data-limit][data-on="all"] .pack-grid > .sku:nth-child(n + 7) { display: none; }
  .showcase[data-limit][data-on="all"] .showcase-more { display: flex; }
  .stamp-gallery { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .stamp-gallery > :nth-child(2) .stamp-shadow { transform: rotate(1.2deg); }
  .why-grid, .why-grid.cols-4 { grid-template-columns: 1fr; }
  .process { grid-template-columns: 1fr; gap: 0; max-width: 520px; }
  .process-step { display: grid; grid-template-columns: 72px 1fr; column-gap: 18px; text-align: left; align-items: start; padding-bottom: 28px; }
  .process-ico { grid-row: 1 / span 3; margin: 0; }
  .process-step::after, .process-step:nth-child(3n)::after { display: block; top: 82px; bottom: 4px; left: 35px; right: auto; border-top: 0; border-left: 2px dotted var(--copper); }
  .process-step:last-child::after { display: none; }
  .process-num { margin-top: 4px; }
  .journey { grid-template-columns: 1fr; gap: 0; padding-left: 32px; }
  .journey::before { left: 7px; right: auto; top: 7px; bottom: 7px; width: 1px; height: auto; }
  .journey li { padding: 0 0 26px; }
  .journey li::before { left: -32px; top: 2px; }
  .full-photo { min-height: 420px; align-items: end; }
  .full-photo::after { background: linear-gradient(180deg, rgba(22, 53, 42, .72) 0%, rgba(22, 53, 42, .88) 30%, rgba(22, 53, 42, .92) 100%); }
  .checklist, .checklist-groups, .label-list, .channel-lists { grid-template-columns: 1fr; }
  .channel-lists ul { columns: 1; }
  .contact-cards { grid-template-columns: 1fr; }
  .gallery > * { grid-column: 1 / -1 !important; }
  .gi-facts dd { font-size: 1.05rem; }
}

@media (max-width: 640px) {
  .drawer { top: auto; left: 0; width: 100%; max-height: 86vh; transform: translateY(100%); border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .form { grid-template-columns: 1fr; }
  .cat-product { grid-template-columns: 1fr; }
  .gi-box { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .doc { grid-template-columns: 1fr; gap: 16px; }
  .doc > button, .doc > .logo-card { max-width: 150px; }
  .doc > .sec-ico { margin: 0 0 4px; }
  .footer-grid { grid-template-columns: 1fr; padding-top: 28px; }
  .contact-strip { grid-template-columns: 1fr; }
  .contact-strip > li:nth-child(even) { border-left: 0; }
  .contact-strip > li + li { border-top: 1px solid var(--line); }
  .stats { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr; }
  .place-cards { grid-template-columns: 1fr; }
  .cat-trust { grid-template-columns: 1fr; }
  .gi-facts { grid-template-columns: 1fr; }
  .gi-facts > div:nth-last-child(2) { border-bottom: 0; }
}

@media (max-width: 520px) {
  .list-btn .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tabs { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; row-gap: 0; margin-inline: 0; padding-inline: 0; }
  .tab { padding: 0 12px; }
  .list-btn { padding-inline: 14px; }
  .order-actions .row { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .hero .btns .btn { flex: 1 1 100%; }
  .feature-strip li { padding: 16px 12px; }
  .feature-strip span { font-size: .8rem; }
  .gi-spot-visual .ci-lockup { position: static; margin-top: 16px; }
  .gi-spot-visual { padding-bottom: 0; }
  .gi-cert { width: 70%; }
  .pro-band .btns .btn { flex: 1 1 100%; }
  .page-hero-media .ci-lockup { padding: 18px; }
  .page-hero h1 { font-size: clamp(2.1rem, 9vw, 2.6rem); }
  .trust-strip { padding: 16px; }
}

@media (max-width: 339px) {
  .pack-grid, .related { grid-template-columns: 1fr; }
}

/* ---------- Azaltılmış hareket ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .fade-in { opacity: 1; transform: none; }
  .sku:hover { translate: none; }
  .sku:hover .sku-stage > :is(img, .pack-card) { transform: none; }
  .brand-stamp { transform: rotate(-8deg); }
}

/* ---------- Yazdırma ---------- */
@media print {
  @page { size: A4; margin: 14mm; }
  body { background: #fff; font-size: 10.5pt; color: #000; }
  body::before, body::after, .noise::before, .topbar, .header, .footer, .fab, .no-print, .drawer, .drawer-backdrop, .toast, .lightbox,
  .orn-kose, .orn-vazo, .orn-bordur, .skip, .tabs, .view-toggle { display: none !important; }
  .catalog-page { border: 0; border-radius: 0; padding: 0; margin: 0 0 14pt; background: #fff; break-after: auto; page-break-after: auto; }
  .catalog-cover { break-after: page; page-break-after: always; }
  .catalog-page > .eyebrow { display: block; break-after: avoid; page-break-after: avoid; }  /* üst başlık sayfa sonunda yalnız kalmasın */
  .catalog-page > h2 { break-after: avoid; page-break-after: avoid; }
  .cat-product { break-inside: avoid; page-break-inside: avoid; grid-template-columns: 130px 1fr; gap: 18pt; padding: 12pt 0; }
  .cat-product > div > img { height: 150px; }
  .cat-product > div > .pack-card { min-height: 150px; }
  .reveal, .fade-in { opacity: 1 !important; transform: none !important; animation: none !important; }
  .sku, .why, .panel, .label-card, .kunye { box-shadow: none; break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
  .section, .section-tight, .page-hero { padding-block: 0 12pt; background: none; }
  .band, .band-dark, .gi-spot, .pro-band { background: none !important; color: #000; }
  .band-dark h2, .gi-spot h2, .gi-spot p, .pro-band h2, .pro-band p { color: #000; }
}

/* ================= Osmanlı köşe rozeti (koyu bantlar) ================= */
.cta-band::after, .pro-band::after, .gi-spot::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: clamp(-50px, -3vw, -20px); top: clamp(-50px, -3vw, -20px);
  width: clamp(150px, 17vw, 230px); aspect-ratio: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23E8DCC4' stroke-width='1.1'%3E%3Cellipse cx='84.2' cy='60' rx='19.8' ry='5.9' transform='rotate(0 84.2 60)'/%3E%3Cellipse cx='81' cy='72.1' rx='19.8' ry='5.9' transform='rotate(30 81 72.1)'/%3E%3Cellipse cx='72.1' cy='81' rx='19.8' ry='5.9' transform='rotate(60 72.1 81)'/%3E%3Cellipse cx='60' cy='84.2' rx='19.8' ry='5.9' transform='rotate(90 60 84.2)'/%3E%3Cellipse cx='47.9' cy='81' rx='19.8' ry='5.9' transform='rotate(120 47.9 81)'/%3E%3Cellipse cx='39' cy='72.1' rx='19.8' ry='5.9' transform='rotate(150 39 72.1)'/%3E%3Cellipse cx='35.8' cy='60' rx='19.8' ry='5.9' transform='rotate(180 35.8 60)'/%3E%3Cellipse cx='39' cy='47.9' rx='19.8' ry='5.9' transform='rotate(210 39 47.9)'/%3E%3Cellipse cx='47.9' cy='39' rx='19.8' ry='5.9' transform='rotate(240 47.9 39)'/%3E%3Cellipse cx='60' cy='35.8' rx='19.8' ry='5.9' transform='rotate(270 60 35.8)'/%3E%3Cellipse cx='72.1' cy='39' rx='19.8' ry='5.9' transform='rotate(300 72.1 39)'/%3E%3Cellipse cx='81' cy='47.9' rx='19.8' ry='5.9' transform='rotate(330 81 47.9)'/%3E%3Cellipse cx='77.9' cy='64.8' rx='12.3' ry='3.9' transform='rotate(15 77.9 64.8)' fill='%23E8DCC4' fill-opacity='.22'/%3E%3Cellipse cx='73.1' cy='73.1' rx='12.3' ry='3.9' transform='rotate(45 73.1 73.1)' fill='%23E8DCC4' fill-opacity='.22'/%3E%3Cellipse cx='64.8' cy='77.9' rx='12.3' ry='3.9' transform='rotate(75 64.8 77.9)' fill='%23E8DCC4' fill-opacity='.22'/%3E%3Cellipse cx='55.2' cy='77.9' rx='12.3' ry='3.9' transform='rotate(105 55.2 77.9)' fill='%23E8DCC4' fill-opacity='.22'/%3E%3Cellipse cx='46.9' cy='73.1' rx='12.3' ry='3.9' transform='rotate(135 46.9 73.1)' fill='%23E8DCC4' fill-opacity='.22'/%3E%3Cellipse cx='42.1' cy='64.8' rx='12.3' ry='3.9' transform='rotate(165 42.1 64.8)' fill='%23E8DCC4' fill-opacity='.22'/%3E%3Cellipse cx='42.1' cy='55.2' rx='12.3' ry='3.9' transform='rotate(195 42.1 55.2)' fill='%23E8DCC4' fill-opacity='.22'/%3E%3Cellipse cx='46.9' cy='46.9' rx='12.3' ry='3.9' transform='rotate(225 46.9 46.9)' fill='%23E8DCC4' fill-opacity='.22'/%3E%3Cellipse cx='55.2' cy='42.1' rx='12.3' ry='3.9' transform='rotate(255 55.2 42.1)' fill='%23E8DCC4' fill-opacity='.22'/%3E%3Cellipse cx='64.8' cy='42.1' rx='12.3' ry='3.9' transform='rotate(285 64.8 42.1)' fill='%23E8DCC4' fill-opacity='.22'/%3E%3Cellipse cx='73.1' cy='46.9' rx='12.3' ry='3.9' transform='rotate(315 73.1 46.9)' fill='%23E8DCC4' fill-opacity='.22'/%3E%3Cellipse cx='77.9' cy='55.2' rx='12.3' ry='3.9' transform='rotate(345 77.9 55.2)' fill='%23E8DCC4' fill-opacity='.22'/%3E%3Ccircle cx='60' cy='60' r='8.8'/%3E%3Ccircle cx='60' cy='60' r='3.1' fill='%23E8DCC4'/%3E%3Cellipse cx='69.1' cy='63.8' rx='8.1' ry='3.6' transform='rotate(22.5 69.1 63.8)'/%3E%3Cellipse cx='63.8' cy='69.1' rx='8.1' ry='3.6' transform='rotate(67.5 63.8 69.1)'/%3E%3Cellipse cx='56.2' cy='69.1' rx='8.1' ry='3.6' transform='rotate(112.5 56.2 69.1)'/%3E%3Cellipse cx='50.9' cy='63.8' rx='8.1' ry='3.6' transform='rotate(157.5 50.9 63.8)'/%3E%3Cellipse cx='50.9' cy='56.2' rx='8.1' ry='3.6' transform='rotate(202.5 50.9 56.2)'/%3E%3Cellipse cx='56.2' cy='50.9' rx='8.1' ry='3.6' transform='rotate(247.5 56.2 50.9)'/%3E%3Cellipse cx='63.8' cy='50.9' rx='8.1' ry='3.6' transform='rotate(292.5 63.8 50.9)'/%3E%3Cellipse cx='69.1' cy='56.2' rx='8.1' ry='3.6' transform='rotate(337.5 69.1 56.2)'/%3E%3Cellipse cx='65.3' cy='65.3' rx='5' ry='2.3' transform='rotate(45 65.3 65.3)' fill='%23E8DCC4' fill-opacity='.22'/%3E%3Cellipse cx='60' cy='67.6' rx='5' ry='2.3' transform='rotate(90 60 67.6)' fill='%23E8DCC4' fill-opacity='.22'/%3E%3Cellipse cx='54.7' cy='65.3' rx='5' ry='2.3' transform='rotate(135 54.7 65.3)' fill='%23E8DCC4' fill-opacity='.22'/%3E%3Cellipse cx='52.4' cy='60' rx='5' ry='2.3' transform='rotate(180 52.4 60)' fill='%23E8DCC4' fill-opacity='.22'/%3E%3Cellipse cx='54.7' cy='54.7' rx='5' ry='2.3' transform='rotate(225 54.7 54.7)' fill='%23E8DCC4' fill-opacity='.22'/%3E%3Cellipse cx='60' cy='52.4' rx='5' ry='2.3' transform='rotate(270 60 52.4)' fill='%23E8DCC4' fill-opacity='.22'/%3E%3Cellipse cx='65.3' cy='54.7' rx='5' ry='2.3' transform='rotate(315 65.3 54.7)' fill='%23E8DCC4' fill-opacity='.22'/%3E%3Cellipse cx='67.6' cy='60' rx='5' ry='2.3' transform='rotate(360 67.6 60)' fill='%23E8DCC4' fill-opacity='.22'/%3E%3Ccircle cx='60' cy='60' r='3.6'/%3E%3Ccircle cx='60' cy='60' r='1.3' fill='%23E8DCC4'/%3E%3Ccircle cx='60' cy='60' r='52' stroke-dasharray='1 4'/%3E%3Ccircle cx='60' cy='60' r='57'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; opacity: .3;
}
.cta-band { overflow: hidden; }
.pro-band::after { opacity: .3; }
.gi-spot::before { inset: auto; right: clamp(-50px, -3vw, -20px); top: clamp(-50px, -3vw, -20px); opacity: .22; mix-blend-mode: normal; border-radius: 0; }
@media print { .cta-band::after, .pro-band::after, .gi-spot::before, .bordur { display: none; } }