/* =====================================================================
   BUTCEFLY - Ortak stil
   Palet (logo renkleri): lacivert #1E3A8A (guven), turuncu #F97316 (vurgu),
   nane yesili (gelir), mercan kirmizi (gider). Her modulun kendi yumusak ikon rengi var.
   ===================================================================== */

:root {
    /* Ana renkler */
    --murekkep: #1E3A8A; /* marka laciverti: menu, vurgulu kartlar */
    --murekkep-acik: #2747A3;
    --kagit: #F5F7FB; /* sayfa zemini */
    --yuzey: #FFFFFF; /* kart zemini */
    --cizgi: #DFE4EE;
    --metin: #121A2C;
    --metin-soluk: #5B6782;
    --altin: #F97316; /* marka turuncusu: vurgu */
    --altin-koyu: #C2410C;
    --altin-soluk: #FFEDD5;
    --gelir: #0F9D67;
    --gider: #E0464D;
    --hata-zemin: #FDECEC;
    --basari-zemin: #E6F6EF;
    /* Modul ikon renkleri (yumusak zemin + koyu ikon) */
    --mavi: #2F6FEB;
    --mavi-zemin: #E6EEFE;
    --mor: #7A5AF8;
    --mor-zemin: #EFEBFE;
    --turuncu: #E8742C;
    --turuncu-zemin: #FDEDE2;
    --kirmizi: #E0464D;
    --kirmizi-zemin: #FDE8E9;
    --yesil: #0F9D67;
    --yesil-zemin: #E3F5EC;
    --turkuaz: #0E9AA7;
    --turkuaz-zemin: #E0F4F6;
    --pembe: #D9467A; /* takvim: arac tarihleri */
    --pembe-zemin: #FCE8EF;
    --kehribar: #C98410;
    --kehribar-zemin: #FDF0DC;
    --lacivert: #1E3A8A;
    --lacivert-zemin: #E4E9F7;
    --birincil-zemin: var(--murekkep);
    --birincil-metin: #FFFFFF;
    --birincil-hover: var(--murekkep-acik);
    --font-baslik: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    --font-govde: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
    --yaricap-kucuk: 8px;
    --yaricap: 14px;
    --golge: 0 1px 2px rgba(18, 26, 44, .06), 0 12px 32px -18px rgba(23, 42, 77, .35);
    color-scheme: light;
}

    /* Koyu tema: <html data-tema="koyu">. Ilk deger her sayfanin <head>'inde
   cihaz temasina gore verilir; kullanici dugmeyle degistirebilir (app.js > TEMA). */
    :root[data-tema="koyu"] {
        --murekkep: #0D1830;
        --murekkep-acik: #16264A;
        --kagit: #0B1222;
        --yuzey: #131D33;
        --cizgi: #24314E;
        --metin: #E8ECF5;
        --metin-soluk: #9AA6C1;
        --altin: #FB923C;
        --altin-koyu: #FDBA74;
        --altin-soluk: #3A2414;
        --gelir: #35C98E;
        --gider: #F2767B;
        --hata-zemin: #3A1D22;
        --basari-zemin: #12321F;
        --mavi: #7EA6FF;
        --mavi-zemin: #1C2A4D;
        --mor: #A99BFF;
        --mor-zemin: #272347;
        --turuncu: #F7A06A;
        --turuncu-zemin: #3A2618;
        --kirmizi: #F2767B;
        --kirmizi-zemin: #3A1D22;
        --yesil: #35C98E;
        --yesil-zemin: #12321F;
        --turkuaz: #4FD1DC;
        --turkuaz-zemin: #12313A;
        --pembe: #F57FA8;
        --pembe-zemin: #3A1E2A;
        --kehribar: #F4B356;
        --kehribar-zemin: #3A2E18;
        --lacivert: #C9D3EA;
        --lacivert-zemin: #1E2A47;
        --birincil-zemin: var(--altin);
        --birincil-metin: #121A2C;
        --birincil-hover: #FDBA74;
        --golge: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -18px rgba(0, 0, 0, .6);
        color-scheme: dark;
    }

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

html {
    scroll-behavior: smooth;
}

html, body {
    margin: 0;
}

body {
    font-family: var(--font-govde);
    font-size: 16px;
    line-height: 1.55;
    color: var(--metin);
    background: var(--kagit);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--font-baslik);
    line-height: 1.12;
    margin: 0 0 .5em;
    letter-spacing: -0.015em;
}

p {
    margin: 0 0 1em;
}

a {
    color: inherit;
}

img, svg {
    display: inline-block;
    vertical-align: middle;
}

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

.gorunmez {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.tutar {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

    .tutar.arti {
        color: var(--gelir);
    }

    .tutar.eksi {
        color: var(--gider);
    }

.ust-uyari {
    background: var(--altin-soluk);
    color: var(--metin);
    padding: .7rem 1.25rem;
    text-align: center;
    font-size: .92rem;
    border-bottom: 1px solid var(--altin);
}

.uygulama > .ust-uyari { /* ic sayfalarda duzeni bozmasin diye altta sabit */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    border-top: 1px solid var(--altin);
    border-bottom: none;
}

/* ---------------- Demo seridi (ic sayfalarin altinda sabit) ---------------- */
.demo-serit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem 1rem;
    padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));
}

.demo-kalan {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    margin-left: .35rem;
    white-space: nowrap;
}

.demo-eylemler {
    display: inline-flex;
    gap: .5rem;
}

.demo-serit.demo-az-kaldi {
    background: var(--kirmizi-zemin);
    border-top-color: var(--kirmizi);
}

    .demo-serit.demo-az-kaldi .demo-kalan {
        color: var(--kirmizi);
    }

/* Son 2 dakika notu (seridin hemen ustunde) */
.demo-uyari {
    position: fixed;
    left: 50%;
    bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 61;
    width: min(32rem, calc(100% - 2rem));
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem 1rem;
    background: var(--yuzey);
    color: var(--metin);
    border: 1px solid var(--kirmizi);
    border-left-width: 4px;
    border-radius: var(--yaricap-kucuk);
    box-shadow: var(--golge);
    font-size: .92rem;
}

    .demo-uyari span {
        flex: 1;
    }

.demo-uyari-kapat {
    background: none;
    border: none;
    color: var(--metin-soluk);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: .2rem;
}

/* Serit icerigin ustunu kapatmasin */
body.demo-acik {
    padding-bottom: 4.5rem;
}

    /* Demo seridi acikken cerez bandi seridin ustunde dursun */
    body.demo-acik .cerez-bandi {
        bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
    }

.js-yok {
    background: var(--hata-zemin);
    padding: .8rem 1.25rem;
    text-align: center;
}

/* ---------------- Logo ---------------- */
.logo {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--font-baslik);
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: -0.02em;
    text-decoration: none;
    color: inherit;
}

.logo-isaret {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9px;
    background: var(--murekkep);
    position: relative;
    flex: none;
    overflow: hidden;
}

    .logo-isaret::before { /* yukselen cubuklar */
        content: "";
        position: absolute;
        left: 22%;
        right: 22%;
        bottom: 22%;
        height: 56%;
        background: linear-gradient(var(--altin), var(--altin)) 0 100% / 22% 45% no-repeat, linear-gradient(var(--altin), var(--altin)) 50% 100% / 22% 72% no-repeat, linear-gradient(var(--altin), var(--altin)) 100% 100% / 22% 100% no-repeat;
    }

[data-tema="koyu"] .logo-isaret {
    background: var(--altin);
}

    [data-tema="koyu"] .logo-isaret::before {
        background: linear-gradient(#121A2C, #121A2C) 0 100% / 22% 45% no-repeat, linear-gradient(#121A2C, #121A2C) 50% 100% / 22% 72% no-repeat, linear-gradient(#121A2C, #121A2C) 100% 100% / 22% 100% no-repeat;
    }

/* ---------------- Ikon rozetleri ---------------- */
.ikon-rozet {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    display: inline-grid;
    place-items: center;
    flex: none;
}

    .ikon-rozet.mavi {
        background: var(--mavi-zemin);
        color: var(--mavi);
    }

    .ikon-rozet.mor {
        background: var(--mor-zemin);
        color: var(--mor);
    }

    .ikon-rozet.turuncu {
        background: var(--turuncu-zemin);
        color: var(--turuncu);
    }

    .ikon-rozet.kirmizi {
        background: var(--kirmizi-zemin);
        color: var(--kirmizi);
    }

    .ikon-rozet.yesil {
        background: var(--yesil-zemin);
        color: var(--yesil);
    }

    .ikon-rozet.turkuaz {
        background: var(--turkuaz-zemin);
        color: var(--turkuaz);
    }

    .ikon-rozet.kehribar {
        background: var(--kehribar-zemin);
        color: var(--kehribar);
    }

    .ikon-rozet.lacivert {
        background: var(--lacivert-zemin);
        color: var(--lacivert);
    }

/* ---------------- Butonlar ---------------- */
.buton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 46px;
    padding: .7rem 1.35rem;
    border: 1.5px solid transparent;
    border-radius: 999px;
    font: 600 1rem/1 var(--font-govde);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s, transform .15s;
}

    .buton:active:not(:disabled) {
        transform: translateY(1px);
    }

    .buton:disabled {
        opacity: .6;
        cursor: progress;
    }

.buton-birincil {
    background: var(--birincil-zemin);
    color: var(--birincil-metin);
}

    .buton-birincil:hover:not(:disabled) {
        background: var(--birincil-hover);
    }

.buton-vurgu {
    background: var(--altin);
    color: #121A2C;
}

    .buton-vurgu:hover:not(:disabled) {
        background: #FB8A3C;
    }

.buton-ikincil {
    background: transparent;
    color: var(--metin);
    border-color: var(--cizgi);
}

    .buton-ikincil:hover:not(:disabled) {
        border-color: var(--metin-soluk);
    }

.buton-metin {
    background: none;
    border: none;
    padding: 0;
    min-height: auto;
    color: var(--metin);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
    border-radius: 4px;
}

.buton-tam {
    width: 100%;
}

.buton-kucuk {
    min-height: 38px;
    padding: .5rem 1rem;
    font-size: .93rem;
}

.buton[data-yukleniyor="true"]::after {
    content: "";
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: don .7s linear infinite;
}

@keyframes don {
    to {
        transform: rotate(360deg);
    }
}

/* ---------------- Formlar ---------------- */
.alan {
    margin-bottom: 1.05rem;
}

    .alan label {
        display: block;
        font-weight: 600;
        font-size: .92rem;
        margin-bottom: .35rem;
    }

    .alan .ipucu {
        font-weight: 400;
        color: var(--metin-soluk);
    }

    .alan input,
    .alan select {
        width: 100%;
        min-height: 48px;
        padding: .65rem .9rem;
        font: inherit;
        color: var(--metin);
        background: var(--yuzey);
        border: 1.5px solid var(--cizgi);
        border-radius: var(--yaricap-kucuk);
        transition: border-color .15s, box-shadow .15s;
    }

        .alan input:focus,
        .alan select:focus {
            outline: none;
            border-color: var(--altin);
            box-shadow: 0 0 0 4px var(--altin-soluk);
        }

        .alan input[aria-invalid="true"] {
            border-color: var(--gider);
        }

.alan-hata {
    display: block;
    margin-top: .3rem;
    font-size: .85rem;
    color: var(--gider);
}

    .alan-hata:empty {
        display: none;
    }

.onay-kutusu {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .95rem;
    cursor: pointer;
}

    .onay-kutusu input {
        width: 1.1rem;
        height: 1.1rem;
        accent-color: var(--murekkep);
    }

.form-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.ikili {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
}

.ek-bilgiler {
    border-top: 1px solid var(--cizgi);
    margin: .5rem 0 1.25rem;
    padding-top: .75rem;
}

    .ek-bilgiler summary {
        cursor: pointer;
        font-weight: 600;
        padding: .25rem 0 .75rem;
    }

        .ek-bilgiler summary span {
            font-weight: 400;
            color: var(--metin-soluk);
        }

.sifre-kurallari {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    font-size: .83rem;
    color: var(--metin-soluk);
}

    .sifre-kurallari li::before {
        content: "○ ";
    }

    .sifre-kurallari li.tamam {
        color: var(--gelir);
    }

        .sifre-kurallari li.tamam::before {
            content: "● ";
        }

/* ---------------- Sifre goster/gizle ---------------- */
.sifre-kutu {
    position: relative;
    display: block;
}

    .sifre-kutu input {
        padding-right: 3rem;
    }

.sifre-goster {
    position: absolute;
    top: 50%;
    right: .35rem;
    transform: translateY(-50%);
    width: 2.4rem;
    height: 2.4rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--metin-soluk);
    display: grid;
    place-items: center;
    cursor: pointer;
}

    .sifre-goster:hover {
        color: var(--metin);
        background: var(--kagit);
    }

.alan input[readonly] {
    background: var(--kagit);
    color: var(--metin-soluk);
    cursor: default;
}

/* ---------------- Mesaj kutusu ---------------- */
.mesaj {
    padding: .85rem 1rem;
    border-radius: var(--yaricap-kucuk);
    margin-bottom: 1.25rem;
    font-size: .95rem;
    border-left: 4px solid;
}

    .mesaj[hidden] {
        display: none;
    }

.mesaj-hata {
    background: var(--hata-zemin);
    border-color: var(--gider);
}

.mesaj-basari {
    background: var(--basari-zemin);
    border-color: var(--gelir);
}

.mesaj a {
    font-weight: 600;
}

/* =====================================================================
   SITE UST MENUSU (herkese acik sayfalar)
   ===================================================================== */
.site-ust {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--kagit) 85%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s;
}

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

.site-ust-ic {
    max-width: 1180px;
    margin: 0 auto;
    padding: .85rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.site-menu {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

    .site-menu > a {
        text-decoration: none;
        color: var(--metin-soluk);
        font-weight: 500;
        font-size: .97rem;
    }

        .site-menu > a:hover {
            color: var(--metin);
        }

.site-menu-ayrac {
    width: 1px;
    height: 22px;
    background: var(--cizgi);
}

.site-menu-eylem {
    display: flex;
    gap: .5rem;
}

.site-menu-ac {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--cizgi);
    border-radius: 12px;
    background: var(--yuzey);
    color: var(--metin);
    cursor: pointer;
    place-items: center;
}

/* Ust menudeki dil ve tema dugmeleri (ic sayfalarin ust cubugunda da tema dugmesi) */
.site-araclar {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.arac-buton {
    width: 40px;
    height: 40px;
    flex: none;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--cizgi);
    border-radius: 12px;
    background: var(--yuzey);
    color: var(--metin);
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

    .arac-buton:hover {
        border-color: var(--metin-soluk);
    }

.dil-buton {
    font-family: var(--font-baslik);
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .02em;
}

.ust-sag .arac-buton {
    width: 38px;
    height: 38px;
}

/* =====================================================================
   SITE ALT BILGISI
   ===================================================================== */
.site-alt {
    background: var(--murekkep);
    color: #C3CCDF;
    margin-top: 2rem;
}

.site-alt-ic {
    max-width: 1180px;
    margin: 0 auto;
    padding: 3rem 1.5rem 2rem;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 2rem;
}

.site-alt .logo {
    color: #FFFFFF;
    margin-bottom: .75rem;
}

.site-alt h3 {
    color: #FFFFFF;
    font-size: 1rem;
    margin-bottom: .9rem;
}

.site-alt nav {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

    .site-alt nav a {
        color: #C3CCDF;
        text-decoration: none;
    }

        .site-alt nav a:hover {
            color: #FFFFFF;
            text-decoration: underline;
        }

.site-alt p {
    max-width: 30ch;
}

.site-alt-not {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    font-size: .92rem;
}

    .site-alt-not .ikon {
        margin-top: .2rem;
        color: var(--altin);
        flex: none;
    }

.site-alt-telif {
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: .88rem;
    color: #8E9AB5;
}

/* =====================================================================
   KARSILAMA SAYFASI
   ===================================================================== */
.kahraman {
    position: relative;
    overflow: hidden;
}

    .kahraman::before { /* arka plandaki yumusak isik */
        content: "";
        position: absolute;
        width: 720px;
        height: 720px;
        right: -180px;
        top: -260px;
        background: radial-gradient(closest-side, var(--altin-soluk), transparent);
        pointer-events: none;
    }

.kahraman-ic {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 4rem 1.5rem 5rem;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 3.5rem;
    align-items: center;
}

.kahraman h1 {
    font-size: clamp(2.5rem, 5.4vw, 4.2rem);
    font-weight: 800;
    max-width: 13ch;
    margin-bottom: 1.25rem;
}

.kahraman .giris-metni {
    font-size: 1.15rem;
    color: var(--metin-soluk);
    max-width: 34rem;
    margin-bottom: 2rem;
}

.kahraman .eylemler {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

.kahraman .guven {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-top: 2rem;
    color: var(--metin-soluk);
    font-size: .92rem;
}

    .kahraman .guven span {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
    }

    .kahraman .guven .ikon {
        color: var(--gelir);
    }

.kayit-kapali {
    margin-top: 1rem;
    color: var(--metin-soluk);
}

/* --- Uygulama onizlemesi (kahramandaki gorsel) --- */
.onizleme {
    position: relative;
    justify-self: center;
    width: 100%;
    max-width: 330px;
}

/* --- Telefon cercevesi --- */
.telefon {
    position: relative;
    background: #0A0F1C;
    border-radius: 46px;
    padding: 11px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 2px 0 1px #2A3550, 0 40px 70px -30px rgba(23, 42, 77, .55);
}

[data-tema="koyu"] .telefon {
    box-shadow: 0 0 0 1px var(--cizgi), 0 40px 70px -30px rgba(0, 0, 0, .8);
}

.telefon::before, .telefon::after { /* yan tuslar */
    content: "";
    position: absolute;
    width: 3px;
    border-radius: 2px;
    background: #2A3550;
}

.telefon::before {
    left: -3px;
    top: 120px;
    height: 54px;
}

.telefon::after {
    right: -3px;
    top: 150px;
    height: 80px;
}

.telefon-ekran {
    position: relative;
    background: var(--kagit);
    border-radius: 36px;
    overflow: hidden;
    padding: 0 .95rem .6rem;
}

.telefon-durum {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 42px;
    padding: 0 .55rem;
    font-size: .74rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.telefon-centik {
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    width: 92px;
    height: 26px;
    border-radius: 20px;
    background: #0A0F1C;
}

.telefon-simgeler {
    display: inline-flex;
    gap: 4px;
    align-items: flex-end;
}

    .telefon-simgeler i { /* sinyal cubuklari */
        display: block;
        width: 3px;
        border-radius: 1px;
        background: currentColor;
    }

    .telefon-simgeler .pil {
        width: 20px;
        height: 10px;
        border: 1.5px solid currentColor;
        border-radius: 3px;
        margin-left: 3px;
        position: relative;
        background: linear-gradient(currentColor, currentColor) 1.5px 1.5px / 70% calc(100% - 3px) no-repeat;
    }

.telefon-baslik {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .2rem 0 .8rem;
    font-weight: 600;
    font-size: .92rem;
}

    .telefon-baslik .logo-isaret {
        width: 1.45rem;
        height: 1.45rem;
        border-radius: 7px;
    }

    .telefon-baslik .harf {
        margin-left: auto;
        width: 1.8rem;
        height: 1.8rem;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: var(--altin-soluk);
        color: var(--altin-koyu);
        font-size: .72rem;
        font-weight: 700;
    }

.telefon .onizleme-ust {
    padding: .9rem 1rem;
    margin-bottom: .8rem;
}

    .telefon .onizleme-ust strong {
        font-size: 1.6rem;
    }

    .telefon .onizleme-ust .degisim {
        font-size: .78rem;
    }

.telefon .grafik {
    height: 66px;
    gap: .4rem;
    margin-bottom: .4rem;
}

.telefon .onizleme-satirlari li {
    padding: .45rem 0;
    gap: .65rem;
}

.telefon .onizleme-satirlari .ikon-rozet {
    width: 2rem;
    height: 2rem;
    border-radius: 9px;
}

.telefon .onizleme-satirlari .aciklama {
    font-size: .84rem;
    line-height: 1.3;
}

.telefon .onizleme-satirlari .tutar {
    font-size: .84rem;
    font-weight: 600;
}

.telefon-alt { /* alttaki sekme cubugu */
    display: flex;
    justify-content: space-around;
    margin: .5rem -.95rem 0;
    padding: .6rem .5rem 1.1rem;
    border-top: 1px solid var(--cizgi);
    color: var(--metin-soluk);
}

    .telefon-alt span:first-child {
        color: var(--altin-koyu);
    }

    .telefon-alt::after { /* ana ekran cizgisi */
        content: "";
        position: absolute;
        bottom: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 110px;
        height: 4px;
        border-radius: 3px;
        background: var(--metin);
        opacity: .8;
    }

.onizleme-kart {
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: 20px;
    box-shadow: var(--golge);
    padding: 1.4rem;
}

.onizleme-ust {
    background: var(--murekkep);
    color: #FFFFFF;
    border-radius: 14px;
    padding: 1.1rem 1.2rem;
    margin-bottom: 1.1rem;
}

    .onizleme-ust small {
        color: #AEB9D3;
        display: block;
    }

    .onizleme-ust strong {
        font-family: var(--font-baslik);
        font-size: 2rem;
        letter-spacing: -0.02em;
    }

    .onizleme-ust .degisim {
        color: #6FE3B1;
        font-size: .88rem;
        font-weight: 600;
    }

.grafik {
    display: flex;
    align-items: flex-end;
    gap: .55rem;
    height: 92px;
    padding: 0 .25rem .5rem;
    border-bottom: 1px solid var(--cizgi);
    margin-bottom: 1rem;
}

    .grafik span {
        flex: 1;
        border-radius: 6px 6px 2px 2px;
        background: var(--lacivert-zemin);
        height: var(--y);
    }

        .grafik span.bu-ay {
            background: var(--altin);
        }

.onizleme-satirlari {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .onizleme-satirlari li {
        display: flex;
        align-items: center;
        gap: .8rem;
        padding: .6rem 0;
    }

    .onizleme-satirlari .ikon-rozet {
        width: 2.3rem;
        height: 2.3rem;
        border-radius: 10px;
    }

    .onizleme-satirlari .aciklama {
        flex: 1;
        font-weight: 500;
        font-size: .95rem;
    }

        .onizleme-satirlari .aciklama small {
            display: block;
            color: var(--metin-soluk);
            font-weight: 400;
            font-size: .8rem;
        }

.yuzen {
    position: absolute;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: 14px;
    box-shadow: var(--golge);
    padding: .7rem .9rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .88rem;
}

    .yuzen strong {
        display: block;
        font-size: .95rem;
    }

    .yuzen small {
        color: var(--metin-soluk);
    }

    .yuzen .ikon-rozet {
        width: 2.2rem;
        height: 2.2rem;
        border-radius: 10px;
    }

.yuzen-1 {
    left: -96px;
    top: 44%;
}

.yuzen-2 {
    right: -84px;
    top: 17%;
}

/* Tek seferlik acilis hareketi: grafik cubuklari yukselir */
@media (prefers-reduced-motion: no-preference) {
    .grafik span {
        animation: yuksel .8s cubic-bezier(.2, .8, .2, 1) both;
        transform-origin: bottom;
    }

        .grafik span:nth-child(2) {
            animation-delay: .06s;
        }

        .grafik span:nth-child(3) {
            animation-delay: .12s;
        }

        .grafik span:nth-child(4) {
            animation-delay: .18s;
        }

        .grafik span:nth-child(5) {
            animation-delay: .24s;
        }

        .grafik span:nth-child(6) {
            animation-delay: .3s;
        }

        .grafik span:nth-child(7) {
            animation-delay: .36s;
        }
}

@keyframes yuksel {
    from {
        transform: scaleY(0);
    }

    to {
        transform: scaleY(1);
    }
}

/* --- Uygulamayi yukle bolumu --- */
.indir-kart {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 2.5rem;
    align-items: center;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: 24px;
    box-shadow: var(--golge);
    padding: 2.5rem;
}

    .indir-kart h2 {
        font-size: clamp(1.7rem, 3vw, 2.3rem);
    }

    .indir-kart > div > p {
        color: var(--metin-soluk);
        max-width: 34rem;
    }

    .indir-kart .eylemler {
        display: flex;
        gap: .75rem;
        flex-wrap: wrap;
        margin-top: 1.5rem;
    }

    .indir-kart .buton .ikon {
        margin-right: .1rem;
    }

.buton[aria-disabled="true"] {
    opacity: .6;
    cursor: help;
}

.rozet-yakinda {
    font-size: .7rem;
    font-weight: 600;
    padding: .1rem .45rem;
    border-radius: 999px;
    background: var(--altin-soluk);
    color: var(--altin-koyu);
    margin-left: .15rem;
}

.indir-bilgi {
    margin: 1rem 0 0;
    padding: .8rem 1rem;
    border-radius: var(--yaricap-kucuk);
    background: var(--kagit);
    border: 1px dashed var(--cizgi);
    font-size: .93rem;
    max-width: 34rem;
}

.indir-maddeler {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.1rem;
}

    .indir-maddeler li {
        display: flex;
        gap: .9rem;
        align-items: flex-start;
    }

    .indir-maddeler strong {
        display: block;
        font-family: var(--font-baslik);
        font-size: 1.05rem;
    }

        .indir-maddeler strong + span {
            color: var(--metin-soluk);
            font-size: .95rem;
        }

/* --- Bolum basliklari --- */
.bolum-ic {
    max-width: 1180px;
    margin: 0 auto;
    padding: 4.5rem 1.5rem;
}

.bolum-baslik {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

    .bolum-baslik h2 {
        font-size: clamp(1.8rem, 3vw, 2.4rem);
        margin: 0 0 .4rem;
    }

    .bolum-baslik p {
        color: var(--metin-soluk);
        margin: 0;
        max-width: 40rem;
    }

/* --- Kayan ozellik vitrini --- */
.vitrin-oklar {
    display: flex;
    gap: .5rem;
}

.vitrin-ok {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1.5px solid var(--cizgi);
    background: var(--yuzey);
    color: var(--metin);
    display: grid;
    place-items: center;
    cursor: pointer;
}

    .vitrin-ok:hover:not(:disabled) {
        border-color: var(--metin-soluk);
    }

    .vitrin-ok:disabled {
        opacity: .4;
        cursor: default;
    }

.vitrin {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3 * 1.25rem) / 4);
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: .5rem .25rem 1.25rem;
    margin: 0 -.25rem;
    scrollbar-width: none;
}

    .vitrin::-webkit-scrollbar {
        display: none;
    }

.vitrin-kart {
    scroll-snap-align: start;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: 18px;
    padding: 1.5rem 1.4rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: .9rem;
    min-height: 230px;
}

    .vitrin-kart h3 {
        font-size: 1.2rem;
        margin: .25rem 0 0;
    }

    .vitrin-kart p {
        margin: 0;
        color: var(--metin-soluk);
    }

.vitrin-noktalar {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: .5rem;
}

    .vitrin-noktalar[hidden] {
        display: none;
    }

    .vitrin-noktalar button {
        width: 9px;
        height: 9px;
        padding: 0;
        border-radius: 999px;
        border: none;
        background: var(--cizgi);
        cursor: pointer;
        transition: width .2s, background-color .2s;
    }

        .vitrin-noktalar button[aria-current="true"] {
            width: 26px;
            background: var(--altin);
        }

/* --- Nasil calisir (gercek bir sira oldugu icin numarali) --- */
.adimlar {
    list-style: none;
    counter-reset: adim;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

    .adimlar li {
        counter-increment: adim;
        padding: 1.5rem 1.4rem;
        border-radius: 18px;
        background: var(--yuzey);
        border: 1px solid var(--cizgi);
    }

        .adimlar li::before {
            content: counter(adim);
            display: grid;
            place-items: center;
            width: 2.4rem;
            height: 2.4rem;
            border-radius: 50%;
            background: var(--murekkep);
            color: #FFFFFF;
            font-family: var(--font-baslik);
            font-weight: 700;
            margin-bottom: 1rem;
        }

    .adimlar h3 {
        font-size: 1.15rem;
    }

    .adimlar p {
        margin: 0;
        color: var(--metin-soluk);
    }

/* --- Cagri bandi --- */
.cagri {
    max-width: 1180px;
    margin: 0 auto 4rem;
    padding: 0 1.5rem;
}

.cagri-ic {
    background: var(--murekkep);
    color: #FFFFFF;
    border-radius: 24px;
    padding: 2.75rem 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}

    .cagri-ic::after {
        content: "";
        position: absolute;
        width: 360px;
        height: 360px;
        right: -120px;
        bottom: -200px;
        border-radius: 50%;
        background: radial-gradient(closest-side, rgba(249, 115, 22, .35), transparent);
    }

.cagri h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    margin-bottom: .4rem;
    max-width: 22ch;
}

.cagri p {
    color: #C3CCDF;
    margin: 0;
}

.cagri .buton {
    position: relative;
    z-index: 1;
}

/* =====================================================================
   ICERIK SAYFALARI (hakkimizda, iletisim)
   ===================================================================== */
.icerik-sayfa {
    max-width: 860px;
    margin: 0 auto;
    padding: 3.5rem 1.5rem 3rem;
}

    .icerik-sayfa h1 {
        font-size: clamp(2.2rem, 4.5vw, 3.2rem);
        margin-bottom: 1rem;
    }

    .icerik-sayfa .giris-metni {
        font-size: 1.15rem;
        color: var(--metin-soluk);
        margin-bottom: 2.5rem;
    }

    .icerik-sayfa h2 {
        font-size: 1.4rem;
        margin-top: 2.25rem;
    }

    .icerik-sayfa p, .icerik-sayfa li {
        max-width: 68ch;
    }

.ilke-listesi {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}

.ilke {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--yaricap);
}

    .ilke h3 {
        font-size: 1.05rem;
        margin-bottom: .3rem;
    }

    .ilke p {
        margin: 0;
        color: var(--metin-soluk);
        font-size: .95rem;
    }

.iletisim-kart {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1.4rem;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--yaricap);
    margin-bottom: 2rem;
}

    .iletisim-kart p {
        margin: 0;
        color: var(--metin-soluk);
    }

    .iletisim-kart a {
        font-weight: 600;
        font-size: 1.1rem;
        color: var(--metin);
    }

/* =====================================================================
   GIRIS / KAYIT SAYFALARI
   ===================================================================== */
.kimlik-sayfa {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(340px, .9fr) 1.1fr;
}

.kimlik-yan {
    background: var(--murekkep);
    color: #E8ECF5;
    padding: 2.5rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    position: relative;
    overflow: hidden;
}

    .kimlik-yan::after {
        content: "";
        position: absolute;
        width: 520px;
        height: 520px;
        left: -160px;
        bottom: -240px;
        border-radius: 50%;
        background: radial-gradient(closest-side, rgba(249, 115, 22, .28), transparent);
        pointer-events: none;
    }

    .kimlik-yan > * {
        position: relative;
        z-index: 1;
    }

    .kimlik-yan .logo {
        color: #FFFFFF;
    }

    .kimlik-yan h2 {
        font-size: clamp(1.9rem, 2.8vw, 2.6rem);
        max-width: 15ch;
        color: #FFFFFF;
    }

    .kimlik-yan p {
        color: #AEB9D3;
        max-width: 30rem;
    }

    .kimlik-yan .ozet-satirlari {
        list-style: none;
        margin: 0;
        padding: 1rem 1.1rem;
        background: rgba(255, 255, 255, .06);
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 16px;
    }

        .kimlik-yan .ozet-satirlari li {
            display: flex;
            align-items: center;
            gap: .75rem;
            padding: .55rem 0;
            font-size: .95rem;
        }

        .kimlik-yan .ozet-satirlari .ikon-rozet {
            width: 2.2rem;
            height: 2.2rem;
            border-radius: 10px;
        }

        .kimlik-yan .ozet-satirlari .aciklama {
            flex: 1;
        }

        .kimlik-yan .ozet-satirlari .tutar.arti {
            color: #6FE3B1;
        }

        .kimlik-yan .ozet-satirlari .tutar.eksi {
            color: #FF9EA2;
        }

.kimlik-ana {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
}

.kimlik-kutu {
    width: 100%;
    max-width: 420px;
}

    .kimlik-kutu h1 {
        font-size: 2.1rem;
    }

    .kimlik-kutu .alt-metin {
        color: var(--metin-soluk);
        margin-bottom: 1.75rem;
    }

    .kimlik-kutu .gecis {
        margin-top: 1.5rem;
        text-align: center;
        color: var(--metin-soluk);
    }

        .kimlik-kutu .gecis a {
            color: var(--metin);
            font-weight: 600;
        }

.kimlik-geri {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-bottom: 1.5rem;
    color: var(--metin-soluk);
    text-decoration: none;
    font-size: .92rem;
}

    .kimlik-geri:hover {
        color: var(--metin);
    }

/* --- Giris / kayit: ust satir (telefonda logo), Google butonu, "veya" ayraci --- */
.kimlik-kutu-genis {
    max-width: 520px;
}

.kimlik-ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    margin-bottom: 1.5rem;
}

    .kimlik-ust .kimlik-geri {
        margin-bottom: 0;
    }

.kimlik-mobil-logo {
    display: none;
}

.google-alan {
    margin-bottom: 1.25rem;
}

/* Google'in marka kurallarina uygun: beyaz zemin, renkli "G", koyu temada koyu zemin */
.buton-google {
    gap: .75rem;
    min-height: 48px;
    background: #FFFFFF;
    color: #1F1F1F;
    border-color: #C9CED8;
}

    .buton-google:hover {
        background: #F5F7FA;
        border-color: #9AA3B5;
    }

    .buton-google:focus-visible {
        outline: 3px solid var(--altin);
        outline-offset: 2px;
    }

    .buton-google .google-logo {
        width: 20px;
        height: 20px;
        flex: none;
    }

    .buton-google.bekliyor {
        opacity: .65;
        pointer-events: none;
    }

[data-tema="koyu"] .buton-google {
    background: #131314;
    color: #E3E3E3;
    border-color: #8E918F;
}

    [data-tema="koyu"] .buton-google:hover {
        background: #1E1F20;
    }

.kimlik-ayrac {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-top: 1.25rem;
    color: var(--metin-soluk);
    font-size: .88rem;
}

    .kimlik-ayrac::before,
    .kimlik-ayrac::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--cizgi);
    }

