/* =============================================================
   VassSite veri girişi bileşenleri — Apple (macOS / iOS) tasarım dili
   YALNIZ tema değişkenleri kullanılır (wwwroot/css/tema.css: --vs-*, --color-*).
   Yeni değer gerekirse önce temaya eklenir.
   Düzen: etiket üstte; onay kutusu ve anahtarda etiket solda, kontrol en sağda.
   <vs-grup> içinde her alan iOS gruplanmış liste satırı olur.
   ============================================================= */

/* ---------- Yazı tipi: yerel Inter (OFL, wwwroot/fonts/inter) — sistem yazı tipi yoksa ---------- */
@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter/inter-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter/inter-cyrillic-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter/inter-cyrillic-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Arapça: yerel Noto Sans Arabic (OFL, wwwroot/fonts/noto-sans-arabic) — html[lang="ar"] yığında öne alınır (tema.css) */
@font-face {
    font-family: "Noto Sans Arabic Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/noto-sans-arabic/noto-sans-arabic-arabic-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

/* Tanımlanmadan önce de blok yerleşsin (kayma olmasın) */
vs-metin, vs-sayi, vs-secim, vs-secim-ara, vs-onay, vs-anahtar, vs-segment, vs-grup,
vs-tarih, vs-radyo, vs-metin-alani, vs-ara, vs-dosya { display: block; }
vs-tarih[hidden], vs-radyo[hidden], vs-metin-alani[hidden], vs-ara[hidden], vs-dosya[hidden] { display: none; }
vs-dialog { display: contents; }
vs-metin[hidden], vs-sayi[hidden], vs-secim[hidden], vs-secim-ara[hidden], vs-onay[hidden], vs-anahtar[hidden], vs-segment[hidden], vs-grup[hidden], vs-izgara[hidden] { display: none; }

/* ---------- <vs-izgara>: genişliğe göre otomatik sütunlu form ---------- */
vs-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--vs-izgara-asgari)), 1fr));
    gap: var(--vs-form-aralik) var(--vs-izgara-sutun-aralik);
    align-items: start;
}
vs-izgara > [izgara-tam] { grid-column: 1 / -1; }

.vs-alan {
    display: flex;
    flex-direction: column;
    gap: var(--vs-alan-etiket-bosluk);
    min-width: 0;
    color: var(--vs-alan-metin);
    font-family: var(--vs-yazi-ailesi);
    letter-spacing: var(--vs-harf-araligi);
    -webkit-font-smoothing: antialiased;
}
html[data-bg-mode="dark"] .vs-alan,
html[data-theme="dark"] .vs-alan,
html[data-bg-mode="dark"] .vs-grup,
html[data-theme="dark"] .vs-grup { color-scheme: dark; }

/* ---------- Etiket ---------- */
.vs-alan__etiket {
    display: block;
    font-size: var(--vs-alan-etiket-yazi);
    font-weight: var(--vs-alan-etiket-agirlik);
    line-height: var(--vs-satir-yuksekligi);
    color: var(--vs-alan-etiket);
}
.vs-alan__etiket[hidden] { display: none; }
.vs-alan--zorunlu .vs-alan__etiket-metin::after {
    content: var(--vs-alan-zorunlu-isaret);
    color: var(--vs-alan-zorunlu);
    margin-inline-start: var(--space-1);
}

/* ---------- Kutu ve giriş ---------- */
.vs-alan__kutu {
    display: flex;
    align-items: center;
    min-height: var(--vs-alan-yukseklik);
    background: var(--vs-alan-zemin);
    border: var(--vs-alan-kenarlik-kalinlik) solid var(--vs-alan-kenarlik);
    border-radius: var(--vs-alan-kose);
    box-shadow: var(--vs-golge-1);
    transition: border-color var(--vs-alan-gecis-sure) var(--vs-alan-gecis-egri),
                box-shadow var(--vs-alan-gecis-sure) var(--vs-alan-gecis-egri),
                background-color var(--vs-alan-gecis-sure) var(--vs-alan-gecis-egri);
}
.vs-alan__kutu:hover { border-color: var(--vs-alan-kenarlik-hover); }
.vs-alan__kutu:focus-within {
    border-color: var(--vs-alan-odak);
    box-shadow: 0 0 0 var(--vs-alan-halka-genislik) var(--vs-alan-odak-halka);
}

.vs-alan__giris {
    flex: 1 1 auto;
    align-self: stretch;
    min-width: 0;
    margin: 0;
    padding: 0 var(--vs-alan-ic-bosluk);
    border: 0;
    border-radius: inherit;
    outline: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--vs-alan-yazi);
    letter-spacing: inherit;
}
.vs-alan__giris::placeholder { color: var(--vs-alan-placeholder); opacity: 1; }
.vs-sayi .vs-alan__giris { text-align: end; font-variant-numeric: tabular-nums; }

/* ---------- Açılır listeler: yerel select + ince ok ---------- */
/* Yerel açılır pencere arka planını <select>'in kendi arka planından alır; saydam bırakılırsa
   koyu temada da beyaz çizilir. Bu yüzden select opak zemin taşır (kutu zemini ile aynı renk),
   option ve optgroup tema renklerini açıkça alır; renk düzeni kökteki color-scheme'den gelir. */
select.vs-alan__giris {
    appearance: none;
    cursor: default;
    padding-inline-end: calc(2 * var(--vs-alan-ic-bosluk) + var(--vs-secim-ok-boyut));
    background-color: var(--vs-secim-acilir-zemin);
}
select.vs-alan__giris option,
select.vs-alan__giris optgroup {
    color: var(--vs-secim-acilir-metin);
    background-color: var(--vs-secim-acilir-zemin);
}
select.vs-alan__giris optgroup { color: var(--vs-secim-acilir-grup-metin); font-weight: var(--vs-agirlik-yari-kalin); }
select.vs-alan__giris option:disabled { color: var(--vs-alan-metin-pasif); }
select.vs-alan__giris:disabled { background-color: transparent; }
.vs-secim.vs-alan--bos select.vs-alan__giris { color: var(--vs-alan-placeholder); }
.vs-secim-ara .vs-alan__giris { padding-inline-end: calc(2 * var(--vs-alan-ic-bosluk) + var(--vs-secim-ok-boyut)); }

.vs-secim .vs-alan__kutu { position: relative; }
.vs-secim .vs-alan__kutu::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: calc(var(--vs-alan-ic-bosluk) + var(--vs-secim-ok-kalinlik));
    inline-size: var(--vs-secim-ok-boyut);
    block-size: var(--vs-secim-ok-boyut);
    border-inline-end: var(--vs-secim-ok-kalinlik) solid var(--vs-secim-ok);
    border-block-end: var(--vs-secim-ok-kalinlik) solid var(--vs-secim-ok);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
    transition: transform var(--vs-sure-kisa) var(--vs-egri-ios);
}
.vs-secim-ara .vs-alan__kutu:has(> [aria-expanded="true"])::after { transform: translateY(-20%) rotate(-135deg); }
.vs-alan--salt-okunur.vs-secim .vs-alan__kutu::after { display: none; }

/* ---------- Bilgi ikonu (girişin başında) ---------- */
.vs-alan__bilgi {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--vs-alan-bilgi-boyut);
    block-size: var(--vs-alan-bilgi-boyut);
    margin-inline-start: var(--vs-alan-ic-bosluk);
    border: var(--vs-alan-bilgi-kenarlik) solid currentColor;
    border-radius: var(--vs-kose-tam);
    color: var(--vs-alan-bilgi);
    font-size: var(--vs-alan-etiket-yazi);
    font-weight: var(--vs-agirlik-yari-kalin);
    line-height: 1;
    cursor: help;
    user-select: none;
}
.vs-alan__bilgi + .vs-alan__giris { padding-inline-start: var(--vs-alan-ic-bosluk-kucuk); }

/* ---------- Bilgi balonu (Popover; tarayıcının title ipucu koyu temayı bilmez) ---------- */
.vs-balon {
    position: fixed;
    inset: auto;
    margin: 0;
    box-sizing: border-box;
    max-inline-size: min(var(--vs-balon-azami-genislik), calc(100vw - 2 * var(--space-4)));
    padding: var(--vs-balon-ic-bosluk);
    background: var(--vs-balon-zemin);
    -webkit-backdrop-filter: var(--vs-balon-bulaniklik);
    backdrop-filter: var(--vs-balon-bulaniklik);
    color: var(--vs-balon-metin);
    border: var(--vs-ayirici-kalinlik) solid var(--vs-balon-kenarlik);
    border-radius: var(--vs-balon-kose);
    box-shadow: var(--vs-balon-golge);
    font-family: var(--vs-yazi-ailesi);
    font-size: var(--vs-balon-yazi);
    line-height: var(--vs-satir-yuksekligi);
    pointer-events: none;
    opacity: 1;
    transform: scale(1);
    transition: opacity var(--vs-sure-hizli) var(--vs-egri-ios),
                transform var(--vs-sure-hizli) var(--vs-egri-ios),
                overlay var(--vs-sure-hizli) allow-discrete,
                display var(--vs-sure-hizli) allow-discrete;
}
.vs-balon:not(:popover-open) { opacity: 0; transform: scale(var(--vs-liste-acilis-olcek)); }
@starting-style {
    .vs-balon:popover-open { opacity: 0; transform: scale(var(--vs-liste-acilis-olcek)); }
}

