/* ==========================================================================
   0. YAZI TİPİ: Sen (değişken, 400–800), siteyle birlikte sunulur
   Türkçe için iki dosya: ğ, ş, İ gibi harfler latin-ext'te, ı ile temel Latin latin'de.
   ========================================================================== */
@font-face {
    font-family: 'Sen';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/sen-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
        U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
        U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Sen';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/sen-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
        U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   1. TASARIM SİSTEMİ
   ========================================================================== */
:root {
    /* --- Temaya göre değişen renkler (açık tema varsayılan) --- */
    --c-primary: #1e4616;      /* Orman Yeşili: başlıklar ve vurgulu yazı */
    --c-primary-light: #2a5f1f;
    --c-lime-text: #4d7d12;
    --c-mint: #e8f3ea;

    --c-bg: #f8f9f7;
    --c-surface: #ffffff;
    --c-text: #2e2e2e;
    --c-text-muted: #5f6660;
    --c-border: #e4e4e0;
    --c-nav-blur: rgba(255, 255, 255, 0.72);  /* Mobil menü: saydam + bulanık zemin */
    --c-hata: #b3261e;                         /* Form doğrulama hatası */

    --shadow-sm: 0 4px 16px rgba(30, 70, 22, 0.06);
    --shadow-md: 0 12px 32px rgba(30, 70, 22, 0.08);
    --shadow-lg: 0 24px 60px rgba(30, 70, 22, 0.15);

    /* Yasal uyarı şeridi (kehribar) */
    --c-warn-bg: #fff8dc;
    --c-warn-text: #5c4a00;
    --c-warn-icon: #b08d00;

    /* --- İki temada da sabit kalanlar --- */
    --c-accent: #f6ce21;       /* Canlı Sarı */
    --c-accent-hover: #e0b800;
    --c-lime: #84c224;         /* Fıstık Yeşili */
    --c-primary-deep: #122b0d; /* Koyu bantların zemini: her iki temada koyu */
    --c-brand-surface: #1e4616;/* Yeşil ZEMİN olarak kullanılan marka rengi */
    --c-on-accent: #1e4616;    /* Sarı zemin ÜZERİNDEKİ yazı */

    /* --- Koyu tema değerleri: tek kaynak, aşağıdaki iki blok buradan okur --- */
    --dark-primary: #b5dd9b;
    --dark-primary-light: #a5d489;
    --dark-lime-text: #9ccf5a;
    --dark-mint: #1d2a1f;
    --dark-bg: #0f1310;
    --dark-surface: #161d18;
    --dark-text: #e6ebe6;
    --dark-text-muted: #a6b0a7;
    --dark-border: #2b332c;
    --dark-nav-blur: rgba(13, 17, 14, 0.76);
    --dark-hata: #f2b8b5;
    --dark-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.45);
    --dark-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.5);
    --dark-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
    --dark-warn-bg: #2a2412;
    --dark-warn-text: #f2dc9a;
    --dark-warn-icon: #d9b23c;

    --font-main: 'Sen', system-ui, sans-serif;

    --radius-sm: 12px;
    --radius-md: 24px;
    --radius-lg: 32px;
    --radius-pill: 999px;

    --ease: cubic-bezier(0.32, 0.72, 0, 1);
    --transition: all 0.3s var(--ease);

    color-scheme: light;
}

/* Koyu tema. İki seçici aynı atamaları yapar; renk değerleri yukarıda tek yerde.
   Sistem koyuysa otomatik, ziyaretçi düğmeyle açıkça seçtiyse data-theme kazanır. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --c-primary: var(--dark-primary);
        --c-primary-light: var(--dark-primary-light);
        --c-lime-text: var(--dark-lime-text);
        --c-mint: var(--dark-mint);
        --c-bg: var(--dark-bg);
        --c-surface: var(--dark-surface);
        --c-text: var(--dark-text);
        --c-text-muted: var(--dark-text-muted);
        --c-border: var(--dark-border);
        --c-nav-blur: var(--dark-nav-blur);
        --c-hata: var(--dark-hata);
        --shadow-sm: var(--dark-shadow-sm);
        --shadow-md: var(--dark-shadow-md);
        --shadow-lg: var(--dark-shadow-lg);
        --c-warn-bg: var(--dark-warn-bg);
        --c-warn-text: var(--dark-warn-text);
        --c-warn-icon: var(--dark-warn-icon);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --c-primary: var(--dark-primary);
    --c-primary-light: var(--dark-primary-light);
    --c-lime-text: var(--dark-lime-text);
    --c-mint: var(--dark-mint);
    --c-bg: var(--dark-bg);
    --c-surface: var(--dark-surface);
    --c-text: var(--dark-text);
    --c-text-muted: var(--dark-text-muted);
    --c-border: var(--dark-border);
    --c-nav-blur: var(--dark-nav-blur);
    --c-hata: var(--dark-hata);
    --shadow-sm: var(--dark-shadow-sm);
    --shadow-md: var(--dark-shadow-md);
    --shadow-lg: var(--dark-shadow-lg);
    --c-warn-bg: var(--dark-warn-bg);
    --c-warn-text: var(--dark-warn-text);
    --c-warn-icon: var(--dark-warn-icon);
    color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
    font-family: var(--font-main);
    color: var(--c-text);
    background-color: var(--c-bg);
    line-height: 1.6;
    font-size: 17px;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--c-primary);
}

a { text-decoration: none; color: inherit; transition: var(--transition); }
ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ==========================================================================
   2. ORTAK BİLEŞENLER
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 700;
    font-size: 16px;
    padding: 16px 32px;
    border-radius: var(--radius-pill);
    transition: var(--transition);
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn-yellow {
    background-color: var(--c-accent);
    color: var(--c-on-accent);
    box-shadow: 0 8px 24px rgba(246, 206, 33, 0.3);
}
.btn-yellow:hover {
    background-color: var(--c-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(246, 206, 33, 0.4);
}

.btn-outline-light {
    border: 1.5px solid rgba(255,255,255,0.35);
    color: #fff;
}
.btn-outline-light:hover { border-color: var(--c-accent); color: var(--c-accent); }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--c-lime-text);
    font-weight: 800;
    font-size: 13px;
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}
.eyebrow::before {
    content: '';
    width: 28px; height: 2px;
    background-color: currentColor;
    border-radius: 2px;
}

.section-title { font-size: clamp(32px, 4vw, 50px); }
.section-desc { color: var(--c-text-muted); font-size: 18px; margin-top: 18px; }

/* Animasyon */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.active { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
    .skip-link { transition: none; }
}

/* Odak halkası: açık zeminde koyu yeşil, koyu bölümlerde sarı.
   Halka öğenin kendi köşe yarıçapını izler, bu yüzden pill butonlarda da oval kalır. */
:root { --focus-ring: var(--c-primary); }

:is(a, button, [tabindex]):focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

.hero,
.stats-band,
.pledge-section,
.p-cta,
header:not(.on-light) { --focus-ring: var(--c-accent); }

/* İçeriğe geç: yalnızca klavyeyle odaklanınca görünür */
.skip-link {
    position: absolute;
    top: -100px;
    left: 24px;
    z-index: 1100;
    background-color: var(--c-accent);
    color: var(--c-on-accent);
    font-weight: 700;
    font-size: 15px;
    padding: 12px 22px;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
    transition: top 0.25s var(--ease);
}
.skip-link:focus { top: 16px; }

/* ==========================================================================
   3. HEADER & NAVİGASYON
   ========================================================================== */
/* Header her zaman saydamdır; zemini hiç boyanmaz, altındaki bölüm görünür.
   Yazı rengi arkadaki bölümün tonuna göre değişir: koyu bölümlerde beyaz
   (varsayılan), açık bölümlerde .on-light sınıfıyla koyu yeşil.
   .scrolled artık yalnızca yüksekliği küçültür. */
header {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    z-index: 1000;
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 96px;
    transition: height 0.3s ease;
}
header.scrolled .nav-inner { height: 76px; }

.logo { display: flex; align-items: center; gap: 14px; }

/* Logo her zaman beyaz zemin üzerinde, orijinal renkleriyle görünür */
.logo-mark {
    width: 64px; height: 64px;
    background-color: #fff;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    flex-shrink: 0;
    transition: width 0.3s ease, height 0.3s ease, box-shadow 0.3s ease;
}
/* logo.png içindeki simge alanını kırparak gösterir (simge merkezi: %50 / %38.5) */
.logo-mark img {
    position: absolute;
    left: 50%; top: 50%;
    width: 152px; height: 152px;
    max-width: none;
    transform: translate(-50%, -38.5%);
}
header.scrolled .logo-mark { width: 54px; height: 54px; }
header.on-light .logo-mark { box-shadow: 0 0 0 1px var(--c-border); }
header.scrolled .logo-mark img { width: 130px; height: 130px; }

