/* ==========================================================================
   Okullar Tatil — ana stil
   Kimlik: yaprak takvim (duvar takvimi), kar beyazı zemin, mürekkep laciverti,
   tatil kırmızısı ve kara tahta yeşili. Tek yazı ailesi: Archivo (genişlik ekseniyle).
   ========================================================================== */

@font-face {
        font-family: "Archivo OT";
        src: url("../fonts/archivo-latin.woff2") format("woff2-variations"), url("../fonts/archivo-latin.woff2") format("woff2");
        font-weight: 100 900;
        font-stretch: 62% 125%;
        font-style: normal;
        font-display: swap;
        unicode-range: U+0000-00FF, U+0131, U+2013-2014, U+2018-201E, U+2022, U+2026, U+2190-2193, U+2212;
}
@font-face {
        font-family: "Archivo OT";
        src: url("../fonts/archivo-tr-ext.woff2") format("woff2-variations"), url("../fonts/archivo-tr-ext.woff2") format("woff2");
        font-weight: 100 900;
        font-stretch: 62% 125%;
        font-style: normal;
        font-display: swap;
        unicode-range: U+011E-011F, U+0130, U+015E-015F, U+20BA;
}

:root {
        color-scheme: light dark;

        /* Renkler */
        --kar: #eef3f8;
        --kar-2: #e3eaf2;
        --kagit: #ffffff;
        --murekkep: #14213d;
        --murekkep-2: #45536f;
        --murekkep-3: #6b7894;
        --cizgi: #d3dde9;
        --kirmizi: #d7261e;
        --kirmizi-koyu: #a51a14;
        --kirmizi-zemin: #fde8e6;
        --tahta: #1f5a44;
        --tahta-zemin: #e2efe8;
        --sari: #ffc93c;
        --sari-zemin: #fff4d1;
        --harita-bos: #c9d6e6;
        --odak: #2f6fed;

        /* Takvim yaprağı her temada kâğıt gibi kalır */
        --yaprak-zemin: #ffffff;
        --yaprak-yazi: #14213d;
        --yaprak-cizgi: #dfe6ef;

        --golge-1: 0 1px 0 rgba(20, 33, 61, 0.05), 0 1px 3px rgba(20, 33, 61, 0.08);
        --golge-2: 0 1px 0 rgba(20, 33, 61, 0.04), 0 18px 40px -18px rgba(20, 33, 61, 0.35);

        /* Yazı */
        --aile: "Archivo OT", "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        --y-xs: 0.8125rem;
        --y-s: 0.9375rem;
        --y-m: 1.0625rem;
        --y-l: 1.25rem;
        --y-xl: 1.5625rem;
        --y-2xl: clamp(1.75rem, 1.2rem + 1.6vw, 2.35rem);
        --y-3xl: clamp(2.4rem, 1.4rem + 4vw, 4rem);
        --y-dev: clamp(2.9rem, 1.6rem + 6vw, 5.6rem);

        /* Ölçüler */
        --kap: 1180px;
        --kap-dar: 760px;
        --bosluk: clamp(16px, 4vw, 32px);
        --r-s: 8px;
        --r-m: 14px;
        --r-tam: 999px;
        --ust-yukseklik: 64px;

        --hiz: 180ms;
        --egri: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
        :root:not([data-tema="acik"]) {
                --kar: #0d1524;
                --kar-2: #111b2e;
                --kagit: #152038;
                --murekkep: #e9eef7;
                --murekkep-2: #b3bfd4;
                --murekkep-3: #8794ad;
                --cizgi: #26334f;
                --kirmizi: #ff5b4f;
                --kirmizi-koyu: #ff8379;
                --kirmizi-zemin: #3a1c24;
                --tahta: #66d1a3;
                --tahta-zemin: #13302a;
                --sari: #ffd166;
                --sari-zemin: #3a3016;
                --harita-bos: #2a3858;
                --odak: #8fb4ff;
                --yaprak-zemin: #f4f7fb;
                --yaprak-cizgi: #d6dee9;
                --golge-1: 0 1px 0 rgba(0, 0, 0, 0.3);
                --golge-2: 0 24px 50px -20px rgba(0, 0, 0, 0.7);
        }
}

/* --------------------------------------------------------------------------
   Temel
   -------------------------------------------------------------------------- */

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

html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        scroll-padding-top: calc(var(--ust-yukseklik) + 16px);
}

body {
        margin: 0;
        background: var(--kar);
        color: var(--murekkep);
        font-family: var(--aile);
        font-size: var(--y-m);
        line-height: 1.6;
        font-stretch: 100%;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        overflow-x: hidden;
}

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

a {
        color: inherit;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
}

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

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

h1,
h2,
h3,
h4 {
        line-height: 1.15;
        margin: 0 0 0.5em;
        font-weight: 750;
        font-stretch: 85%;
        letter-spacing: -0.01em;
        text-wrap: balance;
}

p {
        margin: 0 0 1em;
        text-wrap: pretty;
}

button,
input,
select,
textarea {
        font: inherit;
        color: inherit;
}

.gorunmez,
.screen-reader-text {
        position: absolute !important;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
}

.atla {
        position: absolute;
        left: 12px;
        top: -60px;
        z-index: 100;
        background: var(--murekkep);
        color: var(--kar);
        padding: 10px 16px;
        border-radius: var(--r-s);
        text-decoration: none;
}

.atla:focus {
        top: 12px;
        color: var(--kar);
}

.kap {
        width: 100%;
        max-width: var(--kap);
        margin-inline: auto;
        padding-inline: var(--bosluk);
}

.kap--dar {
        max-width: calc(var(--kap-dar) + 2 * var(--bosluk));
}

.simge {
        width: 1.25em;
        height: 1.25em;
        flex: none;
        vertical-align: -0.2em;
}

/* --------------------------------------------------------------------------
   Düğmeler
   -------------------------------------------------------------------------- */

.dugme {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5em;
        min-height: 46px;
        padding: 0.6em 1.2em;
        border: 2px solid transparent;
        border-radius: var(--r-tam);
        font-weight: 650;
        font-stretch: 95%;
        line-height: 1.1;
        text-decoration: none;
        cursor: pointer;
        transition: background-color var(--hiz), color var(--hiz), border-color var(--hiz), transform var(--hiz) var(--egri);
        -webkit-tap-highlight-color: transparent;
}

.dugme:active {
        transform: translateY(1px) scale(0.98);
}

.dugme--koyu {
        background: var(--murekkep);
        color: var(--kar);
}

.dugme--koyu:hover {
        background: var(--kirmizi);
        color: #fff;
}

.dugme--sari {
        background: var(--sari);
        color: #14213d;
}

.dugme--sari:hover {
        background: #ffb800;
        color: #14213d;
}

.dugme--cizgi {
        border-color: currentColor;
        background: transparent;
        color: var(--murekkep);
}

.dugme--cizgi:hover {
        background: var(--murekkep);
        border-color: var(--murekkep);
        color: var(--kar);
}

.dugme--metin {
        background: transparent;
        color: var(--murekkep-2);
        padding-inline: 0.6em;
        text-decoration: underline;
        text-underline-offset: 3px;
}

.dugme--kucuk {
        min-height: 38px;
        padding: 0.45em 0.95em;
        font-size: var(--y-s);
}

.dugme--tam {
        width: 100%;
}

.dugme .simge {
        width: 1.1em;
        height: 1.1em;
}

.ikon-dugme {
        position: relative;
        display: inline-grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: var(--r-tam);
        background: transparent;
        color: var(--murekkep);
        cursor: pointer;
        transition: background-color var(--hiz);
}

.ikon-dugme:hover {
        background: var(--kar-2);
}

.ikon-dugme__nokta {
        position: absolute;
        top: 9px;
        right: 10px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--kirmizi);
        box-shadow: 0 0 0 2px var(--kagit);
}

/* --------------------------------------------------------------------------
   Üst kısım
   -------------------------------------------------------------------------- */

.serit {
        background: var(--murekkep);
        color: var(--kar);
        font-size: var(--y-s);
        text-align: center;
        padding: 8px 0;
}

.serit a {
        color: inherit;
}

.ust {
        position: sticky;
        top: 0;
        z-index: 50;
        background: color-mix(in srgb, var(--kar) 86%, transparent);
        -webkit-backdrop-filter: saturate(1.4) blur(14px);
        backdrop-filter: saturate(1.4) blur(14px);
        border-bottom: 1px solid transparent;
        transition: border-color var(--hiz), box-shadow var(--hiz);
        view-transition-name: ust;
}

.ust--golgeli {
        border-bottom-color: var(--cizgi);
}

.ust__ic {
        display: flex;
        align-items: center;
        gap: 16px;
        min-height: var(--ust-yukseklik);
}

.logo {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        color: var(--murekkep);
        flex: none;
}

.logo:hover {
        color: var(--murekkep);
}

.logo__isaret {
        width: 34px;
        height: 34px;
}

.logo__yazi {
        font-size: 1.3rem;
        font-weight: 600;
        font-stretch: 78%;
        letter-spacing: -0.01em;
        line-height: 1;
}

.logo__yazi b {
        font-weight: 850;
        color: var(--kirmizi);
}

.logo__gorsel {
        max-height: 40px;
        width: auto;
}

.ana-menu {
        margin-left: auto;
}

.ana-menu__liste {
        display: flex;
        gap: 2px;
        list-style: none;
        margin: 0;
        padding: 0;
}

.ana-menu__liste a {
        display: block;
        padding: 8px 12px;
        border-radius: var(--r-tam);
        text-decoration: none;
        font-weight: 600;
        font-stretch: 92%;
        font-size: var(--y-s);
        color: var(--murekkep-2);
        transition: background-color var(--hiz), color var(--hiz);
}