.kayit-sifre-kurallari {
    margin: -.4rem 0 1.1rem;
}

/* Alttaki "Hesabin yok mu? / Zaten hesabin var mi?" gecisi belirgin bir kutu */
.kimlik-kutu .gecis {
    padding: .85rem 1rem;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--yaricap-kucuk);
}

@media (max-width: 900px) {
    /* Koyu yan panel yerine formun ustunde logo: form ekranin tamamini kullanir */
    .kimlik-sayfa .kimlik-yan {
        display: none;
    }

    .kimlik-mobil-logo {
        display: inline-flex;
    }

    .kimlik-ana {
        align-items: flex-start;
        padding: 1.25rem 16px 2.5rem;
    }
}

@media (max-width: 540px) {
    .kimlik-ust {
        margin-bottom: 1.25rem;
    }

    .kimlik-kutu h1 {
        font-size: 1.75rem;
    }

    .kimlik-kutu .alt-metin {
        margin-bottom: 1.25rem;
    }

    /* Yan yana alanlar telefonda alt alta */
    .kimlik-kutu .ikili {
        grid-template-columns: minmax(0, 1fr);
    }

    .kimlik-kutu .form-satir {
        gap: .6rem 1rem;
    }

    .kimlik-kutu .buton {
        white-space: normal;   /* uzun buton yazisi (Ingilizce) tasmasin */
        line-height: 1.25;
    }
}

.kod-girisi input {
    font-size: 1.6rem;
    letter-spacing: .5em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* =====================================================================
   UYGULAMA ICI DUZEN (giris sonrasi sayfalar)
   ===================================================================== */
.uygulama {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "ust ust"
        "menu icerik"
        "menu alt";
}

.uyg-ust {
    grid-area: ust;
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .7rem 1.5rem;
    background: var(--yuzey);
    border-bottom: 1px solid var(--cizgi);
}

    .uyg-ust .ust-sag {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: .9rem;
    }

.profil {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 600;
    text-decoration: none;
    color: inherit;
    padding: .2rem .6rem .2rem .2rem;
    border-radius: 999px;
}

    .profil:hover {
        background: var(--kagit);
    }

.profil-harf {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background: var(--altin);
    color: #121A2C;
    font-size: .82rem;
    font-weight: 700;
}

.menu-ac {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--cizgi);
    border-radius: 12px;
    background: transparent;
    color: var(--metin);
    cursor: pointer;
    place-items: center;
}

.uyg-menu {
    grid-area: menu;
    background: var(--murekkep);
    padding: 1.25rem .8rem 2rem;
}

.menu-baslik {
    margin: 0 .9rem .5rem;
    font-size: .8rem;
    color: #8492B0;
}

    .menu-baslik:not(:first-child) {
        margin-top: 1.5rem;
    }

.menu-ogesi {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .62rem .9rem;
    margin-bottom: 2px;
    border-radius: 10px;
    color: #D3DAEA;
    text-decoration: none;
    font-weight: 500;
}

    .menu-ogesi .ikon {
        flex: none;
        opacity: .85;
    }

    .menu-ogesi .menu-ad {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

a.menu-ogesi:hover {
    background: rgba(255, 255, 255, .07);
    color: #FFFFFF;
}

a.menu-ogesi[aria-current="page"] {
    background: var(--altin);
    color: #121A2C;
}

    a.menu-ogesi[aria-current="page"] .ikon {
        opacity: 1;
    }

.menu-ogesi.yakinda {
    color: #6E7C9C;
    cursor: default;
}

    .menu-ogesi.yakinda small {
        font-size: .72rem;
        font-weight: 400;
    }

.uyg-icerik {
    grid-area: icerik;
    padding: 2rem 2.25rem 3rem;
    width: 100%;
    max-width: 1220px;
}

.uyg-alt {
    grid-area: alt;
    padding: 1.25rem 2.25rem;
    border-top: 1px solid var(--cizgi);
    color: var(--metin-soluk);
    font-size: .88rem;
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

    .uyg-alt a {
        color: var(--metin-soluk);
    }

/* =====================================================================
   ANA SAYFA (dashboard)
   ===================================================================== */
.sayfa-baslik {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    margin-bottom: 1.5rem;
}

    .sayfa-baslik h1 {
        font-size: 2rem;
        margin: 0;
    }

    .sayfa-baslik p {
        margin: 0;
        color: var(--metin-soluk);
    }

.ozet-kartlari {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.ozet-kart {
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--yaricap);
    padding: 1.15rem 1.25rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .2rem .75rem;
    align-content: start;
}

    .ozet-kart .ikon-rozet {
        grid-column: 2;
        grid-row: 1;
        width: 2.5rem;
        height: 2.5rem;
    }

    .ozet-kart > span {
        color: var(--metin-soluk);
        font-size: .9rem;
    }

    .ozet-kart strong {
        grid-column: 1 / -1; /* tutar tum genisligi kullansin, ikonla carpismasin */
        font-family: var(--font-baslik);
        font-size: clamp(1.3rem, 2vw, 1.7rem);
        font-weight: 700;
    }

    .ozet-kart small {
        grid-column: 1 / -1;
        color: var(--metin-soluk);
        font-size: .8rem;
    }

        .ozet-kart small.arti {
            color: var(--gelir);
        }

        .ozet-kart small.eksi {
            color: var(--gider);
        }

    .ozet-kart.vurgu {
        background: var(--murekkep);
        border-color: transparent;
        color: #FFFFFF;
    }

        .ozet-kart.vurgu > span, .ozet-kart.vurgu small {
            color: #AEB9D3;
        }

        .ozet-kart.vurgu .ikon-rozet {
            background: rgba(255, 255, 255, .1);
            color: var(--altin);
        }

.bolum {
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--yaricap);
    padding: 1.25rem 1.4rem 1.4rem;
    margin-bottom: 1.5rem;
}

    .bolum h2 {
        font-size: 1.15rem;
        margin-bottom: 1rem;
    }

.bos-durum {
    color: var(--metin-soluk);
    margin: 0;
}

.yaklasanlar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: .8rem;
}

    .yaklasanlar > .bos-durum {
        grid-column: 1 / -1;
    }

.yaklasan {
    border: 1px solid var(--cizgi);
    border-left: 4px solid var(--cizgi);
    border-radius: var(--yaricap-kucuk);
    padding: .85rem 1rem;
}

    .yaklasan.yakin {
        border-left-color: var(--altin);
    }

    .yaklasan.gecikmis {
        border-left-color: var(--gider);
    }

    .yaklasan small {
        color: var(--metin-soluk);
        font-size: .78rem;
    }

    .yaklasan h3 {
        font-family: var(--font-govde);
        font-size: 1rem;
        margin: .1rem 0 .15rem;
    }

.yaklasan-tarih {
    margin: 0 0 .5rem;
    color: var(--metin-soluk);
    font-size: .88rem;
}

.yaklasan-alt {
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
}

    .yaklasan-alt .tutar {
        font-weight: 700;
    }

    .yaklasan-alt .kalan {
        font-size: .82rem;
        color: var(--metin-soluk);
    }

.yaklasan.yakin .kalan {
    color: var(--altin-koyu);
    font-weight: 600;
}

.yaklasan.gecikmis .kalan {
    color: var(--gider);
    font-weight: 600;
}

.aylik-ozet {
    margin: 0;
}

    .aylik-ozet > div {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: .65rem 0;
        border-bottom: 1px dashed var(--cizgi);
    }

        .aylik-ozet > div:last-child {
            border-bottom: none;
        }

    .aylik-ozet dd {
        margin: 0;
        font-weight: 600;
    }

.tablo-kapsayici {
    overflow-x: auto;
}

.tablo {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
}

    .tablo th {
        text-align: left;
        font-weight: 500;
        color: var(--metin-soluk);
        font-size: .85rem;
        padding: 0 .75rem .6rem 0;
        border-bottom: 1px solid var(--cizgi);
    }

    .tablo td {
        padding: .7rem .75rem .7rem 0;
        border-bottom: 1px dashed var(--cizgi);
        vertical-align: top;
    }

    .tablo tr:last-child td {
        border-bottom: none;
    }

    .tablo td small {
        display: block;
        color: var(--metin-soluk);
        font-size: .8rem;
    }

    .tablo .sag {
        text-align: right;
        padding-right: 0;
    }

    .tablo .mobil-goster {
        display: none;
    }

/* =====================================================================
   MOBIL
   ===================================================================== */
@media (max-width: 1000px) {
    .ozet-kartlari {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vitrin {
        grid-auto-columns: calc((100% - 2 * 1.25rem) / 3);
    }

    .site-alt-ic {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 900px) {
    .site-menu-ac {
        display: grid;
    }

    .site-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: .5rem 1.5rem 1.25rem;
        background: var(--yuzey);
        border-bottom: 1px solid var(--cizgi);
        box-shadow: var(--golge);
        display: none;
    }

        .site-menu.acik {
            display: flex;
        }

        .site-menu > a {
            padding: .85rem 0;
            border-bottom: 1px solid var(--cizgi);
            color: var(--metin);
        }

    .site-menu-ayrac {
        display: none;
    }

    .site-araclar {
        margin-left: auto;
    }

    .indir-kart {
        grid-template-columns: 1fr;
        padding: 2rem 1.5rem;
    }

    .site-menu-eylem {
        padding-top: 1rem;
    }

        .site-menu-eylem .buton {
            flex: 1;
        }

    .kahraman-ic {
        grid-template-columns: 1fr;
        padding-top: 2.5rem;
        gap: 3rem;
    }

    .yuzen-1 {
        left: -70px;
    }

    .yuzen-2 {
        right: -60px;
    }

    .adimlar {
        grid-template-columns: 1fr;
    }

    .ilke-listesi {
        grid-template-columns: 1fr;
    }

    .kimlik-sayfa {
        grid-template-columns: 1fr;
    }

    .kimlik-yan {
        padding: 1.25rem 1.5rem;
    }

        .kimlik-yan h2, .kimlik-yan p, .kimlik-yan .ozet-satirlari {
            display: none;
        }
}

@media (max-width: 860px) {
    .uygulama {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "ust" "icerik" "alt";
    }

    .menu-ac {
        display: grid;
    }

    .uyg-menu {
        position: fixed;
        top: 59px;
        bottom: 0;
        left: 0;
        width: 270px;
        z-index: 25;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform .2s ease;
    }

        .uyg-menu.acik {
            transform: none;
            box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .4);
        }

    .uyg-icerik {
        padding: 1.5rem 1rem 2.5rem;
    }

    .uyg-alt {
        padding: 1rem;
    }

    .profil-ad {
        display: none;
    }

    .uyg-ust .buton-yazi {
        display: none;
    }

    .uyg-ust .logo {
        margin-right: auto;
    }

    .uyg-ust {
        gap: .6rem;
        padding: .7rem 1rem;
    }

        .uyg-ust .ust-sag {
            gap: .45rem;
        }

    .menu-ogesi {
        white-space: nowrap;
    }
}

@media (max-width: 640px) {
    .vitrin {
        grid-auto-columns: 82%;
    }

    .site-alt-ic {
        grid-template-columns: 1fr;
    }

    .ikili {
        grid-template-columns: 1fr;
    }

    .ozet-kartlari {
        grid-template-columns: minmax(0, 1fr);
    }

    .tablo .mobil-gizle {
        display: none;
    }

    .tablo .mobil-goster {
        display: block;
    }

    .cagri-ic {
        padding: 2rem 1.5rem;
    }

    .yuzen {
        display: none;
    }

    .onizleme {
        max-width: 300px;
    }

    .site-ust-ic {
        padding-left: 1rem;
        padding-right: 1rem;
        gap: .75rem;
    }

    .site-araclar .arac-buton {
        width: 40px;
        height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .vitrin {
        scroll-behavior: auto;
    }

    .uyg-menu {
        transition: none;
    }
}


/* =====================================================================
   AYARLAR
   ===================================================================== */
.ayar-bolum {
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--yaricap);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    display: grid;
    grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
    gap: 1.5rem 2.5rem;
}

.ayar-bolum-baslik {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
}

    .ayar-bolum-baslik h2 {
        font-size: 1.15rem;
        margin: .1rem 0 .3rem;
    }

    .ayar-bolum-baslik p {
        margin: 0;
        color: var(--metin-soluk);
        font-size: .92rem;
    }

.ayar-form {
    max-width: 520px;
}

    .ayar-form .eylem-satiri {
        display: flex;
        gap: .75rem;
        flex-wrap: wrap;
        align-items: center;
    }

@media (max-width: 860px) {
    .ayar-bolum {
        grid-template-columns: 1fr;
        padding: 1.25rem;
    }
}


/* =====================================================================
   ORTAK: Pencere (dialog), tehlikeli buton, rozet, suzgecler
   ===================================================================== */
.pencere {
    width: min(460px, calc(100% - 2rem));
    max-height: calc(100vh - 2rem);
    border: 1px solid var(--cizgi);
    border-radius: 18px;
    padding: 1.5rem;
    background: var(--yuzey);
    color: var(--metin);
    box-shadow: 0 30px 60px -20px rgba(10, 15, 28, .45);
}

    .pencere::backdrop {
        background: rgba(10, 15, 28, .55);
    }

.pencere-kucuk {
    width: min(400px, calc(100% - 2rem));
}

.pencere-ust {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.pencere-baslik {
    font-size: 1.25rem;
    margin: 0 0 .5rem;
}

.pencere-ust .pencere-baslik {
    margin: 0;
}

.pencere-metin {
    color: var(--metin-soluk);
}

.pencere-kapat {
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--metin-soluk);
    cursor: pointer;
}

    .pencere-kapat:hover {
        background: var(--kagit);
        color: var(--metin);
    }

.pencere-eylemler {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

.pencere-not {
    font-size: .85rem;
    color: var(--metin-soluk);
    margin: -.25rem 0 0;
}

.buton-tehlike {
    background: var(--gider);
    color: #FFFFFF;
}

    .buton-tehlike:hover:not(:disabled) {
        filter: brightness(.92);
    }

.rozet {
    display: inline-block;
    white-space: nowrap;
    font-family: var(--font-govde);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: 0;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: var(--lacivert-zemin);
    color: var(--metin-soluk);
    vertical-align: middle;
}

.baslik-eylem {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    align-items: center;
}

.geri-baglanti {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--metin-soluk);
    text-decoration: none;
    font-size: .92rem;
    margin-bottom: .6rem;
}

    .geri-baglanti:hover {
        color: var(--metin);
    }

