/* ==========================================================================
   ÇEVRECİ ÇOCUK PLATFORMU — Ana Stil Dosyası
   --------------------------------------------------------------------------
   Renkleri ve ölçüleri değiştirmek için aşağıdaki :root bloğu yeterli.
   ========================================================================== */

/* --------------------------------------------------------------------------
   VARSAYILAN DEĞERLER
   --------------------------------------------------------------------------
   Bu blok yalnızca varsayılanları tanımlar. Panelde "Genel Ayarlar → Görünüm"
   sekmesinden yapılan her değişiklik sayfanın <head> bölümüne ayrı bir :root
   bloğu olarak basılır ve buradaki değerleri ezer.

   Yani rengi/boyutu değiştirmek için bu dosyayı düzenlemene gerek yok —
   panelden yapabilirsin. Buradaki değerler yalnızca "sıfırlanmış" hâldir.
   -------------------------------------------------------------------------- */

:root {
    /* --- Renkler --- */
    --accent: #2e7d32;             /* Ana vurgu rengi (orijinal GİİP turuncusu: #d54900) */
    --accent-hover: #43a047;
    --text: #727272;               /* Gövde metni */
    --heading: #000000;            /* Başlıklar */
    --nav: #333333;                /* Menü linkleri */
    --border: #e9e9e9;
    --bg-light: #f8f8f8;           /* Sayfa başlığı bandı */
    --footer-bg: #242424;
    --footer-title: #d9d9d9;
    --footer-link: #9a9a9a;
    --copyright-bg: #0f0f0f;

    /* --- Tipografi --- */
    --font-heading-name: 'Montserrat';
    --font-body-name: 'PT Sans';
    --font-body: var(--font-body-name), -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --font-heading: var(--font-heading-name), -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

    --font-size: 14px;
    --line-height: 24px;
    --h1-size: 24px;
    --h2-size: 22px;
    --h3-size: 18px;
    --nav-size: 13px;
    --nav-letter-spacing: 0.2px;
    --hero-title-size: 44px;

    /* --- Ölçüler --- */
    --container: 1170px;
    --header-height: 74px;
    --radius: 2px;
    --section-space: 60px;
}

/* --------------------------------------------------------------------------
   Reset & Temel
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--font-size);
    line-height: var(--line-height);
    color: var(--text);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    border: 0;
    vertical-align: middle;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color .25s ease;
}

a:hover {
    color: var(--accent-hover);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 500;
    color: var(--heading);
    margin: 0 0 18px;
    line-height: 1.35;
}

h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
h4 { font-size: 16px; }
h5 { font-size: 15px; }
h6 { font-size: 14px; }

p {
    margin: 0 0 18px;
}

ul, ol {
    margin: 0 0 18px;
    padding-left: 20px;
}

/* ==========================================================================
   İÇERİĞE ATLA BAĞLANTISI

   Blade : resources/views/partials/icerige-atla.blade.php
   Hedef : <main id="content" tabindex="-1">

   Klavyeyle gezen ziyaretçi Sekme'ye ilk bastığında bunu görür ve tek
   tuşla ana içeriğe iner; yönetim çubuğunu, logoyu, yedi menü başlığını
   ve arama düğmesini her sayfada baştan geçmek zorunda kalmaz.

   --------------------------------------------------------------------------
   ⚠ display:none YOK — BİLİNÇLİ
   --------------------------------------------------------------------------
   display:none ya da visibility:hidden öğeyi erişilebilirlik ağacından
   siler: bağlantı Sekme sırasına hiç girmez, yani tam da işe yarayacağı
   anda yok olur. Bunun yerine ekran dışına alınıyor — görünmüyor ama
   odaklanılabiliyor.

   ⚠ Konum "fixed": sayfa kaydırılmışken de ekranın üstünde belirir.
   z-index yönetim çubuğunun (300) üstünde ki çubuk açıkken de görünsün.
   ========================================================================== */

.icerige-atla {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 400;
    /* Ekranın dışında bekliyor; odak gelince aşağı iniyor. */
    transform: translateY(-150%);
    padding: 11px 18px;
    border-radius: 0 0 var(--radius) 0;
    background: var(--accent);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 14px;
    text-decoration: none;
    transition: transform .18s ease;
}

/*
 | :focus-visible DEĞİL, :focus.
 |
 | Bağlantıya yalnızca klavyeyle ulaşılabiliyor (fareyle tıklanacak bir
 | hedefi yok, ekran dışında). Buna karşılık bazı tarayıcılar bir
 | bağlantıya odak verildiğinde :focus-visible'ı her zaman eşleştirmiyor;
 | :focus kullanmak bağlantının HER durumda görünmesini garantiliyor.
 */
.icerige-atla:focus {
    transform: translateY(0);
    color: #fff;
    outline: 2px solid #fff;
    outline-offset: -4px;
}

/* Odak hedefi olan <main> kendi çerçevesini çizmesin — ziyaretçi
   içeriğin tamamının seçildiğini sanmasın. Odak yine de oraya gidiyor,
   sonraki Sekme içerikteki ilk bağlantıya düşüyor. */
main:focus {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .icerige-atla {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Yerleşim  ·  ızgara sistemi ayrı bir bölümde (dosyanın sonuna bakın:
   "IZGARA · Bootstrap 5 uyumlu 12 kolon sistemi")
   -------------------------------------------------------------------------- */

.section {
    padding: var(--section-space) 0;
}

.section-title {
    text-align: center;
    margin-bottom: 40px;
}

.section-title h2 {
    font-size: calc(var(--h2-size) * 1.09);
    letter-spacing: .5px;
    margin: 0;
    text-transform: uppercase;
}

.section-title .divider {
    width: 46px;
    height: 3px;
    background: var(--accent);
    margin: 16px auto 0;
}

/* --------------------------------------------------------------------------
   Butonlar
   -------------------------------------------------------------------------- */

.btn {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 13px 30px;
    border: 0;
    border-radius: var(--radius);
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    transition: background .25s ease;
}

.btn:hover {
    background: var(--accent-hover);
    color: #fff;
}

/* --------------------------------------------------------------------------
   .btn-outline  ·  YALNIZCA KOYU/FOTOĞRAF ZEMİN İÇİN
   --------------------------------------------------------------------------
   Çerçevesi ve yazısı BEYAZ. Slider'ın üzerindeki düğme bunu kullanıyor ve
   orada doğru duruyor.

   ⚠ AÇIK ZEMİNDE KULLANMA. Beyaz üzerine beyaz olduğu için düğme görünmez
   olur; yalnızca fareyle üzerine gelindiğinde (zemin beyaza dönünce) yazı
   okunur hâle gelir. Belge bloğunda tam olarak bu yaşandı — açık zeminler
   için aşağıdaki .btn-cizgili var.
   -------------------------------------------------------------------------- */
.btn-outline {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
}

.btn-outline:hover {
    background: #fff;
    color: var(--heading);
}

/* --------------------------------------------------------------------------
   .btn-cizgili  ·  AÇIK ZEMİNDE İKİNCİL DÜĞME
   --------------------------------------------------------------------------
   Birincil düğmenin (dolu yeşil) yanında duran, ondan geri planda ama her
   zaman GÖRÜNÜR olan düğme. Belge bloğundaki "İndir" bunu kullanıyor.

   Çerçeve ve yazı vurgu renginde; üzerine gelindiğinde dolu yeşile dönüyor.
   Beklemede de, üzerine gelindiğinde de metin/zemin karşıtlığı yeterli.
   -------------------------------------------------------------------------- */
.btn-cizgili {
    background: transparent;
    border: 2px solid var(--accent);
    /* Dolu düğmeyle aynı yüksekliği tutsun: kenarlık 2px içeriden alınıyor. */
    padding: 11px 28px;
    color: var(--accent);
}

.btn-cizgili:hover,
.btn-cizgili:focus-visible {
    background: var(--accent);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
    position: sticky;
    /* Yönetim çubuğu açıksa header onun altına yapışır (bkz. admin-bar) */
    top: var(--admin-bar-h, 0px);
    z-index: 200;
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
}

.site-header .container {
    display: flex;
    align-items: center;
    min-height: var(--header-height);
}

.site-logo {
    order: 1;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: auto;
    padding: 12px 0;
}

.nav-bar-wrapper {
    order: 2;
}

.nav-search {
    order: 3;
}

.nav-toggle {
    order: 4;
}

.site-logo img {
    height: 46px;
    width: auto;
    display: block;
}

/* --- Ana menü --- */

.nav-bar {
    display: flex;
    align-items: center;
}

.site-navigation > ul {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-navigation > ul > li {
    position: relative;
    border-left: 1px solid var(--border);
}

.site-navigation > ul > li > a {
    display: flex;
    align-items: center;
    height: var(--header-height);
    padding: 0 18px;
    font-family: var(--font-heading);
    font-size: var(--nav-size);
    font-weight: 500;
    letter-spacing: var(--nav-letter-spacing);
    text-transform: uppercase;
    color: var(--nav);
    white-space: nowrap;
}

.site-navigation > ul > li > a:hover,
.site-navigation > ul > li.is-active > a,
.site-navigation > ul > li.has-active-child > a {
    color: var(--accent);
}

/* --- Alt menü --- */

.site-navigation .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    max-width: 380px;
    list-style: none;
    margin: 0;
    padding: 8px 0;
    background: #fff;
    border-top: 2px solid var(--accent);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
}

.site-navigation > ul > li:hover > .sub-menu,
.site-navigation > ul > li.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Sağ kenara taşan alt menüleri içeri al */
.site-navigation > ul > li:nth-last-child(-n+3) .sub-menu {
    left: auto;
    right: 0;
}

.site-navigation .sub-menu li a {
    display: block;
    padding: 9px 20px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--nav);
    border-bottom: 1px solid #f2f2f2;
}

.site-navigation .sub-menu li:last-child a {
    border-bottom: 0;
}

.site-navigation .sub-menu li a:hover,
.site-navigation .sub-menu li.is-active a {
    color: var(--accent);
    background: #fafafa;
    padding-left: 25px;
}

/* --- Arama --- */

.nav-search {
    display: flex;
    align-items: center;
    height: var(--header-height);
    padding: 0 4px 0 18px;
    border-left: 1px solid var(--border);
    background: none;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    color: var(--nav);
    cursor: pointer;
    font-size: 15px;
}

.nav-search:hover {
    color: var(--accent);
}

.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .97);
}

.search-overlay.is-open {
    display: flex;
}

.search-overlay form {
    display: flex;
    width: 100%;
    max-width: 640px;
    padding: 0 20px;
    border-bottom: 2px solid var(--accent);
}

.search-overlay input {
    flex: 1;
    padding: 14px 0;
    font-family: var(--font-heading);
    font-size: 22px;
    color: var(--heading);
    background: none;
    border: 0;
    outline: none;
}

.search-overlay button[type='submit'] {
    background: none;
    border: 0;
    font-size: 20px;
    color: var(--accent);
    cursor: pointer;
}

.search-close {
    position: absolute;
    top: 28px;
    right: 34px;
    font-size: 30px;
    line-height: 1;
    color: var(--heading);
    background: none;
    border: 0;
    cursor: pointer;
}

/* --- Mobil menü butonu --- */

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0;
    background: none;
    border: 1px solid var(--border);
    border-radius: 3px;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    margin: 0 auto;
    background: var(--nav);
    transition: transform .25s ease, opacity .25s ease;
}

.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Slider
   -------------------------------------------------------------------------- */

.hero-slider {
    position: relative;
    overflow: hidden;
    background: #eaeaea;
}

.hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease, visibility .8s;
}

.hero-slide.is-active {
    position: relative;
    opacity: 1;
    visibility: visible;
}

.hero-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .2) 60%, rgba(0, 0, 0, 0) 100%);
}

.hero-slide img.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Slider yüksekliği — TEK KAYNAK: --hero-h
   Kırılma noktalarında yalnızca bu değişken değiştirilir
   (bkz. "Responsive" bölümü).

   ⚠ BURAYA height YAZMA, min-height kalsın.
   Uzun bir başlık + açıklama + buton dar ekranda 360 pikseli aşabilir;
   min-height slider'ın büyümesine izin verir, height metni kırpardı.

   ⚠ Kırılma noktalarında da height YAZMA. min-height her zaman
   height'ı yener — bu yüzden eskiden mobildeki 420/360 px ölçüleri
   hiç uygulanmıyor, slider telefonda da 560 px kalıyordu. */
.hero-slider {
    --hero-h: 560px;
    min-height: var(--hero-h);
}

.hero-slide {
    /* Değişken .hero-slider'dan miras alınır — tek yerden yönetilir. */
    min-height: var(--hero-h);
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 620px;
    color: #fff;
}

.hero-content .subtitle {
    display: block;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 16px;
    opacity: .9;
}

.hero-content h2 {
    font-size: var(--hero-title-size);
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    margin: 0 0 18px;
}

.hero-content p {
    font-size: 17px;
    line-height: 28px;
    color: rgba(255, 255, 255, .9);
    margin-bottom: 28px;
}

/* --- Slider navigasyonu --- */

.hero-nav {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    font-size: 18px;
    color: #fff;
    background: rgba(0, 0, 0, .28);
    border: 0;
    cursor: pointer;
    transition: background .25s ease;
}

.hero-nav:hover {
    background: var(--accent);
}

.hero-nav.prev { left: 20px; }
.hero-nav.next { right: 20px; }

.hero-dots {
    position: absolute;
    bottom: 24px;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    justify-content: center;
    /* 13 px + 11 px'lik nokta = merkezler arası tam 24 px. Aşağıdaki
       dokunma alanları böylece bitişik oluyor, üst üste binmiyor. */
    gap: 13px;
}

.hero-dots button {
    position: relative;
    width: 11px;
    height: 11px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background .25s ease;
}

/* --------------------------------------------------------------------------
   ⚠ PARMAK 11 PİKSELLİK DAİREYİ TUTTURAMAZ
   --------------------------------------------------------------------------
   Nokta görsel bir işaret; dokunma hedefi olarak 11×11 fazla küçüktü
   (ölçüt 24×24). Dairenin kendisi büyütülürse slider'ın görünümü değişir,
   bu yüzden büyüyen şey görünmeyen bir katman: daire aynı, basılabilir
   alan 24 piksel.
   -------------------------------------------------------------------------- */
.hero-dots button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    transform: translate(-50%, -50%);
}

.hero-dots button.is-active {
    background: #fff;
}

/* --------------------------------------------------------------------------
   Üye logoları
   -------------------------------------------------------------------------- */

.members-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
}

.member-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 148px;
    padding: 22px 16px;
    background: #fff;
    text-align: center;
    transition: box-shadow .25s ease, transform .25s ease;
}

.member-item img {
    max-width: 100%;
    max-height: 62px;
    filter: grayscale(100%);
    opacity: .72;
    transition: filter .3s ease, opacity .3s ease;
}

/* Panelde "Sitede Görünecek Başlık" alanı doldurulduğunda basılır. */
.member-title {
    display: block;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: .2px;
    color: #6d6d6d;
    transition: color .3s ease;
}

.member-item:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .09);
    transform: translateY(-2px);
}

.member-item:hover img {
    filter: grayscale(0);
    opacity: 1;
}

.member-item:hover .member-title {
    color: var(--heading);
}