.ana-menu__liste a:hover,
.ana-menu__liste a[aria-current="page"] {
        color: var(--murekkep);
        background: var(--kar-2);
}

.ust__eylem {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-left: 8px;
}

.hesap-dugme {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 2px solid var(--murekkep);
        background: var(--sari);
        color: #14213d;
        font-weight: 800;
        cursor: pointer;
        display: grid;
        place-items: center;
}

.menu-dugme {
        display: none;
}

.mobil-menu {
        position: fixed;
        inset: var(--ust-yukseklik) 0 0;
        z-index: 49;
        background: var(--kar);
        overflow-y: auto;
        padding: 16px var(--bosluk) 40px;
}

.mobil-menu[hidden] {
        display: none;
}

.mobil-menu__liste,
.mobil-menu__ikincil {
        list-style: none;
        margin: 0;
        padding: 0;
}

.mobil-menu__liste a {
        display: block;
        padding: 14px 0;
        font-size: var(--y-xl);
        font-weight: 750;
        font-stretch: 80%;
        text-decoration: none;
        border-bottom: 1px solid var(--cizgi);
}

.mobil-menu__ikincil {
        margin-top: 24px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
}

.mobil-menu__ikincil a {
        display: inline-block;
        padding: 8px 14px;
        border: 1px solid var(--cizgi);
        border-radius: var(--r-tam);
        text-decoration: none;
        font-size: var(--y-s);
}

@media (max-width: 960px) {
        .ana-menu {
                display: none;
        }
        .menu-dugme {
                display: inline-grid;
        }
        .ust__eylem {
                margin-left: auto;
        }
}

/* --------------------------------------------------------------------------
   Genel bölümler ve başlıklar
   -------------------------------------------------------------------------- */

.ana {
        display: block;
        min-height: 60vh;
}

.bolum {
        padding-block: clamp(36px, 6vw, 72px);
}

.bolum + .bolum {
        padding-top: 0;
}

.bolum__bas {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px 24px;
        flex-wrap: wrap;
        margin-bottom: 20px;
}

.bolum__bas .bolum-basligi {
        margin: 0;
}

.bolum-basligi {
        font-size: var(--y-2xl);
        font-stretch: 78%;
        font-weight: 780;
}

.alt-baslik {
        font-size: var(--y-l);
        font-stretch: 90%;
        margin-top: 28px;
}

.bolum__not {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin: 0;
        font-size: var(--y-s);
        color: var(--murekkep-3);
}

.bolum__baglanti {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-weight: 650;
        font-size: var(--y-s);
        text-decoration: none;
}

.bolum__baglanti .simge {
        transition: transform var(--hiz) var(--egri);
}

.bolum__baglanti:hover .simge {
        transform: translateX(3px);
}

.sayfa-bas {
        padding-block: clamp(20px, 4vw, 40px) clamp(28px, 5vw, 56px);
}

.sayfa-basligi {
        font-size: var(--y-3xl);
        font-stretch: 72%;
        font-weight: 820;
        letter-spacing: -0.015em;
        line-height: 0.98;
        margin-bottom: 16px;
}

.sayfa-bas__ozet {
        font-size: var(--y-l);
        color: var(--murekkep-2);
        max-width: 62ch;
        line-height: 1.5;
}

.bos-durum {
        padding: 22px 24px;
        border: 1.5px dashed var(--cizgi);
        border-radius: var(--r-m);
        color: var(--murekkep-2);
        background: color-mix(in srgb, var(--kagit) 55%, transparent);
        max-width: 70ch;
}

.dipnot {
        font-size: var(--y-s);
        color: var(--murekkep-3);
        margin-top: 16px;
}

.kirinti {
        padding-top: 18px;
        font-size: var(--y-xs);
        color: var(--murekkep-3);
}

.kirinti ol {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        list-style: none;
        margin: 0;
        padding: 0;
}

.kirinti li:not(:last-child)::after {
        content: "/";
        margin-left: 6px;
        opacity: 0.6;
}

.kirinti a {
        text-decoration: none;
}

.kirinti [aria-current] {
        color: var(--murekkep-2);
        display: inline-block;
        max-width: 40ch;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
}

/* --------------------------------------------------------------------------
   Takvim yaprağı — sitenin imzası
   -------------------------------------------------------------------------- */

.yaprak {
        --damga: var(--tahta);
        position: relative;
        width: min(100%, 330px);
        background: var(--yaprak-zemin);
        color: var(--yaprak-yazi);
        border-radius: 6px 6px 10px 10px;
        box-shadow: 0 1px 0 rgba(20, 33, 61, 0.08), 0 30px 60px -28px rgba(20, 33, 61, 0.55);
        overflow: hidden;
        isolation: isolate;
}

.yaprak[data-tatil="evet"] {
        --damga: #d7261e;
}

.yaprak[data-tatil="kismen"] {
        --damga: #b25a00;
}

.yaprak__ust {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        padding: 18px 18px 10px;
        background: #d7261e;
        color: #fff;
        font-weight: 700;
        font-stretch: 85%;
        font-size: var(--y-s);
}

/* Takvim delikleri */
.yaprak__ust::before,
.yaprak__ust::after {
        content: "";
        position: absolute;
        top: 6px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--kar);
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

.yaprak__ust::before {
        left: 30%;
}

.yaprak__ust::after {
        right: 30%;
}

.yaprak__etiket {
        padding: 2px 10px;
        border-radius: var(--r-tam);
        background: rgba(255, 255, 255, 0.18);
}

.yaprak__govde {
        position: relative;
        display: grid;
        justify-items: center;
        padding: 6px 16px 4px;
        border-bottom: 1px dashed var(--yaprak-cizgi);
}

.yaprak__gun {
        font-size: clamp(6.5rem, 18vw, 9.5rem);
        line-height: 0.9;
        font-weight: 820;
        font-stretch: 62%;
        letter-spacing: -0.04em;
        font-variant-numeric: lining-nums;
}

.yaprak__haftagun {
        font-size: var(--y-l);
        font-weight: 650;
        font-stretch: 80%;
        margin: 2px 0 64px;
        color: #45536f;
}

.yaprak__damga {
        position: absolute;
        left: 50%;
        bottom: 14px;
        max-width: 88%;
        padding: 6px 12px 5px;
        border: 3px solid var(--damga);
        border-radius: 6px;
        box-shadow: inset 0 0 0 2px var(--yaprak-zemin), inset 0 0 0 4px var(--damga);
        color: var(--damga);
        font-size: clamp(1.15rem, 3vw, 1.55rem);
        font-weight: 850;
        font-stretch: 75%;
        letter-spacing: 0.06em;
        line-height: 1;
        white-space: nowrap;
        transform: translateX(-50%) rotate(-7deg);
        transform-origin: center;
        opacity: 0.93;
        mix-blend-mode: multiply;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.7'/%3E%3C/filter%3E%3Crect width='160' height='60' filter='url(%23n)'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.7'/%3E%3C/filter%3E%3Crect width='160' height='60' filter='url(%23n)'/%3E%3C/svg%3E");
        -webkit-mask-size: 160px 60px;
        mask-size: 160px 60px;
}

.yaprak__alt {
        padding: 10px 16px 14px;
        text-align: center;
        font-size: var(--y-s);
        font-weight: 600;
        color: #45536f;
        min-height: 2.6em;
}

.yaprak--kucuk {
        width: min(100%, 230px);
}

.yaprak--kucuk .yaprak__gun {
        font-size: clamp(4.6rem, 12vw, 6rem);
}

.yaprak--kucuk .yaprak__damga {
        font-size: 1.05rem;
        bottom: 10px;
}

.yaprak--kucuk .yaprak__haftagun {
        margin-bottom: 48px;
}

.yaprak--tek {
        margin-inline: auto;
}

/* Yaprak yığını (ana sayfa): bugün yırtılır, yarın görünür */
.yaprak-yigini {
        position: relative;
        display: grid;
        justify-items: center;
        padding-top: 14px;
}

.yaprak-yigini > .yaprak {
        grid-area: 1 / 1;
}

.yaprak-yigini::before {
        /* altta kalan yaprakların kalınlığı */
        content: "";
        grid-area: 1 / 1;
        width: min(100%, 330px);
        height: 100%;
        border-radius: 6px 6px 10px 10px;
        background: var(--yaprak-zemin);
        transform: translate(6px, 8px);
        box-shadow: 0 1px 0 rgba(20, 33, 61, 0.06);
        opacity: 0.7;
}

.yaprak-yigini:not(.js-hazir) .yaprak--on {
        display: none;
}

.yaprak-yigini.js-hazir .yaprak--on {
        z-index: 2;
        transform-origin: 50% 0;
}

.yaprak-yigini.js-hazir:not(.oynadi) .yaprak--arka .yaprak__damga {
        opacity: 0;
        transform: translateX(-50%) rotate(-16deg) scale(1.9);
}

.yaprak-yigini.oynat .yaprak--on {
        animation: yaprak-yirt 900ms cubic-bezier(0.55, 0, 0.75, 0.2) forwards;
        pointer-events: none;
}

.yaprak-yigini.oynat .yaprak--on .yaprak__ust {
        /* yırtık kenar */
        clip-path: polygon(0 18%, 4% 8%, 9% 16%, 14% 6%, 19% 15%, 25% 7%, 31% 17%, 37% 6%, 43% 15%, 50% 5%, 56% 16%, 62% 6%, 68% 15%, 74% 7%, 80% 17%, 86% 6%, 92% 15%, 100% 7%, 100% 100%, 0 100%);
}

