/*
 * Ortak bileşenler: kart, düğme, form alanı, arama kutusu, hap, rozet, tuş, avatar,
 * boş durum, tablo, sekme, iskelet, uyarı penceresi (SweetAlert yerine), bildirim (toast), modal.
 * Yalnız mantıksal özellikler; renkler token'lardan.
 */

/* ---- Kart ------------------------------------------------------------------------ */
.kart {
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose-xl);
    box-shadow: var(--golge-1);
}

/* ---- Düğme ----------------------------------------------------------------------- */
.dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--a2);
    min-block-size: 42px;
    padding-inline: var(--a4);
    border: 1px solid transparent;
    border-radius: var(--kose);
    background: var(--renk-yuzey);
    color: var(--renk-metin);
    font-size: var(--boy-m);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    user-select: none;
    transition: background var(--gecis), border-color var(--gecis), color var(--gecis), box-shadow var(--gecis), transform var(--gecis);
}

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

.dugme:disabled,
.dugme[aria-disabled="true"] {
    opacity: 0.55;
}

.dugme--ana {
    background: var(--renk-vurgu);
    color: var(--renk-vurgu-yazi);
}

.dugme--ana:hover:not(:disabled) {
    background: var(--renk-vurgu-koyu);
}

.dugme--ana:disabled {
    background: var(--renk-vurgu-pasif);
    opacity: 1;
}

.dugme--ikincil {
    border-color: var(--renk-cizgi-2);
}

.dugme--ikincil:hover:not(:disabled) {
    border-color: var(--renk-soluk-2);
    background: var(--renk-yuzey-2);
}

.dugme--hayalet {
    background: transparent;
    color: var(--renk-metin-2);
}

.dugme--hayalet:hover:not(:disabled) {
    background: var(--renk-yuzey-3);
    color: var(--renk-metin);
}

.dugme--tehlikeli {
    background: var(--renk-hata);
    color: #fff;
}

