/*
 * Fethiye Kültür Sanat Takvimi
 *
 * Kararların gerekçesi DESIGN.md içinde. Özet:
 *   - Editoryal liste, kart duvarı değil. Zaman birinci eksen.
 *   - Tek yazı ailesi, sabit rem ölçek, ağırlık kontrastı.
 *   - Tek vurgu rengi (amber) yalnızca "şu an seçili" için.
 *   - Harici kaynak yok: font, ikon, CDN hiçbiri.
 *
 * Derleme adımı yoktur; bu dosya tarayıcıya olduğu gibi gider.
 */

/* ===================================================================
 * 1. Tokenler
 * =================================================================== */

:root {
    /* Kimlik — öneri metninden gelir, korunur */
    --lacivert:      #1e3a52;
    --lacivert-koyu: #152a3c;
    --amber:         #e8a33d;

    /* Yüzeyler. Gövde zemini markanın hue'suna doğru hafif kırılmış
     * nötr; sıcak krem DEĞİL (bkz. DESIGN.md §2). */
    --kagit:  #f4f5f7;
    --kart:   #ffffff;
    --panel:  #eef0f3;

    /* Mürekkep */
    --metin:       #17222c;
    --metin-soluk: #5a6672;
    /* Üçüncü gri tonu. #828d97 iken gövde zemininde 3,1:1 veriyordu;
     * küçük yazıda okunmuyordu. Koyultuldu: hiyerarşiyi gri değil
     * boyut ve ağırlık taşır. */
    --metin-silik: #656f79;

    --cizgi:      #dfe3e8;
    --cizgi-koyu: #c7ced6;

    /* Durum */
    --basari: #1a7f4b;
    --hata:   #b4242a;
    --uyari:  #8a5a10;

    /* Tipografi — sabit ölçek, oran ~1,2 */
    --yazi-xs:   .75rem;
    --yazi-sm:   .8125rem;
    --yazi-md:   .875rem;
    --yazi-base: 1rem;
    --yazi-lg:   1.125rem;
    --yazi-xl:   1.375rem;
    --yazi-2xl:  1.75rem;

    /* Aralık */
    --ar-1: .25rem;
    --ar-2: .5rem;
    --ar-3: .75rem;
    --ar-4: 1rem;
    --ar-5: 1.5rem;
    --ar-6: 2rem;
    --ar-7: 3rem;

    --yuvarlak:       10px;
    --yuvarlak-kucuk: 6px;
    --genislik:       74rem;

    /* Kiril harfleri kapsayan sistem yığını; harici font indirilmez */
    --yazi: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
            "Noto Sans", "Liberation Sans", Arial, sans-serif;

    --gecis: 160ms cubic-bezier(.33, 1, .68, 1);

    /* Anlamlı katman ölçeği — rastgele 999 yok */
    --kat-yapiskan: 10;
    --kat-ustbar:   20;
    --kat-buyutec:  30;
}

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

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

body {
    margin: 0;
    background: var(--kagit);
    color: var(--metin);
    font: var(--yazi-base)/1.6 var(--yazi);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    margin: 0;
    line-height: 1.2;
    letter-spacing: -.015em;
    text-wrap: balance;
}

p { margin: 0; }

a { color: var(--lacivert); text-underline-offset: .18em; }

:focus-visible {
    outline: 3px solid var(--amber);
    outline-offset: 2px;
    border-radius: 2px;
}

img { max-width: 100%; height: auto; }

/* Ekran okuyucuya açık, göze kapalı */
.gizli {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.atla {
    position: absolute;
    left: -9999px;
    background: var(--lacivert);
    color: #fff;
    padding: var(--ar-3) var(--ar-4);
    z-index: var(--kat-ustbar);
}
.atla:focus { left: 0; top: 0; }

/* Honeypot: insana ve ekran okuyucuya görünmez */
.tuzak { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ===================================================================
 * 2. Üst bar
 * =================================================================== */

.ust {
    background: var(--lacivert);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: var(--kat-ustbar);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--ar-4) var(--ar-5);
    padding: var(--ar-3) var(--ar-4);
}

.ust > * { min-width: 0; }

.marka {
    color: #fff;
    text-decoration: none;
    font-size: var(--yazi-lg);
    font-weight: 800;
    letter-spacing: -.02em;
    white-space: nowrap;
}
.marka b { color: var(--amber); font-weight: 800; }

.gezinme { display: flex; flex-wrap: wrap; gap: var(--ar-4); }
.gezinme a {
    color: #fff;
    text-decoration: none;
    font-size: var(--yazi-md);
    font-weight: 500;
    padding: var(--ar-1) 0;
    border-bottom: 2px solid transparent;
    transition: border-color var(--gecis);
}
.gezinme a:hover { border-bottom-color: rgb(255 255 255 / 45%); }

/* Dil seçicisi */
.dil-secici { display: flex; align-items: center; gap: var(--ar-2); }
.dil-secici label { font-size: var(--yazi-xs); opacity: .85; }
.dil-secici select {
    background: var(--lacivert-koyu);
    color: #fff;
    border: 1px solid rgb(255 255 255 / 22%);
    border-radius: var(--yuvarlak-kucuk);
    padding: .3rem .5rem;
    font: inherit;
    font-size: var(--yazi-sm);
}
.dil-secici option { color: var(--metin); background: #fff; }

/* Vekâlet şeridi — her sayfada görünür durur (şartname §2.1) */
.vekalet-serit {
    background: var(--amber);
    color: var(--lacivert-koyu);
    padding: var(--ar-2) var(--ar-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--ar-3);
    align-items: center;
    justify-content: center;
    font-size: var(--yazi-md);
    font-weight: 600;
}

/* ===================================================================
 * 3. Sayfa düzeni
 * =================================================================== */

.sayfa {
    max-width: var(--genislik);
    margin: 0 auto;
    padding: var(--ar-6) var(--ar-4) var(--ar-7);
}
.sayfa--dar { max-width: 44rem; }

.sayfa--iki-sutun {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 19rem;
    gap: var(--ar-6);
    align-items: start;
}

.ana-sutun { min-width: 0; }

.yan-sutun {
    display: flex;
    flex-direction: column;
    gap: var(--ar-4);
    position: sticky;
    top: var(--ar-6);
}

.bildirimler { max-width: var(--genislik); margin: var(--ar-4) auto 0; padding: 0 var(--ar-4); }
.bildirim {
    margin: 0 0 var(--ar-2);
    padding: var(--ar-3) var(--ar-4);
    border-radius: var(--yuvarlak-kucuk);
    background: var(--kart);
    border: 1px solid var(--cizgi);
    font-size: var(--yazi-md);
}
.bildirim--basari { border-color: var(--basari); color: var(--basari); }
.bildirim--hata   { border-color: var(--hata);   color: var(--hata); }
/* Bilgi bildirimi — hata değil, dikkat çekmesi yeten bir not (çoğaltma). */
.bildirim--bilgi  { border-color: var(--lacivert); color: var(--lacivert); }

/* ===================================================================
 * 4. Başlıklar
 * =================================================================== */

.gun-basligi {
    font-size: var(--yazi-2xl);
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 var(--ar-5);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--ar-2) var(--ar-3);
}
.gun-basligi span {
    font-size: var(--yazi-xl);
    font-weight: 400;
    letter-spacing: -.01em;
    color: var(--metin-soluk);
}
.gun-basligi small {
    font-size: var(--yazi-sm);
    font-weight: 500;
    color: var(--metin-silik);
    margin-left: auto;
}

/* Gün ayracı: listeyi günlere böler */
.gun-ayraci {
    display: flex;
    align-items: baseline;
    gap: var(--ar-2);
    margin: var(--ar-6) 0 0;
    padding-bottom: var(--ar-2);
    border-bottom: 2px solid var(--metin);
    font-size: var(--yazi-base);
    font-weight: 700;
    letter-spacing: -.01em;
}
.gun-ayraci:first-child { margin-top: 0; }

.aciklama-metni {
    color: var(--metin-soluk);
    max-width: 68ch;
    margin-bottom: var(--ar-5);
}

/* ===================================================================
 * 5. Etkinlik listesi — satırlar
 * =================================================================== */

.etkinlik-listesi {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--cizgi);
}