.yaprak-yigini.oynat .yaprak--arka .yaprak__damga {
        animation: damga-vur 420ms cubic-bezier(0.3, 1.6, 0.5, 1) 820ms both;
}

.yaprak-yigini.oynat .yaprak--arka {
        animation: yaprak-sars 260ms ease-out 1040ms;
}

.yaprak-yigini.oynadi .yaprak--on {
        display: none;
}

@keyframes yaprak-yirt {
        0% {
                transform: none;
        }
        22% {
                transform: rotate(-2.5deg) translateY(4px);
        }
        100% {
                transform: translate(70px, 115%) rotate(24deg);
                opacity: 0;
        }
}

@keyframes damga-vur {
        0% {
                opacity: 0;
                transform: translateX(-50%) rotate(-16deg) scale(1.9);
        }
        70% {
                opacity: 0.95;
                transform: translateX(-50%) rotate(-6deg) scale(0.94);
        }
        100% {
                opacity: 0.93;
                transform: translateX(-50%) rotate(-7deg) scale(1);
        }
}

@keyframes yaprak-sars {
        0%,
        100% {
                transform: none;
        }
        35% {
                transform: translate(1px, 2px);
        }
        70% {
                transform: translate(-1px, 0);
        }
}

/* --------------------------------------------------------------------------
   Ana sayfa: kahraman alanı
   -------------------------------------------------------------------------- */

.kahraman {
        position: relative;
        overflow: hidden;
        padding-block: clamp(24px, 5vw, 64px) clamp(40px, 6vw, 80px);
        background:
                radial-gradient(1200px 420px at 85% 0%, color-mix(in srgb, var(--kagit) 70%, transparent), transparent 70%),
                var(--kar);
}

.kahraman__ic {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);
        align-items: center;
        gap: clamp(28px, 5vw, 72px);
}

.kahraman__ust {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 14px;
        font-weight: 650;
        font-stretch: 90%;
        color: var(--murekkep-2);
}

.kahraman__canli {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 2px 10px 2px 8px;
        border-radius: var(--r-tam);
        background: var(--kirmizi-zemin);
        color: var(--kirmizi-koyu);
        font-size: var(--y-xs);
        font-weight: 700;
}

.kahraman__canli::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--kirmizi);
        animation: nabiz 2s ease-in-out infinite;
}

@keyframes nabiz {
        50% {
                opacity: 0.35;
        }
}

.kahraman__baslik {
        font-size: var(--y-dev);
        font-stretch: 66%;
        font-weight: 850;
        line-height: 0.9;
        letter-spacing: -0.02em;
        margin-bottom: 18px;
        view-transition-name: sayfa-baslik;
}

.kahraman__cevap {
        font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
        line-height: 1.45;
        max-width: 34ch;
        color: var(--murekkep-2);
        margin-bottom: 28px;
}

.kahraman__il {
        max-width: 520px;
}

.kahraman__yaprak {
        display: grid;
        justify-items: center;
}

@media (max-width: 820px) {
        .kahraman__ic {
                grid-template-columns: 1fr;
        }
        .kahraman__yaprak {
                order: -1;
        }
        .kahraman .yaprak {
                width: min(100%, 280px);
        }
        .kahraman .yaprak__gun {
                font-size: 6.8rem;
        }
        .kahraman__cevap {
                max-width: none;
        }
}

/* Kar efekti tuvali */
.kar-tuvali {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        opacity: 0.9;
}

/* İl cevabı (kahraman) */
.il-cevap {
        margin-top: 16px;
        padding: 16px 18px;
        border-radius: var(--r-m);
        background: var(--kagit);
        box-shadow: var(--golge-1);
        border-left: 6px solid var(--tahta);
        animation: belir 260ms var(--egri);
}

.il-cevap[data-durum="evet"] {
        border-left-color: var(--kirmizi);
}

.il-cevap[data-durum="kismen"] {
        border-left-color: #d98a1a;
}

.il-cevap__satir {
        margin: 0 0 4px;
        font-size: var(--y-l);
        font-weight: 750;
        font-stretch: 85%;
}

.il-cevap__durum {
        color: var(--tahta);
}

.il-cevap[data-durum="evet"] .il-cevap__durum {
        color: var(--kirmizi);
}

.il-cevap[data-durum="kismen"] .il-cevap__durum {
        color: #b25a00;
}

.il-cevap__aciklama {
        color: var(--murekkep-2);
        margin-bottom: 12px;
}

.il-cevap__eylem {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0;
}

@keyframes belir {
        from {
                opacity: 0;
                transform: translateY(6px);
        }
}

/* --------------------------------------------------------------------------
   İl seçici (açılır liste, aranabilir)
   -------------------------------------------------------------------------- */

.il-secici__etiket {
        display: block;
        font-weight: 650;
        font-size: var(--y-s);
        margin-bottom: 8px;
        color: var(--murekkep-2);
}

.il-secici__alan {
        position: relative;
        display: flex;
        gap: 8px;
}

.il-secici__simge {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--murekkep-3);
        pointer-events: none;
        z-index: 1;
}

.il-secici__secim,
.cb__girdi {
        flex: 1;
        min-width: 0;
        height: 54px;
        padding: 0 16px 0 46px;
        border: 2px solid var(--cizgi);
        border-radius: var(--r-tam);
        background: var(--kagit);
        font-size: var(--y-l);
        font-weight: 600;
        appearance: none;
        transition: border-color var(--hiz), box-shadow var(--hiz);
}

.il-secici__secim:focus,
.cb__girdi:focus {
        outline: none;
        border-color: var(--murekkep);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--odak) 25%, transparent);
}

.il-secici__git {
        min-height: 54px;
}

.il-secici[data-js] .il-secici__git {
        display: none;
}

.cb {
        position: relative;
        flex: 1;
        display: flex;
}

.cb__liste {
        position: absolute;
        z-index: 30;
        left: 0;
        right: 0;
        top: calc(100% + 6px);
        max-height: 320px;
        overflow-y: auto;
        margin: 0;
        padding: 6px;
        list-style: none;
        background: var(--kagit);
        border: 1px solid var(--cizgi);
        border-radius: var(--r-m);
        box-shadow: var(--golge-2);
        overscroll-behavior: contain;
}

.cb__liste[hidden] {
        display: none;
}

.cb__secenek {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
        border-radius: var(--r-s);
        cursor: pointer;
        font-weight: 550;
}

.cb__secenek[aria-selected="true"],
.cb__secenek:hover {
        background: var(--kar-2);
}

.cb__secenek mark {
        background: var(--sari-zemin);
        color: inherit;
        border-radius: 3px;
}

.cb__plaka {
        font-size: var(--y-xs);
        color: var(--murekkep-3);
        font-variant-numeric: tabular-nums;
}

.cb__durum {
        font-size: var(--y-xs);
        font-weight: 700;
        color: var(--kirmizi);
}

.cb__bos {
        padding: 12px;
        color: var(--murekkep-3);
}

/* --------------------------------------------------------------------------
   Tatil listeleri, rozetler
   -------------------------------------------------------------------------- */

.il-rozetleri {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        list-style: none;
        margin: 0 0 24px;
        padding: 0;
}

.il-rozeti a {
        display: inline-flex;
        align-items: baseline;
        gap: 8px;
        padding: 10px 16px;
        border-radius: var(--r-tam);
        background: var(--kirmizi);
        color: #fff;
        text-decoration: none;
        box-shadow: var(--golge-1);
        transition: transform var(--hiz) var(--egri), background-color var(--hiz);
}

.il-rozeti a:hover {
        transform: translateY(-2px);
        background: var(--kirmizi-koyu);
        color: #fff;
}

.il-rozeti__ad {
        font-weight: 780;
        font-stretch: 82%;
        font-size: var(--y-l);
        line-height: 1;
}

.il-rozeti__kapsam {
        font-size: var(--y-xs);
        opacity: 0.88;
}

.il-rozeti--kismi a {
        background: var(--kagit);
        color: var(--murekkep);
        box-shadow: inset 0 0 0 2px var(--kirmizi);
        background-image: repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in srgb, var(--kirmizi) 14%, transparent) 7px 9px);
}

.il-rozeti--kismi a:hover {
        background-color: var(--kirmizi-zemin);
        color: var(--murekkep);
}

.tatil-listesi__genel {
        font-size: var(--y-l);
        font-weight: 650;
        padding: 18px 22px;
        border-radius: var(--r-m);
        background: var(--kirmizi-zemin);
        color: var(--kirmizi-koyu);
}

.tatil-listesi__bos {
        padding: 18px 22px 18px 52px;
        border-radius: var(--r-m);
        background: var(--tahta-zemin) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5a44' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat 18px 20px / 20px;
        color: var(--murekkep);
        max-width: 75ch;
}

/* --------------------------------------------------------------------------
   Harita
   -------------------------------------------------------------------------- */

.bolum--harita {
        background: var(--kagit);
        padding-block: clamp(40px, 6vw, 80px);
}

.bolum + .bolum--harita {
        padding-top: clamp(40px, 6vw, 80px);
}

.harita-duzen {
        display: grid;
        grid-template-columns: minmax(0, 0.7fr) minmax(0, 2fr);
        gap: clamp(20px, 4vw, 48px);
        align-items: start;
}

.harita-duzen__metin p {
        color: var(--murekkep-2);
}

@media (max-width: 900px) {
        .harita-duzen {
                grid-template-columns: 1fr;
        }
}

.harita {
        position: relative;
}

.secmeli {
        display: inline-flex;
        padding: 4px;
        border-radius: var(--r-tam);
        background: var(--kar-2);
        margin-bottom: 14px;
}

