/* ============================================================
   KEV Tasarım Sistemi
   Kurallar ve gerekçeler: docs/DESIGN.md
   Bu dosya tema CSS'lerinden SONRA yüklenir ve onları geçersiz kılar.

   Ölçüler docs/design/mockup.png üzerinden alınmıştır. Mockup 2560px
   genişliğinde ve 1440px'lik bir görünüm alanının 1.778 katıdır; bu
   dosyadaki px değerleri mockup ölçüsü / 1.778 ile hesaplanmıştır.
   ============================================================ */

/* ---------- 1. Tasarım token'ları ---------- */
:root {
    /* Yeşiller */
    --kev-green:         #077A54;
    --kev-green-pattern: #027A54;
    --kev-green-deep:    #006343;
    --kev-green-dark:    #224839;
    --kev-green-muted:   #3E604C;
    /* Alıntı bandı ve footer zemini — mockup'tan örneklendi */
    --kev-green-band:    #3E604C;

    /* Altın / nötr */
    --kev-gold:          #8E714E;
    --kev-gold-light:    #C9A227;
    /* Footer logosu, sütun başlıkları, üyelik bandı, sosyal çerçeve */
    --kev-gold-soft:     #E1BA7F;
    /* Alıntı bandındaki madalyon süsleme */
    --kev-gold-orn:      #EABC65;
    /* "Diğer Sohbetler" başlık bandı degradesi */
    --kev-gold-grad-a:   #A6885A;
    --kev-gold-grad-b:   #715E3B;

    /* Yüzeyler */
    --kev-cream:         #F6F3ED;
    --kev-cream-warm:    #FCF9F4;
    /* İç sayfa başlık bandı — gövde kreminden bir tık koyu sıcak krem */
    --kev-cream-dark:    #F0E9DC;
    --kev-surface:       #FFFFFF;
    --kev-hero-sand:     #EEE2CF;

    /* Metin */
    --kev-text:          #1F2A24;
    --kev-text-muted:    #5A6B60;
    /* Hero alt metni — mockup'ta sıcak koyu kahve */
    --kev-text-warm:     #57492C;
    --kev-text-on-dark:  #F6F3ED;

    /* Boşluk ölçeği */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
    --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;

    /* ---- Köşe yuvarlaklığı ----
       Ana sayfadaki kart dili TÜM sayfalarda geçerlidir; iç sayfalarda
       inline radius bırakılmaz, hep bu token'lar kullanılır. */
    /* ---- Bölüm dikey ritmi — TEK kaynak ----
       İç sayfalarda başlık bandı ile içerik arası ve içerik ile footer
       arası bu token'dan gelir. Sayfaya özel piksel YAZILMAZ. */
    --kev-section-space: var(--space-9);   /* 96px; mobilde 56px'e iner */

    --kev-radius:    14px;  /* kart, panel, kutu, form kutusu, alıntı bandı */
    --kev-radius-lg: 18px;  /* büyük faaliyet kartı */
    --kev-radius-sm:  6px;  /* buton, etiket, input, küçük öğe */

    --kev-shadow:   0 2px 14px rgb(34 72 57 / .08);
    --kev-shadow-lg:0 8px 30px rgb(34 72 57 / .14);
    /* ---- Ölçü kabı (container) ----
       TEK kaynak. Header, footer, bölümler ve eski tema `.container`'ı
       hepsi bu ikiliyi kullanır; sayfa boyunca tek bir sol/sağ kenar
       çizgisi olur. Değiştirilmesi tüm siteyi kaydırır.

       `clamp(1200px, 80%, 1400px)`: kenar boşluğu ekranla ORANTILI büyür,
       içerik 1400px'te durur.

       ⚠ ALT SINIR (1200px) KALDIRILMAZ. Header ızgarası (logo + menü + CTA)
       min-content genişliğinin ALTINA İNEMEZ; sıkıştırılırsa ya kabı taşırır
       ya da CTA sessizce iki satıra düşer. Saf `min(80%, 1400px)` yazıldığında
       1101–1440 bandında ızgara kabı taşırıyordu (1280'de 110px). İlk denemede
       alt sınır 1160 seçilmişti; o ölçüm CTA ZATEN SIKIŞMIŞKEN alındığı için
       (173px yerine 156px) gereksinimi düşük gösterdi. CTA'ya `nowrap`
       konunca gerçek gereksinim 1184px çıktı → alt sınır 1200.

       `max-width` yalnızca ÜST sınırdır: 1200px'ten dar ekranlarda kap zaten
       %100 kalır, bu yüzden mobil ve dar masaüstü için ayrı bir medya
       sorgusu GEREKMEZ. */
    --kev-container: clamp(1200px, 80%, 1400px);
    --kev-container-pad: 24px;   /* = --space-5 */

    /* Header — zemin gövde kremiyle BİREBİR aynı; ayrışma yalnızca gölgeyle */
    --kev-header-h: 116px;

    /* ---- Başlık ölçeği (bant > bölüm > kart) ---- */
    --fs-pagehead: clamp(1.75rem, 4.5vw, 3rem);      /* 28 → 48px */
    --fs-section:  clamp(1.5rem, 3.2vw, 2.25rem);    /* 24 → 36px */
    --fs-card:     clamp(1.125rem, 1.6vw, 1.375rem); /* 18 → 22px */
}

/* ---------- 2. Temel ---------- */
body.kev {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--kev-text);
    background: var(--kev-cream);
}

/* Yalnızca yazı tipi ailesi global; RENK VERİLMEZ.
   Sebep: sayfalar tek tek yenileniyor. Global renk ataması, henüz
   dönüştürülmemiş eski tema bölümlerinin kontrastını bozuyor.
   Renkleri .kev-* bileşenleri kendi içinde tanımlar. */
body.kev h1, body.kev h2, body.kev h3,
body.kev h4, body.kev h5, body.kev h6 {
    font-family: var(--font-heading);
    line-height: 1.15;
}

/* Eski tema (style.css) `p`, `ul li`, `ol li` gibi ELEMENT seçicilerine
   Noto Serif / Philosopher atıyor. Bunlar .kev bileşenlerinden daha düşük
   özgüllükte ama kev-design.css'te karşılığı olmadığı için gövde metni
   serif çiziliyordu. Aşağısı yalnızca metin elementlerini kapsar —
   ikon fontları (.fas/.fab/[class^="flaticon-"]) pseudo-element üzerinden
   çalıştığı için ETKİLENMEZ. */
body.kev p, body.kev li, body.kev cite, body.kev blockquote,
body.kev figcaption, body.kev dd, body.kev dt,
body.kev th, body.kev td, body.kev address, body.kev small {
    font-family: var(--font-sans);
}

/* Tema, tablo başlıklarına ve DataTables sayfalamasına daha yüksek
   özgüllükle Philosopher veriyordu. Bu son 6 element kapatılınca
   style.css'teki Google Fonts @import'u tamamen silinebildi
   (2 render-blocking dış istek, ~1.1 sn). */
body.kev table thead th, body.kev table th,
body.kev .table thead th, body.kev table.dataTable thead th,
body.kev .paginate_button, body.kev .paginate_button a,
body.kev .page-item, body.kev .page-link, body.kev .pagination li,
body.kev .pagination li a {
    font-family: var(--font-sans) !important;
}

body.kev img { max-width: 100%; }

/* ⚠ Eski tema `body,html { overflow-x: hidden }` yazıyor. `hidden` gövdeyi
   bir KAYDIRMA KAPSAYICISINA çevirir ve `position:sticky` başlığı bozar —
   header sayfayla birlikte yukarı kayıp gözden kayboluyordu.
   `clip` aynı yatay kırpmayı yapar ama kaydırma kapsayıcısı oluşturmaz. */
/* ⚠⚠ BU İKİ KURAL BİRLEŞTİRİLMEZ — `body.kev, html:has(body.kev) { … }`
   YAZILMAZ. CSS'te bir seçici listesindeki TEK bir geçersiz seçici kuralın
   TAMAMINI düşürür. `:has()` desteklemeyen bir motorda (Firefox < 121,
   Safari < 15.4) birleşik yazım `body.kev`'i de düşürür; tema `hidden`
   geri gelir, gövde kaydırma kapsayıcısına döner ve STICKY HEADER BOZULUR
   — header kaydırıldığında gözden kaybolur. Üç motorda ölçülerek
   doğrulandı (01.08.2026). Ayrı kurallar birbirini etkilemez. */
body.kev { overflow-x: clip; }
html:has(body.kev) { overflow-x: clip; }

/* `overflow: clip` desteklenmiyorsa (Safari < 16) yukarıdaki bildirim
   düşer ve yine tema `hidden`'ı kazanır. O durumda yatay taşmayı kabul
   edip STICKY'yi korumak tercih edilir: kaybolan header, görünen bir
   kaydırma çubuğundan çok daha kötüdür. */
@supports not (overflow-x: clip) {
    body.kev { overflow-x: visible; }
}

.kev-container {
    width: 100%;
    max-width: var(--kev-container);
    margin-inline: auto;
    padding-inline: var(--kev-container-pad);
}

/* Eski tema `.container { max-width: 73.125rem (1170px); padding: 0 }` yazıyor.
   Bu, henüz `.kev-container`'a çevrilmemiş sayfalarda içeriğin 9px farklı
   bir kenar çizgisinden başlamasına yol açıyordu — header hizalandığında
   fark gözle görülür hale gelir. Tek kaba bağlanır.
   `.row` negatif marj sözleşmesi bozulmaz: kap iç kenarı sağa kayar,
   satır -12px ile geri gelir, sütun +12px ile kabın iç kenarına oturur. */
body.kev .container {
    max-width: var(--kev-container);
    padding-inline: var(--kev-container-pad);
}

/* Klavye ile gezinenler için görünür odak — erişilebilirlik */
body.kev :focus-visible {
    outline: 3px solid var(--kev-gold-light);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Ekran okuyucuya özel */
.kev-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.kev-skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--kev-green); color: #fff; padding: 12px 20px;
}
.kev-skip-link:focus { left: 0; }

/* ============================================================
   Desen zemin (Kev_Pattern)
   ------------------------------------------------------------
   ÖLÇEK: mockup'ta bir yıldız motifi ~105 CSS px. Karoda yatayda
   ~8 motif olduğu için karo boyu 8 × 105 ≈ 840px. Önceden 320px
   verilmişti; motif ~39px'e düşüyor ve uzaktan düz gri doku gibi
   okunuyordu. Aynı ölçek başlık bantlarında da kullanılır.

   DEGRADE: mockup'ta desen bölüm içinde homojen DEĞİL — üstte
   belirgin, aşağı indikçe kayboluyor (tanıtım bandında net).
   İki maske kesiştirilir: desen şekli ∩ dikey degrade.
   ============================================================ */
:root { --kev-pattern-size: 840px; }

