

:root {

    color-scheme: light;

    --renk-ana:          #1d5fd6;
    --renk-ana-koyu:     #1749a8;
    --renk-ana-acik:     #eaf1fd;
    --renk-basari:       #0f9d58;
    --renk-basari-acik:  #e6f6ee;
    --renk-uyari:        #d98500;
    --renk-uyari-acik:   #fdf3e2;
    --renk-tehlike:      #d13438;
    --renk-tehlike-acik: #fdecec;
    --renk-bilgi:        #0b7fa8;
    --renk-bilgi-acik:   #e5f4fa;
    --renk-notr:         #64748b;
    --renk-notr-acik:    #f1f5f9;

    --zemin:        #f4f6fa;
    --yuzey:        #ffffff;
    --yuzey-2:      #f8fafc;
    --kenar:        #e2e8f0;
    --kenar-koyu:   #cbd5e1;
    --metin:        #16202e;
    --metin-2:      #556274;
    --metin-3:      #8695a8;

    --golge-1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --golge-2: 0 4px 12px rgba(16, 24, 40, .08);
    --golge-3: 0 12px 32px rgba(16, 24, 40, .14);

    --yuvarlak-s: 6px;
    --yuvarlak:   10px;
    --yuvarlak-l: 16px;

    --yan-menu-genislik: 264px;
    --ust-cubuk-yukseklik: 60px;

    --yazi: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
            "Noto Sans Georgian", "Noto Sans", Arial, sans-serif;
    --gecis: 160ms cubic-bezier(.4, 0, .2, 1);
}

[data-tema="koyu"] {
    color-scheme: dark;

    --renk-ana-acik:     #16233c;
    --renk-basari-acik:  #10261c;
    --renk-uyari-acik:   #2b2110;
    --renk-tehlike-acik: #2d1618;
    --renk-bilgi-acik:   #10242c;
    --renk-notr-acik:    #1b2534;

    --zemin:      #0e1520;
    --yuzey:      #151d2b;
    --yuzey-2:    #1b2534;
    --kenar:      #263246;
    --kenar-koyu: #35435c;
    --metin:      #e7edf5;
    --metin-2:    #a7b4c6;
    --metin-3:    #7a889c;

    --golge-1: 0 1px 2px rgba(0, 0, 0, .4);
    --golge-2: 0 4px 14px rgba(0, 0, 0, .45);
    --golge-3: 0 14px 36px rgba(0, 0, 0, .55);
}

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

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

body {
    margin: 0;
    font-family: var(--yazi);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--metin);
    background: var(--zemin);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--renk-ana); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5 { margin: 0 0 .5rem; font-weight: 650; line-height: 1.25; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }
h4 { font-size: .95rem; }
p  { margin: 0 0 .75rem; }

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

hr { border: 0; border-top: 1px solid var(--kenar); margin: 1.25rem 0; }

code, kbd, pre {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .875em;
}

pre {
    background: var(--yuzey-2);
    border: 1px solid var(--kenar);
    border-radius: var(--yuvarlak);
    padding: .875rem 1rem;
    overflow-x: auto;
}

::selection { background: var(--renk-ana); color: #fff; }

:focus-visible { outline: 2px solid var(--renk-ana); outline-offset: 2px; }

.ikon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.15em; }

.kabuk { display: flex; min-height: 100vh; }

.yan-menu {
    width: var(--yan-menu-genislik);
    flex: none;
    background: var(--yuzey);
    border-right: 1px solid var(--kenar);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 40;
}

.yan-menu__marka {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--kenar);
    font-weight: 700;
    font-size: .98rem;
    color: var(--metin);
    position: sticky;
    top: 0;
    background: var(--yuzey);
    z-index: 2;
}
.yan-menu__marka:hover { text-decoration: none; }

.marka-logo {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--renk-ana), #3b82f6);
    color: #fff;
    display: grid; place-items: center;
    font-weight: 700; font-size: .95rem;
    flex: none;
}

.marka-ad { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.marka-ad small { font-weight: 500; font-size: .72rem; color: var(--metin-3); }
.marka-ad span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.menu-liste { list-style: none; margin: 0; padding: .6rem .6rem 1.5rem; }

.menu-baslik {
    padding: .9rem .65rem .3rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--metin-3);
}