/* ---------- Segmentli seçici (iOS) ---------- */
.vs-segment__grup {
    display: inline-flex;
    flex: 1 1 auto;
    align-self: stretch;
    padding: var(--vs-segment-bosluk);
    gap: 0;
    background: var(--vs-segment-zemin);
    border-radius: var(--vs-alan-kose);
}
.vs-segment .vs-alan__kutu,
.vs-segment .vs-alan__kutu:hover,
.vs-segment .vs-alan__kutu:focus-within {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
.vs-segment__secenek {
    position: relative;
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0 var(--vs-alan-ic-bosluk);
    border-radius: var(--vs-segment-kose);
    color: var(--vs-segment-metin);
    font-size: var(--vs-alan-yazi);
    white-space: nowrap;
    cursor: default;
    transition: background-color var(--vs-sure-kisa) var(--vs-egri-ios), box-shadow var(--vs-sure-kisa) var(--vs-egri-ios);
}
/* seçili olmayan komşular arasında ince ayırıcı */
.vs-segment__secenek + .vs-segment__secenek {
    background-image: linear-gradient(var(--vs-segment-ayirici), var(--vs-segment-ayirici));
    background-repeat: no-repeat;
    background-size: var(--vs-ayirici-kalinlik) 50%;
    background-position: 0 50%;
}
.vs-segment__grup:dir(rtl) .vs-segment__secenek + .vs-segment__secenek { background-position: 100% 50%; }
.vs-segment__secenek:has(> input:checked),
.vs-segment__secenek:has(> input:checked) + .vs-segment__secenek { background-image: none; }
.vs-segment__secenek:has(> input:checked) {
    background-color: var(--vs-segment-secili-zemin);
    color: var(--vs-segment-secili-metin);
    box-shadow: var(--vs-segment-secili-golge);
    font-weight: var(--vs-agirlik-orta);
}
.vs-segment__secenek:has(> input:focus-visible) { box-shadow: 0 0 0 var(--vs-alan-halka-genislik) var(--vs-alan-odak-halka); }
.vs-segment__secenek > input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: inherit;
}
.vs-segment__secenek:has(> input:disabled) { color: var(--vs-alan-metin-pasif); }
.vs-alan--hata .vs-segment__grup { box-shadow: 0 0 0 var(--vs-alan-halka-genislik) var(--vs-alan-hata-halka); }

/* ---------- Mesaj ---------- */
.vs-alan__mesaj {
    font-size: var(--vs-alan-mesaj-yazi);
    line-height: var(--vs-satir-yuksekligi);
    color: var(--vs-alan-hata-metin);
}
.vs-alan__mesaj[hidden] { display: none; }

/* ---------- Hata: kırmızı kenarlık + kırmızı halka ---------- */
.vs-alan--hata .vs-alan__kutu,
.vs-alan--hata .vs-alan__kutu:hover,
.vs-alan--hata .vs-alan__kutu:focus-within {
    border-color: var(--vs-alan-hata);
    box-shadow: 0 0 0 var(--vs-alan-halka-genislik) var(--vs-alan-hata-halka);
}

/* ---------- Alan çıkışında kaydetme: sürüyor (turuncu) / kaydedildi (yeşil, kısa süre) — AlanTemeli.kayitDurumu ---------- */
.vs-alan--kaydediliyor .vs-alan__kutu {
    border-color: var(--vs-alan-kaydediliyor);
    box-shadow: 0 0 0 var(--vs-alan-halka-genislik) var(--vs-alan-kaydediliyor-halka);
}
.vs-alan--kaydedildi .vs-alan__kutu {
    border-color: var(--vs-alan-kaydedildi);
    box-shadow: 0 0 0 var(--vs-alan-halka-genislik) var(--vs-alan-kaydedildi-halka);
}
.vs-alan--satir.vs-alan--kaydedildi { background: var(--vs-alan-kaydedildi-zemin); transition: background var(--vs-alan-gecis-sure) var(--vs-alan-gecis-egri); }
.vs-alan--satir.vs-alan--kaydedildi .vs-alan__kutu { box-shadow: none; }

/* ---------- Salt okunur ---------- */
.vs-alan--salt-okunur .vs-alan__kutu,
.vs-alan--salt-okunur .vs-alan__kutu:hover,
.vs-alan--salt-okunur .vs-alan__kutu:focus-within {
    background: var(--vs-alan-zemin-salt-okunur);
    border-color: var(--vs-alan-kenarlik);
    box-shadow: none;
}
.vs-alan--salt-okunur select.vs-alan__giris:disabled { color: var(--vs-alan-metin); opacity: 1; }

/* ---------- Pasif ---------- */
.vs-alan--pasif { opacity: var(--vs-alan-pasif-opaklik); }
.vs-alan--pasif .vs-alan__kutu,
.vs-alan--pasif .vs-alan__kutu:hover {
    background: var(--vs-alan-zemin-pasif);
    border-color: var(--vs-alan-kenarlik);
    box-shadow: none;
}
.vs-alan--pasif .vs-alan__giris { color: var(--vs-alan-metin-pasif); }

/* ---------- Boyut ---------- */
.vs-alan--kucuk {
    --vs-alan-yukseklik: var(--vs-alan-yukseklik-kucuk);
    --vs-alan-yazi: var(--vs-alan-yazi-kucuk);
    --vs-alan-ic-bosluk: var(--vs-alan-ic-bosluk-kucuk);
}
.vs-alan--buyuk {
    --vs-alan-yukseklik: var(--vs-alan-yukseklik-buyuk);
    --vs-alan-yazi: var(--vs-alan-yazi-buyuk);
    --vs-alan-ic-bosluk: var(--vs-alan-ic-bosluk-buyuk);
}