.kev-pattern-bg { position: relative; background: var(--kev-cream); }
.kev-pattern-bg::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-color: var(--kev-green-pattern);
    opacity: .18;

    -webkit-mask-image: url('/assets/brand/kev-pattern-solid.png'),
                        linear-gradient(180deg, #000 0%, #000 12%, transparent 78%);
    mask-image:         url('/assets/brand/kev-pattern-solid.png'),
                        linear-gradient(180deg, #000 0%, #000 12%, transparent 78%);
    -webkit-mask-size: var(--kev-pattern-size) var(--kev-pattern-size), 100% 100%;
    mask-size:         var(--kev-pattern-size) var(--kev-pattern-size), 100% 100%;
    -webkit-mask-repeat: repeat, no-repeat;
    mask-repeat:         repeat, no-repeat;
    -webkit-mask-composite: source-in;   /* WebKit sözdizimi */
    mask-composite: intersect;           /* standart sözdizimi */
}
.kev-pattern-bg > * { position: relative; }

/* ---------- 3. Butonlar ---------- */
.kev-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 12px 26px; border-radius: var(--kev-radius-sm);
    font-family: var(--font-sans); font-weight: 500; font-size: .9375rem;
    line-height: 1.2; text-decoration: none; cursor: pointer;
    border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s;
}
.kev-btn--primary { background: var(--kev-green); color: #fff; }
.kev-btn--primary:hover { background: var(--kev-green-deep); color: #fff; }
.kev-btn--gold { background: var(--kev-gold); color: #fff; }
.kev-btn--gold:hover { background: #7B6142; color: #fff; }
/* ---- Marka "beyaz" butonu (hero "Bizi Tanıyın" + tanıtım "Online Kayıt") ----
   Mockup ölçüsü: 194 × 43 CSS px, zemin #FAF9F6, KÖŞE YUVARLAK DEĞİL,
   ikon ~30px, metin yeşil (#007953) ~17px.
   ⚠ Mockup'ta ÇERÇEVE YOK (kenar taraması: bant #F6F3ED → buton #FAF9F6,
   arada koyu çizgi yok). Talep üzerine ince yeşil çerçeve eklendi —
   tıklanabilirliği belli etmek için. Çerçevesiz istenirse border satırı silinir. */
.kev-btn--ghost {
    background: #FAF9F6; color: var(--kev-green);
    border: 1px solid rgb(7 122 84 / .35);
    border-radius: 0;
    min-height: 43px; padding: 8px 18px; gap: 12px;
    font-size: 1.0625rem; font-weight: 500;
    box-shadow: none;
}
.kev-btn--ghost .kev-btn__badge { width: 30px; height: 30px; flex: 0 0 30px; }
.kev-btn--ghost:hover {
    background: #fff; color: var(--kev-green-deep);
    border-color: rgb(7 122 84 / .6);
}
.kev-btn--outline-light {
    background: transparent; color: var(--kev-text-on-dark);
    border-color: rgb(246 243 237 / .5);
}
.kev-btn--outline-light:hover { background: rgb(246 243 237 / .12); color: #fff; }
.kev-btn__badge { width: 22px; height: 22px; flex: 0 0 22px; }

/* ---------- 4. Bölüm başlığı ve ayraç ----------
   Mockup ritmi: bölümler arasında TEK ayraç bulunur.
   - İlk bölüm (Kemal Efendi Vakfı): ortalanmış başlık + ayraç altta
   - Sonraki bölümler: ayraç üstte, başlık SOLA yaslı
   Ayraç konteyner genişliğini boydan boya kaplar (mockup'ta da öyle). */
/* Dikey ritim mockup'tan ölçüldü:
   içerik → 62px → ayraç → 48px → (başlık) → 40px → içerik
   Bitişik margin'ler çöktüğü için başlık+ayraç arası 62px'e oturur. */
.kev-section { padding-block: 0; }
.kev-section--lead { padding-top: var(--kev-section-space); }
/* İç sayfa içerik bölümü: başlık bandından sonra ve footer'dan önce
   standart nefes boşluğu. Az içerikli sayfalarda da aynı ritim. */
.kev-section--sayfa { padding-block: var(--kev-section-space); }
.kev-section__tail { text-align: center; margin-block: var(--space-7) var(--space-9); }
/* Alıntı bandı bölümü — öncesinde ayraç yok, boşluğu kendi verir */
.kev-section--quote { padding-block: 62px; }

.kev-section-head { margin: 0 0 40px; }
.kev-section-head--center { text-align: center; }
.kev-section-head__title {
    font-weight: 900; color: var(--kev-gold);
    font-size: clamp(1.75rem, 4vw, 2.75rem); margin: 0; line-height: 1.1;
}
.kev-section-head__sub {
    color: var(--kev-green); font-weight: 500; font-style: italic;
    font-size: clamp(.9375rem, 1.6vw, 1.0625rem); margin: var(--space-2) 0 0;
}

/* Ayraç — Kev_Line SVG'si konteyner boyunca uzar */
.kev-rule {
    display: block; width: 100%; max-width: none; height: auto;
    margin: 62px auto 48px; opacity: .9;
}

/* ---------- 5. Rozetli kart (faaliyet) ----------
   Mockup ölçüleri (1440 görünümde): kart 348px, görsel 324×358 ve
   karta 12px içeriden oturuyor; rozet görselin ALT kenarına biniyor. */
.kev-card {
    position: relative; display: flex; flex-direction: column;
    background: var(--kev-surface); border-radius: 18px;
    border: 1px solid rgb(142 113 78 / .28); box-shadow: var(--kev-shadow);
    transition: transform .2s, box-shadow .2s; height: 100%;
    padding: 12px 12px 0;
}
.kev-card:hover { transform: translateY(-4px); box-shadow: var(--kev-shadow-lg); }
.kev-card__media { position: relative; border-radius: 10px; overflow: visible; }
.kev-card__media img {
    width: 100%; aspect-ratio: 324 / 358; height: auto;
    object-fit: cover; display: block; border-radius: 10px;
}
/* Rozet: görselin alt kenarına yarı yarıya biner */
.kev-card__badge {
    position: absolute; left: 50%; bottom: -32px; transform: translateX(-50%);
    width: 64px; height: 64px; border-radius: 50%; background: var(--kev-surface);
    display: grid; place-items: center; box-shadow: 0 2px 10px rgb(0 0 0 / .14);
    z-index: 2;
}
.kev-card__badge img { width: 44px; height: 44px; }
.kev-card__body {
    /* Alt boşluk = ok konumu + ok boyu + nefes. `.kev-card__more` mutlak
       konumlu olduğu için daha az verilirse uzun açıklama okun ALTINDA
       kalıyordu (ana sayfada "Gençlik Birimi" kartında yaşandı). */
    padding: 48px var(--space-4) calc(var(--space-5) + 38px + var(--space-3));
    text-align: center; flex: 1 1 auto;
}
.kev-card__title {
    font-weight: 700; font-size: clamp(1.25rem, 1.8vw, 1.625rem);
    letter-spacing: .01em; color: var(--kev-green);
    margin: 0 0 var(--space-2);   /* başlıklar kaynakta zaten büyük harf */
}
.kev-card__title a { color: inherit; }
.kev-card__text { color: var(--kev-gold); font-size: 1rem; margin: 0; }
/* Sağ altta altın dairesel ok */
.kev-card__more {
    position: absolute; right: var(--space-5); bottom: var(--space-5);
    width: 38px; height: 38px; display: grid; place-items: center;
}
.kev-card__more img { width: 100%; height: 100%; }
/* Özet kartı (Faaliyetler alt başlıkları): açıklama veritabanından gelir ve
   birkaç paragraf olabilir; kart boyları eşit kalsın diye 3 satırla sınırlanır.
   Metin sunucuda da ~150 karaktere kısaltılıyor — bu kural ikinci güvence. */
.kev-card--ozet .kev-card__text {
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}

/* Kart ızgarası */
.kev-grid { display: grid; gap: var(--space-6); }
.kev-grid--3 { grid-template-columns: repeat(3, 1fr); }
.kev-grid--2 { grid-template-columns: repeat(2, 1fr); }

/* ---------- 6. Alıntı bandı (ayet / hadis) ----------
   Mockup: #3E604C zemin, iki yanda altın madalyon süsleme.
   Süsleme mockup'tan alfa kanalıyla çıkarılmıştır (kev-ornament.png);
   görsel bandın tam yüksekliğinde üretildiği için height:100% ile
   mockup'taki kırpma birebir tekrar eder. */
.kev-quote {
    position: relative; overflow: hidden;
    background: var(--kev-green-band); color: var(--kev-text-on-dark);
    border-radius: var(--kev-radius);
    padding: 30px clamp(var(--space-5), 15vw, 230px);
    text-align: center; margin: 0;
    min-height: 147px;                       /* mockup: 146.8px */
    display: flex; flex-direction: column; justify-content: center;
}
/* Madalyonlar: bandın İÇİNDE, tamamı görünür (kırpılmaz).
   Görselin gerçek oranı 315/262 = 1.202 — bozulmaması için birebir verilir. */
.kev-quote::before, .kev-quote::after {
    content: ""; position: absolute; top: 50%; transform: translateY(-50%);
    height: 126px; width: 152px; pointer-events: none;
    background: url('/assets/brand/kev-ornament.png') center / contain no-repeat;
}
.kev-quote::before { left: 28px; }
.kev-quote::after  { right: 28px; }

.kev-quote__text {
    font-size: clamp(1rem, 1.9vw, 1.375rem);  /* mockup: 22px */
    font-weight: 400; line-height: 1.28;      /* mockup: 28.1/22 */
    max-width: 62ch; margin: 0 auto;
    color: var(--kev-text-on-dark);
}
/* Kaynak satırı: ince altın çizgi + uçlarda kıvrım motifi + italik altın metin */
.kev-quote__cite {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin: 18px auto 0; max-width: 760px;
    font-style: italic; color: var(--kev-gold-soft); font-size: 1rem;
}
.kev-quote__cite::before, .kev-quote__cite::after {
    content: ""; flex: 1 1 auto; height: 29px; min-width: 60px;
    background:
        url('/assets/brand/kev-cite-flourish.png') right center / auto 100% no-repeat,
        linear-gradient(90deg, rgb(225 186 127 / .85) 0 calc(100% - 74px), transparent 0) left center / 100% 1px no-repeat;
}
.kev-quote__cite::after { transform: scaleX(-1); }

/* Alıntı noktaları bandın parçası — ayrı bir stil yok */
.kev-quote-dots {
    display: flex; gap: 10px; justify-content: center; margin-top: var(--space-4);
}
.kev-quote-dots button {
    width: 34px; height: 5px; border: 0; padding: 0; cursor: pointer;
    background: rgb(142 113 78 / .35); border-radius: 3px; transition: background .2s;
}
.kev-quote-dots button[aria-current="true"] { background: var(--kev-green); }

/* ---------- 7. Sohbet listesi ---------- */
/* Mockup'ta öne çıkan kart ile liste paneli AYNI hizada bitiyor.
   `align-items: start` ile liste kısa kalıyordu (728 vs 576 px). */
.kev-talks { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--space-6); align-items: stretch; }
.kev-talks__list { display: flex; flex-direction: column; }
/* Liste alanı kalan yüksekliği doldurur AMA üst sınırı vardır:
   sınır olmazsa 8 öğe boyunca uzayıp öne çıkan kartı da uzatıyor
   (ölçüldü: sayfa 4231 → 4667 px). Sınır ≈ öne çıkan kartın gövdesi
   kadar, yani ~5-6 öğe görünür, gerisi kayar. */
.kev-talks__items { flex: 1 1 auto; min-height: 0; max-height: 590px; }

.kev-talks__feature {
    background: var(--kev-surface); border-radius: 14px;
    border: 1px solid rgb(142 113 78 / .2); overflow: hidden; box-shadow: var(--kev-shadow);
}
/* Kapak: görsel kırpılır, üstüne oynat butonu biner */
.kev-talks__media { position: relative; aspect-ratio: 16 / 9; background: var(--kev-green-dark); overflow: hidden; }
.kev-talks__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kev-talks__play {
    position: absolute; inset: 0; margin: auto;
    width: 84px; height: 84px; border-radius: 50%;
    background: rgb(255 255 255 / .22); border: 3px solid rgb(255 255 255 / .9);
    display: grid; place-items: center; color: #fff; font-size: 26px;
    backdrop-filter: blur(2px); transition: background .2s, transform .2s;
}
.kev-talks__play:hover { background: rgb(255 255 255 / .35); transform: scale(1.06); color: #fff; }
/* Sol üstte koyu yeşil "Öne Çıkan Sohbet" rozeti */
.kev-talks__flag {
    position: absolute; top: var(--space-4); left: var(--space-4);
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--kev-green); color: #fff; font-size: .8125rem; font-weight: 500;
    padding: 7px 14px; border-radius: 6px;
}
.kev-talks__body { padding: var(--space-5) var(--space-5) var(--space-6); }
.kev-talks__date { color: var(--kev-green); font-size: .875rem; font-weight: 500; margin: 0; }
.kev-talks__title { font-size: 1.375rem; font-weight: 700; margin: var(--space-2) 0 var(--space-3); }
.kev-talks__title a { color: var(--kev-text); }
.kev-talks__desc { color: var(--kev-text-muted); font-size: .9375rem; margin: 0 0 var(--space-5); }

.kev-talks__list {
    background: var(--kev-cream-warm); border-radius: 14px;
    border: 1px solid rgb(142 113 78 / .2); overflow: hidden;
    display: flex; flex-direction: column;
}
/* Başlık bandı: altın degrade (mockup #A6885A -> #715E3B) */
.kev-talks__list-head {
    background: linear-gradient(90deg, var(--kev-gold-grad-a), var(--kev-gold-grad-b));
    color: #fff; font-weight: 700; font-size: 1.0625rem;
    padding: var(--space-4) var(--space-5); margin: 0;
}
/* Liste ~5 öğe gösterir, taşan kısım kayar (ince markalı scrollbar) */
.kev-talks__items {
    padding: 0 var(--space-4);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgb(142 113 78 / .5) transparent;
    overscroll-behavior: contain;
}
.kev-talks__items::-webkit-scrollbar { width: 6px; }
.kev-talks__items::-webkit-scrollbar-track { background: transparent; }
.kev-talks__items::-webkit-scrollbar-thumb {
    background: rgb(142 113 78 / .5); border-radius: 3px;
}
.kev-talks__items::-webkit-scrollbar-thumb:hover { background: rgb(142 113 78 / .75); }

/* Liste öğesi: NAVİGASYON DEĞİL — öne çıkanı değiştiren düğme */
.kev-talks__item {
    display: grid; grid-template-columns: 116px 1fr 26px; gap: var(--space-4);
    align-items: center; padding: var(--space-4) var(--space-2);
    border: 0; border-bottom: 1px solid rgb(142 113 78 / .18);
    background: none; width: 100%; text-align: left; cursor: pointer;
    color: inherit; font: inherit;
    border-inline-start: 3px solid transparent;
    transition: background .18s, border-color .18s;
}
.kev-talks__item:last-of-type { border-bottom: 0; }
.kev-talks__item:hover { background: rgb(142 113 78 / .07); }
.kev-talks__item--active {
    background: rgb(7 122 84 / .07);
    border-inline-start-color: var(--kev-green);
}
.kev-talks__item--active .kev-talks__item-title { color: var(--kev-green); font-weight: 700; }

/* Tüm kapaklar EŞİT boyutlu; kapak alınamazsa markalı placeholder gelir */
.kev-talks__item > img:first-child {
    width: 116px; height: 66px; flex: 0 0 116px;
    object-fit: cover; border-radius: 8px; display: block;
    background: var(--kev-green-band);
}
.kev-talks__item-metin { min-width: 0; }
.kev-talks__item-title {
    font-size: 1rem; font-weight: 500; color: var(--kev-text);
    display: block; margin-bottom: 4px;
}
.kev-talks__item-date {
    font-size: .8125rem; color: var(--kev-text-muted);
    display: inline-flex; align-items: center; gap: 6px;
}
.kev-talks__item-arrow { width: 26px; height: 26px; }

/* Alt buton: kitap ikonlu "Tüm Sohbetleri Görüntüle" */
.kev-talks__all {
    display: flex; align-items: center; justify-content: center; gap: var(--space-3);
    margin: var(--space-4); padding: var(--space-4);
    background: var(--kev-surface); border: 1px solid rgb(142 113 78 / .28);
    border-radius: 10px; font-weight: 500; color: var(--kev-text);
    transition: background .2s;
}
.kev-talks__all:hover { background: var(--kev-cream); color: var(--kev-green); text-decoration: none; }

/* ---------- 8. Header ----------
   Mockup: üstte 22px yeşil şerit, altında 122px krem gövde.
   Logo kilidi (ikon + yazı) solda, altında yeşil çizgi header'ın
   alt kenarına oturur. "ONLİNE KAYIT" butonu sağ kenara dayanır. */
/* ============================================================
   HEADER — katman sözleşmesi
   ------------------------------------------------------------
   Kural: header AKIŞTA yer kaplar (sticky, top:0), zemini OPAK'tır
   ve sayfa içeriğinin üstünde kalır. Sayfa başlık bandı her koşulda
   header'ın ALTINDA başlar — sayfa bazlı margin/z-index yaması YOK.

   z-index eski temanın 9999'lu kurallarının (.sticky-menu vb.) altında
   kalmasın diye token'a bağlandı. `isolation:isolate` header'ı kendi
   yığın bağlamına alır, böylece içindeki açılır menüler dışarı sızmaz.
   ============================================================ */
:root { --kev-header-z: 9500; }

.kev-header {
    position: sticky; top: 0; z-index: var(--kev-header-z);
    isolation: isolate;
    background: var(--kev-cream);
    transition: box-shadow .2s;
}

/* Eski tema, ziyaretçi tarafında RENDER EDİLMEYEN bir `.sticky-menu`
   bileşeni için `position:fixed; z-index:9999` tanımlıyor. Bugün zararsız
   ama ileride o markup geri gelirse header'ı örter — .kev sayfalarında
   baştan devre dışı bırakılır. */
body.kev .sticky-menu { display: none !important; }
/* Scroll'da renk değil GÖLGE ile ayrışır (zemin hep gövde kremi) */
.kev-header[data-stuck="true"] { box-shadow: 0 2px 14px rgb(34 72 57 / .12); }

/* Logo solda · menü ORTADA · Online Kayıt sağda.
   Orta sütun 1fr olduğu için menü, yan sütunların genişliğinden
   bağımsız olarak header'ın gerçek ortasında durur.

   ⚠ Ölçü sözleşmesi: bu blok `.kev-container` ile BİREBİR aynı geometriyi
   kullanır (max-width + margin-inline:auto + padding-inline). Böylece
   logonun sol kenarı ile sayfa içeriğinin sol kenarı, CTA'nın sağ kenarı
   ile içeriğin sağ kenarı aynı dikey hizada olur. Header'ın KENDİ zemini
   (`.kev-header`) tam genişlikte kalır — hizalanan içerik, zemin değil. */
.kev-header__inner {
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: stretch; gap: var(--space-5);
    min-height: var(--kev-header-h);
    width: 100%;
    max-width: var(--kev-container);
    margin-inline: auto;
    padding-inline: var(--kev-container-pad);
    background: var(--kev-cream);
}
/* Logo kilidi: ikon + yazı yan yana, altında yeşil çizgi.

   ⚠ `min-width: max-content` KALDIRILMAZ. Sebep: `body.kev img { max-width:100% }`
   kuralı görsellerin min-content katkısını sıfırlar; bu olmadan ızgara `auto`
   sütunu logoyu içeriğinin altına sıkıştırıyor, `width:auto` olan yazı görseli
   ise doğal genişliğini koruyup KUTUSUNU TAŞIYOR ve menü linklerinin üstüne
   çiziliyordu (1024px'te 31px taşma — ölçüm kutuyu doğru gösterdiği için
   gözden kaçıyordu). Alt sınır konunca taşma yerine ölçülebilir sıkışma olur. */
.kev-header__logo {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 14px;
    min-width: max-content;
    border-bottom: 4px solid var(--kev-green);
    padding-block: 16px;
}
.kev-header__logo:hover { text-decoration: none; }
.kev-header__logo-icon,
.kev-header__logo-word { width: auto; max-width: none; flex: 0 0 auto; display: block; }
.kev-header__logo-icon { height: 78px; }
.kev-header__logo-word { height: 62px; }

.kev-nav { justify-self: center; display: flex; align-items: center; }
.kev-nav__list { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; }

/* Etiket + açma düğmesi tek satırda */
.kev-nav__label { display: inline-flex; align-items: center; }
.kev-nav__link {
    display: inline-block; padding: 8px 2px;
    font-family: var(--font-sans); font-weight: 500; font-size: 1rem;
    color: var(--kev-green); letter-spacing: .01em;   /* büyük harf KAYNAKTA (Türkçe İ) */
    border-bottom: 2px solid transparent; background: none; border-top: 0;
    border-inline: 0; cursor: pointer; text-align: left;
}
.kev-nav__link:hover, .kev-nav__item--active > .kev-nav__label > .kev-nav__link {
    color: var(--kev-green-deep); border-bottom-color: var(--kev-gold);
}
/* Açılır menü oku — hem hover hem tıklama ile çalışır */
.kev-nav__toggle {
    display: inline-grid; place-items: center;
    width: 22px; height: 22px; margin-inline-start: 2px;
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--kev-green); font-size: 11px; line-height: 1;
    transition: transform .18s, color .18s;
}
.kev-nav__toggle:hover { color: var(--kev-gold); }

.kev-nav__item, .kev-nav__subitem { position: relative; }

/* ---- 1. seviye açılır panel (krem panel, yeşil hover) ---- */
/* ⚠ Eski tema `nav ul ul { position:absolute; width:15.625rem }` yazıyor.
   `width` burada tanımlanmazsa o kural rakipsiz uygulanır (bkz. CLAUDE.md). */
.kev-nav__sub {
    position: absolute; top: 100%; left: 0; width: max-content; max-width: 340px; min-width: 248px;
    background: var(--kev-cream-warm); border: 1px solid rgb(142 113 78 / .25);
    border-radius: var(--kev-radius-sm); box-shadow: var(--kev-shadow-lg);
    list-style: none; margin: 0; padding: var(--space-2) 0; z-index: 30;
    opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s;
}
/* ---- 2. seviye: yana açılır ---- */
.kev-nav__sub2 {
    position: absolute; top: -8px; left: 100%; width: max-content; max-width: 320px; min-width: 240px;
    background: var(--kev-cream-warm); border: 1px solid rgb(142 113 78 / .25);
    border-radius: var(--kev-radius-sm); box-shadow: var(--kev-shadow-lg);
    list-style: none; margin: 0; padding: var(--space-2) 0; z-index: 40;
    opacity: 0; visibility: hidden; transform: translateX(6px); transition: .18s;
}
/* Hover · klavye odağı · tıklama (data-open) — üçü de açar */
.kev-nav__item:hover > .kev-nav__sub,
.kev-nav__item:focus-within > .kev-nav__sub,
.kev-nav__item[data-open="true"] > .kev-nav__sub { opacity: 1; visibility: visible; transform: none; }

.kev-nav__subitem:hover > .kev-nav__sub2,
.kev-nav__subitem:focus-within > .kev-nav__sub2,
.kev-nav__subitem[data-open="true"] > .kev-nav__sub2 { opacity: 1; visibility: visible; transform: none; }

.kev-nav__sub a, .kev-nav__sub2 a, .kev-nav__sub .kev-nav__sublabel-text {
    display: block; padding: 9px var(--space-4); font-size: .9375rem; color: var(--kev-text);
}
.kev-nav__sub a:hover, .kev-nav__sub2 a:hover {
    background: var(--kev-green); color: #fff; text-decoration: none;
}
/* Alt menüsü olan 2. seviye öğesi: etiket + yan ok */
.kev-nav__sublabel {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-2); padding-inline-end: var(--space-2);
}
.kev-nav__sublabel > a, .kev-nav__sublabel > .kev-nav__sublabel-text { flex: 1 1 auto; }
.kev-nav__sublabel:hover { background: var(--kev-green); }
.kev-nav__sublabel:hover > a,
.kev-nav__sublabel:hover > .kev-nav__sublabel-text,
.kev-nav__sublabel:hover > .kev-nav__toggle { color: #fff; }
.kev-nav__sublabel > .kev-nav__toggle { color: var(--kev-gold); flex: 0 0 auto; }

/* CTA sağ kenara dayalı tam yükseklikte altın blok */
/* `min-width: max-content` + `nowrap`: CTA sıkışınca SESSİZCE iki satıra
   düşüyordu (kutu ölçüsü küçüldüğü için çakışma dedektörü de "temiz"
   diyordu). Artık sıkışma yerine ölçülebilir taşma olur. */
.kev-header__cta { flex: 0 0 auto; display: flex; align-items: center; min-width: max-content; }
.kev-header__cta .kev-btn {
    height: 44px; padding-inline: 30px; border-radius: 0;
    font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}

.kev-burger {
    display: none; flex: 0 0 auto; align-self: center;
    width: 46px; height: 46px;
    background: var(--kev-green); color: #fff; border: 0;
    border-radius: var(--kev-radius-sm); align-items: center; justify-content: center;
    font-size: 20px; cursor: pointer;
}

/* ---------- 9. Hero ----------
   Mockup: 754px yükseklik, aydınlık banner, koyu yeşil başlık. */
.kev-hero {
    position: relative; overflow: hidden;
    min-height: 754px; display: grid; place-items: center;
    text-align: center; background: var(--kev-hero-sand) center / cover no-repeat;
    padding-block: var(--space-9);
}
.kev-hero__slides { position: absolute; inset: 0; }
.kev-hero__slide {
    position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease;
    background: var(--kev-hero-sand) center / cover no-repeat;
    /* Slayt görseli boşsa marka banner'ına düşer */
    background-image: url('/assets/brand/kev-banner-1920.webp');
}
.kev-hero__slide[data-active="true"] { opacity: 1; }
/* Fotoğraf üzerindeki metnin okunabilirliği için açık perde */
.kev-hero__scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgb(246 243 237 / .10) 0%, rgb(246 243 237 / .55) 55%, rgb(246 243 237 / .25) 100%);
}
.kev-hero__inner { position: relative; z-index: 2; max-width: 880px; padding-inline: var(--space-5); }
.kev-hero__title {
    font-weight: 900; color: var(--kev-green);
    font-size: clamp(2.125rem, 5.5vw, 4rem); margin: 0 0 var(--space-5);
    text-shadow: 0 1px 2px rgb(255 255 255 / .6);
}
.kev-hero__text {
    color: var(--kev-text-warm); font-size: clamp(.9375rem, 2vw, 1.125rem);
    margin: 0 auto var(--space-6); max-width: 60ch; line-height: 1.55;
}
.kev-hero__dots {
    position: absolute; left: 50%; bottom: 48px; transform: translateX(-50%);
    display: flex; gap: 10px; z-index: 3;
}
.kev-hero__dot {
    width: 34px; height: 5px; border: 0; padding: 0; cursor: pointer;
    background: rgb(255 255 255 / .7); border-radius: 3px;
    box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: background .2s;
}
.kev-hero__dot[aria-current="true"] { background: var(--kev-green); }
.kev-hero__strip {
    position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
    background: var(--kev-green); z-index: 3;
}

/* ---------- 9c. Tanıtım bandı ---------- */
.kev-intro { padding-block: var(--space-9); }
.kev-intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
/* Mockup'ta bina fotoğrafı yatay bir kadraj; kaynak görsel kare
   olduğu için object-fit ile kırpılıyor. */
.kev-intro__media img {
    /* Mockup ölçüsü: 561 × 229 CSS px → 2.45:1 (geniş ve alçak kadraj).
       Önceden 4/3 verilmişti; fotoğraf 408px yükseliyor ve bant mockup'tan
       ~180px uzun kalıyordu. Kaynak görsel kare olduğu için object-fit
       ile kırpılıyor, object-position binayı kadrajda tutar. */
    width: 100%; aspect-ratio: 2.45 / 1; object-fit: cover; object-position: center 45%;
    border-radius: var(--kev-radius); display: block;
    box-shadow: var(--kev-shadow);
}
.kev-intro__besmele { max-width: 300px; height: auto; margin-bottom: var(--space-4); }
/* Mockup örneklemesi: bu paragraf #8D744B (sıcak altın-kahve) —
   kart açıklamalarıyla AYNI ton. Önceden --kev-text-muted (#5A6B60,
   açık yeşil-gri) veriliyordu, bu yüzden soluk kalıyordu. */
.kev-intro__text { color: var(--kev-gold); margin-bottom: var(--space-5); font-size: 1.0625rem; }

/* ---------- 9d. Haber kartı ---------- */
.kev-news {
    position: relative; display: flex; flex-direction: column; height: 100%;
    background: var(--kev-surface); border-radius: 14px;
    border: 1px solid rgb(142 113 78 / .28); box-shadow: var(--kev-shadow);
    transition: transform .2s, box-shadow .2s; overflow: hidden;
}
.kev-news:hover { transform: translateY(-4px); box-shadow: var(--kev-shadow-lg); }
.kev-news__date {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-4) var(--space-4) var(--space-3);
    font-size: .875rem; color: var(--kev-text); font-weight: 400; margin: 0;
}
.kev-news__date img { width: 32px; height: 32px; }
.kev-news__media { padding-inline: var(--space-4); }
.kev-news__media img { width: 100%; height: 190px; object-fit: cover; display: block; border-radius: 6px; }
.kev-news__body { padding: var(--space-4); flex: 1 1 auto; display: flex; flex-direction: column; }
.kev-news__title { font-size: 1.25rem; font-weight: 700; margin: 0 0 var(--space-2); color: var(--kev-text); }
.kev-news__title a { color: inherit; }
.kev-news__text { font-size: .9375rem; color: var(--kev-text-muted); margin: 0 0 var(--space-4); flex: 1 1 auto; }
.kev-news__more { align-self: flex-end; }