.logo-text { display: flex; flex-direction: column; }
.logo-text strong { font-size: 22px; font-weight: 800; color: #fff; line-height: 1.05; transition: color 0.3s; }
.logo-text span { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.75); letter-spacing: 0.14em; text-transform: uppercase; transition: color 0.3s; }
header.on-light .logo-text strong { color: var(--c-primary); }
header.on-light .logo-text span { color: var(--c-text-muted); }

/* Menü ve tema düğmesi sağda tek grup: logo solda, grup sağda kalır */
.nav-actions { display: flex; align-items: center; gap: 10px; }

.nav-links { display: flex; gap: 6px; align-items: center; }

/* Tema değiştirici: rengi header'ın tonunu izler */
.theme-toggle {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border-radius: 50%;
    color: #fff;
    flex-shrink: 0;
    transition: color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.theme-toggle svg { width: 20px; height: 20px; display: block; }
.theme-toggle:hover { color: var(--c-accent); background-color: rgba(255,255,255,0.14); }

header.on-light .theme-toggle { color: var(--c-text); }
header.on-light .theme-toggle:hover { color: var(--c-primary); background-color: var(--c-mint); }

/* Güneş açık temada, ay koyu temada; etkin temayı JS data-tema ile yazar */
.theme-toggle .ico-moon { display: none; }
.theme-toggle[data-tema="dark"] .ico-sun { display: none; }
.theme-toggle[data-tema="dark"] .ico-moon { display: block; }

.nav-links a {
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    position: relative;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
}
.nav-links a::after {
    content: '';
    position: absolute;
    left: 16px; right: 16px; bottom: 4px;
    height: 2px;
    background-color: var(--c-accent);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--ease);
}
.nav-links a:hover, .nav-links a.is-active { color: var(--c-accent); }
.nav-links a:hover::after, .nav-links a.is-active::after { transform: scaleX(1); }

header.on-light .nav-links a { color: var(--c-text); }
header.on-light .nav-links a:hover, header.on-light .nav-links a.is-active { color: var(--c-primary); }


.menu-toggle {
    display: none;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    padding: 8px;
}
header.on-light .menu-toggle { color: var(--c-primary); }

/* ==========================================================================
   4. HERO
   ========================================================================== */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 140px 0 100px;
    text-align: center;
    overflow: hidden;
    background-color: var(--c-primary-deep);
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}
/* Görsel bölümü tamamen kaplar, boşluk bırakmaz */
.hero-bg img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center 55%;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(180deg, rgba(18, 38, 12, 0.85) 0%, rgba(18, 38, 12, 0.25) 22%, rgba(18, 38, 12, 0.45) 60%, rgba(18, 43, 13, 0.95) 100%),
        radial-gradient(ellipse at center, rgba(18, 38, 12, 0.55) 0%, transparent 70%);
}

.hero-content {
    position: relative;
    z-index: 3;
    color: #fff;
    max-width: 900px;
    margin: 0 auto;
    animation: heroIn 1s var(--ease) both;
}
@keyframes heroIn { from { opacity: 0; transform: translateY(24px); } }
@media (prefers-reduced-motion: reduce) { .hero-content { animation: none; } }


.hero h1 {
    color: #fff;
    font-size: clamp(42px, 6vw, 84px);
    line-height: 1.05;
    margin-bottom: 24px;
    text-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.hero h1 span { color: var(--c-accent); }

.hero p {
    font-size: clamp(18px, 2vw, 22px);
    color: rgba(255,255,255,0.92);
    max-width: 700px;
    margin: 0 auto;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.hero-actions {
    margin-top: 40px;
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Alt sayfaların kısa başlık bandı: anasayfadaki hero bileşeninin aynısı,
   yalnızca yüksekliği ve başlık ölçeği küçültülmüş. Yeni renk/biçim yok. */
.hero-compact {
    min-height: 0;
    padding: 184px 0 96px;
}
.hero-compact h1 { font-size: clamp(34px, 4.6vw, 60px); }
.hero .eyebrow { color: var(--c-accent); }

@media (max-width: 768px) {
    .hero-compact { padding: 132px 0 64px; }
}

/* ==========================================================================
   5. RAKAMLAR (Hero sonrası koyu bant)
   ========================================================================== */
.stats-band {
    background-color: var(--c-primary-deep);
    color: #fff;
    padding: 0 0 72px;
    position: relative;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(255,255,255,0.12);
}

.stat-item {
    padding: 48px 40px 8px;
    position: relative;
    display: flex;
    gap: 24px;
    align-items: flex-start;
}
.stat-item + .stat-item { border-left: 1px solid rgba(255,255,255,0.12); }

/* İlk sütunun sol dolgusunu kaldır: aksi halde rakamlar, sayfanın geri kalanından
   40px içeride başlıyor ve bölümler arası hiza bozuluyor. mech-list zaten
   aynı yöntemi kullanıyor. */
.stat-item:first-child { padding-left: 0; }

.stat-item:first-child::before { left: 0; }

.stat-item::before {
    content: '';
    position: absolute;
    top: -1px; left: 40px;
    width: 48px; height: 3px;
    background-color: var(--c-accent);
    border-radius: 0 0 3px 3px;
}

.stat-num {
    font-size: clamp(52px, 5.5vw, 76px);
    font-weight: 800;
    color: var(--c-accent);
    line-height: 0.9;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.stat-num small { font-size: 0.55em; vertical-align: top; margin-right: 2px; }

.stat-body strong {
    display: block;
    font-size: 18px;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 6px;
}
.stat-body span {
    display: block;
    font-size: 15px;
    color: rgba(255,255,255,0.6);
    line-height: 1.5;
}

/* ==========================================================================
   6. ETKİ MEKANİZMASI (Sade dört sütun)
   ========================================================================== */
.features {
    padding: 130px 0;
    background-color: var(--c-bg);
}

.features-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: end;
    margin-bottom: 64px;
}
.features-head .section-desc { margin-top: 0; max-width: 500px; }

.mech-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--c-border);
}

/* Kurumsal yapı bandı.
   Fotoğraf zeminli koyu bir bant; hiyerarşi GİRİNTİYLE anlatılıyor. Sayfanın üst
   kısmındaki metin+görsel ızgarasından yapıca tamamen farklı olsun diye böyle
   kuruldu. Bant her iki temada da koyu kaldığı için kutular, sosyal sorumluluk
   bölümündeki gibi saydam-kenarlıklı: tema değişse de okunur kalıyorlar. */
.yapi-bant {
    position: relative;
    overflow: hidden;
    /* Tam ekran yüksekliğinde bir bant: içerik dikeyde ortalanır.
       svh kullanıyoruz ki mobilde tarayıcı çubuğu yüzünden taşmasın. */
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    /* Dikey boşluklar ekran yüksekliğine göre ölçeklenir ki bant tek ekrana sığsın */
    padding: clamp(72px, 9vh, 120px) 0;
    background-color: var(--c-primary-deep);
}
.yapi-bant .container { width: 100%; }
.yapi-bant-bg { position: absolute; inset: 0; z-index: 1; }
.yapi-bant-bg img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 35%; }
.yapi-bant-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(180deg, rgba(18, 38, 12, 0.93) 0%, rgba(18, 38, 12, 0.8) 45%, rgba(18, 43, 13, 0.96) 100%);
}
.yapi-bant .container { position: relative; z-index: 3; }