.menu-liste a {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .52rem .65rem;
    border-radius: var(--yuvarlak-s);
    color: var(--metin-2);
    font-weight: 500;
    transition: background var(--gecis), color var(--gecis);
}
.menu-liste a:hover { background: var(--yuzey-2); color: var(--metin); text-decoration: none; }
.menu-liste a.aktif { background: var(--renk-ana-acik); color: var(--renk-ana); font-weight: 620; }
.menu-liste a .ikon { color: currentColor; opacity: .85; }
.menu-liste .menu-sayac {
    margin-left: auto;
    background: var(--renk-tehlike);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    padding: .05rem .38rem;
    border-radius: 99px;
    min-width: 18px;
    text-align: center;
}

.icerik { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.ust-cubuk {
    height: var(--ust-cubuk-yukseklik);
    background: var(--yuzey);
    border-bottom: 1px solid var(--kenar);
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0 1.15rem;
    position: sticky;
    top: 0;
    z-index: 30;
}

.sayfa { padding: 1.25rem; flex: 1; }
.sayfa--dar { max-width: 860px; margin: 0 auto; width: 100%; }
.sayfa--orta { max-width: 1180px; margin: 0 auto; width: 100%; }

.sayfa-basi {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}
.sayfa-basi h1 { margin: 0; }
.sayfa-basi .alt { color: var(--metin-2); font-size: .875rem; margin-top: .15rem; }
.sayfa-basi__islem { display: flex; gap: .5rem; flex-wrap: wrap; }

.kirinti { display: flex; gap: .35rem; align-items: center; font-size: .8rem; color: var(--metin-3); margin-bottom: .35rem; flex-wrap: wrap; }
.kirinti a { color: var(--metin-2); }
.kirinti span::after { content: "/"; margin-left: .35rem; color: var(--kenar-koyu); }
.kirinti span:last-child::after { content: ""; }

.kart {
    background: var(--yuzey);
    border: 1px solid var(--kenar);
    border-radius: var(--yuvarlak);
    box-shadow: var(--golge-1);
}
.kart + .kart { margin-top: 1rem; }

.kart__bas {
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--kenar);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}
.kart__bas h2, .kart__bas h3 { margin: 0; font-size: .98rem; }
.kart__govde { padding: 1.1rem; }
.kart__govde--sifir { padding: 0; }
.kart__alt {
    padding: .75rem 1.1rem;
    border-top: 1px solid var(--kenar);
    background: var(--yuzey-2);
    border-radius: 0 0 var(--yuvarlak) var(--yuvarlak);
}

.izgara { display: grid; gap: 1rem; }
.izgara--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.izgara--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.izgara--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.izgara--otomatik { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.izgara--yan { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }

.olcum {
    background: var(--yuzey);
    border: 1px solid var(--kenar);
    border-radius: var(--yuvarlak);
    padding: .95rem 1.05rem;
    box-shadow: var(--golge-1);
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    transition: transform var(--gecis), box-shadow var(--gecis);
}
a.olcum:hover { transform: translateY(-1px); box-shadow: var(--golge-2); text-decoration: none; }

.olcum__ikon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: grid; place-items: center;
    background: var(--renk-ana-acik);
    color: var(--renk-ana);
    flex: none;
}
.olcum__ikon .ikon { width: 20px; height: 20px; }
.olcum__ikon--basari  { background: var(--renk-basari-acik);  color: var(--renk-basari); }
.olcum__ikon--uyari   { background: var(--renk-uyari-acik);   color: var(--renk-uyari); }
.olcum__ikon--tehlike { background: var(--renk-tehlike-acik); color: var(--renk-tehlike); }
.olcum__ikon--bilgi   { background: var(--renk-bilgi-acik);   color: var(--renk-bilgi); }
.olcum__ikon--notr    { background: var(--renk-notr-acik);    color: var(--renk-notr); }