/* --------------------------------------------------------------------------
   Sayfa başlığı bandı
   -------------------------------------------------------------------------- */

.page-heading {
    padding: 38px 0 33px;
    background: var(--bg-light);
    border-bottom: 1px solid var(--border);
}

/*
   ⚠ BREADCRUMB BAŞLIĞIN ÜSTÜNDE, YANINDA DEĞİL.

   Eskiden ikisi aynı satırdaydı: başlık solda, breadcrumb sağda.
   Başlık uzadıkça aradaki boşluk kapanıyor ve iki metin birbirine
   yapışık görünüyordu — "Çevreci Çocuk Platformu Kuruluş Bildirgesini
   Paylaştı" gibi bir haber başlığında ikisi tek bir karmaşaya
   dönüşüyordu.

   Alt alta dizmek, başlık ne kadar uzarsa uzasın bu sorunu kökten
   bitiriyor; ayrıca okuma sırası da doğru oluyor: önce "neredeyim",
   sonra "bu sayfa ne".
*/
.page-heading .container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.page-heading h1 {
    margin: 0;
    font-size: var(--h1-size);
    font-weight: 500;
    color: var(--heading);
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
}

.breadcrumb li + li::before {
    content: '/';
    margin-right: 8px;
    color: #b5b5b5;
}

.breadcrumb a {
    color: var(--text);
}

.breadcrumb a:hover {
    color: var(--accent);
}

.breadcrumb .current {
    color: #a5a5a5;
}

/* --------------------------------------------------------------------------
   İçerik alanı
   -------------------------------------------------------------------------- */

.page-content {
    padding: 55px 0 65px;
}

.entry-content h2 {
    font-size: calc(var(--h2-size) * 0.91);
    margin-top: 34px;
}

.entry-content h3 {
    font-size: calc(var(--h3-size) * 0.94);
    margin-top: 28px;
}

.entry-content h2:first-child,
.entry-content h3:first-child {
    margin-top: 0;
}

.entry-content ul {
    padding-left: 18px;
    list-style: none;
}

.entry-content ul li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 9px;
}

.entry-content ul li::before {
    content: '';
    position: absolute;
    top: 9px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

.entry-content .lead {
    font-size: 16px;
    line-height: 28px;
    color: #5c5c5c;
}

blockquote {
    margin: 26px 0;
    padding: 18px 24px;
    border-left: 3px solid var(--accent);
    background: var(--bg-light);
    font-size: 15px;
    color: #5c5c5c;
}

/* --------------------------------------------------------------------------
   Ekip kartları (kurullar, komisyon başkanı)
   -------------------------------------------------------------------------- */

.team-grid {
    /* Kolonlar artık ızgara sınıflarıyla (row / col-*) kuruluyor;
       burada sadece dikey aralık kaldı. Bkz. pages/team.blade.php */
    --bs-gutter-y: 34px;
}

.team {
    text-align: center;
}

.team header {
    position: relative;
    overflow: hidden;
    background: var(--bg-light);
}

.team header img {
    width: 100%;
    display: block;
}

.team .hover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 22px;
    background: rgba(46, 125, 50, .93);
    opacity: 0;
    transition: opacity .3s ease;
}

.team:hover .hover,
.team:focus-within .hover {
    opacity: 1;
}

.team .hover p {
    margin: 0;
    font-size: 13px;
    line-height: 21px;
    color: #fff;
    text-align: left;
    max-height: 100%;
    overflow: auto;
}

.team h2 {
    margin: 18px 0 4px;
    font-size: calc(var(--h2-size) * 0.68);
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.team em {
    display: block;
    font-size: 13px;
    font-style: normal;
    color: var(--accent);
}

/* Komisyon başkanı — sayfanın üstünde, geniş kart */
.commission-chair {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 36px;
    align-items: start;
    margin-top: 36px;
    padding-top: 36px;
    border-top: 1px solid var(--border);
}

.commission-chair .team header {
    background: var(--bg-light);
}

.commission-chair .chair-info h3 {
    margin-bottom: 4px;
    font-size: calc(var(--h3-size) * 1.0);
    text-transform: uppercase;
}

.commission-chair .chair-info .role {
    display: block;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--accent);
}

/* --------------------------------------------------------------------------
   Komisyon üyeleri — başkanın altındaki kart ızgarası
   --------------------------------------------------------------------------
   Görünüm : resources/views/pages/commission.blade.php
   Kart    : partials/team-card.blade.php (kurul sayfasıyla AYNI kart)

   Izgaranın kendisi .team-grid ile geliyor; burada yalnızca bölümün
   üst boşluğu ve başlığı tanımlı. Kartların kendi stilleri ".team"
   bölümünde — iki sayfa da aynı görünümü paylaşsın.
   -------------------------------------------------------------------------- */

.commission-members {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 1px solid var(--border);
}

.commission-members-title {
    margin-bottom: 30px;
    font-size: var(--h3-size);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   Haberler
   -------------------------------------------------------------------------- */

.news-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px 30px;
}

.news-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    background: #fff;
    transition: box-shadow .25s ease, transform .25s ease;
}

.news-card:hover {
    box-shadow: 0 10px 26px rgba(0, 0, 0, .09);
    transform: translateY(-3px);
}

.news-card .thumb {
    display: block;
    overflow: hidden;
    background: var(--bg-light);
}

.news-card .thumb img {
    width: 100%;
    display: block;
    transition: transform .5s ease;
}

.news-card:hover .thumb img {
    transform: scale(1.05);
}

.news-card .body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px;
}

.news-card .date {
    display: block;
    margin-bottom: 9px;
    font-family: var(--font-heading);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #a5a5a5;
}

.news-card h3 {
    margin-bottom: 10px;
    font-size: calc(var(--h3-size) * 0.89);
    line-height: 1.4;
}

.news-card h3 a {
    color: var(--heading);
}

.news-card h3 a:hover {
    color: var(--accent);
}

.news-card p {
    flex: 1;
    margin-bottom: 16px;
}

.news-card .more {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* Haber detayı */
.news-single .meta {
    margin-bottom: 22px;
    font-family: var(--font-heading);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #a5a5a5;
}

.news-single .featured {
    margin-bottom: 30px;
}

/*
   ⚠ GÖRSEL, METNİN GENİŞLİĞİNE SABİTLENİR.

   Kural yokken görsel kendi doğal genişliğinde basılıyor ve altındaki
   metinden dar kalıyordu: sola yaslı, sağında boşluk. Panelden yüklenen
   görseller 900×600'e kırpılıyor ama içerik sütunu daha geniş
   olabiliyor; ayrıca başlangıç içeriğiyle gelen SVG'lerin doğal
   genişliği hiç yok, tarayıcı onlara 300 piksel veriyor.

   height: auto oranı korur — genişlik değişince görsel ezilmez.
*/
.news-single .featured img {
    display: block;
    width: 100%;
    height: auto;
}

.related-news {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid var(--border);
}

/* --------------------------------------------------------------------------
   İletişim
   -------------------------------------------------------------------------- */

/* Formsuz hâlin sarmalayıcısı — iletişim bilgileri bloğu bunu kullanıyor.

   ⚠ 640px SINIRI KALKTI. Liste artık sütunlara bölünüyor (aşağıya bak);
   dar bir kutuya sıkıştırmak sütunları anlamsız kılıyordu. Genişlik
   bloğun kendi genişliğinden geliyor. */
.contact-single {
    max-width: none;
}

/* ──────────────────────────────────────────────────────────────────────
   AŞAĞIDAKİLER ŞU AN KULLANILMIYOR — BİLEREK DURUYOR
   ──────────────────────────────────────────────────────────────────────
   .contact-grid · .form-row · .form-group · .form-error · .alert-success

   İletişim formu bilinçli olarak kaldırıldı (cPanel'de SMTP uğraştırıyor);
   ziyaretçi telefon ve e-postayla ulaşıyor. Bu kurallar formun stilleri —
   silinmediler çünkü formu geri getirme yolu belgelenmiş durumda:
   README.md → "İletişim Formu" · REHBER.md → "İletişim formunu geri getirmek"

   Formu geri getirdiğinde .contact-single yerine .contact-grid kullan;
   iki kolon (bilgiler + form) düzeni kendiliğinden kurulur.

   ⚠ Bunları silersen yukarıdaki iki belgedeki adımları da güncelle,
   yoksa "form geri geldi ama stilsiz" durumu çıkar.
   ────────────────────────────────────────────────────────────────────── */

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 50px;
    align-items: start;
}

/* ==========================================================================
   İLETİŞİM BİLGİLERİ LİSTESİ
   --------------------------------------------------------------------------
   Şablon: resources/views/blocks/iletisim-bilgileri.blade.php

   ⚠ SÜTUN SAYISI İÇERİKTEN GELİYOR.
   Şablon kaç bilgi olduğuna bakıp bir ÜST SINIR veriyor
   (--iletisim-sutun: 1-3). CSS bunu ekran genişliğiyle birleştiriyor:
   dar ekranda her koşulda tek sütun, genişledikçe en fazla o kadar.

   Bir dönem liste tek sütundu; tam genişlikteki blokta dört bilgi alt
   alta diziliyor ve sayfayı gereksiz uzatıyordu.
   ========================================================================== */
.contact-info {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Orta genişlikte en fazla iki sütun: üç sütunda etiketler kırılıyor. */
@media (min-width: 700px) {
    .contact-info {
        grid-template-columns: repeat(min(var(--iletisim-sutun, 1), 2), minmax(0, 1fr));
    }
}

@media (min-width: 1000px) {
    .contact-info {
        grid-template-columns: repeat(var(--iletisim-sutun, 1), minmax(0, 1fr));
    }
}

.contact-info li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0;
    padding-left: 0;
    min-width: 0;
}

.contact-info li::before {
    display: none;
}

/*
   ⚠ İKON KUTUSU KIRPILMIYOR.
   Kutu 38 pikseldi ama içindeki simge "font-size: 15px" ile
   ölçekleniyordu; harita iğnesi ve saat gibi köşelere uzanan biçimler
   kutunun kenarına dayanıp kırpılmış görünüyordu (ekran görüntüsüyle
   bildirildi).

   Artık kutu ile simge ayrı ayrı tanımlı: kutu 40, simge 18 piksel ve
   iki eksende de ortalanmış.
*/
.contact-info .icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-light);
    color: var(--accent);
}

.contact-info .icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

/*
   Metin sütunu: etiket ve değer aynı sol kenardan başlıyor.

   ⚠ İKONLA DİKEY HİZA. Etiket 13 punto, ikon kutusu 40 piksel; metin
   bloğu üstten hizalandığında etiketin ilk satırı ikonun üst kenarından
   yukarıda kalıyordu. İki piksellik üst boşluk ikisini aynı optik
   hizaya getiriyor.

   min-width/overflow-wrap: uzun bir e-posta adresi dar sütunu
   taşırmasın, kırılsın.
*/
.contact-info-metin {
    min-width: 0;
    padding-top: 2px;
    overflow-wrap: anywhere;
}

.contact-info strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 13px;
    line-height: 1.4;
    color: var(--heading);
    margin-bottom: 2px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 500;
    color: var(--heading);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 11px 14px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    outline: none;
    transition: border-color .25s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--accent);
}

.form-group textarea {
    min-height: 150px;
    resize: vertical;
}

.form-error {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #c62828;
}

.alert-success {
    margin-bottom: 26px;
    padding: 14px 18px;
    border-left: 3px solid var(--accent);
    background: #f1f8f2;
    color: #2e7d32;
}

.map-embed {
    margin-top: 55px;
    line-height: 0;
}

.map-embed iframe {
    width: 100%;
    height: 380px;
    border: 0;
    filter: grayscale(30%);
}

/*
   HARİTA ONAY KUTUSU
   ─────────────────────────────────────────────────────────────────────
   Harita, ziyaretçi basmadan Google'dan yüklenmiyor; yerinde bu kutu
   duruyor. İşaretleme: resources/views/blocks/iletisim-bilgileri.blade.php

   ⚠ YÜKSEKLİK HARİTAYLA AYNI (380px) — BİLİNÇLİ.
   Kutu daha kısa olsaydı, ziyaretçi "Haritayı göster"e bastığı anda
   altındaki her şey aşağı zıplardı. Aynı boyda olunca harita kutunun
   yerine sessizce geçiyor.
*/
.map-onay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    height: 380px;
    padding: 28px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-light);
    line-height: 1.6;
    text-align: center;
}

.map-onay-ikon {
    display: inline-flex;
    color: var(--accent);
}

.map-onay-yer {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
}

.map-onay-not {
    max-width: 46ch;
    margin: 0;
    font-size: 14px;
    opacity: .8;
}