/* ---------- Satır düzeni: etiket solda, kontrol en sağda (onay, anahtar) ---------- */
.vs-alan--satir {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--vs-alan-satir-bosluk);
    row-gap: var(--vs-alan-etiket-bosluk);
    min-height: var(--vs-alan-yukseklik);
}
.vs-alan--satir .vs-alan__etiket {
    font-size: var(--vs-alan-yazi);
    font-weight: var(--vs-agirlik-normal);
    color: var(--vs-alan-metin);
}
.vs-alan--satir .vs-alan__kutu,
.vs-alan--satir .vs-alan__kutu:hover,
.vs-alan--satir .vs-alan__kutu:focus-within,
.vs-alan--satir.vs-alan--hata .vs-alan__kutu,
.vs-alan--satir.vs-alan--pasif .vs-alan__kutu,
.vs-alan--satir.vs-alan--salt-okunur .vs-alan__kutu {
    grid-column: 2;
    min-height: var(--vs-alan-yukseklik);
    gap: var(--vs-alan-satir-bosluk);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
.vs-alan--satir .vs-alan__mesaj { grid-column: 1 / -1; }

/* ---------- Etiket yanda: etiket-konum="yan" (alanda ya da kapsayıcıda; alan "ust" ile ezer) ---------- */
.vs-alan[etiket-konum="yan"]:not(.vs-alan--satir),
[etiket-konum="yan"] > .vs-alan:not(.vs-alan--satir):not([etiket-konum="ust"]) {
    display: grid;
    grid-template-columns: var(--vs-alan-yan-etiket-genislik) minmax(0, 1fr);
    align-items: center;
    column-gap: var(--vs-alan-satir-bosluk);
    row-gap: var(--vs-alan-etiket-bosluk);
}
.vs-alan[etiket-konum="yan"]:not(.vs-alan--satir) .vs-alan__etiket,
[etiket-konum="yan"] > .vs-alan:not(.vs-alan--satir):not([etiket-konum="ust"]) .vs-alan__etiket {
    grid-column: 1;
    font-size: var(--vs-alan-yazi);
    text-align: end;
}
.vs-alan[etiket-konum="yan"]:not(.vs-alan--satir) .vs-alan__kutu,
.vs-alan[etiket-konum="yan"]:not(.vs-alan--satir) .vs-alan__mesaj,
[etiket-konum="yan"] > .vs-alan:not(.vs-alan--satir):not([etiket-konum="ust"]) .vs-alan__kutu,
[etiket-konum="yan"] > .vs-alan:not(.vs-alan--satir):not([etiket-konum="ust"]) .vs-alan__mesaj { grid-column: 2; }
.vs-alan--satir .vs-alan__bilgi { margin-inline-start: 0; }

/* ---------- Onay kutusu: macOS yuvarlatılmış kare / iOS yuvarlak ---------- */
.vs-onay__kutu {
    appearance: none;
    flex: none;
    display: inline-grid;
    place-content: center;
    inline-size: var(--vs-onay-boyut);
    block-size: var(--vs-onay-boyut);
    margin: 0;
    border: var(--vs-cizgi) solid var(--vs-onay-kenarlik);
    border-radius: var(--vs-onay-kose);
    background: var(--vs-onay-zemin);
    box-shadow: var(--vs-golge-1);
    cursor: default;
    transition: background-color var(--vs-onay-sure) var(--vs-egri-ios),
                border-color var(--vs-onay-sure) var(--vs-egri-ios);
}
.vs-onay--yuvarlak .vs-onay__kutu {
    inline-size: var(--vs-onay-boyut-yuvarlak);
    block-size: var(--vs-onay-boyut-yuvarlak);
    border-radius: var(--vs-kose-tam);
}
.vs-onay__kutu::after {
    content: "";
    inline-size: calc(var(--vs-onay-boyut) * 0.28);
    block-size: calc(var(--vs-onay-boyut) * 0.5);
    border: solid var(--vs-onay-isaret);
    border-width: 0 var(--vs-onay-isaret-kalinlik) var(--vs-onay-isaret-kalinlik) 0;
    transform: translateY(-12%) rotate(45deg) scale(0);
    transition: transform var(--vs-onay-sure) var(--vs-onay-egri);
}
.vs-onay__kutu:checked { background: var(--vs-onay-dolu); border-color: var(--vs-onay-dolu); }
.vs-onay__kutu:checked::after { transform: translateY(-12%) rotate(45deg) scale(1); }
.vs-alan--hata .vs-onay__kutu { border-color: var(--vs-alan-hata); box-shadow: 0 0 0 var(--vs-alan-halka-genislik) var(--vs-alan-hata-halka); }

/* ---------- Aç/kapa anahtarı: iOS ---------- */
.vs-anahtar__giris {
    --vs-anahtar-topuz-boy: calc(var(--vs-anahtar-yukseklik) - 2 * var(--vs-anahtar-bosluk));
    --vs-anahtar-topuz-en: var(--vs-anahtar-topuz-boy);
    appearance: none;
    flex: none;
    position: relative;
    inline-size: var(--vs-anahtar-genislik);
    block-size: var(--vs-anahtar-yukseklik);
    margin: 0;
    border: 0;
    border-radius: var(--vs-kose-tam);
    background: var(--vs-anahtar-zemin);
    cursor: default;
    transition: background-color var(--vs-anahtar-sure) var(--vs-egri-ios);
}
.vs-anahtar__giris:active { --vs-anahtar-topuz-en: calc(var(--vs-anahtar-topuz-boy) + var(--vs-anahtar-uzama)); }
.vs-anahtar__giris::before {
    content: "";
    position: absolute;
    inset-block-start: var(--vs-anahtar-bosluk);
    inset-inline-start: var(--vs-anahtar-bosluk);
    inline-size: var(--vs-anahtar-topuz-en);
    block-size: var(--vs-anahtar-topuz-boy);
    border-radius: var(--vs-kose-tam);
    background: var(--vs-anahtar-topuz);
    box-shadow: var(--vs-anahtar-topuz-golge);
    transition: transform var(--vs-anahtar-sure) var(--vs-anahtar-egri),
                inline-size var(--vs-anahtar-sure) var(--vs-egri-ios);
}
.vs-anahtar__giris:checked { background: var(--vs-anahtar-zemin-acik); }
.vs-anahtar__giris:checked::before {
    transform: translateX(calc(var(--vs-anahtar-genislik) - var(--vs-anahtar-topuz-en) - 2 * var(--vs-anahtar-bosluk)));
}
/* Sağdan sola: topuz sağdan başlar (inset-inline-start) ve sola kayar */
.vs-anahtar__giris:dir(rtl):checked::before {
    transform: translateX(calc(-1 * (var(--vs-anahtar-genislik) - var(--vs-anahtar-topuz-en) - 2 * var(--vs-anahtar-bosluk))));
}
.vs-alan--salt-okunur .vs-anahtar__giris:active,
.vs-alan--pasif .vs-anahtar__giris:active { --vs-anahtar-topuz-en: var(--vs-anahtar-topuz-boy); }
.vs-alan--hata .vs-anahtar__giris { box-shadow: 0 0 0 var(--vs-alan-halka-genislik) var(--vs-alan-hata-halka); }

/* Onay / anahtar: klavye odağı */
.vs-onay__kutu:focus-visible,
.vs-anahtar__giris:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--vs-alan-halka-genislik) var(--vs-alan-odak-halka);
}

/* ---------- Açılır liste: Popover API, saydam + bulanık panel ---------- */
.vs-liste {
    position: fixed;
    inset: auto;
    margin: 0;
    box-sizing: border-box;
    max-block-size: var(--vs-liste-azami-yukseklik);
    max-inline-size: calc(100vw - 2 * var(--space-4));
    padding: var(--vs-liste-ic-bosluk);
    overflow: auto;
    overscroll-behavior: contain;
    background: var(--vs-liste-zemin);
    -webkit-backdrop-filter: var(--vs-liste-bulaniklik);
    backdrop-filter: var(--vs-liste-bulaniklik);
    color: var(--vs-alan-metin);
    border: var(--vs-ayirici-kalinlik) solid var(--vs-liste-kenarlik);
    border-radius: var(--vs-liste-kose);
    box-shadow: var(--vs-liste-golge);
    font-family: var(--vs-yazi-ailesi);
    font-size: var(--vs-alan-yazi);
    letter-spacing: var(--vs-harf-araligi);
    transform-origin: top center;
    opacity: 1;
    transform: scale(1);
    transition: opacity var(--vs-liste-sure) var(--vs-liste-egri),
                transform var(--vs-liste-sure) var(--vs-liste-egri),
                overlay var(--vs-liste-sure) allow-discrete,
                display var(--vs-liste-sure) allow-discrete;
}
.vs-liste[data-yon="ust"] { transform-origin: bottom center; }
.vs-liste:not(:popover-open) { opacity: 0; transform: scale(var(--vs-liste-acilis-olcek)); }
@starting-style {
    .vs-liste:popover-open { opacity: 0; transform: scale(var(--vs-liste-acilis-olcek)); }
}