.dugme--tehlikeli:hover:not(:disabled) {
    background: color-mix(in srgb, var(--renk-hata) 88%, #000);
}

/* Renkli eylem düğmeleri (müşteri listesi: Yeni yeşil, Excel'den yükle sarı, Toplu güncelleme mavi) */
.dugme--yesil {
    background: var(--renk-basari);
    color: #fff;
}

.dugme--sari {
    background: var(--renk-sari);
    color: var(--renk-metin);
}

.dugme--mavi {
    background: var(--renk-ton-mavi);
    color: #fff;
}

.dugme--yesil:hover:not(:disabled),
.dugme--sari:hover:not(:disabled),
.dugme--mavi:hover:not(:disabled) {
    filter: brightness(0.92);
}

.dugme--ikon {
    inline-size: 40px;
    min-block-size: 40px;
    padding: 0;
}

.dugme--kucuk {
    min-block-size: 34px;
    padding-inline: var(--a3);
    font-size: var(--boy-s);
}

.dugme--buyuk {
    min-block-size: 54px;
    padding-inline: var(--a5);
    border-radius: var(--kose-l);
    font-size: var(--boy-l);
}

.dugme--blok {
    inline-size: 100%;
}

/* Metin görünümlü eylem (ör. "İndirim ekle") */
.metin-dugme {
    display: inline-flex;
    align-items: center;
    gap: var(--a1);
    padding: var(--a1) 0;
    border: 0;
    background: none;
    color: var(--renk-vurgu);
    font-weight: 700;
}

.metin-dugme:hover {
    color: var(--renk-vurgu-koyu);
}

.metin-dugme .ikon {
    inline-size: 18px;
    block-size: 18px;
}

/* ---- Form alanları --------------------------------------------------------------- */
.alan {
    display: grid;
    align-content: start;
    gap: 6px;
}

.alan__etiket {
    color: var(--renk-metin-2);
    font-size: var(--boy-s);
    font-weight: 700;
}

.alan__ipucu {
    color: var(--renk-soluk);
    font-size: var(--boy-xs);
}

.alan__hata {
    color: var(--renk-hata);
    font-size: var(--boy-xs);
    font-weight: 700;
}

.girdi,
.secim {
    inline-size: 100%;
    min-block-size: 42px;
    padding-inline: var(--a3);
    border: 1px solid var(--renk-cizgi-2);
    border-radius: var(--kose);
    background: var(--renk-yuzey);
    color: var(--renk-metin);
    font-weight: 600;
    transition: border-color var(--gecis), box-shadow var(--gecis);
}

textarea.girdi {
    min-block-size: 96px;
    padding-block: var(--a2);
    resize: vertical;
}

.girdi::placeholder {
    color: var(--renk-soluk-2);
    font-weight: 500;
}

/* Dosya seçme (dekont vb.): tarayıcının kendi düğmesi tasarımdaki ikincil düğmeye benzetilir */
input[type="file"].girdi {
    padding-block: 5px;
    font-weight: 500;
    cursor: pointer;
}

input[type="file"].girdi::file-selector-button {
    margin-inline-end: var(--a3);
    padding: 5px var(--a3);
    border: 1px solid var(--renk-cizgi-2);
    border-radius: var(--kose);
    background: var(--renk-yuzey-2);
    color: var(--renk-metin);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

input[type="file"].girdi:hover::file-selector-button {
    border-color: var(--renk-soluk-2);
}

.girdi:hover,
.secim:hover {
    border-color: var(--renk-soluk-2);
}

.girdi:focus,
.secim:focus {
    border-color: var(--renk-vurgu);
    box-shadow: var(--odak-halka);
    outline: none;
}

.alan--hatali .girdi,
.alan--hatali .secim {
    border-color: var(--renk-hata);
}

.secim {
    appearance: none;
    padding-inline-end: var(--a8);
    background-image: linear-gradient(45deg, transparent 50%, var(--renk-soluk) 50%), linear-gradient(135deg, var(--renk-soluk) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

[dir="rtl"] .secim {
    background-position: 13px 50%, 18px 50%;
}

.onay {
    display: inline-flex;
    align-items: center;
    gap: var(--a2);
    font-weight: 600;
    cursor: pointer;
}

.onay input {
    inline-size: 18px;
    block-size: 18px;
    accent-color: var(--renk-vurgu);
}

/* ---- Arama kutusu (ikon + girdi + ek) ----------------------------------------------- */
.arama-kutusu {
    display: flex;
    align-items: center;
    gap: var(--a2);
    min-block-size: 46px;
    padding-inline: var(--a3);
    border: 1px solid var(--renk-cizgi-2);
    border-radius: var(--kose-l);
    background: var(--renk-yuzey);
    color: var(--renk-soluk);
    transition: border-color var(--gecis), box-shadow var(--gecis);
}

.arama-kutusu:focus-within {
    border-color: var(--renk-vurgu);
    box-shadow: var(--odak-halka);
}

.arama-kutusu__girdi {
    flex: 1;
    min-inline-size: 0;
    block-size: 44px;
    border: 0;
    background: none;
    color: var(--renk-metin);
    font-size: var(--boy-l);
    font-weight: 600;
    outline: none;
}

/* Odak halkası kapsayıcıda (:focus-within) gösterilir; girdinin kendi halkası çift çerçeve yapar */
.arama-kutusu__girdi:focus-visible {
    box-shadow: none;
}

.arama-kutusu__girdi::placeholder {
    color: var(--renk-soluk);
    font-weight: 500;
}

.arama-kutusu__girdi::-webkit-search-cancel-button {
    display: none;
}

/* ---- Tuş (kbd) ------------------------------------------------------------------- */
.tus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 26px;
    block-size: 22px;
    padding-inline: 6px;
    border: 1px solid var(--renk-cizgi-2);
    border-block-end-width: 2px;
    border-radius: 6px;
    background: var(--renk-yuzey-2);
    color: var(--renk-metin-2);
    font-family: var(--yazi);
    font-size: var(--boy-2xs);
    font-weight: 800;
}

/* ---- Hap (kategori süzgeci) --------------------------------------------------------- */
.hap-listesi {
    display: flex;
    gap: var(--a2);
    overflow-x: auto;
    scrollbar-width: none;
}

.hap-listesi::-webkit-scrollbar {
    display: none;
}

.hap {
    flex: none;
    min-block-size: 38px;
    padding-inline: var(--a5);
    border: 0;
    border-radius: var(--kose-hap);
    background: var(--renk-yuzey-3);
    color: var(--renk-metin);
    font-size: var(--boy-l);
    font-weight: 700;
    transition: background var(--gecis), color var(--gecis);
}

/* Bağlantı olarak hap (süzgeç, dönem, sekme benzeri): düğmeyle aynı dikey ortalama */
a.hap {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.hap:hover {
    background: var(--renk-cizgi);
}

.hap--secili,
.hap--secili:hover {
    background: var(--renk-vurgu);
    color: var(--renk-vurgu-yazi);
}

/* ---- Rozet ----------------------------------------------------------------------- */
.rozet {
    display: inline-flex;
    align-items: center;
    gap: var(--a1);
    min-block-size: 22px;
    padding-inline: var(--a2);
    border-radius: 6px;
    background: var(--renk-yuzey-3);
    color: var(--renk-metin-2);
    font-size: var(--boy-xs);
    font-weight: 800;
    white-space: nowrap;
}

.rozet--vurgu {
    background: var(--renk-vurgu-orta);
    color: var(--renk-vurgu-metin);
}

.rozet--basari {
    background: var(--renk-basari-acik);
    color: var(--renk-basari);
}

.rozet--uyari {
    background: var(--renk-uyari-acik);
    color: var(--renk-uyari);
}

.rozet--hata {
    background: var(--renk-hata-acik);
    color: var(--renk-hata);
}

.rozet--bilgi {
    background: var(--renk-bilgi-acik);
    color: var(--renk-bilgi);
}

/* ---- Avatar ve logo ---------------------------------------------------------------- */
.avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: 36px;
    block-size: 36px;
    border-radius: 50%;
    background: var(--renk-yuzey-3);
    color: var(--renk-metin);
    font-size: var(--boy-m);
    font-weight: 800;
}

.avatar--vurgu {
    background: var(--renk-vurgu);
    color: var(--renk-vurgu-yazi);
}

.logo-kare {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 42px;
    block-size: 42px;
    border-radius: var(--kose-l);
    background: var(--renk-vurgu);
    color: var(--renk-vurgu-yazi);
    font-size: 22px;
    font-weight: 800;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--renk-vurgu) 35%, transparent);
}

/* ---- Boş durum --------------------------------------------------------------------- */
.bos-durum {
    display: grid;
    justify-items: center;
    gap: var(--a2);
    padding: var(--a8) var(--a4);
    color: var(--renk-soluk);
    text-align: center;
}

.bos-durum > .ikon {
    inline-size: 26px;
    block-size: 26px;
    margin-block-end: var(--a1);
    color: var(--renk-metin-2);
}

.bos-durum__baslik {
    color: var(--renk-metin);
    font-size: var(--boy-xl);
    font-weight: 800;
}

.bos-durum__metin {
    font-size: var(--boy-s);
    line-height: 1.5;
}

.bos-durum__ipucu {
    display: inline-flex;
    align-items: center;
    gap: var(--a2);
    margin-block-start: var(--a2);
    color: var(--renk-metin-2);
    font-size: var(--boy-l);
}

/* ---- Tablo ----------------------------------------------------------------------- */
.tablo-kutu {
    position: relative;
    overflow-x: auto;
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose-l);
}