.satir {
    display: grid;
    grid-template-columns: 4.25rem minmax(0, 1fr) auto;
    gap: 0 var(--ar-4);
    align-items: start;
    padding: var(--ar-4) var(--ar-2);
    border-bottom: 1px solid var(--cizgi);
    transition: background-color var(--gecis);
}
/* Afişli satırda içerik dikey ORTALANIR: 203px'lik afişin yanında üste
 * yapışmış iki satır metin, altta kocaman bir boşluk bırakıyordu. */
.satir--afisli {
    grid-template-columns: 4.25rem 9.5rem minmax(0, 1fr) auto;
    align-items: center;
}
.satir:hover { background: var(--kart); }

.satir-zaman { font-variant-numeric: tabular-nums; line-height: 1.25; }
.satir-zaman time {
    display: block;
    font-size: var(--yazi-lg);
    font-weight: 700;
    letter-spacing: -.02em;
}
.satir-tarih {
    display: block;
    font-size: var(--yazi-xs);
    color: var(--metin-silik);
    font-weight: 500;
}

/* Çok günlü etkinliğin ara günleri: saat yerine durum */
.satir-suruyor {
    display: block;
    font-size: var(--yazi-sm);
    font-weight: 600;
    color: var(--metin-soluk);
}

.satir-afis { display: block; }
/* Afiş listede OKUNACAK kadar büyük. 60px'te yalnızca renkli bir leke
 * oluyordu; etkinliğin adı bile seçilmiyordu.
 *
 * object-fit CONTAIN, cover değil: afişi düzenleyen yüklüyor ve oranı ne
 * olacağını bilmiyoruz. Cover, kenarlardan keserek tarihi ya da mekânı
 * afişin dışında bırakabilir — tam da okunmasını istediğimiz şeyleri.
 * Kutu 3:4; şu ana kadar yüklenen afişlerin tamamı bu oranda, farklı
 * oranlı bir afiş kırpılmak yerine kenarında boşluk bırakır. */
.satir-afis img {
    display: block;
    width: 9.5rem;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    border-radius: var(--yuvarlak-kucuk);
    background: var(--panel);
    transition: transform var(--gecis);
}
.satir-afis:hover img { transform: scale(1.02); }

.satir-govde { min-width: 0; }

.satir-baslik {
    font-size: var(--yazi-lg);
    font-weight: 600;
    margin-bottom: var(--ar-1);
}
.satir-baslik a { color: var(--metin); text-decoration: none; }
.satir-baslik a:hover { text-decoration: underline; }

.satir-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ar-1) var(--ar-2);
    font-size: var(--yazi-md);
    color: var(--metin-soluk);
}
/* Üstveri bağlantıları altçizgisiz durur: bir satırda üç bağlantı
 * altçizgiliyken liste "bağlantı çorbası" gibi görünüyordu. */
.satir-meta a { color: var(--metin-soluk); text-decoration: none; }
.satir-meta a:hover { color: var(--metin); text-decoration: underline; }
.satir-meta .ayrac { color: var(--cizgi-koyu); }

.satir-nitelikler {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ar-1);
    margin-top: var(--ar-2);
}

.satir-eylem { display: flex; align-items: center; }

/* ===================================================================
 * 6. Rozet, etiket, nitelik
 * =================================================================== */

.etiket {
    /* Yazı her zaman beyaz ve kalın. Zemin, beyazın 4,5:1'i geçmesi için
     * gerekirse koyultulmuş hâliyle gelir (VarlikController::rozetZemini). */
    display: inline-flex;
    align-items: center;
    gap: .3em;
    background: var(--kategori-rozet, var(--kategori-renk, var(--lacivert)));
    color: #fff;
    padding: .15rem .5rem;
    border-radius: var(--yuvarlak-kucuk);
    font-size: var(--yazi-xs);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.satir-meta a.etiket,
.etkinlik-ust a.etiket,
a.etiket { color: #fff; }
a.etiket:hover { filter: brightness(.93); }

.nitelik {
    display: inline-block;
    border: 1px solid var(--cizgi-koyu);
    border-radius: 2rem;
    padding: .05rem .5rem;
    font-size: var(--yazi-xs);
    color: var(--metin-soluk);
}
.nitelik--ucretsiz { border-color: var(--basari); color: var(--basari); font-weight: 600; }

.ikon { width: 1em; height: 1em; flex: 0 0 auto; }
.ikon--disari { width: .7em; height: .7em; margin-left: .25em; opacity: .6; }
a:hover .ikon--disari { opacity: 1; }

/* ===================================================================
 * 7. Kategori şeridi
 * =================================================================== */

.kategori-serit {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ar-1);
    margin-bottom: var(--ar-5);
    padding-bottom: var(--ar-4);
    border-bottom: 1px solid var(--cizgi);
}

.rozet {
    --kategori-renk: var(--lacivert);
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .35rem .7rem;
    border-radius: var(--yuvarlak-kucuk);
    color: var(--metin-soluk);
    text-decoration: none;
    font-size: var(--yazi-md);
    font-weight: 500;
    white-space: nowrap;
    transition: background-color var(--gecis), color var(--gecis);
}
.rozet .ikon { color: var(--kategori-renk); }
.rozet:hover { background: var(--kart); color: var(--metin); }
.rozet--secili { background: var(--lacivert); color: #fff; font-weight: 600; }
.rozet--secili .ikon { color: var(--amber); }

/* ===================================================================
 * 8. Yan sütun panelleri
 *
 * Beyaz yüzey + saç teli çerçeve. Gölge YOK: çerçeve ile geniş gölgeyi
 * birlikte kullanmak "hayalet kart" görünümü verir (DESIGN.md §6).
 * =================================================================== */

.takvim-kutusu,
.filtre-kutusu,
.abone-kutusu,
.dil-kutusu,
.yan-liste,
.kunye {
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    padding: var(--ar-4);
}

.takvim-kutusu h2,
.filtre-kutusu h2,
.abone-kutusu h2,
.dil-kutusu h2,
.yan-liste h2 {
    font-size: var(--yazi-md);
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: var(--ar-3);
}
.takvim-kutusu h2 a { color: var(--metin); text-decoration: none; }

/* Ay ızgarası */
.takvim-ust {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--ar-2);
    margin-bottom: var(--ar-3);
}
.takvim-ust h2 { margin: 0; text-align: center; }
.takvim-ok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak-kucuk);
    color: var(--metin-soluk);
    text-decoration: none;
    font-size: var(--yazi-lg);
    line-height: 1;
    transition: border-color var(--gecis), color var(--gecis);
}
.takvim-ok:hover { border-color: var(--lacivert); color: var(--lacivert); }
.takvim--yukleniyor { opacity: .55; }