.olcum__govde { min-width: 0; }
.olcum__etiket { font-size: .78rem; color: var(--metin-2); font-weight: 500; }
.olcum__deger { font-size: 1.42rem; font-weight: 680; letter-spacing: -.02em; line-height: 1.2; color: var(--metin); }
.olcum__alt { font-size: .74rem; color: var(--metin-3); margin-top: .1rem; }

.tablo-sarici { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.tablo { width: 100%; border-collapse: collapse; font-size: .875rem; }
table.tablo th {
    text-align: left;
    font-weight: 620;
    font-size: .74rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--metin-3);
    padding: .6rem .85rem;
    border-bottom: 1px solid var(--kenar);
    background: var(--yuzey-2);
    white-space: nowrap;
}
table.tablo td { padding: .68rem .85rem; border-bottom: 1px solid var(--kenar); vertical-align: middle; }
table.tablo tbody tr:last-child td { border-bottom: 0; }
table.tablo tbody tr:hover { background: var(--yuzey-2); }
table.tablo .sag { text-align: right; }
table.tablo .orta { text-align: center; }
table.tablo .dar { width: 1%; white-space: nowrap; }
table.tablo .kalin { font-weight: 620; }
table.tablo th a { color: inherit; display: inline-flex; align-items: center; gap: .25rem; }

.tablo--sik td, .tablo--sik th { padding: .45rem .6rem; }

.bos-durum { text-align: center; padding: 2.5rem 1rem; color: var(--metin-3); }
.bos-durum .ikon { width: 40px; height: 40px; opacity: .35; margin-bottom: .5rem; }
.bos-durum p { margin: 0; }

.rozet {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    padding: .14rem .5rem;
    border-radius: 99px;
    font-size: .72rem;
    font-weight: 620;
    line-height: 1.5;
    white-space: nowrap;
}
.rozet--basari  { background: var(--renk-basari-acik);  color: var(--renk-basari); }
.rozet--uyari   { background: var(--renk-uyari-acik);   color: var(--renk-uyari); }
.rozet--tehlike { background: var(--renk-tehlike-acik); color: var(--renk-tehlike); }
.rozet--bilgi   { background: var(--renk-bilgi-acik);   color: var(--renk-bilgi); }
.rozet--notr    { background: var(--renk-notr-acik);    color: var(--metin-2); }
.rozet--ana     { background: var(--renk-ana-acik);     color: var(--renk-ana); }