.yapi-bant-head { max-width: 680px; margin-bottom: clamp(26px, 4vh, 56px); }
.yapi-bant .eyebrow { color: var(--c-accent); }
.yapi-bant .section-title { color: #fff; }
.yapi-bant .section-desc { color: rgba(255, 255, 255, 0.72); }

/* Merdiven: her basamak bir öncekinden daha içeride */
.yapi-merdiven { display: grid; gap: clamp(10px, 1.6vh, 18px); }
.yapi-basamak {
    max-width: 640px;
    padding: clamp(16px, 2.4vh, 26px) clamp(20px, 2.2vw, 30px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-md);
    background-color: rgba(255, 255, 255, 0.05);
    transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.yapi-basamak:nth-child(2) { margin-left: 7%; }
.yapi-basamak:nth-child(3) { margin-left: 14%; }
.yapi-basamak:hover { transform: translateX(6px); border-color: rgba(255, 255, 255, 0.34); }

.yapi-etiket {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 8px;
}
.yapi-basamak h3 { color: #fff; font-size: clamp(20px, 2.2vw, 26px); margin-bottom: 8px; }
.yapi-basamak p { color: rgba(255, 255, 255, 0.72); font-size: 16px; }

/* Son basamak ürün markası: tek vurgu rengiyle öne çıkarılıyor */
.yapi-basamak:last-child { border-color: var(--c-accent); background-color: rgba(246, 206, 33, 0.1); }
.yapi-basamak:last-child h3 { color: var(--c-accent); }
.yapi-basamak:last-child:hover { border-color: var(--c-accent-hover); }

/* Alçak ekranlarda (dizüstü, yatay telefon) tam ekrana sığması için sıkıştır */
@media (max-height: 900px) {
    .yapi-bant { padding: 72px 0; }
    .yapi-bant-head { margin-bottom: 26px; }
    .yapi-merdiven { gap: 11px; }
    .yapi-basamak { padding: 16px 22px; }
    .yapi-basamak h3 { font-size: 20px; margin-bottom: 4px; }
    .yapi-basamak p { font-size: 15px; }
}

@media (max-height: 700px) {
    /* Çok alçak ekranda tam ekran dayatmak içeriği kırpar; akışa bırakıyoruz */
    .yapi-bant { min-height: 0; padding: 80px 0; }
}

@media (max-width: 900px) {
    /* Dar ekranda girinti metni sıkıştırır; basamaklar tam genişliğe geçer.
       Ölçüler, başlık + üç kart tek ekrana sığacak şekilde daraltıldı. */
    .yapi-bant { padding: 56px 0; }
    .yapi-bant-head { margin-bottom: 22px; }
    .yapi-bant .section-desc { font-size: 16px; margin-top: 12px; }
    .yapi-merdiven { gap: 10px; }
    .yapi-basamak, .yapi-basamak:nth-child(2), .yapi-basamak:nth-child(3) { margin-left: 0; max-width: none; }
    .yapi-basamak { padding: 16px 18px; }
    .yapi-basamak h3 { font-size: 19px; margin-bottom: 5px; }
    .yapi-basamak p { font-size: 14.5px; line-height: 1.5; }
    .yapi-etiket { margin-bottom: 5px; }
    .yapi-basamak:hover { transform: none; }
}

/* Hem dar hem alçak ekran (küçük/eski telefonlar): son bir sıkıştırma */
@media (max-width: 900px) and (max-height: 780px) {
    .yapi-bant { padding: 40px 0; }
    .yapi-bant-head { margin-bottom: 16px; }
    .yapi-bant .section-title { font-size: 28px; }
    .yapi-bant .section-desc { font-size: 15px; margin-top: 10px; }
    .yapi-merdiven { gap: 8px; }
    .yapi-basamak { padding: 13px 16px; }
    .yapi-basamak h3 { font-size: 18px; }
}



.mech-item {
    position: relative;
    padding: 40px 32px 8px;
}
.mech-item:first-child { padding-left: 0; }
.mech-item + .mech-item { border-left: 1px solid var(--c-border); }

.mech-item::before {
    content: '';
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 2px;
    background-color: var(--c-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--ease);
}
.mech-item:hover::before { transform: scaleX(1); }

.mech-item .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}
.mech-item .num { font-size: 14px; font-weight: 800; color: var(--c-lime-text); letter-spacing: 0.08em; }
.mech-item .ico { color: var(--c-primary); }
.mech-item .ico svg { width: 28px; height: 28px; display: block; }

.mech-item h3 { font-size: 21px; margin-bottom: 10px; }
.mech-item p { font-size: 16px; color: var(--c-text-muted); }

/* ==========================================================================
   7. ÜRÜN SERİSİ (Yatay kartlar)
   ========================================================================== */
.catalog {
    padding: 130px 0;
    background-color: var(--c-surface);
}

.catalog-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 56px;
    flex-wrap: wrap;
}
.catalog-head .section-title { max-width: 620px; }

.legal-notice {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 32px;
    background-color: var(--c-warn-bg);
    border-left: 4px solid var(--c-accent);
    color: var(--c-warn-text);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 16px 20px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
}
.legal-notice svg { width: 24px; height: 24px; flex-shrink: 0; color: var(--c-warn-icon); }

.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* Kategori filtresi (ürünler sayfası). Seçili hal sarıyı kullanır:
   tek vurgu rengi hem açık hem koyu temada okunur kalıyor. */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
}
.filter-btn {
    font-size: 14px;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--c-border);
    background-color: var(--c-bg);
    color: var(--c-text-muted);
    transition: var(--transition);
}
.filter-btn:hover { border-color: var(--c-lime); color: var(--c-primary); }
.filter-btn[aria-pressed="true"] {
    background-color: var(--c-accent);
    border-color: var(--c-accent);
    color: var(--c-on-accent);
}

.p-card[hidden] { display: none; }

/* ==========================================================================
   7a. SERTİFİKA KARTLARI (sertifikalar sayfası)
   ========================================================================== */
.belge-izgara {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}
.belge-izgara-iki { grid-template-columns: repeat(2, 1fr); max-width: 860px; }

/* Kartın tamamı tıklanabilir: başlıktaki düğmenin ::after'ı kartı kaplıyor */
.belge-kart {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.3s var(--ease), box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.belge-kart:hover { border-color: var(--c-lime); box-shadow: var(--shadow-md); transform: translateY(-4px); }

/* A4 önizleme: belge beyaz kâğıt olduğu için her iki temada da açık zeminde */
.belge-onizleme {
    position: relative;
    aspect-ratio: 1 / 1.1;
    background: radial-gradient(circle at 50% 40%, #ffffff 0%, #eef1ec 100%);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 22px 22px 0;
    overflow: hidden;
    border-bottom: 1px solid var(--c-border);
}
.belge-onizleme img {
    width: 78%;
    height: auto;
    box-shadow: 0 10px 26px rgba(20, 30, 20, 0.16);
    transition: transform 0.5s var(--ease);
}
.belge-kart:hover .belge-onizleme img { transform: translateY(-6px) scale(1.02); }

.belge-dil {
    position: absolute;
    top: 12px; right: 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    background-color: rgba(30, 70, 22, 0.88);
    color: #fff;
}

.belge-icerik { padding: 22px 22px 24px; display: flex; flex-direction: column; flex-grow: 1; }
.belge-standart {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-lime-text);
    margin-bottom: 8px;
}
.belge-icerik h3 { font-size: 19px; margin-bottom: 8px; }
.belge-icerik p { font-size: 15px; color: var(--c-text-muted); line-height: 1.55; margin-bottom: 18px; flex-grow: 1; }

.belge-ac {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-align: left;
    padding: 0;
}
.belge-ac::after { content: ''; position: absolute; inset: 0; z-index: 1; }

.belge-kunye {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    border-top: 1px dashed var(--c-border);
    padding-top: 14px;
}
.belge-kunye div { display: flex; flex-direction: column; }
.belge-kunye dt {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-text-muted);
}
.belge-kunye dd { font-size: 15px; font-weight: 700; color: var(--c-primary); }

/* Kapsam ve kuruluş şeridi: sitenin çizgi ızgarası diliyle */
.belge-kapsam {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    margin-top: 40px;
    border-top: 1px solid var(--c-border);
}
.belge-kapsam div { padding: 22px 28px 0 0; display: flex; flex-direction: column; gap: 4px; }
.belge-kapsam div + div { padding-left: 28px; border-left: 1px solid var(--c-border); }
.belge-kapsam small {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-text-muted);
}
.belge-kapsam b { font-size: 16px; color: var(--c-primary); line-height: 1.45; }