.vs-liste__secenek {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--vs-liste-satir-yukseklik);
    padding: 0 var(--vs-liste-satir-bosluk);
    border-radius: var(--vs-liste-satir-kose);
    cursor: default;
}
.vs-liste__metin {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* seçili satırda onay işareti (CSS ile çizilir) */
.vs-liste__secenek::after {
    content: "";
    flex: none;
    inline-size: 0.32em;
    block-size: 0.62em;
    margin-inline-end: 0.2em;
    border: solid var(--vs-liste-isaret);
    border-width: 0 var(--vs-onay-isaret-kalinlik) var(--vs-onay-isaret-kalinlik) 0;
    transform: translateY(-15%) rotate(45deg);
    visibility: hidden;
}
.vs-liste__secenek[aria-selected="true"]::after { visibility: visible; }
.vs-liste__secenek--etkin { background: var(--vs-liste-uzerinde); color: var(--vs-liste-uzerinde-metin); }
.vs-liste__secenek--etkin::after { border-color: var(--vs-liste-uzerinde-metin); }
.vs-liste__secenek[aria-disabled="true"] { color: var(--vs-alan-metin-pasif); }
.vs-liste__bos {
    display: flex;
    align-items: center;
    min-block-size: var(--vs-liste-satir-yukseklik);
    padding: 0 var(--vs-liste-satir-bosluk);
    color: var(--vs-liste-bos-metin);
}

/* ---------- <vs-grup>: iOS gruplanmış (inset) liste ---------- */
.vs-grup {
    font-family: var(--vs-yazi-ailesi);
    letter-spacing: var(--vs-harf-araligi);
}
.vs-grup__baslik,
.vs-grup__aciklama {
    padding-inline: var(--vs-grup-ic-bosluk);
    line-height: var(--vs-satir-yuksekligi);
}
.vs-grup__baslik {
    padding-block-end: var(--vs-grup-metin-bosluk);
    font-size: var(--vs-grup-baslik-yazi);
    color: var(--vs-grup-baslik);
    text-transform: uppercase;
}
.vs-grup__aciklama {
    padding-block-start: var(--vs-grup-metin-bosluk);
    font-size: var(--vs-grup-aciklama-yazi);
    color: var(--vs-grup-aciklama);
}
.vs-grup__baslik[hidden],
.vs-grup__aciklama[hidden] { display: none; }
.vs-grup__kart {
    background: var(--vs-grup-zemin);
    border-radius: var(--vs-grup-kose);
    box-shadow: var(--vs-grup-golge);
    overflow: hidden;
}
.vs-grup__kart > * {
    padding-inline: var(--vs-grup-ic-bosluk);
}
/* satırlar arası ince ayırıcı, soldan girintili (iOS) */
.vs-grup__kart > * + * {
    background-image: linear-gradient(var(--vs-ayirici), var(--vs-ayirici));
    background-repeat: no-repeat;
    background-size: calc(100% - var(--vs-grup-ayirici-girinti)) var(--vs-ayirici-kalinlik);
    background-position: 100% 0;
}
.vs-grup__kart:dir(rtl) > * + * { background-position: 0 0; }

/* Grup satırı: etiket solda, değer sağda; alanın kendi kutusu görünmez */
.vs-grup__kart > .vs-alan { min-height: var(--vs-grup-satir); justify-content: center; }
.vs-grup__kart > .vs-alan:not(.vs-alan--satir) {
    display: grid;
    grid-template-columns: minmax(6rem, 38%) minmax(0, 1fr);
    align-items: center;
    column-gap: var(--vs-alan-satir-bosluk);
    row-gap: 0;
}
.vs-grup__kart > .vs-alan:not(.vs-alan--satir) .vs-alan__etiket {
    font-size: var(--vs-alan-yazi);
    font-weight: var(--vs-agirlik-normal);
    color: var(--vs-alan-metin);
}
.vs-grup__kart > .vs-alan .vs-alan__etiket[hidden] + .vs-alan__kutu { grid-column: 1 / -1; }
.vs-grup__kart > .vs-alan .vs-alan__kutu,
.vs-grup__kart > .vs-alan .vs-alan__kutu:hover,
.vs-grup__kart > .vs-alan .vs-alan__kutu:focus-within {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
.vs-grup__kart > .vs-alan:not(.vs-alan--satir) .vs-alan__giris { text-align: end; padding-inline-start: 0; }
.vs-grup__kart > .vs-alan.vs-secim .vs-alan__kutu::after { inset-inline-end: var(--vs-secim-ok-kalinlik); }
.vs-grup__kart > .vs-alan.vs-secim .vs-alan__giris { padding-inline-end: calc(var(--vs-alan-ic-bosluk) + var(--vs-secim-ok-boyut)); }
.vs-grup__kart > .vs-alan:not(.vs-alan--satir):not(.vs-secim) .vs-alan__giris { padding-inline-end: 0; }
.vs-grup__kart > .vs-alan--hata .vs-alan__etiket { color: var(--vs-alan-hata); }
.vs-grup__kart > .vs-alan .vs-alan__mesaj { grid-column: 1 / -1; padding-block-end: var(--space-2); }

/* =============================================================
   C3b — kalan giriş bileşenleri ve katmanlar
   ============================================================= */

/* ---------- Düğme (dialog altbilgisi, pencereler, dosya) ---------- */
.vs-dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--vs-dugme-yukseklik);
    padding: 0 var(--vs-dugme-ic-bosluk);
    border: 0;
    border-radius: var(--vs-dugme-kose);
    background: var(--vs-dugme-zemin);
    color: var(--vs-dugme-metin);
    font-family: var(--vs-yazi-ailesi);
    font-size: var(--vs-alan-yazi);
    font-weight: var(--vs-agirlik-orta);
    letter-spacing: var(--vs-harf-araligi);
    white-space: nowrap;
    cursor: default;
    transition: transform var(--vs-sure-hizli) var(--vs-egri-ios), filter var(--vs-sure-hizli) var(--vs-egri-ios);
}
.vs-dugme:active:not(:disabled) { transform: scale(var(--vs-dugme-basili-olcek)); }
.vs-dugme:focus-visible { outline: none; box-shadow: 0 0 0 var(--vs-alan-halka-genislik) var(--vs-alan-odak-halka); }
.vs-dugme:disabled { opacity: var(--vs-alan-pasif-opaklik); }
.vs-dugme--ana { background: var(--vs-dugme-ana-zemin); color: var(--vs-dugme-ana-metin); }
.vs-dugme--tehlikeli { background: var(--vs-dugme-tehlikeli-zemin); color: var(--vs-dugme-tehlikeli-metin); }
.vs-dugme--tehlikeli:focus-visible { box-shadow: 0 0 0 var(--vs-alan-halka-genislik) var(--vs-alan-hata-halka); }

/* Kapatma (×) işareti — CSS ile, iki çapraz çizgi (snack, ara, dosya, dialog ortak) */
.vs-dialog__kapat,
.vs-snack__kapat,
.vs-ara__temizle,
.vs-dosya__kaldir {
    position: relative;
    flex: none;
    inline-size: calc(var(--vs-yazi) * 1.6);
    block-size: calc(var(--vs-yazi) * 1.6);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--vs-kose-tam);
    background: var(--color-fill-3);
    color: var(--color-label-2);
    cursor: default;
}
.vs-dialog__kapat::before, .vs-dialog__kapat::after,
.vs-snack__kapat::before, .vs-snack__kapat::after,
.vs-ara__temizle::before, .vs-ara__temizle::after,
.vs-dosya__kaldir::before, .vs-dosya__kaldir::after {
    content: "";
    position: absolute;
    inset: 0;                 /* simetrik işaret: yönden bağımsız ortalanır */
    margin: auto;
    inline-size: 50%;
    block-size: var(--vs-secim-ok-kalinlik);
    border-radius: var(--vs-kose-tam);
    background: currentColor;
    transform: rotate(45deg);
}
.vs-dialog__kapat::after, .vs-snack__kapat::after, .vs-ara__temizle::after, .vs-dosya__kaldir::after {
    transform: rotate(-45deg);
}
.vs-dialog__kapat:focus-visible, .vs-snack__kapat:focus-visible, .vs-dosya__kaldir:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--vs-alan-halka-genislik) var(--vs-alan-odak-halka);
}