.tablo {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--boy-m);
}

.tablo th,
.tablo td {
    padding: var(--a3) var(--a4);
    border-block-end: 1px solid var(--renk-cizgi);
    text-align: start;
    white-space: nowrap;
}

.tablo th {
    background: var(--renk-yuzey-2);
    color: var(--renk-soluk);
    font-size: var(--boy-xs);
    font-weight: 800;
    letter-spacing: 0.02em;
}

.tablo tbody tr:last-child td {
    border-block-end: 0;
}

/* Toplam satırı (tfoot): etiket hücresi başlık gibi değil, satırla bir; üstte kalın çizgi (rapor toplamı gibi) */
.tablo tfoot th,
.tablo tfoot td {
    background: none;
    color: var(--renk-metin);
    font-size: var(--boy-m);
    font-weight: 800;
    letter-spacing: 0;
    border-block-start: 2px solid var(--renk-cizgi-2);
    border-block-end: 0;
}

.tablo tbody tr:hover td {
    background: var(--renk-yuzey-2);
}

.tablo .tablo__sayi {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

/* ---- Sekmeler -------------------------------------------------------------------- */
.sekmeler {
    display: flex;
    gap: var(--a1);
    border-block-end: 1px solid var(--renk-cizgi);
    overflow-x: auto;
}

.sekme {
    position: relative;
    padding: var(--a3) var(--a4);
    border: 0;
    background: none;
    color: var(--renk-soluk);
    font-weight: 700;
    white-space: nowrap;
}

.sekme[aria-selected="true"] {
    color: var(--renk-vurgu);
}

.sekme[aria-selected="true"]::after {
    content: "";
    position: absolute;
    inset-inline: var(--a3);
    inset-block-end: -1px;
    block-size: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--renk-vurgu);
}