.map-onay-dugmeler {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.map-onay-dugmeler button,
.map-onay-dugmeler a {
    padding: 11px 20px;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.map-onay-dugmeler button {
    background: var(--accent);
    color: #fff;
}

.map-onay-dugmeler a {
    background: none;
    color: var(--accent);
}

.map-onay-dugmeler button:hover,
.map-onay-dugmeler button:focus-visible {
    border-color: var(--accent-hover);
    background: var(--accent-hover);
}

.map-onay-dugmeler a:hover,
.map-onay-dugmeler a:focus-visible {
    background: var(--accent);
    color: #fff;
}

/* Dar ekranda düğmeler alt alta ve tam genişlikte — parmakla ıskalanmasın */
@media (max-width: 480px) {
    .map-onay {
        height: auto;
        min-height: 380px;
    }

    .map-onay-dugmeler {
        flex-direction: column;
        width: 100%;
        max-width: 280px;
    }

    .map-onay-dugmeler button,
    .map-onay-dugmeler a {
        text-align: center;
    }
}

/* --------------------------------------------------------------------------
   Arama sonuçları
   -------------------------------------------------------------------------- */

.search-results {
    list-style: none;
    padding: 0;
    margin: 0;
}

.search-results li {
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
}

.search-results .type {
    display: inline-block;
    margin-bottom: 6px;
    padding: 2px 9px;
    font-family: var(--font-heading);
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    background: var(--accent);
    border-radius: 2px;
}

.search-results h3 {
    margin: 0 0 6px;
    font-size: calc(var(--h3-size) * 0.89);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
    background: var(--footer-bg);
    color: var(--footer-link);
}

.footer-widgets {
    padding: 55px 0 35px;
}

.footer-brand {
    /* Hiza konumdan geliyor — bkz. "FOOTER — MARKA BLOĞUNUN YERİ" */
    text-align: var(--footer-hiza, center);
    margin-bottom: 42px;
}

.footer-brand img {
    height: 54px;
    width: auto;
    margin-bottom: 14px;
}

.footer-brand p {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 14px;
    color: var(--footer-title);
}

/* --------------------------------------------------------------------------
   FOOTER İLETİŞİM SATIRI  ·  telefon · WhatsApp · e-posta

   Blade: partials/footer.blade.php → .footer-iletisim

   ⚠ MADDE İŞARETİ BIRAKILMAMALI. Liste sırf yapısal: üç ayrı iletişim
   kanalı olduğunu ekran okuyucuya söylüyor. Görsel olarak madde imi
   koymak, simgelerle birlikte iki işaret üst üste gelmesi demekti.

   Hiza marka bloğundan miras alınıyor (--footer-hiza-flex); logo solda
   duruyorsa satırlar da solda başlar, ortadaysa ortalanır.
   -------------------------------------------------------------------------- */

.footer-iletisim {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

.footer-iletisim li {
    display: flex;
    align-items: center;
    justify-content: var(--footer-hiza-flex, center);
    gap: 8px;
    margin-bottom: 7px;
    font-size: 13px;
    line-height: 20px;
}

.footer-iletisim svg {
    /* Yazı uzayıp satır kaydığında simge ezilmesin. */
    flex: 0 0 auto;
    color: var(--footer-title);
}

.footer-iletisim a {
    color: var(--footer-link);
    /* Uzun e-posta adresi dar ekranda kutuyu taşırmasın. */
    overflow-wrap: anywhere;
}

.footer-iletisim a:hover {
    color: #fff;
}

.footer-cols {
    display: grid;
    /* Panelden kaç başlık "footer'da göster" işaretlenirse o kadar
       kolon çıkar; sabit 4 iken 5. başlık tek başına alta düşüyordu. */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 30px;
    text-align: center;
}

.footer-cols h3 {
    margin-bottom: 16px;
    font-size: calc(var(--h3-size) * 0.94);
    font-weight: 500;
    letter-spacing: .4px;
    color: var(--footer-title);
}

.footer-cols h3 a {
    color: var(--footer-title);
}

.footer-cols h3 a:hover {
    color: var(--accent-hover);
}

.footer-cols ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-cols li {
    margin-bottom: 9px;
}

.footer-cols li a {
    font-size: 13px;
    line-height: 20px;
    color: var(--footer-link);
}

.footer-cols li a:hover {
    color: #fff;
}

/* Marka bloğunun içinde, iletişim satırının altında.
   Eskiden sütunların altında tam genişlikte ayrı bir satırdı; o yüzden
   üst boşluğu 42px'ti. Artık kendi kümesinin son parçası. */
.footer-social {
    display: flex;
    justify-content: var(--footer-hiza-flex, center);
    gap: 10px;
    margin-top: 20px;
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #3a3a3a;
    border-radius: 50%;
    color: var(--footer-link);
    font-size: 14px;
}

.footer-social a:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.copyright-footer {
    padding: 18px 0;
    background: var(--copyright-bg);
    text-align: center;
    font-size: 13px;
    color: #8a8a8a;
}

.copyright-footer p {
    margin: 0;
}

.copyright-footer a {
    color: #b5b5b5;
}

.copyright-footer a:hover {
    color: #fff;
}

/*
   "Çerez tercihleri" — <button> ama satırdaki bağlantılarla aynı görünür.
   Bağlantı değil düğme olması bilinçli: bir adrese gitmiyor, sayfadaki
   bandı geri çağırıyor. Ekran okuyucu da onu bu yüzden düğme olarak
   duyurmalı. Ölçüm kapalıyken hiç basılmıyor.
   İşaretleme: resources/views/partials/footer.blade.php
*/
.copyright-cerez {
    margin: 2px 0 0;
}

/*
   Dikey boşluk bilerek geniş: metin küçük ama dokunma alanı parmakla
   rahat basılacak kadar büyük olmalı (~40px). Kendi satırında durduğu
   için bu boşluk hiçbir şeyi itmiyor.
*/
.copyright-footer button[data-cerez-ayarla] {
    padding: 12px 14px;
    border: 0;
    background: none;
    font: inherit;
    color: #b5b5b5;
    text-decoration: underline;
    cursor: pointer;
}

.copyright-footer button[data-cerez-ayarla]:hover,
.copyright-footer button[data-cerez-ayarla]:focus-visible {
    color: #fff;
}

/* --------------------------------------------------------------------------
   SAYFA BLOKLARI
   --------------------------------------------------------------------------
   Panelden eklenen bölümler. Her bloğun görünümü sabittir — sen düzeni
   kurarsın, tasarımı değil. Bu yüzden hangi sırayla dizersen diz sitenin
   kurumsal kimliği bozulmaz.

   Blade  : resources/views/blocks/
   Tanım  : app/Filament/Support/BlokListesi.php
   -------------------------------------------------------------------------- */

/* --- Görsel ---
   Eskiden "Görsel + Metin" bloğuydu; metin kısmı "Metin" bloğuna
   ayrıldı (bkz. 2026_08_15_100000_sayfa_bloklarini_sadelestir.php). */
.blk-gorsel .gorsel-kutu {
    margin: 0;
}

.gorsel-kutu img {
    width: 100%;
    display: block;
    border-radius: var(--radius);
}

.gorsel-kutu figcaption {
    margin-top: 12px;
    font-size: 13px;
    line-height: 21px;
    text-align: center;
    color: var(--faint, #8b9b91);
}

/* "Sayfa genişliği" seçeneği: içerik kutusunun sınırını aşar.
   Kenar boşluğu bilerek korunuyor — görselin ekranın en kenarına
   yapışması, sitenin geri kalanının hizasını bozardı. */
.blk-gorsel--tam .container {
    max-width: min(1600px, 100% - 48px);
}

/* --- Vurgu kutusu --- */
.vurgu-kutu {
    margin: 0;
    padding: 26px 30px;
    border-left: 3px solid var(--accent);
    background: var(--bg-light);
    font-size: 17px;
    line-height: 29px;
    color: #4d4d4d;
}

.vurgu-kutu p {
    margin: 0;
}

.vurgu-kutu cite {
    display: block;
    margin-top: 14px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-style: normal;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--faint, #8b9b91);
}

/* --- Rakamlarla Biz --- */
.sayac-grid {
    display: grid;
    grid-template-columns: repeat(var(--sayac-adet, 4), minmax(0, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
}

.sayac {
    background: #fff;
    padding: 30px 18px;
    text-align: center;
}

.sayac strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 650;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.sayac span {
    display: block;
    margin-top: 9px;
    font-size: 13px;
    color: var(--text);
}

/* --- Katılım çağrısı --- */
.cagri-kutu {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    padding: 34px 38px;
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.cagri-kutu h2 {
    margin: 0 0 6px;
}

.cagri-kutu p {
    margin: 0;
    max-width: 62ch;
}

.cagri-kutu .btn {
    margin-left: auto;
    flex: none;
}

/* --- Duyarlılık --- */
@media (max-width: 767px) {
    /* Telefonda "sayfa genişliği" diye bir şey yok: içerik zaten
       ekranın tamamını kaplıyor, kenar boşluğu da korunmalı. */
    .blk-gorsel--tam .container {
        max-width: 100%;
    }

    .sayac-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sayac strong {
        font-size: 30px;
    }

    .cagri-kutu {
        padding: 24px;
    }

    .cagri-kutu .btn {
        margin-left: 0;
    }

    .vurgu-kutu {
        padding: 20px 22px;
        font-size: 15px;
        line-height: 26px;
    }
}

/* --------------------------------------------------------------------------
   YÖNETİM ÇUBUĞU
   --------------------------------------------------------------------------
   Sitenin en üstünde, yalnızca panele giriş yapmış kullanıcıya görünür.
   Ziyaretçi bu çubuğu hiç görmez, yazdırmada da çıkmaz.

   Blade  : resources/views/partials/admin-bar.blade.php
   İçerik : app/Support/AdminBar.php  (bulunduğun sayfaya göre değişir)

   Panelle aynı dili konuşsun diye rengi #141414 — sitenin yeşili değil.
   -------------------------------------------------------------------------- */

.admin-bar {
    position: sticky;
    top: 0;
    z-index: 300;
    height: 38px;
    background: #141414;
    color: #c9c9c4;
    font-family: var(--font-heading);
    font-size: 12px;
}

.admin-bar .ab-inner {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 15px;
}

.admin-bar a,
.admin-bar button {
    color: #c9c9c4;
    font-family: inherit;
    font-size: 12px;
}

.ab-brand,
.ab-link,
.ab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 9px;
    border: 0;
    border-radius: 5px;
    background: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

.ab-brand:hover,
.ab-link:hover,
.ab-btn:hover {
    background: rgba(255, 255, 255, .09);
    color: #fff;
}

.ab-brand {
    font-weight: 600;
    color: #fff;
}

.ab-brand svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
}

/* Sayfaya özel ilk kısayol öne çıksın — yeşilin izinli olduğu yerlerden biri */
.ab-link.is-primary {
    background: rgba(61, 154, 90, .18);
    color: #8fd3a6;
}

.ab-link.is-primary:hover {
    background: rgba(61, 154, 90, .28);
    color: #a9e0bc;
}

.ab-sep {
    width: 1px;
    height: 16px;
    background: #2e2e2e;
    margin: 0 4px;
}

.ab-right {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

/* --------------------------------------------------------------------------
   ⚠ ÇUBUK SAYFAYI YATAY KAYDIRMAYA ZORLAMASIN
   --------------------------------------------------------------------------
   360 px'lik telefonda satır 358 px yer istiyordu, kutu 341 px'ti: yönetici
   siteyi telefondan gezdiğinde TÜM sayfa yana kayıyordu. Ziyaretçi çubuğu
   hiç görmediği için bu hata testlerde de görünmüyordu.

   Satırı taşıran tek parça, bulunduğun sayfaya özel kısayolun yazısı —
   "Slider'ı Düzenle", "İletişim Bilgilerini Düzenle"… Uzunluğu içeriğe göre
   değişiyor, yani sabit bir kırpma ölçüsü yazmak kalıcı çözüm olmaz.

   Kural: daralmayı YALNIZCA o yazı üstlenir, yer kalmayınca üç noktayla
   kısalır. Simgeler ve sağdaki Tasarım / Gizle / Çıkış grubu hiç küçülmez.
   -------------------------------------------------------------------------- */

.admin-bar .ab-inner > * {
    flex-shrink: 0;
}

.admin-bar .ab-inner > .ab-link.is-primary {
    min-width: 0;
    flex-shrink: 1;
}

/* Esnek kutuda üç noktanın çıkabilmesi için kırpma yazının kendi üstünde. */
.ab-link.is-primary > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Yazı kısalırken simge ezilmesin. */
.ab-brand svg,
.ab-link svg {
    flex: 0 0 auto;
}

.ab-user {
    padding: 0 6px;
    color: #7a7a73;
    font-size: 11.5px;
}

.ab-logout {
    display: inline;
    margin: 0;
}

/* Gizlendiğinde geri getiren tutamak */
.admin-bar-peek {
    position: fixed;
    top: 0;
    right: 16px;
    z-index: 300;
    height: 22px;
    padding: 0 10px;
    border: 0;
    border-radius: 0 0 5px 5px;
    background: #141414;
    color: #c9c9c4;
    font-family: var(--font-heading);
    font-size: 10.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
}

.admin-bar-peek:hover {
    background: #2a2a2a;
    color: #fff;
}

@media (max-width: 767px) {
    /* Dar ekranda yazıları at, ikonlar kalsın */
    .ab-link span,
    .ab-brand span,
    .ab-user {
        display: none;
    }

    .ab-link.is-primary span {
        display: inline;
    }
}

@media (max-width: 480px) {
    /* Telefonda o yazıya yer kalmıyor: üç noktaya inen bir kırıntı yerine
       hiç göstermemek daha temiz. Üstteki daralma kuralı yine duruyor —
       yarın daha uzun bir etiket eklenirse sayfa yine yana kaymayacak. */
    .ab-link.is-primary span {
        display: none;
    }
}

@media print {
    .admin-bar,
    .admin-bar-peek {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   Yukarı çık butonu
   -------------------------------------------------------------------------- */

/* ==========================================================================
   YÜZEN DÜĞMELER  ·  sağ alt köşe
   --------------------------------------------------------------------------
   İki düğme aynı köşeyi paylaşıyor:

     · WhatsApp   → her zaman görünür (numara girilmişse)
     · Sayfa başı → yalnızca sayfa kaydırılınca

   ⚠ ÜST ÜSTE BİNMİYORLAR. WhatsApp en altta duruyor; sayfa başı düğmesi
   onun üstüne çıkıyor. Ölçüler tek bir değişkenden:
     --yuzen-alt   → köşeden boşluk
     --yuzen-adim  → iki düğme arasındaki dikey mesafe

   ⚠ ÇEREZ KARTI SOL ALTTA (geniş ekran) — çakışma yok. Telefonda kart
   kenardan kenara olduğu için düğmeler kartın üstüne kaydırılıyor;
   kural aşağıda.
   ========================================================================== */
:root {
    --yuzen-alt: 22px;
    --yuzen-adim: 60px;
}

.to-top {
    position: fixed;
    right: 22px;
    bottom: calc(var(--yuzen-alt) + var(--yuzen-adim));
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: var(--accent);
    color: #fff;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s;
}

.to-top.is-visible {
    opacity: 1;
    visibility: visible;
}

.to-top:hover {
    background: var(--accent-hover);
}

/* --------------------------------------------------------------------------
   HATA SAYFALARI  ·  401 · 403 · 404 · 419 · 429
   --------------------------------------------------------------------------
   Görünüm : resources/views/errors/govde.blade.php  (site sürümü)
   Metinler: app/Support/HataSayfasi.php

   ⚠ 500 ve 503 BURAYA BAKMAZ. Onlar kendi kendine yeten sade düzeni
   kullanıyor ve stilleri o dosyanın içinde satır içi duruyor
   (resources/views/layouts/hata-sade.blade.php). Sebebi: o iki hata
   çoğu kez uygulama ya da veritabanı çöktüğü için oluşur; dışarıdan
   stil beklemek sayfanın biçimsiz açılmasına yol açardı.
   -------------------------------------------------------------------------- */

.hata-icerik {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}

/* Büyük hata kodu — sayfanın ne olduğunu ilk bakışta söyler */
.hata-icerik .hata-kod {
    font-size: 64px;
    line-height: 1;
    font-weight: 700;
    color: var(--accent);
    margin: 0 0 14px;

    /* Rakamlar eşit genişlikte dursun */
    font-variant-numeric: tabular-nums;
}

.hata-icerik .hata-dugmeler {
    margin-top: 30px;
}

.hata-icerik .hata-baglantilar {
    margin-top: 22px;
    font-size: 13px;
}

/* Dar ekran: kod küçülsün, ekranın yarısını kaplamasın */
@media (max-width: 575px) {
    .hata-icerik .hata-kod {
        font-size: 48px;
    }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
    .site-navigation > ul > li > a {
        padding: 0 13px;
        /* --nav-size'ın %92'si */
        font-size: calc(var(--nav-size) * 0.92);
    }

    .members-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .site-header .container {
        flex-wrap: wrap;
    }

    .nav-toggle {
        display: flex;
        margin-left: 14px;
    }

    .nav-bar-wrapper {
        order: 5;
        width: 100%;
    }

    .nav-bar {
        display: block;
    }

    .site-navigation {
        display: none;
        padding: 10px 0 18px;
        border-top: 1px solid var(--border);
    }

    .site-navigation.is-open {
        display: block;
    }

    .site-navigation > ul {
        display: block;
    }

    .site-navigation > ul > li {
        border-left: 0;
        border-bottom: 1px solid #f2f2f2;
    }

    .site-navigation > ul > li > a {
        height: auto;
        padding: 13px 4px;
    }

    .site-navigation .sub-menu {
        position: static;
        display: none;
        min-width: 0;
        max-width: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border-top: 0;
        padding: 0 0 10px 14px;
        background: transparent;
    }

    .site-navigation > ul > li.is-open > .sub-menu {
        display: block;
    }

    .site-navigation .sub-menu li a {
        border-bottom: 0;
        padding: 7px 0;
    }

    .site-navigation .sub-menu li a:hover {
        background: none;
        padding-left: 5px;
    }

    .has-children > a::after {
        content: '+';
        margin-left: auto;
        padding-left: 12px;
        font-size: 16px;
        line-height: 1;
    }

    .has-children.is-open > a::after {
        content: '–';
    }

    /* Yalnızca değişken — height yazılırsa min-height onu ezer. */
    .hero-slider {
        --hero-h: 420px;
    }

    .hero-content h2 {
        /* Panelden ayarlanan --hero-title-size'ın %73'ü.
           Sabit px yazılırsa panel ayarı mobilde ölür. */
        font-size: calc(var(--hero-title-size) * 0.73);
    }

    .news-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 34px 20px;
    }
}

@media (max-width: 767px) {
    .members-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hero-slider {
        --hero-h: 360px;
    }

    .hero-content h2 {
        font-size: calc(var(--hero-title-size) * 0.59);
    }

    .hero-content p {
        font-size: 15px;
        line-height: 25px;
    }

    .hero-nav {
        display: none;
    }

    .section {
        /* --section-space'in %75'i — panel ayarı mobilde de işlesin */
        padding: calc(var(--section-space) * 0.75) 0;
    }

    .page-content {
        padding: 40px 0 50px;
    }

    .commission-chair {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .commission-chair .team {
        max-width: 260px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

}

@media (max-width: 575px) {
    .members-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .news-list {
        grid-template-columns: 1fr;
    }

    .footer-cols {
        grid-template-columns: 1fr;
    }

    .site-logo img {
        height: 38px;
    }
}


/* --------------------------------------------------------------------------
   IZGARA · Bootstrap 5 uyumlu 12 kolon sistemi

   Neden burada: projeye dışarıdan bootstrap.css EKLENMEDİ. Bootstrap'ın
   ızgara sınıf adları ve kırılma noktaları birebir buraya yazıldı. Böylece
   .row / .col-md-6 gibi bildiğin sınıflar çalışır, ama Bootstrap'ın renk,
   punto ve reset kuralları temayı ezmez — panelden yönettiğin değişkenler
   (--container, --accent, --font-size …) olduğu gibi kalır.

   Kırılma noktaları (Bootstrap 5 ile aynı):
     xs  <576   ·  sm ≥576  ·  md ≥768  ·  lg ≥992  ·  xl ≥1200  ·  xxl ≥1400

   Kullanım:
     <div class="container">
       <div class="row g-4">
         <div class="col-12 col-md-6 col-lg-4">…</div>
       </div>
     </div>
   -------------------------------------------------------------------------- */

:root {
    --bs-gutter-x: 30px;   /* mevcut tasarımın oluk genişliği — değiştirme */
    --bs-gutter-y: 0;
}

/* ---- Konteyner ----
   .container temanın --container değişkenine bağlıdır; genişliğini
   panelden (Görünüm & Tema) yönetirsin. Sabit ölçülü Bootstrap
   konteynerleri isteyen özel durumlar için -sm/-md/… karşılıkları var. */
.container,
.container-fluid {
    width: 100%;
    margin-inline: auto;
    padding-inline: calc(var(--bs-gutter-x) * .5);
}

.container {
    max-width: var(--container);
}

@media (min-width: 576px) {
    .container-sm { max-width: 540px; }
}

@media (min-width: 768px) {
    .container-md { max-width: 720px; }
}

@media (min-width: 992px) {
    .container-lg { max-width: 960px; }
}

@media (min-width: 1200px) {
    .container-xl { max-width: 1140px; }
}

@media (min-width: 1400px) {
    .container-xxl { max-width: 1320px; }
}


/* ---- Satır ---- */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-inline: calc(var(--bs-gutter-x) * -.5);
}

.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-inline: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);

    /* Taşma kalkanı: uzun bir kelime, geniş bir tablo ya da <pre> bloğu
       kolonu zorlayıp sayfayı yatay kaydırmaya açamasın. Bootstrap'ta
       yok; buradaki asıl amacımız her ekranda kaymayan bir sayfa. */
    min-width: 0;
}

.col { flex: 1 0 0%; }
.row-cols-auto > * { flex: 0 0 auto; width: auto; }
.row-cols-1 > * { flex: 0 0 auto; width: 100.000000%; }
.row-cols-2 > * { flex: 0 0 auto; width: 50.000000%; }
.row-cols-3 > * { flex: 0 0 auto; width: 33.333333%; }
.row-cols-4 > * { flex: 0 0 auto; width: 25.000000%; }
.row-cols-5 > * { flex: 0 0 auto; width: 20.000000%; }
.row-cols-6 > * { flex: 0 0 auto; width: 16.666667%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1 { flex: 0 0 auto; width: 8.333333%; }
.col-2 { flex: 0 0 auto; width: 16.666667%; }
.col-3 { flex: 0 0 auto; width: 25.000000%; }
.col-4 { flex: 0 0 auto; width: 33.333333%; }
.col-5 { flex: 0 0 auto; width: 41.666667%; }
.col-6 { flex: 0 0 auto; width: 50.000000%; }
.col-7 { flex: 0 0 auto; width: 58.333333%; }
.col-8 { flex: 0 0 auto; width: 66.666667%; }
.col-9 { flex: 0 0 auto; width: 75.000000%; }
.col-10 { flex: 0 0 auto; width: 83.333333%; }
.col-11 { flex: 0 0 auto; width: 91.666667%; }
.col-12 { flex: 0 0 auto; width: 100.000000%; }
.offset-0 { margin-left: 0.000000%; }
.offset-1 { margin-left: 8.333333%; }
.offset-2 { margin-left: 16.666667%; }
.offset-3 { margin-left: 25.000000%; }
.offset-4 { margin-left: 33.333333%; }
.offset-5 { margin-left: 41.666667%; }
.offset-6 { margin-left: 50.000000%; }
.offset-7 { margin-left: 58.333333%; }
.offset-8 { margin-left: 66.666667%; }
.offset-9 { margin-left: 75.000000%; }
.offset-10 { margin-left: 83.333333%; }
.offset-11 { margin-left: 91.666667%; }
.g-0, .gx-0 { --bs-gutter-x: 0; }
.g-0, .gy-0 { --bs-gutter-y: 0; }
.g-1, .gx-1 { --bs-gutter-x: 5px; }
.g-1, .gy-1 { --bs-gutter-y: 5px; }
.g-2, .gx-2 { --bs-gutter-x: 10px; }
.g-2, .gy-2 { --bs-gutter-y: 10px; }
.g-3, .gx-3 { --bs-gutter-x: 15px; }
.g-3, .gy-3 { --bs-gutter-y: 15px; }
.g-4, .gx-4 { --bs-gutter-x: 30px; }
.g-4, .gy-4 { --bs-gutter-y: 30px; }
.g-5, .gx-5 { --bs-gutter-x: 48px; }
.g-5, .gy-5 { --bs-gutter-y: 48px; }

@media (min-width: 576px) {
    .col-sm { flex: 1 0 0%; }
    .row-cols-sm-auto > * { flex: 0 0 auto; width: auto; }
    .row-cols-sm-1 > * { flex: 0 0 auto; width: 100.000000%; }
    .row-cols-sm-2 > * { flex: 0 0 auto; width: 50.000000%; }
    .row-cols-sm-3 > * { flex: 0 0 auto; width: 33.333333%; }
    .row-cols-sm-4 > * { flex: 0 0 auto; width: 25.000000%; }
    .row-cols-sm-5 > * { flex: 0 0 auto; width: 20.000000%; }
    .row-cols-sm-6 > * { flex: 0 0 auto; width: 16.666667%; }
    .col-sm-auto { flex: 0 0 auto; width: auto; }
    .col-sm-1 { flex: 0 0 auto; width: 8.333333%; }
    .col-sm-2 { flex: 0 0 auto; width: 16.666667%; }
    .col-sm-3 { flex: 0 0 auto; width: 25.000000%; }
    .col-sm-4 { flex: 0 0 auto; width: 33.333333%; }
    .col-sm-5 { flex: 0 0 auto; width: 41.666667%; }
    .col-sm-6 { flex: 0 0 auto; width: 50.000000%; }
    .col-sm-7 { flex: 0 0 auto; width: 58.333333%; }
    .col-sm-8 { flex: 0 0 auto; width: 66.666667%; }
    .col-sm-9 { flex: 0 0 auto; width: 75.000000%; }
    .col-sm-10 { flex: 0 0 auto; width: 83.333333%; }
    .col-sm-11 { flex: 0 0 auto; width: 91.666667%; }
    .col-sm-12 { flex: 0 0 auto; width: 100.000000%; }
    .offset-sm-0 { margin-left: 0.000000%; }
    .offset-sm-1 { margin-left: 8.333333%; }
    .offset-sm-2 { margin-left: 16.666667%; }
    .offset-sm-3 { margin-left: 25.000000%; }
    .offset-sm-4 { margin-left: 33.333333%; }
    .offset-sm-5 { margin-left: 41.666667%; }
    .offset-sm-6 { margin-left: 50.000000%; }
    .offset-sm-7 { margin-left: 58.333333%; }
    .offset-sm-8 { margin-left: 66.666667%; }
    .offset-sm-9 { margin-left: 75.000000%; }
    .offset-sm-10 { margin-left: 83.333333%; }
    .offset-sm-11 { margin-left: 91.666667%; }
    .g-sm-0, .gx-sm-0 { --bs-gutter-x: 0; }
    .g-sm-0, .gy-sm-0 { --bs-gutter-y: 0; }
    .g-sm-1, .gx-sm-1 { --bs-gutter-x: 5px; }
    .g-sm-1, .gy-sm-1 { --bs-gutter-y: 5px; }
    .g-sm-2, .gx-sm-2 { --bs-gutter-x: 10px; }
    .g-sm-2, .gy-sm-2 { --bs-gutter-y: 10px; }
    .g-sm-3, .gx-sm-3 { --bs-gutter-x: 15px; }
    .g-sm-3, .gy-sm-3 { --bs-gutter-y: 15px; }
    .g-sm-4, .gx-sm-4 { --bs-gutter-x: 30px; }
    .g-sm-4, .gy-sm-4 { --bs-gutter-y: 30px; }
    .g-sm-5, .gx-sm-5 { --bs-gutter-x: 48px; }
    .g-sm-5, .gy-sm-5 { --bs-gutter-y: 48px; }
}

@media (min-width: 768px) {
    .col-md { flex: 1 0 0%; }
    .row-cols-md-auto > * { flex: 0 0 auto; width: auto; }
    .row-cols-md-1 > * { flex: 0 0 auto; width: 100.000000%; }
    .row-cols-md-2 > * { flex: 0 0 auto; width: 50.000000%; }
    .row-cols-md-3 > * { flex: 0 0 auto; width: 33.333333%; }
    .row-cols-md-4 > * { flex: 0 0 auto; width: 25.000000%; }
    .row-cols-md-5 > * { flex: 0 0 auto; width: 20.000000%; }
    .row-cols-md-6 > * { flex: 0 0 auto; width: 16.666667%; }
    .col-md-auto { flex: 0 0 auto; width: auto; }
    .col-md-1 { flex: 0 0 auto; width: 8.333333%; }
    .col-md-2 { flex: 0 0 auto; width: 16.666667%; }
    .col-md-3 { flex: 0 0 auto; width: 25.000000%; }
    .col-md-4 { flex: 0 0 auto; width: 33.333333%; }
    .col-md-5 { flex: 0 0 auto; width: 41.666667%; }
    .col-md-6 { flex: 0 0 auto; width: 50.000000%; }
    .col-md-7 { flex: 0 0 auto; width: 58.333333%; }
    .col-md-8 { flex: 0 0 auto; width: 66.666667%; }
    .col-md-9 { flex: 0 0 auto; width: 75.000000%; }
    .col-md-10 { flex: 0 0 auto; width: 83.333333%; }
    .col-md-11 { flex: 0 0 auto; width: 91.666667%; }
    .col-md-12 { flex: 0 0 auto; width: 100.000000%; }
    .offset-md-0 { margin-left: 0.000000%; }
    .offset-md-1 { margin-left: 8.333333%; }
    .offset-md-2 { margin-left: 16.666667%; }
    .offset-md-3 { margin-left: 25.000000%; }
    .offset-md-4 { margin-left: 33.333333%; }
    .offset-md-5 { margin-left: 41.666667%; }
    .offset-md-6 { margin-left: 50.000000%; }
    .offset-md-7 { margin-left: 58.333333%; }
    .offset-md-8 { margin-left: 66.666667%; }
    .offset-md-9 { margin-left: 75.000000%; }
    .offset-md-10 { margin-left: 83.333333%; }
    .offset-md-11 { margin-left: 91.666667%; }
    .g-md-0, .gx-md-0 { --bs-gutter-x: 0; }
    .g-md-0, .gy-md-0 { --bs-gutter-y: 0; }
    .g-md-1, .gx-md-1 { --bs-gutter-x: 5px; }
    .g-md-1, .gy-md-1 { --bs-gutter-y: 5px; }
    .g-md-2, .gx-md-2 { --bs-gutter-x: 10px; }
    .g-md-2, .gy-md-2 { --bs-gutter-y: 10px; }
    .g-md-3, .gx-md-3 { --bs-gutter-x: 15px; }
    .g-md-3, .gy-md-3 { --bs-gutter-y: 15px; }
    .g-md-4, .gx-md-4 { --bs-gutter-x: 30px; }
    .g-md-4, .gy-md-4 { --bs-gutter-y: 30px; }
    .g-md-5, .gx-md-5 { --bs-gutter-x: 48px; }
    .g-md-5, .gy-md-5 { --bs-gutter-y: 48px; }
}

@media (min-width: 992px) {
    .col-lg { flex: 1 0 0%; }
    .row-cols-lg-auto > * { flex: 0 0 auto; width: auto; }
    .row-cols-lg-1 > * { flex: 0 0 auto; width: 100.000000%; }
    .row-cols-lg-2 > * { flex: 0 0 auto; width: 50.000000%; }
    .row-cols-lg-3 > * { flex: 0 0 auto; width: 33.333333%; }
    .row-cols-lg-4 > * { flex: 0 0 auto; width: 25.000000%; }
    .row-cols-lg-5 > * { flex: 0 0 auto; width: 20.000000%; }
    .row-cols-lg-6 > * { flex: 0 0 auto; width: 16.666667%; }
    .col-lg-auto { flex: 0 0 auto; width: auto; }
    .col-lg-1 { flex: 0 0 auto; width: 8.333333%; }
    .col-lg-2 { flex: 0 0 auto; width: 16.666667%; }
    .col-lg-3 { flex: 0 0 auto; width: 25.000000%; }
    .col-lg-4 { flex: 0 0 auto; width: 33.333333%; }
    .col-lg-5 { flex: 0 0 auto; width: 41.666667%; }
    .col-lg-6 { flex: 0 0 auto; width: 50.000000%; }
    .col-lg-7 { flex: 0 0 auto; width: 58.333333%; }
    .col-lg-8 { flex: 0 0 auto; width: 66.666667%; }
    .col-lg-9 { flex: 0 0 auto; width: 75.000000%; }
    .col-lg-10 { flex: 0 0 auto; width: 83.333333%; }
    .col-lg-11 { flex: 0 0 auto; width: 91.666667%; }
    .col-lg-12 { flex: 0 0 auto; width: 100.000000%; }
    .offset-lg-0 { margin-left: 0.000000%; }
    .offset-lg-1 { margin-left: 8.333333%; }
    .offset-lg-2 { margin-left: 16.666667%; }
    .offset-lg-3 { margin-left: 25.000000%; }
    .offset-lg-4 { margin-left: 33.333333%; }
    .offset-lg-5 { margin-left: 41.666667%; }
    .offset-lg-6 { margin-left: 50.000000%; }
    .offset-lg-7 { margin-left: 58.333333%; }
    .offset-lg-8 { margin-left: 66.666667%; }
    .offset-lg-9 { margin-left: 75.000000%; }
    .offset-lg-10 { margin-left: 83.333333%; }
    .offset-lg-11 { margin-left: 91.666667%; }
    .g-lg-0, .gx-lg-0 { --bs-gutter-x: 0; }
    .g-lg-0, .gy-lg-0 { --bs-gutter-y: 0; }
    .g-lg-1, .gx-lg-1 { --bs-gutter-x: 5px; }
    .g-lg-1, .gy-lg-1 { --bs-gutter-y: 5px; }
    .g-lg-2, .gx-lg-2 { --bs-gutter-x: 10px; }
    .g-lg-2, .gy-lg-2 { --bs-gutter-y: 10px; }
    .g-lg-3, .gx-lg-3 { --bs-gutter-x: 15px; }
    .g-lg-3, .gy-lg-3 { --bs-gutter-y: 15px; }
    .g-lg-4, .gx-lg-4 { --bs-gutter-x: 30px; }
    .g-lg-4, .gy-lg-4 { --bs-gutter-y: 30px; }
    .g-lg-5, .gx-lg-5 { --bs-gutter-x: 48px; }
    .g-lg-5, .gy-lg-5 { --bs-gutter-y: 48px; }
}

@media (min-width: 1200px) {
    .col-xl { flex: 1 0 0%; }
    .row-cols-xl-auto > * { flex: 0 0 auto; width: auto; }
    .row-cols-xl-1 > * { flex: 0 0 auto; width: 100.000000%; }
    .row-cols-xl-2 > * { flex: 0 0 auto; width: 50.000000%; }
    .row-cols-xl-3 > * { flex: 0 0 auto; width: 33.333333%; }
    .row-cols-xl-4 > * { flex: 0 0 auto; width: 25.000000%; }
    .row-cols-xl-5 > * { flex: 0 0 auto; width: 20.000000%; }
    .row-cols-xl-6 > * { flex: 0 0 auto; width: 16.666667%; }
    .col-xl-auto { flex: 0 0 auto; width: auto; }
    .col-xl-1 { flex: 0 0 auto; width: 8.333333%; }
    .col-xl-2 { flex: 0 0 auto; width: 16.666667%; }
    .col-xl-3 { flex: 0 0 auto; width: 25.000000%; }
    .col-xl-4 { flex: 0 0 auto; width: 33.333333%; }
    .col-xl-5 { flex: 0 0 auto; width: 41.666667%; }
    .col-xl-6 { flex: 0 0 auto; width: 50.000000%; }
    .col-xl-7 { flex: 0 0 auto; width: 58.333333%; }
    .col-xl-8 { flex: 0 0 auto; width: 66.666667%; }
    .col-xl-9 { flex: 0 0 auto; width: 75.000000%; }
    .col-xl-10 { flex: 0 0 auto; width: 83.333333%; }
    .col-xl-11 { flex: 0 0 auto; width: 91.666667%; }
    .col-xl-12 { flex: 0 0 auto; width: 100.000000%; }
    .offset-xl-0 { margin-left: 0.000000%; }
    .offset-xl-1 { margin-left: 8.333333%; }
    .offset-xl-2 { margin-left: 16.666667%; }
    .offset-xl-3 { margin-left: 25.000000%; }
    .offset-xl-4 { margin-left: 33.333333%; }
    .offset-xl-5 { margin-left: 41.666667%; }
    .offset-xl-6 { margin-left: 50.000000%; }
    .offset-xl-7 { margin-left: 58.333333%; }
    .offset-xl-8 { margin-left: 66.666667%; }
    .offset-xl-9 { margin-left: 75.000000%; }
    .offset-xl-10 { margin-left: 83.333333%; }
    .offset-xl-11 { margin-left: 91.666667%; }
    .g-xl-0, .gx-xl-0 { --bs-gutter-x: 0; }
    .g-xl-0, .gy-xl-0 { --bs-gutter-y: 0; }
    .g-xl-1, .gx-xl-1 { --bs-gutter-x: 5px; }
    .g-xl-1, .gy-xl-1 { --bs-gutter-y: 5px; }
    .g-xl-2, .gx-xl-2 { --bs-gutter-x: 10px; }
    .g-xl-2, .gy-xl-2 { --bs-gutter-y: 10px; }
    .g-xl-3, .gx-xl-3 { --bs-gutter-x: 15px; }
    .g-xl-3, .gy-xl-3 { --bs-gutter-y: 15px; }
    .g-xl-4, .gx-xl-4 { --bs-gutter-x: 30px; }
    .g-xl-4, .gy-xl-4 { --bs-gutter-y: 30px; }
    .g-xl-5, .gx-xl-5 { --bs-gutter-x: 48px; }
    .g-xl-5, .gy-xl-5 { --bs-gutter-y: 48px; }
}

@media (min-width: 1400px) {
    .col-xxl { flex: 1 0 0%; }
    .row-cols-xxl-auto > * { flex: 0 0 auto; width: auto; }
    .row-cols-xxl-1 > * { flex: 0 0 auto; width: 100.000000%; }
    .row-cols-xxl-2 > * { flex: 0 0 auto; width: 50.000000%; }
    .row-cols-xxl-3 > * { flex: 0 0 auto; width: 33.333333%; }
    .row-cols-xxl-4 > * { flex: 0 0 auto; width: 25.000000%; }
    .row-cols-xxl-5 > * { flex: 0 0 auto; width: 20.000000%; }
    .row-cols-xxl-6 > * { flex: 0 0 auto; width: 16.666667%; }
    .col-xxl-auto { flex: 0 0 auto; width: auto; }
    .col-xxl-1 { flex: 0 0 auto; width: 8.333333%; }
    .col-xxl-2 { flex: 0 0 auto; width: 16.666667%; }
    .col-xxl-3 { flex: 0 0 auto; width: 25.000000%; }
    .col-xxl-4 { flex: 0 0 auto; width: 33.333333%; }
    .col-xxl-5 { flex: 0 0 auto; width: 41.666667%; }
    .col-xxl-6 { flex: 0 0 auto; width: 50.000000%; }
    .col-xxl-7 { flex: 0 0 auto; width: 58.333333%; }
    .col-xxl-8 { flex: 0 0 auto; width: 66.666667%; }
    .col-xxl-9 { flex: 0 0 auto; width: 75.000000%; }
    .col-xxl-10 { flex: 0 0 auto; width: 83.333333%; }
    .col-xxl-11 { flex: 0 0 auto; width: 91.666667%; }
    .col-xxl-12 { flex: 0 0 auto; width: 100.000000%; }
    .offset-xxl-0 { margin-left: 0.000000%; }
    .offset-xxl-1 { margin-left: 8.333333%; }
    .offset-xxl-2 { margin-left: 16.666667%; }
    .offset-xxl-3 { margin-left: 25.000000%; }
    .offset-xxl-4 { margin-left: 33.333333%; }
    .offset-xxl-5 { margin-left: 41.666667%; }
    .offset-xxl-6 { margin-left: 50.000000%; }
    .offset-xxl-7 { margin-left: 58.333333%; }
    .offset-xxl-8 { margin-left: 66.666667%; }
    .offset-xxl-9 { margin-left: 75.000000%; }
    .offset-xxl-10 { margin-left: 83.333333%; }
    .offset-xxl-11 { margin-left: 91.666667%; }
    .g-xxl-0, .gx-xxl-0 { --bs-gutter-x: 0; }
    .g-xxl-0, .gy-xxl-0 { --bs-gutter-y: 0; }
    .g-xxl-1, .gx-xxl-1 { --bs-gutter-x: 5px; }
    .g-xxl-1, .gy-xxl-1 { --bs-gutter-y: 5px; }
    .g-xxl-2, .gx-xxl-2 { --bs-gutter-x: 10px; }
    .g-xxl-2, .gy-xxl-2 { --bs-gutter-y: 10px; }
    .g-xxl-3, .gx-xxl-3 { --bs-gutter-x: 15px; }
    .g-xxl-3, .gy-xxl-3 { --bs-gutter-y: 15px; }
    .g-xxl-4, .gx-xxl-4 { --bs-gutter-x: 30px; }
    .g-xxl-4, .gy-xxl-4 { --bs-gutter-y: 30px; }
    .g-xxl-5, .gx-xxl-5 { --bs-gutter-x: 48px; }
    .g-xxl-5, .gy-xxl-5 { --bs-gutter-y: 48px; }
}


/* ---- Sıralama · görünürlük · hizalama ---- */

.order-first { order: -1; }
.order-last { order: 13; }
.order-0 { order: 0; }
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.d-none { display: none !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }
.d-grid { display: grid !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch { align-items: stretch !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }
.justify-content-evenly { justify-content: space-evenly !important; }
.text-start { text-align: start !important; }
.text-end { text-align: end !important; }
.text-center { text-align: center !important; }

@media (min-width: 576px) {
    .order-sm-first { order: -1; }
    .order-sm-last { order: 13; }
    .order-sm-0 { order: 0; }
    .order-sm-1 { order: 1; }
    .order-sm-2 { order: 2; }
    .order-sm-3 { order: 3; }
    .order-sm-4 { order: 4; }
    .order-sm-5 { order: 5; }
    .d-sm-none { display: none !important; }
    .d-sm-inline { display: inline !important; }
    .d-sm-inline-block { display: inline-block !important; }
    .d-sm-block { display: block !important; }
    .d-sm-grid { display: grid !important; }
    .d-sm-flex { display: flex !important; }
    .d-sm-inline-flex { display: inline-flex !important; }
    .align-items-sm-start { align-items: flex-start !important; }
    .align-items-sm-end { align-items: flex-end !important; }
    .align-items-sm-center { align-items: center !important; }
    .align-items-sm-baseline { align-items: baseline !important; }
    .align-items-sm-stretch { align-items: stretch !important; }
    .justify-content-sm-start { justify-content: flex-start !important; }
    .justify-content-sm-end { justify-content: flex-end !important; }
    .justify-content-sm-center { justify-content: center !important; }
    .justify-content-sm-between { justify-content: space-between !important; }
    .justify-content-sm-around { justify-content: space-around !important; }
    .justify-content-sm-evenly { justify-content: space-evenly !important; }
    .text-sm-start { text-align: start !important; }
    .text-sm-end { text-align: end !important; }
    .text-sm-center { text-align: center !important; }
}

@media (min-width: 768px) {
    .order-md-first { order: -1; }
    .order-md-last { order: 13; }
    .order-md-0 { order: 0; }
    .order-md-1 { order: 1; }
    .order-md-2 { order: 2; }
    .order-md-3 { order: 3; }
    .order-md-4 { order: 4; }
    .order-md-5 { order: 5; }
    .d-md-none { display: none !important; }
    .d-md-inline { display: inline !important; }
    .d-md-inline-block { display: inline-block !important; }
    .d-md-block { display: block !important; }
    .d-md-grid { display: grid !important; }
    .d-md-flex { display: flex !important; }
    .d-md-inline-flex { display: inline-flex !important; }
    .align-items-md-start { align-items: flex-start !important; }
    .align-items-md-end { align-items: flex-end !important; }
    .align-items-md-center { align-items: center !important; }
    .align-items-md-baseline { align-items: baseline !important; }
    .align-items-md-stretch { align-items: stretch !important; }
    .justify-content-md-start { justify-content: flex-start !important; }
    .justify-content-md-end { justify-content: flex-end !important; }
    .justify-content-md-center { justify-content: center !important; }
    .justify-content-md-between { justify-content: space-between !important; }
    .justify-content-md-around { justify-content: space-around !important; }
    .justify-content-md-evenly { justify-content: space-evenly !important; }
    .text-md-start { text-align: start !important; }
    .text-md-end { text-align: end !important; }
    .text-md-center { text-align: center !important; }
}

@media (min-width: 992px) {
    .order-lg-first { order: -1; }
    .order-lg-last { order: 13; }
    .order-lg-0 { order: 0; }
    .order-lg-1 { order: 1; }
    .order-lg-2 { order: 2; }
    .order-lg-3 { order: 3; }
    .order-lg-4 { order: 4; }
    .order-lg-5 { order: 5; }
    .d-lg-none { display: none !important; }
    .d-lg-inline { display: inline !important; }
    .d-lg-inline-block { display: inline-block !important; }
    .d-lg-block { display: block !important; }
    .d-lg-grid { display: grid !important; }
    .d-lg-flex { display: flex !important; }
    .d-lg-inline-flex { display: inline-flex !important; }
    .align-items-lg-start { align-items: flex-start !important; }
    .align-items-lg-end { align-items: flex-end !important; }
    .align-items-lg-center { align-items: center !important; }
    .align-items-lg-baseline { align-items: baseline !important; }
    .align-items-lg-stretch { align-items: stretch !important; }
    .justify-content-lg-start { justify-content: flex-start !important; }
    .justify-content-lg-end { justify-content: flex-end !important; }
    .justify-content-lg-center { justify-content: center !important; }
    .justify-content-lg-between { justify-content: space-between !important; }
    .justify-content-lg-around { justify-content: space-around !important; }
    .justify-content-lg-evenly { justify-content: space-evenly !important; }
    .text-lg-start { text-align: start !important; }
    .text-lg-end { text-align: end !important; }
    .text-lg-center { text-align: center !important; }
}

@media (min-width: 1200px) {
    .order-xl-first { order: -1; }
    .order-xl-last { order: 13; }
    .order-xl-0 { order: 0; }
    .order-xl-1 { order: 1; }
    .order-xl-2 { order: 2; }
    .order-xl-3 { order: 3; }
    .order-xl-4 { order: 4; }
    .order-xl-5 { order: 5; }
    .d-xl-none { display: none !important; }
    .d-xl-inline { display: inline !important; }
    .d-xl-inline-block { display: inline-block !important; }
    .d-xl-block { display: block !important; }
    .d-xl-grid { display: grid !important; }
    .d-xl-flex { display: flex !important; }
    .d-xl-inline-flex { display: inline-flex !important; }
    .align-items-xl-start { align-items: flex-start !important; }
    .align-items-xl-end { align-items: flex-end !important; }
    .align-items-xl-center { align-items: center !important; }
    .align-items-xl-baseline { align-items: baseline !important; }
    .align-items-xl-stretch { align-items: stretch !important; }
    .justify-content-xl-start { justify-content: flex-start !important; }
    .justify-content-xl-end { justify-content: flex-end !important; }
    .justify-content-xl-center { justify-content: center !important; }
    .justify-content-xl-between { justify-content: space-between !important; }
    .justify-content-xl-around { justify-content: space-around !important; }
    .justify-content-xl-evenly { justify-content: space-evenly !important; }
    .text-xl-start { text-align: start !important; }
    .text-xl-end { text-align: end !important; }
    .text-xl-center { text-align: center !important; }
}

@media (min-width: 1400px) {
    .order-xxl-first { order: -1; }
    .order-xxl-last { order: 13; }
    .order-xxl-0 { order: 0; }
    .order-xxl-1 { order: 1; }
    .order-xxl-2 { order: 2; }
    .order-xxl-3 { order: 3; }
    .order-xxl-4 { order: 4; }
    .order-xxl-5 { order: 5; }
    .d-xxl-none { display: none !important; }
    .d-xxl-inline { display: inline !important; }
    .d-xxl-inline-block { display: inline-block !important; }
    .d-xxl-block { display: block !important; }
    .d-xxl-grid { display: grid !important; }
    .d-xxl-flex { display: flex !important; }
    .d-xxl-inline-flex { display: inline-flex !important; }
    .align-items-xxl-start { align-items: flex-start !important; }
    .align-items-xxl-end { align-items: flex-end !important; }
    .align-items-xxl-center { align-items: center !important; }
    .align-items-xxl-baseline { align-items: baseline !important; }
    .align-items-xxl-stretch { align-items: stretch !important; }
    .justify-content-xxl-start { justify-content: flex-start !important; }
    .justify-content-xxl-end { justify-content: flex-end !important; }
    .justify-content-xxl-center { justify-content: center !important; }
    .justify-content-xxl-between { justify-content: space-between !important; }
    .justify-content-xxl-around { justify-content: space-around !important; }
    .justify-content-xxl-evenly { justify-content: space-evenly !important; }
    .text-xxl-start { text-align: start !important; }
    .text-xxl-end { text-align: end !important; }
    .text-xxl-center { text-align: center !important; }
}


/* ---- Ortak taşma kalkanları ----
   Bunlar ızgaranın parçası değil ama aynı amaca hizmet eder: hiçbir
   ekran boyutunda sayfa yatay kaymasın. */
/* img zaten dosyanın başında (satır ~78) ele alınmış; buradakiler
   onun kapsamadığı gömülü içerik türleri. */
svg, video, iframe, canvas {
    max-width: 100%;
}

table {
    max-width: 100%;
}

/* Geniş içerik (tablo, kod) kendi kutusunda kaysın, sayfayı kaydırmasın */
.tasabilir {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* --------------------------------------------------------------------------
   Sayfa metni blokları — art arda gelince boşluk katlanmasın

   "Giriş Paragrafı" ve "Sayfa Metni" eskiden tek bir .page-content
   kutusunun içindeydi. Blok olunca her biri kendi kutusuna girdi;
   üst üste geldiklerinde arada çift boşluk oluşmasın diye komşuluk
   kuralıyla kırpıyoruz. Görsel sonuç eskisiyle birebir aynı.

   ⚠ SEÇİCİLER "BAŞLIKSIZ" METİN BLOĞUNU HEDEFLER.
   "Sayfa Metni" bloğu kaldırılıp "Metin" bloğuna katılınca (bkz.
   2026_08_15_100000_sayfa_bloklarini_sadelestir.php) bu kural eski
   sınıf adıyla ölü kalmıştı ve kuruluş bildirgesi gibi sayfalarda
   giriş ile metin arasında çift boşluk oluşuyordu.

   :has() ile başlıklı olanlar dışarıda bırakılıyor: bölüm başlığı olan
   bir metin bloğunun üst boşluğu silinseydi başlık, giriş cümlesine
   yapışırdı.
   -------------------------------------------------------------------------- */
.blk-giris + .blk-metin:not(:has(.section-title)),
.blk-metin:not(:has(.section-title)) + .blk-metin:not(:has(.section-title)) {
    padding-top: 0;
}

.blk-giris:has(+ .blk-metin:not(:has(.section-title))) {
    padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   TAŞMA KALKANI

   Panelden girilen metinlerde uzun bir kelime, yapıştırılmış bir adres
   ya da büyük bir sayı kolonu zorlayıp sayfayı yatay kaydırabiliyor.
   Bu kural onları kırar.

   ⚠ GLOBAL YAPMA: menü ve buton yazılarına uygulanırsa onlar da
   ortadan bölünür. Yalnızca serbest metin taşıyan alanlar listelendi.
   -------------------------------------------------------------------------- */
.entry-content,
.entry-content a,
.member-title,
.news-card h3,
.team h2,
.commission-chair .chair-info h3,
.sayac strong,
.footer-cols li a,
.search-results h3,
.blk-vurgu p,
.gorsel-kutu figcaption,
.kutucuk-baslik,
.kutucuk-aciklama,
.belge-bilgi h3,
.tablo-kutu td {
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   992–1199 px BANDI

   Header'da satır kaydırma yalnızca ≤991px'te açılıyordu. Bu bandda
   7 üst menü öğesi + panelden büyütülebilen menü puntosu birleşince
   logo ve menü aynı satıra sığmayıp taşabiliyor.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .nav-bar-wrapper,
    .site-header .header-inner {
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   FOOTER — MARKA BLOĞUNUN YERİ

   Panel : Tasarım Ayarları → Footer → "Logo Konumu"
   Kaynak: app/Support/FooterLogo.php  (sekiz değerin TEK kaynağı)
   Blade : partials/footer.blade.php   → <footer data-logo="…">

   Marka bloğu = logo · slogan · iletişim satırı · sosyal medya
   Menü bloğu  = panelden yönetilen bağlantı sütunları

   --------------------------------------------------------------------------
   ⚠ SEKİZ SEÇENEK, SEKİZ KURAL DEĞİL
   --------------------------------------------------------------------------
   Değerler "konum-hiza" kalıbında (yan-sol · ust-orta · alt-sag …), bu
   yüzden kurallar tek tek yazılmıyor:

     [data-logo^='yan-']  sıra: yan yana   (yalnızca 992px ve üstünde)
     [data-logo^='alt-']  sıra: menülerin altında
     [data-logo$='-sol']  hiza: sola
     [data-logo$='-sag']  hiza: sağa
     (…-orta ve tanınmayan değer → ortalı, varsayılan)

   FooterLogo'ya yeni bir seçenek eklenirse bu kalıba uyduğu sürece
   burada hiçbir şey değişmez.

   --------------------------------------------------------------------------
   ⚠ HİZA HER GENİŞLİKTE GEÇERLİ, YAN YANA DİZİLİM DEĞİL
   --------------------------------------------------------------------------
   Yönetici "sola hizalı" seçtiyse telefonda da sola hizalı görür —
   seçimi ekran küçüldü diye iptal edilmiyor. Yan yana dizilim ise
   992px'in altında tek sütuna iner: 200 piksellik bir marka sütunu ile
   180 piksellik menü sütunlarını dar ekranda yan yana koymak ikisini de
   okunmaz yapardı.
   ========================================================================== */

/* Varsayılan: ortalı. Alt kurallar yalnızca gerekeni ezer. */
.site-footer {
    --footer-hiza: center;
    --footer-hiza-flex: center;
}

.site-footer[data-logo$='-sol'] {
    --footer-hiza: left;
    --footer-hiza-flex: flex-start;
}

.site-footer[data-logo$='-sag'] {
    --footer-hiza: right;
    --footer-hiza-flex: flex-end;
}

/* --------------------------------------------------------------------------
   SIRA: marka bloğu menülerin ALTINDA

   Şablonda marka bloğu önce geliyor (ekran okuyucu ve klavye için doğru
   sıra: kurumun kim olduğu, sonra bağlantılar). Görsel sırayı değiştiren
   şey "order"; DOM sırası korunuyor.
   -------------------------------------------------------------------------- */
.site-footer[data-logo^='alt-'] .footer-widgets > .container {
    display: flex;
    flex-direction: column;
}

.site-footer[data-logo^='alt-'] .footer-brand {
    order: 2;
    margin-top: 42px;
    margin-bottom: 0;
}

.site-footer[data-logo^='alt-'] .footer-cols {
    order: 1;
}

@media (min-width: 992px) {
    /* ----------------------------------------------------------------------
       SIRA: marka bloğu menülerin YANINDA

       Marka sütunu esnemiyor (minmax ile 200–280px arası), menü bloğu
       kalan yeri alıyor. align-items:start olmasa kısa olan blok uzayıp
       kendi zemininde ortalanırdı.
       ---------------------------------------------------------------------- */
    .site-footer[data-logo^='yan-'] .footer-widgets > .container {
        display: grid;
        gap: 40px;
        align-items: start;
    }

    .site-footer[data-logo^='yan-'] .footer-brand {
        margin-bottom: 0;
    }

    .site-footer[data-logo='yan-sol'] .footer-widgets > .container {
        grid-template-columns: minmax(200px, 280px) 1fr;
    }

    /* Sağa alınırken DOM sırası değişmiyor, yalnızca görsel sıra. */
    .site-footer[data-logo='yan-sag'] .footer-widgets > .container {
        grid-template-columns: 1fr minmax(200px, 280px);
    }

    .site-footer[data-logo='yan-sag'] .footer-brand {
        order: 2;
    }

    .site-footer[data-logo='yan-sag'] .footer-cols {
        order: 1;
    }
}

/* ---------------------------------------------------------------
   GÖRSEL ALANLARI — YÜKLENİRKEN SAYFA ZIPLAMASIN
   ---------------------------------------------------------------
   Bir görsel yüklenene kadar tarayıcı ne kadar yer kaplayacağını
   bilmiyor; yüklendiği an altındaki her şey aşağı kayıyor. Kullanıcı
   tam o sırada bir bağlantıya basmışsa yanlış yere basmış oluyor.
   Google bunu CLS (düzen kayması) diye ölçüyor ve sıralamaya katıyor.

   Çözüm: kutuya ORANINI baştan söylemek. Ölçüler panelde tanımlı
   kırpma oranlarının aynısı (app/Filament/Support/GorselAlani.php):

     haber        900:600    → 3 / 2
     slider      1920:760    → 48 / 19
     ekip üyesi   384:444    → 32 / 37

   ⚠ Bu oranlar panelde değişirse buradakiler de değişmeli; yoksa
   görsel kırpıldığı orandan farklı bir kutuya oturur.
   --------------------------------------------------------------- */
.news-card .thumb {
    aspect-ratio: 3 / 2;
}

.news-card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team header img {
    aspect-ratio: 32 / 37;
    object-fit: cover;
}

/* Üye logoları farklı oranlarda geliyor; oran veremeyiz ama kutunun
   yüksekliğini baştan ayırabiliriz. */
.member-item {
    min-height: 62px;
}

/* ---------------------------------------------------------------
   EKRANDA GÖRÜNMEYEN AMA OKUNAN METİN
   ---------------------------------------------------------------
   Ekran okuyucular ve arama motorları görsün, gözle görünmesin.

   ⚠ "display: none" ya da "visibility: hidden" DEĞİL: ikisi de metni
   erişilebilirlik ağacından siler, ekran okuyucu da okumaz. Bu yöntem
   metni ekranın dışına taşıyor — orada duruyor, sadece görünmüyor.
   --------------------------------------------------------------- */
.gorsel-gizli {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------
   ÇEREZ ONAY KARTI
   ---------------------------------------------------------------
   Yalnızca ziyaretçi ölçümü açıkken ve ziyaretçi henüz seçim
   yapmamışken görünür. İşaretleme: partials/cerez-bandi.blade.php

   ⚠ "hidden" özniteliği ile başlıyor; betik tercihi okuyup gerekiyorsa
   gösteriyor. Bu yüzden burada display kuralı YOK — tarayıcının kendi
   [hidden] davranışını ezersek kart her sayfada bir an görünür.

   ─────────────────────────────────────────────────────────────
   NEDEN TAM GENİŞLİK BANT DEĞİL, KÖŞEDE KART
   ─────────────────────────────────────────────────────────────
   Sayfanın alt kenarını baştan başa kaplayan bir bant, ekranın
   en altındaki içeriği (alt bilgi bağlantıları, form gönder
   düğmesi) tamamen örtüyordu. Köşeye çekilmiş dar bir kart aynı
   soruyu sorar ama sayfanın kalanını okunur bırakır.

   DAR EKRANDA kart kenardan kenara yayılır: telefonda 380 piksellik
   bir kartın "köşede" durması diye bir şey yok, ekranın kendisi
   380 piksel. Kenar boşluğu korunur ki kart ekrana yapışmasın.
   --------------------------------------------------------------- */
.cerez-bandi {
    position: fixed;
    z-index: 900;

    /* Telefon: alttan kenardan kenara, boşluklu */
    inset-inline: 12px;
    bottom: 12px;

    background: #ffffff;
    color: #1d1d1b;
    border: 1px solid #e0e0dc;
    border-radius: 4px;

    /*
       Gölge, kartı sayfanın ÜSTÜNDE bir katman olarak gösteriyor.
       Bant hâlinde gerekmiyordu (kenara yapışıktı); serbest duran
       bir kartta gölgesizlik onu içeriğin parçası gibi gösterirdi.
    */
    box-shadow: 0 6px 28px rgba(0, 0, 0, .16);
}

.cerez-bandi-ic {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
}

.cerez-bandi-yazi strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #1d1d1b;
}

.cerez-bandi-yazi p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: #4a4a48;
}

.cerez-bandi-yazi strong strong,
.cerez-bandi-yazi p strong {
    display: inline;
    font-family: inherit;
    font-size: inherit;
    margin: 0;
    color: #1d1d1b;
}

.cerez-bandi-yazi a {
    color: var(--accent, #2e7d32);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cerez-bandi-dugmeler {
    display: flex;
    gap: 10px;
}

.cerez-bandi-dugmeler button {
    flex: 1;
    padding: 11px 18px;
    border-radius: var(--radius, 2px);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    border: 1px solid transparent;

    /* Parmakla basılacak yer 44 pikselin altına inmesin */
    min-height: 44px;
}

/* ⚠ İki düğme de AYNI görsel ağırlıkta değil ama "Reddet" gizlenmiyor,
   küçültülmüyor, gri bırakılmıyor, ikinci satıra atılmıyor. Reddetmek
   kabul etmek kadar kolay olmalı — aksi hâlde verilen onay gerçek bir
   onay sayılmaz. İkisi de aynı genişlikte (flex: 1). */
/*
   Çerçeve markanın yeşili. Nötr gri bir çerçeve, iki düğmeyi farklı
   iki ailenin üyesi gibi gösteriyordu; aynı renkten çerçeve, ikisini
   de aynı kararın iki seçeneği yapıyor.

   Zemin beyaz kalıyor: dolgu da yeşil olsaydı "Reddet" ile "Kabul et"
   birbirine karışırdı.
*/
/*
   ⚠ SEÇİCİ "button.cerez-bandi-ret" — SADECE SINIF YETMİYOR.
   Yukarıdaki ".cerez-bandi-dugmeler button" kuralı borderı
   transparent yapıyor ve özgüllüğü (0,2,1) tek sınıftan (0,1,0)
   yüksek. Yalnız sınıfla yazıldığında çerçeve HİÇ görünmüyordu;
   ölçülerek bulundu (getComputedStyle → rgba(0,0,0,0)).
*/
.cerez-bandi-dugmeler button.cerez-bandi-ret {
    background: #ffffff;
    border-color: var(--accent, #2e7d32);
    color: var(--accent, #2e7d32);
}

.cerez-bandi-dugmeler button.cerez-bandi-ret:hover,
.cerez-bandi-dugmeler button.cerez-bandi-ret:focus-visible {
    border-color: var(--accent-hover, #1b5e20);
    background: #f2f8f3;
    color: var(--accent-hover, #1b5e20);
}

.cerez-bandi-kabul {
    background: var(--accent, #2e7d32);
    color: #fff;
}

.cerez-bandi-kabul:hover,
.cerez-bandi-kabul:focus-visible {
    background: var(--accent-hover, #1b5e20);
}

/* Masaüstü: sol alt köşede dar kart */
@media (min-width: 768px) {
    .cerez-bandi {
        inset-inline: auto;
        inset-inline-start: 24px;
        bottom: 24px;
        width: 380px;

        /*
           Dar ekranla geniş ekran arasındaki geçişte kartın
           taşmaması için: 380 piksel sabit ama ekran daralırsa
           kenar boşluğunu koruyarak küçülür.
        */
        max-width: calc(100vw - 48px);
    }

    .cerez-bandi-ic {
        padding: 24px;
    }
}

/* Yazdırırken kart çıkmasın */
@media print {
    .cerez-bandi {
        display: none;
    }
}

/* ==========================================================================
   FORM BLOĞU
   ==========================================================================
   Şablon : resources/views/blocks/form.blade.php
   Panel  : Formlar → Formlar

   Alan genişliği panelden geliyor ("tam" / "yarım"). Yarım alanlar
   masaüstünde yan yana, DAR EKRANDA HER KOŞULDA ALT ALTA dizilir —
   telefonda iki sütunlu form doldurulamaz hâle gelir.
   ========================================================================== */

.blk-form .form-baslik {
    margin: 0 0 18px;
}

.blk-form .form-giris {
    max-width: 62ch;
    margin: 0 0 28px;
}

.cecop-form {
    max-width: 760px;
}

/* --- Alan ızgarası ------------------------------------------------------ */

/*
   ON İKİ SÜTUN — sayfa bloklarındaki ızgarayla aynı mantık.

   Her alan kendi oranı kadar sütun kaplıyor; oran panelde seçiliyor ve
   satır içi stille geliyor (--alan-en). Değer yoksa tam satır: eski
   kayıtlar ve bozuk veriler geniş çıksın, dar değil.

   ⚠ SATIRI IZGARA KENDİ KURUYOR. Sıradaki alan kalan yere sığmıyorsa
   grid onu bir alta indiriyor (grid-auto-flow varsayılanı "row";
   "dense" DEĞİL — dense olsaydı sonraki dar alan geriye dönüp boşluğu
   doldurur ve alanların sırası ekranda karışırdı).

   ⚠ 700 PİKSELİN ALTINDA HEPSİ TAM GENİŞLİK. Yarım satırlık bir alan
   telefonda ~150 piksele iner; etiket sığmaz, açılır liste okunmaz.
   Veride bir değişiklik olmuyor, yalnızca görünüm değişiyor.
*/
.form-alanlar {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 20px;
}

.form-alan {
    grid-column: span 12;
    /* Uzun etiketler ve geniş girdiler sütunu şişirmesin. */
    min-width: 0;
}

@media (min-width: 700px) {
    .form-alan {
        grid-column: span var(--alan-en, 12);
    }
}

/* --- Etiket ve girdiler ------------------------------------------------- */

.form-etiket {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    color: var(--heading);
}

.form-yildiz {
    color: #b5432f;
    margin-left: 2px;
}

.cecop-form input[type="text"],
.cecop-form input[type="email"],
.cecop-form input[type="tel"],
.cecop-form input[type="number"],
.cecop-form input[type="file"],
.cecop-form select,
.cecop-form textarea {
    width: 100%;
    padding: 11px 13px;
    font-family: inherit;
    font-size: var(--font-size);
    line-height: 1.4;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    /* Kutu ölçüsü kenarlıkla birlikte: ızgara hücresini taşırmasın. */
    box-sizing: border-box;
}

.cecop-form textarea {
    resize: vertical;
    min-height: 120px;
}

.cecop-form input:focus,
.cecop-form select:focus,
.cecop-form textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}

/* Dosya seçici: tarayıcıların kendi düğmesi zeminden ayrışsın. */
.cecop-form input[type="file"] {
    padding: 9px 11px;
    background: var(--bg-light);
}

/* --- Seçenek listeleri -------------------------------------------------- */

.form-secenekler {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-secenek,
.form-onay {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    cursor: pointer;
    line-height: 1.45;
    /*
     | Dokunma hedefi en az 24 piksel (WCAG 2.2 · 2.5.8).
     | Kutunun kendisi 18 piksel; parmakla işaretlemek için satırın
     | tamamı hedef oluyor — etiket kutuyu sarmaladığı için satırın
     | herhangi bir yerine dokunmak yetiyor.
     */
    min-height: 24px;
    padding-block: 2px;
}

.form-secenek input,
.form-onay input {
    /* Dokunma hedefi: parmakla işaretlenebilecek kadar büyük. */
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    flex: 0 0 auto;
    accent-color: var(--accent);
}

/* --- İpucu ve hata ------------------------------------------------------ */

.form-ipucu {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--text);
    opacity: .75;
}

.form-hata {
    margin: 6px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: #b5432f;
}

.form-alan-hatali input,
.form-alan-hatali select,
.form-alan-hatali textarea {
    border-color: #b5432f;
}

/* --- Sonuç şeritleri ---------------------------------------------------- */

.form-sonuc {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 15px 18px;
    margin: 0 0 24px;
    max-width: 760px;
    border-radius: var(--radius);
    border-left: 3px solid;
}

.form-sonuc p {
    margin: 0;
}

.form-sonuc-basarili {
    background: #eef7f0;
    border-left-color: #2fa84f;
    color: #1e5c31;
}

.form-sonuc-hata {
    background: #fbeeec;
    border-left-color: #b5432f;
    color: #7d2a1c;
}

.form-sonuc-ikon {
    flex: 0 0 auto;
    line-height: 0;
    margin-top: 2px;
}

/* --- Düğme satırı ------------------------------------------------------- */

.form-dugmeler {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 26px;
}

.form-zorunlu-notu {
    margin: 0;
    font-size: 12px;
    color: var(--text);
    opacity: .75;
}

.form-turnstile {
    margin-top: 22px;
}

/* --------------------------------------------------------------------------
   BAL KÜPÜ  ·  1. koruma katmanı
   --------------------------------------------------------------------------
   ⚠ BU KURAL KALDIRILIRSA GİZLİ ALAN EKRANDA GÖRÜNÜR ve ziyaretçi onu
   doldurur; gönderisi bot sanılıp reddedilir.

   display:none KULLANILMIYOR — gelişmiş botlar gizlenmiş alanları
   atlıyor. Alan "görünür" kalıyor, yalnızca ekran dışına alınıyor.
   Şablon tarafında aria-hidden ve tabindex="-1" de var: ekran okuyucu
   duyurmuyor, klavyeyle sekme sırasına girmiyor.

   Bkz. app/Support/BotKalkani.php · resources/views/blocks/form.blade.php
   -------------------------------------------------------------------------- */

.form-kupe {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media print {
    .cecop-form,
    .form-sonuc-hata {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   ONAY KUTUSU  ·  yanındaki belge bağlantısı (KVKK aydınlatma metni gibi)
   --------------------------------------------------------------------------
   ⚠ Bağlantı, etiketin DIŞINDA — şablonda kutu ve etiket kardeş öge.
   Etiket kutuyu sarmalasaydı bağlantıya basmak kutuyu da işaretlerdi ve
   metni okumak isteyen ziyaretçi farkında olmadan onay vermiş olurdu.
   Bkz. resources/views/blocks/form.blade.php
   -------------------------------------------------------------------------- */

.form-onay label {
    cursor: pointer;
}

.form-onay-metin {
    display: inline;
}

.form-onay-baglanti {
    margin-left: 4px;
    text-decoration: underline;
    text-underline-offset: 2px;
}


/* --------------------------------------------------------------------------
   ZENGİN METİN ÇIKTISI
   --------------------------------------------------------------------------
   Panel editörünün araç çubuğu genişletildi (bkz.
   app/Filament/Support/MetinEditoru.php). Buradaki kurallar o araçların
   ürettiği etiketlerin sitedeki karşılığı.

   ⚠ EDİTÖRE ARAÇ EKLERSEN STİLİNİ DE BURAYA EKLE. Aksi hâlde yönetici
   panelde düzgün görür, ziyaretçi sitede biçimsiz bulur.
   Eşleme listesi MetinEditoru sınıfının başında; testi
   tests/Feature/MetinEditoruTest.php.
   -------------------------------------------------------------------------- */

/* Üçüncü seviye başlık (h4)
   h2 ve h3 dosyanın başında ele alınmıştı; h4 araç çubuğuyla birlikte
   geldi. Kuralı olmasaydı tarayıcı varsayılanına düşer ve gövde
   metninden KÜÇÜK görünürdü — başlık gibi durmazdı. */
.entry-content h4 {
    font-size: calc(var(--h3-size) * 0.86);
    margin-top: 24px;
}

.entry-content h4:first-child {
    margin-top: 0;
}

/* Numaralı liste
   ul özel işaretlerle kurulmuş (dosyanın başında); ol tarayıcı
   varsayılanındaydı ve iki liste türü yan yana gelince girintileri
   tutmuyordu. Aynı girinti ve satır aralığı veriliyor. */
.entry-content ol {
    padding-left: 22px;
    margin: 0 0 16px;
}

.entry-content ol li {
    margin-bottom: 9px;
    padding-left: 4px;
}

/* Metin içi alıntı
   Blok olarak eklenen "Vurgu Kutusu" ile karıştırma: bu, bir metnin
   İÇİNE konan alıntı. Aynı görsel dili kullanıyor (sol kenarda yeşil
   çizgi) ama daha hafif. */
.entry-content blockquote {
    margin: 20px 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--border);
    border-left-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    color: #5a5a5a;
    font-style: italic;
}

.entry-content blockquote > *:last-child {
    margin-bottom: 0;
}

/* Vurgulama (highlight) — kalemle çizilmiş etki */
.entry-content mark {
    background: #fff3b0;
    color: inherit;
    padding: 0 3px;
    border-radius: 2px;
}

/* Küçük punto (small) — dipnot, kaynak, açıklama */
.entry-content small {
    font-size: 85%;
    color: var(--faint, #8b9b91);
}

/* Yatay çizgi (horizontalRule) — bölüm ayracı */
.entry-content hr {
    height: 1px;
    border: 0;
    background: var(--border);
    margin: 32px 0;
}

/* Satır içi kod (code) */
.entry-content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .92em;
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 5px;
    /* Uzun bir kod parçası dar ekranda sayfayı kaydırmasın */
    overflow-wrap: anywhere;
}

/* Kod bloğu (codeBlock) — kendi kutusunda yatay kayar */
.entry-content pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 21px;
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin: 20px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.entry-content pre code {
    background: none;
    border: 0;
    padding: 0;
    font-size: inherit;
    overflow-wrap: normal;
}

/* Açılır bölüm (details) — sık sorulan soru kalıbı */
.entry-content details {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0 18px;
    margin: 14px 0;
}

.entry-content details > summary {
    cursor: pointer;
    padding: 14px 0;
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--heading);
    /* Varsayılan üçgen kalıyor: kullanıcıya "burası açılır" diyen
       tanıdık işaret o. Gizlemek erişilebilirliği zayıflatır. */
    list-style-position: outside;
}

.entry-content details[open] > summary {
    border-bottom: 1px solid var(--border);
    margin-bottom: 14px;
}

.entry-content details > *:last-child {
    margin-bottom: 14px;
}

/* Editör içindeki tablo (table)
   Blok olarak eklenen tabloyla karıştırma: bu, bir METNİN İÇİNE konan
   tablo. Tablo bloğunun kendi kutusu ve ayarları var (aşağıda). */
.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 13px;
    line-height: 21px;
}

.entry-content th,
.entry-content td {
    border: 1px solid var(--border);
    padding: 9px 12px;
    text-align: left;
    vertical-align: top;
}

.entry-content th {
    background: var(--bg-light);
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--heading);
}

/* İki sütunlu düzen (grid)
   Editör şu yapıyı üretiyor:
     <div class="grid-layout" data-cols="2" data-from-breakpoint="md"
          style="grid-template-columns: repeat(2, 1fr)">
       <div class="grid-layout-col" data-col-span="1" style="grid-column: span 1">

   Satır içi stil sütunları kuruyor; display:grid'i burada veriyoruz.
   Bu kural olmadan sütunlar alt alta düşerdi. */
.entry-content .grid-layout {
    display: grid;
    gap: 24px;
    margin: 20px 0;
}

.entry-content .grid-layout > *:first-child > *:first-child,
.entry-content .grid-layout-col > *:first-child {
    margin-top: 0;
}

/* ⚠ DAR EKRANDA SÜTUNLAR ALT ALTA — ŞART.
   İki sütunlu bir metin telefonda sütun başına ~150 piksele düşer;
   Türkçe kelimeler sığmaz, satırlar kırılır. Satır içi
   grid-template-columns ezilmek zorunda olduğu için !important
   kullanılıyor — dosyadaki tek yer, gerekçesi bu. */
@media (max-width: 767px) {
    .entry-content .grid-layout {
        grid-template-columns: 1fr !important;
        gap: 18px;
    }
}


/* --------------------------------------------------------------------------
   VİDEO BLOĞU
   --------------------------------------------------------------------------
   Blade : resources/views/blocks/video.blade.php
   -------------------------------------------------------------------------- */

.video-kutu {
    position: relative;
    /* Oran kutusu: yüksekliği ekran genişliğinden hesaplanır.
       Sabit piksel yüksekliği verilseydi video telefonda ya kırpılır
       ya da altında siyah bant kalırdı. */
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--radius);
    overflow: hidden;
}

.video-kutu iframe,
.video-kutu video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}


/* --------------------------------------------------------------------------
   BELGE BLOĞU
   --------------------------------------------------------------------------
   Blade : resources/views/blocks/belge.blade.php
   Gömülü görüntüleyici yalnızca geniş ekranda ve betikle ekleniyor;
   gerekçesi blade dosyasının başında.
   -------------------------------------------------------------------------- */

.belge-kutu {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.belge-cerceve {
    display: block;
    width: 100%;
    /* Ekranın dörtte üçü: belge okunacak kadar büyük, sayfanın geri
       kalanının varlığını unutturmayacak kadar sınırlı. */
    height: min(75vh, 860px);
    border: 0;
    border-bottom: 1px solid var(--border);
}

.belge-kart {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
    background: var(--bg-light);
}

.belge-ikon {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    color: var(--accent);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.belge-bilgi {
    flex: 1 1 auto;
    /* min-width:0 olmadan uzun bir belge adı esnek kutuyu şişirir ve
       düğmeleri ekran dışına iter. */
    min-width: 0;
}

.belge-bilgi h3 {
    margin: 0 0 4px;
    font-size: 16px;
    line-height: 24px;
}

.belge-bilgi p {
    margin: 0 0 6px;
}

.belge-ozellik {
    display: block;
    font-family: var(--font-heading);
    font-size: 11px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--faint, #8b9b91);
}

.belge-dugmeler {
    flex: none;
    display: flex;
    gap: 10px;
}


/* --------------------------------------------------------------------------
   TABLO BLOĞU
   --------------------------------------------------------------------------
   Blade    : resources/views/blocks/tablo.blade.php
   Biçimleme: app/Support/Tablo.php
   -------------------------------------------------------------------------- */

.tablo-kutu {
    /* Tablo KENDİ kutusunda kayar; sayfa yerinde durur. */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    /* Kutunun sonuna gelince sayfanın kaymaya başlamasını engeller —
       uzun tabloda yanlışlıkla sayfa sonuna atlanmasın. */
    overscroll-behavior-x: contain;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.tablo-kutu:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.tablo-kutu--suruklenirken {
    cursor: grabbing;
    user-select: none;
}

.tablo-kutu table {
    width: 100%;
    /* max-width:100% genel kuralı burada ezilmeli: tablo kutudan geniş
       olabilmeli ki kaydırma diye bir şey olsun. */
    max-width: none;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 22px;
}

.tablo-kutu th,
.tablo-kutu td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
    /* Hücreler belli bir enin altına inmesin: 8 sütunlu bir tablo
       telefona sığdırılmaya çalışılsaydı her sütun üç karakter
       genişliğinde kalır, tablo okunmaz olurdu. Sabit bir tablo
       genişliği yerine hücre eni sınırlanıyor; böylece 2 sütunlu
       tablolar telefonda gereksiz yere kaymıyor. */
    min-width: 88px;
}

/* İlk sütun genelde satırın adıdır — ona daha çok yer. */
.tablo-kutu tr > *:first-child {
    min-width: 132px;
}

.tablo-kutu tbody tr:last-child > * {
    border-bottom: 0;
}

/* Sayısal sütunlar — Tablo::bicimle() işaretliyor */
.tablo-kutu [data-hiza="sag"] {
    text-align: right;
    /* Rakamlar eşit genişlikte basılır; basamaklar alt alta hizalanır. */
    font-variant-numeric: tabular-nums;
}

/* Şeritli satırlar.
   ⚠ tr'lere zemin VERİLİYOR (şerit kapalıyken bile beyaz): sabit ilk
   sütun bunu miras alıyor. Zemin olmasaydı sabit hücre saydam kalır ve
   altından kayan hücreler görünürdü. */
.tablo-kutu tbody tr {
    background: #fff;
}

.tablo-kutu--seritli tbody tr:nth-child(even) {
    background: var(--bg-light);
}

/* Başlık satırı */
.tablo-kutu--baslikli thead th {
    background: #eef4ee;
    background: color-mix(in srgb, var(--accent) 9%, #fff);
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--heading);
    border-bottom: 2px solid var(--border);
    border-bottom-color: color-mix(in srgb, var(--accent) 35%, transparent);
    white-space: nowrap;
}

/* Sabit ilk sütun — yatay kaydırırken solda kalır */
.tablo-kutu--ilk-sabit tbody tr > *:first-child,
.tablo-kutu--ilk-sabit thead tr > *:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: inherit;
    /* Kayan hücrelerle arasında görünür bir sınır kalsın */
    box-shadow: 1px 0 0 var(--border);
}

.tablo-kutu--ilk-sabit thead tr > *:first-child {
    z-index: 3;
    background: #eef4ee;
    background: color-mix(in srgb, var(--accent) 9%, #fff);
}

/* Uzun tablo: kutu dikey de kayar, başlık üstte asılı kalır.
   ⚠ SINIF YALNIZCA 15 SATIRDAN UZUN TABLOLARA VERİLİYOR
   (bkz. blocks/tablo.blade.php). Her tabloya verilseydi kısa
   tablolarda gereksiz bir iç kaydırma kutusu oluşur, telefonda
   sayfayı kaydırmak isteyen parmak tabloyu kaydırırdı. */
.tablo-kutu--uzun {
    max-height: min(70vh, 620px);
    overscroll-behavior: contain;
}

.tablo-kutu--uzun.tablo-kutu--baslikli thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.tablo-kutu--uzun.tablo-kutu--baslikli.tablo-kutu--ilk-sabit thead tr > *:first-child {
    z-index: 4;
}

.tablo-kaynak {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 20px;
    color: var(--faint, #8b9b91);
}


/* --------------------------------------------------------------------------
   GÖMÜLÜ KOD BLOĞU
   --------------------------------------------------------------------------
   Blade : resources/views/blocks/gomulu-kod.blade.php
   Kutunun tek işi taşmayı sınırlamak: içine konan harita/takvim
   çerçeveleri dar ekranda sayfayı yatay kaydırmasın.
   -------------------------------------------------------------------------- */

.gomulu-kutu {
    max-width: 100%;
    overflow-x: auto;
}

.gomulu-kutu > iframe {
    max-width: 100%;
    /* Gömme kodları çoğu zaman yükseklik vermiyor; 0 piksellik bir
       çerçeve "hiçbir şey olmadı" gibi görünürdü. */
    min-height: 320px;
    border: 0;
}


/* --------------------------------------------------------------------------
   KUTUCUK IZGARASI  ·  Komisyonlar ve Kurullar
   --------------------------------------------------------------------------
   Blade : resources/views/partials/kutucuk-izgara.blade.php
           resources/views/blocks/komisyonlar.blade.php
           resources/views/blocks/kurullar.blade.php
   -------------------------------------------------------------------------- */

.kutucuk-izgara {
    display: grid;
    /* Sütun sayısı panelden geliyor: --kutucuk-sutun */
    grid-template-columns: repeat(var(--kutucuk-sutun, 3), minmax(0, 1fr));
    gap: 20px;
}

.kutucuk {
    position: relative;
    display: block;
    /* Kare. İçerik sığmazsa kutucuk uzar — oran, içeriği kırpmaz. */
    aspect-ratio: 1;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--heading);
    text-decoration: none;
    overflow: hidden;
    transition: background-color .25s ease, border-color .25s ease;
}

.kutucuk-ic {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 22px;
    text-align: center;
}

.kutucuk-baslik {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: var(--heading);
}

/* Açıklama — iki katmanlı sarmalayıcı.
   Dış katman yüksekliği 0fr'den 1fr'e açan ızgara; iç katman taşmayı
   kesen kutu. Böylece "ne kadar uzun olursa olsun" yumuşak açılıyor ve
   uydurma bir piksel yüksekliği gerekmiyor. */
.kutucuk-aciklama {
    display: grid;
    grid-template-rows: 1fr;
    margin-top: 10px;
    font-size: 13px;
    line-height: 21px;
    color: var(--text);
}

.kutucuk-aciklama > span {
    overflow: hidden;
}

/* ⚠ AYRIM EKRAN GENİŞLİĞİYLE DEĞİL, İŞARETLEYİCİYLE YAPILIYOR.
   "Üstüne gelmek" dokunmatik ekranda yoktur. Ölçülen şey ekranın kaç
   piksel olduğu değil, cihazın fare gibi bir işaretleyicisi olup
   olmadığı — böylece dokunmatik bir dizüstü de doğru davranıyor:
   açıklama orada da hep görünür kalır. */
@media (hover: hover) {
    .kutucuk-aciklama {
        grid-template-rows: 0fr;
        margin-top: 0;
        opacity: 0;
        transition: grid-template-rows .28s ease, margin-top .28s ease, opacity .2s ease;
    }

    .kutucuk:hover,
    .kutucuk:focus-visible {
        background: #f2f8f2;
        background: color-mix(in srgb, var(--accent) 8%, #fff);
        border-color: var(--accent);
    }

    /* Klavyeyle gezen kişi de aynı bilgiyi görsün. */
    .kutucuk:hover .kutucuk-aciklama,
    .kutucuk:focus-visible .kutucuk-aciklama {
        grid-template-rows: 1fr;
        margin-top: 10px;
        opacity: 1;
    }
}

/* Hareketi azaltılmış tercih edilen cihazlarda geçiş yok —
   açılma anında olsun, kayarak değil. */
@media (prefers-reduced-motion: reduce) {
    .kutucuk,
    .kutucuk-aciklama {
        transition: none;
    }
}

@media (max-width: 991px) {
    /* Orta genişlikte en çok 2 kutucuk: 4 sütun burada 200 piksele
       düşer, uzun komisyon adları sığmaz. */
    .kutucuk-izgara {
        grid-template-columns: repeat(min(var(--kutucuk-sutun, 3), 2), minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .kutucuk-izgara {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* ⚠ TELEFONDA KARE DEĞİL.
       Tam genişlikte bir kare, ekranın neredeyse tamamını kaplar;
       altı komisyonu görmek için altı ekran boyu kaydırmak gerekirdi.
       Kutucuk içeriği kadar yer kaplıyor. */
    .kutucuk {
        aspect-ratio: auto;
    }

    .kutucuk-ic {
        position: static;
        padding: 20px 18px;
    }
}

/* Belge kartı ve tablo — dar ekran */
@media (max-width: 767px) {
    .belge-kart {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .belge-ikon {
        margin: 0 auto;
    }

    .belge-dugmeler {
        flex-direction: column;
    }

    /* Parmakla ıskalanmasın diye düğmeler tam genişlik */
    .belge-dugmeler .btn {
        text-align: center;
    }

    .tablo-kutu th,
    .tablo-kutu td {
        padding: 10px 13px;
        font-size: 13px;
    }
}


/* --------------------------------------------------------------------------
   BLOK SATIRLARI  ·  yan yana dizilen bloklar
   --------------------------------------------------------------------------
   Blade  : resources/views/partials/blocks.blade.php
   Mantık : app/Filament/Support/BlokGenisligi.php

   Panelde bir bloğa genişlik verildiğinde (satırın 1/2'si, 1/3'ü…)
   ardışık bloklar aynı satırı paylaşıyor. Sarmalayıcı YALNIZCA satırda
   birden fazla blok varsa basılıyor; tek bloklu satırlar eski markup'ı
   aynen kullanıyor ve bu bölümdeki hiçbir kural onlara değmiyor.
   -------------------------------------------------------------------------- */

.blok-satir-ic {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 40px;
    align-items: start;
}

.blok-sutun {
    /*
       Hem BAŞLANGIÇ sütunu hem genişlik blade'den geliyor:
       style="--sutun-basla: 4; --sutun-en: 6"

       ⚠ BAŞLANGIÇ ŞART. Yalnızca "span 6" denseydi blok kendiliğinden
       1. sütundan başlar, yani satırın soluna yapışırdı; "ortada dursun"
       ve "sağda dursun" seçeneklerinin hiçbir karşılığı olmazdı.
       Hesap: app/Filament/Support/BlokGenisligi.php → satiriYerlestir()
    */
    grid-column: var(--sutun-basla, 1) / span var(--sutun-en, 12);
    min-width: 0;
}

/* --------------------------------------------------------------------------
   ⚠ İÇ BLOKLARIN KENDİ SARMALAYICILARI ETKİSİZLEŞTİRİLİYOR
   --------------------------------------------------------------------------
   Her blok kendi <section class="section"><div class="container"> yapısını
   basıyor. Yan yana geldiklerinde bu iç içe giriyor: bölüm boşluğu iki kez
   uygulanıyor ve iç container kendi azami genişliğiyle sütunu daraltıyor.

   Dış sarmalayıcı zaten bölüm boşluğunu ve içerik genişliğini veriyor;
   burada iç olanlar pas geçiliyor.

   ⚠ ALTERNATİFİ 17 BLOK GÖRÜNÜMÜNE "ÇIPLAK MOD" EKLEMEKTİ. Her yeni
   blokta hatırlanması gereken, unutulduğunda sessizce bozan bir kural
   olurdu. Buradaki üç kural ise blok sayısından bağımsız çalışıyor.
   -------------------------------------------------------------------------- */
.blok-sutun > .section,
.blok-sutun > .page-content {
    padding-block: 0;
}

.blok-sutun .container {
    max-width: none;
    padding-inline: 0;
    width: 100%;
}

/* Sütun içindeki bölüm başlığı sola yaslanıyor: dar bir sütunda
   ortalanmış başlık ve altındaki kısa çizgi asılı duruyordu. */
.blok-sutun .section-title {
    text-align: start;
    margin-bottom: 24px;
}

.blok-sutun .section-title .divider {
    margin-inline: 0;
}

/* --------------------------------------------------------------------------
   DAR EKRAN — bloklar alt alta
   --------------------------------------------------------------------------
   ⚠ 992 PİKSELİN ALTINDA YAN YANA DİZİLİM BİTİYOR.
   Yarım satırlık bir blok tablette 330, telefonda 160 piksele düşüyor;
   Türkçe kelimeler sığmıyor, görsellerin oranı bozuluyor.

   Aynı eşik panelde de var (theme.css → §25) ki yönetici düzeni kurarken
   ziyaretçinin göreceğiyle aynı kuralı görsün.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .blok-satir-ic {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    /*
       ⚠ BAŞLANGIÇ SÜTUNU DA SIFIRLANMALI.
       Tek sütunlu ızgarada "4. sütundan başla" diyen bir blok, olmayan
       bir sütun isteyeceği için ızgara kendiliğinden yeni sütunlar
       üretir ve satır yatay olarak taşar. Yalnızca span'ı ezmek yetmez.
    */
    .blok-sutun {
        grid-column: 1 / span 1;
    }
}


/* ==========================================================================
   WHATSAPP DÜĞMESİ
   --------------------------------------------------------------------------
   Şablon : resources/views/partials/whatsapp-dugmesi.blade.php
   Veri   : Ayarlar → Tasarım Ayarları → İletişim ve Sosyal Medya

   Numara girilmemişse şablon hiç basmıyor; burada gizleme kuralı yok.
   ========================================================================== */
.whatsapp-dugme {
    position: fixed;
    right: 22px;
    bottom: var(--yuzen-alt);
    z-index: 150;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;

    /*
       WhatsApp'ın kendi yeşili (#25D366) DEĞİL, sitenin vurgu rengi.
       Marka rengini kullanmak düğmeyi sayfadan kopuk bir yama hâline
       getiriyordu; ayrıca vurgu rengi panelden değiştirilebiliyor ve
       düğme onu takip etmeli.
    */
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.whatsapp-dugme:hover,
.whatsapp-dugme:focus-visible {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

.whatsapp-dugme svg {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .whatsapp-dugme {
        transition: none;
    }
}

/*
   ÇEREZ KARTI AÇIKKEN DÜĞMELER YUKARI KAYIYOR.

   ⚠ YALNIZCA TELEFONDA GEREKLİ: geniş ekranda kart SOL altta, düğmeler
   sağda. Telefonda kart kenardan kenara olduğu için düğmelerin üstünü
   kapatıyordu.

   Kart baştan "hidden" olarak basılıyor ve betik tercihi okuyup
   gerekiyorsa gösteriyor (bkz. partials/cerez-bandi.blade.php); bu
   yüzden ":not([hidden])" kartın GERÇEKTEN görünür olduğu anı yakalıyor.
*/
@media (max-width: 767px) {
    body:has(#cerez-bandi:not([hidden])) {
        --yuzen-alt: 200px;
    }
}