.takvim { width: 100%; border-collapse: collapse; font-size: var(--yazi-sm); }
.takvim th {
    color: var(--metin-silik);
    font-weight: 500;
    font-size: var(--yazi-xs);
    padding-bottom: var(--ar-1);
}
.takvim td { text-align: center; padding: 1px; vertical-align: top; }

/* Gün hücresi: rakam üstte, etkinlik sayısı altta. Sayıyı rakamın üstüne
 * bindirmek (mutlak konumlu rozet) iki rakamı da okunmaz yapıyordu. */
.takvim td > a,
.takvim td > .takvim-bos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: .2rem 0 .25rem;
    border-radius: var(--yuvarlak-kucuk);
    text-decoration: none;
    color: var(--metin);
}
.takvim td > a { font-weight: 600; }
.takvim td > a:hover { background: var(--panel); }
.takvim td > .takvim-bos { color: var(--metin-silik); }

.takvim-gun {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.takvim td.bugun .takvim-gun {
    background: var(--amber);
    color: var(--lacivert-koyu);
    font-weight: 700;
}
/* Gün görünümünde açık olan gün. Bugün işaretinin üstüne yazar: ikisi aynı
 * güne düşerse "şu an baktığım gün" daha çok işe yarar. */
.takvim td.secili > a { background: var(--panel); }
.takvim td.secili .takvim-gun {
    background: var(--lacivert);
    color: #fff;
    font-weight: 700;
}

/* Günden aya çıkış bağlantısı. */
.gun-cikis {
    margin-top: var(--ar-4);
    padding-top: var(--ar-3);
    border-top: 1px solid var(--cizgi);
    font-size: var(--yazi-sm);
}
/* Bayram ve resmî gün — ızgarada.
 *
 * Duvar takvimi geleneği: bayram günü kırmızı yazılır. Kırmızı DAİRE
 * kullanılmıyor, çünkü o daire etkinlik sayısının işareti; aynı hücrede iki
 * kırmızı daire olsa hangisinin ne olduğu anlaşılmazdı. Burada rakamın
 * kendisi kırmızı ve kalın, zemini hafif pembe.
 *
 * Renk tek başına taşıyıcı değil: hücrenin title'ında günün adı yazıyor. */
.takvim td.bayram .takvim-gun {
    background: #fbeaea;
    color: var(--hata);
    font-weight: 700;
}
/* Arife yarım gündür; bayramın kendisiyle aynı ağırlıkta görünmesin. */
.takvim td.arife .takvim-gun {
    color: var(--hata);
    box-shadow: inset 0 -2px 0 #f3c9c6;
}
/* Bugün ve seçili gün dolu daire taşır; bayram rengi onların üstüne
 * yazmasın, yoksa "bugün" işareti kaybolur. */
.takvim td.bugun.bayram .takvim-gun,
.takvim td.bugun.arife .takvim-gun { background: var(--amber); color: var(--lacivert-koyu); }
.takvim td.secili.bayram .takvim-gun,
.takvim td.secili.arife .takvim-gun { background: var(--lacivert); color: #fff; }

/* Gündeki etkinlik sayısı — kırmızı daire, beyaz rakam.
 * Gün rakamının ALTINDA kendi satırında durur; üstüne binmez. */
.gun-sayi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 .2rem;
    border-radius: 1rem;
    background: #c0392b;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Filtreler */
.filtre-kutusu label {
    display: block;
    font-size: var(--yazi-sm);
    color: var(--metin-soluk);
    margin-top: var(--ar-3);
    font-weight: 500;
}
.filtre-kutusu select,
.filtre-kutusu input[type="search"] {
    width: 100%;
    padding: .45rem .55rem;
    border: 1px solid var(--cizgi-koyu);
    border-radius: var(--yuvarlak-kucuk);
    font: inherit;
    font-size: var(--yazi-md);
    background: #fff;
    color: var(--metin);
}
.onay {
    display: flex;
    align-items: center;
    gap: var(--ar-2);
    margin-top: var(--ar-2);
    color: var(--metin);
    font-size: var(--yazi-md);
    font-weight: 400;
}
.filtre-kutusu button { margin-top: var(--ar-3); }

/* Abonelik */
.abone-kutusu p { font-size: var(--yazi-md); color: var(--metin-soluk); }
.abone-eylemler {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ar-2);
    align-items: center;
    margin-top: var(--ar-3);
}
.abone-adres { margin-top: var(--ar-3); }
.abone-adres label {
    display: block;
    font-size: var(--yazi-xs);
    color: var(--metin-silik);
    margin-bottom: var(--ar-1);
}
.abone-adres input {
    width: 100%;
    font-size: var(--yazi-xs);
    padding: .35rem .5rem;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak-kucuk);
    background: var(--panel);
    color: var(--metin-soluk);
}
.abone-adres button { margin-top: var(--ar-2); }

/* Dil kutusu */
.dil-kutusu h2 { display: flex; align-items: center; gap: var(--ar-2); }
.dil-kutusu h2 .ikon { color: var(--metin-silik); }
.dil-liste { list-style: none; margin: 0; padding: 0; }
.dil-satir a {
    display: flex;
    align-items: baseline;
    gap: var(--ar-2);
    padding: .3rem 0;
    text-decoration: none;
    color: var(--metin);
    font-size: var(--yazi-md);
}
.dil-satir a:hover .dil-davet { text-decoration: underline; }
.dil-kod {
    flex: 0 0 auto;
    font-size: var(--yazi-xs);
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--metin-silik);
    border: 1px solid var(--cizgi);
    border-radius: 4px;
    padding: 0 .25rem;
}
.dil-satir--etkin .dil-kod {
    background: var(--amber);
    border-color: var(--amber);
    color: var(--lacivert-koyu);
}