/* ---- İskelet (yükleniyor) ----------------------------------------------------------- */
.iskelet {
    display: block;
    border-radius: var(--kose-s);
    background: linear-gradient(90deg, var(--renk-yuzey-3) 0%, var(--renk-yuzey-2) 50%, var(--renk-yuzey-3) 100%);
    background-size: 200% 100%;
    animation: iskelet 1.2s ease-in-out infinite;
}

@keyframes iskelet {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

/* ---- Dönen gösterge ---------------------------------------------------------------- */
.donen {
    inline-size: 22px;
    block-size: 22px;
    border: 3px solid var(--renk-vurgu-orta);
    border-block-start-color: var(--renk-vurgu);
    border-radius: 50%;
    animation: donen 0.8s linear infinite;
}

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

/* ---- Uyarı penceresi (SweetAlert yerine) -------------------------------------------- */
.uyari-arka,
.modal-arka {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: grid;
    /* İz görünüm alanına bağlı: aksi hâlde "auto" iz içeriğin min-content genişliğine büyür ve
       pencerenin min(…, 100%) sınırı dar ekranda işlemez (auto-fill ızgaralı formda taşma yakalandı) */
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    padding: var(--a4);
    background: rgb(15 20 30 / 45%);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 180ms ease;
}

.uyari-arka.gorunur,
.modal-arka.gorunur {
    opacity: 1;
}

.uyari {
    display: grid;
    justify-items: center;
    gap: var(--a3);
    inline-size: min(420px, 100%);
    padding: var(--a8) var(--a6) var(--a6);
    border-radius: var(--kose-xl);
    background: var(--renk-yuzey);
    box-shadow: var(--golge-3);
    text-align: center;
    transform: translateY(12px) scale(0.97);
    transition: transform 220ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.gorunur > .uyari {
    transform: none;
}

.uyari__ikon {
    display: grid;
    place-items: center;
    inline-size: 64px;
    block-size: 64px;
    border-radius: 50%;
    background: var(--renk-bilgi-acik);
    color: var(--renk-bilgi);
}

.uyari__ikon .ikon {
    inline-size: 34px;
    block-size: 34px;
    stroke-width: 2;
}

.uyari--basari .uyari__ikon { background: var(--renk-basari-acik); color: var(--renk-basari); }
.uyari--hata .uyari__ikon { background: var(--renk-hata-acik); color: var(--renk-hata); }
.uyari--uyari .uyari__ikon { background: var(--renk-uyari-acik); color: var(--renk-uyari); }
.uyari--soru .uyari__ikon { background: var(--renk-vurgu-acik); color: var(--renk-vurgu); }

/* Başarı ikonunda tik çizim animasyonu */
.uyari--basari .uyari__ikon .ikon {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: tik-ciz 520ms 120ms ease forwards;
}

@keyframes tik-ciz {
    to { stroke-dashoffset: 0; }
}

.uyari--hata .uyari__ikon {
    animation: salla 360ms 80ms ease;
}

@keyframes salla {
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

.uyari__baslik {
    font-size: var(--boy-xl);
    font-weight: 800;
}

.uyari__metin {
    color: var(--renk-metin-2);
    font-size: var(--boy-m);
    line-height: 1.55;
    white-space: pre-line;
}

.uyari__girdi {
    inline-size: 100%;
    margin-block-start: var(--a1);
}

.uyari__girdi--pin {
    font-family: var(--yazi-es);
    font-size: var(--boy-2xl);
    letter-spacing: 0.4em;
    text-align: center;
}

.uyari__hata {
    min-block-size: 18px;
    color: var(--renk-hata);
    font-size: var(--boy-s);
    font-weight: 700;
}

.uyari__dugmeler {
    display: flex;
    gap: var(--a2);
    inline-size: 100%;
    margin-block-start: var(--a2);
}

.uyari__dugmeler .dugme {
    flex: 1;
}

/* ---- Modal (içerikli pencere) --------------------------------------------------------- */
.modal {
    display: flex;
    flex-direction: column;
    inline-size: min(560px, 100%);
    max-block-size: calc(100vh - 32px);
    border-radius: var(--kose-xl);
    background: var(--renk-yuzey);
    box-shadow: var(--golge-3);
    transform: translateY(12px);
    transition: transform 220ms cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

.modal--genis {
    inline-size: min(860px, 100%);
}

.gorunur > .modal {
    transform: none;
}

.modal__ust {
    display: flex;
    align-items: center;
    gap: var(--a3);
    padding-block: var(--a4);
    padding-inline: var(--a6) var(--a4);
    border-block-end: 1px solid var(--renk-cizgi);
}

.modal__baslik {
    flex: 1;
    font-size: var(--boy-xl);
    font-weight: 800;
}

.modal__govde {
    padding: var(--a6);
    overflow-y: auto;
}

.modal__alt {
    display: flex;
    justify-content: flex-end;
    gap: var(--a2);
    padding: var(--a4) var(--a6);
    border-block-start: 1px solid var(--renk-cizgi);
}

/* ---- Bildirim (toast) -------------------------------------------------------------- */
.toast-alani {
    position: fixed;
    inset-block-start: var(--a4);
    inset-inline-end: var(--a4);
    z-index: var(--z-toast);
    display: grid;
    gap: var(--a2);
    inline-size: min(380px, calc(100vw - 32px));
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--a3);
    padding-block: var(--a3);
    padding-inline: var(--a4) var(--a3);
    border: 1px solid var(--renk-cizgi);
    border-inline-start: 4px solid var(--renk-bilgi);
    border-radius: var(--kose-l);
    background: var(--renk-yuzey);
    box-shadow: var(--golge-2);
    font-weight: 700;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 200ms ease, transform 200ms ease;
}

.toast.gorunur {
    opacity: 1;
    transform: none;
}

.toast > .ikon {
    margin-block-start: 1px;
    color: var(--renk-bilgi);
}

.toast__metin {
    flex: 1;
    line-height: 1.45;
}

.toast__kapat {
    display: grid;
    place-items: center;
    inline-size: 26px;
    block-size: 26px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--renk-soluk);
}

.toast__kapat:hover {
    background: var(--renk-yuzey-3);
}

.toast__kapat .ikon {
    inline-size: 16px;
    block-size: 16px;
}

.toast--basari { border-inline-start-color: var(--renk-basari); }
.toast--basari > .ikon { color: var(--renk-basari); }
.toast--hata { border-inline-start-color: var(--renk-hata); }
.toast--hata > .ikon { color: var(--renk-hata); }
.toast--uyari { border-inline-start-color: var(--renk-uyari); }
.toast--uyari > .ikon { color: var(--renk-uyari); }

/* ---- Yükleniyor perdesi ------------------------------------------------------------ */
.yukleniyor {
    display: grid;
    justify-items: center;
    gap: var(--a3);
    padding: var(--a6) var(--a8);
    border-radius: var(--kose-xl);
    background: var(--renk-yuzey);
    box-shadow: var(--golge-3);
    font-weight: 700;
}

.yukleniyor .donen {
    inline-size: 34px;
    block-size: 34px;
}

/* ---- Dil seçici -------------------------------------------------------------------- */
.dil-secici {
    position: relative;
}

.dil-secici__dugme {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-block-size: 40px;
    padding-inline: var(--a3);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose);
    background: var(--renk-yuzey);
    color: var(--renk-metin-2);
    font-weight: 800;
    list-style: none;
    cursor: pointer;
}

.dil-secici__dugme::-webkit-details-marker {
    display: none;
}

.dil-secici__dugme:hover {
    border-color: var(--renk-cizgi-2);
    color: var(--renk-metin);
}

.dil-secici__kod {
    font-size: var(--boy-s);
}

.dil-secici__menu {
    position: absolute;
    inset-block-start: calc(100% + 6px);
    inset-inline-end: 0;
    z-index: var(--z-acilir);
    display: grid;
    min-inline-size: 170px;
    padding: var(--a1);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose-l);
    background: var(--renk-yuzey);
    box-shadow: var(--golge-2);
}