.secmeli__dugme {
        min-height: 38px;
        padding: 0 18px;
        border: 0;
        border-radius: var(--r-tam);
        background: transparent;
        font-weight: 650;
        cursor: pointer;
        color: var(--murekkep-2);
        transition: background-color var(--hiz), color var(--hiz), box-shadow var(--hiz);
}

.secmeli__dugme[aria-pressed="true"] {
        background: var(--kagit);
        color: var(--murekkep);
        box-shadow: var(--golge-1);
}

.harita__tuval {
        position: relative;
        aspect-ratio: 1016 / 452;
        width: 100%;
}

.harita__yer-tutucu {
        position: absolute;
        inset: 0;
        border-radius: var(--r-m);
        background: linear-gradient(90deg, var(--kar-2), var(--kar), var(--kar-2));
        background-size: 200% 100%;
        animation: yukleniyor 1.4s linear infinite;
}

@keyframes yukleniyor {
        to {
                background-position: -200% 0;
        }
}

.harita__tuval svg {
        display: block;
        width: 100%;
        height: auto;
        overflow: visible;
}

.harita__tuval path {
        fill: var(--harita-bos);
        stroke: var(--kagit);
        stroke-width: 0.9;
        stroke-linejoin: round;
        cursor: pointer;
        transition: fill 260ms var(--egri), opacity var(--hiz);
        transform-box: fill-box;
        transform-origin: center;
}

.harita__tuval path:hover,
.harita__tuval path.secili {
        fill: color-mix(in srgb, var(--harita-bos) 70%, var(--murekkep));
}

.harita__tuval path.tam {
        fill: var(--kirmizi);
}

.harita__tuval path.tam:hover {
        fill: var(--kirmizi-koyu);
}

.harita__tuval path.kismi {
        fill: url(#ot-cizgili);
}

.harita__tuval path.vurgu {
        stroke: var(--murekkep);
        stroke-width: 2.4;
}

.harita__tuval.acildi path.tam,
.harita__tuval.acildi path.kismi {
        animation: il-nabiz 700ms var(--egri) both;
        animation-delay: calc(var(--sira, 0) * 40ms);
}

@keyframes il-nabiz {
        0% {
                transform: scale(1);
        }
        40% {
                transform: scale(1.12);
        }
        100% {
                transform: scale(1);
        }
}

.harita__ipucu {
        position: absolute;
        z-index: 5;
        pointer-events: none;
        padding: 8px 12px;
        border-radius: var(--r-s);
        background: var(--murekkep);
        color: var(--kar);
        font-size: var(--y-s);
        line-height: 1.35;
        max-width: 240px;
        transform: translate(-50%, calc(-100% - 12px));
        box-shadow: var(--golge-2);
}

.harita__ipucu strong {
        display: block;
        font-stretch: 85%;
}

.harita__lejant {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 20px;
        list-style: none;
        margin: 14px 0 0;
        padding: 0;
        font-size: var(--y-s);
        color: var(--murekkep-2);
}

.harita__lejant li {
        display: inline-flex;
        align-items: center;
        gap: 8px;
}

.lejant {
        width: 16px;
        height: 16px;
        border-radius: 4px;
        background: var(--harita-bos);
}

.lejant--tam {
        background: var(--kirmizi);
}

.lejant--kismi {
        background: repeating-linear-gradient(135deg, var(--kirmizi) 0 3px, var(--harita-bos) 3px 6px);
}

/* --------------------------------------------------------------------------
   Sayaçlar ve yıl şeridi
   -------------------------------------------------------------------------- */

.sayac-duzen {
        display: grid;
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        gap: clamp(24px, 4vw, 56px);
        align-items: end;
        margin-bottom: 36px;
}

@media (max-width: 860px) {
        .sayac-duzen {
                grid-template-columns: 1fr;
        }
}

.sayac {
        display: flex;
        gap: clamp(10px, 2vw, 18px);
        font-variant-numeric: tabular-nums;
}

.sayac__birim {
        display: grid;
        justify-items: start;
}

.sayac__sayi {
        display: inline-block;
        font-size: clamp(3.4rem, 2rem + 6vw, 6.4rem);
        font-weight: 800;
        font-stretch: 62%;
        line-height: 0.85;
        letter-spacing: -0.03em;
}

.sayac__sayi.degisti {
        animation: rakam-cevir 420ms var(--egri);
}

@keyframes rakam-cevir {
        0% {
                transform: translateY(-35%);
                opacity: 0;
                filter: blur(2px);
        }
}

.sayac__birim + .sayac__birim .sayac__sayi {
        color: var(--murekkep-3);
}

.sayac__ad {
        font-size: var(--y-s);
        font-weight: 600;
        color: var(--murekkep-2);
        margin-top: 6px;
}

.sayac--kucuk .sayac__sayi {
        font-size: 2.6rem;
}

.sayac-duzen__alt {
        margin-top: 14px;
        color: var(--murekkep-2);
}

.sayac-duzen__diger {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 0;
        border-top: 1px solid var(--cizgi);
}

.sayac-duzen__diger a {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 14px 4px;
        border-bottom: 1px solid var(--cizgi);
        text-decoration: none;
        transition: background-color var(--hiz);
}

.sayac-duzen__diger a:hover {
        background: color-mix(in srgb, var(--kagit) 60%, transparent);
        color: inherit;
}

.sayac-duzen__diger strong {
        display: block;
        font-stretch: 88%;
}

.sayac-duzen__diger span span {
        color: var(--murekkep-2);
        font-size: var(--y-s);
}

.mini-sayi {
        min-width: 3ch;
        font-size: 2.2rem;
        font-weight: 800;
        font-stretch: 62%;
        line-height: 1;
        text-align: right;
        font-variant-numeric: tabular-nums;
        color: var(--kirmizi);
}

.yil-seridi {
        margin: 24px 0 0;
}

.yil-seridi__cizgi {
        position: relative;
        height: 14px;
        border-radius: var(--r-tam);
        background: var(--kar-2);
        overflow: visible;
}

.yil-seridi__cizgi::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: var(--ilerleme, 0%);
        border-radius: var(--r-tam);
        background: var(--murekkep);
        opacity: 0.85;
}

.yil-seridi__donem {
        position: absolute;
        top: -3px;
        bottom: -3px;
        border-radius: 4px;
        background: var(--sari);
        box-shadow: 0 0 0 2px var(--kar);
}

.yil-seridi__donem--yariyil {
        background: var(--kirmizi);
}

.yil-seridi__bugun {
        position: absolute;
        top: -8px;
        width: 3px;
        height: 30px;
        margin-left: -1px;
        background: var(--murekkep);
        border-radius: 2px;
}

.yil-seridi__bugun span {
        position: absolute;
        bottom: calc(100% + 4px);
        left: 50%;
        transform: translateX(-50%);
        font-size: var(--y-xs);
        font-weight: 700;
        white-space: nowrap;
}

.yil-seridi__ayar {
        display: flex;
        justify-content: space-between;
        margin-top: 12px;
        font-size: var(--y-xs);
        color: var(--murekkep-3);
}

.buyuk-sayac {
        margin-top: 24px;
}

.buyuk-sayac__etiket {
        margin-top: 10px;
        color: var(--murekkep-2);
        font-weight: 600;
}

.sayfa-bas--sayac {
        padding-bottom: clamp(36px, 6vw, 64px);
}

.istatistik {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 40px;
        margin: 32px 0 0;
}

.istatistik div {
        display: flex;
        flex-direction: column-reverse;
}

.istatistik dt {
        font-size: var(--y-s);
        color: var(--murekkep-2);
}

.istatistik dd {
        margin: 0;
        font-size: 2.4rem;
        font-weight: 800;
        font-stretch: 62%;
        line-height: 1;
}

/* --------------------------------------------------------------------------
   Duyuru satırları
   -------------------------------------------------------------------------- */

.duyuru-listesi {
        list-style: none;
        margin: 0;
        padding: 0;
        border-top: 1px solid var(--cizgi);
}

.duyuru-satiri {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 16px;
        align-items: center;
        padding: 14px 0;
        border-bottom: 1px solid var(--cizgi);
}

.duyuru-satiri__tarih {
        display: grid;
        justify-items: center;
        padding: 6px 0 8px;
        border-radius: 6px;
        background: var(--yaprak-zemin);
        color: var(--yaprak-yazi);
        box-shadow: var(--golge-1);
        border-top: 6px solid #d7261e;
        line-height: 1;
}

.duyuru-satiri__gun {
        font-size: 1.8rem;
        font-weight: 820;
        font-stretch: 62%;
}

.duyuru-satiri__ay {
        font-size: var(--y-xs);
        font-weight: 650;
        color: #45536f;
}

.duyuru-satiri__baslik {
        display: block;
        font-weight: 700;
        font-stretch: 92%;
        font-size: var(--y-l);
        line-height: 1.3;
        text-decoration: none;
        margin-bottom: 6px;
}

.duyuru-satiri__meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 10px;
        margin: 0;
        font-size: var(--y-xs);
        color: var(--murekkep-3);
}

.etiket {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 9px;
        border-radius: var(--r-tam);
        background: var(--kar-2);
        color: var(--murekkep-2);
        font-size: var(--y-xs);
        font-weight: 650;
        line-height: 1.3;
}

.etiket .simge {
        width: 1em;
        height: 1em;
}

.etiket--kar {
        background: #e3edfb;
        color: #1d4f9a;
}

.etiket--hava,
.etiket--deprem,
.etiket--salgin {
        background: var(--sari-zemin);
        color: #7a5300;
}

.etiket--resmi {
        background: var(--tahta-zemin);
        color: var(--tahta);
}

.etiket--canli {
        background: var(--kirmizi);
        color: #fff;
}

.etiket--gecti {
        background: var(--kar-2);
        color: var(--murekkep-3);
}