.nokta { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.nokta--basari  { background: var(--renk-basari); }
.nokta--tehlike { background: var(--renk-tehlike); }
.nokta--uyari   { background: var(--renk-uyari); }
.nokta--notr    { background: var(--kenar-koyu); }
.nokta--canli   { background: var(--renk-basari); box-shadow: 0 0 0 0 rgba(15,157,88,.5); animation: nabiz 2s infinite; }

@keyframes nabiz {
    70%  { box-shadow: 0 0 0 8px rgba(15,157,88,0); }
    100% { box-shadow: 0 0 0 0 rgba(15,157,88,0); }
}

.dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .5rem .9rem;
    border-radius: var(--yuvarlak-s);
    border: 1px solid transparent;
    background: var(--renk-ana);
    color: #fff;
    font: inherit;
    font-weight: 560;
    font-size: .875rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--gecis), border-color var(--gecis), transform var(--gecis), opacity var(--gecis);
}
.dugme:hover { background: var(--renk-ana-koyu); text-decoration: none; color: #fff; }
.dugme:active { transform: translateY(1px); }
.dugme[disabled], .dugme.pasif { opacity: .55; pointer-events: none; }

.dugme--ikincil { background: var(--yuzey); color: var(--metin); border-color: var(--kenar-koyu); }
.dugme--ikincil:hover { background: var(--yuzey-2); color: var(--metin); }
.dugme--sade { background: transparent; color: var(--metin-2); }
.dugme--sade:hover { background: var(--yuzey-2); color: var(--metin); }
.dugme--tehlike { background: var(--renk-tehlike); }
.dugme--tehlike:hover { background: #b02a2e; }
.dugme--basari { background: var(--renk-basari); }
.dugme--basari:hover { background: #0c7f47; }
.dugme--kucuk { padding: .3rem .6rem; font-size: .8rem; }
.dugme--buyuk { padding: .7rem 1.35rem; font-size: .95rem; }
.dugme--tam { width: 100%; }
.dugme--ikon { padding: .42rem; }
.dugme--ikon .ikon { width: 17px; height: 17px; }

.dugme-grup { display: inline-flex; gap: .4rem; flex-wrap: wrap; }
.dugme-grup.kart__alt { display: flex; }

.form-satir { margin-bottom: 1rem; }
.form-satir:last-child { margin-bottom: 0; }

.form-izgara { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-izgara--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-izgara .tam-genislik { grid-column: 1 / -1; }

label.etiket {
    display: block;
    font-size: .82rem;
    font-weight: 580;
    color: var(--metin-2);
    margin-bottom: .3rem;
}
.etiket .zorunlu { color: var(--renk-tehlike); margin-left: .1rem; }

.girdi, select.girdi, textarea.girdi {
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid var(--kenar-koyu);
    border-radius: var(--yuvarlak-s);
    background: var(--yuzey);
    color: var(--metin);
    font: inherit;
    font-size: .9rem;
    transition: border-color var(--gecis), box-shadow var(--gecis);
    -webkit-appearance: none;
    appearance: none;
}
.girdi:focus, select.girdi:focus, textarea.girdi:focus {
    outline: none;
    border-color: var(--renk-ana);
    box-shadow: 0 0 0 3px var(--renk-ana-acik);
}
.girdi::placeholder { color: var(--metin-3); }
.girdi[readonly], .girdi[disabled] { background: var(--yuzey-2); color: var(--metin-2); }

select.girdi {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238695a8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .55rem center;
    background-size: 15px;
    padding-right: 2rem;
}

textarea.girdi { min-height: 96px; resize: vertical; line-height: 1.5; }

.girdi--hata { border-color: var(--renk-tehlike); }
.alan-hata { color: var(--renk-tehlike); font-size: .78rem; margin-top: .25rem; display: block; }
.alan-ipucu { color: var(--metin-3); font-size: .78rem; margin-top: .25rem; display: block; }

.girdi-grup { display: flex; }
.girdi-grup .girdi { border-radius: var(--yuvarlak-s) 0 0 var(--yuvarlak-s); }
.girdi-grup .girdi-ek {
    display: flex; align-items: center;
    padding: 0 .7rem;
    border: 1px solid var(--kenar-koyu);
    border-left: 0;
    border-radius: 0 var(--yuvarlak-s) var(--yuvarlak-s) 0;
    background: var(--yuzey-2);
    color: var(--metin-2);
    font-size: .85rem;
    white-space: nowrap;
}

.onay { display: flex; align-items: flex-start; gap: .55rem; cursor: pointer; font-size: .875rem; }
.onay input { width: 17px; height: 17px; margin: .12rem 0 0; accent-color: var(--renk-ana); flex: none; cursor: pointer; }
.onay__metin small { display: block; color: var(--metin-3); font-size: .78rem; }

.secim-listesi { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

.radyo-kart {
    border: 1px solid var(--kenar-koyu);
    border-radius: var(--yuvarlak);
    padding: .7rem .8rem;
    cursor: pointer;
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    transition: border-color var(--gecis), background var(--gecis);
}
.radyo-kart:hover { border-color: var(--renk-ana); }
.radyo-kart input { accent-color: var(--renk-ana); margin-top: .15rem; }
.radyo-kart:has(input:checked) { border-color: var(--renk-ana); background: var(--renk-ana-acik); }
.radyo-kart strong { display: block; font-size: .88rem; }
.radyo-kart small { color: var(--metin-2); font-size: .78rem; }

fieldset.alan-kumesi {
    border: 1px solid var(--kenar);
    border-radius: var(--yuvarlak);
    padding: 1rem;
    margin: 0 0 1rem;
}
fieldset.alan-kumesi legend { padding: 0 .4rem; font-size: .8rem; font-weight: 650; color: var(--metin-2); }

.form-alt {
    display: flex;
    gap: .6rem;
    justify-content: flex-end;
    align-items: center;
    padding-top: 1rem;
    margin-top: .5rem;
    border-top: 1px solid var(--kenar);
    flex-wrap: wrap;
}
.form-alt--sol { justify-content: space-between; }

.uyari-kutu {
    display: flex;
    gap: .65rem;
    padding: .8rem 1rem;
    border-radius: var(--yuvarlak);
    border: 1px solid;
    margin-bottom: 1rem;
    font-size: .875rem;
    align-items: flex-start;
}
.uyari-kutu .ikon { margin-top: .12rem; }
.uyari-kutu strong { display: block; margin-bottom: .1rem; }
.uyari-kutu--basari  { background: var(--renk-basari-acik);  border-color: rgba(15,157,88,.28);  color: var(--renk-basari); }
.uyari-kutu--hata    { background: var(--renk-tehlike-acik); border-color: rgba(209,52,56,.28);  color: var(--renk-tehlike); }
.uyari-kutu--uyari   { background: var(--renk-uyari-acik);   border-color: rgba(217,133,0,.28);  color: var(--renk-uyari); }
.uyari-kutu--bilgi   { background: var(--renk-bilgi-acik);   border-color: rgba(11,127,168,.28); color: var(--renk-bilgi); }
.uyari-kutu__govde { color: var(--metin); flex: 1; }
.uyari-kutu__kapat { background: none; border: 0; cursor: pointer; color: inherit; opacity: .6; padding: 0; }
.uyari-kutu__kapat:hover { opacity: 1; }

.filtre {
    display: flex;
    gap: .55rem;
    flex-wrap: wrap;
    align-items: flex-end;
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--kenar);
    background: var(--yuzey-2);
    border-radius: var(--yuvarlak) var(--yuvarlak) 0 0;
}
.filtre__alan { display: flex; flex-direction: column; gap: .2rem; min-width: 140px; }
.filtre__alan label { font-size: .72rem; font-weight: 600; color: var(--metin-3); }
.filtre__alan .girdi { padding: .38rem .6rem; font-size: .84rem; }
.filtre__ara { flex: 1; min-width: 200px; }

.sayfalama {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 1.1rem;
    border-top: 1px solid var(--kenar);
    flex-wrap: wrap;
    font-size: .84rem;
    color: var(--metin-2);
}
.sayfalama__liste { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.sayfalama__liste a, .sayfalama__liste span {
    display: grid; place-items: center;
    min-width: 32px; height: 32px;
    padding: 0 .5rem;
    border-radius: var(--yuvarlak-s);
    border: 1px solid var(--kenar);
    color: var(--metin-2);
    background: var(--yuzey);
}
.sayfalama__liste a:hover { background: var(--yuzey-2); text-decoration: none; }
.sayfalama__liste .aktif { background: var(--renk-ana); border-color: var(--renk-ana); color: #fff; font-weight: 600; }
.sayfalama__liste .bosluk { border-color: transparent; background: none; }

.ust-arama { position: relative; flex: 1; max-width: 420px; }
.ust-arama .girdi { padding-left: 2.1rem; background: var(--yuzey-2); }
.ust-arama .ikon { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); color: var(--metin-3); width: 16px; height: 16px; }

.ust-cubuk__sag { margin-left: auto; display: flex; align-items: center; gap: .35rem; }

.simge-dugme {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: var(--yuvarlak-s);
    border: 0;
    background: transparent;
    color: var(--metin-2);
    cursor: pointer;
    position: relative;
    transition: background var(--gecis);
}
.simge-dugme:hover { background: var(--yuzey-2); color: var(--metin); }
.simge-dugme__benek {
    position: absolute; top: 6px; right: 6px;
    min-width: 15px; height: 15px;
    padding: 0 3px;
    border-radius: 99px;
    background: var(--renk-tehlike);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    display: grid; place-items: center;
    border: 2px solid var(--yuzey);
}

.avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--renk-ana-acik);
    color: var(--renk-ana);
    display: grid; place-items: center;
    font-weight: 650;
    font-size: .78rem;
    flex: none;
}
.avatar--buyuk { width: 56px; height: 56px; font-size: 1.15rem; }

.acilir { position: relative; }
.acilir__panel {
    position: absolute;
    top: calc(100% + .4rem);
    right: 0;
    min-width: 230px;
    background: var(--yuzey);
    border: 1px solid var(--kenar);
    border-radius: var(--yuvarlak);
    box-shadow: var(--golge-3);
    padding: .35rem;
    z-index: 60;
    display: none;
    max-height: 70vh;
    overflow-y: auto;
}
.acilir__panel.acik { display: block; }
.acilir__panel a, .acilir__panel button {
    display: flex; align-items: center; gap: .55rem;
    width: 100%;
    padding: .5rem .6rem;
    border: 0; background: none;
    border-radius: var(--yuvarlak-s);
    color: var(--metin);
    font: inherit; font-size: .875rem;
    text-align: left;
    cursor: pointer;
}
.acilir__panel a:hover, .acilir__panel button:hover { background: var(--yuzey-2); text-decoration: none; }
.acilir__ayrac { height: 1px; background: var(--kenar); margin: .3rem 0; }
.acilir__basli { padding: .5rem .6rem .3rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--metin-3); }

.bildirim-satir { display: flex; gap: .6rem; padding: .6rem; border-radius: var(--yuvarlak-s); }
.bildirim-satir:hover { background: var(--yuzey-2); }
.bildirim-satir--yeni { background: var(--renk-ana-acik); }
.bildirim-satir strong { font-size: .85rem; display: block; }
.bildirim-satir small { color: var(--metin-3); font-size: .74rem; }
.bildirim-satir p { margin: .1rem 0; font-size: .82rem; color: var(--metin-2); }

.perde {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .5);
    backdrop-filter: blur(2px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 100;
}
.perde.acik { display: flex; }

.pencere {
    background: var(--yuzey);
    border-radius: var(--yuvarlak-l);
    box-shadow: var(--golge-3);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: pencere-gir 180ms ease-out;
}
.pencere--genis { max-width: 820px; }
@keyframes pencere-gir { from { opacity: 0; transform: translateY(10px) scale(.98); } }

.pencere__bas {
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--kenar);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.pencere__bas h3 { margin: 0; }
.pencere__govde { padding: 1.2rem; overflow-y: auto; }
.pencere__alt { padding: .9rem 1.2rem; border-top: 1px solid var(--kenar); display: flex; justify-content: flex-end; gap: .55rem; }

.sekmeler {
    display: flex;
    gap: .2rem;
    border-bottom: 1px solid var(--kenar);
    margin-bottom: 1rem;
    overflow-x: auto;
}
.sekmeler a {
    padding: .6rem .9rem;
    color: var(--metin-2);
    font-weight: 560;
    font-size: .875rem;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.sekmeler a:hover { color: var(--metin); text-decoration: none; }
.sekmeler a.aktif { color: var(--renk-ana); border-bottom-color: var(--renk-ana); }

.tanim { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: .5rem 1rem; font-size: .875rem; }
.tanim dt { color: var(--metin-2); font-weight: 500; }
.tanim dd { margin: 0; font-weight: 550; }

.zaman-cizelge { list-style: none; margin: 0; padding: 0; position: relative; }
.zaman-cizelge::before {
    content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px;
    width: 2px; background: var(--kenar);
}
.zaman-cizelge li { position: relative; padding: 0 0 1.1rem 2.6rem; }
.zaman-cizelge li:last-child { padding-bottom: 0; }
.zaman-cizelge__nokta {
    position: absolute; left: 6px; top: 2px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--yuzey);
    border: 2px solid var(--kenar-koyu);
    display: grid; place-items: center;
    color: var(--metin-2);
}
.zaman-cizelge__nokta .ikon { width: 11px; height: 11px; }
.zaman-cizelge__nokta--ana { border-color: var(--renk-ana); color: var(--renk-ana); }
.zaman-cizelge__bas { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; font-size: .875rem; }
.zaman-cizelge__bas time { color: var(--metin-3); font-size: .76rem; }
.zaman-cizelge__govde {
    margin-top: .3rem;
    background: var(--yuzey-2);
    border: 1px solid var(--kenar);
    border-radius: var(--yuvarlak);
    padding: .6rem .8rem;
    font-size: .875rem;
    white-space: pre-wrap;
}
.zaman-cizelge__govde--not { background: var(--renk-uyari-acik); border-color: rgba(217,133,0,.3); }

.ilerleme { height: 8px; border-radius: 99px; background: var(--kenar); overflow: hidden; }
.ilerleme__dolu { height: 100%; background: var(--renk-ana); border-radius: 99px; transition: width 400ms ease; }
.ilerleme__dolu--basari  { background: var(--renk-basari); }
.ilerleme__dolu--uyari   { background: var(--renk-uyari); }
.ilerleme__dolu--tehlike { background: var(--renk-tehlike); }

.grafik { width: 100%; height: 230px; display: block; }
.grafik-aciklama { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .78rem; color: var(--metin-2); margin-top: .5rem; }
.grafik-aciklama span { display: inline-flex; align-items: center; gap: .35rem; }
.grafik-aciklama i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.giris-sayfa {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--zemin);
}
.giris-gorsel {
    background: linear-gradient(150deg, var(--renk-ana) 0%, #123a86 55%, #0b2454 100%);
    color: #fff;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
.giris-gorsel::after {
    content: ""; position: absolute; right: -120px; bottom: -140px;
    width: 420px; height: 420px; border-radius: 50%;
    background: rgba(255,255,255,.07);
}
.giris-gorsel h2 { font-size: 1.9rem; max-width: 15ch; line-height: 1.2; }
.giris-gorsel p { color: rgba(255,255,255,.82); max-width: 42ch; }
.giris-ozellik { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: 1rem; position: relative; z-index: 1; }
.giris-ozellik .ikon { width: 20px; height: 20px; margin-top: .15rem; opacity: .9; }
.giris-ozellik strong { display: block; font-size: .92rem; }
.giris-ozellik small { color: rgba(255,255,255,.75); font-size: .82rem; }

.giris-form { display: flex; align-items: center; justify-content: center; padding: 2rem; }
.giris-kutu { width: 100%; max-width: 380px; }
.giris-kutu .marka-logo { width: 46px; height: 46px; font-size: 1.2rem; margin-bottom: 1.1rem; }

.sakin-kabuk { max-width: 720px; margin: 0 auto; }

.alt-bilgi {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--kenar);
    color: var(--metin-3);
    font-size: .74rem;
}
.alt-bilgi__ayrac { opacity: .5; }

.alt-menu {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--yuzey);
    border-top: 1px solid var(--kenar);
    display: none;
    z-index: 50;
    padding-bottom: env(safe-area-inset-bottom);
}
.alt-menu a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    padding: .5rem .25rem;
    color: var(--metin-3);
    font-size: .68rem;
    font-weight: 550;
}
.alt-menu a.aktif { color: var(--renk-ana); }
.alt-menu a:hover { text-decoration: none; }
.alt-menu .ikon { width: 21px; height: 21px; }