/* Belge görüntüleyici: ürün pop-up'ının iskeletini ve animasyonunu kullanır */
.belge-modal { width: min(1020px, calc(100vw - 40px)); }
.belge-modal-duzen {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 36px;
    padding: 40px;
    align-items: start;
}
.belge-modal-gorsel {
    background: radial-gradient(circle at 50% 40%, #ffffff 0%, #eef1ec 100%);
    border-radius: var(--radius-md);
    padding: 18px;
}
.belge-modal-gorsel img { width: 100%; height: auto; box-shadow: 0 10px 26px rgba(20, 30, 20, 0.16); }
.belge-modal-bilgi { padding-top: 8px; }
.belge-modal-bilgi h2 { font-size: clamp(24px, 2.6vw, 32px); margin: 4px 0 8px; }
.belge-modal-kurum { color: var(--c-text-muted); font-size: 15px; margin-bottom: 24px; }
.belge-dil-sec { display: flex; gap: 8px; margin-bottom: 24px; }
.belge-dil-sec[hidden] { display: none; }
.belge-kunye-genis { margin-bottom: 28px; }

@media (max-width: 1100px) {
    .belge-izgara { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .belge-modal-duzen { grid-template-columns: 1fr; gap: 22px; padding: 30px 22px; }
    .belge-kapsam { grid-template-columns: 1fr; }
    .belge-kapsam div + div { padding-left: 0; border-left: none; border-top: 1px solid var(--c-border); margin-top: 18px; }
}
@media (max-width: 600px) {
    .belge-izgara, .belge-izgara-iki { grid-template-columns: 1fr; }
    .belge-modal-ac { width: 100%; }
}

/* ==========================================================================
   7c. İLETİŞİM SAYFASI
   ========================================================================== */
.iletisim-bolum { padding: 64px 0 110px; background-color: var(--c-bg); }

/* Kanal şeridi: üç kanal yan yana, aralarında ince ayraç */
.kanal-serit {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto 40px;
}
.kanal-serit li { padding: 0 36px; }
.kanal-serit li + li { border-left: 1px solid var(--c-border); }
.kanal { display: flex; align-items: center; gap: 14px; color: var(--c-text); }
.kanal-ico {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background-color: var(--c-mint);
    color: var(--c-primary);
    transition: var(--transition);
}
.kanal-ico svg { width: 19px; height: 19px; }
.kanal:hover .kanal-ico { background-color: var(--c-accent); color: var(--c-on-accent); }
.kanal-metin { display: flex; flex-direction: column; gap: 2px; }
.kanal-metin small {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}
.kanal-metin b { font-size: 17px; color: var(--c-primary); line-height: 1.35; }

/* Ortada tek sütunlu form kartı */
.form-kart {
    max-width: 800px;
    margin: 0 auto;
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: clamp(24px, 2.6vw, 32px) clamp(24px, 3.4vw, 40px);
}
/* Açık temada --c-border zemine çok yakın, kart kenarı kayboluyor: koyu temadaki
   kadar belirgin olsun diye marka yeşilinden türetilmiş bir kenar. Koyu tema aynen kalır. */
.form-kart { border-color: color-mix(in srgb, var(--c-primary) 20%, var(--c-border)); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .form-kart { border-color: var(--c-border); }
}
:root[data-theme="dark"] .form-kart { border-color: var(--c-border); }

.form-kart-bas { text-align: center; margin-bottom: 18px; }
.form-kart-bas .eyebrow { margin-bottom: 12px; }
.form-kart-bas h2 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; }
.form-kart-bas p { margin-top: 4px; color: var(--c-text-muted); font-size: 14px; }

/* İki sütun: kart tek ekrana sığsın */
#iletisimFormu { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
#iletisimFormu > .alan-tam, #iletisimFormu > .form-alt, #iletisimFormu > .form-durum { grid-column: 1 / -1; }

/* Alanlar: sitenin hap düğmeleriyle aynı biçim, açık yeşil (mint) zemin, kenarlıksız */
.alan { display: flex; flex-direction: column; gap: 5px; }
.alan label { padding-left: 20px; font-size: 14px; font-weight: 700; color: var(--c-primary); }
.alan label span[aria-hidden] { color: var(--c-lime-text); }

.alan input,
.alan select,
.alan textarea {
    width: 100%;
    font: inherit;
    font-size: 16px; /* 16px altı iOS'ta odaklanınca sayfayı büyütür */
    color: var(--c-text);
    background-color: var(--c-mint);
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    padding: 10px 20px;
    transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.alan textarea { border-radius: var(--radius-md); resize: vertical; min-height: 70px; line-height: 1.5; padding-top: 11px; }
.alan select { appearance: none; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 26px) 55%, calc(100% - 21px) 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 48px;
}
.alan input:hover, .alan select:hover, .alan textarea:hover { border-color: color-mix(in srgb, var(--c-lime) 55%, transparent); }
.alan input:focus-visible, .alan select:focus-visible, .alan textarea:focus-visible {
    outline: none;
    background-color: var(--c-surface);
    border-color: var(--c-primary);
}

.alan ::placeholder { color: var(--c-text-muted); opacity: 0.75; }

/* Hata durumu: yalnızca kullanıcı göndermeyi denedikten sonra işaretlenir */
.alan [aria-invalid="true"] { border-color: var(--c-hata); }
.alan-hata { padding-left: 20px; font-size: 13px; font-weight: 700; color: var(--c-hata); }
.alan-hata:empty { display: none; }

/* Onay solda, gönder düğmesi sağda */
.form-alt { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 6px; }
.alan-onay { flex: 1 1 300px; display: flex; flex-direction: column; gap: 5px; }
.alan-onay .alan-hata { padding-left: 30px; }
.onay-kutu { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--c-text-muted); line-height: 1.5; cursor: pointer; }
.onay-kutu input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--c-primary); cursor: pointer; }
.onay-kutu a { color: var(--c-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.form-gonder { flex-shrink: 0; }
.form-gonder[disabled] { opacity: 0.6; cursor: progress; transform: none; }

.form-durum { text-align: center; font-size: 14.5px; font-weight: 700; }
.form-durum:empty { display: none; }
.form-durum.basarili { color: var(--c-lime-text); }
.form-durum.hatali { color: var(--c-hata); }

/* Sık sorulan sorular: solda başlık (yapışkan), sağda numaralı akordeon */
.sss-bolum { padding: 110px 0 120px; background-color: var(--c-bg); }
.sss-duzen {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
}
.sss-bas { position: sticky; top: 112px; }
.sss-bas .section-desc { margin-top: 16px; }
.sss-bas .bolum-link { margin-top: 26px; }

.sss-liste { border-top: 1px solid var(--c-border); interpolate-size: allow-keywords; }
.sss-oge { border-bottom: 1px solid var(--c-border); }
.sss-oge summary {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 16px;
    padding: 24px 0;
    cursor: pointer;
    list-style: none;
}
.sss-oge summary::-webkit-details-marker { display: none; }
.sss-no { font-size: 14px; font-weight: 800; letter-spacing: 0.08em; color: var(--c-lime-text); }
.sss-soru { font-size: clamp(17px, 1.6vw, 19px); font-weight: 700; line-height: 1.4; color: var(--c-primary); transition: color 0.2s var(--ease); }
.sss-oge summary:hover .sss-soru { color: var(--c-primary-light); }

/* Artı işareti: açılınca 45° dönüp çarpıya, zemin sarıya döner */
.sss-ikon {
    position: relative;
    width: 34px; height: 34px;
    border-radius: 50%;
    background-color: var(--c-mint);
    transition: transform 0.35s var(--ease), background-color 0.25s var(--ease);
}
.sss-ikon::before, .sss-ikon::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 13px; height: 2px;
    border-radius: 2px;
    background-color: var(--c-primary);
    transform: translate(-50%, -50%);
}
.sss-ikon::after { transform: translate(-50%, -50%) rotate(90deg); }
.sss-oge summary:hover .sss-ikon { background-color: color-mix(in srgb, var(--c-accent) 35%, var(--c-mint)); }
.sss-oge[open] .sss-ikon { transform: rotate(45deg); background-color: var(--c-accent); }
.sss-oge[open] .sss-ikon::before, .sss-oge[open] .sss-ikon::after { background-color: var(--c-on-accent); }
.sss-oge summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 4px; border-radius: var(--radius-sm); }

.sss-cevap { padding: 0 50px 26px 50px; }
.sss-cevap p { font-size: 16.5px; line-height: 1.75; color: var(--c-text-muted); }

/* Yumuşak açılış: destekleyen tarayıcılarda yükseklik animasyonlu, diğerlerinde anında açılır */
.sss-oge::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.35s var(--ease), content-visibility 0.35s allow-discrete;
}
.sss-oge[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) {
    .sss-oge::details-content, .sss-ikon { transition: none; }
}

@media (max-width: 900px) {
    .sss-bolum { padding: 72px 0 80px; }
    .sss-duzen { grid-template-columns: 1fr; }
    .sss-bas { position: static; }
}
@media (max-width: 600px) {
    .sss-oge summary { grid-template-columns: minmax(0, 1fr) 32px; gap: 12px; padding: 20px 0; }
    .sss-no { display: none; }
    .sss-ikon { width: 32px; height: 32px; }
    .sss-cevap { padding: 0 0 22px; }
}