/* JS açıkken tek satır görünür ve sırayla değişir. JS yoksa bu sınıf
 * hiç eklenmez; altı satır da liste olarak durur. */
.dil-liste--doner { position: relative; min-height: 2.2rem; }
.dil-liste--doner .dil-satir {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(.3rem);
    transition: opacity .4s cubic-bezier(.33, 1, .68, 1), transform .4s cubic-bezier(.33, 1, .68, 1);
    pointer-events: none;
}
.dil-liste--doner .dil-satir--gorunur { opacity: 1; transform: none; pointer-events: auto; }

.yan-liste ul { list-style: none; margin: 0; padding: 0; }
.yan-liste li {
    padding: var(--ar-2) 0;
    border-bottom: 1px solid var(--cizgi);
    font-size: var(--yazi-md);
}
.yan-liste li:last-child { border-bottom: 0; }
.yan-liste small { display: block; color: var(--metin-silik); font-size: var(--yazi-xs); }

/* ===================================================================
 * 9. Düğmeler
 * =================================================================== */

.dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ar-2);
    background: var(--lacivert);
    color: #fff;
    text-decoration: none;
    padding: .55rem 1.1rem;
    border: 1px solid var(--lacivert);
    border-radius: var(--yuvarlak-kucuk);
    font: inherit;
    font-size: var(--yazi-md);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--gecis);
}
.dugme:hover { background: var(--lacivert-koyu); }
.dugme--ince { padding: .35rem .75rem; font-size: var(--yazi-sm); }
.dugme--tehlike { background: var(--hata); border-color: var(--hata); }
.dugme--tehlike:hover { background: #8e1c21; }

.baglanti-dugme {
    background: none;
    border: 0;
    color: var(--lacivert);
    font: inherit;
    font-size: var(--yazi-md);
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.metin-baglanti { color: var(--lacivert); font-size: var(--yazi-md); }
.satir-ici { display: inline; }

/* Panelde iptal/erteleme seçimi — yayınla/taslak satırından ayrı dursun;
 * yanlışlıkla tıklanacak bir yer değil. */
.secim-satiri--uyari {
    margin-top: var(--ar-3);
    padding-top: var(--ar-3);
    border-top: 1px dashed var(--cizgi-koyu);
}

/* Bayram / resmî gün etiketi — gün ve ay görünümünde başlığın altında.
 * Etkinlik değildir: saati, mekânı, düzenleyeni yok. Bu yüzden etkinlik
 * satırı gibi değil, ince bir şerit olarak basılır. */
.ozel-gunler {
    margin: 0 0 var(--ar-4);
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ar-2);
}
.ozel-gun {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    padding: .3rem .65rem;
    border: 1px solid #f0cfcc;
    border-left: 3px solid var(--hata);
    border-radius: var(--yuvarlak-kucuk);
    background: #fdf3f2;
    color: var(--hata);
    font-size: var(--yazi-md);
    font-weight: 600;
}
.ozel-gun small {
    font-weight: 500;
    opacity: .8;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: var(--yazi-xs);
}
/* Arife yarım gün: aynı kalıp, daha sessiz. */
.ozel-gun--arife {
    border-left-color: #e7a9a4;
    background: var(--kart);
    font-weight: 500;
}
/* Yılbaşı gibi resmî günler bayrak simgesi taşımaz; ulusal bayramlar taşır. */
.ozel-gun--resmi .ikon { opacity: .6; }

/* Metin sayfalarındaki alt başlık ve madde listesi. */
.metin-govde h2 {
    margin: var(--ar-6) 0 var(--ar-2);
    font-size: var(--yazi-lg);
}
.metin-govde h2:first-child { margin-top: 0; }
.metin-govde h3 {
    margin: var(--ar-5) 0 var(--ar-2);
    font-size: var(--yazi-base);
    font-weight: 700;
}
.metin-liste {
    margin: 0 0 var(--ar-4);
    padding-left: 1.1rem;
}
.metin-liste li { margin-bottom: var(--ar-1); }

/* Durum şeridi — iptal ve erteleme.
 *
 * Damga GÖRSELİ değil, yatay kırmızı bir METİN şerididir. Damga görseli
 * çevrilemez, ekran okuyucuya görünmez, arama sonucunda okunmaz ve 360px'te
 * ya taşar ya okunmaz hâle gelir. Şerit her dilde kendi dilinde yazar.
 *
 * Renk tek başına taşıyıcı değil: yazının kendisi "iptal edildi" diyor. */
.durum-serit {
    margin: 0 0 var(--ar-4);
    padding: var(--ar-3) var(--ar-4);
    border-radius: var(--yuvarlak-kucuk);
    background: var(--hata);
    color: #fff;
    text-align: center;
}
.durum-serit > p { margin: 0; }
.durum-serit > p:first-child {
    font-size: var(--yazi-lg);
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Yeni tarih — şeridin ikinci satırı. Büyük harf DEĞİL: tarih okunacak bir
 * bilgidir, bağırılacak bir başlık değil. */
.durum-yeni-tarih {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    margin-top: var(--ar-2) !important;
    padding-top: var(--ar-2);
    border-top: 1px solid rgb(255 255 255 / 30%);
    font-size: var(--yazi-md);
    font-weight: 600;
}
.durum-yeni-tarih a { color: #fff; }
.durum-yeni-tarih .ikon { flex: none; }

/* Listede: satır soluklaşır, kırmızı etiket alır. Etkinlik listeden
 * DÜŞMEZ — iptalden habersiz biri takvimde boşluk değil, sebebini görmeli. */
.satir--durdu .satir-baslik a { text-decoration: line-through; }
.satir--durdu { opacity: .78; }
.durum-etiketi {
    display: inline-block;
    margin-left: .5em;
    padding: .05rem .4rem;
    border-radius: var(--yuvarlak-kucuk);
    background: var(--hata);
    color: #fff;
    font-size: var(--yazi-xs);
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    vertical-align: .1em;
}

.bitise-kadar { color: var(--metin-silik); margin-right: .35em; }

/* "Ekleyen: …" — etkinlik sayfasının en altı. Künye bilgisidir, içerik
 * değil: ince çizgiyle ayrılır ve soluk durur. */
.ekleyen {
    margin: var(--ar-5) 0 0;
    padding-top: var(--ar-3);
    border-top: 1px solid var(--cizgi);
    font-size: var(--yazi-md);
    color: var(--metin-silik);
}
.ekleyen-etiket { margin-right: .35em; }

/* Mekân fotoğrafı — mekân sayfasının tepesinde.
 * Sabit en-boy oranı: fotoğraf yüklenmeden de yerini tutar, sayfa zıplamaz.
 * Fotoğrafı olmayan mekânda parça hiç basılmaz, gri kutu kalmaz. */
.mekan-hero {
    margin: 0 0 var(--ar-5);
    border-radius: var(--yuvarlak);
    overflow: hidden;
    background: var(--panel);
    aspect-ratio: 8 / 3;
}
.mekan-hero img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Haritada göster — gömülü harita yok, ziyaretçinin kendi uygulamasına
 * giden bağlantılar. Gerekçe parcalar/mekan-harita.php içinde. */
.harita-kutusu { margin-top: var(--ar-4); }
.harita-baslik {
    margin: 0 0 var(--ar-2);
    font-size: var(--yazi-xs);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--metin-silik);
}
.harita-baglantilari {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ar-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.harita-baglantilari a {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .4rem .7rem;
    border: 1px solid var(--cizgi-koyu);
    border-radius: var(--yuvarlak-kucuk);
    background: var(--kart);
    color: var(--metin);
    font-size: var(--yazi-md);
    text-decoration: none;
}
.harita-baglantilari a:hover {
    border-color: var(--lacivert);
    color: var(--lacivert);
}

/* Takvime ekle — üç uygulama */
.takvime-ekle { display: flex; gap: var(--ar-1); align-items: center; }
.takvim-dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid var(--cizgi-koyu);
    border-radius: var(--yuvarlak-kucuk);
    color: var(--metin-soluk);
    background: var(--kart);
    text-decoration: none;
    transition: color var(--gecis), border-color var(--gecis);
}
.takvim-dugme:hover { color: var(--lacivert); border-color: var(--lacivert); }

.takvime-ekle--genis { flex-direction: column; align-items: stretch; gap: var(--ar-2); }
.takvime-ekle--genis .takvim-dugme {
    width: auto;
    height: auto;
    padding: .45rem .7rem;
    justify-content: flex-start;
    font-size: var(--yazi-md);
}
.takvime-ekle-baslik { margin-bottom: var(--ar-1); font-size: var(--yazi-xs); color: var(--metin-silik); }

/* ===================================================================
 * 10. Sekmeler, sayfalama, boş durum
 * =================================================================== */

.sekmeler {
    display: flex;
    gap: var(--ar-4);
    margin: 0 0 var(--ar-4);
    border-bottom: 1px solid var(--cizgi);
}
.sekme {
    padding: var(--ar-2) 0;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--metin-soluk);
    text-decoration: none;
    font-size: var(--yazi-md);
    font-weight: 500;
}
.sekme:hover { color: var(--metin); }
.sekme--secili { color: var(--metin); border-bottom-color: var(--lacivert); font-weight: 600; }

.sayfalama {
    display: flex;
    gap: var(--ar-5);
    align-items: center;
    justify-content: center;
    margin-top: var(--ar-6);
    color: var(--metin-soluk);
    font-size: var(--yazi-md);
}

.bos-durum {
    padding: var(--ar-6) var(--ar-4);
    text-align: center;
    color: var(--metin-soluk);
    border: 1px dashed var(--cizgi-koyu);
    border-radius: var(--yuvarlak);
}
.bos-durum small { display: block; margin-top: var(--ar-2); color: var(--metin-silik); }
.bos-eylem { margin-top: var(--ar-4); text-align: center; }

.ay-gezinme { display: flex; align-items: center; gap: var(--ar-3); margin-bottom: var(--ar-5); }
.ay-gezinme .gun-basligi { margin: 0; flex: 1; }

/* ===================================================================
 * 11. Dizin sayfaları
 * =================================================================== */

.dizin-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: var(--ar-4);
}