.hizli-erisim { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.hizli-erisim a {
    display: flex; flex-direction: column; align-items: center; gap: .4rem;
    padding: .85rem .4rem;
    border-radius: var(--yuvarlak);
    background: var(--yuzey);
    border: 1px solid var(--kenar);
    color: var(--metin-2);
    font-size: .74rem;
    font-weight: 550;
    text-align: center;
    transition: border-color var(--gecis), transform var(--gecis);
}
.hizli-erisim a:hover { border-color: var(--renk-ana); transform: translateY(-1px); text-decoration: none; }
.hizli-erisim .ikon { width: 22px; height: 22px; color: var(--renk-ana); }

.borc-ozet {
    background: linear-gradient(135deg, var(--renk-ana), #2f7ae5);
    color: #fff;
    border-radius: var(--yuvarlak-l);
    padding: 1.25rem;
    box-shadow: var(--golge-2);
}
.borc-ozet--temiz { background: linear-gradient(135deg, var(--renk-basari), #34ba7a); }
.borc-ozet--borclu { background: linear-gradient(135deg, #c92a2e, #e4574b); }
.borc-ozet__etiket { font-size: .8rem; opacity: .85; }
.borc-ozet__tutar { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.borc-ozet__alt { display: flex; gap: 1.2rem; margin-top: .75rem; font-size: .8rem; opacity: .9; flex-wrap: wrap; }
.borc-ozet .dugme { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.3); backdrop-filter: blur(4px); }
.borc-ozet .dugme:hover { background: rgba(255,255,255,.28); }

.liste-kart {
    display: flex;
    gap: .8rem;
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--kenar);
    align-items: center;
    color: var(--metin);
}
.liste-kart:last-child { border-bottom: 0; }
.liste-kart:hover { background: var(--yuzey-2); text-decoration: none; }
.liste-kart__ikon {
    width: 38px; height: 38px; border-radius: 10px;
    display: grid; place-items: center;
    background: var(--renk-notr-acik); color: var(--metin-2);
    flex: none;
}
.liste-kart__govde { flex: 1; min-width: 0; }
.liste-kart__govde strong { display: block; font-size: .9rem; }
.liste-kart__govde small { color: var(--metin-3); font-size: .78rem; }
.liste-kart__sag { text-align: right; white-space: nowrap; }

.gizle { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.metin-sag { text-align: right; }
.metin-orta { text-align: center; }
.metin-kucuk { font-size: .8rem; }
.metin-mini { font-size: .74rem; }
.metin-soluk { color: var(--metin-3); }
.metin-ikincil { color: var(--metin-2); }
.metin-kalin { font-weight: 650; }
.metin-basari  { color: var(--renk-basari); }
.metin-tehlike { color: var(--renk-tehlike); }
.metin-uyari   { color: var(--renk-uyari); }
.metin-ana     { color: var(--renk-ana); }
.metin-kes { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tek-satir { display: flex; align-items: center; gap: .45rem; }

.esnek { display: flex; }
.esnek-orta { display: flex; align-items: center; gap: .5rem; }
.esnek-ara { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.esnek-sar { flex-wrap: wrap; }
.esnek-dikey { display: flex; flex-direction: column; gap: .5rem; }
.bosluk-s { gap: .3rem; } .bosluk-m { gap: .75rem; } .bosluk-l { gap: 1.25rem; }

.mt-0 { margin-top: 0; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }

.para { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tekdüze { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .84em; }

.kopyala-kutu {
    display: flex; align-items: center; gap: .5rem;
    background: var(--yuzey-2);
    border: 1px solid var(--kenar);
    border-radius: var(--yuvarlak-s);
    padding: .45rem .6rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8rem;
    word-break: break-all;
}
.kopyala-kutu button { margin-left: auto; }

.menu-dugmesi { display: none; }

@media (max-width: 1100px) {
    .izgara--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .izgara--yan { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .giris-sayfa { grid-template-columns: 1fr; }
    .giris-gorsel { display: none; }
    .izgara--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .menu-dugmesi { display: grid; }

    .yan-menu {
        position: fixed;
        left: 0; top: 0; bottom: 0;
        transform: translateX(-100%);
        transition: transform var(--gecis);
        box-shadow: var(--golge-3);
    }
    .yan-menu.acik { transform: translateX(0); }

    .yan-perde {
        position: fixed; inset: 0;
        background: rgba(15,23,42,.45);
        z-index: 39;
        display: none;
    }
    .yan-perde.acik { display: block; }

    .sayfa { padding: .9rem; }
    .izgara--2, .izgara--3, .izgara--4 { grid-template-columns: 1fr; }
    .form-izgara, .form-izgara--3 { grid-template-columns: 1fr; }
    .ust-arama { display: none; }
    .alt-menu { display: flex; }
    .sakin-kabuk { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
    .sayfa-basi__islem { width: 100%; }
    .sayfa-basi__islem .dugme { flex: 1; }
    .tanim { grid-template-columns: 1fr; gap: .1rem 0; }
    .tanim dd { margin-bottom: .6rem; }
    .hizli-erisim { grid-template-columns: repeat(3, 1fr); }
    .form-alt .dugme { flex: 1; }
}

@media print {
    .yan-menu, .ust-cubuk, .alt-menu, .alt-bilgi, .sayfa-basi__islem, .filtre, .sayfalama, .yazdirma-gizle { display: none !important; }
    body { background: #fff; }
    .kart { border: 1px solid #ddd; box-shadow: none; }
    .sayfa { padding: 0; }
    a { color: inherit; text-decoration: none; }
}