.dil-secici__oge {
    padding: var(--a2) var(--a3);
    border: 0;
    border-radius: var(--kose-s);
    background: none;
    font-weight: 700;
    text-align: start;
}

.dil-secici__oge[lang="fa-AF"],
.dil-secici__oge[lang="ar"],
.dil-secici__oge[lang="ps"] {
    font-family: var(--yazi-arap);
}

.dil-secici__oge:hover {
    background: var(--renk-yuzey-3);
}

.dil-secici__oge[aria-current="true"] {
    background: var(--renk-vurgu-acik);
    color: var(--renk-vurgu);
}

/* ---- Satır içi bildirim (sayfada kalan uyarı kutusu) ------------------------------------ */
.bildirim {
    display: flex;
    align-items: flex-start;
    gap: var(--a2);
    padding: var(--a3) var(--a4);
    border: 1px solid var(--renk-bilgi-acik);
    border-radius: var(--kose);
    background: var(--renk-bilgi-acik);
    color: var(--renk-bilgi);
    font-size: var(--boy-s);
    font-weight: 700;
    line-height: 1.45;
    text-align: start;
}

.bildirim > .ikon {
    margin-block-start: 1px;
}

.bildirim--hata {
    border-color: color-mix(in srgb, var(--renk-hata) 25%, transparent);
    background: var(--renk-hata-acik);
    color: var(--renk-hata);
}