.dizin-kart {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--ar-1) var(--ar-3);
    align-items: start;
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    padding: var(--ar-4);
}
.dizin-kart:not(:has(.dizin-logo)) { display: block; }
.dizin-kart > :not(.dizin-logo) { grid-column: 2; }
.dizin-logo {
    width: 44px; height: 44px;
    object-fit: contain;
    border-radius: var(--yuvarlak-kucuk);
    background: var(--panel);
    grid-row: span 4;
}
.dizin-kart h2 { font-size: var(--yazi-base); font-weight: 600; margin-bottom: var(--ar-1); }
.dizin-kart h2 a { color: var(--metin); text-decoration: none; }
.dizin-kart h2 a:hover { text-decoration: underline; }
.dizin-adres, .dizin-tur, .dizin-aciklama { font-size: var(--yazi-md); color: var(--metin-soluk); }
.dizin-sayi { margin-top: var(--ar-2); font-size: var(--yazi-sm); font-weight: 600; }
.dizin-sayi a { text-decoration: none; }
.dizin-sayi a:hover { text-decoration: underline; }
.dizin-tarihce { margin-top: var(--ar-1); font-size: var(--yazi-xs); color: var(--metin-silik); }
.soluk { color: var(--metin-soluk); font-weight: 400; }

/* ===================================================================
 * 12. Künye (mekân / düzenleyen)
 * =================================================================== */

.kunye { margin-bottom: var(--ar-5); }
.kunye--duzenleyen { display: flex; gap: var(--ar-4); align-items: flex-start; }
.kunye-logo {
    width: 72px; height: 72px;
    object-fit: contain;
    border-radius: var(--yuvarlak-kucuk);
    background: var(--panel);
    padding: var(--ar-1);
    flex: 0 0 auto;
}
.kunye-govde { min-width: 0; flex: 1; }
.kunye-tur {
    font-size: var(--yazi-xs);
    font-weight: 600;
    color: var(--metin-silik);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.kunye-aciklama { margin: var(--ar-2) 0 var(--ar-3); max-width: 68ch; }
.kunye-iletisim {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--ar-1) var(--ar-4);
    margin: 0;
    font-size: var(--yazi-md);
}
.kunye-iletisim dt { color: var(--metin-silik); font-weight: 500; }
.kunye-iletisim dd { margin: 0; overflow-wrap: anywhere; }
.bos-deger { color: var(--cizgi-koyu); }
.kunye-nitelik { margin-top: var(--ar-3); display: flex; gap: var(--ar-1); flex-wrap: wrap; }
.kunye-baglantilar { display: flex; gap: var(--ar-4); flex-wrap: wrap; margin-top: var(--ar-2); }

/* ===================================================================
 * 12b. Oturma planı — küçük durur, üzerine gelince büyür
 * =================================================================== */

.plan-sarmal { margin-top: var(--ar-4); }
.plan-baslik {
    font-size: var(--yazi-xs);
    font-weight: 600;
    color: var(--metin-silik);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: var(--ar-2);
}
.plan-kucuk {
    display: inline-block;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak-kucuk);
    overflow: hidden;
    background: var(--panel);
    line-height: 0;
    transition: border-color var(--gecis);
}
.plan-kucuk:hover { border-color: var(--lacivert); }
.plan-kucuk img { width: 170px; height: auto; display: block; }
.plan-ipucu { font-size: var(--yazi-xs); color: var(--metin-silik); margin-top: var(--ar-1); }