/* ---------- vs-radyo: iOS satırları, metin solda, daire en sağda ---------- */
.vs-radyo__liste {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.vs-radyo .vs-alan__kutu,
.vs-radyo .vs-alan__kutu:hover,
.vs-radyo .vs-alan__kutu:focus-within {
    padding: 0 var(--vs-alan-ic-bosluk);
}
.vs-radyo__satir {
    display: flex;
    align-items: center;
    gap: var(--vs-alan-satir-bosluk);
    min-height: var(--vs-alan-yukseklik);
    font-size: var(--vs-alan-yazi);
    cursor: default;
}
.vs-radyo__satir + .vs-radyo__satir { border-block-start: var(--vs-ayirici-kalinlik) solid var(--vs-ayirici); }
.vs-radyo__metin { flex: 1 1 auto; min-width: 0; }
.vs-radyo__daire {
    appearance: none;
    flex: none;
    display: inline-grid;
    place-content: center;
    inline-size: var(--vs-radyo-boyut);
    block-size: var(--vs-radyo-boyut);
    margin: 0;
    border: var(--vs-cizgi) solid var(--vs-onay-kenarlik);
    border-radius: var(--vs-kose-tam);
    background: var(--vs-onay-zemin);
    cursor: default;
    transition: border-color var(--vs-onay-sure) var(--vs-egri-ios), background-color var(--vs-onay-sure) var(--vs-egri-ios);
}
.vs-radyo__daire::after {
    content: "";
    inline-size: var(--vs-radyo-nokta);
    block-size: var(--vs-radyo-nokta);
    border-radius: var(--vs-kose-tam);
    background: var(--vs-onay-isaret);
    transform: scale(0);
    transition: transform var(--vs-onay-sure) var(--vs-onay-egri);
}
.vs-radyo__daire:checked { background: var(--vs-onay-dolu); border-color: var(--vs-onay-dolu); }
.vs-radyo__daire:checked::after { transform: scale(1); }
.vs-radyo__daire:focus-visible { outline: none; box-shadow: 0 0 0 var(--vs-alan-halka-genislik) var(--vs-alan-odak-halka); }
.vs-radyo__satir:has(> .vs-radyo__daire:disabled) { color: var(--vs-alan-metin-pasif); }
.vs-alan--hata .vs-radyo__daire { border-color: var(--vs-alan-hata); }

/* ---------- vs-metin-alani ---------- */
.vs-metin-alani .vs-alan__kutu { align-items: stretch; }
.vs-metin-alani__giris {
    resize: none;
    padding-block: var(--vs-metin-alani-ic-bosluk-dikey);
    line-height: var(--vs-metin-alani-satir-yuksekligi);
    overflow-y: hidden;
}
.vs-metin-alani__sayac {
    align-self: flex-end;
    font-size: var(--vs-alan-mesaj-yazi);
    color: var(--vs-sayac);
    font-variant-numeric: tabular-nums;
}
.vs-metin-alani__sayac[hidden] { display: none; }

/* ---------- vs-ara: iOS arama alanı ---------- */
.vs-ara .vs-alan__kutu { background: var(--vs-ara-zemin); border-color: transparent; box-shadow: none; }
.vs-ara .vs-alan__kutu:hover { border-color: transparent; }
.vs-ara__ikon {
    position: relative;
    flex: none;
    inline-size: calc(var(--vs-yazi) * 0.75);
    block-size: calc(var(--vs-yazi) * 0.75);
    margin-inline-start: var(--vs-alan-ic-bosluk);
    border: var(--vs-secim-ok-kalinlik) solid var(--vs-ara-ikon);
    border-radius: var(--vs-kose-tam);
}
/* büyüteç sapı sağ altta; büyüteç işareti sağdan sola yazımda aynalanmaz (Apple) */
.vs-ara__ikon::after {
    content: "";
    position: absolute;
    top: 85%;
    left: 85%;
    inline-size: 45%;
    block-size: var(--vs-secim-ok-kalinlik);
    background: var(--vs-ara-ikon);
    border-radius: var(--vs-kose-tam);
    transform: rotate(45deg);
    transform-origin: 0 50%;
}
.vs-ara .vs-alan__giris { padding-inline-start: var(--vs-alan-ic-bosluk-kucuk); }
.vs-ara__temizle {
    margin-inline-end: var(--vs-alan-ic-bosluk-kucuk);
    inline-size: calc(var(--vs-yazi) * 1.15);
    block-size: calc(var(--vs-yazi) * 1.15);
    background: var(--vs-ara-temizle-zemin);
    color: var(--vs-ara-temizle-isaret);
}
.vs-ara__temizle[hidden] { display: none; }

/* ---------- vs-dosya ---------- */
.vs-dosya .vs-alan__kutu,
.vs-dosya .vs-alan__kutu:hover,
.vs-dosya .vs-alan__kutu:focus-within {
    flex-direction: column;
    align-items: stretch;
    gap: var(--vs-alan-etiket-bosluk);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
.vs-dosya__giris {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
}
.vs-dosya__dugme { align-self: flex-start; }
.vs-dosya__birakma {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--vs-dosya-birakma-yukseklik);
    padding: var(--vs-alan-ic-bosluk);
    border: var(--vs-secim-ok-kalinlik) dashed var(--vs-dosya-birakma-kenarlik);
    border-radius: var(--vs-alan-kose);
    background: var(--vs-dosya-birakma-zemin);
    color: var(--color-label-2);
    font-size: var(--vs-alan-yazi);
    text-align: center;
    cursor: default;
    transition: background-color var(--vs-sure-kisa) var(--vs-egri-ios), border-color var(--vs-sure-kisa) var(--vs-egri-ios);
}
.vs-dosya__birakma[hidden] { display: none; }
.vs-dosya--uzerinde .vs-dosya__birakma { background: var(--vs-dosya-birakma-uzerinde); border-color: var(--vs-renk-vurgu); }
.vs-dosya__liste { margin: 0; padding: 0; list-style: none; font-size: var(--vs-alan-yazi); }
.vs-dosya__oge {
    display: flex;
    align-items: center;
    gap: var(--vs-alan-satir-bosluk);
    min-height: var(--vs-alan-yukseklik);
}
.vs-dosya__oge + .vs-dosya__oge { border-block-start: var(--vs-ayirici-kalinlik) solid var(--vs-ayirici); }
.vs-dosya__ad { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vs-dosya__boyut { color: var(--color-label-2); font-variant-numeric: tabular-nums; }
.vs-dosya__bos { color: var(--color-label-3); }
.vs-alan--pasif .vs-dosya__birakma { cursor: not-allowed; }

/* ---------- vs-tarih: takvim düğmesi (CSS ile çizilmiş ince takvim) ---------- */
.vs-tarih__dugme {
    flex: none;
    display: inline-grid;
    place-content: center;
    align-self: stretch;
    padding: 0 var(--vs-alan-ic-bosluk);
    border: 0;
    background: transparent;
    color: var(--vs-takvim-ikon);
    cursor: default;
}
.vs-tarih__dugme:disabled { opacity: var(--vs-alan-pasif-opaklik); }
.vs-tarih__ikon {
    position: relative;
    inline-size: calc(var(--vs-yazi) * 1.05);
    block-size: calc(var(--vs-yazi) * 0.95);
    border: var(--vs-secim-ok-kalinlik) solid currentColor;
    border-radius: calc(var(--vs-yazi) * 0.2);
    border-block-start-width: calc(var(--vs-secim-ok-kalinlik) * 2.5);
}
.vs-tarih__ikon::before, .vs-tarih__ikon::after {
    content: "";
    position: absolute;
    inset-block-start: calc(var(--vs-secim-ok-kalinlik) * -3.5);
    inline-size: var(--vs-secim-ok-kalinlik);
    block-size: calc(var(--vs-yazi) * 0.3);
    background: currentColor;
    border-radius: var(--vs-kose-tam);
}
.vs-tarih__ikon::before { inset-inline-start: 22%; }
.vs-tarih__ikon::after { inset-inline-end: 22%; }

/* Takvim paneli (Popover, saydam + bulanık) */
.vs-takvim {
    position: fixed;
    inset: auto;
    margin: 0;
    box-sizing: border-box;
    padding: var(--vs-ic-bosluk);
    background: var(--vs-liste-zemin);
    -webkit-backdrop-filter: var(--vs-liste-bulaniklik);
    backdrop-filter: var(--vs-liste-bulaniklik);
    color: var(--vs-alan-metin);
    border: var(--vs-ayirici-kalinlik) solid var(--vs-liste-kenarlik);
    border-radius: var(--vs-liste-kose);
    box-shadow: var(--vs-liste-golge);
    font-family: var(--vs-yazi-ailesi);
    font-size: var(--vs-alan-yazi);
    letter-spacing: var(--vs-harf-araligi);
    transform-origin: top center;
    opacity: 1;
    transform: scale(1);
    transition: opacity var(--vs-liste-sure) var(--vs-liste-egri),
                transform var(--vs-liste-sure) var(--vs-liste-egri),
                overlay var(--vs-liste-sure) allow-discrete,
                display var(--vs-liste-sure) allow-discrete;
}
.vs-takvim[data-yon="ust"] { transform-origin: bottom center; }
.vs-takvim:not(:popover-open) { opacity: 0; transform: scale(var(--vs-liste-acilis-olcek)); }
@starting-style {
    .vs-takvim:popover-open { opacity: 0; transform: scale(var(--vs-liste-acilis-olcek)); }
}
.vs-takvim__ust { display: flex; align-items: center; gap: var(--space-2); margin-block-end: var(--vs-ic-bosluk); }
.vs-takvim__baslik { flex: 1 1 auto; text-align: center; font-size: var(--vs-takvim-baslik-yazi); font-weight: var(--vs-agirlik-yari-kalin); }
.vs-takvim__gezinme {
    position: relative;
    inline-size: var(--vs-takvim-hucre);
    block-size: var(--vs-takvim-hucre);
    border: 0;
    border-radius: var(--vs-kose-tam);
    background: transparent;
    color: var(--vs-takvim-bugun);
    cursor: default;
}
.vs-takvim__gezinme:hover { background: var(--vs-takvim-etkin); }
/* ince ok (chevron): "önceki" başa, "sonraki" sona bakar; sağdan sola yazımda aynalanır.
   Çizim fiziksel kenarlarla yapılır (‹ biçimi), yön :dir(rtl) ile açıkça çevrilir. */
.vs-takvim__gezinme::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    inline-size: var(--vs-secim-ok-boyut);
    block-size: var(--vs-secim-ok-boyut);
    border-left: var(--vs-secim-ok-kalinlik) solid currentColor;
    border-bottom: var(--vs-secim-ok-kalinlik) solid currentColor;
    transform: translateX(15%) rotate(45deg);
}
.vs-takvim__sonraki::after,
.vs-takvim__onceki:dir(rtl)::after { transform: translateX(-15%) rotate(-135deg); }
.vs-takvim__sonraki:dir(rtl)::after { transform: translateX(15%) rotate(45deg); }
.vs-takvim__izgara {
    display: grid;
    grid-template-columns: repeat(7, var(--vs-takvim-hucre));
    gap: calc(var(--vs-aralik) / 4);
    justify-content: center;
}
.vs-takvim__gun-adi {
    display: grid;
    place-content: center;
    block-size: calc(var(--vs-takvim-hucre) * 0.7);
    font-size: var(--vs-alan-etiket-yazi);
    color: var(--vs-takvim-gun-adi);
    text-transform: uppercase;
}
.vs-takvim__gun {
    inline-size: var(--vs-takvim-hucre);
    block-size: var(--vs-takvim-hucre);
    padding: 0;
    border: 0;
    border-radius: var(--vs-kose-tam);
    background: transparent;
    color: inherit;
    font: inherit;
    font-variant-numeric: tabular-nums;
    cursor: default;
}
.vs-takvim__gun:hover:not(:disabled), .vs-takvim__gun--etkin { background: var(--vs-takvim-etkin); }
.vs-takvim__gun--diger-ay { color: var(--vs-takvim-diger-ay); }
.vs-takvim__gun--bugun { color: var(--vs-takvim-bugun); font-weight: var(--vs-agirlik-yari-kalin); }
.vs-takvim__gun--secili, .vs-takvim__gun--secili:hover {
    background: var(--vs-takvim-secili-zemin);
    color: var(--vs-takvim-secili-metin);
    font-weight: var(--vs-agirlik-yari-kalin);
}
.vs-takvim__gun:disabled { color: var(--vs-takvim-pasif); text-decoration: line-through; }
.vs-takvim__alt { display: flex; justify-content: center; margin-block-start: var(--vs-ic-bosluk); }
/* Dar ekran: alt sayfa (sheet) */
@media (max-width: 640px) {
    .vs-takvim {
        inset: auto 0 0 0;
        inline-size: 100%;
        max-inline-size: none;
        border-end-start-radius: 0;
        border-end-end-radius: 0;
        padding-block-end: calc(var(--vs-ic-bosluk) * 2);
        transform-origin: bottom center;
    }
    .vs-takvim:not(:popover-open) { transform: translateY(100%); opacity: 1; }
    @starting-style {
        .vs-takvim:popover-open { transform: translateY(100%); opacity: 1; }
    }
    .vs-takvim__izgara { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .vs-takvim__gun { inline-size: 100%; }
}

/* ---------- vs-dialog (sheet) ---------- */
html.vs-kaydirma-kilitli,
html.vs-kaydirma-kilitli body { overflow: hidden; }

.vs-dialog__pencere {
    box-sizing: border-box;
    inline-size: min(var(--vs-dialog-genislik-orta), calc(100vw - 2 * var(--vs-dialog-kenar-payi)));
    max-inline-size: none;
    max-block-size: calc(100dvh - 2 * var(--vs-dialog-kenar-payi));
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: var(--vs-dialog-kose);
    background: var(--vs-dialog-zemin);
    -webkit-backdrop-filter: var(--vs-dialog-bulaniklik);
    backdrop-filter: var(--vs-dialog-bulaniklik);
    color: var(--vs-dialog-metin);
    box-shadow: var(--vs-dialog-golge);
    font-family: var(--vs-yazi-ailesi);
    font-size: var(--vs-yazi);
    letter-spacing: var(--vs-harf-araligi);
    overflow: hidden;
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--vs-dialog-sure) var(--vs-dialog-egri),
                transform var(--vs-dialog-sure) var(--vs-dialog-egri),
                overlay var(--vs-dialog-sure) allow-discrete,
                display var(--vs-dialog-sure) allow-discrete;
}
.vs-dialog__pencere[open] { display: flex; flex-direction: column; }
.vs-dialog__pencere:not([open]) { opacity: 0; transform: translateY(var(--vs-dialog-kayma)); }
@starting-style {
    .vs-dialog__pencere[open] { opacity: 0; transform: translateY(var(--vs-dialog-kayma)); }
}
.vs-dialog__pencere::backdrop {
    background: var(--vs-dialog-arka-plan);
    -webkit-backdrop-filter: var(--vs-dialog-arka-bulaniklik);
    backdrop-filter: var(--vs-dialog-arka-bulaniklik);
    opacity: 1;
    transition: opacity var(--vs-dialog-sure) var(--vs-dialog-egri),
                overlay var(--vs-dialog-sure) allow-discrete,
                display var(--vs-dialog-sure) allow-discrete;
}
.vs-dialog__pencere:not([open])::backdrop { opacity: 0; }
@starting-style {
    .vs-dialog__pencere[open]::backdrop { opacity: 0; }
}
.vs-dialog__pencere[data-boyut="kucuk"] { inline-size: min(var(--vs-dialog-genislik-kucuk), calc(100vw - 2 * var(--vs-dialog-kenar-payi))); }
.vs-dialog__pencere[data-boyut="buyuk"] { inline-size: min(var(--vs-dialog-genislik-buyuk), calc(100vw - 2 * var(--vs-dialog-kenar-payi))); }
.vs-dialog__pencere[data-boyut="tam"] {
    inline-size: calc(100vw - 2 * var(--vs-dialog-kenar-payi));
    block-size: calc(100dvh - 2 * var(--vs-dialog-kenar-payi));
}
.vs-dialog__ust {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--vs-ic-bosluk) var(--vs-dialog-ic-bosluk);
    border-block-end: var(--vs-ayirici-kalinlik) solid var(--vs-ayirici);
    flex: none;
}
.vs-dialog__baslik {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: var(--vs-dialog-baslik-yazi);
    font-weight: var(--vs-agirlik-yari-kalin);
    text-align: start;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.vs-dialog__menu {
    position: relative;
    flex: none;
    inline-size: calc(var(--vs-yazi) * 1.8);
    block-size: calc(var(--vs-yazi) * 1.8);
    border: 0;
    border-radius: var(--vs-kose-sm);
    background: transparent;
    color: var(--vs-renk-vurgu);
    display: none;
    cursor: default;
}
/* üç ince çizgi (menü) */
.vs-dialog__menu::before {
    content: "";
    position: absolute;
    inset-inline: 22%;
    inset-block-start: 50%;
    block-size: var(--vs-secim-ok-kalinlik);
    background: currentColor;
    box-shadow: 0 calc(var(--vs-yazi) * -0.35) 0 currentColor, 0 calc(var(--vs-yazi) * 0.35) 0 currentColor;
}
.vs-dialog__govde {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}
.vs-dialog__sol {
    flex: none;
    inline-size: var(--vs-dialog-sol-genislik);
    padding: var(--vs-ic-bosluk);
    background: var(--vs-dialog-sol-zemin);
    border-inline-end: var(--vs-ayirici-kalinlik) solid var(--vs-ayirici);
    overflow: auto;
}
.vs-dialog__sol[hidden] { display: none; }
.vs-dialog__icerik {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--vs-dialog-ic-bosluk);
    overflow: auto;
}
.vs-dialog__alt {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--vs-ic-bosluk) var(--vs-dialog-ic-bosluk);
    border-block-start: var(--vs-ayirici-kalinlik) solid var(--vs-ayirici);
    flex: none;
}
.vs-dialog__alt[hidden] { display: none; }
.vs-dialog__dugmeler { display: flex; gap: var(--space-2); justify-content: flex-end; flex-wrap: wrap; }
.vs-dialog__hata { color: var(--color-label-2); }