/* Büyük harita: tam genişlik; adres kartı haritanın üstünde, solda */
.harita-bolum {
    position: relative;
    height: clamp(420px, 70vh, 640px);
    background-color: var(--c-mint);
    border-top: 1px solid var(--c-border);
}
.harita-cerceve { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.harita-ust {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    pointer-events: none; /* kart dışındaki alanda harita sürüklenebilsin */
}
.harita-kart {
    pointer-events: auto;
    max-width: 380px;
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 32px;
}
.harita-kart .eyebrow { margin-bottom: 12px; }
.harita-kart h2 { font-size: 26px; line-height: 1.2; }
.harita-kart p { margin: 10px 0 24px; color: var(--c-text-muted); font-size: 16px; line-height: 1.55; }

/* Teşekkür sayfası: tam ekran hero, ortada onay simgesi */
.tesekkur-ikon {
    display: grid;
    place-items: center;
    width: 76px; height: 76px;
    margin: 0 auto 28px;
    border-radius: 50%;
    background-color: var(--c-accent);
    color: var(--c-on-accent);
    box-shadow: 0 12px 32px rgba(246, 206, 33, 0.35);
    animation: tesekkurIkon 0.6s 0.25s var(--ease) both;
}
.tesekkur-ikon svg { width: 36px; height: 36px; }
@keyframes tesekkurIkon { from { opacity: 0; transform: scale(0.6); } }
@media (prefers-reduced-motion: reduce) { .tesekkur-ikon { animation: none; } }
.hero p.tesekkur-not { margin-top: 40px; font-size: 15px; color: rgba(255, 255, 255, 0.75); }
.tesekkur-not a { color: var(--c-accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

@media (max-width: 900px) {
    /* Şerit alt alta: ayraç yatay çizgiye döner */
    .kanal-serit { flex-direction: column; align-items: stretch; max-width: 620px; margin-bottom: 40px; }
    .kanal-serit li { padding: 14px 4px; }
    .kanal-serit li + li { border-left: none; border-top: 1px solid var(--c-border); }
}
@media (max-width: 768px) {
    .iletisim-bolum { padding: 56px 0 80px; }
}
@media (max-width: 600px) {
    .form-kart { border-radius: var(--radius-md); padding: 26px 18px; }
    #iletisimFormu { grid-template-columns: 1fr; }
    .form-alt { flex-direction: column; align-items: stretch; }
    /* Sütun yönünde flex-basis yüksekliğe dönüşüp onayın altında boşluk bırakıyordu */
    .alan-onay { flex: none; }
    .form-gonder { width: 100%; justify-content: center; }

    /* Dar ekranda adres kartı haritanın altına iner, harita üstte tam görünür */
    .harita-bolum { height: auto; background-color: var(--c-bg); }
    .harita-cerceve { position: relative; display: block; height: 360px; }
    .harita-ust { height: auto; padding-top: 24px; padding-bottom: 24px; pointer-events: auto; }
    .harita-kart { max-width: none; width: 100%; box-shadow: none; }
}

/* ==========================================================================
   7d. ÜRÜN SAYFASI (urunler.json'dan üretilen detay sayfaları)
   ========================================================================== */
.urun-hero { padding-bottom: 80px; }
.urun-hero h1 { max-width: 860px; margin-inline: auto; }
.urun-yol {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
    font-size: 13.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.65);
}
.urun-yol a { color: rgba(255, 255, 255, 0.85); }
.urun-yol a:hover { color: var(--c-accent); }
.urun-yol [aria-current] { color: var(--c-accent); }

.urun-sayfa { padding: 88px 0 40px; background-color: var(--c-bg); }

/* Görsel solda (yapışkan), bilgi sağda */
.urun-duzen {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(36px, 5vw, 80px);
    align-items: start;
}
.urun-gorsel {
    position: sticky;
    top: 112px;
    display: grid;
    place-items: center;
    padding: clamp(28px, 4vw, 48px);
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.urun-gorsel img { width: auto; max-width: 100%; max-height: 440px; object-fit: contain; }

.urun-tanim { margin-top: 14px; font-size: 18px; line-height: 1.7; color: var(--c-text); }
.urun-ara-baslik { font-size: clamp(21px, 2vw, 26px); color: var(--c-primary); margin: 36px 0 16px; }

/* Bilgi tablosu: künye düzeni */
.urun-tablo {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    font-size: 15.5px;
    line-height: 1.55;
}
.urun-tablo th, .urun-tablo td { text-align: left; vertical-align: top; padding: 13px 20px; }
.urun-tablo th {
    width: 150px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    padding-top: 16px;
}
.urun-tablo td { font-weight: 700; color: var(--c-primary); }
.urun-tablo tr + tr > * { border-top: 1px solid var(--c-border); }

.urun-eylem { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 28px; }
.urun-tel { font-size: 15px; color: var(--c-text-muted); }
.urun-tel b { color: var(--c-primary); }
.urun-tel:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* Özellikler + kullanım: iki sütun */
.urun-detay {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 80px);
    margin-top: 56px;
    padding-top: 16px;
    border-top: 1px solid var(--c-border);
}
.urun-ozellik { list-style: none; display: grid; gap: 14px; }
.urun-ozellik li { display: flex; gap: 14px; align-items: flex-start; font-size: 16.5px; line-height: 1.6; }
.urun-ozellik svg {
    flex-shrink: 0;
    width: 26px; height: 26px;
    padding: 5px;
    margin-top: 1px;
    border-radius: 50%;
    background-color: var(--c-mint);
    color: var(--c-primary);
}
.urun-kullanim { font-size: 16.5px; line-height: 1.75; margin-bottom: 24px; }
.urun-detay .legal-notice { margin-top: 0; }

/* Diğer ürünler: katalog bileşeni, başlık satırında "tüm ürünler" bağlantısı */
.urun-benzer { padding-top: 88px; }
.urun-benzer .catalog-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.urun-benzer .bolum-link { margin-top: 0; }

@media (max-width: 900px) {
    .urun-duzen { grid-template-columns: 1fr; }
    .urun-gorsel { position: static; max-width: 420px; width: 100%; margin-inline: auto; }
    .urun-gorsel img { max-height: 320px; }
    .urun-detay { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .urun-sayfa { padding-top: 56px; }
    .urun-tablo th, .urun-tablo td { display: block; width: auto; padding: 0 16px; }
    .urun-tablo th { padding-top: 12px; }
    .urun-tablo td { padding-bottom: 12px; }
    .urun-tablo tr + tr > td { border-top: 0; }
    .urun-eylem .btn { width: 100%; justify-content: center; }
    .urun-benzer { padding-top: 64px; }
}

/* ==========================================================================
   7b. KART BAĞLANTISI + BELGE POP-UP (sertifika görüntüleyici bu stilleri kullanıyor)
   ========================================================================== */

/* Kart başlığı ürün sayfasına bağlantı; ::after kartın tamamını tıklanabilir yapıyor. */
.p-card { position: relative; cursor: pointer; }
.p-detay {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-align: left;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.p-detay::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Tıklanabilirlik göstergesi: her zaman görünür, hover'da öne çıkar */
.p-detay-ipucu {
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background-color: var(--c-mint);
    color: var(--c-primary-light);
    flex-shrink: 0;
    transition: background-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.p-detay-ipucu svg { width: 13px; height: 13px; }
.p-card:hover .p-detay-ipucu,
.p-detay:focus-visible .p-detay-ipucu {
    background-color: var(--c-accent);
    color: var(--c-on-accent);
    transform: translateX(3px);
}

/* Kart görselinin köşesinde "detay var" rozeti */
.p-image::after {
    content: 'Detay';
    position: absolute;
    top: 12px; right: 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
    background-color: rgba(30, 70, 22, 0.88);
    color: #fff;
    transition: background-color 0.3s var(--ease);
}
.p-card:hover .p-image::after { background-color: var(--c-accent); color: var(--c-on-accent); }

/* Ekranda görünmez ama ekran okuyucunun okuduğu metin */
.gorsel-gizli {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.urun-modal {
    /* Ekranda ortalanır: inset 0 + margin auto, dialog için hem yatay hem dikey. */
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(920px, calc(100vw - 40px));
    max-height: min(86vh, 880px);
    height: fit-content;
    padding: 0;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    background-color: var(--c-surface);
    color: var(--c-text);
    box-shadow: var(--shadow-lg);
    overflow: hidden;

    /* --- Açılış / kapanış animasyonu ---
       Üç durum var ve üçü de ayrı ayarlanabiliyor:
         @starting-style [open]  -> açılışın BAŞLANGICI (aşağıdan, biraz küçük)
         [open]                  -> açık hal
         .urun-modal (bu blok)   -> kapanışın BİTİŞİ (yerinde, hafifçe siliniyor)
       Böylece pop-up açılırken aşağıdan yükselip büyüyor, kapanırken uzun yol
       kat etmeden olduğu yerde siliniyor — çıkışlar girişlerden kısa olmalı. */
    opacity: 0;
    transform: translateY(6px) scale(0.985);
    transition:
        opacity 0.16s ease-in,
        transform 0.16s ease-in,
        overlay 0.16s ease-in allow-discrete,
        display 0.16s ease-in allow-discrete;
}

.urun-modal[open] {
    opacity: 1;
    transform: none;
    transition:
        opacity 0.34s var(--ease),
        transform 0.42s var(--ease),
        overlay 0.42s var(--ease) allow-discrete,
        display 0.42s var(--ease) allow-discrete;
}

@starting-style {
    .urun-modal[open] { opacity: 0; transform: translateY(28px) scale(0.955); }
}

.urun-modal::backdrop {
    background-color: rgba(8, 14, 7, 0);
    backdrop-filter: blur(0px);
    transition: background-color 0.16s ease-in, backdrop-filter 0.16s ease-in;
}
.urun-modal[open]::backdrop {
    background-color: rgba(8, 14, 7, 0.66);
    backdrop-filter: blur(4px);
    transition: background-color 0.34s var(--ease), backdrop-filter 0.34s var(--ease);
}
@starting-style {
    .urun-modal[open]::backdrop { background-color: rgba(8, 14, 7, 0); backdrop-filter: blur(0px); }
}

/* İçerik, kutudan bir tık gecikmeli gelir: yükselme hissi belirginleşir */
.urun-modal[open] .urun-modal-ust,
.urun-modal[open] .urun-modal-govde {
    animation: urunModalIcerik 0.5s var(--ease) both;
}
.urun-modal[open] .urun-modal-govde { animation-delay: 0.06s; }

@keyframes urunModalIcerik {
    from { opacity: 0; transform: translateY(10px); }
}

@media (prefers-reduced-motion: reduce) {
    /* Hareket kalkar, yalnızca yumuşak bir solma kalır */
    .urun-modal,
    .urun-modal[open] { transform: none; transition: opacity 0.2s linear, overlay 0.2s allow-discrete, display 0.2s allow-discrete; }
    .urun-modal[open] .urun-modal-ust,
    .urun-modal[open] .urun-modal-govde { animation: none; }
    @starting-style {
        .urun-modal[open] { transform: none; }
    }
}

.urun-modal-ic {
    max-height: inherit;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.urun-modal-kapat {
    position: absolute;
    top: 16px; right: 16px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border-radius: 50%;
    background-color: var(--c-surface);
    color: var(--c-text);
    border: 1px solid var(--c-border);
    transition: var(--transition);
}
.urun-modal-kapat svg { width: 18px; height: 18px; transition: transform 0.3s var(--ease); }
.urun-modal-kapat:hover { background-color: var(--c-primary); border-color: var(--c-primary); color: var(--c-surface); }
.urun-modal-kapat:hover svg { transform: rotate(90deg); }

.urun-modal-ust {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 32px;
    align-items: center;
    padding: 40px 40px 28px;
    border-bottom: 1px solid var(--c-border);
}
.urun-modal-gorsel {
    background: radial-gradient(circle at 50% 60%, #ffffff 0%, #eef4ea 100%);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    min-height: 200px;
}
.urun-modal-gorsel img {
    max-height: 190px;
    width: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}
.urun-modal-kimlik h2 { font-size: clamp(26px, 3vw, 36px); margin: 4px 0 10px; }
.urun-modal-slogan { color: var(--c-lime-text); font-weight: 700; font-size: 16px; }

.urun-modal-govde { padding: 32px 40px 40px; }
.urun-modal-tanim { color: var(--c-text-muted); font-size: 17px; margin-bottom: 32px; }

.urun-modal-blok { margin-bottom: 28px; }
.urun-modal-blok h3 {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--c-lime-text);
    margin-bottom: 12px;
}
.urun-modal-blok p { color: var(--c-text-muted); font-size: 16px; }

.urun-modal-liste { display: grid; gap: 10px; }
.urun-modal-liste li {
    position: relative;
    padding-left: 26px;
    font-size: 16px;
    color: var(--c-text-muted);
    line-height: 1.55;
}
.urun-modal-liste li::before {
    content: '';
    position: absolute;
    left: 0; top: 9px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background-color: var(--c-lime);
}

.urun-modal-kunye {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    border-top: 1px dashed var(--c-border);
    padding-top: 20px;
    margin-bottom: 28px;
}
.urun-modal-kunye div { display: flex; flex-direction: column; gap: 4px; }
.urun-modal-kunye small {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-text-muted);
}
.urun-modal-kunye b { font-size: 15px; color: var(--c-primary); font-weight: 700; line-height: 1.45; }

.urun-modal .legal-notice { margin-top: 0; margin-bottom: 28px; }
.urun-modal-cta { align-self: flex-start; }

@media (max-width: 900px) {
    .urun-modal-ust { grid-template-columns: 180px 1fr; gap: 24px; padding: 32px 28px 24px; }
    .urun-modal-govde { padding: 28px 28px 32px; }
}

@media (max-width: 640px) {
    .urun-modal {
        width: calc(100vw - 24px);
        max-height: 88vh;
    }
    /* Tek sütuna düşünce görsel üstte, kimlik altında ve ortalanır */
    .urun-modal-ust {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 26px 20px 22px;
        text-align: center;
    }
    .urun-modal-kimlik { display: flex; flex-direction: column; align-items: center; }
    .urun-modal-gorsel { min-height: 160px; }
    .urun-modal-gorsel img { max-height: 150px; }
    .urun-modal-kimlik h2 { font-size: 24px; }
    .urun-modal-kapat { top: 12px; right: 12px; width: 38px; height: 38px; }

    .urun-modal-govde { padding: 24px 20px 28px; }
    .urun-modal-tanim { font-size: 16px; margin-bottom: 26px; }
    .urun-modal-kunye { grid-template-columns: 1fr; gap: 16px; }
    .urun-modal-cta { width: 100%; }
}

.filter-bos {
    grid-column: 1 / -1;
    padding: 56px 0;
    text-align: center;
    color: var(--c-text-muted);
    font-size: 17px;
}

.p-card {
    display: grid;
    grid-template-columns: 200px 1fr;
    background-color: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.p-card:hover {
    border-color: var(--c-lime);
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.p-image {
    background: radial-gradient(circle at 50% 60%, #ffffff 0%, #eef4ea 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
    min-height: 220px;
}
.p-image img {
    max-height: 180px;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform 0.5s var(--ease);
}
.p-card:hover .p-image img { transform: scale(1.07) rotate(-2deg); }

.p-index {
    position: absolute;
    top: 14px; left: 16px;
    font-size: 12px;
    font-weight: 800;
    color: var(--c-lime-text);
    letter-spacing: 0.08em;
}

.p-content {
    padding: 28px 28px 24px;
    display: flex;
    flex-direction: column;
}

.p-claim {
    align-self: flex-start;
    background-color: var(--c-mint);
    color: var(--c-primary-light);
    font-size: 12px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    margin-bottom: 12px;
    letter-spacing: 0.02em;
}
.p-content h3 { font-size: 22px; margin-bottom: 8px; }
.p-content p { font-size: 15px; color: var(--c-text-muted); margin-bottom: 20px; flex-grow: 1; line-height: 1.55; }

.p-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px dashed var(--c-border);
    padding-top: 14px;
    gap: 12px;
}
.p-specs div { display: flex; flex-direction: column; }
.p-specs small {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-text-muted);
}
.p-specs b { font-size: 15px; color: var(--c-primary); }

/* Ürün sayısı çift olduğu için CTA son satırı tek başına doldurur */
.p-cta {
    grid-column: 1 / -1;
    background-color: var(--c-brand-surface);
    border-radius: var(--radius-md);
    padding: 40px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    position: relative;
    overflow: hidden;
}
.p-cta::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 260px; height: 260px;
    border-radius: 50%;
    border: 40px solid rgba(246, 206, 33, 0.12);
}
.p-cta h3 { color: #fff; font-size: 28px; max-width: 360px; position: relative; }
.p-cta p { color: rgba(255,255,255,0.75); font-size: 16px; max-width: 380px; position: relative; }
.p-cta .btn { align-self: flex-start; position: relative; }

/* ==========================================================================
   8. KURUMSAL (Metin + görsel, sade)
   ========================================================================== */
.about-section {
    padding: 130px 0;
    background-color: var(--c-surface);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.about-copy h2 { font-size: clamp(32px, 3.6vw, 46px); margin-bottom: 24px; }
.about-copy p { font-size: 17px; color: var(--c-text-muted); margin-bottom: 18px; }

.about-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 36px;
    border-top: 1px solid var(--c-border);
}
.about-facts div { padding: 22px 20px 0 0; }
.about-facts div + div { padding-left: 20px; border-left: 1px solid var(--c-border); }
.about-facts b { display: block; font-size: 22px; color: var(--c-primary); line-height: 1.2; }
.about-facts span { font-size: 14px; color: var(--c-text-muted); }

.about-media {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: #8fb8e0;
    box-shadow: var(--shadow-md);
}
.about-media img { width: 100%; aspect-ratio: 566 / 464; object-fit: cover; }

/* ==========================================================================
   9. SOSYAL SORUMLULUK (Sinematik koyu bölüm)
   ========================================================================== */
.pledge-section {
    background-color: #16140f;
    color: #fff;
    padding: 130px 0;
    position: relative;
    overflow: hidden;
}
.pledge-section::before {
    content: '';
    position: absolute;
    left: -200px; top: -200px;
    width: 700px; height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(246, 206, 33, 0.14), transparent 65%);
    pointer-events: none;
}

.pledge-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 64px;
    align-items: center;
    position: relative;
}

.pledge-section .eyebrow { color: var(--c-accent); }
.pledge-section h2 { color: #fff; font-size: clamp(34px, 4.2vw, 54px); margin-bottom: 24px; }
.pledge-section h2 em { font-style: normal; color: var(--c-accent); }
.pledge-section .lead { font-size: 18px; color: rgba(255,255,255,0.72); margin-bottom: 36px; }

.pledge-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 40px;
}
.pledge-facts div {
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: var(--radius-sm);
    padding: 18px 20px;
}
.pledge-facts b { display: block; font-size: 32px; color: var(--c-accent); line-height: 1.1; }
.pledge-facts span { font-size: 14px; color: rgba(255,255,255,0.65); }

.pledge-video {
    position: relative;
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    box-shadow: 0 40px 80px rgba(0,0,0,0.5);
    outline: 1px solid rgba(255,255,255,0.1);
    outline-offset: 10px;
}
.pledge-video img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease), filter 0.4s ease;
}
.pledge-video:hover img { transform: scale(1.04); filter: brightness(0.75); }

.play-btn {
    position: absolute;
    left: 24px; bottom: 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    background-color: var(--c-accent);
    color: var(--c-on-accent);
    border-radius: var(--radius-pill);
    padding: 10px 24px 10px 10px;
    font-weight: 800;
    font-size: 15px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
    transition: var(--transition);
}
.play-btn i {
    width: 48px; height: 48px;
    border-radius: 50%;
    background-color: var(--c-brand-surface);
    color: var(--c-accent);
    display: grid;
    place-items: center;
}
.play-btn svg { width: 20px; height: 20px; fill: currentColor; margin-left: 3px; }
.pledge-video:hover .play-btn { transform: translateY(-4px); }

/* ==========================================================================
   9b. SERTİFİKALAR
   ========================================================================== */
.certs {
    padding: 110px 0;
    background-color: var(--c-surface);
    border-top: 1px solid var(--c-border);
}
.certs-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
    flex-wrap: wrap;
    margin-bottom: 48px;
}
.certs-head .section-desc { max-width: 440px; margin-top: 0; }

.certs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.cert-card {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 32px 28px;
    background-color: var(--c-bg);
    transition: border-color 0.3s ease, transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.cert-card:hover { border-color: var(--c-lime); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.cert-seal {
    width: 76px; height: 76px;
    border-radius: 50%;
    border: 2px solid var(--c-primary);
    outline: 1px dashed rgba(30,70,22,0.35);
    outline-offset: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--c-primary);
    margin-bottom: 24px;
    line-height: 1;
}
.cert-seal small { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; }
.cert-seal b { font-size: 18px; font-weight: 800; margin-top: 3px; }
.cert-card h3 { font-size: 19px; margin-bottom: 6px; }
.cert-card p { font-size: 15px; color: var(--c-text-muted); }

/* ==========================================================================
   10. İLETİŞİM (Açık zemin, üç sütunlu bilgi şeridi)
   ========================================================================== */
.contact-section {
    padding: 130px 0;
    background-color: var(--c-bg);
}

.contact-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: end;
    margin-bottom: 56px;
}
.contact-head .section-desc { margin-top: 0; max-width: 480px; }

.contact-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
}

.contact-col {
    padding: 36px 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.contact-col + .contact-col { border-left: 1px solid var(--c-border); }

.contact-col .label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    margin-bottom: 10px;
}
.contact-col .label svg { width: 18px; height: 18px; color: var(--c-lime-text); }

.contact-col .value {
    font-size: clamp(19px, 1.8vw, 24px);
    font-weight: 800;
    color: var(--c-primary);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.contact-col .action {
    margin-top: auto;
    padding-top: 20px;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--c-primary);
    border-bottom: 2px solid var(--c-accent);
    padding-bottom: 2px;
}
.contact-col .action svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.contact-col .action:hover svg { transform: translateX(4px); }
/* Bölüm altındaki "tümünü gör" bağlantısı: iletişim şeridindeki eylem bağlantısıyla aynı dil */
.bolum-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
    font-size: 15px;
    font-weight: 700;
    color: var(--c-primary);
    border-bottom: 2px solid var(--c-accent);
    padding-bottom: 2px;
}
.bolum-link svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.bolum-link:hover svg { transform: translateX(4px); }