.plan-buyutec {
    position: fixed;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: var(--kat-buyutec);
    max-width: min(92vw, 1100px);
    padding: var(--ar-2);
    background: var(--kart);
    border: 1px solid var(--cizgi-koyu);
    border-radius: var(--yuvarlak);
    box-shadow: 0 16px 48px rgb(23 34 44 / 26%);
    opacity: 0;
    visibility: hidden;
    transform: scale(.97);
    transition: opacity var(--gecis), transform var(--gecis), visibility var(--gecis);
}
.plan-buyutec img { max-width: 100%; max-height: 84vh; display: block; border-radius: var(--yuvarlak-kucuk); }

/* Tetik yalnızca küçük görseldir, kutunun tamamı değil: başlığın ya da
 * ipucu yazısının üzerinden geçerken plan açılıyordu. Büyütülmüş plan
 * ekranın ortasına sabitlendiği için üzerine gelmeyi beklemeye gerek yok. */
.plan-kucuk:hover ~ .plan-buyutec,
.plan-kucuk:focus ~ .plan-buyutec,
.plan-buyutec.acik {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* ===================================================================
 * 13. Etkinlik detayı
 * =================================================================== */

.etkinlik {
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    padding: var(--ar-6);
}
.etkinlik-ust { margin-bottom: var(--ar-3); }
.etkinlik h1 {
    font-size: var(--yazi-2xl);
    font-weight: 800;
    letter-spacing: -.022em;
    margin-bottom: var(--ar-5);
}

.etkinlik-bilgi {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: var(--ar-3) var(--ar-5);
    margin: 0 0 var(--ar-5);
    padding-bottom: var(--ar-5);
    border-bottom: 1px solid var(--cizgi);
}
.etkinlik-bilgi dt { font-weight: 500; color: var(--metin-silik); font-size: var(--yazi-md); }
.etkinlik-bilgi dd { margin: 0; }

.fiyat-liste, .satis-liste { margin: var(--ar-1) 0; padding-left: 1.1rem; }
.fiyat-liste li, .satis-liste li { margin: .1rem 0; }
.satis-baslik { margin: var(--ar-3) 0 var(--ar-1); font-size: var(--yazi-sm); color: var(--metin-silik); font-weight: 600; }

.afis { margin: 0 0 var(--ar-5); }
.afis img { border-radius: var(--yuvarlak); display: block; }

.etkinlik-aciklama { max-width: 70ch; text-wrap: pretty; }
.etkinlik-aciklama p { margin: 0 0 var(--ar-4); }

.dil-notu, .uyari {
    background: var(--panel);
    border-radius: var(--yuvarlak-kucuk);
    padding: var(--ar-3) var(--ar-4);
    font-size: var(--yazi-md);
    color: var(--metin-soluk);
    margin-bottom: var(--ar-4);
}
.uyari--iptal { background: #fbeaea; color: var(--hata); font-weight: 600; }

.metin-govde { max-width: 68ch; text-wrap: pretty; }
.metin-govde p { margin: 0 0 var(--ar-4); }
.kunye-liste {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--ar-1) var(--ar-4);
    margin-top: var(--ar-6);
    padding-top: var(--ar-5);
    border-top: 1px solid var(--cizgi);
    font-size: var(--yazi-md);
}
.kunye-liste dt { color: var(--metin-silik); font-weight: 500; }
.kunye-liste dd { margin: 0; }

/* ===================================================================
 * 14. Formlar
 * =================================================================== */

.form { max-width: 32rem; }
.form--genis { max-width: 54rem; }

.form label,
.alan label {
    display: block;
    margin: var(--ar-4) 0 var(--ar-1);
    font-weight: 600;
    font-size: var(--yazi-sm);
}

.form input[type="text"], .form input[type="email"], .form input[type="url"],
.form input[type="tel"], .form input[type="password"], .form input[type="date"],
.form input[type="time"], .form input[type="number"], .form input[type="search"],
.form select, .form textarea,
.alan input[type="text"], .alan input[type="email"], .alan input[type="url"],
.alan input[type="tel"], .alan input[type="date"], .alan input[type="time"],
.alan input[type="number"], .alan select, .alan textarea,
.tekrarli-satir input {
    width: 100%;
    padding: .5rem .65rem;
    border: 1px solid var(--cizgi-koyu);
    border-radius: var(--yuvarlak-kucuk);
    font: inherit;
    font-size: var(--yazi-md);
    background: #fff;
    color: var(--metin);
    transition: border-color var(--gecis);
}
.form input:hover, .form select:hover, .form textarea:hover,
.alan input:hover, .alan select:hover, .alan textarea:hover { border-color: var(--metin-silik); }

.form textarea, .alan textarea { line-height: 1.55; resize: vertical; }
input.hatali, select.hatali { border-color: var(--hata); }

.alan-hata { color: var(--hata); font-size: var(--yazi-sm); margin-top: var(--ar-1); }
.ipucu { color: var(--metin-soluk); font-size: var(--yazi-sm); margin-top: var(--ar-1); }
.alt-baslik { font-weight: 600; margin: var(--ar-4) 0 var(--ar-1); font-size: var(--yazi-sm); }

fieldset {
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    padding: var(--ar-3) var(--ar-4) var(--ar-4);
    margin: var(--ar-5) 0;
}
fieldset legend { font-weight: 600; padding: 0 var(--ar-1); font-size: var(--yazi-md); }

.form-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0 var(--ar-5);
}
.alan--genis { grid-column: 1 / -1; }
.alan--dar { max-width: 9rem; }

.secim-satiri { display: flex; flex-wrap: wrap; gap: var(--ar-5); margin-top: var(--ar-2); }

.form-eylem {
    display: flex;
    align-items: center;
    gap: var(--ar-5);
    margin-top: var(--ar-6);
    padding-top: var(--ar-5);
    border-top: 1px solid var(--cizgi);
}
.form-alt { margin-top: var(--ar-5); display: flex; gap: var(--ar-3); flex-wrap: wrap; }

.tekrarli-satir { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ar-2); margin-bottom: var(--ar-2); }
.afis-onizleme { display: flex; gap: var(--ar-4); align-items: center; margin-top: var(--ar-2); }
.afis-onizleme img { border-radius: var(--yuvarlak-kucuk); object-fit: cover; }

/* ===================================================================
 * 15. Panel ve yönetim
 * =================================================================== */

