/* ==================================================================== *
 * W4 — About "Timeline" → gerçekçi duvar takvimi
 *
 * Tek sahne, üç ekip (Mechanics / Avionics / Software) YATAY geçişle;
 * her ekibin içinde 10 ay yaprağı yırtılarak ilerler.
 * Yaprak = spiral cilt + fotoğraf + gerçek ay ızgarası + künye.
 *
 * Kaynak içerik (ay/yıl + başlık + açıklama) Framer'ın eski yatay
 * timeline bileşeninden AYNEN taşındı; bu dosya yalnız sunumu değiştirir.
 * Bağımlılık yok: saf CSS transform + takvim.js.
 * ==================================================================== */

/* --- Framer'ın sabit yükseklikli bölüm kapları içeriğe göre açılır ---
   Eskiden üç ayrı Framer bölümü üç ayrı takvimi taşıyordu. Artık tek
   sahne var: 1. kap takvimi tutar, 2. kap kalkar, 3. kap yalnız kapanış
   KilimBand şeridi olarak ince bir bant halinde kalır. */
.framer-f6uil2 {
    height: auto !important;
}
.framer-1h9rti {
    display: none !important;
}
.framer-py3b0f {
    height: 92px !important;
}
.framer-ikqvqp-container {
    position: static !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    height: auto !important;
}

/* ------------------------------ bölüm ------------------------------ */
.tkv {
    --tkv-vurgu: var(--uav-vurgu,#4f9cff);
    --tkv-kagit-1: #151922;
    --tkv-kagit-2: #0d1016;
    --tkv-kagit-3: #090b10;
    --tkv-cizgi: rgba(255, 255, 255, 0.09);
    --tkv-sonuk: rgb(138, 143, 152);
    --tkv-metin: rgb(215, 218, 224);
    max-width: 1080px;
    margin: 0 auto;
    padding: 44px 20px 26px;
    font-family: "Space Grotesk", "Space Grotesk Placeholder", sans-serif;
    color: var(--tkv-metin);
}

/* ====================================================================
 * 1) ÜST ŞERİT — ekip seçimi (YATAY EKSEN)
 * ==================================================================== */
.tkv-ust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 26px;
}
.tkv-ekipok {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(11, 13, 18, 0.6);
    color: var(--tkv-metin);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        color 0.2s ease,
        background-color 0.2s ease;
}
.tkv-ekipok:hover,
.tkv-ekipok:focus-visible {
    border-color: var(--tkv-vurgu);
    color: var(--tkv-vurgu);
}
.tkv-ekipok[disabled] {
    opacity: 0.28;
    cursor: default;
    pointer-events: none;
}

.tkv-sekmeler {
    display: flex;
    align-items: stretch;
    gap: 6px;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(11, 13, 18, 0.55);
}
.tkv-sekme {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--tkv-sonuk);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 9px 18px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition:
        color 0.22s ease,
        background-color 0.22s ease;
}
.tkv-sekme:hover {
    color: var(--tkv-metin);
}
.tkv-sekme::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.4;
    transition: opacity 0.22s ease;
}
.tkv-sekme[aria-selected="true"] {
    color: #fff;
    background: rgba(var(--uav-vurgu-rgb,79,156,255),0.16);
    box-shadow: inset 0 0 0 1px rgba(var(--uav-vurgu-rgb,79,156,255),0.42);
}
.tkv-sekme[aria-selected="true"]::before {
    background: var(--tkv-vurgu);
    opacity: 1;
    box-shadow: 0 0 10px rgba(var(--uav-vurgu-rgb,79,156,255),0.8);
}
.tkv-sekme:focus-visible {
    outline: 2px solid var(--tkv-vurgu);
    outline-offset: 2px;
}

/* ====================================================================
 * 2) SAHNE — üç panel yan yana, translateX ile kayar
 * ==================================================================== */