/* ============================================================
   10. Sayfa başlık bandı (iç sayfalar) — ORTAK BİLEŞEN
   ------------------------------------------------------------
   Koyu yeşil YOK. Zemin gövde kreminden bir tık koyu sıcak krem,
   üzerinde Kev_Pattern %16 (gövdedeki %10'dan belirgin ama yumuşak).
   Başlık koyu yeşil, breadcrumb altın, altta ince altın çizgi.
   Hem .kev-pagehead markup'ı hem tema `.page-title-wrap` bandı
   aynı görünümü kullanır.
   ============================================================ */
.kev-pagehead {
    position: relative; overflow: hidden;
    background: var(--kev-cream-dark);
    padding-block: var(--space-8) var(--space-7);
    border-bottom: 2px solid var(--kev-gold);
}
.kev-pagehead::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .16;
    background-color: var(--kev-green-pattern);
    -webkit-mask: url('/assets/brand/kev-pattern-solid.png') repeat center / var(--kev-pattern-size) var(--kev-pattern-size);
    mask: url('/assets/brand/kev-pattern-solid.png') repeat center / var(--kev-pattern-size) var(--kev-pattern-size);
}
.kev-pagehead > * { position: relative; z-index: 1; }
.kev-pagehead__grid {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-6); flex-wrap: wrap;
}
.kev-pagehead__title {
    font-family: var(--font-heading); font-weight: 900;
    color: var(--kev-green); font-size: var(--fs-pagehead);
    margin: 0; line-height: 1.1;
}
.kev-pagehead__lead { color: var(--kev-text-muted); margin: var(--space-2) 0 0; font-size: 1rem; }
.kev-pagehead__crumb { margin-top: var(--space-3); font-size: .875rem; color: var(--kev-gold); }
.kev-pagehead__crumb a { color: var(--kev-gold); font-weight: 500; }
.kev-pagehead__crumb a:hover { color: var(--kev-green); }