.etiket--ara,
.etiket--yariyil {
        background: var(--sari-zemin);
        color: #7a5300;
}

.etiket--hafta-sonu,
.etiket--yaz {
        background: var(--kar-2);
        color: var(--murekkep-2);
}

.etiket--yarim {
        background: var(--sari-zemin);
        color: #7a5300;
}

@media (prefers-color-scheme: dark) {
        :root:not([data-tema="acik"]) .etiket--kar {
                background: #1c2c4a;
                color: #9cc0ff;
        }
        :root:not([data-tema="acik"]) .etiket--hava,
        :root:not([data-tema="acik"]) .etiket--ara,
        :root:not([data-tema="acik"]) .etiket--yariyil,
        :root:not([data-tema="acik"]) .etiket--yarim,
        :root:not([data-tema="acik"]) .etiket--deprem,
        :root:not([data-tema="acik"]) .etiket--salgin {
                color: #ffd98a;
        }
}

/* --------------------------------------------------------------------------
   Takip kutusu (bildirim çağrısı)
   -------------------------------------------------------------------------- */

.takip-kutusu {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 20px 28px;
        align-items: center;
        padding: clamp(22px, 4vw, 36px);
        border-radius: var(--r-m);
        background: #14213d;
        color: #e9eef7;
        position: relative;
        overflow: hidden;
}

.takip-kutusu::after {
        content: "";
        position: absolute;
        right: -40px;
        top: -40px;
        width: 220px;
        height: 220px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M12 2v20M4.9 6.5l14.2 11M4.9 17.5l14.2-11'/%3E%3C/svg%3E") no-repeat center / contain;
        opacity: 0.06;
        pointer-events: none;
}

.takip-kutusu__simge {
        display: grid;
        place-items: center;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: var(--sari);
        color: #14213d;
}

.takip-kutusu__simge .simge {
        width: 30px;
        height: 30px;
        transform-origin: 50% 10%;
}

.takip-kutusu:hover .takip-kutusu__simge .simge {
        animation: zil-salla 900ms ease-in-out;
}

@keyframes zil-salla {
        0%,
        100% {
                transform: rotate(0);
        }
        20% {
                transform: rotate(14deg);
        }
        40% {
                transform: rotate(-11deg);
        }
        60% {
                transform: rotate(7deg);
        }
        80% {
                transform: rotate(-4deg);
        }
}

.takip-kutusu__baslik {
        font-size: var(--y-xl);
        font-weight: 780;
        font-stretch: 80%;
        line-height: 1.15;
        margin-bottom: 6px;
        color: #fff;
}

.takip-kutusu__metin p:last-child {
        margin: 0;
        color: #b3bfd4;
}

@media (max-width: 760px) {
        .takip-kutusu {
                grid-template-columns: auto minmax(0, 1fr);
        }
        .takip-kutusu .dugme {
                grid-column: 1 / -1;
        }
}

/* --------------------------------------------------------------------------
   Yazı kartları ve ızgaralar
   -------------------------------------------------------------------------- */

.yazi-izgarasi {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 28px 24px;
}

.yazi-izgarasi .ot-reklam {
        grid-column: 1 / -1;
}

.yazi-karti {
        display: flex;
        flex-direction: column;
        gap: 14px;
}

.yazi-karti__gorsel {
        display: block;
        border-radius: var(--r-m);
        overflow: hidden;
        aspect-ratio: 16 / 9;
        background: var(--kar-2);
}

.yazi-karti__gorsel img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 500ms var(--egri);
}

.yazi-karti:hover .yazi-karti__gorsel img {
        transform: scale(1.04);
}

.yazi-karti__kategori {
        font-size: var(--y-xs);
        font-weight: 700;
        color: var(--kirmizi);
        text-decoration: none;
}

.yazi-karti__baslik {
        font-size: var(--y-l);
        font-stretch: 88%;
        margin: 4px 0 8px;
        line-height: 1.25;
}

.yazi-karti__baslik a {
        text-decoration: none;
}

.yazi-karti__baslik a:hover {
        text-decoration: underline;
        color: inherit;
}

.yazi-karti__ozet {
        color: var(--murekkep-2);
        font-size: var(--y-s);
        margin-bottom: 8px;
}

.yazi-karti__tarih {
        font-size: var(--y-xs);
        color: var(--murekkep-3);
}

/* --------------------------------------------------------------------------
   SSS
   -------------------------------------------------------------------------- */

.sss {
        margin-top: 48px;
}

.sss__liste {
        border-top: 1px solid var(--cizgi);
}

.sss__oge {
        border-bottom: 1px solid var(--cizgi);
        interpolate-size: allow-keywords;
}

.sss__oge summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        padding: 18px 2px;
        font-weight: 700;
        font-stretch: 92%;
        font-size: var(--y-l);
        line-height: 1.3;
        cursor: pointer;
        list-style: none;
}

.sss__oge summary::-webkit-details-marker {
        display: none;
}

.sss__simge {
        flex: none;
        transition: transform 240ms var(--egri);
        color: var(--kirmizi);
}

.sss__oge[open] .sss__simge {
        transform: rotate(45deg);
}

.sss__oge::details-content {
        block-size: 0;
        overflow: hidden;
        transition: block-size 280ms var(--egri), content-visibility 280ms allow-discrete;
}

.sss__oge[open]::details-content {
        block-size: auto;
}

.sss__cevap {
        padding: 0 2px 18px;
        color: var(--murekkep-2);
        max-width: 68ch;
}

/* --------------------------------------------------------------------------
   Paylaş
   -------------------------------------------------------------------------- */

.paylas {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin: 24px 0;
}

.paylas__etiket {
        font-size: var(--y-s);
        font-weight: 650;
        color: var(--murekkep-2);
        margin-right: 4px;
}

.paylas__dugme {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 40px;
        padding: 0 14px;
        border: 1px solid var(--cizgi);
        border-radius: var(--r-tam);
        background: var(--kagit);
        font-size: var(--y-s);
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        transition: border-color var(--hiz), background-color var(--hiz);
}

.paylas__dugme:hover {
        border-color: var(--murekkep);
        color: var(--murekkep);
}

.paylas__dugme--wp {
        background: #1f9d57;
        border-color: #1f9d57;
        color: #fff;
}

.paylas__dugme--wp:hover {
        background: #17824a;
        border-color: #17824a;
        color: #fff;
}

/* --------------------------------------------------------------------------
   İl sayfası
   -------------------------------------------------------------------------- */

.il-bas {
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) auto;
        gap: clamp(24px, 4vw, 56px);
        align-items: center;
}

.il-bas__plaka {
        display: inline-block;
        margin-bottom: 14px;
        padding: 4px 12px 3px;
        border: 2px solid var(--murekkep);
        border-radius: 6px;
        font-weight: 800;
        font-stretch: 70%;
        font-size: 1.35rem;
        letter-spacing: 0.04em;
        line-height: 1;
        background: var(--kagit);
        box-shadow: inset 6px 0 0 #1d4f9a;
        padding-left: 18px;
}

.il-bas__eylem {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 16px;
        margin-top: 20px;
}

.il-bas__eylem .paylas {
        margin: 0;
}

.il-bas__yapraklar {
        display: flex;
        gap: 16px;
        align-items: flex-end;
}

.il-bas__yapraklar .yaprak:first-child {
        transform: rotate(-3deg) translateY(10px);
        opacity: 0.92;
}

.il-bas__yapraklar .yaprak--vurgu {
        transform: rotate(1.5deg);
}

@media (max-width: 860px) {
        .il-bas {
                grid-template-columns: 1fr;
        }
        .il-bas__yapraklar {
                justify-content: center;
        }
        .il-bas__yapraklar .yaprak {
                width: min(46vw, 210px);
        }
        .il-bas__yapraklar .yaprak__gun {
                font-size: 4.4rem;
        }
        .il-bas__yapraklar .yaprak__damga {
                font-size: 0.85rem;
                padding: 4px 8px;
        }
        .il-bas__yapraklar .yaprak__haftagun {
                margin-bottom: 40px;
                font-size: var(--y-s);
        }
}

.il-izgara {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: clamp(28px, 4vw, 56px);
        align-items: start;
}

@media (max-width: 1000px) {
        .il-izgara {
                grid-template-columns: 1fr;
        }
}

.il-izgara__ana > .bolum-basligi {
        margin-top: 48px;
}

.il-izgara__ana > .bolum-basligi:first-child {
        margin-top: 0;
}

.ilce-secici {
        padding: 20px;
        border-radius: var(--r-m);
        background: var(--kagit);
        box-shadow: var(--golge-1);
}

.ilce-secici label {
        display: block;
        font-weight: 650;
        margin-bottom: 8px;
}

.ilce-secici select,
.alan select,
.alan input,
.alan textarea,
.arama-formu input,
.il-ara input {
        width: 100%;
        min-height: 48px;
        padding: 10px 14px;
        border: 2px solid var(--cizgi);
        border-radius: var(--r-s);
        background: var(--kagit);
        font-size: var(--y-m);
        transition: border-color var(--hiz), box-shadow var(--hiz);
}

.ilce-secici select:focus,
.alan select:focus,
.alan input:focus,
.alan textarea:focus,
.arama-formu input:focus,
.il-ara input:focus {
        outline: none;
        border-color: var(--murekkep);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--odak) 22%, transparent);
}

.ilce-sonuc {
        margin: 14px 0 0;
        font-weight: 650;
        min-height: 1.6em;
}

.ilce-sonuc[data-durum="evet"] {
        color: var(--kirmizi);
}

.ilce-sonuc[data-durum="hayir"] {
        color: var(--tahta);
}