.bildirim--uyari {
    border-color: color-mix(in srgb, var(--renk-uyari) 25%, transparent);
    background: var(--renk-uyari-acik);
    color: var(--renk-uyari);
}

.bildirim--basari {
    border-color: color-mix(in srgb, var(--renk-basari) 25%, transparent);
    background: var(--renk-basari-acik);
    color: var(--renk-basari);
}

/* ---- Bağlantı sekmeleri (her sekme ayrı adres) ---------------------------------------- */
.sekmeler--baglanti .sekme {
    display: inline-flex;
    align-items: center;
    gap: var(--a2);
}

.sekmeler--baglanti .sekme .ikon {
    inline-size: 18px;
    block-size: 18px;
}

/* Masaüstünde sekme kaydırmada gizlenmez (Tanımlamalar 9 sekme); dar ekranda yatay kaydırma kalır */
@media (min-width: 900px) {
    .sekmeler--baglanti {
        flex-wrap: wrap;
    }
}

.sekme:hover {
    color: var(--renk-metin);
}

.sekme[aria-current="page"] {
    color: var(--renk-vurgu-metin);
}

.sekme[aria-current="page"]::after {
    content: "";
    position: absolute;
    inset-inline: var(--a3);
    inset-block-end: -1px;
    block-size: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--renk-vurgu);
}

.sekme__kilit.ikon {
    inline-size: 14px;
    block-size: 14px;
    color: var(--renk-soluk-2);
}

/* ---- İstatistik kartı (Genel Bakış, Yönetim özeti) ------------------------------------- */
.istatistikler {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--a4);
}

/* Büyük tutarlı kartlar ("250.000,00 TL" tek satırda kalsın) */
.istatistikler--genis {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

.istatistik {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--a3);
    row-gap: var(--a1);
    padding: var(--a4) var(--a5);
    container-type: inline-size;
}

a.istatistik:hover {
    border-color: var(--renk-cizgi-2);
    box-shadow: var(--golge-2);
}

.istatistik__ikon {
    display: grid;
    grid-row: span 2;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    border-radius: var(--kose-l);
    background: var(--renk-vurgu-acik);
    color: var(--renk-vurgu-metin);
}

.istatistik__etiket {
    color: var(--renk-soluk);
    font-size: var(--boy-s);
    font-weight: 700;
}