.contact-col .action.muted { color: var(--c-text-muted); border-bottom-color: transparent; }

/* ==========================================================================
   10b. YASAL METİNLER (KVKK / Çerez) + ÇEREZ BİLDİRİMİ
   ========================================================================== */
/* Görselsiz kısa bant: hero bileşeni, yalnızca koyu zemin */
.yasal-hero { padding-bottom: 72px; }

.yasal-bolum { padding: 80px 0 120px; background-color: var(--c-bg); }
.yasal-duzen {
    display: grid;
    grid-template-columns: 240px minmax(0, 760px);
    gap: clamp(40px, 6vw, 96px);
    justify-content: center;
    align-items: start;
}

/* İçindekiler */
.yasal-icindekiler { position: sticky; top: 112px; }
.yasal-icindekiler small {
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    margin-bottom: 14px;
}
.yasal-icindekiler ol { list-style: none; border-left: 2px solid var(--c-border); }
.yasal-icindekiler a {
    display: block;
    padding: 7px 0 7px 16px;
    margin-left: -2px;
    border-left: 2px solid transparent;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--c-text-muted);
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.yasal-icindekiler a:hover { color: var(--c-primary); border-left-color: var(--c-accent); }
.yasal-tarih { margin-top: 20px; font-size: 13px; color: var(--c-text-muted); }