.ilce-listesi {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        list-style: none;
        margin: 0 0 16px;
        padding: 0;
}

.ilce-listesi li {
        padding: 6px 12px;
        border-radius: var(--r-tam);
        background: var(--kar-2);
        font-size: var(--y-s);
        font-weight: 600;
}

.ilce-listesi__tatil {
        background: var(--kirmizi-zemin) !important;
        color: var(--kirmizi-koyu);
}

.olay-listesi {
        list-style: none;
        margin: 0 0 16px;
        padding: 0;
        border-top: 1px solid var(--cizgi);
}

.olay {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2px 16px;
        padding: 14px 0;
        border-bottom: 1px solid var(--cizgi);
}

.olay__ad {
        font-weight: 700;
}

.olay__tarih {
        grid-column: 1;
        color: var(--murekkep-2);
        font-size: var(--y-s);
}

.olay__kalan {
        grid-row: 1 / span 2;
        grid-column: 2;
        align-self: center;
        font-weight: 750;
        font-stretch: 80%;
        color: var(--kirmizi);
}

.yan-kutu {
        padding: 20px;
        margin-bottom: 20px;
        border-radius: var(--r-m);
        background: var(--kagit);
        box-shadow: var(--golge-1);
}

.yan-kutu__baslik {
        font-size: var(--y-m);
        font-stretch: 92%;
        margin-bottom: 12px;
}

.yan-kutu__buyuk {
        font-size: 2rem;
        font-weight: 800;
        font-stretch: 66%;
        line-height: 1;
        margin-bottom: 14px;
}

.yan-kutu__kucuk {
        font-size: var(--y-s);
        color: var(--murekkep-3);
        margin: 0;
}

.yan-kutu .harita .secmeli {
        margin-bottom: 8px;
}

.yan-kutu .harita__lejant {
        display: none;
}

.yan-liste {
        list-style: none;
        margin: 0;
        padding: 0;
}

.yan-liste li + li {
        border-top: 1px solid var(--cizgi);
}

.yan-liste a {
        display: block;
        padding: 10px 0;
        font-size: var(--y-s);
        font-weight: 600;
        text-decoration: none;
        line-height: 1.35;
}

.il-agi {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 4px 16px;
        list-style: none;
        margin: 0;
        padding: 0;
}

.il-agi a {
        display: block;
        padding: 6px 0;
        font-size: var(--y-s);
        text-decoration: none;
        color: var(--murekkep-2);
}

.il-agi a:hover {
        color: var(--kirmizi);
}

.il-agi a[data-tatil] {
        color: var(--kirmizi);
        font-weight: 700;
}

/* --------------------------------------------------------------------------
   Gün sayfası, duyuru başlığı
   -------------------------------------------------------------------------- */

.gun-bas,
.duyuru-bas {
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        gap: clamp(24px, 4vw, 56px);
        align-items: center;
}

.gun-bas .il-secici {
        margin-top: 24px;
        max-width: 520px;
}

@media (max-width: 820px) {
        .gun-bas,
        .duyuru-bas {
                grid-template-columns: 1fr;
        }
        .gun-bas__yaprak,
        .duyuru-bas__yaprak {
                order: -1;
        }
        .gun-bas .yaprak,
        .duyuru-bas .yaprak {
                width: min(100%, 260px);
        }
        .gun-bas .yaprak__gun,
        .duyuru-bas .yaprak__gun {
                font-size: 6rem;
        }
}

.duyuru-bas__ust {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 14px;
}

.duyuru-ozet {
        display: grid;
        gap: 0;
        margin: 20px 0 0;
        border-top: 1px solid var(--cizgi);
}

.duyuru-ozet div {
        display: grid;
        grid-template-columns: 110px minmax(0, 1fr);
        gap: 12px;
        padding: 10px 0;
        border-bottom: 1px solid var(--cizgi);
}

.duyuru-ozet dt {
        color: var(--murekkep-3);
        font-size: var(--y-s);
}

.duyuru-ozet dd {
        margin: 0;
        font-weight: 650;
}

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

.kaynaklar li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 10px 0;
        border-bottom: 1px solid var(--cizgi);
}

.kaynaklar a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-weight: 650;
}

.kaynaklar .simge {
        width: 1em;
        height: 1em;
}

.ayni-gun {
        margin-top: 40px;
}

/* --------------------------------------------------------------------------
   Dönem kartları, zaman çizelgesi, tablolar, ay ızgarası
   -------------------------------------------------------------------------- */

.donem-kartlari {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
        margin-bottom: 32px;
}

.donem-karti {
        position: relative;
        padding: 24px;
        border-radius: var(--r-m);
        background: var(--kagit);
        box-shadow: var(--golge-1);
        border-top: 6px solid var(--sari);
}

.donem-karti--gecti {
        opacity: 0.6;
        border-top-color: var(--cizgi);
}

.donem-karti__baslik {
        font-size: var(--y-l);
        margin-bottom: 4px;
}

.donem-karti__tarih {
        font-size: var(--y-2xl);
        font-weight: 800;
        font-stretch: 66%;
        line-height: 1.05;
        margin-bottom: 16px;
}

.donem-karti__ayrinti {
        margin: 0 0 16px;
        display: grid;
        gap: 8px;
        font-size: var(--y-s);
}

.donem-karti__ayrinti div {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        border-bottom: 1px dashed var(--cizgi);
        padding-bottom: 6px;
}

.donem-karti__ayrinti dt {
        color: var(--murekkep-3);
}

.donem-karti__ayrinti dd {
        margin: 0;
        font-weight: 650;
        text-align: right;
}

.donem-karti__durum {
        margin: 0;
        font-weight: 750;
        color: var(--kirmizi);
}

.zaman-cizelgesi {
        position: relative;
        list-style: none;
        margin: 0 0 24px;
        padding: 0 0 0 28px;
}

.zaman-cizelgesi::before {
        content: "";
        position: absolute;
        left: 7px;
        top: 8px;
        bottom: 8px;
        width: 2px;
        background: var(--cizgi);
}

.zaman-cizelgesi__oge {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2px 16px;
        padding: 12px 0 18px;
}

.zaman-cizelgesi__oge::before {
        content: "";
        position: absolute;
        left: -26px;
        top: 16px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--kagit);
        border: 3px solid var(--kirmizi);
}

.zaman-cizelgesi__oge--gecti {
        opacity: 0.55;
}

.zaman-cizelgesi__oge--gecti::before {
        border-color: var(--cizgi);
        background: var(--cizgi);
}

.zaman-cizelgesi__tarih {
        font-weight: 800;
        font-stretch: 80%;
        font-size: var(--y-l);
}

.zaman-cizelgesi__ad {
        font-weight: 650;
}

.zaman-cizelgesi__not {
        grid-column: 1;
        color: var(--murekkep-2);
        font-size: var(--y-s);
}

.zaman-cizelgesi__kalan {
        grid-column: 2;
        grid-row: 1 / span 3;
        align-self: center;
        font-weight: 750;
        color: var(--kirmizi);
        white-space: nowrap;
}

.tablo-kap {
        overflow-x: auto;
        margin-bottom: 16px;
        border-radius: var(--r-m);
        background: var(--kagit);
        box-shadow: var(--golge-1);
}

.tablo {
        width: 100%;
        border-collapse: collapse;
        font-size: var(--y-s);
}

.tablo th,
.tablo td {
        padding: 12px 16px;
        text-align: left;
        border-bottom: 1px solid var(--cizgi);
        vertical-align: top;
}

.tablo thead th {
        font-size: var(--y-xs);
        color: var(--murekkep-3);
        font-weight: 650;
        background: var(--kar);
}

.tablo tbody th {
        font-weight: 700;
}

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

.tablo__satir--gecti {
        opacity: 0.55;
}

.tablo__not {
        display: block;
        margin-top: 4px;
        color: var(--murekkep-3);
}

.ay-izgarasi {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 20px;
}

.ay {
        padding: 16px;
        border-radius: var(--r-m);
        background: var(--kagit);
        box-shadow: var(--golge-1);
}

.ay__baslik {
        font-size: var(--y-l);
        font-stretch: 80%;
        margin-bottom: 10px;
}

.ay__baslik span {
        color: var(--murekkep-3);
        font-weight: 500;
}

.ay__gunler {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 3px;
        text-align: center;
        font-variant-numeric: tabular-nums;
}

.ay__haftagun {
        font-size: 0.7rem;
        font-weight: 650;
        color: var(--murekkep-3);
        padding-bottom: 4px;
}

.ay__gun {
        display: grid;
        place-items: center;
        aspect-ratio: 1;
        border-radius: 6px;
        font-size: var(--y-xs);
        font-weight: 600;
}

.ay__gun--okul {
        background: var(--kar);
}

.ay__gun--hafta-sonu {
        color: var(--murekkep-3);
}

.ay__gun--ara {
        background: var(--sari);
        color: #14213d;
}

.ay__gun--yariyil {
        background: var(--kirmizi);
        color: #fff;
}

.ay__gun--resmi {
        background: #1d4f9a;
        color: #fff;
}

.ay__gun--yarim {
        background: linear-gradient(135deg, var(--kar) 50%, #1d4f9a 50%);
}

.ay__gun--yaz {
        color: var(--murekkep-3);
        opacity: 0.5;
}

.ay__gun--bugun {
        box-shadow: 0 0 0 2px var(--murekkep);
        font-weight: 850;
}

.takvim-lejant {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 16px;
        list-style: none;
        margin: 0;
        padding: 0;
        font-size: var(--y-xs);
        color: var(--murekkep-2);
}

.takvim-lejant li {
        display: inline-flex;
        align-items: center;
        gap: 6px;
}

.takvim-lejant .ay__gun {
        width: 20px;
        font-size: 0.65rem;
}

/* --------------------------------------------------------------------------
   İller sayfası
   -------------------------------------------------------------------------- */

.il-ara {
        position: relative;
        max-width: 420px;
        margin-top: 24px;
}

.il-ara__simge {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--murekkep-3);
}