.istatistik__deger {
    font-size: var(--boy-3xl);
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* Dar kart (ör. 1024 px'te dört kart yan yana) + büyük tutar ("1.286.500,00 TL"): süs ikonu gizlenir, etiket ve değer
   tüm genişliği alır, değer bir boy küçülür ve gerekirse bölünür (sütun minmax(0, 1fr): kart taşmaz) */
@container (max-width: 200px) {
    .istatistik__ikon {
        display: none;
    }

    .istatistik > * {
        grid-column: 1 / -1;
    }

    .istatistik__deger {
        font-size: var(--boy-2xl);
        overflow-wrap: anywhere;
    }
}

/* Renkli istatistik kutusu (müşteri listesi ve kartı; Nuh Bey 03.10.2026): dolu zemin, başlık ve tutar aynı yazı
   renginde (yeşil/kırmızı/mavi beyaz, sarı lacivert), ikon alanı zeminin açık tonu, belirgin 2 px koyu kenar. */
.istatistik.istatistik--dolu {
    --dolu-renk: var(--renk-metin-2);
    --dolu-yazi: #fff;
    border: 2px solid color-mix(in srgb, var(--dolu-renk) 75%, var(--renk-metin));
    background: var(--dolu-renk);
    color: var(--dolu-yazi);
}

.istatistik.istatistik--yesil {
    --dolu-renk: var(--renk-ton-yesil);
}

.istatistik.istatistik--kirmizi {
    --dolu-renk: var(--renk-ton-kirmizi);
}

.istatistik.istatistik--sari {
    --dolu-renk: var(--renk-ton-sari);
    --dolu-yazi: var(--renk-baslik);
}

.istatistik.istatistik--mavi {
    --dolu-renk: var(--renk-ton-mavi);
}

.istatistik--dolu :is(.istatistik__etiket, .istatistik__alt) {
    color: var(--dolu-yazi);
}

.istatistik--dolu .istatistik__etiket {
    font-size: var(--boy-m);
}

.istatistik.istatistik--dolu .istatistik__ikon {
    background: color-mix(in srgb, var(--dolu-renk) 70%, #fff);
    color: var(--dolu-yazi);
}

.istatistik__alt {
    grid-column: 1 / -1;
    margin-block-start: var(--a2);
    color: var(--renk-soluk);
    font-size: var(--boy-xs);
}

.istatistik--basari .istatistik__ikon {
    background: var(--renk-basari-acik);
    color: var(--renk-basari);
}

.istatistik--uyari .istatistik__ikon {
    background: var(--renk-uyari-acik);
    color: var(--renk-uyari);
}

.istatistik--hata .istatistik__ikon {
    background: var(--renk-hata-acik);
    color: var(--renk-hata);
}

/* ---- Form düzeni ------------------------------------------------------------------ */
.form-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--a4);
}

.form-izgara__tam {
    grid-column: 1 / -1;
}

.alan__etiket small {
    color: var(--renk-soluk);
    font-weight: 600;
}

.secim-grubu {
    display: grid;
    gap: var(--a2);
    margin: 0;
    padding: 0;
    border: 0;
}

.secim-grubu > legend {
    margin-block-end: var(--a2);
    padding: 0;
}

.secim-grubu__liste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--a2) var(--a5);
}

.salt-okunur {
    display: flex;
    align-items: center;
    gap: var(--a2);
    min-block-size: 42px;
    font-weight: 700;
}

.salt-okunur small {
    color: var(--renk-soluk);
    font-weight: 600;
}

/* Kod ve PIN girdileri: Latin, eşit aralıklı. Harf dönüşümü yok: lang="tr" altında CSS "i"yi "İ"
   gösterir (alan adı, API kullanıcısı, CSV metni yanlış görünür); kodu sunucu normalleştirir. */
.girdi--kod {
    font-family: var(--yazi-es);
    font-weight: 700;
    letter-spacing: 0.06em;
}

.girdi--pin {
    font-family: var(--yazi-es);
    letter-spacing: 0.3em;
}

.girdi--kod-buyuk {
    min-block-size: 54px;
    font-family: var(--yazi-es);
    font-size: var(--boy-2xl);
    font-weight: 700;
    letter-spacing: 0.4em;
    text-align: center;
}

/* Bot tuzağı: ekranda yok, ekran okuyucuda yok, sekme sırasında yok */
.bal-kupu {
    position: absolute;
    inset-inline-start: -10000px;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
}

/* ---- Modal içindeki form ------------------------------------------------------------- */
.modal-form {
    display: grid;
    gap: var(--a4);
}

.modal-form__not {
    color: var(--renk-soluk);
    font-size: var(--boy-s);
}

.modal-form__alt {
    display: flex;
    justify-content: flex-end;
    gap: var(--a2);
    padding-block-start: var(--a2);
}

/* ---- Tablo yardımcıları ------------------------------------------------------------ */
.tablo__eylemler {
    inline-size: 1%;
}

.tablo__eylemler > * {
    display: inline-flex;
    vertical-align: middle;
}