.tkv-sahne {
    position: relative;
    /* yatayda kırp, dikeyde serbest: yırtılan yaprak alt/üstte görünsün.
       clip+visible ikilisi geçerli (hidden ile birlikte kullanılamazdı). */
    overflow-x: clip;
    overflow-y: visible;
    touch-action: pan-y; /* dikey sayfa kaydırması HER ZAMAN serbest */
}
.tkv-ray {
    display: flex;
    align-items: flex-start;
    width: 300%;
    transform: translateX(calc(var(--tkv-ekip, 0) * -33.3333%));
    transition: transform 0.52s cubic-bezier(0.22, 0.9, 0.3, 1);
}
.tkv-panel {
    flex: none;
    width: 33.3333%;
    padding: 0 10px;
    box-sizing: border-box;
    opacity: 1;
    transform: none;
    transition:
        opacity 0.42s ease,
        transform 0.52s cubic-bezier(0.22, 0.9, 0.3, 1);
}
.tkv-panel[aria-hidden="true"] {
    opacity: 0;
    transform: scale(0.955);
}

/* panel başlığı — ekip adı büyük */
.tkv-kicker {
    margin: 0 0 12px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3.9px;
    text-transform: uppercase;
    color: var(--tkv-sonuk);
}
.tkv-baslik {
    margin: 0 auto 26px;
    max-width: 780px;
    text-align: center;
    font-size: 32px;
    line-height: 1.14;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #ffffff;
}

/* ====================================================================
 * 3) DESTE — yapraklar üst üste, spiral cilt sabit
 * ==================================================================== */
.tkv-deste {
    position: relative;
    width: min(700px, 100%);
    margin: 0 auto;
    outline: none;
    perspective: 1500px; /* yırtılma derinliği */
    min-height: 420px; /* takvim.js en uzun yaprağa göre günceller */
}
.tkv-deste:focus-visible {
    box-shadow: 0 0 0 2px rgba(var(--uav-vurgu-rgb,79,156,255),0.45);
    border-radius: 16px;
}

/* --- spiral cilt: yapraklardan bağımsız, hep yerinde durur ---
   Tek SVG karo repeat-x: tel halka kağıdın üst kenarına geçip
   delikten arkaya iner (alt uçta koyulaşan metalik gradyan). */