.il-ara input {
        padding-left: 44px;
        border-radius: var(--r-tam);
}

.il-izgarasi {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 12px;
        list-style: none;
        margin: 0;
        padding: 0;
}

.il-karti[hidden] {
        display: none;
}

.il-karti a {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 4px 12px;
        padding: 14px 16px;
        border-radius: var(--r-m);
        background: var(--kagit);
        box-shadow: var(--golge-1);
        text-decoration: none;
        transition: transform var(--hiz) var(--egri), box-shadow var(--hiz);
}

.il-karti a:hover {
        transform: translateY(-2px);
        box-shadow: var(--golge-2);
        color: inherit;
}

.il-karti__plaka {
        grid-row: 1 / span 2;
        align-self: center;
        font-weight: 800;
        font-stretch: 66%;
        font-size: 1.6rem;
        color: var(--murekkep-3);
        font-variant-numeric: tabular-nums;
}

.il-karti__ad {
        font-weight: 750;
        font-stretch: 88%;
        font-size: var(--y-l);
        line-height: 1.2;
}

.il-karti__durumlar {
        display: flex;
        gap: 10px;
        font-size: var(--y-xs);
        color: var(--murekkep-3);
}

.durum-noktasi::before {
        content: "";
        display: inline-block;
        width: 8px;
        height: 8px;
        margin-right: 5px;
        border-radius: 50%;
        background: var(--tahta);
}

.durum-noktasi b {
        font-weight: 650;
        color: var(--murekkep-2);
}

.durum-noktasi--tam::before {
        background: var(--kirmizi);
}

.durum-noktasi--kismi::before {
        background: #d98a1a;
}

.durum-noktasi--genel::before {
        background: var(--sari);
}

/* --------------------------------------------------------------------------
   Tekil yazı
   -------------------------------------------------------------------------- */

.okuma-cubugu {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        z-index: 60;
        background: var(--kirmizi);
        transform-origin: 0 50%;
        transform: scaleX(0);
}

@supports (animation-timeline: scroll()) {
        .okuma-cubugu {
                animation: okuma linear both;
                animation-timeline: scroll(root block);
        }
        @keyframes okuma {
                to {
                        transform: scaleX(1);
                }
        }
}

.yazi-duzen {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: clamp(32px, 5vw, 72px);
        align-items: start;
        padding-block: 20px 72px;
}

@media (max-width: 1000px) {
        .yazi-duzen {
                grid-template-columns: 1fr;
        }
}

.yazi {
        min-width: 0;
}

.yazi__bas {
        max-width: 760px;
        margin-bottom: 28px;
}

.yazi__kategori {
        display: inline-block;
        margin-bottom: 12px;
        font-weight: 700;
        font-size: var(--y-s);
        color: var(--kirmizi);
        text-decoration: none;
}

.yazi__baslik {
        font-size: var(--y-3xl);
        font-stretch: 74%;
        font-weight: 820;
        line-height: 1;
        letter-spacing: -0.015em;
        margin-bottom: 18px;
        view-transition-name: sayfa-baslik;
}

.yazi__ozet {
        font-size: var(--y-l);
        color: var(--murekkep-2);
        line-height: 1.5;
}

.yazi__meta {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 18px;
        font-size: var(--y-s);
        color: var(--murekkep-3);
}

.yazi__gorsel {
        margin: 0 0 32px;
}

.yazi__gorsel img {
        width: 100%;
        border-radius: var(--r-m);
}

.yazi__gorsel figcaption {
        font-size: var(--y-xs);
        color: var(--murekkep-3);
        margin-top: 8px;
}

.yazi__alt {
        margin-top: 32px;
        padding-top: 20px;
        border-top: 1px solid var(--cizgi);
}

.etiketler {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        font-size: var(--y-s);
}

.etiketler span {
        color: var(--murekkep-3);
        margin-right: 4px;
}

.etiketler a {
        padding: 4px 12px;
        border-radius: var(--r-tam);
        background: var(--kar-2);
        text-decoration: none;
}

.ilgili {
        margin-top: 56px;
}

/* İçerik tipografisi */
.yazi-icerigi {
        max-width: 70ch;
        font-size: 1.125rem;
        line-height: 1.72;
}

.yazi-icerigi > * + * {
        margin-top: 1.1em;
}

.yazi-icerigi p {
        margin: 0;
}

.yazi-icerigi h2 {
        font-size: var(--y-xl);
        font-stretch: 82%;
        margin-top: 2em;
}

.yazi-icerigi h3 {
        font-size: var(--y-l);
        font-stretch: 88%;
        margin-top: 1.6em;
}

.yazi-icerigi a {
        color: var(--murekkep);
        text-decoration-color: var(--kirmizi);
        text-decoration-thickness: 2px;
}

.yazi-icerigi a:hover {
        color: var(--kirmizi);
}

.yazi-icerigi ul,
.yazi-icerigi ol {
        padding-left: 1.3em;
}

.yazi-icerigi li + li {
        margin-top: 0.4em;
}

.yazi-icerigi li::marker {
        color: var(--kirmizi);
}

.yazi-icerigi blockquote {
        margin: 1.6em 0;
        padding: 4px 0 4px 22px;
        border-left: 4px solid var(--kirmizi);
        font-size: var(--y-l);
        font-weight: 600;
        font-stretch: 92%;
}

.yazi-icerigi img {
        border-radius: var(--r-m);
}

.yazi-icerigi table {
        width: 100%;
        border-collapse: collapse;
        font-size: var(--y-s);
}

.yazi-icerigi th,
.yazi-icerigi td {
        padding: 10px 12px;
        border-bottom: 1px solid var(--cizgi);
        text-align: left;
}

.yazi-icerigi .wp-block-image figcaption,
.wp-caption-text {
        font-size: var(--y-xs);
        color: var(--murekkep-3);
}

.alignwide {
        margin-inline: calc(-1 * min(80px, 6vw));
        max-width: none;
}

.alignfull {
        margin-inline: calc(50% - 50vw);
        max-width: 100vw;
}

.aligncenter {
        margin-inline: auto;
        display: block;
}

.alignleft {
        float: left;
        margin: 0.4em 1.4em 1em 0;
}

.alignright {
        float: right;
        margin: 0.4em 0 1em 1.4em;
}

.bolum--metin .icerik {
        margin-bottom: 8px;
}

/* Yan alan */
.yan {
        position: relative;
}

.yan__yapiskan {
        position: sticky;
        top: calc(var(--ust-yukseklik) + 20px);
}

/* Sayfalama */
.nav-links {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 40px;
}

.page-numbers {
        display: inline-grid;
        place-items: center;
        min-width: 44px;
        height: 44px;
        padding: 0 14px;
        border-radius: var(--r-tam);
        background: var(--kagit);
        text-decoration: none;
        font-weight: 650;
        box-shadow: var(--golge-1);
}

.page-numbers.current {
        background: var(--murekkep);
        color: var(--kar);
}

/* Yorumlar */
.yorumlar {
        margin-top: 56px;
}

.yorum-listesi {
        list-style: none;
        padding: 0;
}

.yorum-listesi .comment-body {
        padding: 16px 0;
        border-bottom: 1px solid var(--cizgi);
}

.yorum-listesi .children {
        list-style: none;
        padding-left: 24px;
}

.comment-form label {
        display: block;
        font-weight: 650;
        margin-bottom: 6px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
        width: 100%;
        padding: 10px 14px;
        border: 2px solid var(--cizgi);
        border-radius: var(--r-s);
        background: var(--kagit);
}

/* --------------------------------------------------------------------------
   Formlar ve kartlar
   -------------------------------------------------------------------------- */

.kart {
        padding: clamp(20px, 4vw, 32px);
        border-radius: var(--r-m);
        background: var(--kagit);
        box-shadow: var(--golge-1);
        margin-bottom: 24px;
}

.kart--ince {
        box-shadow: none;
        border: 1px solid var(--cizgi);
        background: transparent;
}

.form {
        display: grid;
        gap: 18px;
}

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

@media (max-width: 640px) {
        .form__iki {
                grid-template-columns: 1fr;
        }
}

.form__bal {
        position: absolute;
        left: -9999px;
}

.alan label {
        display: block;
        font-weight: 650;
        margin-bottom: 6px;
}

.alan textarea {
        min-height: 140px;
        resize: vertical;
}

.alan__ipucu {
        font-size: var(--y-xs);
        color: var(--murekkep-3);
        margin: 6px 0 0;
}

.onay-kutusu {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        font-size: var(--y-s);
        color: var(--murekkep-2);
}

.onay-kutusu input {
        width: 20px;
        height: 20px;
        margin-top: 2px;
        accent-color: var(--murekkep);
        flex: none;
}

.uyari {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        padding: 14px 18px;
        border-radius: var(--r-s);
        margin-bottom: 20px;
}

.uyari p {
        margin: 0;
}

.uyari--basari {
        background: var(--tahta-zemin);
        color: var(--tahta);
}

.uyari--hata {
        background: var(--kirmizi-zemin);
        color: var(--kirmizi-koyu);
}

.arama-formu {
        display: flex;
        gap: 8px;
        max-width: 520px;
        margin-top: 16px;
}

/* Anahtar (toggle) */
.anahtar {
        display: flex;
        align-items: center;
        gap: 12px;
        cursor: pointer;
        margin: 14px 0;
        font-size: var(--y-s);
}