/* Sayfaya özel bilgi alanı (ör. İletişim telefon/e-posta) — altın ikon, yeşil metin */
.kev-pagehead__info { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.kev-pagehead__info-item { display: flex; align-items: center; gap: var(--space-3); }
.kev-pagehead__info-icon {
    width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%;
    display: grid; place-items: center; font-size: 17px;
    background: rgb(142 113 78 / .12); color: var(--kev-gold);
    border: 1px solid rgb(142 113 78 / .4);
}
.kev-pagehead__info-label { display: block; font-size: .8125rem; color: var(--kev-text-muted); }
.kev-pagehead__info-value {
    display: block; font-size: 1.0625rem; font-weight: 700; color: var(--kev-green-deep);
}
.kev-pagehead__info-value:hover { color: var(--kev-green); }

/* Bandın altındaki küçük Kev_Line ayracı */
/* Sayfaya özel meta satırı (sohbet detayında tarih/görüntülenme/beğeni) */
.kev-pagehead__meta {
    display: flex; flex-wrap: wrap; gap: var(--space-5);
    margin: var(--space-3) 0 0; font-size: .875rem; color: var(--kev-text-muted);
}
.kev-pagehead__meta i { color: var(--kev-gold); margin-inline-end: 6px; }

.kev-pagehead__rule { display: block; width: 100%; max-width: 420px; margin: var(--space-5) auto 0; opacity: .8; }

/* ============================================================
   10b. İÇ SAYFALAR
   Tema markup'ı korunarak yeni tasarım diline uyarlanıyor.
   ============================================================ */
/* Tema koyu perdesi kaldırılır. ::before'a DOKUNULMAZ — desen katmanı
   olarak aşağıda yeniden tanımlanıyor (aynı pseudo-element). */
body.kev section:has(.page-title-wrap) .black-layer::after { display: none !important; }

/* Tema bandını ortak .kev-pagehead görünümüne çeker.
   Eski fotoğraf zemini (.fixed-bg) tamamen kaldırılır; desen, bandı
   taşıyan div'in ::before'u ile çizilir (kev-pagehead ile aynı yöntem). */
body.kev section:has(.page-title-wrap) .fixed-bg { display: none !important; }

body.kev section:has(.page-title-wrap) > div:has(.page-title-wrap) {
    position: relative; overflow: hidden;
    background: var(--kev-cream-dark) !important;
    padding-top: var(--space-8) !important;
    padding-bottom: var(--space-7) !important;
    border-bottom: 2px solid var(--kev-gold);
}
body.kev section:has(.page-title-wrap) > div:has(.page-title-wrap)::before {
    content: "" !important; display: block !important;
    position: absolute !important; inset: 0 !important;
    pointer-events: none; opacity: .16 !important; z-index: 0;
    background-color: var(--kev-green-pattern) !important;
    background-image: none !important;
    -webkit-mask: url('/assets/brand/kev-pattern-solid.png') repeat center / var(--kev-pattern-size) var(--kev-pattern-size);
    mask: url('/assets/brand/kev-pattern-solid.png') repeat center / var(--kev-pattern-size) var(--kev-pattern-size);
}
body.kev section:has(.page-title-wrap) .page-title-wrap { position: relative; z-index: 1; }
body.kev .page-title-inner > h1 {
    font-family: var(--font-heading) !important;
    font-weight: 900;
    color: var(--kev-green) !important;
    font-size: var(--fs-pagehead);
    line-height: 1.1;
    margin-bottom: var(--space-3) !important;
}
body.kev .page-title-inner .breadcrumb {
    background: transparent !important;
    justify-content: center; padding: 0; margin: 0;
    font-size: .875rem;
}
body.kev .page-title-inner .breadcrumb-item,
body.kev .page-title-inner .breadcrumb-item.active { color: var(--kev-gold) !important; }
body.kev .page-title-inner .breadcrumb-item a { color: var(--kev-gold) !important; font-weight: 500; }
body.kev .page-title-inner .breadcrumb-item a:hover { color: var(--kev-green) !important; }

/* İçerik bölüm başlığı — bant başlığından BELİRGİN ölçüde küçük (hiyerarşi) */
body.kev .sec-title-inner > h1,
body.kev .sec-title-inner > h2 {
    font-family: var(--font-heading);
    font-weight: 900; color: var(--kev-gold);
    font-size: var(--fs-section);
    line-height: 1.15;
}
body.kev .sec-title-inner > p { color: var(--kev-green); font-weight: 500; }
/* Bölüm üstü etiket — başlık kaldırılan sayfalarda tek başına kalıyor */
body.kev .sec-title-inner > span {
    font-weight: 500; font-size: 1rem; letter-spacing: .06em;
    text-transform: uppercase; color: var(--kev-green);
}

/* Üyelik ekranları (.auth-section) başlık bandı değil, TAM SAYFA koyu yeşil
   degrade zemin kullanıyordu. Marka kremine + desene çekildi.
   (Üyelik arayüzü kapalı, ama sayfalar adresle hâlâ açılabiliyor.) */
body.kev .auth-section {
    background: var(--kev-cream-dark) !important;
    position: relative;
}
body.kev .auth-section::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .16;
    background-color: var(--kev-green-pattern);
    -webkit-mask: url('/assets/brand/kev-pattern-solid.png') repeat center / var(--kev-pattern-size) var(--kev-pattern-size);
    mask: url('/assets/brand/kev-pattern-solid.png') repeat center / var(--kev-pattern-size) var(--kev-pattern-size);
}
body.kev .auth-section > * { position: relative; z-index: 1; }

/* ---------- 10d. İç sayfa yüzeyleri ----------
   Eski tema bölümlere #f8f9fa / #fff gibi soğuk griler veriyor; bu,
   header ve başlık bandının sıcak kremiyle yan yana ton farkı olarak
   görünüyordu. İç sayfa zeminleri gövde kremine çekiliyor. */
body.kev .bg-light,
body.kev section[class*="-content"]:not([class*="kev-"]),
body.kev section[class*="-section"]:not([class*="kev-"]),
body.kev .contact-content,
body.kev .donation-content { background: var(--kev-cream) !important; }

/* ---------- 10e. Köşe yuvarlaklığı — tek token ----------
   İç sayfalardaki kart/kutu/form yüzeyleri ana sayfadaki dille aynı. */
body.kev .card,
body.kev .contact-card, body.kev .contact-box, body.kev .contact-form-box,
body.kev .contact-form-wrap, body.kev .contact-info-side,
body.kev .info-box, body.kev .partner-card, body.kev .bank-card,
body.kev .donation-card, body.kev .payment-box, body.kev .cart-box,
body.kev .summary-box, body.kev .form-box, body.kev .form-container,
body.kev .sohbet-card, body.kev .kev-surface-box {
    border-radius: var(--kev-radius) !important;
    overflow: hidden;
}
body.kev .form-control,
body.kev input[type="text"], body.kev input[type="email"],
body.kev input[type="tel"], body.kev input[type="password"],
body.kev input[type="number"], body.kev input[type="date"],
body.kev select, body.kev textarea,
body.kev .thm-btn, body.kev .btn { border-radius: var(--kev-radius-sm) !important; }

/* ============================================================
   10h. TEK KART HOVER DAVRANIŞI
   ------------------------------------------------------------
   Sayfa sayfa farklı hover efektleri vardı (İş Birliklerimiz'de
   yükselme + yeşil çerçeve, Etkinlikler'de hiç yok). Hepsi tek
   davranışa bağlandı: 6px yükselme + büyük gölge + yeşil çerçeve.
   ============================================================ */