.tkv-cilt {
    position: absolute;
    top: -19px;
    left: 0;
    right: 0;
    height: 46px;
    z-index: 20;
    pointer-events: none;
    background-repeat: repeat-x;
    background-size: 34px 46px;
    background-position: 9px 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='46' viewBox='0 0 34 46'%3E%3Cdefs%3E%3ClinearGradient id='m' x1='0' y1='0' x2='0.25' y2='1'%3E%3Cstop offset='0' stop-color='%23eef2f8'/%3E%3Cstop offset='0.34' stop-color='%23aab3c2'/%3E%3Cstop offset='0.66' stop-color='%23596273'/%3E%3Cstop offset='0.88' stop-color='%23262c37'/%3E%3Cstop offset='1' stop-color='%230a0c11'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='18' cy='22.5' rx='7' ry='13.5' fill='none' stroke='%23000' stroke-opacity='0.6' stroke-width='3.6'/%3E%3Cellipse cx='17' cy='21' rx='7' ry='13.5' fill='none' stroke='url(%23m)' stroke-width='2.7'/%3E%3Cpath d='M11.6 13.4 A7 13.5 0 0 1 19.4 8.1' fill='none' stroke='%23ffffff' stroke-opacity='0.55' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ----------------------------- yaprak ------------------------------ */
.tkv-yaprak {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    display: flex;
    transform-origin: 50% 0%; /* üst kenardan kopar */
    will-change: transform, opacity;
    backface-visibility: hidden;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
    visibility: hidden;
}

/* deste dizilimi: ön + iki arka yaprak */
.tkv-yaprak.tkv-on,
.tkv-yaprak.tkv-arka1,
.tkv-yaprak.tkv-arka2 {
    transition:
        transform 0.45s cubic-bezier(0.22, 0.9, 0.3, 1),
        filter 0.45s ease;
}
.tkv-yaprak.tkv-on {
    visibility: visible;
    z-index: 6;
    transform: none;
}
.tkv-yaprak.tkv-arka1 {
    visibility: visible;
    z-index: 5;
    transform: translateY(9px) scale(0.982) rotate(0.35deg);
    filter: brightness(0.72);
}
.tkv-yaprak.tkv-arka2 {
    visibility: visible;
    z-index: 4;
    transform: translateY(17px) scale(0.964) rotate(-0.3deg);
    filter: brightness(0.5);
}

/* ------------------------------ kağıt ------------------------------ */
.tkv-kagit {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--tkv-cizgi);
    border-top-color: rgba(255, 255, 255, 0.14);
    border-radius: 3px 3px 12px 12px;
    overflow: hidden;
    background-color: var(--tkv-kagit-2);
    background-image:
        /* kağıt tanesi */
        repeating-linear-gradient(
            92deg,
            rgba(255, 255, 255, 0.014) 0 1px,
            rgba(0, 0, 0, 0) 1px 3px
        ),
        /* üst kenar ışığı */ linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.07) 0,
            rgba(255, 255, 255, 0.012) 90px,
            rgba(255, 255, 255, 0) 220px
        ),
        radial-gradient(130% 70% at 50% 0%, rgba(255, 255, 255, 0.05), transparent 62%),
        linear-gradient(163deg, var(--tkv-kagit-1) 0%, var(--tkv-kagit-2) 46%, var(--tkv-kagit-3) 100%);
    box-shadow:
        0 34px 74px -34px rgba(0, 0, 0, 0.95),
        0 2px 10px -4px rgba(0, 0, 0, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -22px 34px -30px rgba(0, 0, 0, 0.9);
}
/* köşe kıvrımı ipucu (sağ alt) */
.tkv-kagit::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 46px;
    height: 46px;
    pointer-events: none;
    background: linear-gradient(
        315deg,
        rgba(255, 255, 255, 0.09) 0%,
        rgba(255, 255, 255, 0.03) 26%,
        rgba(0, 0, 0, 0.34) 42%,
        rgba(0, 0, 0, 0) 62%
    );
    border-radius: 0 0 12px 0;
}

/* --- delikli cilt payı + kopma çizgisi --- */
.tkv-delik {
    flex: none;
    height: 27px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.14);
    background-repeat: repeat-x;
    background-size: 34px 27px;
    background-position: 9px 0;
    background-image: radial-gradient(
        circle at 17px 13px,
        #04050700 0,
        #040507 3.9px,
        rgba(0, 0, 0, 0.85) 4.4px,
        rgba(255, 255, 255, 0.17) 4.9px,
        rgba(255, 255, 255, 0) 5.9px
    );
}

/* ---------------------------- fotoğraf ------------------------------ */
.tkv-foto {
    position: relative;
    margin: 0;
    /* Taban oran sabit (CLS 0); deste ortak yüksekliğe kilitlendiğinde
       artan boşluğu metin altında bırakmak yerine FOTOĞRAF yutar —
       gerçek duvar takviminde olduğu gibi görsel hep tepeyi doldurur. */
    flex: 1 1 auto;
    aspect-ratio: 16 / 9;
    min-height: 0;
    overflow: hidden;
    background: #07080c;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.tkv-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    filter: saturate(0.9) contrast(1.04) brightness(0.88);
}
/* baskı hissi: hafif vinyet + üstten koyulaşma */
.tkv-foto::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(115% 82% at 50% 42%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.45) 100%),
        linear-gradient(180deg, rgba(5, 6, 8, 0.4) 0, rgba(5, 6, 8, 0) 26%);
}

/* --- konuya özel teknik figürler (/varlik/figur/*.svg) ---
   SVG zeminsiz; teknik ızgara KUTUYA veriliyor, böylece figür hangi
   oranda yerleşirse yerleşsin alan tek parça bir "çizim paftası" gibi
   okunuyor ve "contain" boşluğu görünmüyor. Kutunun oranı/akışı
   değişmediği için CLS 0 kalır. */