.anahtar input {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
}

.anahtar__ray {
        position: relative;
        flex: none;
        width: 46px;
        height: 28px;
        border-radius: var(--r-tam);
        background: var(--cizgi);
        transition: background-color var(--hiz);
}

.anahtar__ray::after {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        transition: transform 220ms var(--egri);
}

.anahtar input:checked + .anahtar__ray {
        background: var(--tahta);
}

.anahtar input:checked + .anahtar__ray::after {
        transform: translateX(18px);
}

.anahtar input:focus-visible + .anahtar__ray {
        outline: 3px solid var(--odak);
        outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Paneller (bildirim, hesap)
   -------------------------------------------------------------------------- */

.panel {
        width: min(560px, calc(100vw - 24px));
        max-height: min(88vh, 760px);
        padding: 0;
        border: 0;
        border-radius: var(--r-m);
        background: var(--kagit);
        color: var(--murekkep);
        box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5);
        overflow: auto;
}

.panel--dar {
        width: min(440px, calc(100vw - 24px));
}

.panel::backdrop {
        background: rgba(13, 21, 36, 0.55);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
}

.panel[open] {
        animation: panel-ac 280ms var(--egri);
}

.panel[open]::backdrop {
        animation: perde 280ms ease-out;
}

@keyframes panel-ac {
        from {
                opacity: 0;
                transform: translateY(16px) scale(0.98);
        }
}

@keyframes perde {
        from {
                opacity: 0;
        }
}

@media (max-width: 600px) {
        .panel {
                margin: auto 0 0;
                width: 100vw;
                max-width: 100vw;
                max-height: 90vh;
                border-radius: var(--r-m) var(--r-m) 0 0;
        }
        @keyframes panel-ac {
                from {
                        transform: translateY(100%);
                }
        }
}

.panel__ic {
        padding: 22px clamp(18px, 4vw, 28px) 26px;
}

.panel__ust {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-bottom: 8px;
}

.panel__baslik {
        font-size: var(--y-xl);
        font-stretch: 80%;
        margin: 0;
}

.panel__aciklama {
        color: var(--murekkep-2);
        font-size: var(--y-s);
}

.panel__durum {
        min-height: 1.4em;
        font-size: var(--y-s);
        font-weight: 600;
        margin: 12px 0;
}

.panel__durum[data-tur="hata"] {
        color: var(--kirmizi);
}

.panel__durum[data-tur="tamam"] {
        color: var(--tahta);
}

.panel__eylem {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
}

.panel__kucuk {
        font-size: var(--y-xs);
        color: var(--murekkep-3);
        margin-top: 16px;
}

.google-dugme {
        min-height: 44px;
        margin: 16px 0;
}

.takip-formu__secim {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        gap: 10px;
        align-items: end;
        margin: 16px 0 12px;
}

.takip-formu__secim .alan label {
        font-size: var(--y-s);
}

.takip-formu__ekle {
        min-height: 48px;
        border-radius: var(--r-s);
}

@media (max-width: 520px) {
        .takip-formu__secim {
                grid-template-columns: 1fr 1fr;
        }
        .takip-formu__ekle {
                grid-column: 1 / -1;
        }
}

.takip-formu__ios,
.takip-formu__engelli,
.takip-formu__desteksiz {
        padding: 14px 16px;
        border-radius: var(--r-s);
        background: var(--sari-zemin);
        margin: 12px 0;
        font-size: var(--y-s);
}

.takip-formu__ios ol {
        margin: 8px 0 0;
        padding-left: 1.2em;
}

.takip-listesi {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        list-style: none;
        margin: 8px 0;
        padding: 0;
}

.takip-listesi:empty::before {
        content: "Henüz takip ettiğin bir yer yok.";
        font-size: var(--y-s);
        color: var(--murekkep-3);
}

.takip-listesi li {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 6px 6px 6px 14px;
        border-radius: var(--r-tam);
        background: var(--murekkep);
        color: var(--kar);
        font-weight: 650;
        font-size: var(--y-s);
        animation: belir 220ms var(--egri);
}

.takip-listesi button {
        display: grid;
        place-items: center;
        width: 26px;
        height: 26px;
        border: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.15);
        color: inherit;
        cursor: pointer;
}

.takip-listesi button .simge {
        width: 14px;
        height: 14px;
}

/* Bildirim önerisi */
.istem {
        position: fixed;
        z-index: 70;
        left: 50%;
        bottom: max(16px, env(safe-area-inset-bottom));
        transform: translateX(-50%);
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px 14px;
        align-items: center;
        width: min(560px, calc(100vw - 24px));
        padding: 16px 18px;
        border-radius: var(--r-m);
        background: #14213d;
        color: #e9eef7;
        box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.6);
        animation: istem-gel 420ms var(--egri);
}

.istem[hidden] {
        display: none;
}

.istem__simge {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--sari);
        color: #14213d;
}

.istem__simge .simge {
        animation: zil-salla 1s ease-in-out 500ms;
        transform-origin: 50% 10%;
}

.istem__metin p {
        margin: 0;
        font-size: var(--y-s);
        color: #b3bfd4;
}

.istem__metin .istem__baslik {
        color: #fff;
        font-weight: 700;
        font-size: var(--y-m);
        margin-bottom: 2px;
}

.istem__eylem {
        grid-column: 1 / -1;
        display: flex;
        justify-content: flex-end;
        gap: 8px;
}

.istem .dugme--metin {
        color: #b3bfd4;
}

@keyframes istem-gel {
        from {
                opacity: 0;
                transform: translate(-50%, 24px);
        }
}

/* Kısa bildiri (toast) */
.bildiri {
        position: fixed;
        z-index: 80;
        top: calc(var(--ust-yukseklik) + 12px);
        left: 50%;
        transform: translateX(-50%);
        display: grid;
        gap: 8px;
        pointer-events: none;
}

.bildiri__oge {
        padding: 12px 18px;
        border-radius: var(--r-tam);
        background: var(--murekkep);
        color: var(--kar);
        font-weight: 650;
        font-size: var(--y-s);
        box-shadow: var(--golge-2);
        animation: belir 260ms var(--egri);
}

/* --------------------------------------------------------------------------
   Reklam alanları
   -------------------------------------------------------------------------- */

.ot-reklam {
        position: relative;
        margin: 32px auto;
        min-height: 120px;
        text-align: center;
        max-width: var(--kap);
}

.ot-reklam__etiket {
        display: block;
        margin-bottom: 6px;
        font-size: 0.7rem;
        color: var(--murekkep-3);
}

.ot-reklam--yan {
        min-height: 600px;
}

.bolum > .ot-reklam,
main > .ot-reklam {
        padding-inline: var(--bosluk);
}

/* --------------------------------------------------------------------------
   Alt kısım
   -------------------------------------------------------------------------- */

.alt {
        margin-top: 40px;
        background: #0d1524;
        color: #b3bfd4;
        padding-top: clamp(40px, 6vw, 72px);
        font-size: var(--y-s);
}

.alt a {
        color: #e9eef7;
        text-decoration: none;
}

.alt a:hover {
        color: var(--sari);
}

.alt .logo__yazi {
        color: #fff;
}

.alt .logo__isaret {
        --murekkep: #e9eef7;
        --kagit: #0d1524;
}

.alt__ic {
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
        gap: 32px;
}

@media (max-width: 900px) {
        .alt__ic {
                grid-template-columns: 1fr 1fr;
        }
        .alt__marka {
                grid-column: 1 / -1;
        }
}

.alt__aciklama {
        margin: 16px 0;
        max-width: 42ch;
}

.alt__baslik {
        font-size: var(--y-s);
        color: #fff;
        font-stretch: 95%;
        margin-bottom: 12px;
}

.alt__liste {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 8px;
}

.alt__liste--iki {
        grid-template-columns: 1fr 1fr;
        column-gap: 16px;
}

.sosyal {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        list-style: none;
        margin: 0;
        padding: 0;
}

.sosyal a {
        display: inline-block;
        padding: 6px 12px;
        border: 1px solid #26334f;
        border-radius: var(--r-tam);
}

.alt__dip {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 8px 24px;
        margin-top: 40px;
        padding-block: 20px 28px;
        border-top: 1px solid #26334f;
        font-size: var(--y-xs);
}

.alt__dip p {
        margin: 0;
        max-width: 80ch;
}

/* --------------------------------------------------------------------------
   Diğer
   -------------------------------------------------------------------------- */

.bolum--takip {
        padding-block: clamp(20px, 4vw, 40px);
}

.iki-sutun {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
}

@media (max-width: 760px) {
        .iki-sutun {
                grid-template-columns: 1fr;
        }
}

.sayfa-bas--404 {
        text-align: left;
        padding-top: 60px;
}

.buyuk-404 {
        font-size: clamp(6rem, 20vw, 12rem);
        font-weight: 850;
        font-stretch: 62%;
        line-height: 0.85;
        color: var(--kirmizi);
        margin: 0;
}

.sayfa-bas--404 .il-secici {
        margin: 28px 0;
        max-width: 520px;
}

.wp-block-separator {
        border: 0;
        border-top: 1px solid var(--cizgi);
}

/* Sayfa geçişi */
::view-transition-old(root),
::view-transition-new(root) {
        animation-duration: 220ms;
}

/* Hareket azaltma */
@media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
        }
        .yaprak-yigini .yaprak--on {
                display: none !important;
        }
        .kar-tuvali {
                display: none;
        }
}

@media print {
        .ust,
        .alt,
        .ot-reklam,
        .paylas,
        .takip-kutusu,
        .istem,
        .panel,
        .harita {
                display: none !important;
        }
        body {
                background: #fff;
                color: #000;
        }
}