.tablo__uzun {
    max-inline-size: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tablo__pasif td {
    color: var(--renk-soluk);
}

.tablo .tablo__secili td {
    background: var(--renk-vurgu-acik);
}

/* Eksi tutar, hata vurgusu (tablo hücresi içi) */
.metin-hata {
    color: var(--renk-hata);
}

.tablo__baglanti {
    font-weight: 800;
}

.tablo__baglanti:hover {
    color: var(--renk-vurgu-metin);
}

.tablo small {
    display: block;
}

/* Avatar + ad */
.kisi {
    display: inline-flex;
    align-items: center;
    gap: var(--a3);
}

.kisi .avatar {
    inline-size: 32px;
    block-size: 32px;
    font-size: var(--boy-xs);
}

.soluk {
    color: var(--renk-soluk);
}

.soluk .ikon {
    display: inline-block;
    inline-size: 16px;
    block-size: 16px;
    vertical-align: -3px;
}

.ikon--basari {
    color: var(--renk-basari);
}

.rozet .ikon {
    inline-size: 14px;
    block-size: 14px;
}

/* İlerleme çubuğu */
.ilerleme {
    inline-size: 100%;
    block-size: 8px;
    border: 0;
    border-radius: var(--kose-hap);
    background: var(--renk-yuzey-3);
    overflow: hidden;
    appearance: none;
}

.ilerleme::-webkit-progress-bar {
    background: var(--renk-yuzey-3);
}

.ilerleme::-webkit-progress-value {
    border-radius: var(--kose-hap);
    background: var(--renk-vurgu);
}

.ilerleme::-moz-progress-bar {
    border-radius: var(--kose-hap);
    background: var(--renk-vurgu);
}

/* Tanım listesi (etiket: değer) */
.bilgi-listesi {
    display: grid;
    grid-template-columns: minmax(120px, max-content) 1fr;
    gap: var(--a2) var(--a5);
}

.bilgi-listesi dt {
    color: var(--renk-soluk);
    font-size: var(--boy-s);
    font-weight: 700;
}

.bilgi-listesi dd {
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* Geri bağlantısı ve sayfalama */
.geri-baglanti {
    display: inline-flex;
    align-items: center;
    gap: var(--a1);
    color: var(--renk-soluk);
    font-weight: 700;
}

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

.geri-baglanti .ikon {
    inline-size: 18px;
    block-size: 18px;
}

.sayfalama {
    display: flex;
    justify-content: center;
    padding-block-start: var(--a4);
}

/* ---- Yetkili onayı penceresi (yetki.js) ------------------------------------------------ */
.yetki-onay {
    display: grid;
    gap: var(--a4);
}

.yetki-onay__metin {
    color: var(--renk-metin-2);
}

.yetki-onay__izin {
    color: var(--renk-metin);
    font-weight: 800;
}

.yetki-onay__adaylar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--a2);
}

.yetki-onay__aday {
    flex: 0 1 auto;
    min-inline-size: 140px;
}

.yetki-onay__pin {
    font-size: var(--boy-xl);
    text-align: center;
}

.yetki-onay__hata:empty {
    display: none;
}

/* ---- Seçim + ekle düğmesi, kısa girdi, kod metni (ürün/belge formları) ------------------ */
.secim-ekle {
    display: flex;
    gap: var(--a2);
}

.secim-ekle > .secim,
.secim-ekle > .girdi {
    flex: 1;
    min-inline-size: 0;
}

.girdi--kisa {
    min-block-size: 38px;
    max-inline-size: 150px;
}

.kod {
    font-family: var(--yazi-es);
    font-weight: 600;
}

/* Ödeme yapılacak banka hesapları (site sahibinin IBAN'ları: Abonelik, Bakiyem) */
.banka-listesi {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: var(--a3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.banka-karti {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--a3);
    padding: var(--a3) var(--a4);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose-l);
    background: var(--renk-yuzey-2);
}

.banka-karti__ikon {
    display: grid;
    flex: none;
    place-items: center;
    inline-size: 40px;
    block-size: 40px;
    border-radius: var(--kose-l);
    background: var(--renk-vurgu-acik);
    color: var(--renk-vurgu-metin);
}

.banka-karti__bilgi {
    display: grid;
    flex: 1;
    min-inline-size: 180px;
}

.banka-karti__bilgi small {
    color: var(--renk-soluk);
    font-size: var(--boy-xs);
}

.banka-karti__iban {
    margin-block-start: 2px;
    font-size: var(--boy-s);
    overflow-wrap: anywhere;
}

/* Süzgeç çubuğu (liste sayfaları) */
.suzgec {
    display: flex;
    flex-wrap: wrap;
    gap: var(--a2);
    padding: var(--a3);
}

.suzgec__arama {
    flex: 1 1 260px;
}

.suzgec__secim {
    flex: 0 1 200px;
    inline-size: auto;
    min-block-size: 46px;
}

.suzgec .dugme {
    min-block-size: 46px;
}