/* Metin */
.yasal-metin { font-size: 16.5px; line-height: 1.75; color: var(--c-text); }
.yasal-metin > * + * { margin-top: 16px; }
.yasal-giris { font-size: 18px; color: var(--c-text-muted); }
.yasal-metin h2 {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-top: 56px;
    font-size: clamp(22px, 2.2vw, 28px);
    line-height: 1.25;
    color: var(--c-primary);
    scroll-margin-top: 110px;
}
.yasal-metin h2 .num { font-size: 14px; font-weight: 800; letter-spacing: 0.08em; color: var(--c-lime-text); }
.yasal-metin h3 { margin-top: 32px; font-size: 18px; color: var(--c-primary); }
.yasal-metin ul { padding-left: 22px; }
.yasal-metin li + li { margin-top: 8px; }
.yasal-metin li::marker { color: var(--c-lime-text); }
.yasal-metin a { color: var(--c-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.yasal-metin strong { color: var(--c-primary); }
.yasal-metin code { font-size: 0.9em; background-color: var(--c-mint); color: var(--c-primary); padding: 2px 7px; border-radius: 6px; }

/* Künye: veri sorumlusu bilgileri */
.yasal-kunye {
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 8px 24px;
}
.yasal-kunye div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 12px 0; }
.yasal-kunye div + div { border-top: 1px solid var(--c-border); }
.yasal-kunye dt { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-muted); padding-top: 3px; }
.yasal-kunye dd { font-weight: 700; color: var(--c-primary); }