.tkv-foto-figur {
    background-color: #07080c;
    background-image:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, rgba(255, 255, 255, 0) 1px 32px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, rgba(255, 255, 255, 0) 1px 32px);
    background-position: center center;
}
.tkv-foto img.tkv-figur {
    object-fit: contain;
    object-position: 50% 46%;
    filter: none;
}
/* paftanın üst kenar cetveli + üstten hafif koyulaşma */
.tkv-foto-figur::before {
    background:
        linear-gradient(180deg, rgba(5, 6, 8, 0.34) 0, rgba(5, 6, 8, 0) 20%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.13) 0 1px, rgba(255, 255, 255, 0) 1px 26px);
    background-repeat: no-repeat, no-repeat;
    background-size:
        100% 100%,
        100% 5px;
    background-position:
        0 0,
        0 0;
}
.tkv-foto-etiket {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 34px 22px 12px;
    background: linear-gradient(
        to top,
        rgba(4, 5, 7, 0.94) 0%,
        rgba(4, 5, 7, 0.6) 44%,
        rgba(4, 5, 7, 0) 100%
    );
}
.tkv-ay {
    font-size: 34px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--tkv-vurgu);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.75);
}
.tkv-yil {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 3.6px;
    color: rgba(255, 255, 255, 0.72);
}

/* ------------------------------ gövde ------------------------------- */
.tkv-govde {
    display: grid;
    grid-template-columns: minmax(212px, 0.82fr) 1.18fr;
    gap: 24px;
    padding: 18px 22px 4px;
    align-items: start;
}

/* --- gerçek ay ızgarası --- */
.tkv-izgara {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    row-gap: 1px;
    padding: 10px 10px 8px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.018);
}
.tkv-gun-bas {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    color: var(--tkv-sonuk);
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.tkv-gun {
    font-size: 12.5px;
    line-height: 1;
    text-align: center;
    padding: 5px 0;
    color: rgba(215, 218, 224, 0.82);
    font-variant-numeric: tabular-nums;
}
.tkv-gun-bas.tkv-hs {
    color: rgba(var(--uav-vurgu-rgb,79,156,255),0.62);
}
.tkv-gun.tkv-hs {
    color: rgba(var(--uav-vurgu-rgb,79,156,255),0.72);
}
.tkv-gun.tkv-bos {
    color: transparent;
}

/* --- milestone metni --- */
.tkv-metin {
    min-width: 0;
}
.tkv-konu {
    margin: 0 0 10px;
    font-size: 20px;
    line-height: 1.26;
    font-weight: 700;
    color: #ffffff;
}
.tkv-aciklama {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--tkv-metin);
    opacity: 0.9;
    font-family: "Host Grotesk", "Host Grotesk Placeholder", sans-serif;
}

/* ------------------------------ künye ------------------------------- */
.tkv-kunye {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 22px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgb(111, 117, 129);
}
.tkv-kunye-sag {
    font-variant-numeric: tabular-nums;
    color: rgba(var(--uav-vurgu-rgb,79,156,255),0.72);
}

/* ====================================================================
 * 4) YIRTILMA — üst kenardan kopar, eğilerek savrulur
 * ==================================================================== */