/* Dar ekran: alttan açılan sayfa; sol bölme çekmece */
@media (max-width: 640px) {
    .vs-dialog__pencere,
    .vs-dialog__pencere[data-boyut] {
        inline-size: 100vw;
        max-block-size: 92dvh;
        margin: auto 0 0 0;
        border-end-start-radius: 0;
        border-end-end-radius: 0;
    }
    .vs-dialog__pencere:not([open]) { transform: translateY(100%); opacity: 1; }
    @starting-style {
        .vs-dialog__pencere[open] { transform: translateY(100%); opacity: 1; }
    }
    .vs-dialog__menu:not([hidden]) { display: inline-block; }
    .vs-dialog__sol {
        position: absolute;
        inset-block: 0;
        inset-inline-start: 0;
        inline-size: min(var(--vs-dialog-sol-genislik), 80%);
        background: var(--vs-dialog-zemin);
        box-shadow: var(--vs-golge-3);
        transform: translateX(-105%);
        transition: transform var(--vs-dialog-sure) var(--vs-dialog-egri);
    }
    .vs-dialog__sol:dir(rtl) { transform: translateX(105%); }
    .vs-dialog--cekmece-acik .vs-dialog__sol { transform: translateX(0); }
}

/* Pencereler (onayla / sor / bildir) */
.vs-pencere .vs-dialog__icerik { display: grid; gap: var(--vs-form-aralik); }
.vs-pencere__mesaj { margin: 0; line-height: var(--line-height-normal); white-space: pre-line; }
.vs-pencere__form { display: grid; gap: var(--vs-form-aralik); }
/* 3'ten çok düğme: dikey; varsayılan (sondaki) en üstte, vazgeç en altta (macOS) */
.vs-pencere--dikey .vs-dialog__dugmeler { flex-direction: column-reverse; align-items: stretch; inline-size: 100%; }
.vs-pencere--dikey .vs-dialog__dugmeler .vs-dugme { inline-size: 100%; }

/* ---------- Eylem sayfası (iOS action sheet) ---------- */
.vs-eylem-sayfasi .vs-dialog__pencere {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    overflow: visible;
}
.vs-eylem-sayfasi .vs-dialog__ust,
.vs-eylem-sayfasi .vs-dialog__alt { display: none; }
.vs-eylem-sayfasi .vs-dialog__icerik {
    display: grid;
    gap: var(--vs-eylem-aralik);
    padding: var(--vs-eylem-kenar);
    overflow: visible;
}
.vs-eylem__grup {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--vs-eylem-kose);
    background: var(--vs-eylem-zemin);
    -webkit-backdrop-filter: var(--vs-eylem-bulaniklik);
    backdrop-filter: var(--vs-eylem-bulaniklik);
    box-shadow: var(--vs-eylem-golge);
}
.vs-eylem__ust {
    display: grid;
    gap: var(--space-1);
    padding: var(--vs-ic-bosluk) calc(var(--vs-ic-bosluk) * 2);
    text-align: center;
    color: var(--vs-eylem-baslik);
}
.vs-eylem__baslik { font-size: calc(var(--vs-yazi) - 1px); font-weight: var(--vs-agirlik-yari-kalin); }
.vs-eylem__mesaj { font-size: calc(var(--vs-yazi) - 1px); }
.vs-eylem__dugme {
    min-height: var(--vs-eylem-satir);
    padding: 0 var(--vs-ic-bosluk);
    border: 0;
    background: transparent;
    color: var(--vs-eylem-metin);
    font-family: var(--vs-yazi-ailesi);
    font-size: var(--vs-eylem-yazi);
    text-align: center;
    cursor: default;
}
.vs-eylem__ust + .vs-eylem__dugme,
.vs-eylem__dugme + .vs-eylem__dugme { border-block-start: var(--vs-ayirici-kalinlik) solid var(--vs-ayirici); }
.vs-eylem__dugme:hover,
.vs-eylem__dugme:focus-visible { background: var(--vs-eylem-uzerinde); outline: none; }
.vs-eylem__dugme--tehlikeli { color: var(--vs-eylem-tehlikeli); }
.vs-eylem__iptal { font-weight: var(--vs-agirlik-yari-kalin); }
@media (max-width: 640px) {
    .vs-eylem-sayfasi .vs-dialog__pencere,
    .vs-eylem-sayfasi .vs-dialog__pencere[data-boyut] { border-radius: 0; }
}