body.kev .kev-card, body.kev .kev-news, body.kev .card,
body.kev .partner-card, body.kev .donation-card, body.kev .sohbet-card,
body.kev .bank-card, body.kev .contact-card {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body.kev .kev-card:hover, body.kev .kev-news:hover, body.kev .card:hover,
body.kev .partner-card:hover, body.kev .donation-card:hover, body.kev .sohbet-card:hover,
body.kev .bank-card:hover, body.kev .contact-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--kev-shadow-lg);
    border-color: var(--kev-green) !important;
}
body.kev .partner-card:hover .partner-logo-wrap { border-color: var(--kev-green) !important; }

/* ============================================================
   10i. BOOTSTRAP VARSAYILAN RENKLERİ → MARKA
   ------------------------------------------------------------
   Mavi `primary` bootstrap.min.css'ten geliyor; view'larda hard-coded
   mavi hex YOK. Tek yerden markaya çekiliyor ki yeni eklenen
   `btn-primary`/`text-primary` de otomatik doğru renkte çıksın.
   ============================================================ */
body.kev .btn-primary,
body.kev .btn-outline-primary:hover,
body.kev .btn-outline-primary:focus,
body.kev .btn-info {
    background-color: var(--kev-green) !important;
    border-color: var(--kev-green) !important;
    color: #fff !important;
}
body.kev .btn-primary:hover, body.kev .btn-info:hover {
    background-color: var(--kev-green-deep) !important;
    border-color: var(--kev-green-deep) !important;
}
body.kev .btn-outline-primary {
    color: var(--kev-green) !important;
    border-color: var(--kev-green) !important;
    background-color: transparent !important;
}
body.kev .btn-secondary {
    background-color: var(--kev-gold) !important;
    border-color: var(--kev-gold) !important;
    color: #fff !important;
}
body.kev .btn-secondary:hover { background-color: #7B6142 !important; border-color: #7B6142 !important; }
body.kev .text-primary { color: var(--kev-green) !important; }
body.kev .text-info { color: var(--kev-gold) !important; }
body.kev .bg-primary, body.kev .badge-primary { background-color: var(--kev-green) !important; color: #fff !important; }
body.kev .badge-info { background-color: var(--kev-gold) !important; color: #fff !important; }
body.kev .border-primary { border-color: var(--kev-green) !important; }
body.kev a.text-primary:hover { color: var(--kev-green-deep) !important; }

/* ============================================================
   10j. BAŞLIK SEVİYESİ ≠ BAŞLIK BOYUTU
   ------------------------------------------------------------
   Erişilebilirlik için başlık etiketleri semantik sıraya çekildi
   (h1→h2→h3, atlama olmadan). Ancak bootstrap boyutu ETİKETE bağlıyor
   (h5 1.25rem, h4 1.5rem, h3 1.75rem), bu yüzden etiket değişince
   yazı boyutu da değişti ve sayfa yükseklikleri kaydı.

   Aşağısı görünümü ESKİ HÂLİNE sabitler: seviye semantik, boyut tasarım.
   ============================================================ */
body.kev .card-title { font-size: 1.25rem; }        /* eskiden h5 */
body.kev .donation-title { font-size: 1.5rem; }     /* eskiden h4 */
body.kev .sohbet-card-title { font-size: 18px; }    /* sayfa CSS'iyle aynı */
/* İçerik bölüm başlıkları: eskiden h4/h3 idi, şimdi h2 */
body.kev .contact-content h2 { font-size: 24px; }
/* Eskiden h4 olan bölüm başlıkları (Gençlik Birimi / Kız Kursu) */
body.kev .kev-eski-h4 { font-size: 1.5rem; }
/* Eskiden h3 olan senet başlığı */
body.kev .kev-eski-h3 { font-size: 1.75rem; }

/* ============================================================
   10k. DÜZEN KAYMASI (CLS) ÖNLEME
   ------------------------------------------------------------
   Faaliyet/sohbet detayındaki ana görsel veritabanından geliyor;
   boyutu önceden bilinmediği için tarayıcı yer ayıramıyordu ve
   görsel yüklendiğinde ALTINDAKİ METİN AŞAĞI ATLIYORDU
   (ölçüm: .post-detail-desc kayma skoru 0.16).
   Sabit oranlı kutu ile yer önceden ayrılır.
   ============================================================ */
body.kev .kev-detay-gorsel {
    width: 100%;
    max-width: 900px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    height: auto;
    background: var(--kev-cream-dark);   /* yüklenene kadar boşluk krem kalsın */
}

/* Logolar: doğal oranları attribute'larda verildi, CSS yalnızca
   yüksekliği belirliyor — genişliğin oranla hesaplanması için.

   ⚠ Header logosunun ÖLÇÜSÜ burada VERİLMEZ. Daha önce burada
   `body.kev .kev-header__logo-icon { height:78px }` duruyordu; özgüllüğü
   (0,2,0) medya sorgularındaki `.kev-header__logo-icon` (0,1,0) kurallarını
   eziyor ve logo 1024'te de, MOBİLDE de 78px kalıyordu. Ölçü tek yerde:
   `.kev-header__logo-icon/__word` temel kuralı + medya sorguları. */
body.kev .kev-footer__brand img { height: auto; }

/* ---------- 10f. Okunaklı metin düzeni (KVKK, sözleşme vb.) ---------- */
.kev-prose {
    max-width: 74ch; margin-inline: auto;
    background: var(--kev-surface); border: 1px solid rgb(142 113 78 / .22);
    border-radius: var(--kev-radius); padding: clamp(var(--space-5), 4vw, var(--space-8));
    box-shadow: var(--kev-shadow);
}
.kev-prose h2 {
    font-family: var(--font-heading); font-weight: 900; color: var(--kev-green);
    font-size: 1.375rem; margin: var(--space-7) 0 var(--space-3);
}
.kev-prose h2:first-of-type { margin-top: var(--space-4); }
.kev-prose h3 {
    font-weight: 700; color: var(--kev-gold);
    font-size: 1.0625rem; margin: var(--space-5) 0 var(--space-2);
}
.kev-prose p, .kev-prose li { color: var(--kev-text); font-size: 1rem; line-height: 1.75; }
.kev-prose ul { margin: 0 0 var(--space-4); padding-inline-start: 1.35em; }
.kev-prose li { margin-bottom: var(--space-2); }
.kev-prose a { color: var(--kev-green); text-decoration: underline; }
.kev-prose__meta { color: var(--kev-text-muted); font-size: .875rem; }
/* Taslak uyarısı */
.kev-prose__note {
    background: rgb(201 162 39 / .12); border: 1px solid rgb(201 162 39 / .5);
    border-radius: var(--kev-radius-sm); padding: var(--space-4);
    font-size: .9375rem; margin: 0 0 var(--space-5);
}

/* ---------- 10g. KVKK onay kutusu ---------- */
.kev-consent {
    display: flex; align-items: flex-start; gap: var(--space-3);
    background: var(--kev-cream); border: 1px solid rgb(142 113 78 / .3);
    border-radius: var(--kev-radius-sm); padding: var(--space-4);
    margin-bottom: var(--space-5);
}
.kev-consent input[type="checkbox"] {
    flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0;
    accent-color: var(--kev-green); cursor: pointer;
}
.kev-consent label { font-size: .9375rem; line-height: 1.55; margin: 0; cursor: pointer; }
.kev-consent a { color: var(--kev-green); font-weight: 500; text-decoration: underline; }
.kev-consent--error { border-color: #C0392B; background: rgb(192 57 43 / .06); }
.kev-consent__error { color: #C0392B; font-size: .8125rem; margin: var(--space-2) 0 0; display: none; }
.kev-consent--error .kev-consent__error { display: block; }

/* ---------- 10c. Form öğeleri ---------- */
body.kev .form-control,
body.kev input[type="text"], body.kev input[type="email"],
body.kev input[type="tel"], body.kev input[type="password"],
body.kev input[type="number"], body.kev input[type="date"],
body.kev select, body.kev textarea {
    font-family: var(--font-sans);
    border: 1px solid rgb(142 113 78 / .35);
    border-radius: var(--kev-radius-sm);
    /* ⚠ `background` KISAYOLU KULLANILMAZ — yalnızca `background-color`.
       Kısayol, bileşenin kendi `background-image`'ını da siler; Bootstrap
       `.custom-select` açılır ok işaretini background-image ile çiziyor ve
       ok kayboluyordu. */
    background-color: var(--kev-surface);
    color: var(--kev-text);
    padding: 11px 14px;

    /* ⚠ `height: auto` KALDIRILMAZ. Bootstrap `.form-control-sm` sabit
       `height: calc(1.5em + .5rem + 2px)` (31px) veriyor; yukarıdaki 11px
       dikey padding + 21px satır yüksekliği 43px istiyor. `box-sizing:
       border-box` ile sabit yükseklik kazandığı için içerik kutusu ~7px'e
       iniyor ve METİN KIRPILIYORDU — DataTables'ın "Gösterilecek Kayıt
       Sayısı" seçicisinde sayılar hiç görünmüyordu. */
    height: auto;
    min-height: 44px;
}
body.kev textarea { min-height: 120px; }

/* Açılır seçiciye kendi ok işaretimiz — tema/Bootstrap varyantından
   bağımsız olarak her zaman görünür (marka altını, sağda). */
body.kev select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238E714E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    padding-right: 38px;
}
body.kev .form-control:focus,
body.kev input:focus, body.kev select:focus, body.kev textarea:focus {
    border-color: var(--kev-green);
    box-shadow: 0 0 0 3px rgb(7 122 84 / .15);
    outline: none;
}
body.kev label { font-weight: 500; color: var(--kev-text); font-size: .9375rem; }
body.kev .form-control::placeholder { color: rgb(90 107 96 / .7); }

body.kev .thm-btn,
body.kev button[type="submit"]:not(.kev-btn),
body.kev input[type="submit"]:not(.kev-btn) {
    font-family: var(--font-sans); font-weight: 500;
    background: var(--kev-green); color: #fff;
    border: 0; border-radius: var(--kev-radius-sm);
}
body.kev .thm-btn:hover,
body.kev button[type="submit"]:not(.kev-btn):hover { background: var(--kev-green-deep); color: #fff; }

/* ---------- 10l. Sayfalama ve boş liste ----------
   Liste sayfalarının (Faaliyetler) ortak sayfalaması. Buton dili
   .kev-btn ile aynı: küçük köşe, yeşil etkin durum, altın odak halkası.
   z-index TAŞIMAZ (içerik bileşeni). */
.kev-pager {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: var(--space-2); margin-top: var(--space-7);
}
.kev-pager__item {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; height: 44px; padding: 0 var(--space-3);
    background-color: var(--kev-surface); color: var(--kev-text);
    border: 1px solid rgb(142 113 78 / .28); border-radius: var(--kev-radius-sm);
    font-weight: 500; text-decoration: none;
    transition: background-color .2s, border-color .2s, color .2s;
}
a.kev-pager__item:hover { border-color: var(--kev-green); color: var(--kev-green); }
a.kev-pager__item:focus-visible { outline: 2px solid var(--kev-gold); outline-offset: 2px; }
.kev-pager__item--active {
    background-color: var(--kev-green); border-color: var(--kev-green); color: #fff;
}
.kev-pager__item--disabled { opacity: .45; cursor: default; }
.kev-pager__gap { color: var(--kev-text-muted); padding: 0 var(--space-1); }
.kev-pager__info {
    text-align: center; margin: var(--space-4) 0 0;
    font-size: .875rem; color: var(--kev-text-muted);
}

.kev-empty {
    text-align: center; padding: var(--space-8) var(--space-5);
    background-color: var(--kev-surface); border-radius: var(--kev-radius);
    border: 1px solid rgb(142 113 78 / .28);
}
.kev-empty img { width: 56px; height: 56px; margin: 0 auto var(--space-4); display: block; opacity: .8; }
.kev-empty p { color: var(--kev-text-muted); margin: 0 0 var(--space-5); }
.kev-empty p:last-child { margin-bottom: 0; }

/* ---------- 11. Footer ----------
   Mockup: #3E604C zemin, solda büyük altın logo, dört sütun,
   ayrı üye giriş bandı, altın çerçeveli 6 sosyal ikon. */
.kev-footer { background: var(--kev-green-band); color: var(--kev-text-on-dark); }
.kev-footer a { color: var(--kev-text-on-dark); }
.kev-footer a:hover { color: #fff; text-decoration: underline; }
/* Eski tema `p { color:#666 }` element seçicisi footer paragraflarını da
   boyuyor ve koyu yeşil üzerinde okunmaz hale getiriyordu. */
.kev-footer p { color: inherit; }

.kev-footer__main {
    display: grid; grid-template-columns: 300px repeat(4, 1fr);
    gap: var(--space-7); padding-block: var(--space-8);
}
.kev-footer__brand { display: flex; align-items: flex-start; }
.kev-footer__brand img { width: 190px; height: auto; }
.kev-footer__col-title {
    font-family: var(--font-heading);
    font-weight: 700; font-size: 1.125rem; color: var(--kev-gold-soft);
    margin: 0 0 var(--space-4);
}
.kev-footer__col-title a { color: inherit; }
/* "Keşfet" sütunu mockup'ta beyaz ve kalın */
.kev-footer__col--light .kev-footer__col-title { color: #fff; }
.kev-footer__col--light .kev-footer__list a { font-weight: 700; opacity: 1; }
.kev-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.kev-footer__list a { font-size: .9375rem; opacity: .92; }

/* Üye giriş bandı — ayrı alt bölüm */
.kev-footer__member {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-6); flex-wrap: wrap;
    padding-block: var(--space-6); border-top: 1px solid rgb(246 243 237 / .2);
}
.kev-footer__member-title {
    display: flex; align-items: center; gap: var(--space-3);
    font-family: var(--font-heading);
    font-size: 1.5rem; font-weight: 700; letter-spacing: .01em;
    text-transform: uppercase; color: var(--kev-gold-soft); margin: 0 0 var(--space-2);
}
.kev-footer__member-text {
    font-size: .875rem; margin: 0; max-width: 46ch;
    color: rgb(246 243 237 / .9);
}
.kev-footer__member-actions { display: flex; gap: var(--space-3); }
.kev-footer__follow-title {
    font-family: var(--font-heading);
    font-size: 1.5rem; font-weight: 700; color: var(--kev-gold-soft);
    margin: 0 0 var(--space-3); text-align: right;
}
/* Üyelik bandı kapalıyken "Bizi Takip Edin" tek başına kalır — ortalanır */
.kev-footer__member > div:only-child { margin-inline: auto; }
.kev-footer__member > div:only-child .kev-footer__follow-title { text-align: center; }
.kev-footer__member > div:only-child .kev-footer__social { justify-content: center; }
/* Altın çerçeveli daireler */
.kev-footer__social { display: flex; gap: var(--space-3); justify-content: flex-end; }
.kev-footer__social a {
    width: 42px; height: 42px; border-radius: 50%;
    border: 1.5px solid var(--kev-gold-soft); color: #fff;
    display: grid; place-items: center;
    font-size: 16px; transition: background .2s, transform .2s, color .2s;
}
.kev-footer__social a:hover {
    background: var(--kev-gold-soft); color: var(--kev-green-band);
    transform: translateY(-3px); text-decoration: none;
}

.kev-footer__bottom {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-4); flex-wrap: wrap;
    padding-block: var(--space-4); border-top: 1px solid rgb(246 243 237 / .2);
    font-size: .8125rem; color: rgb(246 243 237 / .88);
}
.kev-footer__bottom ul { display: flex; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }

/* ============================================================
   12. Kırılımlar
   ------------------------------------------------------------
   ⚠ responsive.css:233 `header, .sticky-menu { display:none !important }`
   kuralını 1070px altında UYGULUYOR. Eski tema bunun yerine `.rspn-hdr`
   mobil başlığını gösteriyordu; yeni tasarımda o markup yok, dolayısıyla
   mobilde header tamamen kayboluyordu. Aşağıdaki kural bunu geri alır.
   ============================================================ */
@media (max-width: 1070px) {
    body.kev header.kev-header { display: block !important; }
    /* Aynı tema kuralı semantik <header> kullanan bölüm başlıklarını da
       siliyordu (ana sayfa: "Kemal Efendi Vakfı", "Hasbihal Sohbetleri",
       "Vakıftan Haberler" — 1070px altında görünmüyordu). */
    body.kev header.kev-section-head { display: block !important; }
}

/* Dar masaüstünde menü daralır — padding'e DOKUNULMAZ, yoksa header
   sayfa içeriğiyle hizasını kaybeder (tek kap sözleşmesi). */
@media (max-width: 1200px) {
    .kev-nav__list { gap: 18px; }
    .kev-nav__link { font-size: .9375rem; }
}

/* Kap genişledi; geniş ekranda menü nefes alsın.
   Eşik 1600: aralık 26'ya çıkınca ızgaranın gereksinimi 1205px'e
   yükseliyor, %80 bunu ancak 1506px'ten sonra karşılıyor. 1600 güvenli
   kenar payı bırakır. */
@media (min-width: 1600px) {
    .kev-nav__list { gap: 26px; }
}

/* 993–1140 bandı: kap sözleşmesi yüzünden kullanılabilir genişlik 48px
   daralıyor ve logo+menü+CTA tek satıra sığmıyordu. Padding'e dokunulmaz
   (hiza bozulur); yer, logo kilidi ve menü nefesi kısılarak açılır.
   Hesap (1024): logo 128 + menü ~600 + CTA 173 + 2×16 boşluk = 933 ≤ 976. */
@media (max-width: 1140px) and (min-width: 993px) {
    .kev-nav__list { gap: 11px; }
    .kev-nav__link { font-size: .875rem; }
    .kev-header__inner { gap: var(--space-4); }
    .kev-header__logo { gap: 10px; }
    .kev-header__logo-icon { height: 60px; }
    .kev-header__logo-word { height: 48px; }
}

@media (max-width: 1100px) {
    .kev-footer__main { grid-template-columns: 220px repeat(2, 1fr); }
}

@media (max-width: 992px) {
    :root { --kev-header-h: 84px; }
    .kev-burger { display: inline-flex; }
    /* Menü fixed panele döndüğü için ızgaradan çıkar; kalan üç öğe:
       logo · CTA · hamburger */
    .kev-header__inner { padding-inline: var(--space-4); gap: var(--space-3); }
    .kev-header__cta { justify-self: end; }
    .kev-burger { justify-self: end; }
    .kev-header__logo { border-bottom: 0; padding-block: 10px; gap: 10px; }
    .kev-header__logo-icon { height: 46px; }
    .kev-header__logo-word { height: 38px; }

    .kev-nav {
        position: fixed; inset: var(--kev-header-h) 0 auto 0;
        /* Masaüstündeki `justify-self:center` sabit konumlu panelde de
           uygulanıp paneli daraltıyor — mobilde tam genişliğe zorlanır. */
        justify-self: stretch; width: auto;
        margin: 0; display: none;
        background: var(--kev-cream); border-bottom: 1px solid rgb(142 113 78 / .18);
        max-height: calc(100dvh - var(--kev-header-h));
        overflow-y: auto; padding: var(--space-4) var(--space-5);
        box-shadow: var(--kev-shadow-lg); z-index: 120;
    }
    .kev-nav[data-open="true"] { display: block; }
    .kev-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .kev-nav__item { border-bottom: 1px solid rgb(142 113 78 / .15); }
    .kev-nav__label { justify-content: space-between; }
    .kev-nav__link { display: block; flex: 1 1 auto; padding: 14px 0; border-bottom: 0; }

    /* ---- Mobil: iki seviye de AKORDEON (hover yok, yalnızca tıklama) ---- */
    .kev-nav__toggle { width: 44px; height: 44px; font-size: 14px; }
    .kev-nav__sub, .kev-nav__sub2 {
        position: static; box-shadow: none; border: 0;
        /* `nav ul ul` 250px dayatıyor — akordeonda tam genişlik olmalı */
        width: auto; max-width: none; min-width: 0;
        background: transparent; transform: none;
        /* Kapalıyken yer kaplamasın */
        display: none; opacity: 1; visibility: visible;
        padding: 0 0 var(--space-2) var(--space-4);
    }
    .kev-nav__item[data-open="true"] > .kev-nav__sub,
    .kev-nav__subitem[data-open="true"] > .kev-nav__sub2 { display: block; }
    /* Mobilde hover/focus ile AÇILMASIN — yalnız data-open */
    .kev-nav__item:hover > .kev-nav__sub,
    .kev-nav__item:focus-within > .kev-nav__sub,
    .kev-nav__subitem:hover > .kev-nav__sub2,
    .kev-nav__subitem:focus-within > .kev-nav__sub2 { display: none; }
    .kev-nav__item[data-open="true"] > .kev-nav__sub,
    .kev-nav__subitem[data-open="true"] > .kev-nav__sub2 { display: block; }

    .kev-nav__sub a, .kev-nav__sub2 a { padding: 11px 0; }
    .kev-nav__sublabel { padding-inline-end: 0; }
    .kev-nav__sublabel:hover { background: transparent; }
    .kev-nav__sublabel:hover > a,
    .kev-nav__sublabel:hover > .kev-nav__sublabel-text { color: var(--kev-text); }
    .kev-nav__sub a:hover, .kev-nav__sub2 a:hover { background: transparent; color: var(--kev-green); }
    .kev-nav__subitem { border-top: 1px solid rgb(142 113 78 / .12); }
    /* Hamburger sağ kenara yaslanır; CTA görünürse hemen solunda kalır */
    .kev-burger { margin-inline-start: auto; }
    .kev-header__cta .kev-btn { height: 38px; padding-inline: 16px; font-size: .8125rem; }

    .kev-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .kev-talks { grid-template-columns: 1fr; }
    .kev-intro__grid { grid-template-columns: 1fr; gap: var(--space-6); }
    .kev-hero { min-height: 560px; }
    .kev-quote { padding-inline: var(--space-6); }
    .kev-quote::before, .kev-quote::after { width: 120px; opacity: .8; }
    .kev-footer__follow-title, .kev-footer__social { text-align: left; justify-content: flex-start; }
}

@media (max-width: 768px) {
    :root { --kev-section-space: 56px; }
    .kev-hero { min-height: 460px; padding-block: var(--space-8); }
    .kev-hero__slide { background-image: url('/assets/brand/kev-banner-768.webp'); }
    .kev-quote::before, .kev-quote::after { display: none; }
    .kev-quote { padding-block: var(--space-6); }
    .kev-footer__main { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
    .kev-hero__dots { bottom: 22px; }
    .kev-talks__item { grid-template-columns: 96px 1fr 22px; gap: var(--space-3); }
    .kev-talks__item > img:first-child,
    .kev-talks__item > .kev-talks__thumb { width: 96px; height: 56px; }

    /* ---- Mobil dikey ritim: masaüstünün ~%60'ı ----
       62/48/40/96 → 38/28/24/56. Özellikle tanıtım bandı sonrasındaki
       büyük boşluk bu yüzden ferah duruyordu. */
    .kev-rule          { margin: 38px auto 28px; }
    .kev-section-head  { margin: 0 0 24px; }
    /* token mobilde 56px; --lead ve --sayfa birlikte iner */
    .kev-section--quote{ padding-block: 38px; }
    .kev-section__tail { margin-block: 28px 56px; }
    .kev-intro         { padding-block: 56px; }

    /* Ayraçlar mobilde çok küçük/silik kalıyordu: SVG'nin oranı 17:1
       olduğu için 327px genişlikte 19px yüksekliğe düşüyordu.
       object-fit:cover ile ortadaki motif büyütülüp yanlar kırpılıyor. */
    .kev-rule {
        height: 34px; width: 100%; object-fit: cover; object-position: center;
        opacity: 1;
    }
}

@media (max-width: 576px) {
    .kev-grid--3, .kev-grid--2 { grid-template-columns: 1fr; }
    /* ⚠ Kümenin TAMAMI gizlenmez — içinde arama ikonu da var ve mobilde
       aramaya erişim kapanıyordu. Yalnız "Online Kayıt" butonu gizlenir;
       o işlev hamburger menüde zaten mevcut. */
    .kev-header__cta .kev-btn { display: none; }
    .kev-header__logo-icon { height: 40px; }
    .kev-header__logo-word { height: 33px; }
    .kev-card__body { padding: 44px var(--space-4) calc(var(--space-5) + 38px + var(--space-3)); }
    /* Sayfalama: 7 öğe (‹ 1 2 3 … 13 ›) 44px'te 356px tutuyor ve 327px'lik
       kaba sığmayıp "sonraki" oku alt satıra düşürüyordu. 38px + 6px aralık = 302px. */
    .kev-pager { gap: 6px; }
    .kev-pager__item { min-width: 38px; height: 38px; padding: 0 var(--space-2); }

    /* ---- Footer: tek kolon, ortalanmış ---- */
    .kev-footer__main {
        grid-template-columns: 1fr; gap: var(--space-6);
        justify-items: center; text-align: center;
    }
    .kev-footer__brand { justify-content: center; }
    .kev-footer__brand img { width: 132px; }        /* mobilde daha küçük */
    .kev-footer__col { width: 100%; }
    .kev-footer__list { justify-items: center; }
    .kev-footer__member {
        flex-direction: column; align-items: center; text-align: center;
    }
    .kev-footer__member-title { justify-content: center; }
    .kev-footer__follow-title, .kev-footer__social { text-align: center; justify-content: center; }
    .kev-footer__bottom { flex-direction: column; text-align: center; gap: var(--space-3); }
}

/* Hareket hassasiyeti */
@media (prefers-reduced-motion: reduce) {
    body.kev *, body.kev *::before, body.kev *::after {
        animation-duration: .001ms !important; transition-duration: .001ms !important;
    }
    .kev-card:hover { transform: none; }
}

/* ============================================================
   12. SİTE İÇİ ARAMA
   ------------------------------------------------------------
   Marka dili sözleşmesi:
   - Arama ikonu CTA ile YARIŞMAZ. Menü linkleriyle aynı sadelikte
     (çerçevesiz yeşil ikon), hover'da altın — "Online Kayıt"
     tek başına birincil eylem olarak kalır.
   - Kutular `--kev-radius`, kartlar `.kev-card` ile aynı gölge ve
     hover davranışı.
   - Odak halkası ALTIN (yeşil halka birincil butonla karışıyordu).
   Katman header'ın İÇİNDE durur; ayrı z-index yarışı çıkmaz
   (bkz. CLAUDE.md — katman sözleşmesi).
   ============================================================ */

/* ---- Header ikonu ---- */
.kev-arama-ac {
    display: inline-grid; place-items: center;
    width: 42px; height: 42px; flex: 0 0 auto;
    margin-inline-end: var(--space-4);      /* CTA ile nefes boşluğu */
    background: none; border: 0; padding: 0;
    color: var(--kev-green); font-size: 1.0625rem; cursor: pointer;
    border-radius: var(--kev-radius-sm);
    transition: color .2s, background .2s;
}
.kev-arama-ac:hover,
.kev-arama-ac[aria-expanded="true"] {
    color: var(--kev-gold);
    background: rgb(142 113 78 / .1);
}

/* ---- Açılır katman ---- */
.kev-arama {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--kev-cream);
    border-top: 1px solid rgb(142 113 78 / .18);
    border-bottom: 2px solid var(--kev-gold);   /* sayfa başlık bandıyla aynı bitiş */
    box-shadow: var(--kev-shadow-lg);
    padding: var(--space-5) 0 var(--space-6);
    overflow: hidden;
}
.kev-arama[hidden] { display: none; }

/* Katmanın zemininde marka deseni — çok soluk, okumayı bozmaz */
.kev-arama::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-color: var(--kev-green-pattern); opacity: .07;
    -webkit-mask-image: url('/assets/brand/kev-pattern-solid.png');
    mask-image: url('/assets/brand/kev-pattern-solid.png');
    -webkit-mask-size: var(--kev-pattern-size) var(--kev-pattern-size);
    mask-size: var(--kev-pattern-size) var(--kev-pattern-size);
    -webkit-mask-repeat: repeat; mask-repeat: repeat;
}
.kev-arama > * { position: relative; }

/* ---- Arama kutusu (katman + sayfa ortak) ---- */
.kev-arama__form,
.kev-arama-sayfa__form {
    display: flex; align-items: center; gap: var(--space-3);
    background: var(--kev-surface);
    border: 1px solid rgb(142 113 78 / .35);
    border-radius: var(--kev-radius);
    padding: 6px 8px 6px 18px;
    transition: border-color .2s, box-shadow .2s;
}
.kev-arama__form:focus-within,
.kev-arama-sayfa__form:focus-within {
    border-color: var(--kev-gold);
    box-shadow: 0 0 0 3px rgb(142 113 78 / .16);
}
.kev-arama__ikon { color: var(--kev-gold); flex: 0 0 auto; }

.kev-arama__girdi {
    flex: 1 1 auto; min-width: 0;
    border: 0 !important; background: none !important;
    min-height: 46px; padding: 0 !important;
    font-family: var(--font-sans); font-size: 1.0625rem; color: var(--kev-text);
}
/* Kutunun kendi odak çerçevesi var; alan ayrıca halka çizmez */
.kev-arama__girdi:focus { outline: none; box-shadow: none !important; border: 0 !important; }
.kev-arama__girdi::placeholder { color: rgb(90 107 96 / .65); }
/* Tarayıcının kendi temizleme çarpısı, kapatma düğmemizle iki × üretiyordu */
.kev-arama__girdi::-webkit-search-cancel-button,
.kev-arama__girdi::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.kev-arama__kapat {
    flex: 0 0 auto; background: none; border: 0; cursor: pointer;
    color: var(--kev-text-muted); width: 40px; height: 40px;
    border-radius: var(--kev-radius-sm); transition: color .2s, background .2s;
}
.kev-arama__kapat:hover { color: var(--kev-gold); background: rgb(142 113 78 / .1); }

/* ---- Tip rozeti: sitedeki hap dili, tip başına PALETTEN ayrım ---- */
.kev-arama__tip {
    align-self: start; justify-self: start;
    font-family: var(--font-sans); font-size: .6875rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: .07em; white-space: nowrap;
    padding: 3px 12px; border-radius: 999px;
    border: 1px solid var(--rozet-kenar, rgb(142 113 78 / .4));
    color: var(--rozet-renk, var(--kev-gold));
    background: var(--rozet-zemin, rgb(142 113 78 / .07));
}
.kev-arama__tip[data-tip="sayfa"]    { --rozet-renk: var(--kev-gold);       --rozet-kenar: rgb(142 113 78 / .45); --rozet-zemin: rgb(142 113 78 / .08); }
.kev-arama__tip[data-tip="faaliyet"] { --rozet-renk: var(--kev-green);      --rozet-kenar: rgb(7 122 84 / .4);    --rozet-zemin: rgb(7 122 84 / .07); }
.kev-arama__tip[data-tip="sohbet"]   { --rozet-renk: var(--kev-green-band); --rozet-kenar: rgb(62 96 76 / .45);   --rozet-zemin: rgb(62 96 76 / .09); }

/* ---- Katman sonuç satırı ---- */
.kev-arama__sonuc { margin-top: var(--space-4); max-height: 60vh; overflow-y: auto; }
.kev-arama__satir {
    display: grid; grid-template-columns: auto 1fr; gap: 3px var(--space-3);
    grid-template-areas: "tip baslik" ".   ozet";
    padding: 12px 14px; border-radius: var(--kev-radius);
    text-decoration: none; color: inherit;
    border: 1px solid transparent; transition: background .2s, border-color .2s;
}
.kev-arama__satir:hover {
    background: var(--kev-surface); border-color: rgb(142 113 78 / .28);
    text-decoration: none;
}
.kev-arama__satir .kev-arama__tip { grid-area: tip; }
.kev-arama__baslik {
    grid-area: baslik; font-family: var(--font-sans); font-weight: 500;
    font-size: 1.0625rem; color: var(--kev-green);
}
.kev-arama__ozet {
    grid-area: ozet; font-size: .875rem; color: var(--kev-text-muted); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- "İlgili içerikler" ayracı — bölüm başlığı ölçeğiyle ---- */
.kev-arama__ayrac,
.kev-arama-sayfa__ayrac {
    display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
    margin: var(--space-5) 0 var(--space-3); padding-top: var(--space-4);
    border-top: 1px solid rgb(142 113 78 / .22);
    font-family: var(--font-heading); font-weight: 700;
    font-size: var(--fs-card); color: var(--kev-text-warm);
}
.kev-arama__kavram {
    font-family: var(--font-sans); font-size: .8125rem; font-weight: 400;
    color: var(--kev-gold); background: rgb(142 113 78 / .1);
    border: 1px solid rgb(142 113 78 / .28);
    border-radius: 999px; padding: 2px 12px;
}

.kev-arama__tumu {
    display: block; text-align: center; margin-top: var(--space-3);
    padding: 14px; font-weight: 500; color: var(--kev-green);
    border-top: 1px solid rgb(142 113 78 / .18);
    transition: color .2s;
}
.kev-arama__tumu:hover { color: var(--kev-gold); text-decoration: none; }

/* ---- Katman: boş sonuç ---- */
.kev-arama__bos {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
    text-align: center; padding: var(--space-6) var(--space-4); color: var(--kev-text-muted);
}
.kev-arama__bos strong {
    font-family: var(--font-heading); font-weight: 700;
    font-size: var(--fs-card); color: var(--kev-text);
}

/* ============================================================
   /arama sonuç sayfası
   ============================================================ */
.kev-arama-sayfa__form { margin-bottom: var(--space-5); }
.kev-arama-sayfa__form .kev-btn { flex: 0 0 auto; }

.kev-arama-sayfa__sayi { color: var(--kev-text-muted); margin-bottom: var(--space-4); }

.kev-arama-sayfa__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }

/* Kartlar `.kev-card` kalıbıyla AYNI: aynı radius, aynı gölge, aynı
   hover (4px yükselme + büyük gölge). Kenar rengi hover'da DEĞİŞMEZ —
   yeşil çerçeve seçim durumu izlenimi veriyordu. */
.kev-arama-sayfa__liste > li > a {
    display: grid; grid-template-columns: auto 1fr; gap: 6px var(--space-4);
    grid-template-areas: "tip baslik" ".   ozet";
    background: var(--kev-surface);
    border: 1px solid rgb(142 113 78 / .28);
    border-radius: var(--kev-radius-lg);
    box-shadow: var(--kev-shadow);
    padding: var(--space-5);
    text-decoration: none; color: inherit;
    transition: transform .2s, box-shadow .2s;
}
.kev-arama-sayfa__liste > li > a:hover {
    transform: translateY(-4px); box-shadow: var(--kev-shadow-lg);
    text-decoration: none;
}
.kev-arama-sayfa__liste .kev-arama__tip { grid-area: tip; }
.kev-arama-sayfa__liste--ilgili > li > a { background: var(--kev-cream-warm); }

.kev-arama-sayfa__baslik {
    grid-area: baslik; font-family: var(--font-sans); font-weight: 500;
    font-size: var(--fs-card); color: var(--kev-green); line-height: 1.3;
}
.kev-arama-sayfa__ozet {
    grid-area: ozet; color: var(--kev-text-muted); font-size: .9375rem; line-height: 1.6;
}

/* ---- Sayfa: boş sonuç ve ipucu ---- */
.kev-arama-sayfa__bos,
.kev-arama-sayfa__ipucu {
    text-align: center; padding: var(--space-8) var(--space-4);
    display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
}
.kev-arama-sayfa__bos i { font-size: 2.5rem; color: rgb(142 113 78 / .4); }
.kev-arama-sayfa__bos h2 {
    font-family: var(--font-heading); font-weight: 900;
    font-size: var(--fs-section); color: var(--kev-green);
}
.kev-arama-sayfa__bos p,
.kev-arama-sayfa__ipucu p { max-width: 46ch; color: var(--kev-text-muted); }

/* Örnek arama hapları — rozet diliyle aynı aile */
.kev-arama-sayfa__ornekler { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.kev-arama-sayfa__ornekler a {
    border: 1px solid rgb(142 113 78 / .35); border-radius: 999px;
    padding: 7px 18px; font-size: .9375rem; font-weight: 500;
    color: var(--kev-text-warm); background: var(--kev-surface); text-decoration: none;
    transition: border-color .2s, color .2s, background .2s;
}
.kev-arama-sayfa__ornekler a:hover {
    border-color: var(--kev-gold); color: var(--kev-gold);
    background: rgb(142 113 78 / .07); text-decoration: none;
}

@media (max-width: 992px) {
    /* Mobilde de AYNI dil: çerçevesiz ikon, yalnız boşluk küçülür */
    .kev-arama-ac { margin-inline-end: var(--space-2); width: 40px; height: 40px; }
    .kev-arama { padding: var(--space-4) 0 var(--space-5); }
    .kev-arama__sonuc { max-height: calc(100dvh - var(--kev-header-h) - 150px); }
    .kev-arama__satir,
    .kev-arama-sayfa__liste > li > a {
        grid-template-columns: 1fr; grid-template-areas: "tip" "baslik" "ozet";
    }
    .kev-arama-sayfa__liste > li > a { padding: var(--space-4); }
    .kev-arama-sayfa__form { flex-wrap: wrap; }
    .kev-arama-sayfa__form .kev-btn { width: 100%; }
}


/* ============================================================
   13. KISA SAYFALARDA FOOTER KONUMU
   ------------------------------------------------------------
   Ölçüldü (03.08.2026): /Kayit/Basarili ve 404 sayfasında footer
   900px'lik ekranda 746px'te başlıyordu — koyu yeşil bant ekranın
   ortasına tırmanıyor ve sayfa yarım kalmış görünüyordu.

   Çözüm gövdeyi flex'e ÇEVİRMEZ (bitişik margin'lerin çökmesi tüm
   sitede dikey ritmi değiştirirdi). `<main id="kev-main">` zaten
   var; ona alt sınır vermek yeter: header akışta yer kapladığı için
   `100dvh - header` yüksekliğindeki bir main, footer'ı her koşulda
   ekranın altına iter. Uzun sayfalarda kural etkisizdir.
   ============================================================ */
body.kev #kev-main { min-height: calc(100dvh - var(--kev-header-h)); }

/* `dvh` desteklenmeyen eski motorlarda `vh`'ye düş */
@supports not (height: 100dvh) {
    body.kev #kev-main { min-height: calc(100vh - var(--kev-header-h)); }
}

/* ─── Hakkımızda: hedefi olan bölümler tıklanabilir ────────────────────────
   Yedi bölümün üçünün gideceği sayfa belli; kalan dördü vakıf cevabını
   bekliyor. İşareti olmayan bölüm "bozuk" değil, bilgi kartıdır — ayrım
   altın ok işaretiyle kuruluyor (Faaliyetler kartlarındaki aynı işaret).
   Renkler palette zaten tanımlı; yeni renk eklenmedi. */
body.kev .kev-bolum-gorsel {
    display: block;
    overflow: hidden;
    border-radius: 8px;
}

body.kev .kev-bolum-gorsel img {
    display: block;
    width: 100%;
    transition: transform .35s ease;
}

body.kev .kev-bolum-gorsel:hover img,
body.kev .kev-bolum-gorsel:focus-visible img {
    transform: scale(1.04);
}

body.kev .kev-bolum-baslik {
    color: inherit;
    text-decoration: none;
}

body.kev .kev-bolum-baslik:hover,
body.kev .kev-bolum-baslik:focus-visible {
    color: var(--kev-gold);
    text-decoration: none;
}

body.kev .kev-bolum-devami {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--space-2);
    color: var(--kev-green);
    font-weight: 700;
    text-decoration: none;
}

body.kev .kev-bolum-devami span {
    transition: color .2s ease;
}

body.kev .kev-bolum-devami img {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    transition: transform .25s ease;
}

body.kev .kev-bolum-devami:hover span,
body.kev .kev-bolum-devami:focus-visible span {
    color: var(--kev-gold);
}

body.kev .kev-bolum-devami:hover img,
body.kev .kev-bolum-devami:focus-visible img {
    transform: translateX(4px);
}

/* ─── Kişi kartları: Yönetim Kurulu ve Hocalarımız ────────────────────────
   Fotoğraflar farklı kaynaklardan ve farklı oranlarda geliyor (bir kısmı
   henüz yer tutucu). Çerçeve sabit kare; görsel kırpılarak oturuyor, böylece
   bir satırdaki kartlar eşit yükseklikte kalıyor ve gerçek fotoğraflar
   geldiğinde düzen değişmiyor.

   Tema `.team-box:hover .team-img img` ile scale(1.05) uyguluyor; kırpma
   çerçevesi overflow:hidden olduğu için büyüme dışarı taşmaz. */
body.kev .team-img {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background-color: var(--kev-green-dark);
}

body.kev .team-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* `aspect-ratio` desteklenmeyen eski motorlarda eski kutu hesabına düş */
@supports not (aspect-ratio: 1) {
    body.kev .team-img {
        height: 0;
        padding-bottom: 100%;
    }

    body.kev .team-img img {
        position: absolute;
        inset: 0;
    }
}

/* Satır sonlarında kartlar eşit yükseklikte bitsin: kolon yüksekliği kartın
   tamamına yayılır, görsel çerçevesi kare olduğu için bir satırdaki tüm
   avatarlar aynı hizada biter.

   İsim/ünvan plakası (`.team-info`) BİLEREK büyümez; `flex` verilmediği için
   `0 1 auto` kalır ve kutu içeriği kadar yer kaplar. Temanın negatif
   `margin-top`'u (v2'de -2.03rem, sade kalıpta -1.56rem) ile avatarın alt
   kenarına binen kompakt beyaz plaka görünümü buradan gelir.
   `flex: 1 1 auto` yazılırsa plaka kartın alt boşluğunu doldurmak için uzar
   ve bu görünüm kaybolur — kaldırıldı, karar 07.11.2026.
   Plakaya sabit yükseklik de verilmez: uzun isim/ünvan iki satıra düştüğünde
   kutu kendiliğinden büyür. */
body.kev .team-box {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ─── Foto galeri: altyazı her zaman görünür ───────────────────────────────
   Tema `.gallery-info` katmanını `opacity:0; visibility:hidden` ile kuruyor
   ve yalnızca `.gallery-box:hover` anında açıyor. Foto altı yazısı o katmanın
   içindeydi; dokunmatik ekranda hover olmadığı için telefonda HİÇ
   görünmüyordu. `visibility:hidden` tıklamayı da kestiği için büyütme
   bağlantısı da çalışmıyordu (08.11.2026).

   Çözüm: altyazı görselin altında ayrı bir satıra çıktı, büyütme bağlantısı
   görselin kendisi oldu. Hover katmanı yalnızca büyütme işaretini taşıyor ve
   tıklamayı alttaki bağlantıya geçiriyor.

   ⚠ `pointer-events` iki yere birlikte verilir: hem `.gallery-info` katmanına
   hem temanın `.gallery-box::before` karartma katmanına. İkincisi atlanırsa
   görsel, hover sırasında görünmez bir katmanla kaplanır ve tıklama bağlantıya
   ulaşmaz. */
body.kev .kev-galeri-oge {
    /* `figure`nin tarayıcı/Bootstrap varsayılan margin'i sıfırlanır; dikey
       boşluk kart ritminden (tema `.gallery-box` 1.875rem) devralınır. */
    margin: 0 0 1.875rem;
}

body.kev .kev-galeri-oge .gallery-box { margin-bottom: 0; }

body.kev .kev-galeri-oge .gallery-box::before,
body.kev .kev-galeri-oge .gallery-info { pointer-events: none; }

body.kev .kev-galeri-oge__bag { line-height: 0; }

body.kev .kev-galeri-altyazi {
    margin: var(--space-3) 0 0;
    color: var(--kev-text-muted);
    font-size: .9375rem;
    line-height: 1.5;
    text-align: center;
}

/* ─── Sayı bandı (ana sayfa, Admin ▸ İstatistikler) ────────────────────────
   Alıntı bandıyla aynı dil: #3E604C zemin, krem metin, altın ikon.
   Yeni renk eklenmedi; dördü de palette tanımlı.

   Sütun sayısı SABİT DEĞİL: vakıf admin'den üç de girebilir altı da.
   `auto-fit` + `minmax` ile kaç kayıt olursa olsun satır dengeli dolar,
   telefonda tek sütuna iner. İçerik bileşeni olduğu için z-index TAŞIMAZ
   (bkz. CLAUDE.md katman sözleşmesi).

   Alt sınır 160px ÖLÇÜLEREK seçildi: 1200px'lik kapta (padding 48, gap 24)
   altı sütun 1080px ister, sığar. 180px'te altıncı kayıt tek başına alt
   satıra düşüyordu (5+1). Eski tema bandı da en çok beş sütun varsayıyordu;
   160px altıyı da tek satırda tutar. */
body.kev .kev-sayilar {
    background: var(--kev-green-band);
    color: var(--kev-text-on-dark);
    border-radius: var(--kev-radius);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-5);
    padding: var(--space-6) var(--space-5);
    text-align: center;
}

body.kev .kev-sayilar__oge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

/* İkon ölçüsü SARMALAYICI span'dan verilir. `i` etiketine font-family
   yazılmaz: Font Awesome ve Flaticon `::before` üzerinden çalışıyor,
   aile ezilirse ikonlar kırılır (bkz. CLAUDE.md). */
body.kev .kev-sayilar__ikon {
    font-size: 1.875rem;
    line-height: 1;
    color: var(--kev-gold-soft);
}

body.kev .kev-sayilar__deger {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
}

body.kev .kev-sayilar__baslik {
    font-size: .9375rem;
    line-height: 1.4;
    opacity: .85;
}

/* ─── Kurumsal kart görselleri: dönüşümlü gösterim ─────────────────────────
   Üç kartın görselleri admin'den yönetiliyor (Admin ▸ Ana Sayfa Kartları).
   Kart başına "sabit" ya da "dönüşümlü" seçilebiliyor.

   JAVASCRIPT YOK. Bu projede tam ekran örtü katmanının JS'e bağlanması
   siteyi bir kez kapattı (`#preloader`, bkz. CLAUDE.md); görsel döngüsünü
   de script'e bağlamaya gerek yok. Script hiç çalışmasa bile ilk görsel
   görünür kalır.

   Nasıl çalışıyor: görseller üst üste yığılır, hepsine AYNI geçiş
   animasyonu verilir, sıraları `animation-delay` ile kaydırılır.
   `animation-fill-mode: backwards` sayesinde sırası gelmemiş görsel
   gecikme boyunca 0 opaklıkta bekler.

   ⚠ Kare yüzdeleri görsel SAYISINA bağlı (görünür pay = 100/N), bu yüzden
   N = 2…6 için ayrı `@keyframes` yazıldı. View de en çok altı görsel
   basar; fazlası admin ekranında uyarı ile bildirilir.

   İlk görselin gecikmesi -.8s: sayfa açıldığında 0 opaklıktan başlayıp
   yanıp sönmesin diye animasyon kendi iç zamanında solma payı kadar
   ileriden başlatılır. */

body.kev [class*="kev-kart-gorseller--d"] { position: relative; display: block; }

/* İlk görsel akışta kalır ve kartın yüksekliğini verir; diğerleri üstüne
   biner. Kutu ölçüsü `.kev-card__media img` kuralından gelir (324/358). */
body.kev [class*="kev-kart-gorseller--d"] img + img {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover;
}

body.kev [class*="kev-kart-gorseller--d"] img {
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
}

/* Sıra `:nth-child` ile veriliyor — inline stil yazılmaz (CLAUDE.md).
   Pencere 6 sn, çapraz geçiş .8 sn. */
body.kev [class*="kev-kart-gorseller--d"] img:nth-child(1) { animation-delay: -0.8s; }
body.kev [class*="kev-kart-gorseller--d"] img:nth-child(2) { animation-delay:  5.2s; }
body.kev [class*="kev-kart-gorseller--d"] img:nth-child(3) { animation-delay: 11.2s; }
body.kev [class*="kev-kart-gorseller--d"] img:nth-child(4) { animation-delay: 17.2s; }
body.kev [class*="kev-kart-gorseller--d"] img:nth-child(5) { animation-delay: 23.2s; }
body.kev [class*="kev-kart-gorseller--d"] img:nth-child(6) { animation-delay: 29.2s; }

body.kev .kev-kart-gorseller--d2 img { animation-name: kev-kart-d2; animation-duration: 12s; }
body.kev .kev-kart-gorseller--d3 img { animation-name: kev-kart-d3; animation-duration: 18s; }
body.kev .kev-kart-gorseller--d4 img { animation-name: kev-kart-d4; animation-duration: 24s; }
body.kev .kev-kart-gorseller--d5 img { animation-name: kev-kart-d5; animation-duration: 30s; }
body.kev .kev-kart-gorseller--d6 img { animation-name: kev-kart-d6; animation-duration: 36s; }

@keyframes kev-kart-d2 {
    0% { opacity: 0 } 6.667% { opacity: 1 } 50% { opacity: 1 } 56.667% { opacity: 0 } 100% { opacity: 0 }
}
@keyframes kev-kart-d3 {
    0% { opacity: 0 } 4.444% { opacity: 1 } 33.333% { opacity: 1 } 37.778% { opacity: 0 } 100% { opacity: 0 }
}
@keyframes kev-kart-d4 {
    0% { opacity: 0 } 3.333% { opacity: 1 } 25% { opacity: 1 } 28.333% { opacity: 0 } 100% { opacity: 0 }
}
@keyframes kev-kart-d5 {
    0% { opacity: 0 } 2.667% { opacity: 1 } 20% { opacity: 1 } 22.667% { opacity: 0 } 100% { opacity: 0 }
}
@keyframes kev-kart-d6 {
    0% { opacity: 0 } 2.222% { opacity: 1 } 16.667% { opacity: 1 } 18.889% { opacity: 0 } 100% { opacity: 0 }
}

/* Hareket azaltma tercihi: döngü durur, ilk görsel sabit kalır.
   Üstteki görseller tamamen gizlenir ki altta kalan ilk görsel görünsün. */
@media (prefers-reduced-motion: reduce) {
    body.kev [class*="kev-kart-gorseller--d"] img { animation: none; }
    body.kev [class*="kev-kart-gorseller--d"] img + img { opacity: 0; }
}