.bolum-ust {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

    .bolum-ust h2 {
        margin: 0;
    }

.suzgecler {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    align-items: center;
}

    .suzgecler select {
        min-height: 38px;
        padding: .35rem 2rem .35rem .75rem;
        font: inherit;
        font-size: .92rem;
        color: var(--metin);
        background-color: var(--yuzey);
        border: 1.5px solid var(--cizgi);
        border-radius: 999px;
    }

.segment {
    display: inline-flex;
    padding: 3px;
    border: 1.5px solid var(--cizgi);
    border-radius: 999px;
}

    .segment button {
        border: none;
        background: none;
        font: inherit;
        font-size: .88rem;
        font-weight: 500;
        color: var(--metin-soluk);
        padding: .3rem .85rem;
        border-radius: 999px;
        cursor: pointer;
    }

        .segment button[aria-pressed="true"] {
            background: var(--murekkep);
            color: #FFFFFF;
        }

[data-tema="koyu"] .segment button[aria-pressed="true"] {
    background: var(--altin);
    color: #121A2C;
}

.tablo tfoot td {
    padding-top: .8rem;
    border-top: 1px solid var(--cizgi);
    border-bottom: none;
    font-weight: 600;
}

/* =====================================================================
   SOL MENU ACILIR PANELI (bankalar, kartlar, yatirimlar)
   ===================================================================== */
.menu-acilir {
    position: fixed;
    z-index: 45;
    width: 280px;
    max-height: min(420px, calc(100vh - 24px));
    overflow-y: auto;
    background: var(--yuzey);
    color: var(--metin);
    border: 1px solid var(--cizgi);
    border-radius: 14px;
    box-shadow: var(--golge), 0 18px 40px -16px rgba(10, 15, 28, .35);
    padding: .4rem;
}

    .menu-acilir::before { /* menu ile panel arasindaki bosluk: fare gecerken kapanmasin */
        content: "";
        position: absolute;
        left: -12px;
        top: 0;
        width: 12px;
        height: 48px;
    }

.menu-acilir-baslik {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
    padding: .55rem .7rem .6rem;
    margin-bottom: .2rem;
    border-bottom: 1px solid var(--cizgi);
    font-weight: 600;
    text-decoration: none;
    color: inherit;
}

    .menu-acilir-baslik small {
        color: var(--altin-koyu);
        font-weight: 500;
    }

.menu-acilir-oge {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem .7rem;
    border-radius: 9px;
    text-decoration: none;
    color: inherit;
    font-size: .93rem;
}

    .menu-acilir-oge:hover, .menu-acilir-oge:focus-visible {
        background: var(--kagit);
    }

    .menu-acilir-oge span:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .menu-acilir-oge .tutar {
        color: var(--metin-soluk);
    }

.menu-acilir-bos {
    margin: 0;
    padding: .6rem .7rem;
    color: var(--metin-soluk);
    font-size: .9rem;
}

/* =====================================================================
   BANKA HESAPLARI
   ===================================================================== */
.hesap-kartlari {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.hesap-kart {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1.1rem 1.2rem;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--yaricap);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}

a.hesap-kart:hover {
    border-color: var(--altin);
    box-shadow: var(--golge);
    transform: translateY(-2px);
}

.hesap-kart-ust {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-weight: 600;
    margin-bottom: .3rem;
}

    .hesap-kart-ust .ikon-rozet {
        width: 2.3rem;
        height: 2.3rem;
        border-radius: 10px;
    }

    .hesap-kart-ust span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.hesap-kart-bakiye {
    font-family: var(--font-baslik);
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.pay-cubuk {
    height: 6px;
    border-radius: 999px;
    background: var(--lacivert-zemin);
    overflow: hidden;
}

    .pay-cubuk span {
        display: block;
        height: 100%;
        width: var(--pay);
        border-radius: inherit;
        background: var(--altin);
    }

.hesap-kart-alt {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    font-size: .82rem;
    color: var(--metin-soluk);
}

.hesap-kart.yeni {
    align-items: center;
    justify-content: center;
    min-height: 150px;
    border-style: dashed;
    border-width: 1.5px;
    background: transparent;
    color: var(--metin-soluk);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

    .hesap-kart.yeni:hover {
        border-color: var(--altin);
        color: var(--metin);
    }

.hesap-kartlari.kompakt {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .8rem;
}

    .hesap-kartlari.kompakt .hesap-kart {
        padding: .9rem 1rem;
    }

    .hesap-kartlari.kompakt .hesap-kart-bakiye {
        font-size: 1.25rem;
    }

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

    .pasif-liste li {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: .7rem 0;
        border-bottom: 1px dashed var(--cizgi);
    }

        .pasif-liste li:last-child {
            border-bottom: none;
        }

        .pasif-liste li > span {
            flex: 1;
            min-width: 0;
        }

        .pasif-liste li small {
            display: block;
            color: var(--metin-soluk);
        }

@media (max-width: 640px) {
    .sayfa-baslik .baslik-eylem {
        width: 100%;
    }

    .bolum-ust {
        align-items: flex-start;
    }
}

/* --- Banka detayi: hizli eylemler, satir silme, sadece kayit --- */
.hizli-eylemler {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.hizli-eylem {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem .9rem;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--yaricap);
    font: inherit;
    font-weight: 600;
    color: var(--metin);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

    .hizli-eylem:hover {
        border-color: var(--altin);
        box-shadow: var(--golge);
        transform: translateY(-1px);
    }

    .hizli-eylem .ikon-rozet {
        width: 2.3rem;
        height: 2.3rem;
        border-radius: 10px;
    }

.tablo .islem-hucre {
    width: 2.5rem;
    padding-left: .5rem;
}

.satir-sil {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--metin-soluk);
    cursor: pointer;
    opacity: .55;
}

    .tablo tr:hover .satir-sil, .satir-sil:focus-visible {
        opacity: 1;
    }

    .satir-sil:hover {
        background: var(--kirmizi-zemin);
        color: var(--gider);
    }

.tablo tr.sadece-kayit .tutar {
    opacity: .55;
}

.pencere .onay-kutusu {
    margin: .25rem 0 .4rem;
}

@media (hover: none) {
    .satir-sil {
        opacity: 1;
    }
}

/* =====================================================================
   KREDI KARTLARI
   ===================================================================== */
.kart-gorselleri {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 1rem;
}

.kart-gorsel {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-height: 200px;
    padding: 1.15rem 1.25rem;
    border-radius: 18px;
    color: #FFFFFF;
    text-decoration: none;
    background: linear-gradient(135deg, #22396A, #0D1830);
    box-shadow: 0 14px 30px -18px rgba(13, 24, 48, .7);
    transition: transform .15s, box-shadow .15s;
}

    .kart-gorsel::after { /* hafif parlama */
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        right: -110px;
        top: -130px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .08);
        pointer-events: none;
    }

a.kart-gorsel:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 36px -18px rgba(13, 24, 48, .75);
}

.kart-gorsel.renk-1 {
    background: linear-gradient(135deg, #5B3FD9, #2A1B6B);
}

.kart-gorsel.renk-2 {
    background: linear-gradient(135deg, #0E8C98, #0B3B4A);
}

.kart-gorsel.renk-3 {
    background: linear-gradient(135deg, #B05A1C, #4A2208);
}

.kart-gorsel-ust {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin-bottom: .6rem;
}

    .kart-gorsel-ust strong {
        font-family: var(--font-baslik);
        font-size: 1.15rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.kart-cip {
    flex: none;
    width: 36px;
    height: 26px;
    border-radius: 6px;
    background: linear-gradient(135deg, #F4D58D, #C9963A);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}

.kart-gorsel-etiket {
    font-size: .78rem;
    color: rgba(255, 255, 255, .7);
}

.kart-gorsel-borc {
    font-family: var(--font-baslik);
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: .35rem;
}

.kart-gorsel-satir {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    font-size: .8rem;
    color: rgba(255, 255, 255, .85);
}

    .kart-gorsel-satir.soluk {
        color: rgba(255, 255, 255, .6);
    }

.kart-gorsel-alt {
    margin-top: auto;
    padding-top: .7rem;
    border-top: 1px solid rgba(255, 255, 255, .18);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
    font-size: .82rem;
    color: rgba(255, 255, 255, .85);
}

    .kart-gorsel-alt.acil span {
        color: #FFC4C6;
        font-weight: 600;
    }

.kart-gorsel.yeni {
    align-items: center;
    justify-content: center;
    gap: .6rem;
    background: transparent;
    color: var(--metin-soluk);
    border: 1.5px dashed var(--cizgi);
    box-shadow: none;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

    .kart-gorsel.yeni::after {
        display: none;
    }

    .kart-gorsel.yeni:hover {
        border-color: var(--altin);
        color: var(--metin);
    }

/* Limit doluluk cubugu */
.limit-cubuk {
    display: block;
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
    overflow: hidden;
}

    .limit-cubuk > span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: #6FE3B1;
    }

    .limit-cubuk.orta > span {
        background: #F4B356;
    }

    .limit-cubuk.yuksek > span {
        background: #FF8A8F;
    }

    .limit-cubuk.ozet-cubuk {
        grid-column: 1 / -1;
        margin: .35rem 0 .15rem;
        background: var(--lacivert-zemin);
    }

        .limit-cubuk.ozet-cubuk > span {
            background: var(--gelir);
        }

        .limit-cubuk.ozet-cubuk.orta > span {
            background: var(--altin);
        }

        .limit-cubuk.ozet-cubuk.yuksek > span {
            background: var(--gider);
        }

/* Borc ode penceresindeki hazir tutar butonlari */
.hizli-tutarlar {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin: -.4rem 0 1rem;
}

    .hizli-tutarlar:empty {
        display: none;
    }

.hizli-tutar {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .05rem;
    padding: .45rem .8rem;
    border: 1.5px solid var(--cizgi);
    border-radius: 10px;
    background: var(--yuzey);
    color: var(--metin-soluk);
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
}

    .hizli-tutar strong {
        color: var(--metin);
        font-size: .95rem;
    }

    .hizli-tutar:hover {
        border-color: var(--altin);
    }

/* Ekstreler */
.ekstre-listesi {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ekstre {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .8rem 0;
    border-bottom: 1px dashed var(--cizgi);
}

    .ekstre:last-child {
        border-bottom: none;
    }

    .ekstre .ikon-rozet {
        width: 2.4rem;
        height: 2.4rem;
        border-radius: 10px;
    }

.ekstre-bilgi {
    flex: 1;
    min-width: 0;
}

    .ekstre-bilgi small {
        display: block;
        color: var(--metin-soluk);
        font-size: .82rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.ekstre-eylemler {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex: none;
}

    .ekstre-eylemler .buton-kucuk {
        min-height: 34px;
        padding: .35rem .8rem;
    }

    .ekstre-eylemler .satir-sil {
        opacity: 1;
    }

input[type="file"] {
    padding: .55rem .7rem !important;
}

@media (max-width: 640px) {
    .ekstre {
        flex-wrap: wrap;
    }

    .ekstre-eylemler {
        width: 100%;
        padding-left: 3.3rem;
    }
}

.kart-gorselleri.kompakt {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

    .kart-gorselleri.kompakt .kart-gorsel {
        min-height: 170px;
    }

    .kart-gorselleri.kompakt .kart-gorsel-borc {
        font-size: 1.35rem;
    }

/* =====================================================================
   HARCAMALAR
   ===================================================================== */
.donem-secici {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
    padding: .35rem;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: 999px;
}

    .donem-secici strong {
        min-width: 9.5rem;
        text-align: center;
        font-family: var(--font-baslik);
        font-size: 1.05rem;
    }

    .donem-secici .arac-buton {
        border-radius: 50%;
        width: 36px;
        height: 36px;
    }

        .donem-secici .arac-buton:disabled {
            opacity: .35;
            cursor: default;
        }

.iki-sutun {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

    .iki-sutun > .bolum {
        margin-bottom: 1.5rem;
    }

.dagilim {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .95rem;
}

.dagilim-ust {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: .35rem;
}

.dagilim-ad {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    min-width: 0;
}

    .dagilim-ad small {
        font-weight: 400;
        color: var(--metin-soluk);
        font-size: .8rem;
        white-space: nowrap;
    }

.dagilim-ikon {
    color: var(--metin-soluk);
    display: inline-flex;
}

.dagilim-tutar {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    flex: none;
}

    .dagilim-tutar small {
        color: var(--metin-soluk);
        font-size: .82rem;
        min-width: 2.6rem;
        text-align: right;
    }

.dagilim-cubuk {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: var(--lacivert-zemin);
    overflow: hidden;
}

    .dagilim-cubuk > span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: var(--altin);
    }

    .dagilim-cubuk.renk-1 > span {
        background: var(--mor);
    }

    .dagilim-cubuk.renk-2 > span {
        background: var(--turkuaz);
    }

    .dagilim-cubuk.renk-3 > span {
        background: var(--turuncu);
    }

    .dagilim-cubuk.renk-4 > span {
        background: var(--mavi);
    }

    .dagilim-cubuk.renk-5 > span {
        background: var(--yesil);
    }

.kaynak-etiket {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

    .kaynak-etiket .ikon {
        color: var(--metin-soluk);
        flex: none;
    }

@media (max-width: 1000px) {
    .iki-sutun {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
}

/* =====================================================================
   TAKSITLER SAYFASI
   ===================================================================== */

/* ---------- Ust alan ---------- */
.taksit-sayfa .taksit-not {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    background: var(--kehribar-zemin);
    border-left: 4px solid var(--altin);
    border-radius: var(--yaricap-kucuk);
    padding: .95rem 1.15rem;
    margin: 0 0 1.75rem;
    font-size: .94rem;
    line-height: 1.5;
}

    .taksit-sayfa .taksit-not .ikon {
        flex: none;
        margin-top: .15rem;
        color: var(--altin-koyu);
    }

.taksit-ust {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.25rem;
    margin-bottom: 2rem;
}

    .taksit-ust .alan {
        flex: 1 1 260px;
        max-width: 380px;
        margin: 0;
    }

    .taksit-ust .buton {
        flex: none;
    }

/* ---------- Ozet kartlari ---------- */
.taksit-sayfa .ozet-kartlari.uclu {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.taksit-sayfa .ozet-kart {
    padding: 1.4rem 1.5rem;
    gap: .4rem .75rem;
}

    .taksit-sayfa .ozet-kart strong {
        margin: .15rem 0 .25rem;
    }

.taksit-sayfa .bolum {
    padding: 1.5rem 1.6rem 1.7rem;
}

@media (max-width: 1000px) {
    .taksit-sayfa .ozet-kartlari.uclu {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Pencere (ay gezinme) ---------- */
.taksit-pencere {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
    margin-bottom: 1.25rem;
}

    .taksit-pencere strong {
        font-family: var(--font-baslik);
        font-size: 1.02rem;
        margin-right: auto;
    }

/* ---------- Tablo ---------- */
.taksit-tablo {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    min-width: 1180px;
    font-size: .9rem;
}

    .taksit-tablo th,
    .taksit-tablo td {
        padding: .45rem .3rem;
        text-align: center;
        vertical-align: middle;
    }

    /* Ay basliklari */
    .taksit-tablo thead th {
        padding: .5rem .3rem .75rem;
        border-bottom: 2px solid var(--cizgi);
        position: relative;
    }

.ay-ad {
    display: block;
    font-weight: 700;
    font-size: .98rem;
    color: var(--metin);
}

.ay-yil {
    display: block;
    font-size: .74rem;
    font-weight: 500;
    color: var(--metin-soluk);
}

.ay-rozet {
    display: block;
    margin: 0 auto .2rem;
    width: fit-content;
    padding: .05rem .5rem;
    border-radius: 999px;
    background: var(--altin);
    color: #121A2C;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.taksit-tablo thead th.bu-ay {
    background: var(--altin-soluk);
    border-radius: 12px 12px 0 0;
}

    .taksit-tablo thead th.bu-ay .ay-ad {
        color: var(--altin-koyu);
    }

.taksit-tablo td.bu-ay {
    background: var(--altin-soluk);
}

/* Yil baslangicinda ince ayirac */
.taksit-tablo .yil-basi {
    border-left: 1px dashed var(--cizgi);
}

/* Satirlar arasi ince cizgi */
.taksit-tablo tbody tr + tr th,
.taksit-tablo tbody tr + tr td {
    border-top: 1px solid var(--cizgi);
}

/* Plan sutunu (sola yapisik) */
.taksit-tablo .plan-ad {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 250px;
    min-width: 250px;
    max-width: 250px;
    text-align: left;
    background: var(--yuzey);
    padding: .95rem 1.1rem .95rem 0;
    box-shadow: 10px 0 10px -10px rgba(18, 26, 44, .18);
}

.taksit-tablo thead .plan-ad {
    color: var(--metin-soluk);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
    vertical-align: bottom;
}

.plan-baslik {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .6rem;
}

    .plan-baslik strong {
        font-family: var(--font-baslik);
        font-size: 1.02rem;
        font-weight: 700;
        overflow-wrap: anywhere;
        color: var(--metin);
    }

.plan-sira {
    flex: none;
    font-size: .8rem;
    font-weight: 600;
    color: var(--metin-soluk);
}

.ilerleme {
    height: 6px;
    border-radius: 999px;
    background: var(--cizgi);
    overflow: hidden;
    margin: .6rem 0 .5rem;
}

    .ilerleme > span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: var(--gelir);
    }

.plan-donem {
    display: block;
    margin-top: .1rem;
    font-size: .78rem;
    color: var(--metin-soluk);
}

.plan-alt {
    font-size: .82rem;
    font-weight: 400;
    color: var(--metin-soluk);
}

    .plan-alt .tutar {
        color: var(--metin);
        font-weight: 600;
    }

/* Hucreler */
.hucre {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    width: 100%;
    min-width: 72px;
    height: 44px;
    padding: 0 .45rem;
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--metin);
    background: var(--yuzey);
    border: 1.5px solid var(--cizgi);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}

    .hucre:hover {
        border-color: var(--mavi);
        box-shadow: 0 0 0 3px var(--mavi-zemin);
    }

    .hucre svg {
        flex: none;
    }

    .hucre.odendi {
        background: var(--yesil-zemin);
        color: var(--yesil);
        border-color: transparent;
    }

    .hucre.gecikmis {
        background: var(--kirmizi-zemin);
        color: var(--kirmizi);
        border-color: transparent;
    }

    /* Otomatik odemede kart limiti yetmedi, borca eklenemedi */
    .hucre.bekliyor {
        background: var(--altin-soluk);
        color: var(--altin-koyu);
        border-color: var(--altin);
    }

.hucre-bos {
    display: block;
    height: 44px;
    position: relative;
}

    .hucre-bos::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 4px;
        height: 4px;
        margin: -2px 0 0 -2px;
        border-radius: 50%;
        background: var(--cizgi);
    }

/* Alt toplam bandi: koyu zemin, buyuk yazi; icinde bulunulan ay amber */
.taksit-sayfa {
    --toplam-zemin: var(--murekkep);
}

[data-tema="koyu"] .taksit-sayfa {
    --toplam-zemin: #20335E;
}

.taksit-tablo tfoot .satir-bosluk td {
    height: 16px;
    padding: 0;
    border: 0;
    background: none;
}

.taksit-tablo tfoot .satir-toplam th,
.taksit-tablo tfoot .satir-toplam td,
.taksit-tablo tfoot .satir-kalan th,
.taksit-tablo tfoot .satir-kalan td {
    background: var(--toplam-zemin);
    border: 0;
}

.taksit-tablo tfoot .satir-toplam th,
.taksit-tablo tfoot .satir-toplam td {
    padding-top: 1rem;
    padding-bottom: .2rem;
    color: #FFFFFF;
    font-family: var(--font-baslik);
    font-size: 1.05rem;
    font-weight: 800;
}

.taksit-tablo tfoot .satir-kalan th,
.taksit-tablo tfoot .satir-kalan td {
    padding-top: .1rem;
    padding-bottom: 1rem;
    color: #F4B356;
    font-size: .85rem;
    font-weight: 600;
}

.taksit-tablo tfoot .plan-ad {
    padding-left: 1.1rem;
    box-shadow: none;
}

.taksit-tablo tfoot .satir-toplam .plan-ad {
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.taksit-tablo tfoot .satir-kalan .plan-ad {
    font-size: .82rem;
    font-weight: 500;
    color: #AEB9D3;
}

/* Icinde bulunulan ay sutunu */
.taksit-tablo tfoot .satir-toplam td.bu-ay,
.taksit-tablo tfoot .satir-kalan td.bu-ay {
    background: var(--altin);
    color: #121A2C;
    border-radius: 0;
}

/* Yuvarlak koseler */
.taksit-tablo tfoot .satir-toplam .plan-ad {
    border-top-left-radius: 14px;
}

.taksit-tablo tfoot .satir-kalan .plan-ad {
    border-bottom-left-radius: 14px;
}

.taksit-tablo tfoot .satir-toplam td:last-child {
    border-top-right-radius: 14px;
}

.taksit-tablo tfoot .satir-kalan td:last-child {
    border-bottom-right-radius: 14px;
}

/* Plan islemleri (Duzenle / Plani sil) */
.plan-islemler {
    display: flex;
    gap: 1rem;
    margin-top: .45rem;
}

    .plan-islemler .buton-metin {
        font-size: .78rem;
        font-weight: 500;
        color: var(--metin-soluk);
    }

    .plan-islemler .plan-duzenle:hover {
        color: var(--mavi);
    }

    .plan-islemler .plan-sil:hover {
        color: var(--kirmizi);
    }

/* Renk aciklamasi */
.taksit-aciklama {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1.5rem;
    margin: 1.25rem 0 0;
    padding-top: 1rem;
    border-top: 1px dashed var(--cizgi);
    font-size: .85rem;
    color: var(--metin-soluk);
}

.renk-etiket {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.renk-kutu {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    background: var(--yuzey);
    border: 1.5px solid var(--cizgi);
}

    .renk-kutu.odendi {
        background: var(--yesil-zemin);
        border-color: var(--yesil);
    }

    .renk-kutu.gecikmis {
        background: var(--kirmizi-zemin);
        border-color: var(--kirmizi);
    }

    .renk-kutu.bekliyor {
        background: var(--altin-soluk);
        border-color: var(--altin);
    }

.renk-ipucu {
    margin-left: auto;
}

.duzenle-notlar {
    margin: .25rem 0 0;
    padding-left: 1.1rem;
    color: var(--metin-soluk);
    font-size: .85rem;
}

    .duzenle-notlar li + li {
        margin-top: .3rem;
    }

/* ---------- Pencereler (dialog) ---------- */
.dialog {
    border: 1px solid var(--cizgi);
    border-radius: var(--yaricap);
    background: var(--yuzey);
    color: var(--metin);
    padding: 0;
    width: min(480px, calc(100% - 2rem));
    box-shadow: var(--golge);
}

    .dialog::backdrop {
        background: rgba(13, 24, 48, .55);
    }

.dialog-ic {
    padding: 1.5rem 1.6rem 1.6rem;
}

    .dialog-ic h2 {
        font-size: 1.2rem;
    }

    .dialog-ic > p {
        color: var(--metin-soluk);
    }

.dialog-eylem {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 1.4rem;
}

.dialog-satirlar {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .35rem 1rem;
    margin: 0 0 1rem;
}

    .dialog-satirlar dt {
        color: var(--metin-soluk);
    }

    .dialog-satirlar dd {
        margin: 0;
        font-weight: 600;
        text-align: right;
    }

.dialog-tutar {
    border-top: 1px dashed var(--cizgi);
    padding-top: 1rem;
    margin-top: .5rem;
}

    .dialog-tutar .alan {
        margin-bottom: .6rem;
    }

/* Taksit pencerelerindeki cerceveli kirmizi buton (genel .buton-tehlike'yi bozmasin diye kapsamli) */
.dialog .buton-tehlike, .taksit-sayfa .buton-tehlike {
    background: var(--kirmizi-zemin);
    color: var(--kirmizi);
    border-color: var(--kirmizi);
}

    .dialog .buton-tehlike:hover:not(:disabled), .taksit-sayfa .buton-tehlike:hover:not(:disabled) {
        background: var(--kirmizi);
        color: #fff;
    }

@media (max-width: 640px) {
    .taksit-ust .alan {
        flex-basis: 100%;
        max-width: none;
    }

    .taksit-ust .buton {
        width: 100%;
    }
}

/* =====================================================================
   BORCLAR
   ===================================================================== */
.genel-borc td small {
    display: block;
    font-size: .8rem;
    color: var(--metin-soluk);
    font-weight: 400;
}

.genel-borc a.kaynak-etiket {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}

    .genel-borc a.kaynak-etiket:hover {
        text-decoration: underline;
    }

.genel-borc .kaynak-etiket {
    font-weight: 600;
}

.genel-borc tfoot .bilgi-satiri td {
    border-top: 1px dashed var(--cizgi);
    font-weight: 400;
    color: var(--metin-soluk);
}

.borc-kartlari {
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}

.borc-kart {
    gap: .3rem;
}

    .borc-kart.gecikmis {
        border-color: var(--gider);
    }

    .borc-kart .hesap-kart-ust .rozet {
        margin-left: auto;
        flex: none;
    }

.borc-etiket {
    color: var(--metin-soluk);
}

.rozet-kirmizi {
    background: var(--kirmizi-zemin);
    color: var(--gider);
}

.pay-cubuk.yesil span {
    background: var(--gelir);
}

.hesap-kart-alt .eksi {
    color: var(--gider);
    font-weight: 600;
}

.borc-eylemler {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    margin-top: .6rem;
    padding-top: .7rem;
    border-top: 1px solid var(--cizgi);
}

    .borc-eylemler .buton-kucuk {
        min-height: 34px;
        padding: .3rem .7rem;
        font-size: .88rem;
    }

    .borc-eylemler .satir-sil {
        margin-left: auto;
        opacity: 1;
    }

.borc-bos {
    grid-column: 1 / -1;
    margin: 0;
}

.borc-not {
    margin-top: 1rem;
}

.borc-kartlari .hesap-kart.yeni {
    min-height: 120px;
}

/* --- Harcama listesi: duzenle butonu --- */
.tablo .islem-hucre.iki-buton {
    width: 4.6rem;
    white-space: nowrap;
}

.satir-duzenle {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--metin-soluk);
    cursor: pointer;
    opacity: .55;
}

    .tablo tr:hover .satir-duzenle, .satir-duzenle:focus-visible {
        opacity: 1;
    }

    .satir-duzenle:hover {
        background: var(--lacivert-zemin);
        color: var(--metin);
    }

@media (hover: none) {
    .satir-duzenle {
        opacity: 1;
    }
}

.duzenleme-notu {
    margin-top: .5rem;
    padding: .6rem .8rem;
    border-radius: var(--yaricap-kucuk);
    background: var(--kagit);
    border: 1px dashed var(--cizgi);
}

/* --- Taksitler: genel gorunum --- */
.plan-baglanti {
    color: inherit;
    font-weight: 600;
    text-decoration: none;
}

    .plan-baglanti:hover {
        text-decoration: underline;
    }

.plan-ilerleme {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 7rem;
}

    .plan-ilerleme .pay-cubuk {
        flex: 1;
    }

    .plan-ilerleme small {
        color: var(--metin-soluk);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

.dagilim-detay {
    display: block;
    margin-top: .3rem;
    font-size: .78rem;
    color: var(--metin-soluk);
}

/* hidden ozniteligi, display veren siniflarin onune gecsin (genel gorunumde kart secimi gizli kalsin) */
.taksit-ust[hidden], .geri-baglanti[hidden] {
    display: none;
}

/* =====================================================================
   NAKIT + ALINAN / VERILEN BORCLAR
   ===================================================================== */
.nakit-kart {
    border-left: 4px solid var(--gelir);
}

.genel-borc tfoot .alacak-satiri td {
    border-top: 1px solid var(--cizgi);
    font-weight: 600;
}

.genel-borc tfoot .net-satiri td {
    font-weight: 700;
}

.etiket-metin {
    display: block;
    font-weight: 600;
    font-size: .92rem;
    margin-bottom: .4rem;
}

.yon-secimi {
    display: flex;
    width: 100%;
}

    .yon-secimi button {
        flex: 1;
        padding: .45rem .85rem;
    }

.borc-kart.verilen .pay-cubuk span {
    background: var(--turkuaz);
}

.borc-kart .kaynak-etiket .ikon {
    color: var(--metin-soluk);
}

/* hidden ozniteligi, display veren buton siniflarinin onune gecsin */
.buton[hidden], .hizli-eylem[hidden] {
    display: none;
}

/* =====================================================================
   YATIRIMLAR
   ===================================================================== */
.mesaj.mesaj-uyari {
    background: var(--altin-soluk);
    color: var(--metin);
    border-left-color: var(--altin);
}

    .mesaj.mesaj-uyari .buton-metin {
        font: inherit;
        font-weight: 600;
    }

.yatirim-kartlari .hesap-kart-bakiye {
    font-variant-numeric: tabular-nums;
}

.yatirim-kart .hesap-kart-alt .tutar {
    font-weight: 600;
}

.onizleme-kutusu {
    display: grid;
    gap: .35rem;
    margin: .25rem 0 .5rem;
    padding: .8rem 1rem;
    border-radius: var(--yaricap-kucuk);
    background: var(--kagit);
    border: 1px dashed var(--cizgi);
    font-size: .92rem;
}

    .onizleme-kutusu > div {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
    }

        .onizleme-kutusu > div span {
            color: var(--metin-soluk);
        }

    .onizleme-kutusu.hatali {
        background: var(--kirmizi-zemin);
        border-color: var(--gider);
        color: var(--gider);
    }

/* --- Yatirim gruplari ve tur listesi --- */
.yatirim-grubu + .yatirim-grubu {
    margin-top: 1.4rem;
}

.yatirim-grup-baslik {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: .7rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--cizgi);
    font-weight: 600;
    color: var(--metin-soluk);
}

    .yatirim-grup-baslik strong {
        color: var(--metin);
    }

.tur-grubu {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: .5rem;
    align-items: baseline;
    margin-bottom: .5rem;
    font-size: .92rem;
}

    .tur-grubu > span {
        display: flex;
        flex-wrap: wrap;
        gap: .3rem;
    }

.tur-ozel-baslik {
    margin-top: 1rem;
}

/* --- Yatirim penceresi: grup sekmeleri (uzun liste yerine) --- */
.tur-sekmeleri {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1rem;
}

    .tur-sekmeleri button {
        border: 1.5px solid var(--cizgi);
        background: var(--yuzey);
        color: var(--metin-soluk);
        font: inherit;
        font-size: .88rem;
        font-weight: 500;
        padding: .35rem .85rem;
        border-radius: 999px;
        cursor: pointer;
    }

        .tur-sekmeleri button[aria-pressed="true"] {
            background: var(--murekkep);
            border-color: var(--murekkep);
            color: #FFFFFF;
        }

[data-tema="koyu"] .tur-sekmeleri button[aria-pressed="true"] {
    background: var(--altin);
    border-color: var(--altin);
    color: #121A2C;
}

.tur-sekmeleri .tur-ekle {
    border-style: dashed;
    color: var(--altin-koyu);
    margin-left: auto;
}

.onizleme-kutusu[hidden] {
    display: none;
}

.tur-sekmeleri button {
    padding: .3rem .7rem;
}

.kucuk-secim {
    min-height: 38px;
    padding: .35rem 2rem .35rem .75rem;
    font: inherit;
    font-size: .92rem;
    color: var(--metin);
    background-color: var(--yuzey);
    border: 1.5px solid var(--cizgi);
    border-radius: 999px;
}

.dagilim + .pencere-not {
    margin-top: 1rem;
}

/* =====================================================================
   OTOMATIK ODEMELER (ana sayfa ve abonelikler uyari kutulari)
   ===================================================================== */
.oto-kutu {
    padding: .9rem 1.1rem;
    border-radius: var(--yaricap-kucuk);
    border-left: 4px solid;
    margin-bottom: 1rem;
    font-size: .95rem;
}

.oto-hata {
    background: var(--kirmizi-zemin);
    border-color: var(--gider);
}

.oto-uyari {
    background: var(--altin-soluk);
    border-color: var(--altin);
}

.oto-liste {
    list-style: none;
    margin: .6rem 0 .3rem;
    padding: 0;
}

    .oto-liste li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: .5rem 1rem;
        flex-wrap: wrap;
        padding: .55rem 0;
        border-top: 1px dashed var(--cizgi);
    }

        .oto-liste li:first-child {
            border-top: none;
        }

.oto-bilgi {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

    .oto-bilgi small {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        color: var(--metin-soluk);
    }

.oto-eylemler {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

    .oto-eylemler .buton-kucuk {
        min-height: 34px;
        padding: .3rem .8rem;
    }

.oto-not {
    color: var(--metin-soluk);
}

.rozet-otomatik {
    background: var(--yesil-zemin, var(--lacivert-zemin));
    color: var(--gelir);
}

.kucuk-baglanti {
    display: inline-block;
    margin-top: .2rem;
    font-size: .8rem;
}

/* =====================================================================
   TAKSIT OTOMATIK ODEME (ekle / duzenle formu, plan satiri)
   ===================================================================== */
.taksit-oto-alanlar {
    margin-top: .5rem;
    padding: .75rem .9rem .5rem;
    border: 1px dashed var(--cizgi);
    border-radius: var(--yaricap-kucuk);
}

.taksit-oto-not {
    margin: 0 0 .25rem;
    font-size: .85rem;
    color: var(--metin-soluk);
}

.plan-oto {
    display: block;
    margin-top: .2rem;
    font-size: .75rem;
    color: var(--gelir);
}

/* =====================================================================
   TAKVIM (ana sayfa kutusu ve takvim.html)
   Kaynak renkleri: --tk (koyu) ve --tk-zemin (yumusak)
   ===================================================================== */
.tk-etkinlik {
    --tk: var(--mor);
    --tk-zemin: var(--mor-zemin);
}

.tk-kart {
    --tk: var(--mavi);
    --tk-zemin: var(--mavi-zemin);
}

.tk-kesim {
    --tk: var(--turkuaz);
    --tk-zemin: var(--turkuaz-zemin);
}

.tk-taksit {
    --tk: var(--turuncu);
    --tk-zemin: var(--turuncu-zemin);
}

.tk-abonelik {
    --tk: var(--kehribar);
    --tk-zemin: var(--kehribar-zemin);
}

.tk-borc {
    --tk: var(--kirmizi);
    --tk-zemin: var(--kirmizi-zemin);
}

.tk-alacak {
    --tk: var(--yesil);
    --tk-zemin: var(--yesil-zemin);
}

.tk-nokta {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tk, var(--metin-soluk));
    flex: none;
}

/* ---------- Ay basligi ---------- */
.tk-ay-ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .6rem;
}

    .tk-ay-ust strong,
    .tk-ay-ust h2 {
        margin: 0;
        font-family: var(--font-baslik);
        font-size: 1.05rem;
        text-align: center;
        flex: 1;
    }

    .tk-ay-ust.buyuk {
        margin: 0;
        min-width: 260px;
    }

        .tk-ay-ust.buyuk h2 {
            font-size: 1.35rem;
        }

.tk-ok {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: none;
    border: 1.5px solid var(--cizgi);
    border-radius: 10px;
    background: var(--yuzey);
    color: var(--metin);
    cursor: pointer;
}

    .tk-ok:hover {
        border-color: var(--mavi);
    }

/* ---------- Izgara ---------- */
.tk-izgara {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.tk-gun-adi {
    padding: .2rem 0 .35rem;
    font-size: .75rem;
    font-weight: 600;
    text-align: center;
    color: var(--metin-soluk);
}

.tk-gun {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    min-width: 0;
    min-height: 104px;
    padding: .35rem .35rem .4rem;
    font: inherit;
    text-align: left;
    color: var(--metin);
    background: var(--yuzey);
    border: 1.5px solid var(--cizgi);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

    .tk-gun:hover {
        border-color: var(--mavi);
    }

    .tk-gun.diger-ay {
        background: var(--kagit);
        color: var(--metin-soluk);
    }

        .tk-gun.diger-ay .tk-cipler {
            opacity: .6;
        }

    .tk-gun.secili {
        border-color: var(--mavi);
        box-shadow: 0 0 0 3px var(--mavi-zemin);
    }

.tk-sayi {
    align-self: flex-start;
    min-width: 26px;
    height: 26px;
    padding: 0 .3rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.tk-gun.bugun .tk-sayi {
    background: var(--birincil-zemin);
    color: var(--birincil-metin);
}

.tk-gun.gecikmis .tk-sayi {
    box-shadow: inset 0 0 0 2px var(--kirmizi);
}

.tk-cipler {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tk-cip {
    display: block;
    padding: 1px 6px;
    border-radius: 6px;
    font-size: .72rem;
    line-height: 1.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--tk-zemin, var(--lacivert-zemin));
    color: var(--tk, var(--metin));
    border-left: 3px solid var(--tk, var(--metin-soluk));
}

    .tk-cip b {
        font-weight: 600;
    }

    .tk-cip.tamam {
        opacity: .55;
        text-decoration: line-through;
    }

    .tk-cip.gecikmis {
        background: var(--kirmizi-zemin);
        color: var(--kirmizi);
        border-left-color: var(--kirmizi);
    }

.tk-fazla {
    font-size: .7rem;
    color: var(--metin-soluk);
    padding-left: 4px;
}

.tk-noktalar {
    display: none;
    gap: 3px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Kompakt (ana sayfa): sadece gun numarasi + renkli noktalar */
.tk-izgara.kompakt {
    gap: 2px;
}

    .tk-izgara.kompakt .tk-gun {
        min-height: 46px;
        align-items: center;
        padding: .2rem;
        border-color: transparent;
        background: transparent;
    }

        .tk-izgara.kompakt .tk-gun:hover {
            border-color: var(--cizgi);
        }

        .tk-izgara.kompakt .tk-gun.secili {
            border-color: var(--mavi);
        }

        .tk-izgara.kompakt .tk-gun.diger-ay {
            opacity: .45;
        }

    .tk-izgara.kompakt .tk-sayi {
        align-self: center;
    }

    .tk-izgara.kompakt .tk-noktalar {
        display: flex;
    }

/* ---------- Liste ---------- */
.tk-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.tk-liste-gun {
    margin: 1rem 0 .45rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--metin-soluk);
    text-transform: capitalize;
}

    .tk-liste-gun:first-child {
        margin-top: 0;
    }

    .tk-liste-gun.bugun {
        color: var(--metin);
    }

.tk-satir {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    padding: .55rem .7rem;
    font: inherit;
    text-align: left;
    color: var(--metin);
    text-decoration: none;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-left: 4px solid var(--tk, var(--metin-soluk));
    border-radius: var(--yaricap-kucuk);
}

a.tk-satir:hover,
button.tk-satir:hover {
    border-color: var(--tk, var(--mavi));
    cursor: pointer;
}

.tk-satir.tamam {
    opacity: .6;
}

    .tk-satir.tamam strong {
        text-decoration: line-through;
    }

.tk-satir.gecikmis {
    background: var(--kirmizi-zemin);
}

.tk-satir-ikon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 8px;
    background: var(--tk-zemin, var(--lacivert-zemin));
    color: var(--tk, var(--metin));
}

.tk-satir-bilgi {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
    flex: 1;
}

    .tk-satir-bilgi strong {
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tk-satir-bilgi small {
        color: var(--metin-soluk);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.tk-zil {
    display: inline-flex;
    margin-left: .35rem;
    color: var(--altin-koyu);
    vertical-align: middle;
}

.tk-satir-sag {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .1rem;
    flex: none;
    text-align: right;
}

    .tk-satir-sag .tutar {
        font-weight: 600;
    }

.tk-durum {
    font-size: .75rem;
    color: var(--metin-soluk);
}

.tk-satir.gecikmis .tk-durum {
    color: var(--kirmizi);
    font-weight: 600;
}

/* ---------- Ana sayfa kutusu ---------- */
.tk-bolum-eylem {
    display: inline-flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.tk-pano {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.tk-pano-liste-ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .6rem;
}

    .tk-pano-liste-ust h2,
    .tk-pano-liste-ust h3 {
        margin: 0;
        font-size: 1rem;
        text-transform: capitalize;
    }

/* ---------- Takvim sayfasi ---------- */
.tk-arac {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: .9rem;
}

    .tk-arac .buton svg {
        margin-right: .35rem;
    }

.tk-arac-bosluk {
    flex: 1;
}

.tk-filtreler {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-bottom: 1rem;
}

.tk-filtre {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .75rem;
    font: inherit;
    font-size: .85rem;
    color: var(--metin);
    background: var(--tk-zemin, var(--yuzey));
    border: 1.5px solid var(--tk, var(--cizgi));
    border-radius: 999px;
    cursor: pointer;
}

    .tk-filtre[aria-pressed="false"] {
        background: var(--yuzey);
        border-color: var(--cizgi);
        color: var(--metin-soluk);
        text-decoration: line-through;
    }

        .tk-filtre[aria-pressed="false"] .tk-nokta {
            opacity: .35;
        }

.tk-sayfa-duzen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1.25rem;
    align-items: start;
}

    .tk-sayfa-duzen > .bolum {
        margin-bottom: 0;
    }

.tk-gun-panel {
    position: sticky;
    top: 1rem;
}

/* ---------- Pencereler ---------- */
.pencere.tk-pencere {
    width: min(520px, calc(100% - 2rem));
    overflow-y: auto;
}

.alan textarea {
    width: 100%;
    padding: .65rem .9rem;
    font: inherit;
    color: var(--metin);
    background: var(--yuzey);
    border: 1.5px solid var(--cizgi);
    border-radius: var(--yaricap-kucuk);
    resize: vertical;
}

    .alan textarea:focus {
        outline: none;
        border-color: var(--altin);
        box-shadow: 0 0 0 4px var(--altin-soluk);
    }

.tk-ayar-liste {
    list-style: none;
    margin: .75rem 0;
    padding: 0;
}

.tk-ayar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .6rem 0;
    border-top: 1px solid var(--cizgi);
}

    .tk-ayar:first-child {
        border-top: none;
    }

    .tk-ayar .onay-kutusu {
        align-items: flex-start;
        margin: 0;
        min-width: 0;
    }

        .tk-ayar .onay-kutusu > span {
            display: grid;
            grid-template-columns: auto 1fr;
            column-gap: .45rem;
            align-items: center;
        }

        .tk-ayar .onay-kutusu small {
            grid-column: 2;
            color: var(--metin-soluk);
            font-size: .8rem;
        }

    .tk-ayar select {
        flex: none;
        max-width: 150px;
        padding: .4rem .5rem;
        font: inherit;
        font-size: .85rem;
        color: var(--metin);
        background: var(--yuzey);
        border: 1.5px solid var(--cizgi);
        border-radius: var(--yaricap-kucuk);
    }

.tk-ayar-not {
    flex: none;
    max-width: 150px;
    font-size: .75rem;
    color: var(--metin-soluk);
    text-align: right;
}

.tk-hatirlatma-kutu {
    background: var(--mor-zemin);
    border-color: var(--mor);
}

    .tk-hatirlatma-kutu > strong {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
    }

/* ---------- Dar ekran ---------- */
@media (max-width: 1100px) {
    .tk-sayfa-duzen {
        grid-template-columns: minmax(0, 1fr);
    }

    .tk-gun-panel {
        position: static;
    }
}

@media (max-width: 900px) {
    .tk-pano {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    /* Buyuk izgarada cipler yerine noktalar */
    .tk-gun {
        min-height: 54px;
        align-items: center;
        padding: .2rem;
    }

    .tk-sayi {
        align-self: center;
    }

    .tk-cipler {
        display: none;
    }

    .tk-izgara .tk-noktalar {
        display: flex;
    }

    .tk-ay-ust.buyuk {
        min-width: 0;
        flex: 1 1 100%;
    }

    .tk-ayar {
        flex-wrap: wrap;
    }

        .tk-ayar select {
            max-width: none;
            width: 100%;
        }
}

/* =====================================================================
   HEDEFLER (hedefler.html + ana sayfa kutusu)
   Ilerleme halkasi kehribar; hedefe ulasinca nane yesiline doner.
   Havuz bileseni: nakit mavi, altin kehribar, gumus turkuaz, doviz yesil, diger mor.
   ===================================================================== */

.hedef-kartlari {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

    .hedef-kartlari > .bos-durum {
        grid-column: 1 / -1;
    }

.hedef-kart {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.15rem 1.2rem 1.1rem;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--yaricap);
}

    .hedef-kart.ulasti {
        border-color: var(--gelir);
    }

.hedef-kart-ust {
    display: flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

    .hedef-kart-ust:hover .hedef-ad {
        text-decoration: underline;
        text-decoration-color: var(--altin);
        text-underline-offset: 3px;
    }

.hedef-ikon {
    width: 2.6rem;
    height: 2.6rem;
    flex: none;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    background: var(--altin-soluk);
    font-size: 1.35rem;
    line-height: 1;
}

    .hedef-ikon.kucuk {
        width: 2.2rem;
        height: 2.2rem;
        font-size: 1.1rem;
        border-radius: 10px;
    }

.hedef-ad {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-family: var(--font-baslik);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
}

    .hedef-ad small {
        font-family: var(--font-govde);
        font-size: .8rem;
        font-weight: 400;
        color: var(--metin-soluk);
        margin-top: .15rem;
    }

        .hedef-ad small.eksi {
            color: var(--gider);
        }

.hedef-govde {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.1rem;
    align-items: center;
}

.hedef-rakamlar {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    font-size: .85rem;
    color: var(--metin-soluk);
}

    .hedef-rakamlar strong {
        font-family: var(--font-baslik);
        font-size: 1.45rem;
        font-weight: 700;
        color: var(--metin);
        line-height: 1.15;
        margin-bottom: .2rem;
    }

    .hedef-rakamlar span strong {
        font-family: var(--font-govde);
        font-size: inherit;
        font-weight: 600;
        margin: 0;
    }

    .hedef-rakamlar .arti {
        color: var(--gelir);
        font-weight: 600;
    }

.hedef-etiket {
    font-size: .8rem;
}

.hedef-havuz {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.hedef-eylemler {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin-top: auto;
}

    .hedef-eylemler a.buton {
        text-decoration: none;
    }

.hedef-yeni {
    min-height: 260px;
}

.hedef-not {
    margin: -.5rem 0 1.5rem;
}

/* ---------------- Ilerleme halkasi ---------------- */

.halka {
    --boyut: 96px;
    position: relative;
    display: inline-grid;
    place-items: center;
    width: var(--boyut);
    height: var(--boyut);
    flex: none;
}

    .halka svg {
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
    }

    .halka circle {
        fill: none;
        stroke-width: 9;
    }

.halka-iz {
    stroke: var(--lacivert-zemin);
}

.halka-dolu {
    stroke: var(--altin);
    stroke-linecap: round;
}

.halka.tamam .halka-dolu {
    stroke: var(--gelir);
}

.halka-metin {
    position: absolute;
    font-family: var(--font-baslik);
    font-weight: 800;
    font-size: calc(var(--boyut) * .22);
    letter-spacing: -0.02em;
}

@media (prefers-reduced-motion: no-preference) {
    .halka-dolu {
        animation: halka-dol .9s cubic-bezier(.2, .7, .2, 1) both;
    }

    @keyframes halka-dol {
        from {
            stroke-dashoffset: 263.89;
        }
    }
}

/* ---------------- Havuz bileseni ---------------- */

.bilesim {
    display: flex;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--lacivert-zemin);
    gap: 2px;
}

    .bilesim span {
        display: block;
        height: 100%;
        min-width: 3px;
    }

.bilesim-lejant {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .9rem;
    font-size: .8rem;
    color: var(--metin-soluk);
}

    .bilesim-lejant li {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
    }

.nokta {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    flex: none;
}

.bilesim-bos {
    margin: 0;
    font-size: .82rem;
    color: var(--metin-soluk);
}

.r-nakit {
    background: var(--mavi);
}

.r-kehribar {
    background: var(--kehribar);
}

.r-turkuaz {
    background: var(--turkuaz);
}

.r-yesil {
    background: var(--yesil);
}

.r-mor {
    background: var(--mor);
}

/* ---------------- Tek hedef sahnesi ---------------- */

.hedef-sahne {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.25rem 2rem;
    align-items: center;
}

.sahne-bilgi {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    align-items: flex-start;
}

    .sahne-bilgi .hedef-havuz {
        width: 100%;
        max-width: 520px;
    }

    .sahne-bilgi .pencere-not {
        margin: 0;
    }

.sahne-rakamlar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .6rem 1.5rem;
    margin: 0;
    width: 100%;
}

    .sahne-rakamlar dt {
        font-size: .8rem;
        color: var(--metin-soluk);
    }

    .sahne-rakamlar dd {
        margin: 0;
        font-family: var(--font-baslik);
        font-size: 1.15rem;
        font-weight: 700;
    }

    .sahne-rakamlar div:first-child dd {
        font-size: 1.6rem;
    }

.sahne-eylemler {
    grid-column: 1 / -1;
    padding-top: 1rem;
    border-top: 1px solid var(--cizgi);
}

.rozet-yesil {
    background: var(--yesil-zemin);
    color: var(--gelir);
}

@media (max-width: 640px) {
    .hedef-sahne {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .sahne-bilgi {
        width: 100%;
    }
}

/* ---------------- Pencereler ---------------- */

.ikon-secici {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

    .ikon-secici button {
        width: 2.5rem;
        height: 2.5rem;
        display: inline-grid;
        place-items: center;
        font-size: 1.25rem;
        line-height: 1;
        border: 1.5px solid var(--cizgi);
        border-radius: 10px;
        background: var(--yuzey);
        cursor: pointer;
    }

        .ikon-secici button[aria-pressed="true"] {
            border-color: var(--altin);
            background: var(--altin-soluk);
        }

.bosalt-liste {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

    .bosalt-liste li {
        display: flex;
        align-items: center;
        gap: .6rem;
        padding: .6rem .8rem;
        border-radius: var(--yaricap-kucuk);
        background: var(--kagit);
    }

/* ---------------- Ana sayfa kutusu ---------------- */

.ana-hedef-genel {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    margin-bottom: 1rem;
}

    .ana-hedef-genel p {
        margin: 0;
        font-size: .9rem;
        color: var(--metin-soluk);
    }

        .ana-hedef-genel p strong {
            color: var(--metin);
        }

.ana-hedefler {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: .8rem;
}

.ana-hedef {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .75rem .9rem;
    border: 1px solid var(--cizgi);
    border-radius: var(--yaricap);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s;
}

    .ana-hedef:hover {
        border-color: var(--altin);
    }

.ana-hedef-bilgi {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: .1rem;
}

    .ana-hedef-bilgi strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ana-hedef-bilgi small {
        color: var(--metin-soluk);
        font-size: .8rem;
    }

/* =====================================================================
   KREDILER (krediler.html, ana sayfa kutusu)
   Kartlar ve tek kredi sahnesi Hedefler'in siniflarini kullanir
   (hedef-kartlari, hedef-kart, halka, hedef-sahne, sahne-*); burada sadece ekler var.
   ===================================================================== */
.pencere.pencere-genis {
    width: min(680px, calc(100% - 2rem));
}

.pencere-ayrac {
    border: none;
    border-top: 1px solid var(--cizgi);
    margin: 1rem 0;
}

.mesaj-uyari {
    background: var(--kehribar-zemin);
    border-color: var(--kehribar);
}

.kredi-kart.gecikti {
    border-color: var(--gider);
}

.kredi-siradaki {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem;
    padding: .7rem .85rem;
    border-radius: var(--yaricap-kucuk);
    background: var(--lacivert-zemin);
    font-size: .88rem;
}

    .kredi-siradaki > span:first-child {
        display: flex;
        flex-direction: column;
        gap: .1rem;
    }

    .kredi-siradaki small {
        color: var(--metin-soluk);
        font-size: .78rem;
    }

    .kredi-siradaki strong {
        font-family: var(--font-baslik);
        font-size: 1.1rem;
    }

    .kredi-siradaki.gecikti {
        background: var(--kirmizi-zemin);
    }

    .kredi-siradaki .eksi,
    .kredi-kart .eksi,
    .pencere-not.eksi {
        color: var(--gider);
        font-weight: 600;
    }

.kredi-rozetler {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

    .kredi-rozetler:empty {
        display: none;
    }

.kredi-plan-ipucu {
    font-size: .85rem;
    color: var(--metin-soluk);
}

/* Odeme plani satir durumlari */
.kredi-plan tr.plan-odendi td {
    color: var(--metin-soluk);
}

.kredi-plan tr.plan-iptal td {
    color: var(--metin-soluk);
    text-decoration: line-through;
}

    .kredi-plan tr.plan-iptal td:last-child,
    .kredi-plan tr.plan-iptal td:nth-last-child(2) {
        text-decoration: none;
    }

.kredi-plan tr.plan-gecikmis td {
    background: var(--kirmizi-zemin);
}

.kredi-plan tr.plan-siradaki td {
    background: var(--altin-soluk);
}

.kredi-plan td small {
    display: block;
    color: var(--metin-soluk);
    font-size: .78rem;
}

/* Kredi ekleme penceresindeki plan onizlemesi */
.kredi-onizleme {
    margin: 1rem 0 .5rem;
    padding: 1rem;
    border: 1px solid var(--cizgi);
    border-radius: var(--yaricap);
    background: var(--kagit);
}

    .kredi-onizleme details {
        margin-top: .75rem;
    }

    .kredi-onizleme summary {
        cursor: pointer;
        font-weight: 600;
        font-size: .9rem;
    }

    .kredi-onizleme .tablo-kapsayici {
        max-height: 320px;
        overflow: auto;
        margin-top: .5rem;
    }

.kredi-onizleme-ozet,
.kredi-ode-ozet {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .5rem 1.25rem;
    margin: 0 0 .75rem;
}

    .kredi-onizleme-ozet dt,
    .kredi-ode-ozet dt {
        font-size: .78rem;
        color: var(--metin-soluk);
    }

    .kredi-onizleme-ozet dd,
    .kredi-ode-ozet dd {
        margin: 0;
        font-family: var(--font-baslik);
        font-weight: 700;
    }

/* Kullan penceresi: her satir "nereye / hangisi / tutar / sil" */
.kullanim-satirlari {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: .5rem 0;
}

.kullanim-satir {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1fr) auto;
    gap: .5rem;
    align-items: end;
}

    .kullanim-satir .alan {
        margin: 0;
    }

    .kullanim-satir .satir-sil {
        margin-bottom: .45rem;
    }

@media (max-width: 640px) {
    .kullanim-satir {
        grid-template-columns: 1fr 1fr;
        padding-bottom: .5rem;
        border-bottom: 1px dashed var(--cizgi);
    }
}

/* Ana sayfa kredi kutusu */
.ana-krediler {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: .75rem;
}

.ana-kredi {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .8rem .9rem;
    border: 1px solid var(--cizgi);
    border-radius: var(--yaricap);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s;
}

    .ana-kredi:hover {
        border-color: var(--altin);
    }

    .ana-kredi.gecikti {
        border-color: var(--gider);
    }

    .ana-kredi small {
        color: var(--metin-soluk);
        font-size: .8rem;
    }

.ana-kredi-ust {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
}

    .ana-kredi-ust strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* Takvim: kredi taksitleri */
.tk-kredi {
    --tk: var(--lacivert);
    --tk-zemin: var(--lacivert-zemin);
}

/* Takvim: arac tarihleri (muayene, sigorta, kasko, bakim). Not: .tk-arac takvimin arac cubugu, bu degil */
.tk-tasit {
    --tk: var(--pembe);
    --tk-zemin: var(--pembe-zemin);
}

/* Pencere icinde bolum basligi (orn. Araclarim > arac formu > "Takvim tarihleri") */
.pencere-ara-baslik {
    margin: .3rem 0 .8rem;
    padding-top: .9rem;
    border-top: 1px solid var(--cizgi);
    font-size: .95rem;
    font-weight: 600;
}

/* =====================================================================
   RAPORLAR (raporlar.html) ve ana sayfadaki "bu ay ve gecen ay" kutusu
   Grafikler satir ici SVG / CSS (app.js > Grafik). Renkler tema degiskenlerinden
   gelir; acik / koyu temada kendiliginden uyar. Siniflar "rp-" ile baslar.
   ===================================================================== */

/* --- Donem secici --- */
.rp-donem {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1rem;
    align-items: center;
    margin-bottom: .6rem;
}

    .rp-donem .segment {
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }

        .rp-donem .segment::-webkit-scrollbar {
            display: none;
        }

        .rp-donem .segment button {
            flex: none;
            white-space: nowrap;
        }

.rp-ozel {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

    .rp-ozel[hidden] {
        display: none;
    }

    .rp-ozel label {
        font-size: .88rem;
        color: var(--metin-soluk);
    }

    .rp-ozel input[type="date"] {
        min-height: 38px;
        padding: .3rem .75rem;
        font: inherit;
        font-size: .92rem;
        color: var(--metin);
        background: var(--yuzey);
        border: 1.5px solid var(--cizgi);
        border-radius: 999px;
    }

.rp-donem-bilgi {
    color: var(--metin-soluk);
    font-size: .88rem;
    margin: 0 0 1.25rem;
}

/* --- Sekmeler: mobilde tek satirda kayar --- */
.rp-sekmeler {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: .3rem;
    scrollbar-width: thin;
}

    .rp-sekmeler button {
        flex: none;
        white-space: nowrap;
    }

/* --- Yerlesim --- */
.rp-ikili {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 1.5rem;
    align-items: start;
}

.rp-alt-baslik {
    font-family: var(--font-govde);
    font-size: 1rem;
    font-weight: 600;
    margin: 1.5rem 0 .75rem;
}

.bolum > .rp-alt-baslik:first-child {
    margin-top: 0;
}

.rp-not {
    font-size: .85rem;
    color: var(--metin-soluk);
    margin: .9rem 0 0;
}

.rp-uyari {
    background: var(--kehribar-zemin);
    border-left: 4px solid var(--kehribar);
    border-radius: var(--yaricap-kucuk);
    padding: .7rem .95rem;
    font-size: .9rem;
    margin: 0 0 1rem;
}

.rp-yukleniyor {
    min-height: 120px;
}

/* --- Kucuk ozet kutulari --- */
.rp-mini-kartlar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .8rem;
    margin-bottom: 1rem;
}

.rp-mini {
    border: 1px solid var(--cizgi);
    border-radius: var(--yaricap-kucuk);
    padding: .8rem 1rem;
    min-width: 0;
}

    .rp-mini > span {
        display: block;
        color: var(--metin-soluk);
        font-size: .85rem;
    }

    .rp-mini strong {
        display: block;
        font-family: var(--font-baslik);
        font-size: 1.3rem;
        font-weight: 700;
        margin: .1rem 0;
    }

    .rp-mini small {
        display: block;
        color: var(--metin-soluk);
        font-size: .8rem;
    }

/* --- Degisim rozeti (onceki doneme gore) --- */
.rp-degisim {
    display: inline-block;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

    .rp-degisim.iyi {
        color: var(--gelir);
    }

    .rp-degisim.kotu {
        color: var(--gider);
    }

    .rp-degisim.notr {
        color: var(--metin-soluk);
    }

.ozet-kart.vurgu .rp-degisim.iyi {
    color: #6FE0B2;
}

.ozet-kart.vurgu .rp-degisim.kotu {
    color: #FF9EA2;
}

/* --- SVG grafikler --- */
.rp-grafik {
    width: 100%;
    overflow-x: auto;
    margin-bottom: .5rem;
}

    .rp-grafik svg {
        display: block;
        width: 100%;
        height: auto;
        margin: 0 auto;
    }

    .rp-grafik text {
        fill: var(--metin-soluk);
        font-family: var(--font-govde);
        font-size: 12px;
        font-variant-numeric: tabular-nums;
    }

    .rp-grafik .rp-eksen {
        stroke: var(--metin-soluk);
        stroke-opacity: .45;
        stroke-width: 1;
    }

    .rp-grafik .rp-izgara {
        stroke: var(--cizgi);
        stroke-dasharray: 3 4;
        stroke-width: 1;
    }

    .rp-grafik .rp-cizgi {
        fill: none;
        stroke-width: 2.5;
        stroke-linejoin: round;
        stroke-linecap: round;
    }

/* --- Renk aciklamasi --- */
.rp-lejant {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.1rem;
    margin: .5rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .85rem;
    color: var(--metin-soluk);
}

    .rp-lejant li {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
    }

    .rp-lejant .tutar {
        color: var(--metin);
        font-weight: 600;
    }

.rp-nokta {
    display: inline-block;
    flex: none;
    width: .75rem;
    height: .75rem;
    border-radius: 3px;
    background: currentColor;
}

/* --- Halka grafik + liste --- */
.rp-halka-duzen {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.rp-halka svg {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
    margin: 0 auto;
}

.rp-halka .rp-halka-baslik {
    fill: var(--metin-soluk);
    font-family: var(--font-govde);
    font-size: 10px;
}

.rp-halka .rp-halka-deger {
    fill: var(--metin);
    font-family: var(--font-baslik);
    font-size: 15px;
    font-weight: 700;
}

/* --- Yatay cubuk listesi --- */
.rp-cubuklar {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .15rem;
}

.rp-cubuk {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .25rem .75rem;
    align-items: baseline;
    width: 100%;
    padding: .55rem .6rem;
    border-radius: var(--yaricap-kucuk);
}

button.rp-cubuk {
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

    button.rp-cubuk:hover {
        background: var(--kagit);
    }

.rp-cubuk-ad {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    font-weight: 500;
}

    .rp-cubuk-ad > span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.rp-cubuk-deger {
    text-align: right;
    font-weight: 600;
}

.rp-cubuk-alt {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: .2rem .6rem;
    color: var(--metin-soluk);
    font-size: .8rem;
}

.rp-cubuk-iz {
    grid-column: 1 / -1;
    height: 8px;
    border-radius: 999px;
    background: var(--kagit);
    overflow: hidden;
}

    .rp-cubuk-iz > span {
        display: block;
        height: 100%;
        min-width: 2px;
        border-radius: 999px;
        background: currentColor;
    }

/* --- Tek satir yigin cubuk (orn. banka / nakit / kart) --- */
.rp-yigin {
    display: flex;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--kagit);
    margin-bottom: .5rem;
}

    .rp-yigin > span {
        display: block;
        height: 100%;
        background: currentColor;
    }

/* --- Tablolar --- */
.tablo tr.rp-toplam td {
    font-weight: 600;
    border-top: 1px solid var(--cizgi);
    border-bottom: none;
}

.tablo a.rp-baglanti {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
}

    .tablo a.rp-baglanti:hover {
        text-decoration: underline;
    }

/* --- Kategori harcamalari penceresi --- */
.rp-pencere {
    width: min(680px, calc(100% - 2rem));
}

.rp-pencere-liste {
    max-height: min(60vh, 520px);
    overflow-y: auto;
}

/* --- Ana sayfa: bu ay ve gecen ay --- */
.rp-kiyaslar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.rp-kiyas {
    border: 1px solid var(--cizgi);
    border-radius: var(--yaricap-kucuk);
    padding: .85rem 1rem;
    min-width: 0;
}

    .rp-kiyas > span {
        display: block;
        color: var(--metin-soluk);
        font-size: .88rem;
    }

    .rp-kiyas strong {
        display: block;
        font-family: var(--font-baslik);
        font-size: 1.35rem;
        font-weight: 700;
        margin: .1rem 0 .2rem;
    }

    .rp-kiyas small {
        display: block;
        color: var(--metin-soluk);
        font-size: .8rem;
    }

/* --- Mobil --- */
@media (max-width: 860px) {
    .rp-ikili,
    .rp-halka-duzen,
    .rp-kiyaslar {
        grid-template-columns: minmax(0, 1fr);
    }

    .rp-halka svg {
        max-width: 200px;
    }
}

@media (max-width: 600px) {
    .rp-mini-kartlar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rp-mini strong {
        font-size: 1.1rem;
    }
}

/* =====================================================================
   BANKA HESAPLARI + KREDI KARTLARI (ortak tasarim)
   Iki sayfa ayni parcalari kullanir:
   - ozet-panel: sayfanin tek koyu alani; ana tutar + 3 kucuk bilgi
   - varlik-listesi: hesap / kart satirlari (ikon, ad, tutar, cubuk)
   - kisayollar: detaydaki hizli eylemler (mobilde ikon ustte)
   - hareket-listesi + sayfalama: 5'erli sayfalanan hareketler (app.js > HareketListesi)
   ===================================================================== */

/* --- Ozet paneli --- */
.ozet-panel {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr); /* ana tutar sigdigi kadar, kalan yer kucuk bilgilere */
    gap: 1.1rem 1.5rem;
    align-items: center;
    padding: 1.25rem 1.4rem;
    margin-bottom: 1.1rem;
    border-radius: 18px;
    background: var(--murekkep);
    color: #FFFFFF;
    box-shadow: 0 14px 30px -20px rgba(13, 24, 48, .7);
}

    .ozet-panel::before { /* sol ustte hafif kehribar isik */
        content: "";
        position: absolute;
        width: 340px;
        height: 340px;
        left: -150px;
        top: -190px;
        border-radius: 50%;
        background: radial-gradient(closest-side, rgba(249, 115, 22, .2), transparent);
        pointer-events: none;
    }

[data-tema="koyu"] .ozet-panel {
    background: linear-gradient(135deg, #172A52, #0D1830);
    border: 1px solid var(--cizgi);
}

.ozet-panel-ana {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: .85rem;
    align-items: center;
    min-width: 0;
}

.ozet-panel-ikon {
    grid-row: 1 / span 3;
    width: 3rem;
    height: 3rem;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .1);
    color: var(--altin);
}

    /* Kart detayinda: kartin listedeki rengi */
    .ozet-panel-ikon.kart-renk {
        color: #FFFFFF;
        background: linear-gradient(135deg, #2D4A85, #16264A);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
    }

        .ozet-panel-ikon.kart-renk.renk-1 {
            background: linear-gradient(135deg, #5B3FD9, #2A1B6B);
        }

        .ozet-panel-ikon.kart-renk.renk-2 {
            background: linear-gradient(135deg, #0E8C98, #0B3B4A);
        }

        .ozet-panel-ikon.kart-renk.renk-3 {
            background: linear-gradient(135deg, #B05A1C, #4A2208);
        }

.ozet-panel-etiket {
    font-size: .86rem;
    color: #AEB9D3;
}

.ozet-panel-ana strong {
    font-family: var(--font-baslik);
    font-size: clamp(1.55rem, 2.6vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ozet-panel-ana small {
    font-size: .8rem;
    color: #AEB9D3;
}

.ozet-panel-mini { /* 2 ya da 3 kucuk bilgi esit sutunlarda */
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
}

.mini {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: .5rem;
    row-gap: .15rem;
    align-content: start;
    min-width: 0;
    padding: .1rem 0 .1rem 1rem;
    border-left: 1px solid rgba(255, 255, 255, .14);
}

.mini-ikon {
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .1);
    color: #C9D3EA;
}

    .mini-ikon.yesil {
        color: #6FE3B1;
    }

    .mini-ikon.kirmizi {
        color: #FF9AA0;
    }

    .mini-ikon.mor {
        color: #C4B8FF;
    }

    .mini-ikon.kehribar {
        color: #F4B356;
    }

    .mini-ikon.mavi {
        color: #8FB3FF;
    }

    .mini-ikon.turkuaz {
        color: #6FDDE6;
    }

.mini-etiket { /* uzun etiket iki satira iner, kesilmez */
    align-self: center;
    font-size: .8rem;
    line-height: 1.3;
    color: #AEB9D3;
}

.mini-deger {
    grid-column: 1 / -1;
    margin-top: .2rem;
    font-family: var(--font-baslik);
    font-size: 1.2rem;
    font-weight: 700;
    color: #FFFFFF;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-not {
    grid-column: 1 / -1;
    font-size: .75rem;
    line-height: 1.35;
    color: #AEB9D3;
}

    .mini-not:empty {
        display: none;
    }

.ozet-panel .tutar.arti {
    color: #6FE3B1;
}

.ozet-panel .tutar.eksi,
.ozet-panel .mini-not.eksi {
    color: #FF9AA0;
}

.ozet-panel .mini-not.eksi {
    font-weight: 600;
}

.mini .limit-cubuk {
    grid-column: 1 / -1;
    height: 5px;
    margin: .3rem 0 .1rem;
}

    .mini .limit-cubuk[hidden] {
        display: none;
    }

/* --- Hesap / kart satirlari --- */
.varlik-listesi {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
    gap: .75rem;
}

    .varlik-listesi > .bos-durum {
        grid-column: 1 / -1;
    }

.varlik {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: .8rem;
    row-gap: .6rem;
    align-items: center;
    padding: .85rem 1rem;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--yaricap);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}

a.varlik:hover {
    border-color: var(--altin);
    box-shadow: var(--golge);
}

.varlik .ikon-rozet,
.varlik-kart-ikon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 11px;
}

/* Kartin ikonu, kartin rengini tasir (ana sayfadaki kart gorselleriyle ayni renkler) */
.varlik-kart-ikon {
    display: inline-grid;
    place-items: center;
    flex: none;
    color: #FFFFFF;
    background: linear-gradient(135deg, #22396A, #0D1830);
}

    .varlik-kart-ikon.renk-1 {
        background: linear-gradient(135deg, #5B3FD9, #2A1B6B);
    }

    .varlik-kart-ikon.renk-2 {
        background: linear-gradient(135deg, #0E8C98, #0B3B4A);
    }

    .varlik-kart-ikon.renk-3 {
        background: linear-gradient(135deg, #B05A1C, #4A2208);
    }

[data-tema="koyu"] .varlik-kart-ikon.renk-0 {
    background: linear-gradient(135deg, #2D4A85, #16264A);
}

.varlik-bilgi {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    .varlik-bilgi strong { /* uzun ad en fazla iki satir */
        font-weight: 600;
        line-height: 1.3;
        overflow: hidden;
        overflow-wrap: anywhere;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .varlik-bilgi small {
        font-size: .8rem;
        color: var(--metin-soluk);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .varlik-bilgi small.acil {
            color: var(--gider);
            font-weight: 600;
        }

.varlik-deger {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

    .varlik-deger strong {
        font-family: var(--font-baslik);
        font-size: 1.15rem;
        font-weight: 700;
        line-height: 1.25;
    }

    .varlik-deger small {
        font-size: .76rem;
        color: var(--metin-soluk);
        white-space: nowrap;
    }

.varlik-alt {
    grid-column: 1 / -1;
    display: grid;
    gap: .3rem;
}

.varlik-cubuk {
    display: block;
    height: 5px;
    border-radius: 999px;
    background: var(--lacivert-zemin);
    overflow: hidden;
}

    .varlik-cubuk > span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: var(--altin);
    }

    .varlik-cubuk.limit > span {
        background: var(--gelir);
    }

    .varlik-cubuk.limit.orta > span {
        background: var(--altin);
    }

    .varlik-cubuk.limit.yuksek > span {
        background: var(--gider);
    }

.varlik-alt-satir {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    font-size: .76rem;
    color: var(--metin-soluk);
}

    .varlik-alt-satir > span:last-child {
        text-align: right;
        white-space: nowrap;
    }

.varlik.yeni {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 64px;
    background: transparent;
    border: 1.5px dashed var(--cizgi);
    color: var(--metin-soluk);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

    .varlik.yeni:hover {
        border-color: var(--altin);
        color: var(--metin);
    }

/* --- Detaydaki hizli eylemler --- */
.kisayollar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .6rem;
    margin-bottom: 1.1rem;
}

    .kisayollar[hidden] {
        display: none;
    }

.kisayol {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 50px;
    padding: .5rem .75rem;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: 12px;
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    color: var(--metin);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

    .kisayol:hover {
        border-color: var(--altin);
    }

    .kisayol:active {
        background: var(--kagit);
    }

    .kisayol[hidden] {
        display: none;
    }

    .kisayol .ikon-rozet {
        width: 2.1rem;
        height: 2.1rem;
        border-radius: 9px;
    }

/* Baslik yanindaki ikonlu kucuk butonlar (Adini degistir, Pasife al) */
.buton.ikonlu {
    gap: .4rem;
}

/* --- Hareket listesi --- */
.hareket-listesi {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hareket {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    column-gap: .75rem;
    align-items: center;
    padding: .6rem 0;
    border-bottom: 1px dashed var(--cizgi);
}

    .hareket:last-child {
        border-bottom: none;
    }

    .hareket .ikon-rozet {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 10px;
    }

.hareket-bilgi {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    .hareket-bilgi strong { /* islem adi kisalsa da "Sadece kayit" rozeti hep gorunsun */
        display: flex;
        flex-wrap: wrap;
        row-gap: .15rem;
        align-items: center;
        gap: .35rem;
        min-width: 0;
        font-weight: 600;
        font-size: .95rem;
    }

        .hareket-bilgi strong > span:first-child { /* en az birkac harf gorunsun; yer yoksa rozetler alt satira iner */
            flex: 0 1 auto;
            min-width: min(5.5rem, 100%);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .hareket-bilgi strong .rozet {
            flex: none;
            font-size: .68rem;
        }

    .hareket-bilgi small {
        font-size: .8rem;
        color: var(--metin-soluk);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .hareket-bilgi small > span + span::before {
            content: "·";
            margin: 0 .35em;
        }

.hareket-sag {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

    .hareket-sag strong {
        font-weight: 600;
    }

    .hareket-sag small {
        font-size: .75rem;
        color: var(--metin-soluk);
        white-space: nowrap;
    }

.hareket.sadece-kayit .hareket-sag strong {
    opacity: .55;
}

.hareket-eylem {
    width: 30px;
}

.hareket .satir-sil {
    opacity: .5;
}

    .hareket:hover .satir-sil, .hareket .satir-sil:focus-visible {
        opacity: 1;
    }

.hareket-toplam {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-top: .25rem;
    padding-top: .7rem;
    border-top: 1px solid var(--cizgi);
    font-size: .9rem;
    font-weight: 600;
}

/* --- Sayfalama --- */
.sayfalama {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    margin-top: .8rem;
}

.sayfalama-bilgi {
    font-size: .82rem;
    color: var(--metin-soluk);
    font-variant-numeric: tabular-nums;
}

.sayfalama-dugmeler {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.sayfa-no, .sayfa-ok {
    min-width: 34px;
    height: 34px;
    padding: 0 .4rem;
    display: inline-grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--metin-soluk);
    cursor: pointer;
}

.sayfa-ok {
    border-color: var(--cizgi);
    color: var(--metin);
}

    .sayfa-no:hover, .sayfa-ok:hover:not(:disabled) {
        background: var(--lacivert-zemin);
        color: var(--metin);
    }

    .sayfa-ok:disabled {
        opacity: .35;
        cursor: default;
    }

.sayfa-no[aria-current="page"] {
    background: var(--murekkep);
    color: #FFFFFF;
}

[data-tema="koyu"] .sayfa-no[aria-current="page"] {
    background: var(--altin);
    color: #121A2C;
}

.sayfa-bosluk {
    padding: 0 .1rem;
    color: var(--metin-soluk);
}

.sayfa-ozet {
    display: none;
    min-width: 3.4rem;
    text-align: center;
    font-size: .9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* --- Genis ekran: panel tek sutuna duser --- */
@media (max-width: 1000px) {
    .ozet-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    .ozet-panel-mini {
        padding-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, .14);
    }

    .mini:first-child {
        border-left: none;
        padding-left: 0;
    }
}

/* --- Telefon --- */
@media (max-width: 640px) {
    .varlik-sayfa .sayfa-baslik {
        align-items: center;
        margin-bottom: 1rem;
    }

        .varlik-sayfa .sayfa-baslik h1 {
            font-size: 1.55rem;
        }

        .varlik-sayfa .sayfa-baslik p {
            font-size: .86rem;
        }

        .varlik-sayfa .sayfa-baslik .baslik-eylem {
            width: auto;
        }

    /* Detayda ikonlu butonlar basligin yaninda kalsin */
    .varlik-sayfa #detayGorunum .sayfa-baslik {
        flex-wrap: nowrap;
        align-items: flex-start;
    }

        .varlik-sayfa #detayGorunum .sayfa-baslik > div:first-child {
            flex: 1;
            min-width: 0;
        }

    .varlik-sayfa #detayGorunum .baslik-eylem {
        flex-wrap: nowrap;
        gap: .4rem;
    }

    /* Baslik yanindaki ikonlu butonlarda sadece ikon */
    .varlik-sayfa .buton.ikonlu {
        min-width: 40px;
        min-height: 40px;
        padding: .45rem;
    }

    .varlik-sayfa .kisa-yazi {
        display: none;
    }

    .varlik-sayfa .bolum {
        padding: 1rem .95rem 1.05rem;
        margin-bottom: 1rem;
    }

    .varlik-sayfa .bolum-ust {
        margin-bottom: .75rem;
    }

    .ozet-panel {
        padding: 1.05rem 1.05rem .5rem;
        gap: .8rem;
        border-radius: 16px;
    }

    .ozet-panel-ikon {
        width: 2.6rem;
        height: 2.6rem;
        border-radius: 12px;
    }

    .ozet-panel-ana strong {
        font-size: 1.7rem;
    }

    /* Kucuk bilgiler alt alta, ince satirlar: ikon | etiket + not | tutar */
    .ozet-panel-mini {
        grid-auto-flow: row;
        grid-template-columns: minmax(0, 1fr);
        padding-top: 0;
        border-top: none;
    }

    .mini,
    .mini:first-child {
        grid-template-columns: auto minmax(0, 1fr) auto;
        column-gap: .65rem;
        row-gap: 0;
        align-items: center;
        padding: .55rem 0;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

    .mini-ikon {
        grid-row: 1 / span 2;
    }

    .mini-etiket {
        grid-column: 2;
        grid-row: 1;
        white-space: normal;
    }

    .mini-deger {
        grid-column: 3;
        grid-row: 1 / span 2;
        margin: 0;
        font-size: 1.02rem;
        text-align: right;
    }

    .mini-not {
        grid-column: 2;
        grid-row: 2;
        font-size: .72rem;
    }

    .mini .limit-cubuk {
        grid-column: 2 / -1;
        grid-row: 3;
        margin: .35rem 0 0;
    }

    .varlik {
        padding: .75rem .85rem;
        column-gap: .7rem;
        row-gap: .5rem;
    }

        .varlik .ikon-rozet,
        .varlik-kart-ikon {
            width: 2.3rem;
            height: 2.3rem;
            border-radius: 10px;
        }

    .varlik-deger strong {
        font-size: 1.05rem;
    }

    .varlik.yeni {
        min-height: 54px;
    }

    /* Hizli eylemler: uygulama kisayolu gibi, ikon ustte */
    .kisayollar {
        grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
        gap: .4rem;
        margin-bottom: 1rem;
    }

    .kisayol {
        flex-direction: column;
        justify-content: flex-start;
        gap: .35rem;
        min-height: 0;
        padding: .6rem .2rem .55rem;
        font-size: .72rem;
        line-height: 1.2;
        text-align: center;
    }

        .kisayol .ikon-rozet {
            width: 2.35rem;
            height: 2.35rem;
            border-radius: 10px;
        }

    .varlik-sayfa .suzgecler {
        width: 100%;
    }

        .varlik-sayfa .suzgecler select {
            flex: 1 1 140px;
        }

    .hareket {
        column-gap: .6rem;
        padding: .55rem 0;
    }

        .hareket .ikon-rozet {
            width: 2.1rem;
            height: 2.1rem;
            border-radius: 9px;
        }

    .hareket-bilgi strong {
        font-size: .9rem;
    }

    .hareket-sag strong {
        font-size: .92rem;
    }

    .hareket .satir-sil {
        opacity: 1;
        width: 28px;
        height: 28px;
    }

    .hareket-eylem {
        width: 28px;
    }

    .hareket-toplam {
        font-size: .84rem;
    }

    /* Sayfa numaralari yerine "2 / 5"; oklar parmakla rahat basilsin */
    .sayfa-no, .sayfa-bosluk {
        display: none;
    }

    .sayfa-ozet {
        display: inline-block;
    }

    .sayfa-ok {
        width: 40px;
        height: 40px;
    }
}

@media (hover: none) {
    .hareket .satir-sil {
        opacity: 1;
    }
}

/* =====================================================================
   NAKIT, TAKSITLER, KREDILER - banka / kart tasarimina uyum
   ===================================================================== */

/* Gizlenen baslik eylemleri gercekten gizlensin (kredi detayinda "Kredi ekle") */
.baslik-eylem[hidden] {
    display: none;
}

/* Ozet panelinde ikon yerine ilerleme halkasi (kredi detayi) */
.ozet-panel-ana .halka {
    grid-row: 1 / span 3;
}

.ozet-panel .halka-iz {
    stroke: rgba(255, 255, 255, .14);
}

.ozet-panel .halka-metin {
    color: #FFFFFF;
}

/* Hareket basligi link oldugunda da tek satir */
.hareket-bilgi strong > a:first-child {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hareket .varlik-kart-ikon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
}

/* Taksit plani satirindaki ilerleme cubugu */
.plan-satir-cubuk {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .3rem;
    max-width: 260px;
}

    .plan-satir-cubuk .varlik-cubuk {
        flex: 1;
    }

    .plan-satir-cubuk small {
        flex: none;
    }

/* Kredi satiri (genel gorunum): butonlu oldugu icin <article> */
.kredi-satiri.gecikti {
    border-color: var(--gider);
}

.kredi-tur-ikon {
    font-size: 1.25rem;
    line-height: 1;
}

.kredi-ad {
    color: inherit;
    text-decoration: none;
}

    .kredi-ad:hover {
        text-decoration: underline;
    }

.varlik-alt-satir .arti {
    color: var(--gelir);
    font-weight: 600;
}

.kredi-siradaki-satir {
    padding: .45rem .6rem;
    border-radius: 9px;
    background: var(--kagit);
    color: var(--metin);
    font-size: .8rem;
}

    .kredi-siradaki-satir > span:first-child {
        white-space: nowrap;
    }

    .kredi-siradaki-satir > span:last-child {
        white-space: normal;
    }

    .kredi-siradaki-satir.acil {
        background: var(--kirmizi-zemin);
        color: var(--gider);
        font-weight: 600;
    }

.varlik-alt .kredi-rozetler {
    margin: 0;
}

.varlik-eylemler {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .15rem;
}

    .varlik-eylemler .buton-kucuk {
        min-height: 34px;
        padding: .35rem .85rem;
        font-size: .86rem;
    }

.kredi-panel-rozetler {
    margin: -.4rem 0 1rem;
}

/* Kredi detayi: paneldeki rakamlar disindaki bilgiler */
.bilgi-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
    gap: .2rem 1.5rem;
    margin: 0;
}

    .bilgi-izgara > div {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: .75rem;
        padding: .5rem 0;
        border-bottom: 1px dashed var(--cizgi);
    }

    .bilgi-izgara dt {
        color: var(--metin-soluk);
        font-size: .86rem;
    }

    .bilgi-izgara dd {
        margin: 0;
        font-weight: 600;
        font-size: .92rem;
        text-align: right;
        white-space: normal;
    }

/* Kredi hareket gecmisi */
.kredi-ayrinti svg {
    vertical-align: -2px;
}

.hareket-geri {
    margin-top: .15rem;
    font-size: .8rem;
}

@media (max-width: 640px) {
    /* Taksitler: kart secimi ve "Taksit ekle" tek satirda */
    .varlik-sayfa .taksit-ust {
        flex-wrap: nowrap;
        align-items: flex-end;
        gap: .6rem;
        margin-bottom: 1rem;
    }

        .varlik-sayfa .taksit-ust .alan {
            flex: 1;
            min-width: 0;
            margin: 0;
        }

        .varlik-sayfa .taksit-ust .buton {
            width: auto;
            flex: none;
            padding-left: 1rem;
            padding-right: 1rem;
        }

    .varlik-sayfa .taksit-not {
        font-size: .86rem;
    }

    .plan-satir-cubuk {
        max-width: none;
    }

    .bilgi-izgara {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =====================================================================
   GELIRLER, HARCAMALAR, BORCLAR - ortak tasarima uyum
   ===================================================================== */

/* Satirda iki kucuk buton (duzenle + sil) */
.hareket-eylemler {
    display: flex;
    align-items: center;
    gap: .1rem;
}

.hareket:hover .satir-duzenle, .hareket .satir-duzenle:focus-visible {
    opacity: 1;
}

/* Vadesi gecen / geciken her satir kirmizi cerceveli */
.varlik.gecikti {
    border-color: var(--gider);
}

.varlik-alt-satir .eksi {
    color: var(--gider);
    font-weight: 600;
}

.varlik-eylem-ikonlar {
    display: inline-flex;
    align-items: center;
    gap: .1rem;
    margin-left: auto;
}

    .varlik-eylem-ikonlar .satir-duzenle,
    .varlik-eylem-ikonlar .satir-sil {
        opacity: 1;
    }

/* Borclar: kisi satirlari grup kutusunun icinde */
.borc-satirlari {
    margin: .55rem 0 .65rem;
}

.borc-satiri .varlik-bilgi strong {
    display: block;
}

.borc-satiri .rp-nokta {
    vertical-align: middle;
}

.borc-satiri .varlik-bilgi small .kaynak-etiket {
    font-size: inherit;
}

/* Genel borc durumu satirlari */
.gb-satirlar .hareket {
    padding: .5rem 0;
}

.gb-bilgi-satiri .hareket-sag strong,
.gb-bilgi-satiri .plan-baglanti {
    color: var(--metin-soluk);
}

@media (max-width: 640px) {
    .hareket .satir-duzenle {
        opacity: 1;
        width: 28px;
        height: 28px;
    }

    .varlik-sayfa .donem-secici {
        margin-bottom: .9rem;
    }
}

/* =====================================================================
   YATIRIMLAR, HEDEFLER - ortak tasarima uyum
   ===================================================================== */

/* Yatirim gruplari icindeki satirlar */
.yatirim-satirlari {
    margin-top: .35rem;
}

    .yatirim-satirlari .hareket-sag small.tutar {
        font-weight: 600;
    }

        .yatirim-satirlari .hareket-sag small.tutar.arti {
            color: var(--gelir);
        }

        .yatirim-satirlari .hareket-sag small.tutar.eksi {
            color: var(--gider);
        }

/* Hedef havuzunun bilesim cubugu listenin ustunde */
.havuz-bilesim {
    margin-bottom: .6rem;
}

/* Hedef kartlarindaki "Yeni hedef" kutusu ikon rozetiyle */
.hedef-yeni .ikon-rozet {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 11px;
}

/* Hedef kartlarindaki butonlar diger sayfalardaki satir butonlariyla ayni boyda */
.hedef-kart .hedef-eylemler .buton-kucuk {
    min-height: 34px;
    padding: .35rem .85rem;
    font-size: .86rem;
}

/* Telefonda tekrar eden baslik butonu gizlenir (ayni eylem kisayollarda var) */
@media (max-width: 640px) {
    .varlik-sayfa .telefonda-gizle {
        display: none;
    }
}

/* =====================================================================
   ABONELIKLER - ortak tasarima uyum
   ===================================================================== */
.abonelik-gecmis {
    align-self: flex-start;
    margin-top: .15rem;
    font-size: .78rem;
}

/* =====================================================================
   ANA SAYFA, RAPORLAR - ortak tasarima uyum
   ===================================================================== */

/* Koyu paneldeki notlarda renkli degisim ve kar/zarar yazilari okunur kalsin */
.ozet-panel .rp-degisim.iyi,
.ozet-panel .mini-not.arti,
.ozet-panel .mini-not .arti {
    color: #6FE3B1;
}

.ozet-panel .rp-degisim.kotu,
.ozet-panel .mini-not .eksi {
    color: #FF9AA0;
}

.ozet-panel .rp-degisim.notr {
    color: #AEB9D3;
}

/* Ana sayfa: hesap ve kart satirlari daha sik */
.varlik-listesi.kompakt {
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: .6rem;
}

    .varlik-listesi.kompakt .varlik {
        padding: .7rem .85rem;
        row-gap: .45rem;
    }

    .varlik-listesi.kompakt .varlik-deger strong {
        font-size: 1.05rem;
    }

/* Yaklasan odemeler: gecikmis ya da 3 gun icindekiler */
.yaklasan-acil .hareket-bilgi strong {
    color: var(--gider);
}

.hareket-sag small.eksi {
    color: var(--gider);
    font-weight: 600;
}

/* =====================================================================
   TAKVIM, AYARLAR - ortak tasarima uyum
   ===================================================================== */

/* Ozet panelinde tutar olmayan ana deger (ad soyad gibi) tek satirda kalsin */
.ozet-panel-ana strong {
    white-space: nowrap;
}

/* Ayarlar: ikon yerine bas harfler */
.profil-bas-harf {
    font-family: var(--font-baslik);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--altin);
}

/* Ayarlar: ayar bolumleri diger sayfalardaki bolumlerle ayni aralikta */
.varlik-sayfa .ayar-bolum {
    margin-bottom: 1.1rem;
}

@media (max-width: 640px) {
    .varlik-sayfa .ayar-bolum {
        padding: 1rem .95rem 1.05rem;
        margin-bottom: 1rem;
    }

    /* Takvim araclari: ay secimi tek satir, butonlar altinda yan yana */
    .varlik-sayfa .tk-arac {
        gap: .5rem;
    }

        .varlik-sayfa .tk-arac .tk-ay-ust {
            flex: 1 0 100%;
        }

        .varlik-sayfa .tk-arac .buton {
            width: auto;
        }

            .varlik-sayfa .tk-arac .buton.ikonlu svg {
                margin-right: 0;
            }

    .varlik-sayfa .tk-arac-bosluk {
        flex: 1;
    }
}

/* =====================================================================
   ADMIN PANELI (admin.html)
   Sekmeler, kullanici filtreleri, gun x saat isi haritasi, kullanici penceresi.
   Renkler tema degiskenlerinden gelir; acik / koyu temada kendiliginden uyar.
   ===================================================================== */
.rozet-mavi {
    background: var(--mavi-zemin);
    color: var(--mavi);
}

.rozet-mor {
    background: var(--mor-zemin);
    color: var(--mor);
}

.rozet-kehribar {
    background: var(--kehribar-zemin);
    color: var(--kehribar);
}

.adm-sekmeler {
    margin-bottom: 1.1rem;
}

.adm-soluk {
    color: var(--metin-soluk);
}

/* --- Kullanici filtreleri --- */
.adm-filtreler {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: .7rem .8rem;
}

.adm-filtre {
    min-width: 0;
}

.adm-filtre-genis {
    grid-column: span 2;
}

.adm-filtre label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--metin-soluk);
    margin-bottom: .25rem;
}

.adm-filtre input,
.adm-filtre select,
.adm-demografi input,
.adm-demografi select {
    width: 100%;
    min-height: 38px;
    padding: .35rem .75rem;
    font: inherit;
    font-size: .92rem;
    color: var(--metin);
    background-color: var(--yuzey);
    border: 1.5px solid var(--cizgi);
    border-radius: var(--yaricap-kucuk);
}

    .adm-filtre input:focus,
    .adm-filtre select:focus,
    .adm-demografi input:focus,
    .adm-demografi select:focus {
        outline: none;
        border-color: var(--altin);
        box-shadow: 0 0 0 3px var(--altin-soluk);
    }

.adm-diger {
    margin-top: .8rem;
}

    .adm-diger > summary {
        cursor: pointer;
        width: fit-content;
        font-size: .9rem;
        font-weight: 600;
        color: var(--metin-soluk);
        padding: .2rem 0;
    }

        .adm-diger > summary:hover {
            color: var(--metin);
        }

    .adm-diger[open] > summary {
        margin-bottom: .6rem;
    }

.adm-filtre-eylem {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-top: 1rem;
}

.adm-sonuc {
    margin-left: auto;
    font-size: .9rem;
    color: var(--metin-soluk);
}

/* --- Kullanici tablosu --- */
.adm-tablo td {
    vertical-align: middle;
}

.adm-ad {
    display: block;
    font-weight: 600;
}

.adm-rozetler {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .35rem;
}

.adm-tablo td .rozet + small {
    margin-top: .2rem;
}

/* --- Kullanim / degisim araclari --- */
.adm-arac {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .7rem 1rem;
    margin-bottom: 1.1rem;
}

    .adm-arac .segment {
        flex-wrap: wrap;
        background: var(--yuzey);
    }

.adm-demografi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}

    .adm-demografi select,
    .adm-demografi input {
        width: auto;
        min-width: 140px;
        border-radius: 999px;
    }

/* --- Gun x saat isi haritasi --- */
.adm-isi-kap {
    overflow-x: auto;
    padding-bottom: .3rem;
}

.adm-isi {
    display: grid;
    grid-template-columns: 2.8rem repeat(24, minmax(14px, 1fr));
    gap: 3px;
    min-width: 560px;
    align-items: center;
}

.adm-isi-saat {
    font-size: .7rem;
    color: var(--metin-soluk);
    text-align: left;
    font-variant-numeric: tabular-nums;
}

.adm-isi-gun {
    font-size: .78rem;
    color: var(--metin-soluk);
    white-space: nowrap;
}

.adm-hucre {
    display: block;
    aspect-ratio: 1;
    border-radius: 4px;
    background: var(--kagit);
    border: 1px solid var(--cizgi);
    background: color-mix(in srgb, var(--mavi) calc(var(--d, 0) * 100%), var(--kagit));
}

.adm-isi-lejant {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .6rem;
    font-size: .78rem;
    color: var(--metin-soluk);
}

    .adm-isi-lejant i {
        display: block;
        width: 120px;
        height: 10px;
        border-radius: 999px;
        border: 1px solid var(--cizgi);
        background: linear-gradient(90deg, var(--kagit), var(--mavi));
    }

/* --- Kullanici penceresi --- */
.adm-pencere .adm-rozetler {
    margin: 0 0 .6rem;
}

.adm-bilgiler {
    font-size: .93rem;
}

    .adm-bilgiler > div {
        padding: .5rem 0;
    }

    .adm-bilgiler dt {
        color: var(--metin-soluk);
    }

    .adm-bilgiler dd {
        text-align: right;
        min-width: 0;
        overflow-wrap: anywhere;
    }

.adm-alt-baslik {
    font-size: 1rem;
    margin: 0 0 .6rem;
}

.adm-yetkiler {
    display: grid;
    gap: .5rem;
    margin-bottom: .8rem;
}

.adm-eylemler {
    justify-content: flex-start;
    margin-top: 0;
}

/* --- Ayarlar: yetkilerim --- */
.adm-yetki-listesi {
    list-style: none;
    margin: 0 0 .8rem;
    padding: 0;
    display: grid;
    gap: .6rem;
}

    .adm-yetki-listesi li {
        display: flex;
        align-items: center;
        gap: .75rem;
    }

        .adm-yetki-listesi li small {
            display: block;
            color: var(--metin-soluk);
            font-size: .82rem;
        }

        .adm-yetki-listesi li.yok strong {
            color: var(--metin-soluk);
        }

/* --- Ayarlar: hazir oturum sureleri --- */
.adm-hazir-sureler {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: -.3rem 0 .9rem;
}

    .adm-hazir-sureler .buton[aria-pressed="true"] {
        border-color: var(--altin);
        color: var(--altin-koyu);
    }

@media (max-width: 640px) {
    .adm-filtre-genis {
        grid-column: 1 / -1;
    }

    .adm-sonuc {
        margin-left: 0;
        flex-basis: 100%;
    }

    .adm-demografi {
        margin-left: 0;
        width: 100%;
    }

        .adm-demografi select,
        .adm-demografi input {
            flex: 1 1 140px;
        }

    .adm-eylemler .buton {
        flex: 1 1 auto;
    }
}

/* =====================================================================
   BILDIRIMLER
   ayarlar.html: bildirim tercihleri | admin.html: bildirim listesi
   bildirim-iptal.html: e-postadaki "kapat" baglantisinin sayfasi
   Renkler tema degiskenlerinden gelir; acik / koyu temada kendiliginden uyar.
   ===================================================================== */
.bld-secenekler {
    display: grid;
    margin-bottom: .75rem;
}

.bld-secenek {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .85rem 0;
    border-top: 1px solid var(--cizgi);
    cursor: pointer;
}

    .bld-secenek:first-child {
        border-top: none;
        padding-top: .25rem;
    }

    .bld-secenek input {
        flex: none;
        width: 1.1rem;
        height: 1.1rem;
        margin-top: .15rem;
        accent-color: var(--murekkep);
        cursor: pointer;
    }

        .bld-secenek input:disabled {
            cursor: default;
        }

    .bld-secenek strong {
        display: block;
        font-weight: 600;
    }

    .bld-secenek small {
        display: block;
        margin-top: .2rem;
        font-size: .85rem;
        line-height: 1.45;
        color: var(--metin-soluk);
    }

[data-tema="koyu"] .bld-secenek input {
    accent-color: var(--altin);
}

/* Admin listesinde hata metni: uzun SMTP mesajlari tabloyu tasirmasin */
.bld-hata {
    display: block;
    max-width: 26rem;
    margin-top: .25rem;
    font-size: .8rem;
    line-height: 1.4;
    color: var(--gider);
    overflow-wrap: anywhere;
}

/* Bildirim kapatma sayfasi */
.bld-iptal-kutu {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: 1rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--cizgi);
    border-radius: var(--yaricap-kucuk);
    background: var(--yuzey);
}

    .bld-iptal-kutu .ikon-rozet {
        flex: none;
    }

    .bld-iptal-kutu strong {
        display: block;
        font-weight: 600;
    }

    .bld-iptal-kutu small {
        display: block;
        margin-top: .25rem;
        font-size: .88rem;
        line-height: 1.45;
        color: var(--metin-soluk);
    }

        .bld-iptal-kutu small[hidden] {
            display: none;
        }

.bld-iptal-ikinci {
    margin-top: .6rem;
}

.bld-iptal-not {
    margin: 1rem 0 0;
    font-size: .85rem;
    color: var(--metin-soluk);
    text-align: center;
}

/* #####################################################################
   BUTCEFLY MARKA VE KARSILAMA (2026-10)
   Bu bolumden sonrasi: yukleniyor ekrani, logo renkleri, sosyal medya,
   cerez bandi, yeni karsilama sayfasi, hakkimizda / iletisim / yasal sayfalar.
   ##################################################################### */

/* =====================================================================
   YUKLENIYOR EKRANI (app.js > Yukleyici)
   html::before = sayfa zemini, html::after = kanat cirpan kelebek + yazi.
   Sayfa acilirken kendiliginden gorunur, <html class="yuklendi"> olunca kalkar.
   Site ici gecislerde <html class="yuklendi geciliyor"> ile kisa gecikmeyle geri gelir.
   Emniyet: JS calismazsa 8 sn sonra kendiliginden kalkar.
   ===================================================================== */
html::before,
html::after {
    position: fixed;
    z-index: 2147483000;
    opacity: 1;
    visibility: visible;
    transition: opacity .3s ease, visibility 0s linear 0s;
    animation: yukleyiciEmniyet 0s linear 8s forwards;
}

html::before {
    content: "";
    inset: 0;
    background: var(--kagit);
}

html::after {
    content: "Lütfen bekleyin, sayfa yükleniyor…";
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    padding: 108px 1.5rem 0;
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"%3E%3Crect x="14" y="26" width="92" height="64" rx="22" fill="%23F97316"/%3E%3Cpath d="M20 104L40 98L54 101L72 92L88 95L102 86" stroke="%23F97316" stroke-opacity=".45" stroke-width="3" stroke-dasharray="5 5" stroke-linecap="round" fill="none"%3E%3Canimate attributeName="stroke-dashoffset" values="20%3B0" dur="1s" repeatCount="indefinite"/%3E%3C/path%3E%3Cg%3E%3CanimateTransform attributeName="transform" type="translate" values="0 2%3B0 -3%3B0 2" dur="1.2s" calcMode="spline" keySplines=".45 0 .55 1%3B.45 0 .55 1" repeatCount="indefinite"/%3E%3Cg transform="translate(60 58) scale(1.45)"%3E%3Cg%3E%3CanimateTransform attributeName="transform" type="scale" values="1 1%3B.22 1%3B1 1" keyTimes="0%3B.5%3B1" dur=".6s" calcMode="spline" keySplines=".45 0 .55 1%3B.45 0 .55 1" repeatCount="indefinite"/%3E%3Cpath d="M1 -1C4 -14 18 -18 22 -10C24 -4 16 0 1 1Z" fill="%23FFF"/%3E%3Cpath d="M1 2C10 2 16 8 12 14C8 17 3 10 1 4Z" fill="%23FFF"/%3E%3C/g%3E%3Cg transform="scale(-1 1)"%3E%3Cg%3E%3CanimateTransform attributeName="transform" type="scale" values="1 1%3B.22 1%3B1 1" keyTimes="0%3B.5%3B1" dur=".6s" calcMode="spline" keySplines=".45 0 .55 1%3B.45 0 .55 1" repeatCount="indefinite"/%3E%3Cpath d="M1 -1C4 -14 18 -18 22 -10C24 -4 16 0 1 1Z" fill="%23FFF"/%3E%3Cpath d="M1 2C10 2 16 8 12 14C8 17 3 10 1 4Z" fill="%23FFF"/%3E%3C/g%3E%3C/g%3E%3Cellipse cy="2" rx="2" ry="9.5" fill="%231E3A8A"/%3E%3Ccircle cy="-8.5" r="2.1" fill="%231E3A8A"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E') center top / 96px 96px no-repeat;
    text-align: center;
    color: var(--metin-soluk);
    font: 500 .95rem/1.4 var(--font-govde);
    letter-spacing: .01em;
    pointer-events: none;
    animation: yukleyiciGel .3s ease .2s both, yukleyiciEmniyet 0s linear 8s forwards;
}

html.dil-en::after,
html[lang="en"]::after {
    content: "Please wait, the page is loading…";
}

html.yuklendi::before,
html.yuklendi::after {
    opacity: 0;
    visibility: hidden;
    animation: none;
    transition: opacity .35s ease, visibility 0s linear .35s;
}

html.yuklendi.geciliyor::before,
html.yuklendi.geciliyor::after {
    opacity: 1;
    visibility: visible;
    transition: opacity .25s ease .15s, visibility 0s linear .15s;
}

@keyframes yukleyiciGel {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes yukleyiciEmniyet {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

@media print {
    html::before, html::after {
        display: none;
    }
}

/* =====================================================================
   LOGO: cuzdan ikonu + "butcefly" yazisi (app.js > Marka.logo)
   Renkler degiskenlerle: koyu tema ve koyu zeminler (alt bilgi, giris yan paneli)
   kendi degerlerini verir.
   ===================================================================== */
:root {
    --logo-govde: #1E3A8A;
    --logo-yazi1: #1E3A8A;
    --logo-yazi2: #F97316;
}

    :root[data-tema="koyu"],
    .site-alt,
    .kimlik-yan {
        --logo-govde: #2563EB;
        --logo-yazi1: #FFFFFF;
        --logo-yazi2: #FB923C;
    }

.logo {
    gap: .45rem;
    line-height: 1;
}

.logo-ikon,
.logo-yazi {
    display: block;
    height: 2.1rem;
    width: auto;
    flex: none;
}

.logo-ikon {
    aspect-ratio: 96 / 68;
}

.logo-yazi {
    aspect-ratio: 3990 / 1283;
}

.lg-govde {
    fill: var(--logo-govde);
}

.lg-dikis {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 2.4;
    stroke-dasharray: 3.5 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lg-kapak {
    fill: #F97316;
}

.lg-kelebek path {
    fill: #FFFFFF;
}

.lg-kgovde {
    fill: #1E3A8A;
}

.lg-y1 {
    fill: var(--logo-yazi1);
}

.lg-y2 {
    fill: var(--logo-yazi2);
}

/* Eski tek parca isaret (telefon onizlemesindeki kucuk logo vb.) artik yeni ikon */
.logo-isaret {
    width: 2.05rem;
    height: 1.45rem;
    border-radius: 0;
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="12 28 96 68"%3E%3Crect x="14" y="30" width="88" height="64" rx="14" fill="%231E3A8A"/%3E%3Cpath d="M22 84L31 77L39 80L50 66" stroke="%23FFF" stroke-width="2.4" stroke-dasharray="3.5 3" stroke-linecap="round" stroke-linejoin="round" fill="none"/%3E%3Crect x="60" y="48" width="46" height="30" rx="10" fill="%23F97316"/%3E%3Cg transform="translate(83 63) scale(.7)"%3E%3Cpath d="M1 -1C4 -14 18 -18 22 -10C24 -4 16 0 1 1Z" fill="%23FFF"/%3E%3Cpath d="M1 2C10 2 16 8 12 14C8 17 3 10 1 4Z" fill="%23FFF"/%3E%3Cg transform="scale(-1 1)"%3E%3Cpath d="M1 -1C4 -14 18 -18 22 -10C24 -4 16 0 1 1Z" fill="%23FFF"/%3E%3Cpath d="M1 2C10 2 16 8 12 14C8 17 3 10 1 4Z" fill="%23FFF"/%3E%3C/g%3E%3Cellipse cy="2" rx="1.8" ry="9" fill="%231E3A8A"/%3E%3Ccircle cy="-8" r="1.9" fill="%231E3A8A"/%3E%3C/g%3E%3C/svg%3E') center / contain no-repeat;
    overflow: visible;
}

    .logo-isaret::before {
        content: none;
    }

[data-tema="koyu"] .logo-isaret,
.site-alt .logo-isaret,
.kimlik-yan .logo-isaret {
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="12 28 96 68"%3E%3Crect x="14" y="30" width="88" height="64" rx="14" fill="%232563EB"/%3E%3Cpath d="M22 84L31 77L39 80L50 66" stroke="%23FFF" stroke-width="2.4" stroke-dasharray="3.5 3" stroke-linecap="round" stroke-linejoin="round" fill="none"/%3E%3Crect x="60" y="48" width="46" height="30" rx="10" fill="%23F97316"/%3E%3Cg transform="translate(83 63) scale(.7)"%3E%3Cpath d="M1 -1C4 -14 18 -18 22 -10C24 -4 16 0 1 1Z" fill="%23FFF"/%3E%3Cpath d="M1 2C10 2 16 8 12 14C8 17 3 10 1 4Z" fill="%23FFF"/%3E%3Cg transform="scale(-1 1)"%3E%3Cpath d="M1 -1C4 -14 18 -18 22 -10C24 -4 16 0 1 1Z" fill="%23FFF"/%3E%3Cpath d="M1 2C10 2 16 8 12 14C8 17 3 10 1 4Z" fill="%23FFF"/%3E%3C/g%3E%3Cellipse cy="2" rx="1.8" ry="9" fill="%231E3A8A"/%3E%3Ccircle cy="-8" r="1.9" fill="%231E3A8A"/%3E%3C/g%3E%3C/svg%3E') center / contain no-repeat;
}

.telefon-baslik .logo-isaret {
    width: 1.75rem;
    height: 1.25rem;
    border-radius: 0;
}

.uyg-ust .logo-ikon,
.uyg-ust .logo-yazi {
    height: 1.9rem;
}

/* =====================================================================
   SOSYAL MEDYA IKONLARI (ust menu, mobil menu, alt bilgi)
   ===================================================================== */
.sosyal-ikonlar {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
}

    .sosyal-ikonlar a {
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        color: var(--metin-soluk);
        transition: color .15s, background-color .15s, transform .15s;
    }

        .sosyal-ikonlar a:hover {
            color: var(--altin-koyu);
            background: var(--altin-soluk);
            transform: translateY(-1px);
        }

.site-menu-sosyal {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.site-menu-sosyal-baslik {
    display: none;
}

.sosyal-ikonlar-koyu {
    gap: .45rem;
}

    .sosyal-ikonlar-koyu a {
        color: #C3CCDF;
        background: rgba(255, 255, 255, .07);
    }

        .sosyal-ikonlar-koyu a:hover {
            color: #FFFFFF;
            background: rgba(249, 115, 22, .3);
        }

.site-menu > a {
    white-space: nowrap;
}

/* Ust menude bosluk dar kalinca (tablet / kucuk dizustu) sosyal ikonlar alt bilgide kalsin */
@media (min-width: 901px) and (max-width: 1320px) {
    .site-menu-sosyal {
        display: none;
    }

    .site-menu {
        gap: 1.2rem;
    }
}

/* =====================================================================
   ALT BILGI (yeni duzen)
   ===================================================================== */
.site-alt-ic {
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
}

.site-alt .logo {
    margin-bottom: 1rem;
}

.site-alt-takip {
    margin: 1.1rem 0 .5rem;
    color: #FFFFFF;
    font-weight: 600;
    font-size: .9rem;
}

.site-alt-baglanti {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: #C3CCDF;
    text-align: left;
    cursor: pointer;
}

    .site-alt-baglanti:hover {
        color: #FFFFFF;
        text-decoration: underline;
    }

.site-alt-telif {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
}

    .site-alt-telif a {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        color: #C3CCDF;
        text-decoration: none;
    }

        .site-alt-telif a:hover {
            color: #FFFFFF;
        }

.uyg-alt-baglanti {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--metin-soluk);
    text-decoration: underline;
    cursor: pointer;
}

/* =====================================================================
   CEREZ BANDI (app.js > CerezBandi)
   ===================================================================== */
.cerez-bandi {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    z-index: 80;
    width: min(760px, calc(100% - 1.5rem));
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.15rem;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: 18px;
    box-shadow: 0 20px 50px -20px rgba(15, 23, 42, .45), 0 2px 6px rgba(15, 23, 42, .08);
    transform: translate(-50%, 140%);
    opacity: 0;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .25s;
}

    .cerez-bandi.acik {
        transform: translate(-50%, 0);
        opacity: 1;
    }

    .cerez-bandi.kapaniyor {
        transform: translate(-50%, 140%);
        opacity: 0;
    }

    .cerez-bandi strong {
        display: block;
        font-family: var(--font-baslik);
        font-size: 1.02rem;
        margin-bottom: .2rem;
    }

    .cerez-bandi p {
        margin: 0;
        font-size: .88rem;
        color: var(--metin-soluk);
        line-height: 1.45;
    }

    .cerez-bandi a {
        color: var(--metin);
        font-weight: 600;
    }

.cerez-eylemler {
    display: flex;
    gap: .5rem;
}

.uygulama .cerez-bandi { /* ic sayfalarda alttaki sabit uyari ile cakismasin */
    bottom: 1.5rem;
}

/* =====================================================================
   KAYDIRDIKCA BELIRME (app.js > Belir)
   ===================================================================== */
.belir-hazir [data-belir] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s ease var(--belir-gecikme, 0ms), transform .6s cubic-bezier(.2, .8, .2, 1) var(--belir-gecikme, 0ms);
}

    .belir-hazir [data-belir].belirdi {
        opacity: 1;
        transform: none;
    }

/* =====================================================================
   KARSILAMA SAYFASI (yeni): kahraman
   ===================================================================== */
.k-kahraman {
    position: relative;
    overflow: hidden;
}

.k-arka {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.k-isik {
    position: absolute;
    border-radius: 50%;
}

.k-isik-1 {
    width: 760px;
    height: 760px;
    right: -220px;
    top: -300px;
    background: radial-gradient(closest-side, rgba(249, 115, 22, .2), transparent);
}

.k-isik-2 {
    width: 620px;
    height: 620px;
    left: -260px;
    bottom: -280px;
    background: radial-gradient(closest-side, rgba(37, 99, 235, .14), transparent);
}

.kb-kanat path {
    fill: var(--altin);
}

    .kb-kanat path.alt {
        fill: #FDBA74;
    }

.kb-govde {
    fill: var(--lacivert);
}

.kb-kanat {
    transform-box: fill-box;
    transform-origin: 0% 50%;
}

.k-kahraman-ic {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 4rem 1.5rem 3rem;
    display: grid;
    grid-template-columns: 1.08fr 1fr;
    gap: 3.5rem;
    align-items: center;
}

.k-rozet {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .38rem .85rem;
    border-radius: 999px;
    background: var(--altin-soluk);
    color: var(--altin-koyu);
    font-size: .86rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

.k-nokta {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--altin);
    box-shadow: 0 0 0 0 rgba(249, 115, 22, .55);
}

.k-kahraman h1 {
    font-size: clamp(2.6rem, 5.6vw, 4.4rem);
    font-weight: 800;
    margin-bottom: 1.25rem;
    max-width: 15ch;
}

    .k-kahraman h1 span {
        display: block;
    }

.k-vurgu {
    background: linear-gradient(90deg, var(--altin) 0%, #FB923C 55%, var(--altin-koyu) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.k-giris {
    font-size: 1.15rem;
    color: var(--metin-soluk);
    max-width: 36rem;
    margin-bottom: 2rem;
}

.k-eylemler {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

    .k-eylemler .buton-birincil .ikon {
        transition: transform .2s;
    }

    .k-eylemler .buton-birincil:hover .ikon {
        transform: translateX(3px);
    }

.k-guven {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.4rem;
    color: var(--metin-soluk);
    font-size: .92rem;
}

    .k-guven li {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
    }

    .k-guven .ikon {
        color: var(--gelir);
    }

/* --- Telefon (dort ekran) --- */
.k-onizleme {
    position: relative;
    justify-self: center;
    width: 100%;
    max-width: 330px;
}

.k-ekranlar {
    position: relative;
    height: 340px;
}

.k-ekran {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateX(26px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
    pointer-events: none;
}

    .k-ekran.aktif {
        opacity: 1;
        transform: none;
    }

.k-ekran-baslik {
    font-family: var(--font-baslik);
    font-weight: 700;
    font-size: 1.05rem;
    margin: .1rem 0 .75rem;
}

.k-kart-gorsel {
    position: relative;
    height: 116px;
    border-radius: 16px;
    padding: .85rem 1rem;
    margin-bottom: .85rem;
    color: #FFFFFF;
    background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 58%, #F97316 135%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 14px 28px -16px rgba(30, 58, 138, .8);
    overflow: hidden;
}

    .k-kart-gorsel::after { /* karttaki isik */
        content: "";
        position: absolute;
        width: 160px;
        height: 160px;
        right: -60px;
        top: -70px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .12);
    }

.k-kart-ad {
    font-weight: 700;
    font-size: .95rem;
}

.k-kart-cip {
    width: 30px;
    height: 22px;
    border-radius: 5px;
    background: linear-gradient(135deg, #FDE68A, #F59E0B);
}

.k-kart-no {
    font-variant-numeric: tabular-nums;
    letter-spacing: .14em;
    font-size: .85rem;
}

.k-limit {
    font-size: .8rem;
    margin-bottom: .55rem;
}

    .k-limit small {
        color: var(--metin-soluk);
    }

.k-limit-ust {
    display: flex;
    justify-content: space-between;
    margin-bottom: .35rem;
}

.k-limit-cubuk {
    height: 8px;
    border-radius: 99px;
    background: var(--cizgi);
    overflow: hidden;
}

    .k-limit-cubuk span {
        display: block;
        height: 100%;
        width: var(--oran);
        border-radius: inherit;
        background: var(--lacivert);
        transform-origin: left center;
    }

    .k-limit-cubuk.yesil span {
        background: var(--yesil);
    }

    .k-limit-cubuk.mavi span {
        background: var(--mavi);
    }

    .k-limit-cubuk.mor span {
        background: var(--mor);
    }

    .k-limit-cubuk.turuncu span {
        background: var(--altin);
    }

    .k-limit-cubuk.turkuaz span {
        background: var(--turkuaz);
    }

.k-uyari-satir {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .42rem 0;
    font-size: .82rem;
    line-height: 1.3;
}

    .k-uyari-satir .ikon-rozet {
        width: 2rem;
        height: 2rem;
        border-radius: 9px;
    }

    .k-uyari-satir strong {
        display: block;
    }

    .k-uyari-satir small {
        color: var(--metin-soluk);
    }

.k-halka-kutu {
    position: relative;
    width: 128px;
    margin: .1rem auto .35rem;
}

.k-halka {
    width: 100%;
    height: auto;
    display: block;
    transform: rotate(-90deg);
}

    .k-halka circle {
        fill: none;
        stroke-width: 11;
    }

.k-halka-iz {
    stroke: var(--cizgi);
}

.k-halka-dolu {
    stroke: var(--altin);
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 32;
}

.k-halka-metin {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    line-height: 1.15;
}

    .k-halka-metin strong {
        font-family: var(--font-baslik);
        font-size: 1.55rem;
    }

    .k-halka-metin span {
        font-size: .78rem;
        color: var(--metin-soluk);
    }

.k-halka-alt {
    text-align: center;
    font-size: .78rem;
    color: var(--metin-soluk);
    margin: 0 0 .55rem;
}

.k-mini-hedef {
    display: grid;
    grid-template-columns: 6.6rem 1fr 2.2rem;
    gap: .5rem;
    align-items: center;
    font-size: .8rem;
    padding: .32rem 0;
}

    .k-mini-hedef small {
        text-align: right;
        color: var(--metin-soluk);
    }

.k-rapor-ozet {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .7rem;
    border-radius: 12px;
    background: var(--basari-zemin);
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: .6rem;
}

    .k-rapor-ozet .ikon-rozet {
        width: 2rem;
        height: 2rem;
        border-radius: 9px;
    }

.k-kategoriler {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .k-kategoriler li {
        display: grid;
        grid-template-columns: 5.4rem 1fr 2.2rem;
        gap: .5rem;
        align-items: center;
        font-size: .8rem;
        padding: .38rem 0;
    }

    .k-kategoriler small {
        text-align: right;
        color: var(--metin-soluk);
    }

.k-telefon-alt span {
    transition: color .3s;
}

    .k-telefon-alt span:first-child {
        color: inherit;
    }

    .k-telefon-alt span.aktif {
        color: var(--altin-koyu);
    }

.k-yuzen-1 {
    left: -104px;
    top: 56%;
}

.k-yuzen-2 {
    right: -86px;
    top: 12%;
}

.k-yuzen-3 {
    right: -64px;
    bottom: 9%;
}

/* --- Sayilar --- */
.k-sayilar {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.5rem 3.5rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

    .k-sayilar > div {
        background: var(--yuzey);
        border: 1px solid var(--cizgi);
        border-radius: 18px;
        padding: 1.1rem 1.25rem;
    }

    .k-sayilar strong {
        display: block;
        font-family: var(--font-baslik);
        font-size: 1.9rem;
        font-weight: 800;
        color: var(--lacivert);
        font-variant-numeric: tabular-nums;
        line-height: 1.15;
    }

    .k-sayilar > div > span {
        color: var(--metin-soluk);
        font-size: .92rem;
    }

/* =====================================================================
   KARSILAMA: bolumler
   ===================================================================== */
.k-bolum {
    position: relative;
}

.k-bolum-zemin {
    background: var(--yuzey);
    border-top: 1px solid var(--cizgi);
    border-bottom: 1px solid var(--cizgi);
}

.k-baslik {
    max-width: 46rem;
    margin: 0 auto 2.5rem;
    text-align: center;
}

    .k-baslik h2 {
        font-size: clamp(1.9rem, 3.4vw, 2.7rem);
        margin-bottom: .6rem;
    }

    .k-baslik p {
        color: var(--metin-soluk);
        font-size: 1.07rem;
        margin: 0 auto;
        max-width: 40rem;
    }

.k-ust-baslik {
    display: inline-block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--altin-koyu);
    margin-bottom: .6rem;
}

/* --- Dertler --- */
.dert-izgara {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
}

.dert-kart {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: 1.4rem;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: 20px;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

    .dert-kart:hover {
        transform: translateY(-4px);
        box-shadow: var(--golge);
        border-color: color-mix(in srgb, var(--altin) 45%, var(--cizgi));
    }

.dert-metin {
    font-family: var(--font-baslik);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
}

.dert-cozum {
    margin-top: auto;
    padding-top: .9rem;
    border-top: 1px dashed var(--cizgi);
}

    .dert-cozum > span {
        display: inline-block;
        font-size: .74rem;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: var(--gelir);
        margin-bottom: .3rem;
    }

    .dert-cozum p {
        margin: 0;
        color: var(--metin-soluk);
        font-size: .95rem;
    }

/* --- Moduller --- */
.modul-suzgec {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-bottom: 2rem;
}

    .modul-suzgec button {
        min-height: 40px;
        padding: .45rem 1.05rem;
        border-radius: 999px;
        border: 1.5px solid var(--cizgi);
        background: var(--kagit);
        color: var(--metin);
        font: 600 .93rem/1 var(--font-govde);
        cursor: pointer;
        transition: background-color .15s, color .15s, border-color .15s;
    }

        .modul-suzgec button:hover {
            border-color: var(--metin-soluk);
        }

        .modul-suzgec button.aktif {
            background: var(--birincil-zemin);
            color: var(--birincil-metin);
            border-color: transparent;
        }

.modul-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.1rem;
}

.modul-kart {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding: 1.35rem;
    background: var(--kagit);
    border: 1px solid var(--cizgi);
    border-radius: 18px;
    transition: transform .2s, border-color .2s, box-shadow .2s;
}

    .modul-kart[hidden] {
        display: none;
    }

    .modul-kart:hover {
        transform: translateY(-3px);
        border-color: color-mix(in srgb, var(--altin) 50%, var(--cizgi));
        box-shadow: var(--golge);
    }

    .modul-kart h3 {
        font-size: 1.1rem;
        margin: .15rem 0 0;
    }

    .modul-kart p {
        margin: 0;
        color: var(--metin-soluk);
        font-size: .94rem;
    }

    .modul-kart.suzuldu {
        animation: suzuldu .35s ease both;
    }

@keyframes suzuldu {
    from {
        opacity: 0;
        transform: scale(.96) translateY(8px);
    }
}

.modul-etiket {
    list-style: none;
    padding: 0;
    margin: auto 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

    .modul-etiket li {
        font-size: .76rem;
        font-weight: 600;
        padding: .22rem .6rem;
        border-radius: 999px;
        background: var(--yuzey);
        border: 1px solid var(--cizgi);
        color: var(--metin-soluk);
    }

/* --- Hikaye: tirtildan kelebege --- */
.k-hikaye {
    position: relative;
    background: var(--murekkep);
    color: #FFFFFF;
    overflow: hidden;
}

    .k-hikaye::before {
        content: "";
        position: absolute;
        width: 640px;
        height: 640px;
        right: -200px;
        top: -260px;
        border-radius: 50%;
        background: radial-gradient(closest-side, rgba(249, 115, 22, .22), transparent);
    }

    .k-hikaye .k-ust-baslik {
        color: #FDBA74;
    }

    .k-hikaye h2 {
        font-size: clamp(1.9rem, 3.4vw, 2.7rem);
        color: #FFFFFF;
    }

.hikaye-ic {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 3rem;
    align-items: center;
}

.hikaye-metin > p {
    color: #C3CCDF;
    font-size: 1.05rem;
    max-width: 34rem;
}

.hikaye-adimlar {
    list-style: none;
    padding: 0;
    margin: 1.75rem 0 0;
    display: grid;
    gap: .6rem;
}

    .hikaye-adimlar button {
        width: 100%;
        display: grid;
        gap: .2rem;
        text-align: left;
        padding: .85rem 1.1rem;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, .12);
        background: rgba(255, 255, 255, .04);
        color: #C3CCDF;
        font: inherit;
        cursor: pointer;
        transition: background-color .25s, border-color .25s;
    }

        .hikaye-adimlar button:hover {
            border-color: rgba(255, 255, 255, .3);
        }

        .hikaye-adimlar button strong {
            color: #FFFFFF;
            font-family: var(--font-baslik);
            font-size: 1.02rem;
        }

        .hikaye-adimlar button span {
            font-size: .92rem;
        }

        .hikaye-adimlar button[aria-pressed="true"] {
            background: rgba(249, 115, 22, .15);
            border-color: #F97316;
        }

            .hikaye-adimlar button[aria-pressed="true"] strong {
                color: #FDBA74;
            }

.hikaye-sahne {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: radial-gradient(circle at 72% 28%, rgba(249, 115, 22, .2), transparent 60%), rgba(255, 255, 255, .03);
}

    .hikaye-sahne svg {
        width: 100%;
        height: 100%;
        display: block;
    }

.hikaye-etiket {
    position: absolute;
    left: 1.1rem;
    bottom: .5rem;
    margin: 0;
    font-size: .8rem;
    color: rgba(255, 255, 255, .5);
}

.hs-zemin {
    fill: none;
    stroke: #FFFFFF;
    stroke-opacity: .45;
    stroke-width: 3;
    stroke-dasharray: 7 7;
    stroke-linecap: round;
    transition: stroke-opacity .6s;
}

.hikaye-sahne[data-asama="3"] .hs-zemin {
    stroke-opacity: .85;
}

.hs-tirtil {
    transition: opacity .6s ease;
}

.hs-halka {
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1.2);
}

    .hs-halka.h0 {
        fill: #2563EB;
    }

    .hs-halka.h1 {
        fill: #F97316;
    }

    .hs-halka.h2 {
        fill: #22C55E;
    }

    .hs-halka.h3 {
        fill: #A855F7;
    }

    .hs-halka.h4 {
        fill: #14B8A6;
    }

    .hs-halka.h5 {
        fill: #F59E0B;
    }

.hs-bas {
    transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

    .hs-bas circle:first-child {
        fill: #FB923C;
    }

.hs-goz {
    fill: #0D1830;
}

.hs-anten {
    fill: none;
    stroke: #FB923C;
    stroke-width: 3;
    stroke-linecap: round;
}

/* Asama 0: kisa tirtil (3 halka), bas geride */
.hikaye-sahne[data-asama="0"] .hs-ek {
    opacity: 0;
    transform: scale(.2);
}

.hikaye-sahne[data-asama="0"] .hs-bas {
    transform: translateX(-78px);
}

/* Asama 2-3: tirtil kozaya doner */
.hikaye-sahne[data-asama="2"] .hs-tirtil,
.hikaye-sahne[data-asama="3"] .hs-tirtil {
    opacity: 0;
}

.hs-koza {
    opacity: 0;
    transform: scale(.3);
    transform-box: fill-box;
    transform-origin: center bottom;
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1.2);
}

    .hs-koza ellipse {
        fill: #FDBA74;
        stroke: #F97316;
        stroke-width: 2;
    }

.hs-koza-cizgi {
    fill: none;
    stroke: #F97316;
    stroke-opacity: .7;
    stroke-width: 2;
    stroke-linecap: round;
}

.hikaye-sahne[data-asama="2"] .hs-koza {
    opacity: 1;
    transform: none;
}

.hs-koza-ic {
    transform-box: fill-box;
    transform-origin: center bottom;
}

.hs-kelebek {
    opacity: 0;
    transform: scale(.2);
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity .7s ease, transform .8s cubic-bezier(.2, .8, .2, 1.2);
}

.hikaye-sahne[data-asama="3"] .hs-kelebek {
    opacity: 1;
    transform: none;
}

.hs-kelebek .kb-kanat path {
    fill: #FFFFFF;
}

    .hs-kelebek .kb-kanat path.alt {
        fill: #F97316;
    }

.hs-kelebek .kb-govde {
    fill: #FDBA74;
}

/* --- Nasil calisir (yeni) --- */
.k-adimlar li {
    position: relative;
    transition: transform .2s, box-shadow .2s;
}

    .k-adimlar li:hover {
        transform: translateY(-3px);
        box-shadow: var(--golge);
    }

    .k-adimlar li::before {
        background: var(--altin);
        color: #FFFFFF;
    }

/* --- Guvenlik --- */
.guven-izgara {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.1rem;
}

.guven-kart {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding: 1.4rem;
    background: var(--kagit);
    border: 1px solid var(--cizgi);
    border-radius: 18px;
}

    .guven-kart h3 {
        font-size: 1.1rem;
        margin: .2rem 0 0;
    }

    .guven-kart p {
        margin: 0;
        color: var(--metin-soluk);
        font-size: .94rem;
    }

/* --- Uygulama --- */
.k-indir .k-ust-baslik {
    margin-bottom: .4rem;
}

/* --- SSS --- */
.sss-ic {
    max-width: 860px;
}

.sss-liste details {
    background: var(--kagit);
    border: 1px solid var(--cizgi);
    border-radius: 14px;
    margin-bottom: .7rem;
    padding: 0 1.2rem;
    transition: border-color .2s;
}

    .sss-liste details[open] {
        border-color: color-mix(in srgb, var(--altin) 55%, var(--cizgi));
    }

.sss-liste summary {
    cursor: pointer;
    list-style: none;
    padding: 1.05rem 0;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

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

    .sss-liste summary::after {
        content: "+";
        flex: none;
        font-size: 1.5rem;
        line-height: 1;
        color: var(--altin-koyu);
        transition: transform .2s;
    }

.sss-liste details[open] summary::after {
    transform: rotate(45deg);
}

.sss-liste details p {
    margin: 0 0 1.1rem;
    color: var(--metin-soluk);
}

/* --- Takip et --- */
.takip-kart {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 2rem;
    align-items: center;
    padding: 2.25rem;
    border-radius: 24px;
    border: 1px solid var(--cizgi);
    background: linear-gradient(135deg, var(--altin-soluk) 0%, var(--yuzey) 70%);
}

    .takip-kart h2 {
        font-size: clamp(1.6rem, 3vw, 2.2rem);
    }

    .takip-kart p {
        color: var(--metin-soluk);
        margin: 0;
    }

.takip-linkler {
    display: grid;
    gap: .7rem;
}

.sosyal-buyuk {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .8rem 1rem;
    border-radius: 16px;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    text-decoration: none;
    transition: transform .2s, border-color .2s, box-shadow .2s;
}

    .sosyal-buyuk:hover {
        transform: translateX(4px);
        border-color: var(--altin);
        box-shadow: var(--golge);
    }

    .sosyal-buyuk strong {
        display: block;
    }

    .sosyal-buyuk small {
        color: var(--metin-soluk);
    }

.sosyal-buyuk-ikon {
    width: 2.7rem;
    height: 2.7rem;
    flex: none;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #FFFFFF;
    background: var(--murekkep);
}

.sosyal-instagram .sosyal-buyuk-ikon {
    background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF);
}

.sosyal-tiktok .sosyal-buyuk-ikon {
    background: #111111;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15);
}

.sosyal-youtube .sosyal-buyuk-ikon {
    background: #FF0000;
}

/* =====================================================================
   KARSILAMA: hareketler (sadece "hareketi azalt" kapaliysa)
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
    .k-kahraman-metin > * {
        animation: kGiris .7s cubic-bezier(.2, .8, .2, 1) both;
    }

    .k-kahraman-metin > :nth-child(2) {
        animation-delay: .08s;
    }

    .k-kahraman-metin > :nth-child(3) {
        animation-delay: .16s;
    }

    .k-kahraman-metin > :nth-child(4) {
        animation-delay: .24s;
    }

    .k-kahraman-metin > :nth-child(n+5) {
        animation-delay: .32s;
    }

    .k-onizleme {
        animation: kGiris .9s cubic-bezier(.2, .8, .2, 1) .2s both;
    }

        .k-onizleme .telefon {
            animation: suzul 7s ease-in-out 1.2s infinite;
        }

    .k-nokta {
        animation: nabiz 2s ease-out infinite;
    }

    .k-isik-1 {
        animation: isikKay 14s ease-in-out infinite alternate;
    }

    .k-isik-2 {
        animation: isikKay 18s ease-in-out infinite alternate-reverse;
    }

    .kb-kanat {
        animation: kanat .42s ease-in-out infinite alternate;
    }

    .k-yuzen {
        animation: kGiris .7s cubic-bezier(.2, .8, .2, 1) both, yuzenSalla 5s ease-in-out infinite;
    }

    .k-yuzen-1 {
        animation-delay: .7s, 1.4s;
    }

    .k-yuzen-2 {
        animation-delay: .95s, 2.2s;
    }

    .k-yuzen-3 {
        animation-delay: 1.2s, 3s;
    }

    .k-ekran.aktif .k-limit-cubuk span {
        animation: dolum 1s cubic-bezier(.2, .8, .2, 1) .15s both;
    }

    .k-ekran.aktif .k-halka-dolu {
        animation: halkaDol 1.2s cubic-bezier(.2, .8, .2, 1) .1s both;
    }

    .k-ekran.aktif .grafik span {
        animation: yuksel .8s cubic-bezier(.2, .8, .2, 1) both;
    }

    .hs-halka {
        animation: halkaZipla 1.4s ease-in-out infinite;
    }

        .hs-halka.h1 {
            animation-delay: .1s;
        }

        .hs-halka.h2 {
            animation-delay: .2s;
        }

        .hs-halka.h3 {
            animation-delay: .3s;
        }

        .hs-halka.h4 {
            animation-delay: .4s;
        }

        .hs-halka.h5 {
            animation-delay: .5s;
        }

    .hikaye-sahne[data-asama="0"] .hs-ek {
        animation: none;
    }

    .hs-koza-ic {
        animation: kozaSalla 1.8s ease-in-out infinite;
    }

    .hs-kelebek-ic {
        animation: kelebekSuzul 3s ease-in-out infinite;
    }
}

@keyframes kGiris {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
}

@keyframes suzul {
    50% {
        transform: translateY(-10px);
    }
}

@keyframes nabiz {
    0% {
        box-shadow: 0 0 0 0 rgba(249, 115, 22, .55);
    }

    80%, 100% {
        box-shadow: 0 0 0 9px rgba(249, 115, 22, 0);
    }
}

@keyframes isikKay {
    to {
        transform: translate(-60px, 40px) scale(1.08);
    }
}

@keyframes kanat {
    to {
        transform: scaleX(.3);
    }
}

@keyframes yuzenSalla {
    50% {
        transform: translateY(-8px);
    }
}

@keyframes dolum {
    from {
        transform: scaleX(0);
    }
}

@keyframes halkaDol {
    from {
        stroke-dashoffset: 100;
    }
}

@keyframes halkaZipla {
    50% {
        transform: translateY(-5px);
    }
}

@keyframes kozaSalla {
    0%, 100% {
        transform: rotate(-4deg);
    }

    50% {
        transform: rotate(4deg);
    }
}

@keyframes kelebekSuzul {
    50% {
        transform: translateY(-4px);
    }
}

/* =====================================================================
   ICERIK SAYFALARI (yeni): hakkimizda, iletisim, yasal sayfalar
   ===================================================================== */
.sayfa-kahraman {
    position: relative;
    overflow: hidden;
    background: var(--murekkep);
    color: #FFFFFF;
}

    .sayfa-kahraman::after {
        content: "";
        position: absolute;
        width: 560px;
        height: 560px;
        right: -180px;
        top: -240px;
        border-radius: 50%;
        background: radial-gradient(closest-side, rgba(249, 115, 22, .25), transparent);
        pointer-events: none;
    }

.sayfa-kahraman-ic {
    position: relative;
    z-index: 1;
    max-width: 1080px;
    margin: 0 auto;
    padding: 4rem 1.5rem 3.5rem;
}

.sayfa-kahraman .k-ust-baslik {
    color: #FDBA74;
}

.sayfa-kahraman h1 {
    font-size: clamp(2.3rem, 5vw, 3.6rem);
    font-weight: 800;
    max-width: 18ch;
    margin-bottom: 1rem;
}

.sayfa-kahraman p {
    color: #C3CCDF;
    font-size: 1.12rem;
    max-width: 44rem;
    margin: 0;
}

.icerik-ic {
    max-width: 1080px;
    margin: 0 auto;
    padding: 3.5rem 1.5rem;
}

.icerik-iki {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

.icerik-blok h2 {
    font-size: clamp(1.6rem, 2.8vw, 2.1rem);
}

.icerik-blok p {
    color: var(--metin-soluk);
    font-size: 1.03rem;
}

.alinti {
    margin: 1.5rem 0 0;
    padding: 1.2rem 1.4rem;
    border-left: 4px solid var(--altin);
    border-radius: 0 14px 14px 0;
    background: var(--altin-soluk);
    font-family: var(--font-baslik);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.4;
}

/* Misyon / vizyon kartlari */
.mv-izgara {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
}

.mv-kart {
    padding: 1.6rem;
    border-radius: 20px;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
}

    .mv-kart h3 {
        font-size: 1.3rem;
        margin: .8rem 0 .4rem;
    }

    .mv-kart p {
        margin: 0;
        color: var(--metin-soluk);
    }

/* Isim ve logo hikayesi */
.fikir-izgara {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
}

.fikir-kart {
    padding: 1.4rem;
    border-radius: 18px;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
}

    .fikir-kart h3 {
        font-size: 1.12rem;
        margin: .7rem 0 .35rem;
    }

    .fikir-kart p {
        margin: 0;
        color: var(--metin-soluk);
        font-size: .95rem;
    }

.fikir-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: 2rem 1.5rem;
    margin-bottom: 1.25rem;
    border-radius: 20px;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
}

    .fikir-logo .logo-ikon,
    .fikir-logo .logo-yazi {
        height: 4.2rem;
    }

    .fikir-logo .gorunmez {
        position: absolute;
    }

/* Yol haritasi */
.yol-haritasi {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .9rem;
    position: relative;
}

    .yol-haritasi li {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 1rem;
        align-items: start;
        padding: 1.1rem 1.25rem;
        border-radius: 16px;
        background: var(--yuzey);
        border: 1px solid var(--cizgi);
    }

    .yol-haritasi strong {
        display: block;
        font-family: var(--font-baslik);
        font-size: 1.05rem;
    }

    .yol-haritasi p {
        margin: .2rem 0 0;
        color: var(--metin-soluk);
        font-size: .95rem;
    }

.durum-rozet {
    display: inline-block;
    margin-left: .4rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    vertical-align: middle;
    background: var(--altin-soluk);
    color: var(--altin-koyu);
}

    .durum-rozet.tamam {
        background: var(--basari-zemin);
        color: var(--gelir);
    }

/* Iletisim */
.iletisim-duzen {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 2rem;
    align-items: start;
}

.iletisim-kartlar {
    display: grid;
    gap: .9rem;
}

.iletisim-kart2 {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.25rem;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: 18px;
}

    .iletisim-kart2 h3 {
        font-size: 1.05rem;
        margin: 0 0 .2rem;
    }

    .iletisim-kart2 p {
        margin: 0 0 .35rem;
        color: var(--metin-soluk);
        font-size: .92rem;
    }

    .iletisim-kart2 a {
        font-weight: 600;
        color: var(--metin);
        word-break: break-all;
    }

.iletisim-form-kart {
    padding: 1.75rem;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: 22px;
    box-shadow: var(--golge);
}

    .iletisim-form-kart h2 {
        font-size: 1.5rem;
        margin-bottom: .3rem;
    }

    .iletisim-form-kart > p {
        color: var(--metin-soluk);
        margin-bottom: 1.4rem;
    }

.tur-secici {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    border: 0;
    padding: 0;
    margin: 0 0 1.2rem;
}

    .tur-secici legend {
        font-weight: 600;
        font-size: .92rem;
        margin-bottom: .45rem;
        padding: 0;
    }

    .tur-secici label {
        position: relative;
        cursor: pointer;
    }

    .tur-secici input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .tur-secici span {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        min-height: 40px;
        padding: .45rem .95rem;
        border-radius: 999px;
        border: 1.5px solid var(--cizgi);
        background: var(--kagit);
        font-weight: 600;
        font-size: .9rem;
        transition: border-color .15s, background-color .15s, color .15s;
    }

    .tur-secici input:checked + span {
        border-color: var(--altin);
        background: var(--altin-soluk);
        color: var(--altin-koyu);
    }

    .tur-secici input:focus-visible + span {
        outline: 3px solid var(--altin);
        outline-offset: 2px;
    }

.tuzak-alan { /* botlar icin gizli alan: insanlar gormez, doldurmaz */
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.karakter-sayaci {
    display: block;
    text-align: right;
    font-size: .8rem;
    color: var(--metin-soluk);
    margin-top: .25rem;
}

.form-onay {
    align-items: flex-start;
    font-size: .9rem;
    color: var(--metin-soluk);
    margin-bottom: 1.2rem;
}

    .form-onay input {
        margin-top: .2rem;
        flex: none;
    }

    .form-onay a {
        color: var(--metin);
        font-weight: 600;
    }

.gonderildi-kutu {
    text-align: center;
    padding: 1.5rem .5rem;
}

    .gonderildi-kutu .ikon-rozet {
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 50%;
        margin-bottom: 1rem;
    }

    .gonderildi-kutu h2 {
        font-size: 1.5rem;
    }

    .gonderildi-kutu p {
        color: var(--metin-soluk);
    }

/* Yasal sayfalar */
.yasal-duzen {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

.yasal-icindekiler {
    position: sticky;
    top: 90px;
    padding: 1.1rem;
    border-radius: 16px;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    font-size: .9rem;
}

    .yasal-icindekiler strong {
        display: block;
        margin-bottom: .5rem;
    }

    .yasal-icindekiler ol {
        margin: 0;
        padding-left: 1.1rem;
        display: grid;
        gap: .35rem;
    }

    .yasal-icindekiler a {
        color: var(--metin-soluk);
        text-decoration: none;
    }

        .yasal-icindekiler a:hover {
            color: var(--metin);
            text-decoration: underline;
        }

.yasal-metin {
    max-width: 760px;
}

    .yasal-metin h2 {
        font-size: 1.35rem;
        margin: 2.2rem 0 .7rem;
        scroll-margin-top: 90px;
    }

        .yasal-metin h2:first-child {
            margin-top: 0;
        }

    .yasal-metin p,
    .yasal-metin li {
        color: var(--metin-soluk);
        line-height: 1.65;
    }

    .yasal-metin li {
        margin-bottom: .35rem;
    }

    .yasal-metin strong {
        color: var(--metin);
    }

    .yasal-metin a {
        color: var(--metin);
        font-weight: 600;
    }

.yasal-tablo {
    width: 100%;
    border-collapse: collapse;
    margin: .5rem 0 1.25rem;
    font-size: .92rem;
}

.yasal-tablo-kap {
    overflow-x: auto;
}

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

.yasal-tablo th {
    background: var(--yuzey);
    font-weight: 600;
}

.yasal-tablo td {
    color: var(--metin-soluk);
}

.yasal-not {
    padding: 1rem 1.2rem;
    border-radius: 14px;
    background: var(--altin-soluk);
    border: 1px solid color-mix(in srgb, var(--altin) 40%, transparent);
    color: var(--metin);
    font-size: .95rem;
    margin-bottom: 1.5rem;
}

.yasal-dil-notu {
    display: none;
}

html[lang="en"] .yasal-dil-notu {
    display: block;
}

.yasal-guncelleme {
    font-size: .88rem;
    color: #C3CCDF;
    margin-top: 1rem !important;
}

/* =====================================================================
   IPHONE: ANA EKRANA EKLE REHBERI (app.js > Uygulama)
   ===================================================================== */
.ios-adimlar {
    list-style: none;
    counter-reset: ios;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: .7rem;
}

    .ios-adimlar li {
        counter-increment: ios;
        display: grid;
        grid-template-columns: auto 1fr;
        gap: .85rem;
        align-items: center;
        padding: .85rem 1rem;
        border-radius: 14px;
        background: var(--kagit);
        border: 1px solid var(--cizgi);
    }

.ios-simge {
    position: relative;
    width: 2.6rem;
    height: 2.6rem;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--mavi-zemin);
    color: var(--mavi);
}

    .ios-simge::after {
        content: counter(ios);
        position: absolute;
        top: -6px;
        left: -6px;
        width: 1.25rem;
        height: 1.25rem;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: var(--altin);
        color: #FFFFFF;
        font-size: .72rem;
        font-weight: 700;
    }

/* =====================================================================
   YENI SAYFALAR: genis / orta / dar ekran
   ===================================================================== */
@media (max-width: 1000px) {
    .dert-izgara,
    .fikir-izgara {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .k-sayilar {
        grid-template-columns: repeat(2, 1fr);
    }

    .site-alt-ic {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 900px) {
    .k-kahraman-ic,
    .hikaye-ic,
    .icerik-iki,
    .iletisim-duzen,
    .takip-kart,
    .yasal-duzen {
        grid-template-columns: 1fr;
    }

    .k-kahraman-ic {
        padding-top: 2.5rem;
        gap: 3rem;
    }

    .k-yuzen-1 {
        left: -70px;
    }

    .k-yuzen-2,
    .k-yuzen-3 {
        right: -56px;
    }

    .site-menu-sosyal {
        display: flex;
        justify-content: space-between;
        padding: .7rem 0;
        border-bottom: 1px solid var(--cizgi);
    }

    .site-menu-sosyal-baslik {
        display: inline;
        font-weight: 500;
        color: var(--metin);
    }

    .yasal-icindekiler {
        position: static;
    }

    .mv-izgara {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .dert-izgara,
    .guven-izgara,
    .fikir-izgara,
    .site-alt-ic {
        grid-template-columns: 1fr;
    }

    .k-sayilar {
        gap: .7rem;
    }

        .k-sayilar > div {
            padding: .9rem 1rem;
        }

        .k-sayilar strong {
            font-size: 1.55rem;
        }

    .k-yuzen {
        display: none;
    }

    .k-onizleme {
        max-width: 300px;
    }

    .k-ekranlar {
        height: 330px;
    }

    .k-ekran .onizleme-satirlari li:nth-child(3),
    .k-ekran .k-kategoriler li:nth-child(5),
    .k-ekran .k-mini-hedef + .k-mini-hedef {
        display: none;
    }


    .takip-kart,
    .iletisim-form-kart {
        padding: 1.4rem;
    }

    .cerez-bandi {
        grid-template-columns: 1fr;
        bottom: .75rem;
        gap: .7rem;
    }

        .cerez-bandi > .ikon-rozet {
            display: none;
        }

    .cerez-eylemler .buton {
        flex: 1;
    }

    .site-alt-telif {
        flex-direction: column;
        align-items: flex-start;
    }

    .logo-ikon,
    .logo-yazi {
        height: 1.85rem;
    }

    .uyg-ust .logo-yazi { /* dar ekranda ust cubukta sadece ikon */
        display: none;
    }

    .sayfa-kahraman-ic {
        padding: 3rem 1.25rem 2.5rem;
    }

    .icerik-ic {
        padding: 2.5rem 1.25rem;
    }
}

@media (max-width: 380px) {
    .site-ust .logo-yazi {
        height: 1.55rem;
    }

    .site-ust .logo-ikon {
        height: 1.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .belir-hazir [data-belir] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .k-ekran,
    .cerez-bandi {
        transition: none;
    }
}


.form-onay-link {
    margin: -.9rem 0 1.1rem 1.6rem;
    font-size: .85rem;
}

    .form-onay-link a {
        color: var(--metin);
        font-weight: 600;
    }

.tur-secici + .ikili {
    margin-top: .25rem;
}

/* =====================================================================
   KARSILAMA (guncelleme 2): kayan ozellik seridi, kisa dertler,
   telefonda taksit / yatirim ekranlari, iki sutunlu S.S.S.,
   sorunlar ve cozumler sayfasi (cozumler.html)
   ===================================================================== */

/* --- Kayan ozellik seridi: genis ekranda 5 kart gorunur, surekli sola akar --- */
.k-ozellik-ic {
    padding-bottom: 0;
}

.serit-dis {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.5rem 4.5rem;
}

.serit {
    container-type: inline-size;
    overflow: hidden;
    padding: .5rem 0 1rem;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.serit-ray {
    --serit-kart: calc((100cqw - 5rem) / 5);
    display: flex;
    width: max-content;
}

.serit-kart {
    flex: 0 0 var(--serit-kart);
    margin-right: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    min-height: 220px;
    padding: 1.4rem 1.3rem;
    background: var(--kagit);
    border: 1px solid var(--cizgi);
    border-radius: 18px;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

    .serit-kart:hover {
        border-color: color-mix(in srgb, var(--altin) 50%, var(--cizgi));
        box-shadow: var(--golge);
        transform: translateY(-3px);
    }

    .serit-kart h3 {
        font-size: 1.12rem;
        margin: .2rem 0 0;
    }

    .serit-kart p {
        margin: 0;
        color: var(--metin-soluk);
        font-size: .94rem;
    }

/* Akis ve surukleme JavaScript ile (Index.html): transform her karede guncellenir */
.serit {
    cursor: grab;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}

    .serit.surukleniyor {
        cursor: grabbing;
    }

        .serit.surukleniyor .serit-kart {
            transition: none;
            transform: none;
        }

    .serit:focus-visible {
        outline: 3px solid var(--altin);
        outline-offset: 4px;
        border-radius: 18px;
    }

.serit-ray {
    will-change: transform;
}

    .serit-ray.yumusak {
        transition: transform .35s ease;
    }

/* --- Dertler: anasayfada 4 kart --- */
.dert-izgara-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.k-orta-eylem {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

    .k-orta-eylem .ikon {
        transition: transform .2s;
    }

    .k-orta-eylem .buton:hover .ikon {
        transform: translateX(3px);
    }

/* --- Telefon: taksit tablosu --- */
.k-taksit-tablo {
    display: grid;
    grid-template-columns: 4.6rem repeat(4, minmax(0, 1fr));
    gap: .3rem;
    font-size: .74rem;
    margin-bottom: .8rem;
}

.tk-bas {
    text-align: center;
    font-weight: 600;
    color: var(--metin-soluk);
    padding-bottom: .15rem;
}

.tk-ad {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-weight: 600;
    line-height: 1.2;
}

    .tk-ad small {
        font-weight: 400;
        color: var(--metin-soluk);
    }

.tk-hucre {
    display: grid;
    place-items: center;
    height: 2.3rem;
    border-radius: 8px;
    background: var(--kagit);
    border: 1px solid var(--cizgi);
    font-variant-numeric: tabular-nums;
}

    .tk-hucre.odendi {
        background: var(--basari-zemin);
        border-color: transparent;
        color: var(--gelir);
        font-weight: 700;
        font-size: .9rem;
    }

.k-turuncu-ozet {
    background: var(--altin-soluk);
}

.k-telefon-alt {
    padding-left: .2rem;
    padding-right: .2rem;
}

/* --- S.S.S.: genis ekranda iki sutun --- */
.sss-ic {
    max-width: 1080px;
}

.sss-liste {
    column-count: 2;
    column-gap: 1rem;
}

    .sss-liste details {
        break-inside: avoid;
        display: block;
    }

.k-baslik p + p {
    margin-top: .5rem;
}

/* --- Sorunlar ve cozumler sayfasi --- */
.cozum-liste {
    display: grid;
    gap: 1.25rem;
}

.cozum-satir {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 2rem;
    padding: 1.6rem;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: 22px;
}

.cozum-sol {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.cozum-no {
    position: absolute;
    top: -.2rem;
    right: 0;
    font-family: var(--font-baslik);
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    color: var(--altin-soluk);
}

.cozum-sol .dert-metin {
    font-size: 1.2rem;
}

.cozum-sol .dert-cozum {
    margin-top: 0;
}

.cozum-sag {
    padding: 1.25rem 1.35rem;
    border-radius: 16px;
    background: var(--kagit);
}

    .cozum-sag h3 {
        font-size: 1rem;
        margin-bottom: .8rem;
    }

.cozum-adimlar {
    list-style: none;
    counter-reset: cz;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .75rem;
}

    .cozum-adimlar li {
        counter-increment: cz;
        display: grid;
        grid-template-columns: 1.7rem 1fr;
        gap: .6rem;
        color: var(--metin-soluk);
        font-size: .95rem;
    }

        .cozum-adimlar li::before {
            content: counter(cz);
            width: 1.7rem;
            height: 1.7rem;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: var(--altin);
            color: #FFFFFF;
            font-size: .8rem;
            font-weight: 700;
        }

/* --- Ekran genisligine gore --- */
@media (max-width: 1000px) {
    .serit-ray {
        --serit-kart: calc((100cqw - 2.5rem) / 3);
    }

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

@media (max-width: 900px) {
    .cozum-satir {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .sss-liste {
        column-count: 1;
    }
}

@media (max-width: 640px) {
    .serit-ray {
        --serit-kart: 72cqw;
    }

    .serit-kart {
        margin-right: .9rem;
        min-height: 200px;
    }

    .serit-dis {
        padding: 0 1rem 3.5rem;
    }

    .dert-izgara-4 {
        grid-template-columns: 1fr;
    }

    .cozum-satir {
        padding: 1.2rem;
    }
}

/* Uygulama ekranlari hareketi azalt acikken de doner; sadece kayma olmadan */
@media (prefers-reduced-motion: reduce) {
    .k-ekran {
        transform: none;
    }
}

/* Yuzen kartlar telefonun disina tasinsin, ekrani kapatmasin; dar ekranda gizlensin */
.k-yuzen-1 {
    left: -150px;
    top: 62%;
}

.k-yuzen-2 {
    right: -130px;
    top: 8%;
}

@media (max-width: 1100px) {
    .k-yuzen {
        display: none;
    }
}

/* Ust menu: S.S.S. eklenince genis ekranda da sigsin */
.site-ust-ic {
    gap: 1rem;
}

@media (min-width: 901px) {
    .site-menu {
        gap: 1.15rem;
    }

        .site-menu > a {
            font-size: .95rem;
        }

    .site-menu-sosyal .sosyal-ikonlar a {
        width: 32px;
        height: 32px;
    }
}

/* Tablet / kucuk dizustu (901-1080 px): menu tek satira sigsin diye iki baglanti
   alt bilgide kalir (Nasil calisir, Uygulama) */
@media (min-width: 901px) and (max-width: 1080px) {
    .site-menu > a[href="/index.html#nasil"],
    .site-menu > a[href="/index.html#uygulama"],
    .site-menu-ayrac {
        display: none;
    }

    .site-menu {
        gap: 1rem;
    }
}

/* =====================================================================
   TELEFON BILDIRIMI (karsilama sayfasi): telefonun ustunden kayarak gelir.
   Eski yuzen kartlarin yerine; ekrandaki yazilari kalici olarak kapatmaz.
   ===================================================================== */
.k-bildirim {
    position: absolute;
    z-index: 3;
    top: 44px;
    left: .6rem;
    right: .6rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .55rem;
    align-items: center;
    padding: .55rem .7rem;
    border-radius: 16px;
    background: color-mix(in srgb, var(--yuzey) 88%, transparent);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    backdrop-filter: blur(12px) saturate(1.4);
    border: 1px solid var(--cizgi);
    box-shadow: 0 12px 26px -12px rgba(15, 23, 42, .45);
    font-size: .74rem;
    line-height: 1.3;
    opacity: 0;
    transform: translateY(-130%);
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s ease;
    pointer-events: none;
}

    .k-bildirim.acik {
        opacity: 1;
        transform: none;
    }

    .k-bildirim .logo-isaret {
        width: 1.9rem;
        height: 1.35rem;
    }

.k-bildirim-metin strong {
    display: block;
    font-size: .76rem;
}

.k-bildirim small {
    align-self: start;
    color: var(--metin-soluk);
    font-size: .68rem;
}

@media (prefers-reduced-motion: reduce) {
    .k-bildirim {
        transform: none;
    }
}

/* =====================================================================
   BASA DON BUTONU (app.js > YukariCik): yukari bakan tirtil.
   Basilinca tirtil kaybolur, yerinden kelebek cikip yukari ucar.
   ===================================================================== */
.yukari-cik {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 60;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--cizgi);
    background: var(--yuzey);
    box-shadow: 0 14px 30px -14px rgba(15, 23, 42, .5), 0 2px 6px rgba(15, 23, 42, .08);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(.9);
    transition: opacity .3s ease, transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .3s, border-color .2s;
}

    .yukari-cik.gorunur {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity .3s ease, transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s, border-color .2s;
    }

    .yukari-cik:hover {
        border-color: var(--altin);
    }

.tirtil-svg {
    width: 30px;
    height: 36px;
    overflow: visible;
}

.tr-h1 {
    fill: #2563EB;
}

.tr-h2 {
    fill: #22C55E;
}

.tr-h3 {
    fill: #A855F7;
}

.tr-kafa {
    fill: #F97316;
}

.tr-goz {
    fill: #0D1830;
}

.tr-anten {
    fill: none;
    stroke: #F97316;
    stroke-width: 2.2;
    stroke-linecap: round;
}

.tr-h,
.tr-bas {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .35s ease, opacity .3s ease;
}

/* Donusum: halkalar ve bas kuculup kaybolur, kelebek cikar */
.yukari-cik.donusuyor .tr-h,
.yukari-cik.donusuyor .tr-bas {
    opacity: 0;
    transform: scale(.2);
}

.yukari-kelebek {
    position: fixed;
    z-index: 61;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    pointer-events: none;
    animation: kelebekYukari 1.6s cubic-bezier(.45, 0, .3, 1) forwards;
}

    .yukari-kelebek svg {
        width: 100%;
        height: 100%;
        overflow: visible;
    }

    .yukari-kelebek .kb-kanat {
        animation: kanat .16s ease-in-out infinite alternate;
    }

@keyframes kelebekYukari {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(.3);
    }

    15% {
        opacity: 1;
        transform: translate(0, -10px) scale(1);
    }

    40% {
        transform: translate(-28px, -32vh) rotate(-12deg) scale(1);
    }

    70% {
        opacity: 1;
        transform: translate(16px, -62vh) rotate(10deg) scale(.9);
    }

    100% {
        opacity: 0;
        transform: translate(-10px, -100vh) rotate(-6deg) scale(.7);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .yukari-cik.gorunur:not(.donusuyor) .tr-h {
        animation: tirtilYuru 1.3s ease-in-out infinite;
    }

    .yukari-cik.gorunur:not(.donusuyor) .tr-h2 {
        animation-delay: .12s;
    }

    .yukari-cik.gorunur:not(.donusuyor) .tr-h3 {
        animation-delay: .24s;
    }

    .yukari-cik.gorunur:not(.donusuyor) .tr-bas {
        animation: tirtilYuru 1.3s ease-in-out .36s infinite;
    }

    .yukari-cik:hover .tirtil-svg {
        transform: translateY(-3px);
        transition: transform .2s;
    }
}

@keyframes tirtilYuru {
    50% {
        transform: translateY(-2.5px) scale(1.06);
    }
}

/* Cerez bandi acikken onun ustunde dursun */
body:has(.cerez-bandi) .yukari-cik {
    bottom: 7.5rem;
}

@media (max-width: 640px) {
    .yukari-cik {
        right: .9rem;
        bottom: .9rem;
        width: 52px;
        height: 52px;
    }

    body:has(.cerez-bandi) .yukari-cik {
        bottom: 12.5rem;
    }
}


/* =====================================================================
   DEMO: karsilama sayfasindaki "Kayit olmadan dene" alanlari
   (kahraman butonu + not, kahramanin altindaki demo bandi, alttaki cagri)
   ===================================================================== */
.buton-demo {
    background: var(--altin-soluk);
    color: var(--altin-koyu);
    border: 1.5px solid color-mix(in srgb, var(--altin) 45%, transparent);
    position: relative;
}

    .buton-demo:hover {
        background: var(--altin);
        color: #FFFFFF;
        border-color: var(--altin);
    }

@media (prefers-reduced-motion: no-preference) {
    .k-kahraman .buton-demo {
        animation: demoNabiz 2.6s ease-out 1.5s infinite;
    }
}

@keyframes demoNabiz {
    0% {
        box-shadow: 0 0 0 0 rgba(249, 115, 22, .45);
    }

    70%, 100% {
        box-shadow: 0 0 0 12px rgba(249, 115, 22, 0);
    }
}

.k-demo-not {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: .9rem 0 0;
    font-size: .9rem;
    color: var(--metin-soluk);
}

    .k-demo-not .ikon {
        color: var(--altin-koyu);
        flex: none;
    }

/* --- Demo bandi --- */
.demo-bant-bolum .bolum-ic {
    padding-top: 1rem;
    padding-bottom: 3rem;
}

.demo-bant {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2.5rem;
    align-items: center;
    padding: 2.4rem 2.6rem;
    border-radius: 26px;
    color: #FFFFFF;
    background: linear-gradient(120deg, #1E3A8A 0%, #2747A3 55%, #3B2F7A 100%);
    box-shadow: 0 24px 50px -28px rgba(30, 58, 138, .8);
}

    .demo-bant::before {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        right: -120px;
        top: -180px;
        border-radius: 50%;
        background: radial-gradient(closest-side, rgba(249, 115, 22, .35), transparent);
        pointer-events: none;
    }

.demo-bant-metin {
    position: relative;
}

    .demo-bant-metin .k-ust-baslik {
        color: #FDBA74;
    }

    .demo-bant-metin h2 {
        font-size: clamp(1.7rem, 3vw, 2.3rem);
        color: #FFFFFF;
        margin-bottom: .6rem;
    }

    .demo-bant-metin p {
        color: #C9D3EA;
        max-width: 40rem;
        margin: 0 0 1.1rem;
    }

.demo-bant-ozellik {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

    .demo-bant-ozellik li {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        padding: .35rem .8rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, .1);
        border: 1px solid rgba(255, 255, 255, .16);
        font-size: .86rem;
        font-weight: 600;
    }

        .demo-bant-ozellik li .ikon {
            color: #FDBA74;
        }

.demo-bant-saat {
    position: relative;
    width: 190px;
    height: 190px;
}

    .demo-bant-saat svg {
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
    }

.db-iz,
.db-dolu {
    fill: none;
    stroke-width: 9;
}

.db-iz {
    stroke: rgba(255, 255, 255, .14);
}

.db-dolu {
    stroke: #F97316;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .demo-bant.belirdi .db-dolu,
    html:not(.belir-hazir) .db-dolu {
        animation: demoSaat 15s linear infinite;
    }
}

@keyframes demoSaat {
    to {
        stroke-dashoffset: 100;
    }
}

.demo-bant-sure {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    padding: 0 1.6rem;
}

    .demo-bant-sure strong {
        font-family: var(--font-baslik);
        font-size: 2.4rem;
        font-weight: 800;
        line-height: 1.1;
        font-variant-numeric: tabular-nums;
    }

    .demo-bant-sure span {
        font-size: .8rem;
        color: #C9D3EA;
        line-height: 1.3;
    }

/* --- Alttaki cagri: iki buton --- */
.cagri-eylem {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.buton-cagri-demo {
    background: transparent;
    color: #FFFFFF;
    border: 1.5px solid rgba(255, 255, 255, .45);
}

    .buton-cagri-demo:hover {
        background: rgba(255, 255, 255, .12);
        border-color: #FFFFFF;
    }

@media (max-width: 900px) {
    .demo-bant {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 2rem 1.6rem;
    }

    .demo-bant-saat {
        display: none;
    }
}

@media (max-width: 640px) {
    .k-eylemler .buton {
        flex: 1 1 100%;
    }

    .demo-bant .buton {
        width: 100%;
    }

    .cagri-eylem {
        width: 100%;
    }

        .cagri-eylem .buton {
            flex: 1;
        }
}


/* =====================================================================
   YUKLENIYOR EKRANI: ozel metin (orn. "Demo hazirlaniyor, ornek veriler yukleniyor")
   app.js > Yukleyici.goster(metin) <html data-yukleyici-metin="..."> yazar.
   ===================================================================== */
html[data-yukleyici-metin]::after {
    content: attr(data-yukleyici-metin);
}

/* Ozel metinli ekran (orn. "Kayit olmadan dene"ye basinca) bir butona basilinca acildigi icin
   gecikmesiz gelsin: kullanici tikladiginin karsiligini hemen gorsun */
html[data-yukleyici-metin]::before,
html[data-yukleyici-metin]::after {
    transition-delay: 0s !important;
    animation-delay: 0s !important;
}


/* =====================================================================
   BLOG - herkese acik sayfalar (/blog, /blog/{slug})
   Sayfalar sunucuda uretilir (Helpers/BlogSablonlari.cs); ust menu ve alt
   bilgi Site.kur() ile gelir. Her kategorinin rengi --kat degiskeninde
   (.kat-xxx); kart kapagi, rozet ve vurgular bu rengi kullanir.
   ===================================================================== */
.blog-sayfa {
    --kat: var(--altin);
    max-width: 1120px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 3.5rem;
}

.kat-butce {
    --kat: #F97316;
}

.kat-birikim {
    --kat: #0F9D67;
}

.kat-kredi-karti {
    --kat: #2F6FEB;
}

.kat-borc-ve-kredi {
    --kat: #7A5AF8;
}

.kat-yatirim {
    --kat: #0E9AA7;
}

.kat-finansal-okuryazarlik {
    --kat: #C98410;
}

.kat-genel {
    --kat: #64748B;
}

[data-tema="koyu"] .kat-kredi-karti {
    --kat: #7EA6FF;
}

[data-tema="koyu"] .kat-borc-ve-kredi {
    --kat: #A99BFF;
}

[data-tema="koyu"] .kat-genel {
    --kat: #9AA6C1;
}

.blog-yol {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
    margin-bottom: 1.4rem;
    font-size: .88rem;
    color: var(--metin-soluk);
}

    .blog-yol a {
        color: var(--metin-soluk);
        text-decoration: none;
    }

        .blog-yol a:hover {
            color: var(--metin);
            text-decoration: underline;
        }

/* ---------------- Liste ---------------- */
.blog-liste-ust h1 {
    font-size: clamp(2.2rem, 4.5vw, 3rem);
    margin-bottom: .6rem;
}

.blog-liste-ust .giris-metni {
    font-size: 1.1rem;
    color: var(--metin-soluk);
    margin: 0 0 1.75rem;
    max-width: 62ch;
}

.blog-ara {
    display: flex;
    align-items: center;
    gap: .6rem;
    max-width: 560px;
    padding: .35rem .4rem .35rem .9rem;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .blog-ara:focus-within {
        border-color: var(--murekkep-acik);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--mavi) 18%, transparent);
    }

    .blog-ara svg {
        width: 19px;
        height: 19px;
        flex-shrink: 0;
        fill: none;
        stroke: var(--metin-soluk);
        stroke-width: 2;
        stroke-linecap: round;
    }

    .blog-ara input {
        flex: 1;
        min-width: 0;
        border: 0;
        background: none;
        font: inherit;
        color: var(--metin);
        padding: .45rem 0;
        outline: none;
    }

.blog-filtreler {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1.1rem 0 .9rem;
}

    .blog-filtreler a {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        padding: .42rem .9rem;
        border: 1px solid var(--cizgi);
        border-radius: 999px;
        background: var(--yuzey);
        color: var(--metin);
        font-size: .9rem;
        font-weight: 500;
        text-decoration: none;
        transition: border-color .15s ease, background .15s ease;
    }

        .blog-filtreler a span {
            font-size: .78rem;
            color: var(--metin-soluk);
        }

        .blog-filtreler a:hover {
            border-color: var(--kat, var(--murekkep));
        }

        .blog-filtreler a[aria-current="page"] {
            background: var(--murekkep);
            border-color: var(--murekkep);
            color: #FFFFFF;
        }

            .blog-filtreler a[aria-current="page"] span {
                color: rgba(255, 255, 255, .75);
            }

.blog-sonuc {
    font-size: .9rem;
    color: var(--metin-soluk);
    margin: 0 0 1.25rem;
}

    .blog-sonuc a {
        margin-left: .5rem;
    }

.blog-kartlar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
}

.blog-kart {
    position: relative;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--yaricap);
    overflow: hidden;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

    .blog-kart:hover {
        border-color: var(--kat);
        box-shadow: var(--golge);
        transform: translateY(-2px);
    }

    .blog-kart > a {
        display: flex;
        flex-direction: column;
        height: 100%;
        color: inherit;
        text-decoration: none;
    }

/* Kapak: lacivert zemin + kategori rengi isigi + kesikli "takip" cizgisi (logodaki dikis) */
.blog-kapak {
    position: relative;
    display: flex;
    align-items: flex-end;
    aspect-ratio: 16 / 8.2;
    padding: 1.1rem 1.25rem;
    overflow: hidden;
    background: radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--kat) 60%, transparent), transparent 55%), linear-gradient(135deg, #10203F 0%, #1E3A8A 100%);
}

.blog-kapak-cizgi {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

    .blog-kapak-cizgi path {
        fill: none;
        stroke: color-mix(in srgb, var(--kat) 75%, #FFFFFF);
        stroke-width: 2.5;
        stroke-dasharray: 7 7;
        stroke-linecap: round;
        stroke-linejoin: round;
        vector-effect: non-scaling-stroke;
        opacity: .5;
    }

.blog-kapak-ikon {
    position: absolute;
    top: .9rem;
    right: .9rem;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .14);
}

    .blog-kapak-ikon svg {
        width: 24px;
        height: 24px;
        fill: none;
        stroke: color-mix(in srgb, var(--kat) 55%, #FFFFFF);
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.blog-kapak-baslik {
    position: relative;
    max-width: 85%;
    font-family: var(--font-baslik);
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.25;
    color: #FFFFFF;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-rozet {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .28rem .7rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
    text-decoration: none;
}

    .blog-rozet::before {
        content: "";
        width: .45rem;
        height: .45rem;
        border-radius: 50%;
        background: var(--kat);
    }

.blog-kart .blog-rozet {
    position: absolute;
    top: .9rem;
    left: .9rem;
    background: rgba(10, 18, 36, .55);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #FFFFFF;
    backdrop-filter: blur(6px);
}

.blog-kart-govde {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    flex: 1;
    padding: 1.1rem 1.25rem 1.25rem;
}

.blog-kart-bilgi {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0;
    font-size: .82rem;
    color: var(--metin-soluk);
}

.blog-kart h2,
.blog-kart h3 {
    margin: 0;
    font-size: 1.16rem;
    line-height: 1.3;
    color: var(--metin);
}

.blog-kart-ozet {
    flex: 1;
    margin: 0;
    font-size: .93rem;
    line-height: 1.55;
    color: var(--metin-soluk);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-kart-devam {
    margin-top: .35rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--kat);
}

    .blog-kart-devam span {
        display: inline-block;
        transition: transform .15s ease;
    }

.blog-kart:hover .blog-kart-devam span {
    transform: translateX(3px);
}

.blog-sayfalama {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    margin-top: 2rem;
    color: var(--metin-soluk);
}

/* Elle yuklenmis kapak gorseli: kart kapaginin yerine gecer */
.blog-kapak-gorsel {
    padding: 0;
    background: #10203F;
}

    .blog-kapak-gorsel img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .3s ease;
    }

.blog-kart:hover .blog-kapak-gorsel img {
    transform: scale(1.03);
}

/* ---------------- Yazi ---------------- */
.blog-yazi-ust {
    max-width: 860px;
    margin-bottom: 2.25rem;
    padding-bottom: 1.6rem;
    border-bottom: 1px solid var(--cizgi);
}

    .blog-yazi-ust .blog-rozet {
        background: color-mix(in srgb, var(--kat) 14%, transparent);
        color: var(--kat);
        margin-bottom: .9rem;
    }

    .blog-yazi-ust h1 {
        font-size: clamp(1.95rem, 4.3vw, 2.8rem);
        line-height: 1.15;
        margin: 0 0 .9rem;
    }

.blog-ozet {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--metin-soluk);
    max-width: 68ch;
    margin: 0 0 1rem;
}

.blog-bilgi {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    font-size: .9rem;
    color: var(--metin-soluk);
}


/* Yazinin basindaki buyuk kapak gorseli (baslik ile icerik arasinda, tam genislik) */
.blog-kapak-buyuk {
    margin: 0 0 2.5rem;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--cizgi);
    background: #10203F;
    aspect-ratio: 1200 / 630;
    box-shadow: var(--golge);
}

    .blog-kapak-buyuk img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.blog-yazi-ust:has(+ .blog-kapak-buyuk) {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 1.75rem;
}

.blog-duzen {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}

.blog-icindekiler {
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    padding: 1.1rem 1.15rem;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--yaricap);
}

    .blog-icindekiler summary {
        cursor: pointer;
        list-style: none;
        font-size: .76rem;
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--metin-soluk);
    }

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

    .blog-icindekiler ol {
        margin: .8rem 0 0;
        padding-left: 1.25rem;
    }

    .blog-icindekiler li {
        margin: 0 0 .55rem;
        font-size: .93rem;
        line-height: 1.4;
    }

        .blog-icindekiler li::marker {
            color: var(--metin-soluk);
            font-size: .85rem;
        }

    .blog-icindekiler a {
        color: var(--metin);
        text-decoration: none;
    }

        .blog-icindekiler a:hover {
            color: var(--kat);
        }

        .blog-icindekiler a.aktif {
            color: var(--kat);
            font-weight: 600;
        }

.blog-yazi {
    max-width: 720px;
    font-size: 1.06rem;
    line-height: 1.75;
}

    .blog-yazi h2 {
        font-size: clamp(1.3rem, 2.6vw, 1.6rem);
        line-height: 1.3;
        margin: 2.4rem 0 .8rem;
        scroll-margin-top: 90px;
    }

    .blog-yazi .blog-giris + h2 {
        margin-top: 2rem;
    }

    .blog-yazi ul {
        padding-left: 1.3rem;
        margin: 0 0 1.2rem;
    }

    .blog-yazi li {
        margin-bottom: .4rem;
    }

        .blog-yazi li::marker {
            color: var(--kat);
        }

    .blog-yazi strong {
        color: var(--metin);
        font-weight: 600;
    }

.blog-giris p:first-child {
    font-size: 1.12rem;
    color: var(--metin);
}

.blog-sss {
    margin-top: 2.6rem;
}

    .blog-sss h2 {
        scroll-margin-top: 90px;
    }

.blog-sss-oge {
    border: 1px solid var(--cizgi);
    border-radius: var(--yaricap-kucuk);
    background: var(--yuzey);
    margin-bottom: .6rem;
}

    .blog-sss-oge summary {
        cursor: pointer;
        padding: .9rem 1.1rem;
        font-weight: 600;
        list-style: none;
        display: flex;
        justify-content: space-between;
        gap: 1rem;
    }

        .blog-sss-oge summary::-webkit-details-marker {
            display: none;
        }

        .blog-sss-oge summary::after {
            content: "+";
            color: var(--kat);
            font-size: 1.3rem;
            line-height: 1;
            flex-shrink: 0;
        }

    .blog-sss-oge[open] summary::after {
        content: "−";
    }

    .blog-sss-oge p {
        margin: 0;
        padding: 0 1.1rem 1rem;
        color: var(--metin-soluk);
    }

.blog-etiketler {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
}

    .blog-etiketler li {
        margin: 0;
        padding: .2rem .7rem;
        border-radius: 999px;
        background: color-mix(in srgb, var(--kat) 12%, transparent);
        color: var(--kat);
        font-size: .8rem;
        font-weight: 600;
    }

.blog-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin: 2.4rem 0 1.5rem;
    padding: 1.4rem 1.6rem;
    border-radius: var(--yaricap);
    background: linear-gradient(135deg, #10203F 0%, #1E3A8A 100%);
    color: #FFFFFF;
}

    .blog-cta strong {
        display: block;
        font-family: var(--font-baslik);
        font-size: 1.2rem;
        color: #FFFFFF;
        margin-bottom: .2rem;
    }

    .blog-cta p {
        margin: 0;
        color: rgba(255, 255, 255, .78);
        font-size: .95rem;
    }

.blog-yasal {
    font-size: .85rem;
    line-height: 1.6;
    color: var(--metin-soluk);
    border-top: 1px solid var(--cizgi);
    padding-top: 1rem;
}

.blog-diger {
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--cizgi);
}

    .blog-diger > h2 {
        font-size: 1.4rem;
        margin-bottom: 1.1rem;
    }

@media (max-width: 900px) {
    .blog-duzen {
        display: block;
    }

    .blog-icindekiler {
        position: static;
        max-height: none;
        margin-bottom: 1.75rem;
    }

        .blog-icindekiler summary {
            display: flex;
            justify-content: space-between;
        }

            .blog-icindekiler summary::after {
                content: "+";
                font-size: 1.1rem;
                line-height: 1;
                color: var(--kat);
            }

        .blog-icindekiler details[open] summary::after {
            content: "−";
        }
}

@media (max-width: 600px) {
    .blog-sayfa {
        padding: 1.75rem 1rem 3rem;
    }

    .blog-kartlar {
        grid-template-columns: 1fr;
    }

    .blog-yazi {
        font-size: 1rem;
    }

    .blog-cta {
        padding: 1.2rem;
    }

        .blog-cta .buton {
            width: 100%;
            justify-content: center;
        }
}

/* =====================================================================
   ADMIN PANELI > BLOG
   ===================================================================== */
.mesaj-bilgi {
    background: var(--mavi-zemin);
    border-color: var(--mavi);
}

.alan-ipucu {
    display: block;
    margin-top: .25rem;
    font-size: .8rem;
    color: var(--metin-soluk);
    text-align: right;
}

.blg-baslik {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--metin);
    text-align: left;
    cursor: pointer;
}

    .blg-baslik:hover,
    .blg-baslik:focus-visible {
        color: var(--altin-koyu);
        text-decoration: underline;
    }

.blg-tablo td .rozet {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}

.blg-donen {
    display: inline-block;
    width: .8rem;
    height: .8rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: don .8s linear infinite;
    flex-shrink: 0;
}

.blg-bekle {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    padding: .9rem 1rem;
    margin-bottom: 1rem;
    border-radius: var(--yaricap-kucuk);
    background: var(--mavi-zemin);
    color: var(--mavi);
}

    .blg-bekle .blg-donen {
        margin-top: .3rem;
    }

    .blg-bekle p {
        margin: 0;
        color: var(--metin);
    }

.blg-pencere #bpAlt {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.blg-kategori {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1rem;
}

    .blg-kategori label {
        font-weight: 600;
        font-size: .92rem;
    }

    .blg-kategori select {
        min-width: 14rem;
    }

.blg-kapak-yonet {
    margin-bottom: 1.25rem;
    padding: 1rem;
    border: 1px solid var(--cizgi);
    border-radius: var(--yaricap-kucuk);
}

    .blg-kapak-yonet .adm-alt-baslik {
        margin-top: 0;
    }

.blg-kapak-onizleme {
    display: grid;
    place-items: center;
    aspect-ratio: 1200 / 630;
    max-width: 420px;
    margin-bottom: .9rem;
    border-radius: var(--yaricap-kucuk);
    overflow: hidden;
    background: var(--kagit);
    border: 1px dashed var(--cizgi);
    text-align: center;
}

    .blg-kapak-onizleme img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .blg-kapak-onizleme span {
        padding: 1rem;
        font-size: .88rem;
        color: var(--metin-soluk);
    }

.blg-kapak-form input[type="file"] {
    width: 100%;
    font: inherit;
    font-size: .9rem;
}

.blg-istek {
    margin-bottom: 1rem;
}

    .blg-istek summary {
        cursor: pointer;
        font-weight: 600;
        padding: .4rem 0;
    }

    .blg-istek dd {
        white-space: pre-line;
        overflow-wrap: anywhere;
    }

.blg-onizleme {
    max-height: 55vh;
    overflow-y: auto;
    padding: 1rem 1.2rem;
    border: 1px solid var(--cizgi);
    border-radius: var(--yaricap-kucuk);
    background: var(--kagit);
    line-height: 1.65;
}

    .blg-onizleme h3 {
        font-size: 1.05rem;
        margin: 1.3rem 0 .4rem;
    }

    .blg-onizleme ul {
        padding-left: 1.2rem;
    }

.blg-ozet {
    font-style: italic;
    color: var(--metin-soluk);
    border-bottom: 1px dashed var(--cizgi);
    padding-bottom: .8rem;
}

.blg-revize[hidden],
#blogEylemler[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .blg-donen {
        animation: none;
    }

    .blog-kart,
    .blog-kart:hover,
    .blog-kart:hover .blog-kapak-gorsel img {
        transition: none;
        transform: none;
    }
}

/* Admin > Blog > yeni yazi formu: kapak gorseli ve yapay zeka secimi */
.blg-form-kapak-ic {
    display: grid;
    grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
    gap: .9rem;
    align-items: start;
}

    .blg-form-kapak-ic .blg-kapak-onizleme {
        margin-bottom: 0;
    }

        .blg-form-kapak-ic .blg-kapak-onizleme span {
            padding: .6rem;
            font-size: .78rem;
        }

    .blg-form-kapak-ic input[type="text"] {
        margin-top: .1rem;
    }

.blg-form-alt-etiket {
    margin-top: .7rem;
}

.alan-ipucu.blg-sol,
.alan-ipucu.blg-ai-ipucu {
    text-align: left;
}

@media (max-width: 640px) {
    .blg-form-kapak-ic {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   BLOG: TABLO VE GRAFIKLER (AI veriyi verir, Helpers/BlogSablonlari cizer)
   Renk kategori renginden (--kat); halka dilimleri sabit palet (satir ici).
   ===================================================================== */
.blog-sekil {
    max-width: 720px;
    margin: 1.6rem 0 1.9rem;
    padding: 1.1rem 1.2rem 1rem;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--yaricap);
}

    .blog-sekil figcaption {
        margin-bottom: .85rem;
        font-family: var(--font-baslik);
        font-size: 1.02rem;
        font-weight: 700;
        line-height: 1.35;
        color: var(--metin);
    }

.blog-sekil-not {
    margin: .75rem 0 0;
    font-size: .8rem;
    line-height: 1.45;
    color: var(--metin-soluk);
}

.blog-tablo-kap {
    overflow-x: auto;
}

.blog-tablo {
    width: 100%;
    border-collapse: collapse;
    font-size: .93rem;
    line-height: 1.45;
}

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

    .blog-tablo thead th {
        font-size: .84rem;
        font-weight: 600;
        color: var(--metin);
        white-space: nowrap;
        background: color-mix(in srgb, var(--kat) 10%, transparent);
        border-bottom: 2px solid color-mix(in srgb, var(--kat) 40%, var(--cizgi));
    }

    .blog-tablo tbody th {
        font-weight: 600;
    }

    .blog-tablo tbody tr:last-child > * {
        border-bottom: none;
    }

.blog-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    color: var(--kat);
}

.bg-cubuk {
    fill: currentColor;
}

.bg-eksen {
    stroke: var(--cizgi);
    stroke-width: 1.5;
}

.bg-cizgi {
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.bg-alan {
    fill: currentColor;
    opacity: .12;
}

.bg-nokta {
    fill: var(--yuzey);
    stroke: currentColor;
    stroke-width: 3;
}

.bg-deger {
    fill: var(--metin);
    font: 600 13px var(--font-govde);
}

.bg-etiket {
    fill: var(--metin-soluk);
    font: 12px var(--font-govde);
}

.bg-halka-iz {
    stroke: var(--kagit);
}

.blog-halka {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 1.75rem;
}

.blog-halka-svg {
    flex: none;
    width: 190px;
}

.blog-sekil .blog-lejant {
    flex: 1;
    min-width: 210px;
    display: grid;
    gap: .55rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .blog-sekil .blog-lejant li {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        gap: .6rem;
        align-items: center;
        margin: 0;
        max-width: none;
        font-size: .93rem;
        line-height: 1.35;
    }

        .blog-sekil .blog-lejant li::marker {
            content: none;
        }

        .blog-sekil .blog-lejant li i {
            width: .8rem;
            height: .8rem;
            border-radius: 3px;
        }

        .blog-sekil .blog-lejant li small {
            min-width: 3.2rem;
            text-align: right;
            color: var(--metin-soluk);
        }

/* Telefonda SVG kuculunce yazilar okunur kalsin */
@media (max-width: 600px) {
    .blog-sekil {
        padding: .95rem .9rem .85rem;
    }

    .bg-deger {
        font-size: 26px;
    }

    .bg-etiket {
        font-size: 23px;
    }

    /* Cok cubuk / noktada degerler ust uste binmesin: deger, dokununca (title) ve altta etiketle okunur */
    .blog-svg-kalabalik .bg-deger,
    .blog-svg-kalabalik .bg-ara {
        display: none;
    }

    .blog-halka-svg {
        width: 170px;
        margin: 0 auto;
    }
}

/* Admin onizlemesi: blog sayfasiyla ayni cizim */
.blg-onizleme.blog-yazi {
    max-width: none;
    font-size: .98rem;
}

    .blg-onizleme.blog-yazi h2 {
        font-size: 1.2rem;
        margin: 1.6rem 0 .6rem;
    }

/* =====================================================================
   INDIR (Excel / PDF) - app.js > Indir
   ===================================================================== */
.rp-indir {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-left: auto;
}

.indir-alan {
    margin-top: 1rem;
}

.indir-etiket {
    display: block;
    font-weight: 600;
    font-size: .875rem;
    margin-bottom: .4rem;
}

.indir-kapsam {
    flex-wrap: wrap;
}

.indir-bicimler {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-top: 1.25rem;
}

.indir-bicim {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem;
    border: 1px solid var(--cizgi);
    border-radius: 12px;
    background: var(--yuzey);
    color: var(--metin);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

    .indir-bicim:hover:not(:disabled),
    .indir-bicim:focus-visible {
        border-color: var(--turuncu);
        box-shadow: 0 0 0 3px var(--turuncu-zemin);
    }

    .indir-bicim:disabled {
        opacity: .6;
        cursor: progress;
    }

.indir-bicim-metin {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

    .indir-bicim-metin small {
        color: var(--metin-soluk);
        font-size: .75rem;
        line-height: 1.35;
    }

.indir-mesaj {
    margin-top: 1rem;
}

@media (max-width: 480px) {
    .indir-bicimler {
        grid-template-columns: 1fr;
    }

    .rp-indir {
        margin-left: 0;
    }
}