/* ---------- Snack (bildirim) ---------- */
.vs-snack-kap {
    position: fixed;
    inset: auto;
    inset-block-start: calc(var(--vs-snack-kap-ust, 0px) + var(--vs-snack-ust-bosluk));
    left: var(--vs-snack-kap-orta, 50%);   /* ortalama noktası: yönden bağımsız */
    translate: -50% 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--vs-snack-aralik);
    pointer-events: none;
}
.vs-snack-kap:not(:popover-open) { display: none; }
vs-snack {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    box-sizing: border-box;
    inline-size: min(var(--vs-snack-genislik), calc(100vw - 2 * var(--space-4)));
    padding: var(--vs-ic-bosluk) var(--vs-ic-bosluk) var(--vs-ic-bosluk) calc(var(--vs-ic-bosluk) * 1.5);
    background: var(--vs-snack-zemin);
    -webkit-backdrop-filter: var(--vs-bulaniklik);
    backdrop-filter: var(--vs-bulaniklik);
    color: var(--vs-snack-metin);
    border: var(--vs-ayirici-kalinlik) solid var(--vs-liste-kenarlik);
    border-radius: var(--vs-snack-kose);
    box-shadow: var(--vs-snack-golge);
    font-family: var(--vs-yazi-ailesi);
    font-size: var(--vs-yazi);
    letter-spacing: var(--vs-harf-araligi);
    pointer-events: auto;
    animation: vs-snack-gelis var(--vs-sure-orta) var(--vs-egri-yay) both;
}
@keyframes vs-snack-gelis {
    from { opacity: 0; transform: translateY(calc(var(--vs-dialog-kayma) * -1)) scale(var(--vs-liste-acilis-olcek)); }
    to { opacity: 1; transform: none; }
}
.vs-snack__isaret {
    flex: none;
    inline-size: var(--vs-snack-isaret-boyut);
    block-size: var(--vs-snack-isaret-boyut);
    border-radius: var(--vs-kose-tam);
    background: var(--vs-snack-bilgi);
}
vs-snack[tur="basari"] .vs-snack__isaret { background: var(--vs-snack-basari); }
vs-snack[tur="uyari"] .vs-snack__isaret { background: var(--vs-snack-uyari); }
vs-snack[tur="hata"] .vs-snack__isaret { background: var(--vs-snack-hata); }
.vs-snack__metin { flex: 1 1 auto; min-width: 0; line-height: var(--vs-satir-yuksekligi); }
.vs-snack__kapat { background: transparent; }
.vs-snack__kapat:hover { background: var(--color-fill-3); }

/* =============================================================
   C3c — <vs-liste>
   ============================================================= */
vs-liste { display: flex; flex-direction: column; gap: var(--vs-aralik); min-width: 0; font-family: var(--vs-yazi-ailesi); }
vs-liste[hidden] { display: none; }
html[data-bg-mode="dark"] vs-liste,
html[data-theme="dark"] vs-liste { color-scheme: dark; }

.vs-liste__ust { display: flex; align-items: center; flex-wrap: wrap; gap: var(--vs-aralik); }
.vs-liste__sol { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--space-2); }
.vs-liste__arac { flex: 0 1 auto; display: flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; }
.vs-liste__ara { inline-size: calc(var(--vs-yazi) * 18); max-inline-size: 100%; }

.vs-liste__ilerleme {
    block-size: var(--vs-tablo-gosterge-kalinlik);
    border-radius: var(--vs-kose-tam);
    background: var(--vs-tablo-iskelet);
    overflow: hidden;
}
.vs-liste__ilerleme::before {
    content: "";
    display: block;
    block-size: 100%;
    inline-size: calc(var(--vs-tablo-ilerleme-oran, 0) * 100%);
    background: var(--vs-tablo-ilerleme);
    border-radius: inherit;
    transition: inline-size var(--vs-sure-kisa) var(--vs-egri-ios);
}
.vs-liste__ilerleme[hidden] { display: none; }

.vs-liste__govde {
    position: relative;
    border: var(--vs-ayirici-kalinlik) solid var(--vs-tablo-kenarlik);
    border-radius: var(--vs-tablo-kose);
    background: var(--vs-tablo-zemin);
    box-shadow: var(--vs-tablo-golge);
    overflow: hidden;
}
.vs-liste__kaydirma {
    max-block-size: var(--vs-tablo-yukseklik);
    overflow: auto;
    overscroll-behavior: contain;
}
.vs-liste__tablo {
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--vs-tablo-yazi);
    color: var(--vs-alan-metin);
    letter-spacing: var(--vs-harf-araligi);
}
.vs-liste__tablo th,
.vs-liste__tablo td {
    padding: 0 var(--vs-tablo-hucre-bosluk);
    block-size: var(--vs-tablo-satir);
    white-space: nowrap;
    text-align: start;
    vertical-align: middle;
}
/* yapışkan başlık (konumlu öğe kendiliğinden üstte çizilir; katman sırası ayarı yok) */
.vs-liste__tablo thead th {
    position: sticky;
    inset-block-start: 0;
    background: var(--vs-tablo-baslik-zemin);
    -webkit-backdrop-filter: var(--vs-bulaniklik);
    backdrop-filter: var(--vs-bulaniklik);
    color: var(--vs-tablo-baslik-metin);
    font-size: var(--vs-tablo-baslik-yazi);
    font-weight: var(--vs-tablo-baslik-agirlik);
    border-block-end: var(--vs-ayirici-kalinlik) solid var(--vs-tablo-satir-ayirici);
}
.vs-liste__sirala {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    inline-size: 100%;
    justify-content: inherit;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: default;
}
.vs-liste__tablo th[style*="end"] .vs-liste__sirala { justify-content: flex-end; }
.vs-liste__tablo th[style*="center"] .vs-liste__sirala { justify-content: center; }
.vs-liste__sirala:focus-visible { outline: none; box-shadow: 0 0 0 var(--vs-alan-halka-genislik) var(--vs-alan-odak-halka); border-radius: var(--vs-kose-xs); }
/* sıralama oku: yukarı (artan) / aşağı (azalan); yön (yukarı/aşağı) RTL'den bağımsızdır */
.vs-liste__ok {
    flex: none;
    inline-size: calc(var(--vs-secim-ok-boyut) * 0.9);
    block-size: calc(var(--vs-secim-ok-boyut) * 0.9);
    border-right: var(--vs-secim-ok-kalinlik) solid var(--vs-tablo-sirala-ok);
    border-bottom: var(--vs-secim-ok-kalinlik) solid var(--vs-tablo-sirala-ok);
    transform: translateY(-25%) rotate(45deg);
    opacity: 0;
    transition: transform var(--vs-sure-kisa) var(--vs-egri-ios), opacity var(--vs-sure-kisa) var(--vs-egri-ios);
}
.vs-liste__sirala:hover .vs-liste__ok { opacity: 1; }
.vs-liste__sirala--artan .vs-liste__ok,
.vs-liste__sirala--azalan .vs-liste__ok { opacity: 1; border-color: var(--vs-tablo-sirala-ok-etkin); }
.vs-liste__sirala--artan .vs-liste__ok { transform: translateY(25%) rotate(-135deg); }
.vs-liste__sirala--azalan .vs-liste__ok { transform: translateY(-25%) rotate(45deg); }

.vs-liste__tablo tbody td { border-block-end: var(--vs-ayirici-kalinlik) solid var(--vs-tablo-satir-ayirici); }
.vs-liste__tablo tbody tr:last-child td { border-block-end: 0; }
.vs-liste__satir { cursor: default; outline: none; }
.vs-liste__satir:hover td { background: var(--vs-tablo-satir-uzerinde); }
.vs-liste__satir--secili td { background: var(--vs-tablo-satir-secili); }
.vs-liste__satir:focus-visible td { box-shadow: inset 0 0 0 var(--vs-cizgi) var(--vs-alan-odak), inset 0 0 0 calc(var(--vs-cizgi) * 3) var(--vs-tablo-satir-odak); }
.vs-liste__satir:focus-visible td + td { box-shadow: inset 0 var(--vs-cizgi) 0 var(--vs-alan-odak), inset 0 calc(var(--vs-cizgi) * -1) 0 var(--vs-alan-odak); }
.vs-liste__tablo td bdi { font-variant-numeric: tabular-nums; }
.vs-liste__secim-hucre { inline-size: calc(var(--vs-onay-boyut) + 2 * var(--vs-tablo-hucre-bosluk)); }
.vs-liste__secim-hucre .vs-onay__kutu { vertical-align: middle; }