/* Tablo: dar ekranda yatay kayar, sayfa kaymaz */
.yasal-tablo-kap { overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--radius-md); background-color: var(--c-surface); }
.yasal-tablo { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.yasal-tablo th, .yasal-tablo td { text-align: left; padding: 13px 18px; vertical-align: top; }
.yasal-tablo th { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-muted); background-color: var(--c-mint); }
.yasal-tablo td:first-child { font-weight: 700; color: var(--c-primary); white-space: nowrap; }
.yasal-tablo tr + tr td { border-top: 1px solid var(--c-border); }

/* 404: tam ekran hero, büyük sarı kod ve altta hızlı bağlantılar */
.bulunamadi-kod {
    font-size: clamp(96px, 15vw, 176px);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--c-accent);
    text-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    margin-bottom: 18px;
    font-variant-numeric: tabular-nums;
}
.hero p.bulunamadi-kod { font-size: clamp(96px, 15vw, 176px); color: var(--c-accent); max-width: none; }
.bulunamadi-linkler { margin-top: 36px; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.bulunamadi-linkler a {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    padding: 8px 18px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-pill);
    transition: var(--transition);
}
.bulunamadi-linkler a:hover { color: var(--c-accent); border-color: var(--c-accent); }

/* Footer'daki yasal bağlantılar */
.f-yasal { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.f-yasal a { color: var(--c-text-muted); font-weight: 700; }
.f-yasal a:hover { color: var(--c-primary); }

/* Çerez bildirimi: altta, ortada küçük kart */
.cerez-bildirimi {
    position: fixed;
    left: 50%;
    bottom: 20px;
    z-index: 1200;
    width: min(760px, calc(100% - 32px));
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 16px 16px 24px;
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    animation: cerezGir 0.45s 0.6s var(--ease) both;
}
.cerez-bildirimi[hidden] { display: none; }
.cerez-bildirimi p { font-size: 14px; line-height: 1.55; color: var(--c-text-muted); }
.cerez-bildirimi a { color: var(--c-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.cerez-bildirimi .btn { flex-shrink: 0; padding: 11px 26px; }
@keyframes cerezGir { from { opacity: 0; transform: translate(-50%, 16px); } }
@media (prefers-reduced-motion: reduce) { .cerez-bildirimi { animation: none; } }

@media (max-width: 900px) {
    .yasal-duzen { grid-template-columns: minmax(0, 1fr); }
    .yasal-icindekiler { position: static; }
    .yasal-icindekiler ol { columns: 2; column-gap: 24px; }
}
@media (max-width: 600px) {
    .yasal-bolum { padding: 56px 0 80px; }
    .yasal-icindekiler ol { columns: 1; }
    .yasal-metin { font-size: 16px; }
    .yasal-kunye { padding: 4px 18px; }
    .yasal-kunye div { grid-template-columns: 1fr; gap: 2px; }
    .cerez-bildirimi { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; bottom: 12px; }
    .cerez-bildirimi .btn { justify-content: center; }
}

/* ==========================================================================
   11. FOOTER
   ========================================================================== */
footer {
    background-color: var(--c-surface);
    border-top: 1px solid var(--c-border);
    padding: 80px 0 40px;
}

.footer-cols {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 40px;
    margin-bottom: 60px;
}

/* Saydam zeminli logo: koyu temada beyaz kutu oluşmuyor. Kırpılmış olduğu için
   eski negatif margin hilesine de gerek kalmadı. */
.f-brand img { height: 92px; width: auto; object-fit: contain; margin: 0 0 20px; }
.f-brand p { color: var(--c-text-muted); font-size: 16px; max-width: 340px; }

.footer-cols h4 { font-size: 18px; color: var(--c-primary); margin-bottom: 20px; }
.f-links li { margin-bottom: 12px; }
.f-links a { font-size: 16px; color: var(--c-text-muted); }
.f-links a:hover { color: var(--c-lime-text); padding-left: 4px; }

.f-contact { display: flex; flex-direction: column; gap: 2px; }
.f-contact strong { font-size: 13px; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.f-contact a { font-size: 17px; font-weight: 700; color: var(--c-primary); margin-bottom: 12px; }
.f-contact a:hover { color: var(--c-lime-text); }

.footer-bottom {
    padding-top: 32px;
    border-top: 1px solid var(--c-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 14px;
    color: var(--c-text-muted);
}

.f-credit a { font-weight: 800; color: var(--c-primary); }
.f-credit a:hover { color: var(--c-lime-text); }

/* Footer'daki adres, telefon/e-postadan daha uzun; aynı sütunda satır kırar */
.f-contact .f-address { font-size: 15px; line-height: 1.45; max-width: 260px; }

/* ==========================================================================
   12. RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
    .products-grid { grid-template-columns: 1fr; }
    .about-grid, .pledge-grid { grid-template-columns: 1fr; gap: 56px; }
    /* Tek sütuna düşünce görseli metnin üstüne alan bölümler */
    .about-grid.media-first .about-media { order: -1; }
    .features-head { grid-template-columns: 1fr; gap: 20px; }
    .mech-list { grid-template-columns: 1fr 1fr; }
    .mech-item:nth-child(3) { padding-left: 0; border-left: none; }
    .mech-item:nth-child(n+3) { border-top: 1px solid var(--c-border); margin-top: 32px; }
    .contact-head { grid-template-columns: 1fr; gap: 20px; }
    .certs-grid { grid-template-columns: repeat(2, 1fr); }
    .about-media { max-width: 640px; }
    .footer-cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .stats-grid { grid-template-columns: 1fr; }
    .stat-item { padding: 36px 0 28px; }
    .stat-item + .stat-item { border-left: none; border-top: 1px solid rgba(255,255,255,0.12); }
    .stat-item::before { left: 0; }
}

@media (max-width: 768px) {
    .nav-links { display: none; }
    .menu-toggle { display: block; }

    .nav-links.active {
        display: flex;
        flex-direction: column;
        gap: 0;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        /* Saydam + bulanık zemin. Renk temaya göre döndüğü için yazılar
           (var(--c-text)) hem açık hem koyu temada okunur kalıyor. */
        background-color: var(--c-nav-blur);
        backdrop-filter: blur(18px) saturate(150%);
        -webkit-backdrop-filter: blur(18px) saturate(150%);
        padding: 12px 24px 24px;
        box-shadow: 0 16px 30px rgba(0,0,0,0.18);
        border-top: 1px solid var(--c-border);
    }
    .nav-links.active a { color: var(--c-text); padding: 14px 0; width: 100%; border-radius: 0; border-bottom: 1px solid var(--c-border); }
    .nav-links.active a::after { left: 0; right: auto; width: 40px; bottom: 8px; }
    .nav-links.active a.is-active { color: var(--c-primary); }

    /* backdrop-filter desteklenmiyorsa okunurluk için düz zemine dön */
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .nav-links.active { background-color: var(--c-surface); }
    }

    .nav-inner { height: 80px; }
    .logo-mark { width: 54px; height: 54px; border-radius: 14px; }
    .logo-mark img { width: 130px; height: 130px; }
    .logo-text strong { font-size: 19px; }

    .hero { padding: 120px 0 80px; }
    .hero-bg img { object-position: 58% center; }

    .features, .catalog, .about-section, .pledge-section, .contact-section, .certs { padding: 80px 0; }

    .features-head { margin-bottom: 40px; }
    .mech-list { grid-template-columns: 1fr; }
    .mech-item, .mech-item + .mech-item { padding: 28px 0 28px; border-left: none; margin-top: 0; }
    .mech-item + .mech-item { border-top: 1px solid var(--c-border); }
    .mech-item .top { margin-bottom: 16px; }
    .certs-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .cert-card { padding: 24px 20px; }

    .p-card { grid-template-columns: 1fr; }
    .p-image { min-height: 200px; }

    .about-facts { grid-template-columns: 1fr; }
    .about-facts div, .about-facts div + div { padding: 16px 0; border-left: none; }
    .about-facts div + div { border-top: 1px solid var(--c-border); }

    .pledge-facts { grid-template-columns: 1fr; }
    .play-btn { left: 16px; bottom: 16px; padding: 6px 18px 6px 6px; font-size: 14px; }
    .play-btn i { width: 40px; height: 40px; }

    .contact-head { margin-bottom: 36px; }
    .contact-strip { grid-template-columns: 1fr; }
    .contact-col { padding: 26px 24px; }
    .contact-col + .contact-col { border-left: none; border-top: 1px solid var(--c-border); }
    .contact-col .action { padding-top: 12px; }

    .footer-cols { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; text-align: center; }
}