.panel-govde { background: var(--kagit); }
.panel-kimlik { color: #fff; font-size: var(--yazi-md); }
.panel-kimlik small { display: block; opacity: .75; font-size: var(--yazi-xs); }

.panel-duzen {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: var(--ar-6);
    max-width: var(--genislik);
    margin: 0 auto;
    padding: var(--ar-5) var(--ar-4) var(--ar-7);
    align-items: start;
}

.panel-menu {
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    padding: var(--ar-2);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: var(--ar-5);
}
.panel-menu a {
    padding: .4rem .6rem;
    border-radius: var(--yuvarlak-kucuk);
    text-decoration: none;
    color: var(--metin);
    font-size: var(--yazi-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ar-2);
}
.panel-menu a:hover { background: var(--panel); }
.panel-menu a.vurgu { color: var(--lacivert); font-weight: 600; }
.panel-menu-baslik {
    margin: var(--ar-3) .6rem var(--ar-1);
    font-size: var(--yazi-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--metin-silik);
}
.panel-menu-baslik:first-child { margin-top: var(--ar-1); }

.rozet-sayi {
    background: var(--amber);
    color: var(--lacivert-koyu);
    border-radius: 2rem;
    padding: 0 .4rem;
    font-size: var(--yazi-xs);
    font-weight: 700;
}

.panel-icerik { min-width: 0; }
.panel-baslik {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ar-4);
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ar-5);
}
.panel-baslik h1 { font-size: var(--yazi-xl); font-weight: 700; }

.veri-tablo {
    width: 100%;
    border-collapse: collapse;
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    overflow: hidden;
    font-size: var(--yazi-md);
}
.veri-tablo th, .veri-tablo td {
    padding: .6rem .75rem;
    text-align: left;
    border-bottom: 1px solid var(--cizgi);
    vertical-align: top;
}
.veri-tablo thead th {
    background: var(--panel);
    font-size: var(--yazi-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--metin-soluk);
    font-weight: 600;
}
.veri-tablo tbody tr:last-child td { border-bottom: 0; }
.veri-tablo tbody tr:hover { background: var(--kagit); }
.veri-tablo tr.okunmamis { background: #fdf7ea; }
.veri-tablo tr.vekaletli td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.veri-tablo input.dar { width: 4.5rem; }
.nowrap { white-space: nowrap; }

.durum {
    display: inline-block;
    padding: .05rem .5rem;
    border-radius: 2rem;
    font-size: var(--yazi-xs);
    font-weight: 600;
}
.durum--yayinda { background: #e6f4ec; color: var(--basari); }
.durum--taslak  { background: var(--panel); color: var(--metin-soluk); }
.durum--iptal   { background: #fbeaea; color: var(--hata); }
.durum--arsiv   { background: var(--panel); color: var(--metin-silik); }

.sade-liste { list-style: none; margin: var(--ar-4) 0; padding: 0; }
.sade-liste li { padding: var(--ar-2) 0; border-bottom: 1px solid var(--cizgi); }
.sade-liste small { display: block; color: var(--metin-silik); font-size: var(--yazi-xs); }

/* Çakışma uyarısı */
.cakisma {
    background: #fdf7ea;
    border: 1px solid #e8d2a4;
    border-radius: var(--yuvarlak);
    padding: var(--ar-4);
    margin: var(--ar-4) 0;
}
.cakisma-baslik { font-weight: 700; color: var(--uyari); margin-bottom: var(--ar-2); }
.cakisma-satir { margin: var(--ar-1) 0; font-size: var(--yazi-md); }
.cakisma-not { margin-top: var(--ar-3); font-size: var(--yazi-sm); color: var(--metin-soluk); }

.cakisma.gizli, #bilet-alanlari.gizli, #tekrar-bitis-alani.gizli {
    display: none;
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
}

/* Mekân doluluğu */
.doluluk-sarma {
    overflow-x: auto;
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
}
.doluluk { border-collapse: collapse; font-size: var(--yazi-xs); }
.doluluk th, .doluluk td { border: 1px solid var(--cizgi); padding: .2rem; text-align: center; min-width: 2.1rem; }
.doluluk th.haftasonu { background: var(--panel); }
/* Mekân sütunu yatay kaydırmada yerinde kalır.
 *
 * Ayırıcı çizgi border DEĞİL, inset box-shadow: border-collapse:collapse
 * ile ortak kenarlığı TABLO çiziyor ve sabit hücrenin zemini o 1 pikseli
 * kapatmıyor — altından kayan sütun kenarda ince bir şerit olarak
 * sızıyordu. inset gölge hücrenin KENDİ boyasıdır, sızıntı kalmaz.
 *
 * Dıştaki yumuşak gölge "bu sütun sabit" demenin sessiz yolu. */
.doluluk .doluluk-mekan {
    text-align: left;
    position: sticky;
    left: 0;
    background: var(--kart);
    box-shadow: inset -1px 0 0 var(--cizgi), 3px 0 6px rgb(23 34 44 / 8%);
    min-width: 10rem;
    font-weight: 600;
    z-index: var(--kat-yapiskan);
}
.doluluk td.dolu { background: #faf6ee; }
.doluluk-kayit {
    display: block;
    background: var(--lacivert);
    color: #fff;
    border-radius: 3px;
    padding: 0 .2rem;
    margin: 1px 0;
    cursor: help;
}
.doluluk-kayit.kendi { background: var(--amber); color: var(--lacivert-koyu); }
.doluluk-kayit.taslak { background: transparent; color: var(--metin-soluk); border: 1px dashed var(--cizgi-koyu); }
/* Doluluk ızgarasında bayram sütunu: başlık kırmızı, sütun hafif pembe.
 * Hafta sonu gölgesiyle aynı mantık — planlama yaparken 29 Ekim'in bayram
 * olduğu tarih seçmeden ÖNCE görünsün. */
.doluluk th.bayram { background: #fbeaea; color: var(--hata); }
.doluluk th.arife  { color: var(--hata); box-shadow: inset 0 -2px 0 #f3c9c6; }
.doluluk-bayram-anahtar {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: var(--yuvarlak-kucuk);
    background: #fbeaea;
    color: var(--hata);
    font-size: var(--yazi-xs);
    font-weight: 600;
}

.doluluk-anahtar { display: flex; gap: var(--ar-4); margin-top: var(--ar-4); font-size: var(--yazi-sm); }
.doluluk-anahtar .doluluk-kayit { display: inline-block; cursor: default; padding: .1rem .5rem; }

/* Yönetim özeti */
.ozet-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: var(--ar-3);
    margin-bottom: var(--ar-6);
}
.ozet-kart {
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    padding: var(--ar-4);
    text-decoration: none;
    color: var(--metin);
}
.ozet-kart strong {
    display: block;
    font-size: var(--yazi-2xl);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
}
.ozet-kart span { font-size: var(--yazi-sm); color: var(--metin-soluk); }
.ozet-kart--dikkat strong { color: var(--uyari); }

.basvuru-kart {
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    padding: var(--ar-5);
    margin-bottom: var(--ar-4);
}
.basvuru-kart h2 { font-size: var(--yazi-lg); margin-bottom: var(--ar-1); }
.basvuru-eylem {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ar-3);
    align-items: center;
    margin-top: var(--ar-4);
    padding-top: var(--ar-4);
    border-top: 1px solid var(--cizgi);
}
.basvuru-eylem form { display: flex; gap: var(--ar-2); align-items: center; max-width: none; }
.basvuru-eylem input[type="text"] {
    padding: .4rem .55rem;
    border: 1px solid var(--cizgi-koyu);
    border-radius: var(--yuvarlak-kucuk);
    font: inherit;
    font-size: var(--yazi-md);
}

/* Sağlık kontrolü */
.saglik {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--ar-2) var(--ar-5);
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    padding: var(--ar-4);
}
.saglik dt { font-weight: 600; color: var(--metin-soluk); }
.saglik dd { margin: 0; }
.ok  { color: var(--basari); font-weight: 600; }
.err { color: var(--hata);   font-weight: 600; }

/* Onay penceresi — yerli <dialog> */
.onay-penceresi {
    border: 1px solid var(--cizgi-koyu);
    border-radius: var(--yuvarlak);
    padding: var(--ar-5);
    max-width: 26rem;
    color: var(--metin);
    background: var(--kart);
}
.onay-penceresi::backdrop { background: rgb(23 34 44 / 45%); }
.onay-penceresi h2 { font-size: var(--yazi-lg); margin-bottom: var(--ar-3); }
/* JS ile kurulan onay penceresinde başlık tek metindir; alt satır yok. */
.onay-baslik { margin-bottom: 0; }
.onay-penceresi[open] {
    /* Tarayıcı varsayılanı sol üst köşe; ortala. */
    margin: auto;
}
.onay-metni { font-size: var(--yazi-base); margin-bottom: var(--ar-2); }
.onay-eylem {
    display: flex;
    gap: var(--ar-4);
    align-items: center;
    justify-content: flex-end;
    margin-top: var(--ar-5);
}

/* ===================================================================
 * 16. Hata sayfaları ve alt bilgi
 * =================================================================== */

.sayfa--hata { text-align: center; padding-top: var(--ar-7); }
.hata-kod {
    font-size: 3.5rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--cizgi-koyu);
    line-height: 1;
    margin-bottom: var(--ar-3);
}
.sayfa--hata h1 { font-size: var(--yazi-xl); margin-bottom: var(--ar-3); }
.sayfa--hata p { color: var(--metin-soluk); margin-bottom: var(--ar-4); }

.alt {
    border-top: 1px solid var(--cizgi);
    margin-top: var(--ar-7);
    padding: var(--ar-6) var(--ar-4);
    text-align: center;
    color: var(--metin-soluk);
    font-size: var(--yazi-md);
}
.alt p { margin: var(--ar-1) 0; }
/* Alt bilgideki kategori bağlantıları: hem ziyaretçiye kısa yol, hem
 * kanonik kategori sayfalarına her sayfadan iç bağlantı. */
.alt-kategoriler {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ar-1) var(--ar-3);
    margin-bottom: var(--ar-3);
    font-size: var(--yazi-md);
}
.alt-kategoriler a { color: var(--metin-soluk); }
.alt-kategoriler a:hover { color: var(--lacivert); }