.vs-liste__durum td {
    block-size: calc(var(--vs-tablo-satir) * 3);
    text-align: center;
    color: var(--vs-tablo-bos-metin);
    white-space: normal;
}
/* iskelet: konumlu öğe yok (yapışkan başlığın üstüne çıkmasın) — arka plan kayar */
.vs-liste__iskelet {
    block-size: calc(var(--vs-tablo-yazi) * 0.9);
    border-radius: var(--vs-kose-xs);
    background: linear-gradient(90deg, var(--vs-tablo-iskelet) 0%, var(--vs-tablo-iskelet-parilti) 50%, var(--vs-tablo-iskelet) 100%);
    background-size: 200% 100%;
    animation: vs-liste-iskelet 1.4s var(--vs-egri-standart) infinite;
}
@keyframes vs-liste-iskelet { from { background-position: 100% 0; } to { background-position: -100% 0; } }
vs-liste[aria-busy] .vs-liste__tablo tbody { opacity: var(--vs-alan-pasif-opaklik); transition: opacity var(--vs-sure-kisa) var(--vs-egri-ios); }

/* kaydırmayla sayfa geçişi göstergesi: kenarda ilerleyen ince çizgi + ipucu */
.vs-liste__gosterge {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: var(--vs-tablo-gosterge-kalinlik);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--vs-sure-kisa) var(--vs-egri-ios);
}
.vs-liste__gosterge[data-yon="onceki"] { inset-block-end: auto; inset-block-start: 0; }
.vs-liste__gosterge::before {
    content: "";
    display: block;
    block-size: 100%;
    inline-size: calc(var(--vs-tablo-gosterge-oran, 0) * 100%);
    margin-inline: auto;
    border-radius: var(--vs-kose-tam);
    background: var(--vs-tablo-gosterge);
    transition: inline-size var(--vs-sure-hizli) linear;
}
.vs-liste__gosterge--gorunur { opacity: 1; }
.vs-liste__ipucu {
    position: absolute;
    inset-inline: 0;
    inset-block-end: calc(var(--vs-tablo-gosterge-kalinlik) * 3);
    margin-inline: auto;
    inline-size: max-content;
    max-inline-size: 90%;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--vs-kose-tam);
    background: var(--color-material);
    -webkit-backdrop-filter: var(--vs-bulaniklik);
    backdrop-filter: var(--vs-bulaniklik);
    box-shadow: var(--vs-golge-2);
    color: var(--vs-tablo-ipucu-metin);
    font-size: var(--vs-tablo-alt-yazi);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--vs-sure-kisa) var(--vs-egri-ios);
}
.vs-liste__ipucu[data-yon="onceki"] { inset-block-end: auto; inset-block-start: calc(var(--vs-tablo-satir) + var(--vs-tablo-gosterge-kalinlik) * 3); }
.vs-liste__ipucu--gorunur { opacity: 1; }

/* alt çubuk: solda kayıt bilgisi, sağda sayfalama */
.vs-liste__alt { display: flex; align-items: center; flex-wrap: wrap; gap: var(--vs-aralik); }
.vs-liste__alt[hidden] { display: none; }
.vs-liste__bilgi { flex: 1 1 auto; color: var(--color-label-2); font-size: var(--vs-tablo-alt-yazi); font-variant-numeric: tabular-nums; }
.vs-liste__sayfalama { display: flex; align-items: center; gap: var(--space-1); margin-inline-start: auto; }
.vs-liste__boyut { margin-inline-end: var(--space-2); --vs-alan-yan-etiket-genislik: max-content; }
.vs-liste__sayfa-durumu { min-inline-size: 5ch; text-align: center; color: var(--color-label-2); font-size: var(--vs-tablo-alt-yazi); font-variant-numeric: tabular-nums; }
.vs-liste__sayfa-dugme {
    position: relative;
    display: inline-grid;
    place-content: center;
    inline-size: var(--vs-alan-yukseklik-kucuk);
    block-size: var(--vs-alan-yukseklik-kucuk);
    padding: 0;
    border: 0;
    border-radius: var(--vs-alan-kose);
    background: transparent;
    color: var(--vs-renk-vurgu);
    cursor: default;
}
.vs-liste__sayfa-dugme:hover:not(:disabled) { background: var(--color-fill-3); }
.vs-liste__sayfa-dugme:focus-visible { outline: none; box-shadow: 0 0 0 var(--vs-alan-halka-genislik) var(--vs-alan-odak-halka); }
.vs-liste__sayfa-dugme:disabled { color: var(--vs-alan-metin-pasif); }
/* oklar (chevron): geri = başa doğru, ileri = sona doğru; çift = ilk/son. RTL'de aynalanır. */
.vs-liste__sayfa-isaret { position: relative; inline-size: var(--vs-secim-ok-boyut); block-size: var(--vs-secim-ok-boyut); }
.vs-liste__sayfa-isaret::before,
.vs-liste__sayfa-isaret::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    inline-size: 100%;
    block-size: 100%;
    border-left: var(--vs-secim-ok-kalinlik) solid currentColor;
    border-bottom: var(--vs-secim-ok-kalinlik) solid currentColor;
    transform: translateX(20%) rotate(45deg);
}
.vs-liste__sayfa-isaret--geri::after,
.vs-liste__sayfa-isaret--ileri::after { display: none; }
.vs-liste__sayfa-isaret--cift-geri::before { transform: translateX(-10%) rotate(45deg); }
.vs-liste__sayfa-isaret--cift-geri::after { transform: translateX(55%) rotate(45deg); }
.vs-liste__sayfa-isaret--ileri,
.vs-liste__sayfa-isaret--cift-ileri { transform: scaleX(-1); }
.vs-liste__sayfa-isaret:dir(rtl) { transform: scaleX(-1); }
.vs-liste__sayfa-isaret--ileri:dir(rtl),
.vs-liste__sayfa-isaret--cift-ileri:dir(rtl) { transform: none; }
.vs-liste__sayfa-isaret--cift-ileri::before { transform: translateX(-10%) rotate(45deg); }
.vs-liste__sayfa-isaret--cift-ileri::after { transform: translateX(55%) rotate(45deg); }

/* ---------- Kolon genişliği tutamacı (C3c-2) ---------- */
/* th zaten yapışkan (konumlu); tutamaç hücrenin İÇİNDE mantıksal sonda (taşarsa komşu başlık üstüne çizilir
   ve dokunma alanı yarıya iner). Görünen çizgi kolon kenarında. */
.vs-liste__tutamac {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: var(--vs-tablo-tutamac-alan);
    cursor: col-resize;
    touch-action: none;
    user-select: none;
}
.vs-liste__tutamac::after {
    content: "";
    position: absolute;
    inset-block: 25%;
    inset-inline-end: 0;
    inline-size: var(--vs-tablo-tutamac-kalinlik);
    border-radius: var(--vs-kose-tam);
    background: var(--vs-tablo-tutamac-cizgi);
    opacity: 0;
    transition: opacity var(--vs-sure-hizli) var(--vs-egri-ios), background-color var(--vs-sure-hizli) var(--vs-egri-ios);
}
.vs-liste__th--ayarlanir:hover .vs-liste__tutamac::after { opacity: 1; }
.vs-liste__tutamac:hover::after,
.vs-liste__tutamac:focus-visible::after,
.vs-liste__th--suruklenen .vs-liste__tutamac::after {
    opacity: 1;
    inset-block: 10%;
    background: var(--vs-tablo-tutamac-vurgu);
}
.vs-liste__tutamac:focus-visible { outline: none; }
.vs-liste__th--suruklenen { cursor: col-resize; }
/* sabit düzende hücre taşması kırpılır; başlık ve gövde aynı tabloda olduğundan hizalı kalır */
.vs-liste__tablo[style*="fixed"] th,
.vs-liste__tablo[style*="fixed"] td { overflow: hidden; text-overflow: ellipsis; }
.vs-liste__baslik-metin { display: inline-block; }
/* başlık içeriği tutamacın altına girmesin */
.vs-liste__tablo th.vs-liste__th--ayarlanir { padding-inline-end: calc(var(--vs-tablo-hucre-bosluk) + var(--vs-tablo-tutamac-alan) / 2); }
.vs-liste__sifirla[hidden] { display: none; }
/* yalnız ekran okuyucu için duyuru */
.vs-liste__duyuru {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* dialog alt bilgisi yuvaları (liste sayfalaması dialog içinde buraya takılır) */
.vs-dialog__alt-sol { flex: 1 1 auto; display: flex; align-items: center; min-width: 0; }
.vs-dialog__alt-sag { display: flex; align-items: center; gap: var(--space-2); }
.vs-dialog__alt { align-items: center; }

@media (max-width: 640px) {
    .vs-liste__arac { inline-size: 100%; }
    .vs-liste__ara { flex: 1 1 auto; inline-size: auto; }
    .vs-liste__sayfalama { inline-size: 100%; justify-content: flex-end; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    .vs-alan *, .vs-alan *::before, .vs-alan *::after, .vs-liste, .vs-takvim,
    .vs-dialog__pencere, .vs-dialog__pencere::backdrop, .vs-dialog__sol, .vs-dugme { transition: none; }
    vs-snack, .vs-liste__iskelet { animation: none; }
    .vs-liste__gosterge, .vs-liste__gosterge::before, .vs-liste__ipucu, .vs-liste__ok, .vs-liste__ilerleme::before,
    .vs-liste__tutamac::after { transition: none; }
}