.tkv-yaprak.tkv-yirtiliyor {
    visibility: visible;
    z-index: 8;
    pointer-events: none;
    animation: tkv-yirt 0.72s cubic-bezier(0.42, 0.02, 0.72, 0.45) forwards;
}
@keyframes tkv-yirt {
    0% {
        transform: rotateX(0deg) translate3d(0, 0, 0) rotate(0deg);
        opacity: 1;
    }
    17% {
        /* delikler kopmadan hemen önce kağıt öne kabarır */
        transform: rotateX(-27deg) translate3d(0, -2px, 0) rotate(-0.8deg);
        opacity: 1;
    }
    42% {
        /* koptu: sola eğilerek düşmeye başlar */
        transform: rotateX(-13deg) translate3d(-30px, 40px, 0) rotate(-7deg);
        opacity: 0.94;
    }
    100% {
        transform: rotateX(6deg) translate3d(-136px, 66%, 0) rotate(-24deg);
        opacity: 0;
    }
}
/* geri: düştüğü yerden yerine oturur */
.tkv-yaprak.tkv-geliyor {
    visibility: visible;
    z-index: 8;
    pointer-events: none;
    animation: tkv-geri 0.56s cubic-bezier(0.2, 0.72, 0.3, 1) forwards;
}
@keyframes tkv-geri {
    0% {
        transform: rotateX(6deg) translate3d(-120px, 58%, 0) rotate(-21deg);
        opacity: 0;
    }
    58% {
        transform: rotateX(-12deg) translate3d(-6px, 6px, 0) rotate(-1.4deg);
        opacity: 1;
    }
    100% {
        transform: rotateX(0deg) translate3d(0, 0, 0) rotate(0deg);
        opacity: 1;
    }
}

/* bölüme ilk gelişte üst yaprağa dikkat çeken mikro selam */
.tkv-yaprak.tkv-selam {
    animation: tkv-selam 1s ease 0.25s 1;
}
@keyframes tkv-selam {
    0% {
        transform: rotateX(0deg);
    }
    34% {
        transform: rotateX(-9deg);
    }
    68% {
        transform: rotateX(2.5deg);
    }
    100% {
        transform: rotateX(0deg);
    }
}

/* ====================================================================
 * 5) AY KONTROLLERİ (İLERİ-GERİ EKSEN)
 * ==================================================================== */
.tkv-kontrol {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 26px;
}
.tkv-ok {
    flex: none;
    height: 42px;
    padding: 0 16px 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(11, 13, 18, 0.6);
    color: var(--tkv-metin);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition:
        border-color 0.2s ease,
        color 0.2s ease,
        background-color 0.2s ease;
}
.tkv-ok-ileri {
    padding: 0 12px 0 16px;
}
.tkv-ok:hover,
.tkv-ok:focus-visible {
    border-color: var(--tkv-vurgu);
    color: var(--tkv-vurgu);
}
.tkv-ok[disabled] {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}
.tkv-sayac {
    min-width: 84px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3.4px;
    color: var(--tkv-sonuk);
    font-variant-numeric: tabular-nums;
}
.tkv-ipucu {
    margin: 18px auto 0;
    max-width: 640px;
    text-align: center;
    font-size: 11.5px;
    line-height: 1.6;
    letter-spacing: 0.06em;
    color: rgba(138, 143, 152, 0.78);
}
.tkv-ipucu b {
    color: rgba(215, 218, 224, 0.9);
    font-weight: 600;
}

/* ekran okuyucuya özel */
.tkv-gizli {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ====================================================================
 * 6) MOBİL
 * ==================================================================== */