.alt-baglantilar { display: flex; gap: var(--ar-4); justify-content: center; flex-wrap: wrap; }

/* ===================================================================
 * 17. Dar ekran
 * =================================================================== */

@media (max-width: 62rem) {
    .sayfa--iki-sutun { grid-template-columns: minmax(0, 1fr); }
    .yan-sutun { position: static; }
    .panel-duzen { grid-template-columns: minmax(0, 1fr); }
    .panel-menu { position: static; flex-direction: row; flex-wrap: wrap; }
    .panel-menu-baslik { width: 100%; margin: var(--ar-2) .25rem 0; }
}

@media (max-width: 46rem) {
    .ust {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: var(--ar-2);
        padding: var(--ar-3);
    }

    /* Marka mobilde SARILIR. `white-space: nowrap` ile tek satıra zorlanınca
     * metin kendi kutusundan taşıyordu (400px'te kutu 154px, metin 354px) ve
     * yanındaki dil seçicisinin altına giriyordu: "fethiyekültürsanattakvi".
     * Kutu taşmadığı için sayfa taşması olarak da görünmüyordu. Üç parça
     * (fethiye / kültürsanat / takvimi) doğal kırılma noktası veriyor. */
    .marka {
        white-space: normal;
        font-size: var(--yazi-md);
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    /* Gizli yatay kaydırma yerine sarma: kaydırma çubuğu gizliyken bağlantıların
     * devamı olduğu hiçbir yerden anlaşılmıyordu. */
    .gezinme {
        grid-column: 1 / -1;
        order: 3;
        gap: 0 var(--ar-4);
        flex-wrap: wrap;
        overflow: visible;
    }
    /* Dokunma hedefi: 32px'ti, parmak için kısa. */
    .gezinme a { padding: .55rem 0; }

    /* "Dil" etiketi mobilde yer kaplamasın; seçicinin kendisi zaten dilin
     * adını yazıyor. Ekran okuyucu için duruyor. */
    .dil-secici label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .dil-secici select { max-width: 9rem; }

    .sayfa { padding: var(--ar-5) var(--ar-3) var(--ar-6); }

    .satir { grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--ar-1) var(--ar-3); }
    /* Afiş telefonda da kalsın: listeyi gözle taramanın en hızlı yolu o.
     * Önceden tamamen gizleniyordu. */
    .satir--afisli {
        grid-template-columns: 3.5rem 5.5rem minmax(0, 1fr);
        gap: var(--ar-1) var(--ar-3);
    }
    .satir-afis img { width: 5.5rem; }
    .satir-eylem { grid-column: 2 / -1; margin-top: var(--ar-2); }

    .durum-serit { font-size: var(--yazi-base); padding: var(--ar-2) var(--ar-3); }

    .gun-basligi { font-size: var(--yazi-xl); }
    .gun-basligi span { font-size: var(--yazi-base); }
    .gun-basligi small { margin-left: 0; width: 100%; }

    .etkinlik { padding: var(--ar-4); }
    .etkinlik h1 { font-size: var(--yazi-xl); }
    .etkinlik-bilgi { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .etkinlik-bilgi dt { margin-top: var(--ar-3); }
    .etkinlik-bilgi dd { margin-bottom: var(--ar-1); }

    .kunye--duzenleyen { flex-direction: column; }
    .kunye-iletisim { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .kunye-iletisim dt { margin-top: var(--ar-2); }

    .veri-tablo { font-size: var(--yazi-sm); }
    .veri-tablo th, .veri-tablo td { padding: .45rem; }

    .plan-buyutec { max-width: 94vw; }
}

/* ===================================================================
 * 18. Hareketi azaltma
 * =================================================================== */

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

    .dil-liste--doner { position: static; min-height: 0; }
    .dil-liste--doner .dil-satir {
        position: static;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
}