@media (max-width: 900px) {
    .tkv-govde {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}
@media (max-width: 809px) {
    .tkv {
        padding: 40px 12px 20px;
    }
    /* mobilde sekme şeridi tam genişlik, ‹ › okları altta iki uca yaslanır */
    .tkv-ust {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 8px 0;
        margin-bottom: 18px;
    }
    .tkv-sekmeler {
        order: -1;
        width: 100%;
        justify-content: center;
        border-radius: 14px;
        padding: 4px;
    }
    .tkv-ekipok {
        width: 38px;
        height: 38px;
    }
    .tkv-sekme {
        flex: 1 1 0;
        justify-content: center;
        padding: 9px 6px;
        font-size: 11px;
        letter-spacing: 0.08em;
        border-radius: 11px;
    }
    .tkv-sekme::before {
        width: 5px;
        height: 5px;
    }
    .tkv-baslik {
        font-size: 23px;
        margin-bottom: 22px;
    }
    .tkv-panel {
        padding: 0 4px;
    }
    .tkv-deste {
        min-height: 520px;
    }
    /* Telefonda yaprak ekrana sığmıyordu: 390x844'te yaprak 871px, üstelik
       sabit navbar ~64px daha yiyordu — takvim "ekrandan taşıyor" görünüyor.
       Yaprağın dikey hacmi okunurluk bozulmadan kısıldı: fotoğraf oranı
       4/3 -> 16/10, ızgara ve metin ölçüleri bir tık daha sıkı. */
    .tkv-foto {
        aspect-ratio: 16 / 10;
    }
    .tkv-foto-etiket {
        padding: 28px 16px 10px;
    }
    .tkv-ay {
        font-size: 26px;
    }
    .tkv-yil {
        font-size: 12px;
        letter-spacing: 2.6px;
    }
    .tkv-govde {
        gap: 12px;
        padding: 13px 15px 2px;
    }
    .tkv-izgara {
        padding: 8px 6px 5px;
    }
    .tkv-gun-bas {
        font-size: 9px;
        padding-bottom: 5px;
        margin-bottom: 3px;
    }
    .tkv-gun {
        font-size: 11.5px;
        padding: 3px 0;
    }
    .tkv-konu {
        font-size: 17.5px;
        margin-bottom: 8px;
    }
    .tkv-aciklama {
        font-size: 13.5px;
        line-height: 1.55;
    }
    .tkv-kunye {
        padding: 12px 15px;
        font-size: 9px;
        letter-spacing: 0.16em;
    }
    .tkv-kontrol {
        gap: 8px;
        margin-top: 20px;
    }
    .tkv-ok {
        height: 40px;
        padding: 0 11px;
        gap: 5px;
        font-size: 9px;
        letter-spacing: 0.07em;
    }
    .tkv-ok-ileri {
        padding: 0 11px;
    }
    .tkv-ok svg {
        width: 13px;
        height: 13px;
    }
    .tkv-sayac {
        min-width: 70px;
        font-size: 12px;
        letter-spacing: 2.4px;
    }
    .tkv-cilt {
        top: -16px;
        height: 40px;
        background-size: 30px 40px;
        background-position: 7px 0;
    }
    .tkv-delik {
        height: 24px;
        background-size: 30px 24px;
        background-position: 7px 0;
        background-image: radial-gradient(
            circle at 15px 12px,
            #04050700 0,
            #040507 3.4px,
            rgba(0, 0, 0, 0.85) 3.9px,
            rgba(255, 255, 255, 0.17) 4.4px,
            rgba(255, 255, 255, 0) 5.4px
        );
    }
}

/* --------------------------------------------------------------------
 * 6b) DAR TELEFON (<=400px) — yatay taşma sıfırlanır
 *
 * Ölçüm (320px): ay kontrol satırı .tkv-kontrol 288px kutuya 292.3px
 * içerik sığdırmaya çalışıyordu; düğmeler kutunun 2.5px dışına taşıyor,
 * "‹ PREV MONTH" yaprağın sol kenarını geçiyordu. Sekme şeridi de tam
 * sınırdaydı (içerik 294px / kutu 294px — SIFIR pay): cihazda Space
 * Grotesk yerine yedek font gelirse ya da kullanıcı yazıyı büyütürse
 * doğrudan taşardı. Etiketler ve boşluklar kısılıp ~50px pay bırakıldı;
 * flex-wrap son çare olarak taşma yerine alt satıra indirir.
 * -------------------------------------------------------------------- */
@media (max-width: 400px) {
    .tkv-sekmeler {
        gap: 4px;
        padding: 3px;
    }
    .tkv-sekme {
        min-width: 0;
        gap: 5px;
        padding: 9px 4px;
        font-size: 10px;
        letter-spacing: 0.03em;
    }
    .tkv-kontrol {
        flex-wrap: wrap;
        gap: 6px;
    }
    .tkv-ok {
        min-width: 0;
        padding: 0 8px;
        gap: 4px;
        font-size: 8px;
        letter-spacing: 0.03em;
    }
    .tkv-ok-ileri {
        padding: 0 8px;
    }
    .tkv-ok svg {
        width: 12px;
        height: 12px;
    }
    .tkv-sayac {
        min-width: 56px;
        font-size: 11px;
        letter-spacing: 1.6px;
    }
}

/* ====================================================================
 * 7) HAREKET AZALTMA — sade, kullanılabilir
 * ==================================================================== */
@media (prefers-reduced-motion: reduce) {
    .tkv-ray {
        transition: none;
    }
    .tkv-panel {
        transition: none;
    }
    .tkv-yaprak.tkv-on,
    .tkv-yaprak.tkv-arka1,
    .tkv-yaprak.tkv-arka2 {
        transition: none;
    }
    .tkv-yaprak.tkv-arka1,
    .tkv-yaprak.tkv-arka2 {
        transform: none;
        filter: none;
        visibility: hidden;
    }
    .tkv-yaprak.tkv-yirtiliyor {
        animation: tkv-rm-son 0.24s ease forwards;
    }
    .tkv-yaprak.tkv-geliyor {
        animation: tkv-rm-gel 0.24s ease forwards;
    }
    .tkv-yaprak.tkv-selam {
        animation: none;
    }
}
@keyframes tkv-rm-son {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes tkv-rm-gel {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ölçüm yardımcısı: takvim.js yaprağı akışa alıp doğal boyunu okur */
.tkv-yaprak.tkv-olcum {
    position: static !important;
    inset: auto !important;
    visibility: hidden !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    filter: none !important;
}

/* ====================================================================
 * 9) MASAÜSTÜ: YATAY YERLEŞİM — fotoğraf solda, takvim + metin sağda
 *
 * Yaprak varsayılan olarak dikey yığıyor (fotoğraf üstte, gövde altta).
 * Geniş ekranda bu, 700px'lik desteyi gereksiz uzatıyor ve sayfada
 * uzun bir dikey blok bırakıyordu. Aynı içerik yatayda daha dengeli
 * duruyor: sol sütun fotoğraf, sağ sütun ay ızgarası + milestone metni.
 *
 * Mobil DEĞİŞMİYOR: kural yalnızca ≥810px'te açılır (tkv-govde'nin tek
 * sütuna düştüğü 900px eşiğinin ve mobil düzenlemelerin üstünde).
 * Yaprak yüksekliğini takvim.js en uzun yaprağa göre ölçüp yazdığı için
 * (deste.style.height) yatay düzende de kendiliğinden doğru oturur.
 * ==================================================================== */
@media (min-width: 810px) {
    /* yatay düzen daha geniş bir kağıt ister */
    .tkv-deste {
        width: min(980px, 100%);
    }

    .tkv-kagit {
        flex-direction: row;
    }

    /* Sol sütun: fotoğraf. Oran serbest bırakılır (aspect-ratio kalkar),
       yükseklik satırın tamamını kaplar; alt çizgi yerine sağ çizgi. */
    .tkv-foto {
        flex: 0 0 42%;
        aspect-ratio: auto;
        align-self: stretch;
        border-bottom: 0;
        border-right: 1px solid rgba(255, 255, 255, 0.07);
    }
    .tkv-foto img {
        height: 100%;
    }

    /* Sağ sütun: ay ızgarası üstte, metin altta. İkisini yan yana koymak
       392px'lik sütunda ızgarayı (min 212px) metne 180px bırakıyordu. */
    .tkv-govde {
        flex: 1 1 auto;
        min-width: 0;
        grid-template-columns: 1fr;
        align-content: start;
        gap: 18px;
        padding: 20px 24px 18px;
    }

    /* delik sırası sol sütunun (fotoğrafın) üstünde kalmalı */
    .tkv-delik {
        z-index: 2;
    }
}