/* ==========================================================================
   Sintek Portal — ortak tema (tek dosya)
   Kaynak: Sintek WPF ürün ailesi (Yeni Nesil Themes/Colors.xaml + Controls.xaml) ve
   docs/sintek-standartlari.md. Renk DEĞERLERİ Colors.xaml ile birebir; yazı taşıyan yüzeylerde
   web erişilebilirliği (≥4.5:1) için paletin bir ton koyusu kullanılır (DESIGN.md).
   ========================================================================== */

:root {
    /* --- Colors.xaml --- */
    --turkuaz-900: #164E63;
    --turkuaz-700: #0E7490;
    --turkuaz-600: #0891B2;
    --turkuaz-500: #06B6D4;
    --turkuaz-400: #22D3EE;
    --turkuaz-200: #A5F3FC;
    --turkuaz-100: #CFFAFE;
    --turkuaz-50: #ECFEFF;

    --gri-900: #0F172A;
    --gri-700: #334155;
    --gri-500: #64748B;
    --gri-300: #CBD5E1;
    --gri-200: #E2E8F0;
    --gri-100: #F1F5F9;
    --beyaz: #FFFFFF;
    --tablo-baslik-ayraci: #AEBBCB;
    --zebra: #F8FAFC;

    --basari: #16A34A;
    --basari-acik: #DCFCE7;
    --hata: #DC2626;
    --hata-koyu: #B91C1C;
    --hata-acik: #FEE2E2;
    --uyari: #D97706;
    --uyari-acik: #FEF3C7;
    --uyari-koyu: #92400E;

    /* Seçim/gezinme: bilinçli olarak vurgu ailelerinin DIŞINDA (lavanta). */
    --secim-100: #EDE7F6;
    --secim-300: #D1C4E9;
    --secim-500: #7E57C2;

    --giris-zemin: linear-gradient(180deg, #A8DCE6 0%, #EAF7FA 42%, #F4FBFC 60%, #BCE4EC 100%);
    --giris-etiket: #2C3E50;
    --giris-baslik: #5A7A93;
    --giris-aciklama: #5A6B7B;
    --giris-ayrac: #99C4D4;
    --giris-kenar: #D6E2EA;

    /* --- Roller --- */
    --marka: var(--turkuaz-600);
    --marka-koyu: var(--turkuaz-700);
    --marka-acik: var(--turkuaz-100);
    --metin: var(--gri-900);
    --metin-ikincil: var(--gri-500);
    --kenar: var(--gri-300);
    --zemin: var(--gri-100);
    --kart: var(--beyaz);
    /* Vurgu bantları (%18) üzerindeki başlık metni: marka koyu bantta 4.0–4.7:1 kalıyor, en koyu turkuaz ≥7:1. */
    --bant-metni: var(--turkuaz-900);

    /* Menü grubu vurguları; ekranın tek vurgusu --vurgu'dur ve menü grubundan gelir. */
    --vurgu-islemler: #0891B2;
    --vurgu-tanimlar: #F59E0B;
    --vurgu-raporlar: #6366F1;
    --vurgu-yonetim: #E11D48;
    --vurgu: var(--marka);

    --yazi: "Segoe UI", system-ui, -apple-system, "Roboto", "Helvetica Neue", Arial, sans-serif;
    --kontrol: 38px;
    --kose: 8px;
    --golge-kart: 0 2px 24px rgba(15, 23, 42, 0.10);
    --golge-acilir: 0 2px 14px rgba(15, 23, 42, 0.18);

    --serit-yuksekligi: 59px;
    --menu-genis: 300px;
    --menu-raf: 44px;

    color-scheme: light;
    accent-color: var(--marka);
}

@media (pointer: coarse) {
    :root { --kontrol: 44px; }
}

[data-vurgu="islemler"] { --vurgu: var(--vurgu-islemler); }
[data-vurgu="tanimlar"] { --vurgu: var(--vurgu-tanimlar); }
[data-vurgu="raporlar"] { --vurgu: var(--vurgu-raporlar); }
[data-vurgu="yonetim"] { --vurgu: var(--vurgu-yonetim); }

/* ---------------------------------------------------------------- Temel */

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

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

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

h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }

a { color: var(--marka-koyu); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--turkuaz-900); }

img { max-width: 100%; }

::selection { background: var(--secim-300); color: var(--gri-900); }

:focus-visible {
    outline: 2px solid var(--marka-koyu);
    outline-offset: 2px;
    border-radius: 4px;
}

h1:focus, main:focus { outline: none; }

* { scrollbar-width: thin; scrollbar-color: var(--gri-300) transparent; }

.simge {
    width: 1em;
    height: 1em;
    flex: none;
    fill: currentColor;
    vertical-align: -0.125em;
}

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

/* hidden özniteliği her zaman gizler: bileşen sınıflarının display değeri (ör. .dugme inline-flex) onu ezmesin. */
[hidden] { display: none !important; }

.atla {
    position: absolute;
    top: 8px; left: 8px;
    z-index: 100;
    padding: 8px 14px;
    background: var(--kart);
    border-radius: var(--kose);
    box-shadow: var(--golge-acilir);
    transform: translateY(-200%);
}
.atla:focus { transform: none; }

/* ---------------------------------------------------------------- Dönen logo (üst şerit)
   WPF kalıbı: düz görsel + ScaleX 1 → -1 → 1, her yarı sinüs yumuşatmalı (ortografik Y dönüşü);
   15 sn döngüde 2.5 sn tur. Durağan anda görsel dönüşümsüz hâliyle piksel piksel aynı. */

.donen-logo {
    display: block;
    height: 40px;
    width: auto;
    animation: logo-don 15s infinite;
}

@keyframes logo-don {
    0% { transform: scaleX(1); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
    8.333% { transform: scaleX(-1); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
    16.667%, 100% { transform: scaleX(1); }
}

/* Giriş ekranındaki büyük logo ve kilit: gerçek 3B Y dönüşü (sintekbilgisayar.com.tr ile aynı zamanlama). */
.donen-3b {
    animation: logo-don-3b 15s ease-in-out infinite;
    backface-visibility: visible;
}

@keyframes logo-don-3b {
    0% { transform: perspective(600px) rotateY(0deg); }
    16.667%, 100% { transform: perspective(600px) rotateY(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .donen-logo, .donen-3b { animation: none; }
    *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ---------------------------------------------------------------- Düğmeler
   Hiçbir düğme stilsiz kalmaz; hepsi simgeli. Birincil dolgu AA için marka koyu (beyaz yazı 5.4:1). */

.dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--kontrol);
    padding: 0 18px;
    border: 1.5px solid transparent;
    border-radius: var(--kose);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
}
.dugme .simge { width: 16px; height: 16px; }
.dugme:disabled, .dugme[aria-disabled="true"] {
    cursor: not-allowed;
    background: var(--gri-300);
    border-color: var(--gri-300);
    color: var(--gri-700);
}

.dugme[aria-busy="true"], .dugme[aria-busy="true"]:disabled { cursor: progress; }
.dugme[aria-busy="true"] .simge { animation: don 0.9s linear infinite; }
.dugme-birincil[aria-busy="true"]:disabled { background: var(--marka-koyu); border-color: transparent; color: var(--beyaz); }
@keyframes don { to { rotate: 1turn; } }

.dugme-birincil { background: var(--marka-koyu); color: var(--beyaz); }
.dugme-birincil:hover:not(:disabled) { background: var(--turkuaz-900); color: var(--beyaz); }

.dugme-ikincil { background: transparent; border-color: var(--marka); color: var(--marka-koyu); }
.dugme-ikincil:hover:not(:disabled) { background: var(--marka-acik); color: var(--turkuaz-900); }
.dugme-ikincil:disabled { background: transparent; }

.dugme-tehlike { background: var(--hata); color: var(--beyaz); }
.dugme-tehlike:hover:not(:disabled) { background: var(--hata-koyu); color: var(--beyaz); }

.dugme-genis { width: 100%; }

/* Üst şerit düğmeleri (WPF SeritButon / SeritButonTehlike) */
.dugme-serit, .dugme-serit-tehlike {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 13px;
    border: 1px solid var(--gri-300);
    border-radius: 6px;
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
}
.dugme-serit .simge, .dugme-serit-tehlike .simge { width: 13px; height: 13px; }
.dugme-serit { color: var(--gri-700); }
.dugme-serit:hover { background: var(--turkuaz-50); border-color: var(--marka); color: var(--marka-koyu); }
.dugme-serit-tehlike { color: var(--hata-koyu); }
.dugme-serit-tehlike:hover { background: var(--hata-acik); border-color: var(--hata); }

/* Simgeli kare düğme (menü ☰, kapat) */
.dugme-simge {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--marka-koyu);
    cursor: pointer;
}
.dugme-simge .simge { width: 18px; height: 18px; }
.dugme-simge:hover { background: var(--turkuaz-50); }

/* İğne (Sabit ↔ Otomatik): durum rengiyle + simgeyle + balon bilgiyle anlaşılır. */
.igne {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 26px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
}
.igne .simge { width: 15px; height: 15px; }
.igne[aria-pressed="true"] { background: var(--hata-acik); color: var(--hata); }
.igne[aria-pressed="false"] { background: var(--basari-acik); color: var(--basari); }
.igne:hover { border-color: var(--gri-300); }

/* ---------------------------------------------------------------- Form alanları */

.alan { display: grid; gap: 6px; }
.alan > label, .etiket { font-size: 13px; font-weight: 600; color: var(--gri-700); }

.girdi, .alan > :where(input:not([type="checkbox"], [type="radio"]), select, textarea) {
    width: 100%;
    min-height: var(--kontrol);
    padding: 0 10px;
    border: 1px solid var(--kenar);
    border-radius: var(--kose);
    background: var(--beyaz);
    color: var(--metin);
    font: inherit;
    font-size: 14px;
}
.alan > textarea { padding: 8px 10px; min-height: 90px; resize: vertical; }
.girdi:focus, .alan > :where(input, select, textarea):focus {
    outline: none;
    border-color: var(--marka);
    box-shadow: 0 0 0 1px var(--marka);
}
.girdi:disabled, .alan > :where(input, select, textarea):disabled {
    background: var(--gri-100);
    border-color: var(--gri-200);
    color: var(--gri-700);
    cursor: not-allowed;
}
.girdi::placeholder, .alan > input::placeholder { color: var(--gri-500); }

:is(input, select, textarea).invalid { border-color: var(--hata); }
:is(input, select, textarea).invalid:focus { border-color: var(--hata); box-shadow: 0 0 0 1px var(--hata); }

.validation-message {
    font-size: 12.5px;
    color: var(--hata-koyu);
}

/* Yüzen etiketli alan (giriş ekranı, WPF ModernTextBox + YuzenEtiket) */
.yuzen { position: relative; }
.yuzen > input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--giris-kenar);
    border-radius: var(--kose);
    background: var(--beyaz);
    color: var(--metin);
    font: inherit;
    font-size: 15px;
}
.yuzen > input:focus { outline: none; border-color: var(--marka); box-shadow: 0 0 0 1px var(--marka); }
.yuzen > input.invalid { border-color: var(--hata); }
.yuzen > label {
    position: absolute;
    left: 11px;
    top: 22px;
    translate: 0 -50%;
    padding: 0 4px;
    border-radius: 4px;
    color: var(--gri-500);
    font-size: 15px;
    pointer-events: none;
    transition: top 140ms ease-out, font-size 140ms ease-out, color 140ms ease-out;
}
.yuzen > input:focus + label,
.yuzen > input:not(:placeholder-shown) + label,
.yuzen > input:-webkit-autofill + label {
    top: 0;
    font-size: 11.5px;
    color: var(--giris-baslik);
    background: var(--beyaz);
}
.yuzen > input:focus + label { color: var(--marka-koyu); }
.yuzen .validation-message { margin: 5px 2px 0; }

/* ---------------------------------------------------------------- Mesaj bantları (grup değil) */

.bant {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.4;
}
.bant .simge { width: 16px; height: 16px; margin-top: 1px; }
.bant-hata { background: var(--hata-acik); color: var(--hata-koyu); }
.bant-uyari { background: var(--uyari-acik); color: var(--uyari-koyu); }
.bant-bilgi { background: var(--turkuaz-50); color: var(--turkuaz-900); box-shadow: inset 0 0 0 1px var(--turkuaz-200); }
.bant-basari { background: var(--basari-acik); color: var(--gri-900); }
.bant-basari .simge { color: var(--basari); }

/* ---------------------------------------------------------------- Grup kartı, sekme, veri alanı
   Hepsi aynı vurgu dilini konuşur: %18 vurgu zemin + vurgu alt çizgisi + 1 px vurgu çerçeve. */

.grup-kart {
    min-width: 0; /* ızgara/esnek kutuda içerik (ör. geniş tablo) kartı taşırmasın; tablo kendi kutusunda kayar */
    background: var(--kart);
    border: 1px solid var(--vurgu);
    border-radius: 10px;
    padding: 14px 16px;
}

.grup-baslik {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -14px -16px 12px;
    padding: 9px 16px;
    border-radius: 9px 9px 0 0;
    border-bottom: 2px solid var(--vurgu);
    background: color-mix(in srgb, var(--vurgu) 18%, var(--beyaz));
    color: var(--bant-metni);
    font-size: 13.5px;
    font-weight: 600;
}
.grup-baslik .simge { width: 16px; height: 16px; }

.sekmeler {
    display: flex;
    gap: 3px;
    overflow-x: auto;
    border-bottom: 1px solid var(--gri-200);
}
.sekme {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 0;
    border-radius: 8px 8px 0 0;
    background: transparent;
    color: var(--marka-koyu);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.sekme .simge { width: 14px; height: 14px; }
/* Sekmedeki sayı (ör. "Kişiler 3"): gri hap; seçili sekmede beyaz. */
.sekme-sayisi {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--gri-200);
    color: var(--gri-700);
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.sekme:is([aria-selected="true"], [aria-current="page"], .secili) .sekme-sayisi { background: var(--beyaz); color: var(--bant-metni); }
.sekme:hover { background: var(--turkuaz-50); color: var(--marka-koyu); }
/* Seçili sekme: sekme düğmesinde aria-selected, bağlantı sekmede (kendi adresi olan bölüm) aria-current="page". */
.sekme:is([aria-selected="true"], [aria-current="page"], .secili) {
    background: color-mix(in srgb, var(--vurgu) 18%, var(--beyaz));
    color: var(--bant-metni);
}
.sekme:is([aria-selected="true"], [aria-current="page"], .secili)::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 5px;
    border-radius: 2px;
    background: var(--vurgu);
}

/* Veri alanı (tablo / QuickGrid): köşe 10, 1 px vurgu çerçeve, başlık bandı, ızgara çizgileri,
   zebra gri, seçim ve üzerine gelme LAVANTA. */
.veri-alani {
    max-width: 100%;
    overflow: auto;
    border: 1px solid var(--vurgu);
    border-radius: 10px;
    background: var(--kart);
}
.veri-tablosu {
    --hucre-x: 12px; /* başlık ve hücre aynı yatay dolguyu kullanır: metinler hizalı */
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.veri-tablosu th {
    position: sticky;
    top: 0;
    padding: 8px var(--hucre-x);
    background: color-mix(in srgb, var(--vurgu) 18%, var(--beyaz));
    border-bottom: 2px solid var(--vurgu);
    color: var(--bant-metni);
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}
.veri-tablosu th + th { border-left: 1px solid var(--tablo-baslik-ayraci); }
/* Hücreler WPF DataGrid gibi tek satır: numara/tarih bölünmez, tablo kendi kutusunda kayar (kenar solması ipucu verir).
   Uzun metin sütunu gerekirse .sar ile sarar. */
.veri-tablosu td {
    white-space: nowrap;
    padding: 7px var(--hucre-x);
    border-top: 1px solid var(--gri-300);
}
.veri-tablosu td + td { border-left: 1px solid var(--gri-300); }
.veri-tablosu tbody tr:first-child td { border-top: 0; }
.veri-tablosu tbody tr:nth-child(even) td { background: var(--zebra); }
.veri-tablosu tbody tr:hover td { background: var(--secim-100); }
.veri-tablosu tbody tr[aria-selected="true"] td, .veri-tablosu tbody tr.secili td { background: var(--secim-300); }
.veri-tablosu tbody tr:is([aria-selected="true"], .secili) td {
    box-shadow: inset 0 1px 0 var(--secim-500), inset 0 -1px 0 var(--secim-500);
}
.veri-tablosu tbody tr:is([aria-selected="true"], .secili) td:first-child {
    box-shadow: inset 1px 0 0 var(--secim-500), inset 0 1px 0 var(--secim-500), inset 0 -1px 0 var(--secim-500);
}
.veri-tablosu tbody tr:is([aria-selected="true"], .secili) td:last-child {
    box-shadow: inset -1px 0 0 var(--secim-500), inset 0 1px 0 var(--secim-500), inset 0 -1px 0 var(--secim-500);
}
.veri-tablosu .sayi { text-align: right; }
.veri-tablosu td.sar { white-space: normal; min-width: 16ch; }
/* QuickGrid'in varsayılan teması (theme="default": hücrede 0.4rem + 1rem sütun boşluğu, başlıkta ek dolgu) ortak
   tablo diline bırakılır; seçiciler temayla eşit özgüllükte, app.css sonra yüklendiği için kazanır. */
.veri-tablosu.quickgrid { --col-gap: 0px; }
.veri-tablosu.quickgrid > tbody > tr > td { padding: 7px var(--hucre-x); }
.veri-tablosu.quickgrid > thead > tr > th { font-weight: 600; }
.veri-tablosu.quickgrid .col-header-content, .veri-tablosu.quickgrid .col-title { padding: 0; font-weight: 600; }
.veri-tablosu th button.col-title { all: unset; cursor: pointer; }
.veri-tablosu .col-justify-end, .veri-tablosu th.col-justify-end .col-header-content { text-align: right; justify-content: flex-end; }

/* Yatay taşmada kaydırma ipucu: taşan kenar solar; içerik taşmıyorsa zaman çizelgesi etkin değildir, maske yoktur. */
@property --sol-solma { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --sag-solma { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes kaydirma-ipucu {
    0% { --sol-solma: 0px; --sag-solma: 32px; }
    10% { --sol-solma: 32px; }
    90% { --sag-solma: 32px; }
    100% { --sol-solma: 32px; --sag-solma: 0px; }
}
@supports (animation-timeline: scroll()) {
    .veri-alani, .sekmeler {
        mask-image: linear-gradient(to right, transparent, #000 var(--sol-solma), #000 calc(100% - var(--sag-solma)), transparent);
        animation: kaydirma-ipucu linear both;
        animation-timeline: scroll(self inline);
    }
}
.sekmeler { scroll-snap-type: x proximity; scrollbar-width: none; }
.sekme { scroll-snap-align: start; }
/* Telefonda sekmeler simgesiz ve daha sıkı: müşteri kartının üç sekmesi (Genel · Kişiler · Ürünler) kaymadan sığar. */
@media (max-width: 479.98px) {
    .sekme { padding: 9px 12px; }
    .sekme > .simge { display: none; }
}

/* Boş durum kutusu (grup değil: gri çerçeve) */
.bos-durum {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 28px 16px;
    border: 1px dashed var(--gri-300);
    border-radius: 10px;
    background: var(--kart);
    color: var(--gri-700);
    text-align: center;
}
.bos-durum .simge { width: 28px; height: 28px; color: var(--gri-500); }

/* ---------------------------------------------------------------- Kabuk */

/* Masaüstünde ekran boyunda uygulama çerçevesi (WPF penceresi gibi): şerit ve alt çubuk hep görünür,
   içerik kendi içinde kayar. Telefonda sayfa doğal kayar (aşağıda). */
.kabuk {
    height: 100vh;
    height: 100dvh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

/* Üst şerit: giriş ekranıyla aynı zemin, tek 1 px alt çizgi (ek aksan yok). */
.ust-serit {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    min-height: var(--serit-yuksekligi);
    padding: 9px 22px;
    background: var(--giris-zemin);
    border-bottom: 1px solid var(--giris-ayrac);
}
.serit-sol { display: flex; align-items: center; gap: 14px; min-width: 0; }
.serit-logo { display: block; flex: none; line-height: 0; border-radius: 4px; }
.serit-baslik { display: grid; min-width: 0; }
.urun-adi { font-size: 17px; font-weight: 700; color: var(--marka-koyu); line-height: 1.2; }
.urun-alt { font-size: 11.5px; color: var(--giris-aciklama); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.serit-orta { display: flex; justify-content: center; }
.firma-logo { max-height: 44px; max-width: 320px; object-fit: contain; }
.serit-sag { display: flex; align-items: center; justify-content: flex-end; gap: 16px; min-width: 0; }
.oturum-bilgi { display: grid; text-align: right; min-width: 0; }
.oturum-firma { font-size: 13px; font-weight: 700; color: var(--marka-koyu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oturum-kullanici { margin-top: 1px; font-size: 11.5px; color: var(--giris-aciklama); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Kendi adı "Şifremi değiştir"e götürür (masaüstü şerit). */
a.oturum-kullanici { text-decoration: none; border-radius: 3px; }
a.oturum-kullanici:hover { color: var(--marka-koyu); text-decoration: underline; text-underline-offset: 2px; }
.cikis-formu, .pano-formu { margin: 0; flex: none; }

.govde {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
}
.govde.menusuz { grid-template-columns: minmax(0, 1fr); }

/* Program Menüsü (WPF AnaMenuView sol paneli) */
.program-menusu {
    position: relative;
    z-index: 20;
    width: var(--menu-genis);
}
.menu-panel {
    position: absolute;
    inset: 0 auto 0 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: var(--menu-genis);
    background: var(--beyaz);
    border-right: 1px solid var(--gri-200);
    overflow: hidden;
    transition: width 180ms ease-out, box-shadow 180ms ease-out;
}
.menu-baslik {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px;
    border-bottom: 1px solid var(--gri-200);
    background: linear-gradient(90deg, var(--turkuaz-50), var(--beyaz));
    white-space: nowrap;
}
.menu-baslik form { margin: 0; line-height: 0; }
.menu-baslik-metin { flex: 1; font-size: 13px; font-weight: 700; color: var(--marka-koyu); }

.menu-agaci { overflow-y: auto; padding: 8px; }
.menu-bolumu + .menu-bolumu { margin-top: 10px; }
.menu-bolumu, .menu-bolumu ul { list-style: none; margin: 0; padding: 0; }
/* Ağaç menü (#79): grup başlığı aç/kapa düğmesi (düz form; JS varsa anında), ekranlar gruba 1 px açık gri yumuşak çizgiyle bağlı.
   Çizgi grup karosunun ortasından (x = 18 px) iner; her ekrana kısa bir kol uzanır, sonuncuda köşe yuvarlak. Kapalı grubun içeriği
   0 yüksekliğe iner ve gizlenir (odak almaz); açık hâlde görünürlük kalıtılır: otomatik rafın gizlemesi ezilmez. */
.menu-grup-baslik { margin: 0; }
.menu-grup-formu { margin: 0; }
.menu-grup-dugmesi {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 34px;
    padding: 5px 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--marka-koyu);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}
/* Dokunmatikte tarayıcının mavi dokunma vurgusu başlığın üstüne binmesin (hap seçimi gibi). */
.menu-grup-dugmesi { -webkit-tap-highlight-color: transparent; }
.menu-grup-dugmesi:hover { background: var(--gri-100); }
.menu-grup-adi { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-grup-oku { display: inline-grid; place-items: center; flex: none; color: var(--gri-500); transition: transform 180ms ease-out; }
.menu-grup-oku .simge { width: 14px; height: 14px; }
.menu-grup[data-acik="false"] .menu-grup-oku { transform: rotate(-90deg); }

.menu-grup-icerik { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 180ms ease-out; }
.menu-grup-icerik > ul { min-height: 0; overflow: clip; overflow-clip-margin: 4px; padding-left: 26px; }
.menu-grup[data-acik="false"] .menu-grup-icerik {
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 180ms ease-out, visibility 0s linear 180ms;
}
.menu-grup-icerik li { position: relative; }
.menu-grup-icerik li::before,
.menu-grup-icerik li::after {
    content: "";
    position: absolute;
    left: -8px;
    width: 8px;
    border-color: var(--gri-300);
    border-style: solid;
    border-width: 0;
    pointer-events: none;
}
/* Dikey çizgi (ilk ekranda karonun altından başlar); kol ekranın ortasına. */
.menu-grup-icerik li::before { top: 0; bottom: 0; border-left-width: 1px; }
.menu-grup-icerik li:first-child::before { top: -3px; }
.menu-grup-icerik li::after { top: 50%; border-top-width: 1px; }
/* Son ekran: çizgi ortada biter ve yumuşak bir köşeyle kola döner. */
.menu-grup-icerik li:last-child::before { bottom: 50%; border-bottom-width: 1px; border-bottom-left-radius: 6px; }
.menu-grup-icerik li:last-child::after { display: none; }
.menu-karo {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--oge-vurgu, var(--marka)) 16%, var(--beyaz));
    color: var(--oge-vurgu, var(--marka));
}
.menu-karo .simge { width: 14px; height: 14px; }
.menu-grup { --oge-vurgu: var(--vurgu); }

.menu-oge {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 34px;
    margin: 1px 0;
    padding: 4px 6px 4px 8px;
    border-radius: 6px;
    color: var(--metin);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}
.menu-oge span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-oge:hover { background: color-mix(in srgb, var(--oge-vurgu, var(--marka)) 10%, var(--beyaz)); color: var(--metin); }
.menu-oge[aria-current="page"] { background: color-mix(in srgb, var(--oge-vurgu, var(--marka)) 18%, var(--beyaz)); }
.menu-oge[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 3px;
    border-radius: 2px;
    background: var(--oge-vurgu, var(--marka));
}

.menu-alt {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 12px 14px;
    border-top: 1px solid var(--gri-200);
    background: var(--gri-100);
}
.menu-alt a { line-height: 0; border-radius: 4px; }
.link-logo { height: 22px; width: auto; }
.menu-alt span { font-size: 10.5px; font-weight: 600; color: var(--gri-700); white-space: nowrap; }

/* Raf hâli: 44 px. */
.kabuk[data-menu="daraltilmis"] .program-menusu,
.kabuk[data-menu="otomatik"] .program-menusu { width: var(--menu-raf); }

.raf-link { display: none; line-height: 0; }
.raf-link img { height: 20px; width: auto; transform: rotate(-90deg); transform-origin: center; margin: 22px 0; }

/* Daraltılmış (Sabit + ☰, sayfa yeniden çizilir, geçiş yok): yalnız ☰ ve dikey Link logosu. */
.kabuk[data-menu="daraltilmis"] .menu-panel { width: var(--menu-raf); grid-template-rows: auto 1fr; }
.kabuk[data-menu="daraltilmis"] .menu-panel > :is(.menu-agaci, .menu-alt),
.kabuk[data-menu="daraltilmis"] .menu-baslik > :not(:first-child) { display: none; }
.kabuk[data-menu="daraltilmis"] .menu-baslik { padding: 10px 6px; background: var(--beyaz); }
.kabuk[data-menu="daraltilmis"] .raf-link { display: block; align-self: end; justify-self: center; padding: 14px 0; }

/* Otomatik: raf; fare üzerine gelince ya da KLAVYE odağıyla (fare tıklamasıyla gelen odak menüyü açık tutmaz) içeriğin
   üstüne açılır. İçerik hep açık genişlikte dizilir, panel kırpar; kapanırken içerik genişlik daralana dek görünür
   kalır, sonra gizlenir (boş panel görünmez). */
.kabuk[data-menu="otomatik"] .menu-panel {
    width: var(--menu-raf);
    transition: width 180ms ease-out 250ms, box-shadow 180ms ease-out 250ms;
}
.kabuk[data-menu="otomatik"] .menu-panel > :is(.menu-baslik, .menu-agaci, .menu-alt) { width: var(--menu-genis); }
.kabuk[data-menu="otomatik"] .menu-panel :is(.menu-agaci, .menu-alt, .menu-baslik > :not(:first-child)) {
    visibility: hidden;
    transition: visibility 0s linear 430ms;
}
.kabuk[data-menu="otomatik"] .raf-link {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: var(--menu-raf);
    padding: 14px 0;
    text-align: center;
    background: var(--beyaz);
    transition: visibility 0s linear 430ms;
}
.kabuk[data-menu="otomatik"] .menu-panel:is(:hover, :has(:focus-visible)) {
    width: var(--menu-genis);
    box-shadow: 4px 0 24px rgba(15, 23, 42, 0.14);
    transition-delay: 0ms;
}
.kabuk[data-menu="otomatik"] .menu-panel:is(:hover, :has(:focus-visible)) :is(.menu-agaci, .menu-alt, .menu-baslik > :not(:first-child)) {
    visibility: visible;
    transition-delay: 0s;
}
.kabuk[data-menu="otomatik"] .menu-panel:is(:hover, :has(:focus-visible)) .raf-link { visibility: hidden; transition-delay: 0s; }

.icerik {
    min-width: 0;
    overflow-y: auto;
    padding: 24px clamp(16px, 3vw, 32px) 40px;
}

.alt-cubuk {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: center;
    padding: 7px 22px;
    background: var(--giris-zemin);
    border-top: 1px solid var(--giris-ayrac);
    color: var(--giris-aciklama);
    font-size: 11.5px;
}
.alt-cubuk a { color: inherit; text-decoration: none; }
.alt-cubuk a:hover { text-decoration: underline; color: var(--marka-koyu); }
.alt-cubuk .orta { text-align: center; }
.alt-cubuk .sag { text-align: right; }

.telefon-cubugu, .telefon-menusu-dugmesi { display: none; }

/* ---------------------------------------------------------------- Sayfa başlığı ve içerik */

.sayfa-basligi { display: grid; gap: 4px; margin-bottom: 20px; }
.sayfa-basligi h1 { font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--metin); }
.sayfa-basligi p { color: var(--gri-700); }

.icerik-izgarasi { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); align-items: start; }

/* Değer sütunu en az 0: bölünmez uzun değer (VT adı, cari kodu, e-posta) sütunu ve sayfayı genişletmez, satır içinde bölünür
   (Linux yazı tiplerinde 375 px'te taşıyordu). */
.bilgi-listesi { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; }
.bilgi-listesi dt { color: var(--gri-700); }
.bilgi-listesi dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.durum-sayfasi {
    display: grid;
    justify-items: start;
    gap: 10px;
    max-width: 560px;
    padding-top: 12px;
}
.durum-sayfasi > .simge { width: 40px; height: 40px; color: var(--vurgu); }
.durum-sayfasi h1 { font-size: 22px; }
.durum-sayfasi p { color: var(--gri-700); }
.durum-sayfasi .dugme { margin-top: 6px; }

/* ---------------------------------------------------------------- Ana-detay (ör. Kullanıcılar)
   WPF tanım ekranları gibi: solda kayıt listesi, sağda seçilen kaydın grup kartları. Yerleşim sayfa genişliğine değil
   kendi alanına göre değişir: dar alanda (telefon, menü açıkken dar pencere) önce liste, seçilince yalnız kayıt. */

.ana-detay-kap { container: ana-detay / inline-size; }
.ana-detay {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    grid-template-areas: "baslik baslik" "liste detay";
    gap: 16px 24px;
    align-items: start;
}
.ana-detay-baslik {
    grid-area: baslik;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
    margin-bottom: 4px;
}

.ana-detay-liste {
    grid-area: liste;
    position: sticky;
    top: 0;
    max-height: calc(100dvh - var(--serit-yuksekligi) - 140px);
    overflow-y: auto;
    background: var(--kart);
    border: 1px solid var(--vurgu);
    border-radius: 10px;
}
.ana-detay-liste > .grup-baslik { margin: 0; }
.secim-listesi { display: grid; gap: 2px; margin: 0; padding: 6px; list-style: none; }
.secim-oge {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    align-items: center;
    min-height: 52px;
    padding: 7px 10px;
    border-radius: 6px;
    color: var(--metin);
    text-decoration: none;
}
.secim-oge:hover { background: var(--secim-100); color: var(--metin); }
.secim-oge[aria-current="page"] { background: var(--secim-300); box-shadow: inset 0 0 0 1px var(--secim-500); }
.secim-ad { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.secim-alt { grid-column: 1; font-size: 12px; color: var(--gri-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.secim-yan {
    grid-column: 2;
    grid-row: 1 / span 2;
    font-size: 11.5px;
    color: var(--gri-700);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.secim-oge.pasif .secim-ad { font-weight: 500; color: var(--gri-700); }

.rozet {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--gri-200);
    color: var(--gri-700);
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
}

/* Bilgi tonunda rozet (ör. "Aday": Link'te carisi yok) — vurgu değil, bilgi bandının renkleri. */
.rozet-bilgi { background: var(--turkuaz-50); color: var(--turkuaz-900); box-shadow: inset 0 0 0 1px var(--turkuaz-200); }

.ana-detay-detay { grid-area: detay; display: grid; gap: 16px; min-width: 0; max-width: 720px; }
.ana-detay-detay .alan { max-width: 440px; }
.detay-basligi { display: grid; gap: 2px; }
.detay-basligi h2 { font-size: 20px; font-weight: 700; line-height: 1.25; }
.detay-basligi p { color: var(--gri-700); font-size: 13px; }

.geri-baglanti {
    display: none;
    align-items: center;
    gap: 6px;
    justify-self: start;
    min-height: 44px;
    margin: -10px 0 -6px;
    color: var(--marka-koyu);
    font-weight: 600;
    text-decoration: none;
}
.geri-baglanti .simge { width: 16px; height: 16px; }
.geri-baglanti:hover { text-decoration: underline; text-underline-offset: 2px; }
/* Kendi sayfası olan kayıtta (ör. müşteri kartı) geri bağlantısı her genişlikte görünür. */
.geri-baglanti.gorunur { display: inline-flex; margin: -12px 0 -8px; }

@container ana-detay (max-width: 719.98px) {
    /* Tek sütun, alan adı yok: gizlenen bölüm boş satır ve aralık bırakmaz. */
    .ana-detay { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
    .ana-detay > * { grid-area: auto; }
    .ana-detay-liste { position: static; max-height: none; }
    .secim-oge { min-height: 56px; }
    .ana-detay:not(.detay-acik) .ana-detay-detay { display: none; }
    .ana-detay.detay-acik :is(.ana-detay-baslik, .ana-detay-liste) { display: none; }
    .geri-baglanti { display: inline-flex; }
    .ana-detay-detay .alan { max-width: none; }
    .form-eylemleri > .dugme { flex: 1 1 100%; }
}

/* Kart içi form: alanlar alt alta, eylemler altta. */
.form-yigin { display: grid; gap: 14px; }
.form-eylemleri { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.kart-aciklama { margin: 0; font-size: 13px; color: var(--gri-700); }
.alan-ipucu { font-size: 12px; color: var(--gri-700); }
.istege-bagli { font-weight: 400; color: var(--gri-700); }

/* Rol seçimi: onay kutulu seçenek kartları; işaretli seçenek LAVANTA (seçim rengi), vurgu değil. */
.rol-secimi { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.rol-secimi > legend { margin-bottom: 6px; padding: 0; }
/* Kartın bandı zaten "Roller" diyorsa başlık yalnız ekran okuyucuya kalır. */
.rol-secimi > legend.gizli-etiket { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rol-secenek {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 10px 12px;
    border: 1px solid var(--gri-200);
    border-radius: var(--kose);
    background: var(--beyaz);
    cursor: pointer;
    transition: background-color 120ms ease-out, border-color 120ms ease-out;
    -webkit-tap-highlight-color: transparent;
}
.rol-secenek:hover { background: var(--secim-100); }
.rol-secenek:has(input:checked) { background: var(--secim-100); border-color: var(--secim-500); }
.rol-secenek:has(input:disabled) { cursor: not-allowed; background: var(--gri-100); border-color: var(--gri-200); }
.rol-secenek input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--secim-500); }
.rol-secenek strong { display: block; font-size: 13.5px; }
.rol-secenek small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--gri-700); }
.rol-secimi .validation-message { margin-top: -2px; }

/* Tek kartlık dar sayfa (ör. Şifremi değiştir) */
.dar-sayfa { display: grid; gap: 16px; max-width: 520px; }

/* ---------------------------------------------------------------- Kayıt listesi ve kayıt kartı (ör. Müşteriler)
   Liste tam genişlikte: arama çubuğu, canlı sonuç özeti, veri alanı, sayfalama. Yerleşim kendi alanına göre değişir
   (container query): dar alanda (telefon, menü açıkken dar pencere) tablo yerine iki satırlı liste. Kart: tek sütun
   grup kartları, en fazla 720 px. */

.baslik-eylemli {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
}
.baslik-eylemli > div { display: grid; gap: 4px; }

.kayit-listesi { container: kayit-listesi / inline-size; display: grid; gap: 12px; }

.arama-cubugu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.arama-kutusu { position: relative; flex: 1 1 320px; max-width: 560px; }
.arama-kutusu > .simge {
    position: absolute;
    left: 11px;
    top: 50%;
    translate: 0 -50%;
    width: 16px;
    height: 16px;
    color: var(--gri-500);
    pointer-events: none;
}
.arama-kutusu > input {
    width: 100%;
    min-height: var(--kontrol);
    padding: 0 38px 0 35px;
    border: 1px solid var(--kenar);
    border-radius: var(--kose);
    background: var(--beyaz);
    color: var(--metin);
    font: inherit;
    font-size: 14px;
}
.arama-kutusu > input:focus { outline: none; border-color: var(--marka); box-shadow: 0 0 0 1px var(--marka); }
.arama-kutusu > input::placeholder { color: var(--gri-500); }
.arama-kutusu > input::-webkit-search-cancel-button { cursor: pointer; }
.arama-yukleniyor {
    position: absolute;
    right: 12px;
    top: 50%;
    translate: 0 -50%;
    display: grid;
    color: var(--marka-koyu);
}
.arama-yukleniyor .simge { width: 16px; height: 16px; animation: don 0.9s linear infinite; }

/* Onay kutusu + etiket (ör. "Pasifleri göster"): kontrol yüksekliğinde, tüm satır tıklanır. */
.secim-kutusu {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--kontrol);
    color: var(--gri-700);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.secim-kutusu input { width: 16px; height: 16px; margin: 0; }

.sonuc-ozeti { color: var(--gri-700); font-size: 13px; font-variant-numeric: tabular-nums; }
.sonuc-ozeti:empty { display: none; }

/* Satırın tamamı tıklanır: bağlantı unvanın üzerindedir, görünmez katmanı satırı kaplar (klavyede satır başına tek durak). */
.tiklanir-satir { position: relative; }
.tiklanir-satir td { cursor: pointer; }
.unvan-hucresi { display: flex; align-items: center; gap: 8px; max-width: 46ch; }
.satir-baglantisi {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--metin);
    font-weight: 600;
    text-decoration: none;
}
.satir-baglantisi::after { content: ""; position: absolute; inset: 0; }
.satir-baglantisi:hover, .tiklanir-satir:hover .satir-baglantisi { color: var(--metin); text-decoration: underline; }
.satir-baglantisi:focus-visible { outline: none; }
.satir-baglantisi:focus-visible::after { outline: 2px solid var(--marka-koyu); outline-offset: -2px; border-radius: 4px; }
.tiklanir-satir.pasif td, .tiklanir-satir.pasif .satir-baglantisi { color: var(--gri-700); }
.tiklanir-satir.pasif .satir-baglantisi { font-weight: 500; }

.kayit-listesi .musteri-kartlari { display: none; background: var(--kart); border: 1px solid var(--vurgu); border-radius: 10px; }
/* Sıra No (#72): dar, sağa yaslı, rakamlar hizalı ve ikincil renkte (veri değil, yalnız konum). */
.veri-tablosu td.sira-no { width: 1%; text-align: right; color: var(--gri-700); font-variant-numeric: tabular-nums; white-space: nowrap; }
.secim-ad .sira-no { color: var(--gri-700); font-weight: 500; font-variant-numeric: tabular-nums; }

.sayfalama { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sayfa-numaralari { display: flex; align-items: center; gap: 4px; }
.sayfa-dugmesi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: var(--kontrol);
    min-height: var(--kontrol);
    padding: 0 10px;
    border: 1px solid var(--kenar);
    border-radius: var(--kose);
    background: var(--beyaz);
    color: var(--marka-koyu);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms ease-out, border-color 120ms ease-out;
}
.sayfa-dugmesi .simge { width: 16px; height: 16px; }
.sayfa-dugmesi:hover { background: var(--turkuaz-50); border-color: var(--marka); color: var(--marka-koyu); }
/* Geçerli sayfa sekme gibi vurgu diliyle (gezinme; seçim değil). */
.sayfa-dugmesi[aria-current="page"] {
    background: color-mix(in srgb, var(--vurgu) 18%, var(--beyaz));
    border-color: var(--vurgu);
    color: var(--bant-metni);
}
.sayfa-dugmesi[aria-disabled="true"] { background: var(--gri-100); border-color: var(--gri-200); color: var(--gri-500); cursor: not-allowed; }
.sayfa-bosluk { padding: 0 2px; color: var(--gri-500); }
.sayfa-bilgisi { margin-left: 8px; color: var(--gri-700); font-size: 13px; font-variant-numeric: tabular-nums; }

@container kayit-listesi (max-width: 639.98px) {
    .musteri-tablosu { display: none; }
    .kayit-listesi .musteri-kartlari { display: grid; }
    .musteri-kartlari .secim-oge { min-height: 56px; }
    .sayfa-numaralari { display: none; }
    .sayfalama { justify-content: space-between; }
    .sayfa-bilgisi { order: 1; margin: 0; }
    .sayfa-sonraki { order: 2; }
}

.bos-durum .dugme { margin-top: 8px; }
.bant a { color: inherit; font-weight: 600; }

.kart-sayfasi { display: grid; gap: 16px; max-width: 720px; }
.kayit-basligi { display: grid; gap: 4px; }
.kayit-basligi h1 { font-size: 20px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.kayit-basligi p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    color: var(--gri-700);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

/* Üste hizalı: yanındaki alanın ipucu ya da hata satırı kutuyu uzatmasın. */
.alan-izgarasi {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    align-items: start;
    gap: 14px 16px;
}
.alan-izgarasi > .genis { grid-column: 1 / -1; }
.musteri-bilgileri dd { overflow-wrap: anywhere; }

.kisayollar { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }

@media (max-width: 767.98px) {
    .baslik-eylemli > .dugme, .kart-sayfasi .form-eylemleri > .dugme { flex: 1 1 100%; }
    .musteri-bilgileri { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .musteri-bilgileri dd { margin-bottom: 8px; }
    .kisayollar > li { flex: 1 1 100%; }
    .kisayollar .dugme { width: 100%; }
}

/* ---------------------------------------------------------------- Satır listesi (müşteri kartındaki kişiler, özel yazılımlar)
   Grup kartında ayraçlı satırlar: ad (600) ve yanında gri ikincil bilgi (görev, sürüm), altında isteğe bağlı satırlar
   (kişide simgeli dokunulabilir iletişim bağlantıları), notun ilk satırı; sağda "Düzenle". Dar kartta (telefon) bağlantılar
   alt alta, her biri 44 px tam satır. Pasifler kapalı gelen gri çerçeveli bölümde (details; JS'siz açılır). */

.sekme-eylemleri { display: flex; justify-content: flex-end; }

.satir-karti, .pasif-bolumu { container: satir-karti / inline-size; }
.satir-listesi { margin: 0; padding: 0; list-style: none; }
.liste-satiri {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--gri-200);
}
.liste-satiri:first-child { border-top: 0; }
.satir-karti .liste-satiri:first-child { padding-top: 0; }
.satir-karti .liste-satiri:last-child { padding-bottom: 0; }
.liste-satiri > :not(.satir-duzenle) { grid-column: 1; }
/* Satırlar arası boşluk kenar boşluğuyla: "Düzenle"nin kapladığı boş satırlara aralık eklenmez (az satırlı kişi uzamaz). */
.liste-satiri > :not(.satir-duzenle) + :not(.satir-duzenle) { margin-top: 4px; }
.satir-kimligi { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.satir-adi { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.satir-alt { color: var(--gri-700); font-size: 13px; }
.satir-kimligi .rozet { align-self: center; }
.satir-duzenle { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.satir-notu { overflow: hidden; color: var(--gri-700); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.liste-satiri.pasif .satir-adi { font-weight: 500; color: var(--gri-700); }

.iletisim-baglantilari { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 0; padding: 0; list-style: none; }
.iletisim-baglantisi {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    color: var(--marka-koyu);
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    text-decoration: none;
}
.iletisim-baglantisi .simge { width: 16px; height: 16px; flex: none; }
a.iletisim-baglantisi:hover { color: var(--turkuaz-900); text-decoration: underline; text-underline-offset: 2px; }
span.iletisim-baglantisi { color: var(--gri-700); }

@container satir-karti (max-width: 479.98px) {
    /* "Düzenle" adın yanında kalır; bağlantılar ve not satırın tamamını kullanır. */
    .satir-duzenle { grid-row: 1; align-self: start; }
    .liste-satiri > :is(.iletisim-baglantilari, .satir-notu) { grid-column: 1 / -1; }
    .iletisim-baglantilari { flex-direction: column; flex-wrap: nowrap; }
    .iletisim-baglantisi { display: flex; min-height: 44px; }
}

.pasif-bolumu { border: 1px solid var(--gri-200); border-radius: 10px; background: var(--kart); }
.pasif-bolumu > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 9px;
    color: var(--gri-700);
    font-size: 13.5px;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}
.pasif-bolumu > summary::-webkit-details-marker { display: none; }
.pasif-bolumu > summary:hover { background: var(--gri-100); }
.pasif-bolumu > summary .simge { width: 16px; height: 16px; transition: rotate 120ms ease-out; }
.pasif-bolumu[open] > summary { border-bottom: 1px solid var(--gri-200); border-radius: 9px 9px 0 0; }
.pasif-bolumu[open] > summary .simge { rotate: 90deg; }
.pasif-bolumu > .satir-listesi { padding: 0 16px; }

/* Müşterinin ürünleri: katalog grupları (fieldset), her ürün bir onay kutusu satırı (rol seçimi görünümü: işaretli
   olan lavanta). Satırlar kendi alanına göre iki ya da tek sütun; telefonda tam genişlik, en az 44 px. */
.urun-grubu { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.urun-grubu > legend { margin-bottom: 6px; padding: 0; color: var(--gri-700); font-size: 13px; font-weight: 600; }
.urun-grubu > .alan-ipucu { margin: -4px 0 2px; }
.urun-secenekleri { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 8px; }
.urun-secenek { align-items: center; min-height: 44px; }
.urun-secenek input { margin: 0; }
.urun-secenek > span { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.urun-secenek small { flex-basis: 100%; margin: 0; }

/* Ana-detay listesinde grup başlığı (ör. ürün kataloğu: Link ERP, Link paket…). */
.secim-grubu { margin: 0; padding: 10px 16px 0; color: var(--gri-700); font-size: 12px; font-weight: 700; }
.secim-grubu + .secim-listesi { padding-top: 2px; }

/* KVKK onayı: tam satır tıklanır, metin okunur renkte; kutu işaretliyken tehlike rengi. */
.alan > .kvkk-onayi { color: var(--metin); font-size: 13.5px; }
.kvkk-onayi input { accent-color: var(--hata); }

@media (max-width: 767.98px) {
    .sekme-eylemleri > .dugme { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------- Talepler (#7)
   Liste müşteri listesinin düzenindedir (arama çubuğu + süzgeçler, tablo; dar alanda kartlar). Talep formu tek grup
   kartıdır: seçimler "hap" (radyo) düğmeleriyle, işaretli olan LAVANTA (seçim rengi); yalnız "Kritik" öncelik seçilince
   hata tonuna döner (yanlışlıkla seçilmesin). Ürün seçimi seçilen hizmet alanının altında JS'siz açılır (:has). */

.rozet-uyari { background: var(--uyari-acik); color: var(--uyari-koyu); }
.rozet-hata { background: var(--hata-acik); color: var(--hata-koyu); }
.rozet-basari { background: var(--basari-acik); color: var(--gri-900); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--basari) 35%, transparent); }
.rozet-islemde { background: var(--beyaz); color: var(--turkuaz-900); box-shadow: inset 0 0 0 1px var(--turkuaz-700); }
.rozet-metin { color: var(--gri-700); font-size: 12.5px; }
/* Bağlantı olan rozet (ör. "Kapsam hesaplanmadı" → Ayarlar): altı çizili, hover'da koyulaşır; düz rozetlerden ayırt edilir. */
a.rozet { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a.rozet:hover { background: var(--gri-300); color: var(--metin); }

.talep-no { color: var(--gri-700); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; white-space: nowrap; }
td.talep-no { font-size: 13px; }

/* Süzgeçler: durum seçimi, "Yalnız bana atananlar", kaldırılabilir müşteri hapı. */
.suzgecler { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.girdi.suzgec-secimi { width: auto; min-width: 176px; font-size: 13.5px; }
.suzgec-hapi {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--kontrol);
    padding: 0 10px 0 12px;
    border: 0;
    border-radius: 999px;
    background: var(--turkuaz-50);
    box-shadow: inset 0 0 0 1px var(--turkuaz-200);
    color: var(--turkuaz-900);
    font: inherit;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
}
.suzgec-hapi strong { max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suzgec-hapi .simge { width: 14px; height: 14px; }
.suzgec-hapi:hover { background: var(--turkuaz-100); color: var(--turkuaz-900); }

.talep-musterisi { max-width: 32ch; }
.talep-musterisi .kisalt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Dar alanda tablo yerine kartlar: no ve (Yüksek/Kritik) öncelik, başlık, müşteri, durum · atanan · zaman. */
.kayit-listesi .talep-kartlari { display: none; margin: 0; padding: 6px; list-style: none; background: var(--kart); border: 1px solid var(--vurgu); border-radius: 10px; }
.talep-kartlari > li + li { border-top: 1px solid var(--gri-200); }
.talep-karti { display: grid; gap: 3px; padding: 10px 10px 11px; border-radius: 6px; color: var(--metin); text-decoration: none; }
.talep-karti:hover { background: var(--secim-100); color: var(--metin); }
.talep-karti-ust { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px; }
.talep-karti-baslik {
    display: -webkit-box;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.talep-karti-musteri { overflow: hidden; color: var(--gri-700); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.talep-karti-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 2px; color: var(--gri-700); font-size: 12.5px; }

@container kayit-listesi (max-width: 639.98px) {
    .talep-tablosu { display: none; }
    .kayit-listesi .talep-kartlari { display: grid; }
    .suzgecler { width: 100%; }
    .girdi.suzgec-secimi { flex: 1 1 100%; }
}

/* Talep açma: müşteri seçme adımında son talep açılan müşteriler; formda başlıktaki "Değiştir". */
.son-musteriler .secim-listesi { padding: 0; }
.baslik-baglantisi { display: inline-flex; align-items: center; min-height: 28px; color: var(--marka-koyu); font-weight: 600; text-decoration: none; }
.baslik-baglantisi:hover { text-decoration: underline; text-underline-offset: 2px; }

.talep-formu { gap: 18px; }
.hap-grubu { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.hap-grubu > legend { margin-bottom: 6px; padding: 0; color: var(--gri-700); font-size: 13px; font-weight: 600; }
.haplar { display: flex; flex-wrap: wrap; gap: 8px; }
/* Seçim kendi rengiyle (lavanta) görünür: dokunmatikte tarayıcının mavi dokunma vurgusu üstüne binmesin. */
.hap { position: relative; display: inline-flex; -webkit-tap-highlight-color: transparent; }
/* Radyo düğmesi hapın içinde, görünmez ama odaklanabilir: klavye ve ekran okuyucu olağan radyo grubunu kullanır. */
.hap > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.hap > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--kontrol);
    padding: 0 14px;
    border: 1px solid var(--kenar);
    border-radius: 999px;
    background: var(--beyaz);
    color: var(--metin);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 120ms ease-out, border-color 120ms ease-out;
}
.hap:hover > span { background: var(--secim-100); }
.hap > input:checked + span { background: var(--secim-100); border-color: var(--secim-500); box-shadow: inset 0 0 0 1px var(--secim-500); color: var(--gri-900); }
.hap > input:focus-visible + span { outline: 2px solid var(--marka-koyu); outline-offset: 2px; }
.hap-kritik > input:checked + span { background: var(--hata-acik); border-color: var(--hata); box-shadow: inset 0 0 0 1px var(--hata); color: var(--hata-koyu); }

/* Öncelik: bitişik dört parça (segmentli seçici). */
.haplar.bitisik { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; max-width: 460px; }
.haplar.bitisik > .hap > span { width: 100%; padding: 0 8px; border-radius: 0; }
.haplar.bitisik > .hap + .hap > span { margin-left: -1px; }
.haplar.bitisik > .hap:first-child > span { border-radius: var(--kose) 0 0 var(--kose); }
.haplar.bitisik > .hap:last-child > span { border-radius: 0 var(--kose) var(--kose) 0; }
.haplar.bitisik > .hap > input:checked + span { position: relative; z-index: 1; }

.talep-hizmet { display: grid; gap: 14px; }
.talep-hizmet .alan-paneli { display: none; }
.talep-hizmet:has(input[name="Form.HizmetAlani"][value="LinkUrunu"]:checked) .alan-paneli[data-alan="LinkUrunu"],
.talep-hizmet:has(input[name="Form.HizmetAlani"][value="SintekCozumu"]:checked) .alan-paneli[data-alan="SintekCozumu"],
.talep-hizmet:has(input[name="Form.HizmetAlani"][value="OzelYazilim"]:checked) .alan-paneli[data-alan="OzelYazilim"] {
    display: grid;
    animation: panel-ac 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes panel-ac { from { opacity: 0; translate: 0 -4px; } }
@supports not selector(:has(*)) { .talep-hizmet .alan-paneli { display: grid; } }
.alan-paneli .urun-secenek small { flex-basis: auto; margin: 0; }

/* Talep kartı (detay): rozet satırı, iletişim bağlantıları bilgi listesinde, açıklama satır sonlarıyla. */
.talep-kisisi { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.talep-bilgileri dd > .rozet { margin-left: 6px; }
.talep-bilgileri .iletisim-baglantilari { margin-top: 2px; }
.talep-bilgileri .iletisim-baglantisi { font-weight: 500; }
.bos-deger { color: var(--gri-500); font-weight: 400; }
.talep-aciklamasi { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--gri-200); }
.talep-aciklamasi h3 { margin: 0 0 6px; color: var(--gri-700); font-size: 13px; font-weight: 600; }
.talep-aciklamasi p { max-width: 72ch; margin: 0; line-height: 1.55; overflow-wrap: anywhere; white-space: pre-line; }

/* Kart ve sekme altındaki "tümü" bağlantısı (müşterinin tüm talepleri, İşlerim). */
.sekme-bagi, .kart-bagi { margin: 0; }
.kart-bagi { margin-top: 10px; padding-top: 4px; border-top: 1px solid var(--gri-200); }
:is(.sekme-bagi, .kart-bagi) > a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--marka-koyu); font-weight: 600; text-decoration: none; }
:is(.sekme-bagi, .kart-bagi) > a:hover { text-decoration: underline; text-underline-offset: 2px; }
:is(.sekme-bagi, .kart-bagi) .simge { width: 16px; height: 16px; }
.liste-satiri a.satir-adi { color: var(--metin); text-decoration: none; }
.liste-satiri a.satir-adi:hover { text-decoration: underline; text-underline-offset: 2px; }
p.talep-alt { margin: 0; font-size: 12.5px; }

/* Ayarlar sekmeli ana-detay: başlık, sekmeler, sonra liste ve detay. */
.ana-detay.sekmeli { grid-template-areas: "baslik baslik" "sekmeler sekmeler" "liste detay"; }
.ana-detay > .sekmeler { grid-area: sekmeler; margin-top: -6px; }
@container ana-detay (max-width: 719.98px) {
    /* Tek sütun: .sekmeli'nin alan şablonu ve sekmelerin alanı da sıfırlanır (özgüllükleri temel .ana-detay
       sıfırlamasından yüksek). */
    .ana-detay.sekmeli { grid-template-areas: none; }
    .ana-detay > .sekmeler { grid-area: auto; }
    .ana-detay.detay-acik > .sekmeler { display: none; }
}

@media (max-width: 767.98px) {
    .haplar:not(.bitisik) > .hap { flex: 1 1 auto; }
    .haplar:not(.bitisik) > .hap > span { width: 100%; min-height: 44px; }
    .haplar.bitisik { max-width: none; }
    .haplar.bitisik > .hap > span { min-height: 44px; }
    .talep-formu .form-eylemleri > .dugme { flex: 1 1 100%; }
    /* Alt çubuğun eylemi (Yeni talep): birincil dolguda yuvarlak simge. */
    /* Daire diğer simgelerden 14 px büyük: yukarı taşar, etiketler aynı hizada kalır. */
    .telefon-oge.eylem .simge { width: 36px; height: 36px; margin-top: -14px; padding: 8px; border-radius: 50%; background: var(--turkuaz-700);
        color: var(--beyaz); box-shadow: 0 2px 8px rgba(14, 116, 144, 0.28); }
    .telefon-oge.eylem:hover { background: transparent; }
    .telefon-oge.eylem:hover .simge { background: var(--turkuaz-900); }
    .telefon-oge.eylem[aria-current="page"]::before { display: none; }
    .telefonda-gizli { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .talep-hizmet .alan-paneli { animation: none !important; }
}

/* ---------------------------------------------------------------- Talep kartı (#8)
   Geniş alanda iki sütun: solda not formu + akış, sağda Durum kartı ve altında yapışkan Talep bilgileri + Atama. Yerleşim
   kendi alanına göre değişir (container query): dar alanda tek sütun, DOM sırasıyla (Durum → Not ekle → Akış → bilgiler →
   Atama). Sağ sütunun ikinci satırı 1fr'dir: sol sütun ne kadar uzun olursa olsun Durum kartının altında boşluk açılmaz. */

.talep-sayfasi { container: talep-sayfasi / inline-size; display: grid; gap: 16px; }
.talep-detayi { display: grid; gap: 16px; align-items: start; }
.talep-ana, .talep-yan { display: grid; gap: 16px; align-content: start; min-width: 0; }

@container talep-sayfasi (min-width: 880px) {
    .talep-detayi {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
        grid-template-rows: auto 1fr;
        column-gap: 20px;
        max-width: 1180px;
    }
    .talep-durumu { grid-column: 2; grid-row: 1; }
    .talep-ana { grid-column: 1; grid-row: 1 / span 2; }
    .talep-yan {
        grid-column: 2;
        grid-row: 2;
        position: sticky;
        top: 0;
        max-height: calc(100dvh - var(--serit-yuksekligi) - 56px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    /* Durum kartı yoksa (Satış yalnız okur) sağ sütun en üstten başlar. */
    .talep-detayi:not(:has(> .talep-durumu)) .talep-yan { grid-row: 1 / span 2; }
}

/* Durum kartı: yalnız geçerli geçişlerin düğmeleri; İptal geri alınamaz, gerekçesiyle açılan küçük formdadır. */
.talep-durumu > .grup-baslik ~ * + * { margin-top: 10px; }
.durum-eylemleri { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.durum-eylemleri > .dugme { flex: 1 1 auto; }
.durum-ozeti { color: var(--gri-700); font-size: 13px; font-variant-numeric: tabular-nums; }
.durum-gerekcesi { max-width: 72ch; padding: 8px 10px; border-radius: 6px; background: var(--gri-100); overflow-wrap: anywhere; white-space: pre-line; }
.iptal-bolumu > summary { list-style: none; }
.iptal-bolumu > summary::-webkit-details-marker { display: none; }
.iptal-bolumu[open] > summary { background: var(--hata-acik); }
.iptal-formu { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--gri-200); }

/* İkincil tehlike düğmesi: saydam, kırmızı kenar ve yazı (geri alınamaz işlemi AÇAN düğme; işlemi yapan dolu tehlikedir). */
.dugme-tehlike-ikincil { background: transparent; border-color: var(--hata); color: var(--hata-koyu); }
.dugme-tehlike-ikincil:hover:not(:disabled) { background: var(--hata-acik); color: var(--hata-koyu); }

/* Not formu. Süre: bitişik yedi parça (Yok · 15 · 30 · 45 · 60 · 90 · Diğer); "Diğer" dakika kutusunu, süre seçilince
   çalışma şekli açılır. "Kaydettikten sonra: Kapat" seçilince metnin etiketi "Çözüm notu", düğme "Kaydet ve kapat" olur;
   hepsi JS'siz (:has). */
.not-formu { gap: 16px; }
.haplar.bitisik.sureler { grid-template-columns: repeat(7, minmax(0, 1fr)); max-width: 520px; }
.haplar.bitisik.sureler > .hap > span { padding: 0 2px; font-variant-numeric: tabular-nums; }
.haplar.bitisik.uclu { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 360px; }
.sure-diger { display: none; max-width: 200px; margin-top: 6px; }
.sure-secimi:has(input[value="diger"]:checked) .sure-diger { display: grid; animation: panel-ac 160ms cubic-bezier(0.16, 1, 0.3, 1); }
.not-formu:has(input[name="Not.Sure"][value="0"]:checked) .calisma-sekli { display: none; }
.ic-not-secimi .secim-kutusu { min-height: 32px; color: var(--metin); }
.ic-not-secimi .secim-kutusu .simge { width: 16px; height: 16px; color: var(--uyari-koyu); }
.ic-not-secimi .alan-ipucu { margin-top: -4px; }
/* "Kapat" seçiliyken iç not işaretlenemez (çözüm notu müşteriye gidebilir). Önceden işaretlenmişse kilitlenmez: kaldırılabilsin
   (sunucu da reddeder). */
.not-formu:has(input[name="Not.Sonra"][value="Kapat"]:checked):not(:has(#not-ic:checked)) .ic-not-secimi .secim-kutusu {
    color: var(--gri-500);
    cursor: not-allowed;
    pointer-events: none;
}
.not-formu:has(input[name="Not.Sonra"][value="Kapat"]:checked):not(:has(#not-ic:checked)) .ic-not-secimi :is(input, .simge) { opacity: 0.45; }
.not-formu .cozum-etiketi { display: none; }
.not-formu .dugme .not-etiketi { display: inline-flex; align-items: center; gap: 8px; }
.not-formu:has(input[name="Not.Sonra"][value="Kapat"]:checked) .not-etiketi { display: none; }
.not-formu:has(input[name="Not.Sonra"][value="Kapat"]:checked) .cozum-etiketi { display: inline; }
.not-formu:has(input[name="Not.Sonra"][value="Kapat"]:checked) .dugme .cozum-etiketi { display: inline-flex; align-items: center; gap: 8px; }
@supports not selector(:has(*)) { .sure-diger { display: grid; } }

/* Akış: notlar ve durum değişiklikleri, en yeni önce, gün başlıklarıyla. İç not uyarı tonunda (kilitli), çözüm notu
   başarı rozetli; durum değişikliği ince tek satır. */
:is(.akis-karti, .ekler-karti, .gecmis-karti, .notlar-karti) .grup-baslik .bant-ozeti { margin-left: auto; font-size: 12.5px; font-weight: 400; font-variant-numeric: tabular-nums; }
.akis-gunu + .akis-gunu { margin-top: 14px; }
.akis-gun-basligi { margin: 0 0 2px; color: var(--gri-700); font-size: 12px; font-weight: 700; }
.akis { margin: 0; padding: 0; list-style: none; }
.akis > li { padding: 10px 0; border-top: 1px solid var(--gri-200); }
.akis > li:first-child { border-top: 0; }
.akis-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 0; color: var(--gri-700); font-size: 13px; }
.akis-ust strong { color: var(--metin); font-size: 13.5px; font-weight: 600; }
:is(.akis-ust, .kisa-not-ust) .rozet { display: inline-flex; align-items: center; gap: 4px; }
:is(.akis-ust, .kisa-not-ust) .rozet .simge, .akis-suresi .simge { width: 13px; height: 13px; }
.akis-suresi { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.akis-zamani { margin-left: auto; color: var(--gri-700); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.akis-metni { max-width: 72ch; margin-top: 4px; line-height: 1.55; overflow-wrap: anywhere; white-space: pre-line; }
.akis-notu.ic-not {
    margin: 6px 0;
    padding: 10px 12px;
    border-top: 0;
    border-radius: var(--kose);
    background: var(--uyari-acik);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--uyari) 30%, transparent);
}
.akis-notu.ic-not + li { border-top: 0; }
.akis-notu.ic-not :is(.akis-ust, .akis-zamani) { color: var(--uyari-koyu); }
.akis-durumu .akis-ust > .simge { width: 16px; height: 16px; color: var(--gri-700); }
.akis-durumu .akis-ust strong { font-size: 13px; }
.akis-gerekce { max-width: 72ch; margin: 4px 0 0 26px; color: var(--gri-700); font-size: 13px; overflow-wrap: anywhere; white-space: pre-line; }

/* ---------------------------------------------------------------- Sözleşmeler (#18)
   Müşteri kartının Sözleşmeler sekmesi (satır kartları) ve sözleşme sayfası: geniş alanda iki sütunlu grup kartları, "Kapsanan
   ürünler" tam genişlik. Tür "Bilgisayar sistemleri" seçiliyse ürün kartı JS'siz gizlenir (sunucu da yok sayar); "Tüm Link
   ürünleri" işaretliyse tek tek liste gizlenir. Kalan gün hatırlatma dönemindeyse uyarı tonunda ve kalın (renk tek başına
   anlam taşımaz: metin "N gün kaldı"). */
.kart-sayfasi:has(> .sozlesme-formu, > .sozlesme-izgarasi) { max-width: 1040px; }
.sozlesme-formu { display: grid; gap: 16px; }
.sozlesme-izgarasi { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1024px) {
    .sozlesme-izgarasi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sozlesme-izgarasi > .tam-genislik { grid-column: 1 / -1; }
}
fieldset.secenek-grubu { min-width: 0; margin: 0; padding: 0; border: 0; }
.secenek-grubu > legend { margin-bottom: 6px; padding: 0; color: var(--gri-700); font-size: 13px; font-weight: 600; }
.kapsam-secenekleri { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 8px; }
.kapsam-secenekleri .rol-secenek > span { min-width: 0; }
.sozlesme-formu:has(#sozlesme-tur option[data-sinif="BilgisayarSistemleri"]:checked) .kapsam-urunleri { display: none; }
/* Sunucu kiralama (#76): kapsam ve ürün yok; Notlar ipucu kiralanan sunucuyu sorar. */
.sozlesme-formu:has(#sozlesme-tur option[data-sinif="SunucuKiralama"]:checked) :is(.kapsam-urunleri, .sozlesme-kapsami) { display: none; }
.sozlesme-formu .yalniz-kiralama { display: none; }
.sozlesme-formu:has(#sozlesme-tur option[data-sinif="SunucuKiralama"]:checked) .yalniz-kiralama { display: block; }
.kapsam-urunleri:has(#sozlesme-tum-link:checked) .urun-listesi-kapsam { display: none; }
.urun-listesi-kapsam { display: grid; gap: 14px; }
.urun-secenek .rozet { font-size: 11.5px; }
.kalan-gun { color: var(--gri-700); white-space: nowrap; }
.kalan-gun.hatirlat { color: var(--uyari-koyu); font-weight: 600; }
.belge-satiri { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.belge-satiri > a { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; overflow-wrap: anywhere; text-underline-offset: 3px; }
.belge-satiri .simge { flex: none; width: 16px; height: 16px; }
.sozlesme-notlari { margin: 0; max-width: 72ch; overflow-wrap: anywhere; white-space: pre-line; }
.sozlesme-satiri .satir-notu { white-space: normal; overflow: visible; }

/* ---------------------------------------------------------------- Birleştirme önerisi (#14)
   Aday kartında sekmelerin üstünde karar kartı: ortak veri tablosu dilinde karşılaştırma; farklı alanın Link değeri kalın + "farklı"
   rozeti (renk tek başına anlam taşımaz). Telefonda satırlar alan alan alt alta (hücre etiketi data-etiket). */
.birlestirme-karari { margin-bottom: 16px; }
.karsilastirma tbody th {
    position: static;
    padding: 7px var(--hucre-x);
    background: transparent;
    border-bottom: 0;
    border-top: 1px solid var(--gri-300);
    color: var(--gri-700);
    font-weight: 600;
    white-space: nowrap;
}
.karsilastirma tbody tr:first-child th { border-top: 0; }
.karsilastirma td { white-space: normal; overflow-wrap: anywhere; min-width: 14ch; }
.karsilastirma td .rozet { margin-left: 6px; }
.karsilastirma tbody tr.farkli td:last-child { font-weight: 600; color: var(--metin); }
.karsilastirma tbody tr:hover :is(th, td) { background: var(--secim-100); }
.karar-eylemleri { display: flex; flex-wrap: wrap; gap: 8px; }
.karar-eylemleri > form { display: contents; }
.oneri-bandi a, .oneri-listesi .satir-alt { font-weight: 600; }
.oneri-listesi { margin-bottom: 12px; }
.oneri-listesi > .kart-aciklama { padding: 0; }
@media (max-width: 767.98px) {
    .karsilastirma thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .karsilastirma, .karsilastirma tbody, .karsilastirma tr { display: block; }
    .karsilastirma tbody tr { border-top: 1px solid var(--gri-300); padding: 6px 0; }
    .karsilastirma tbody tr:first-child { border-top: 0; }
    .karsilastirma tbody th { display: block; border-top: 0; padding-bottom: 2px; }
    .karsilastirma td { display: block; min-width: 0; border: 0 !important; padding: 2px var(--hucre-x); }
    .karsilastirma td::before { content: attr(data-etiket); display: inline-block; min-width: 10ch; color: var(--gri-500); font-size: 12px; }
    .karar-eylemleri .dugme { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------- Ofis ajanı (#13)
   Geniş alanda Durum ve Ajan anahtarı yan yana, son eşitlemeler altta tam genişlik; dar alanda tek sütun. Anahtar kutusu
   eş aralıklı, salt okunur; Kopyala yanında (telefonda altında). */
.ajan-ayarlari { display: grid; gap: 16px; align-items: start; max-width: 1180px; }
@container ayar-sayfasi (min-width: 860px) {
    .ajan-ayarlari { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ajan-turlari { grid-column: 1 / -1; }
}
.anahtar-kutusu { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.anahtar-kutusu > textarea { flex: 1 1 280px; min-width: 0; height: auto; min-height: 0; padding: 8px 10px; resize: none; word-break: break-all; }
.tur-hatasi { color: var(--hata-koyu); overflow-wrap: anywhere; }
.ajan-turlari > .kart-aciklama { padding: 0 16px 14px; }

/* Platform yönetimi > Yedek (#56–#58): geniş alanda solda Durum + Son geceler, sağda Yedek anahtarı + Ekler + Geri yükleme denemesi;
   dar alanda Durum → Son geceler → Yedek anahtarı → Ekler → Geri yükleme denemesi. */
.yedek-ekrani { display: grid; gap: 16px; align-items: start; max-width: 1180px; }
.yedek-yan { display: grid; gap: 16px; align-content: start; min-width: 0; }
@container ayar-sayfasi (min-width: 880px) {
    .yedek-ekrani { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
    .yedek-ekrani > :is(.yedek-durumu, .yedek-turlari) { grid-column: 1; }
    .yedek-ekrani > .yedek-yan { grid-column: 2; grid-row: 1 / span 2; }
}
.yedek-ozeti { margin: 0; font-size: 13.5px; line-height: 1.6; }
.yedek-ozeti > span { color: var(--gri-700); white-space: nowrap; }
.yedek-durumu > .form-yigin + .yedek-vtleri { margin-top: 12px; border-top: 1px solid var(--gri-200); }

/* ---------------------------------------------------------------- Platform Yönetimi (#12)
   Firma kodu ve bağlantı dizesi eş aralıklı yazıyla (dize okunabilsin, "O/0" karışmasın). "Bağlantıyı dene" sonucu düğmenin
   yanında; ton simge + metinle birlikte verilir (renk tek başına anlam taşımaz). Yeni firma formu kart yığınıdır. */
.kod-girdisi { font-family: ui-monospace, monospace; font-size: 13px; }
input.buyuk-harf { text-transform: uppercase; }
textarea.kod-girdisi { min-height: 76px; resize: vertical; overflow-wrap: anywhere; }
.ana-detay-detay .baglanti-alani { max-width: none; }
.baglanti-denemesi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 4px; }
.deneme-sonucu { display: inline-flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 13px; line-height: 1.45; color: var(--gri-700); }
.deneme-sonucu:empty { display: none; }
.deneme-sonucu .simge { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.deneme-basari { color: var(--gri-900); }
.deneme-basari .simge { color: var(--basari); }
.deneme-uyari { color: var(--uyari-koyu); }
.deneme-hata { color: var(--hata-koyu); }
.vt-degistir > summary { width: fit-content; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--turkuaz-900); }
.vt-degistir > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.vt-degistir-icerik { display: grid; gap: 12px; margin-top: 10px; }
.yeni-firma { display: grid; gap: 16px; }
.yeni-firma > .form-eylemleri { margin: 0; }
@media (max-width: 767.98px) {
    .baglanti-denemesi > .dugme { width: 100%; }
}

/* ---------------------------------------------------------------- Değişiklik geçmişi (#11)
   Talep akışının dili: günlere gruplu, satır başına kim · işlem · kayıt · saat; altında "Etiket  eski → yeni" ızgarası. Eski
   değer soluk ve üstü çizili, yeni değer koyu. Genel ekranda süzgeçler tek satırda (dar alanda alt alta). */

.gecmis-sayfasi { display: grid; gap: 16px; max-width: 980px; }
.gecmis-sayfasi > .sayfa-basligi { margin-bottom: 0; }
.gecmis-suzgecleri { display: grid; grid-template-columns: repeat(2, minmax(0, 150px)) minmax(0, 200px) minmax(0, 200px) auto; align-items: end; gap: 8px 10px; }
.gecmis-baglantisi { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; text-underline-offset: 3px; }
.gecmis-baglantisi .simge { width: 14px; height: 14px; }
.akis.gecmis > li { padding: 10px 0; }
.gecmis-kaydi { color: var(--metin); font-weight: 600; overflow-wrap: anywhere; }
a.gecmis-kaydi { color: var(--marka-koyu); text-underline-offset: 3px; }
.gecmis-alanlari { display: grid; grid-template-columns: minmax(96px, max-content) minmax(0, 1fr); gap: 3px 14px; margin: 6px 0 0; font-size: 13px; }
.gecmis-alanlari > dt { color: var(--gri-700); }
.gecmis-alanlari > dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.gecmis-eski { color: var(--gri-700); text-decoration: line-through; text-decoration-color: var(--gri-500); }
.gecmis-ok { margin: 0 6px; color: var(--gri-500); }
.gecmis-yeni { color: var(--metin); font-weight: 600; }
.gecmis-uzun { display: inline; }
.gecmis-uzun > summary { display: inline; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.gecmis-uzun[open] > summary { display: none; }
.gecmis-tam { white-space: pre-line; }

@media (max-width: 767.98px) {
    .gecmis-suzgecleri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gecmis-suzgecleri > .dugme { grid-column: 1 / -1; }
    .gecmis-alanlari { grid-template-columns: minmax(0, 1fr); }
    .gecmis-alanlari > dd { margin-bottom: 4px; }
}

/* ---------------------------------------------------------------- SLA (#10)
   Listede tek çip (kalan / aştı / duraklatıldı / hedefte), kartta satır + ince çubuk. Renk durumun metnini yineler: sade
   (işliyor), uyarı (%80), kırmızı (aşım), gri (duraklatıldı), yeşil (tutturuldu). Çubuk aria-hidden; anlam satırdadır. */

.sla-cipi { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sla-cipi .simge { width: 12px; height: 12px; }
.talep-tablosu td:has(> .sla-cipi) { white-space: nowrap; }

.sla-durumu { display: grid; gap: 6px; }
.sla-satiri { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--gri-700); font-size: 13px; font-variant-numeric: tabular-nums; }
.sla-satiri .simge { width: 14px; height: 14px; flex: none; }
.sla-durumu.yaklasiyor .sla-satiri { color: var(--uyari-koyu); font-weight: 600; }
.sla-durumu:is(.asildi) .sla-satiri { color: var(--hata-koyu); font-weight: 600; }
.sla-durumu.tutturuldu .sla-satiri { color: var(--basari); }
.sla-durumu.sla-yok .sla-satiri { color: var(--metin-ikincil); }
.sla-cubugu { height: 6px; overflow: hidden; border-radius: 999px; background: var(--gri-200); }
.sla-cubugu > span { display: block; height: 100%; border-radius: inherit; background: var(--marka); transition: width 200ms ease-out; }
.sla-durumu.yaklasiyor .sla-cubugu > span { background: var(--uyari); }
.sla-durumu.asildi .sla-cubugu > span { background: var(--hata); }
.sla-durumu.duraklatildi .sla-cubugu > span { background: var(--gri-500); }
.talep-bilgileri + .sla-durumu, .grup-kart > .grup-baslik + .sla-durumu { margin-bottom: 4px; }

/* Ayarlar > SLA: geniş alanda iki sütun (hedefler + mesai | tatiller), dar alanda alt alta. */
.ayar-sayfasi { container: ayar-sayfasi / inline-size; display: grid; gap: 16px; }
.ayar-sayfasi > .sayfa-basligi { margin-bottom: 0; }
.sla-ayarlari { display: grid; gap: 16px; align-items: start; max-width: 1180px; }
@container ayar-sayfasi (min-width: 880px) {
    .sla-ayarlari { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.sla-hedefleri, .sla-mesai { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.sla-hedefleri > legend, .sla-mesai > legend { margin-bottom: 6px; padding: 0; color: var(--gri-700); font-size: 13px; font-weight: 600; }
.sla-hedef-satiri { display: grid; grid-template-columns: 92px 96px minmax(0, 120px); align-items: center; gap: 8px; }
.sla-hedef-satiri > label { display: flex; }
.sla-hedef-satiri > :is(input, select) { min-height: var(--kontrol); }
.mesai-saatleri { display: grid; grid-template-columns: repeat(2, minmax(0, 160px)); gap: 12px; }
.haplar.bitisik.gunler { grid-template-columns: repeat(7, minmax(0, 1fr)); max-width: 460px; }
.haplar.bitisik.gunler > .hap > span { padding: 0 2px; }

.tatil-ekle { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr) auto; align-items: end; gap: 8px 10px; }
.tatil-ekle > .validation-message { grid-column: 1 / -1; }
.resmi-tatiller { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gri-200); }
.resmi-tatiller > select.girdi { width: auto; min-width: 96px; }
.resmi-tatiller > .alan-ipucu { flex-basis: 100%; }
.tatil-yili { margin-top: 12px; }
.tatil-yili > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; font-variant-numeric: tabular-nums; }
.tatil-yili > summary .bant-ozeti { color: var(--gri-700); font-size: 12.5px; font-weight: 400; }
.tatil-listesi { margin: 6px 0 0; padding: 0; list-style: none; }
.tatil-listesi > li { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 40px; border-top: 1px solid var(--gri-200); }
.tatil-listesi > li:hover { background: var(--secim-100); }
.tatil-tarihi { font-variant-numeric: tabular-nums; }
.tatil-tarihi > span { color: var(--gri-700); font-size: 12.5px; }
.tatil-adi { overflow: hidden; color: var(--gri-700); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 767.98px) {
    .tatil-ekle { grid-template-columns: minmax(0, 1fr); }
    .tatil-listesi > li { grid-template-columns: minmax(0, 1fr) auto; min-height: 44px; }
    .tatil-adi { grid-column: 1; grid-row: 2; padding-bottom: 6px; }
    .tatil-listesi > li > .dugme-simge { grid-row: 1 / span 2; width: 44px; height: 44px; }
    .sla-hedef-satiri { grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .sla-cubugu > span { transition: none; }
}

/* ---------------------------------------------------------------- Talep ekleri (#9)
   Dosya seçici: JS'siz tarayıcının kendi dosya alanı; kabuk.js hazırlayınca (.hazir) "Fotoğraf çek" (yalnız dokunmatik) +
   "Dosya seç" düğmeleri ve seçilenlerin listesi. Girdi görünmez ama odaklanabilir kalır; odağı yanındaki düğme gösterir.
   Ek satırı: tür simgesi, ad, boyut; üzerine gelme lavanta (vurgu rengi seçim için kullanılmaz). Akışta notun altında yalın
   çipler, Ekler kartında ekleyen ve zamanla ayrıntılı satırlar. */

.ek-secici { display: grid; gap: 6px; min-width: 0; }
.ek-secici-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; }
.ek-secici:not(.hazir) :is(.ek-secici-dugmeler > .dugme, .ek-kamera-girdisi) { display: none; }
.ek-secici:not(.hazir) .ek-girdisi { max-width: 100%; font-size: 13px; }
.ek-secici.hazir .ek-girdisi {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); opacity: 0;
}
.ek-secici.hazir .ek-girdisi:focus-visible + .dugme { outline: 2px solid var(--marka-koyu); outline-offset: 2px; }
@media not all and (pointer: coarse) {
    .ek-secici :is(.ek-kamera-dugmesi, .ek-kamera-girdisi) { display: none; }
}
.ek-secici.gecersiz .ek-dosya-dugmesi { border-color: var(--hata); }
.ek-yeniden { color: var(--uyari-koyu); }
.ek-secilenler { display: grid; gap: 4px; margin: 2px 0 0; padding: 0; list-style: none; }
.ek-secilen {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 2px 2px 2px 10px;
    border: 1px solid var(--gri-300);
    border-radius: var(--kose);
    background: var(--beyaz);
    font-size: 13px;
}
.ek-secilen > .simge { width: 16px; height: 16px; color: var(--gri-700); }
.ek-secilen-adi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ek-secilen-boyutu { color: var(--gri-700); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ek-secilen-uyarisi { grid-column: 2 / -1; margin: -2px 0 4px; color: var(--hata-koyu); font-size: 12px; }
.ek-secilen.gecersiz { border-color: color-mix(in srgb, var(--hata) 55%, transparent); background: var(--hata-acik); }
.ek-secilen.gecersiz > .simge { color: var(--hata-koyu); }
.ek-secici-ozeti { margin: 0; color: var(--gri-700); font-size: 12px; font-variant-numeric: tabular-nums; }
.ek-secici-ozeti:empty { display: none; }
.ek-secici-ozeti.asildi { color: var(--hata-koyu); font-weight: 600; }

.ek-listesi { margin: 0; padding: 0; list-style: none; }
.ek-baglantisi {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    color: var(--metin);
    text-decoration: none;
}
.ek-baglantisi > .simge { width: 18px; height: 18px; color: var(--marka-koyu); }
.ek-adi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ek-boyutu { flex: none; color: var(--gri-700); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }
.ek-baglantisi:hover .ek-adi { text-decoration: underline; text-underline-offset: 3px; }
.ek-baglantisi:focus-visible { outline: 2px solid var(--marka-koyu); outline-offset: 2px; border-radius: 4px; }

/* Akışta: notun altında yalın çipler. */
.ek-listesi.yalin { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ek-listesi.yalin .ek-satiri { min-width: 0; max-width: 100%; }
.ek-listesi.yalin .ek-baglantisi {
    min-height: 32px;
    padding: 0 10px 0 8px;
    border: 1px solid var(--gri-300);
    border-radius: 6px;
    background: var(--beyaz);
    font-size: 13px;
}
.ek-listesi.yalin .ek-baglantisi:hover { background: var(--secim-100); border-color: var(--secim-500); }
.ek-listesi.yalin .ek-adi { max-width: 28ch; font-weight: 500; }

/* Ekler kartında: satır başına bir ek, altında ekleyen ve zaman; sağda pasife alma. */
.ekler-karti > .grup-baslik ~ * + * { margin-top: 12px; }
.ek-listesi.ayrintili .ek-satiri {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 4px;
    margin: 0 -8px;
    padding: 6px 8px;
    border-radius: 6px;
}
.ek-listesi.ayrintili .ek-satiri + .ek-satiri { border-top: 1px solid var(--gri-200); border-top-left-radius: 0; border-top-right-radius: 0; }
.ek-listesi.ayrintili .ek-satiri:hover { background: var(--secim-100); }
.ek-listesi.ayrintili .ek-baglantisi { grid-column: 1; min-height: 28px; }
.ek-bilgisi { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 0 0 0 26px; color: var(--gri-700); font-size: 12px; }
.ek-bilgisi a { color: inherit; text-underline-offset: 3px; }
.ek-bilgisi a:hover { color: var(--marka-koyu); }
.ek-satiri.pasif .ek-baglantisi { color: var(--gri-700); }
.ek-satiri.pasif .ek-baglantisi > .simge { color: var(--gri-500); }
.ek-satiri.pasif .ek-adi { font-weight: 500; text-decoration: line-through; text-decoration-color: var(--gri-500); }
.ek-pasif { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.ek-pasif > summary { list-style: none; color: var(--gri-700); }
.ek-pasif > summary::-webkit-details-marker { display: none; }
.ek-pasif > summary:hover, .ek-pasif[open] > summary { background: var(--hata-acik); color: var(--hata-koyu); }
.ek-pasif > summary .acikken, .ek-pasif[open] > summary .kapaliyken { display: none; }
.ek-pasif[open] > summary .acikken { display: contents; }
/* Açılınca satırın altında tam genişlikte onay şeridi: solda açıklama + düğme, sağda kapatma (özet, row-reverse). */
.ek-pasif[open] {
    grid-column: 1 / -1;
    grid-row: auto;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 6px 6px 6px 10px;
    border-radius: 6px;
    background: var(--hata-acik);
}
.ek-pasif[open] > summary { flex: none; background: transparent; }
.ek-pasif-onayi { display: flex; flex: 1; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; color: var(--hata-koyu); font-size: 12.5px; }
.ek-bos { margin: 0; color: var(--gri-700); font-size: 13px; }
.ek-formu { padding-top: 12px; border-top: 1px solid var(--gri-200); }
.gorunmez-form { display: none; }

@media (max-width: 767.98px) {
    /* Telefon: ek düğmeleri eşit iki sütun (başparmakla), satırlar en az 44 px. */
    .ek-secici.hazir .ek-secici-dugmeler { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
    .ek-listesi.ayrintili .ek-baglantisi { min-height: 44px; }
    .ek-listesi.yalin .ek-baglantisi { min-height: 40px; }
}

@media (max-width: 767.98px) {
    /* Telefon: durum düğmeleri iki sütun, tek düğme tam satır; formların düğmeleri tam genişlik (tek elle). */
    .durum-eylemleri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Tek düğme tam satır (formun gizli alanları da çocuk sayılır: :only-child değil, düğme kardeşi var mı). */
    .durum-eylemleri:not(:has(> .dugme ~ .dugme)) > .dugme { grid-column: 1 / -1; }
    .iptal-bolumu > summary { width: 100%; }
    .talep-sayfasi .form-eylemleri > .dugme { flex: 1 1 100%; }
    .haplar.bitisik.uclu { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sure-diger { animation: none !important; }
}

/* Ana sayfa (#80): TechnoIK boş ekranı gibi içerik bölmesinin ortasında soluk Sintek logosu ve altında ince ürün adı. Kaydırma
   kabının (.icerik) arka planı: içerikle birlikte kaymaz ve her zaman içeriğin arkasında çizilir (kartlar opak beyaz, okunurluk
   etkilenmez); dekordur, ekran okuyucuya gitmez. Masaüstünde en çok 620 px; telefonda bölmenin %70'i ve içeriğin sonunda (aşağıdaki telefon kuralı). */
.icerik:has(> .ana-sayfa) { background: url("img/sintek-filigran.svg") center / min(620px, 70%) auto no-repeat; }
.ana-sayfa > .bant { margin-bottom: 12px; }

/* ---------------------------------------------------------------- Faturalanacak (#21)
   Ana-detay: durum sekmeleri sayılı (bağlantı), listenin başında arama; kayıtta süre özeti, karar kartı ve notlar. Talep kartında
   kayıt başına tek satır (rozet, süre; yetkiliye tutar ve bağlantı). */
.liste-aramasi { display: flex; gap: 6px; padding: 8px 8px 2px; }
.liste-aramasi .girdi { flex: 1 1 auto; min-width: 0; }
.liste-aramasi .dugme { flex: none; padding-inline: 12px; }
.liste-bos { margin: 0; padding: 14px 14px 16px; color: var(--gri-700); font-size: 13px; }
.liste-sayfalari { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 10px; color: var(--gri-700); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.faturalanacak .secim-yan .rozet { white-space: nowrap; }
.faturalanacak .detay-basligi p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.sure-ozeti dd { font-variant-numeric: tabular-nums; }
.sure-ozeti .toplam { padding-top: 6px; border-top: 1px solid var(--gri-200); font-weight: 700; }
.sure-ozeti + .kart-aciklama { margin-top: 10px; }
.faturalanacak .kart-aciklama .simge { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
.faturalanacak .kart-bagi { display: flex; flex-wrap: wrap; gap: 0 18px; }
.tutar-satiri { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 140px); gap: 12px; align-items: start; }
.karar-formu { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gri-200); }
.karar-karti .iptal-bolumu { margin-top: 12px; }
.kisa-notlar { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.kisa-notlar > li { display: grid; gap: 4px; padding-bottom: 10px; border-bottom: 1px solid var(--gri-200); }
.kisa-notlar > li:last-child { padding-bottom: 0; border-bottom: 0; }
.kisa-not-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; color: var(--gri-700); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.kisa-not-sure { color: var(--metin); font-weight: 600; }
.kisa-not-metni { margin: 0; max-width: 72ch; overflow-wrap: anywhere; white-space: pre-line; font-size: 13.5px; }
.faturalanacak-kayitlari { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.faturalanacak-kayitlari > li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; font-variant-numeric: tabular-nums; }
.faturalanacak-kayitlari a { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; margin-left: auto; color: var(--marka-koyu); font-weight: 600; text-decoration: none; }
.faturalanacak-kayitlari a:hover { text-decoration: underline; text-underline-offset: 2px; }
.faturalanacak-kayitlari .simge { width: 14px; height: 14px; }
/* Talepte R / G (#77). */
.rg-durumu { margin: 0 0 4px; font-size: 14px; }
.rg-karti .kart-aciklama { margin: 0 0 10px; }
@container ana-detay (max-width: 719.98px) {
    .tutar-satiri { grid-template-columns: minmax(0, 1fr) minmax(0, 120px); }
}

/* ---------------------------------------------------------------- Hizmet dökümü (#22)
   Rapor parametreleri düz GET formu (özel aralık JS'siz :has ile açılır); özet kartları iki sütun (telefonda tek), süre dağılımı
   ince çubuklu satırlar; talepler gruplu, notlar faturalanacak ekranıyla aynı kısa not satırları. Vurgu Raporlar indigosu. */
.kart-sayfasi.dokum-sayfasi { max-width: 1040px; }
.dokum-formu { display: grid; gap: 12px; }
.dokum-formu > .alan { max-width: 520px; }
/* Sözleşme durum listesi (#78): süzgeçler yan yana sarar, dar alanda tek sütun; eylemler tam genişlik satırda. */
.durum-formu { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; align-items: start; }
.durum-formu > .form-eylemleri { grid-column: 1 / -1; }
.ozel-aralik { display: none; grid-template-columns: repeat(2, minmax(0, 180px)); gap: 10px; }
.dokum-formu:has(input[name="donem"][value="ozel"]:checked) .ozel-aralik { display: grid; }
.dokum-donemi { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--gri-700); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.dokum-donemi .simge { width: 16px; height: 16px; }
.ozet-izgarasi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ozet-buyuk { margin: 0; color: var(--marka-koyu); font-size: 28px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.oran-listesi { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.oran-listesi > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 13.5px; }
.oran-degeri { font-weight: 600; font-variant-numeric: tabular-nums; }
.oran-cubugu { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 999px; background: var(--gri-200); }
.oran-cubugu > span { display: block; height: 100%; border-radius: inherit; background: var(--vurgu); }
.dokum-talepleri .grup-baslik .bant-ozeti { margin-left: auto; font-size: 12.5px; font-weight: 400; font-variant-numeric: tabular-nums; }
.dokum-talebi { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--gri-200); }
.dokum-talebi:first-of-type { padding-top: 0; border-top: 0; }
.dokum-talep-basligi { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.dokum-talep-basligi h3 { flex: 1 1 260px; min-width: 0; margin: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.dokum-talep-basligi h3 a { color: var(--marka-koyu); font-variant-numeric: tabular-nums; }
.dokum-talep-suresi { font-weight: 700; font-variant-numeric: tabular-nums; }
.kisa-notlar.dokum-notlari, .dokum-talebi .kisa-notlar { padding-left: 12px; border-left: 2px solid var(--gri-200); }
.baslik-baglantisi { gap: 4px; }
.baslik-baglantisi .simge { width: 14px; height: 14px; }
@media (max-width: 767.98px) {
    .ozet-izgarasi { grid-template-columns: minmax(0, 1fr); }
    .ozel-aralik { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- Giriş ekranı (WPF LoginView) */

.giris-sayfasi {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-content: center;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: var(--giris-zemin);
}
.giris-marka {
    justify-self: end;
    display: grid;
    justify-items: center;
    max-width: 400px;
    text-align: center;
}
.giris-marka a { line-height: 0; border-radius: 8px; }
.giris-logo { width: 180px; height: auto; }
.giris-urun { margin-top: 26px; font-size: 28px; font-weight: 300; color: var(--giris-baslik); }
.giris-surum { margin-top: 4px; font-size: 11.5px; color: var(--giris-aciklama); }
.giris-telif { margin-top: 22px; font-size: 13px; line-height: 19px; color: var(--giris-aciklama); text-wrap: pretty; }
.giris-ayrac { width: 1px; align-self: stretch; background: var(--giris-ayrac); }
.giris-paneli { justify-self: start; width: 360px; display: grid; justify-items: center; }
.giris-kilit {
    position: relative;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin-bottom: 14px;
}
.giris-kilit::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--turkuaz-100);
    opacity: 0.7;
}
.giris-kilit .simge { position: relative; width: 30px; height: 30px; color: var(--marka); }
.giris-paneli h1 { font-size: 28px; font-weight: 700; color: var(--marka-koyu); }
.giris-alt-baslik { margin-top: 6px; font-size: 13px; color: var(--giris-aciklama); }
.giris-formu { width: 100%; margin-top: 24px; display: grid; gap: 12px; }
.giris-formu .dugme { min-height: 46px; margin-top: 6px; letter-spacing: 0.02em; }
.giris-formu .bant { margin-top: 2px; }
.giris-not { margin-top: 16px; font-size: 12.5px; color: var(--giris-aciklama); text-align: center; }
.giris-formu .giris-not { margin-top: -4px; }
.giris-cikis { margin-top: 18px; }

/* ---------------------------------------------------------------- Telefon (< 768 px) */

@media (max-width: 767.98px) {
    .ust-serit {
        grid-template-columns: auto 1fr;
        gap: 10px;
        min-height: 52px;
        padding: 6px 16px;
    }
    .donen-logo { height: 32px; }
    .urun-adi { font-size: 15px; }
    .urun-alt, .serit-orta, .oturum-kullanici, .cikis-formu { display: none; }
    .serit-sag { gap: 8px; }

    .kabuk { height: auto; min-height: 100dvh; grid-template-rows: auto 1fr; }
    .govde { grid-template-columns: minmax(0, 1fr); overflow: visible; }
    .icerik { overflow: visible; }
    .program-menusu, .alt-cubuk { display: none; }
    .icerik { padding: 18px 16px calc(84px + env(safe-area-inset-bottom)); }
    /* Ana sayfa filigranı (#80): telefonda kartlar bölmeyi doldurur; arkada kalınca kartların arasından parça parça görünürdü. Burada
       bölme kaymaz (sayfa kayar), filigran içeriğin sonunda, kartların altında durur (altta filigran yüksekliği kadar ek boşluk; telefon
       çubuğunun üstünde). */
    .icerik:has(> .ana-sayfa) {
        background-position: center bottom calc(96px + env(safe-area-inset-bottom));
        padding-bottom: calc(70% * 0.75 + 120px + env(safe-area-inset-bottom));
    }

    .telefon-cubugu {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 30;
        display: flex;
        justify-content: space-around;
        padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
        background: var(--beyaz);
        border-top: 1px solid var(--gri-200);
        box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.06);
    }
    .telefon-oge {
        position: relative;
        display: grid;
        justify-items: center;
        align-content: center;
        gap: 2px;
        flex: 1;
        max-width: 96px;
        min-height: 54px;
        padding: 4px 2px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--gri-700);
        font: inherit;
        font-size: 11px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
    }
    .telefon-oge .simge { width: 22px; height: 22px; }
    .telefon-oge:hover { color: var(--marka-koyu); background: var(--turkuaz-50); }
    .telefon-oge[aria-current="page"] { color: var(--marka-koyu); }
    .telefon-oge[aria-current="page"]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 30%;
        right: 30%;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: var(--vurgu);
    }

    .veri-tablosu { --hucre-x: 9px; }

    .giris-sayfasi {
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        gap: 0;
        padding: 28px 16px 24px;
    }
    .giris-marka { justify-self: center; order: 3; margin-top: 28px; }
    /* Ürün adı telefonda formun alt başlığında geçer, logo formun üstündedir: sol sütundan yalnız sürüm ve telif kalır. */
    .giris-marka > a, .giris-urun { display: none; }
    .giris-surum { margin-top: 0; }
    .giris-telif { margin-top: 10px; font-size: 12px; line-height: 17px; }
    .giris-ayrac { display: none; }
    .giris-paneli { justify-self: stretch; width: auto; order: 1; }
    .giris-mobil-logo { display: block !important; width: 128px; height: auto; margin-bottom: 18px; }
    .giris-kilit { display: none; }
    .giris-paneli h1 { font-size: 24px; }
}

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

/* Telefon menüsü: alttan açılan sayfa (popover — JS gerekmez) */
.telefon-menusu {
    inset: auto 0 0 0;
    width: 100%;
    max-width: none;
    max-height: 88dvh;
    margin: 0;
    padding: 0 0 env(safe-area-inset-bottom);
    border: 0;
    border-radius: 16px 16px 0 0;
    background: var(--beyaz);
    color: var(--metin);
    box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.2);
    overflow-y: auto;
}
.telefon-menusu::backdrop { background: rgba(15, 23, 42, 0.35); }
/* popover desteklemeyen eski tarayıcıda (iOS 16, Firefox < 125) sayfa akışına düşmesin. */
@supports not selector(:popover-open) {
    .telefon-menusu { display: none; }
    .telefon-menusu.acik { display: block; position: fixed; z-index: 40; } /* kabuk.js sınıfla açar */
}
.telefon-menusu:popover-open { animation: alttan-gel 220ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes alttan-gel { from { transform: translateY(24px); opacity: 0; } }
.telefon-menusu-baslik {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px 12px 16px;
    background: var(--giris-zemin);
    border-bottom: 1px solid var(--giris-ayrac);
}
.telefon-menusu-baslik .oturum-bilgi { flex: 1; text-align: left; }
.telefon-menusu-baslik .oturum-kullanici { display: block; }
.telefon-hesap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    margin-top: 2px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--marka-koyu);
    text-decoration: none;
}
.telefon-hesap .simge { width: 14px; height: 14px; }
.telefon-menusu .menu-agaci { padding: 10px 12px; }
.telefon-menusu .menu-oge { min-height: 44px; font-size: 14px; }
.telefon-menusu .menu-grup-dugmesi { min-height: 44px; font-size: 14px; }
.telefon-menusu-alt { display: grid; gap: 12px; padding: 12px 16px 16px; border-top: 1px solid var(--gri-200); }
.telefon-menusu-alt .dugme { width: 100%; }
.telefon-menusu-alt .kucuk { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; color: var(--gri-700); }
/* Masaüstü alt çubuğundaki gibi: bağlantı görünümü değişmez (standart: firma bağlantıları). */
.telefon-menusu-alt .kucuk a { color: inherit; text-decoration: none; }

/* ---------------------------------------------------------------- Blazor hata ve yeniden bağlanma */

#blazor-error-ui {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1000;
    display: none; /* blazor.web.js hata olunca "block" yapar; yerleşim içteki .hata-cubugu'da */
    background: var(--hata-acik);
    color: var(--hata-koyu);
    border-top: 1px solid var(--hata);
    font-size: 13px;
}
.hata-cubugu { display: flex; align-items: center; gap: 12px; padding: 10px 22px; }
.hata-cubugu > .simge { width: 16px; height: 16px; }
.hata-cubugu .dismiss { margin-left: auto; color: var(--hata-koyu); }

.blazor-error-boundary {
    padding: 12px 16px;
    border-radius: 4px;
    background: var(--hata-acik);
    color: var(--hata-koyu);
}
.blazor-error-boundary::after { content: "Bu bölüm yüklenirken bir hata oluştu."; }

/* ---------------------------------------------------------------- Stil örnekleri (yalnız geliştirme) */

.ornek-satir { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.menu-ornekleri { display: flex; flex-wrap: wrap; gap: 16px; align-items: start; }
.menu-ornegi { width: min(100%, var(--menu-genis)); border: 1px solid var(--gri-200); border-radius: 8px; background: var(--beyaz); }
.menu-ornegi.telefon-menusu { position: static; width: min(100%, 375px); border-radius: 16px; box-shadow: none; }
.ornek-yigin { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

/* ---------------------------------------------------------------- Sekme kabuğu (#81)
   Ekranlar içerik bölmesinde sekmelerde açılır; her sekme aynı kökenden bir çerçevedir (sekmeler.js). Sekme başlığı Sintek sekme
   standardındadır (.sekme): seçili sekme kendi menü grubunun vurgusunun %18'i + 5 px alt çizgi; grup dışı ekran marka turkuazı.
   Gizlenen sekme görünmez olur ama yerleşimi kalır (display:none değil): içindeki kaydırma ve yazılan korunur. */

/* Çerçevenin içi: kabuksuz sayfa yalnız içeriktir. */
.kabuk.kabuksuz { grid-template-rows: minmax(0, 1fr); }
.kabuk.kabuksuz > .icerik { min-height: 0; }
/* Çerçeve isteği işaretini göndermeyen eski tarayıcıda sayfa kabuklu gelir: kabuk burada gizlenir. */
html.cercevede .kabuk:not(.kabuksuz) { grid-template-rows: minmax(0, 1fr); }
html.cercevede .kabuk:not(.kabuksuz) > :is(.atla, .ust-serit, .alt-cubuk, .telefon-cubugu),
html.cercevede .kabuk:not(.kabuksuz) .program-menusu { display: none; }
html.cercevede .kabuk:not(.kabuksuz) .govde { grid-template-columns: minmax(0, 1fr); }

.kabuk.sekmeli .govde { overflow: clip; }

/* Açılışta sayfa sekmeye taşınana dek tek sayfa içeriği görünmez (bir an görünüp kaybolmasın). */
html.sekme-acilisi .kabuk[data-sekmeli] .icerik { visibility: hidden; }

.sekme-alani {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr); /* çok sekmede şerit taşmasın, kendi içinde kaysın */
    min-width: 0;
    min-height: 0;
    overflow: clip; /* odak ya da kaydırma gövdeyi yatay kaydıramasın */
}

.sekme-seridi {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding: 8px clamp(16px, 3vw, 32px) 0;
    background: var(--beyaz);
    border-bottom: 1px solid var(--gri-200);
}
.kabuk-sekmeleri { flex: 1 1 auto; min-width: 0; border-bottom: 0; }
/* Çok sekmede şerit kayar: fareyle de ulaşılsın diye ince kaydırma çubuğu (ekran içi sekme şeritlerinde gizli). */
.kabuk-sekmeleri { scrollbar-width: thin; scrollbar-color: var(--gri-300) transparent; }
.sekmeleri-kapat { flex: none; margin-bottom: 6px; }
.kabuk-sekme { padding: 0; gap: 0; }
.kabuk-sekme:not([data-vurgu]), .sekme-secici:not([data-vurgu]), .sekme-listesi-ogesi:not([data-vurgu]) { --vurgu: var(--marka); }
.kabuk-sekme-dugmesi {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 300px;
    padding: 9px 16px;
    border: 0;
    border-radius: 8px 8px 0 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.kabuk-sekme-dugmesi .simge { flex: none; }
.kabuk-sekme-adi { overflow: hidden; text-overflow: ellipsis; }
/* Kayıt adı (#82): ekran adının yanında, daha ince; sığmazsa üç noktayla kısalır (tam başlık balon bilgide). */
.kabuk-sekme-kayit { min-width: 0; max-width: 150px; margin-left: -4px; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.kabuk-sekme-kayit::before { content: "· "; }
.kabuk-sekme:has(.kabuk-sekme-kayit) .kabuk-sekme-adi { flex: none; }
.kabuk-sekme:has(.sekme-kapat) .kabuk-sekme-dugmesi { padding-right: 4px; }
.kabuk-sekme .sekme-kapat { width: 24px; height: 24px; margin-right: 8px; color: var(--gri-700); }
.kabuk-sekme .sekme-kapat .simge { width: 14px; height: 14px; }
.kabuk-sekme .sekme-kapat:hover { background: color-mix(in srgb, var(--vurgu) 30%, var(--beyaz)); color: var(--marka-koyu); }

.sekme-panelleri { position: relative; min-height: 0; }
.sekme-paneli { position: absolute; inset: 0; visibility: hidden; }
.sekme-paneli.etkin { visibility: visible; }
.sekme-cercevesi { display: block; width: 100%; height: 100%; border: 0; background: var(--zemin); }

/* Sınır uyarısı: içeriğin üstünde, şeridin altında; yerleşimi oynatmaz. */
.sekme-uyarisi {
    position: absolute;
    top: 54px;
    right: clamp(16px, 3vw, 32px);
    z-index: 5;
    max-width: min(440px, calc(100% - 32px));
    margin: 0;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
}
.sekme-uyarisi.gorunmez { box-shadow: none; }

/* Telefon: şerit yerine açılır liste. */
.sekme-secici { display: none; }
.sekme-listesi {
    inset: var(--sekme-listesi-ust, 104px) 12px auto 12px;
    width: auto;
    max-height: calc(100dvh - var(--sekme-listesi-ust, 104px) - 88px);
    margin: 0;
    padding: 8px;
    border: 1px solid var(--gri-200);
    border-radius: 12px;
    background: var(--beyaz);
    color: var(--metin);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    overflow-y: auto;
}
.sekme-listesi::backdrop { background: rgba(15, 23, 42, 0.2); }
@supports not selector(:popover-open) {
    .sekme-listesi { display: none; }
    .sekme-listesi.acik { display: block; position: fixed; z-index: 40; } /* kabuk.js sınıfla açar */
}
.sekme-listesi-ogeleri { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 0; padding: 0; list-style: none; }
.sekme-listesi-ogesi { display: flex; align-items: center; border-radius: 8px; }
.sekme-listesi-ogesi:not(.secili):hover { background: var(--turkuaz-50); }
.sekme-listesi-ogesi.secili { background: color-mix(in srgb, var(--vurgu) 18%, var(--beyaz)); box-shadow: inset 4px 0 0 var(--vurgu); }
.sekme-listesi-sec {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 44px;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    color: var(--marka-koyu);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.sekme-listesi-sec .simge { flex: none; width: 18px; height: 18px; }
.sekme-listesi-sec span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sekme-listesi-ogesi .sekme-kapat { width: 40px; height: 40px; flex: none; margin-right: 2px; color: var(--gri-700); }
.sekme-listesi > .dugme { width: 100%; margin-top: 8px; }

@media (max-width: 767.98px) {
    /* Sabit yükseklikli uygulama çerçevesi: sayfa değil sekmenin içi kayar. Çerçeve telefon çubuğunun arkasına uzanır; kabuksuz sayfa
       altta çubuk kadar boşluk bırakır. */
    .kabuk.sekmeli { height: 100vh; height: 100dvh; grid-template-rows: auto minmax(0, 1fr); }
    .kabuk.sekmeli .govde { overflow: clip; }
    .sekme-seridi { display: none; }
    .sekme-secici {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-height: 46px;
        padding: 8px 16px;
        border: 0;
        border-bottom: 1px solid var(--gri-200);
        background: color-mix(in srgb, var(--vurgu) 18%, var(--beyaz));
        box-shadow: inset 0 -3px 0 var(--vurgu);
        color: var(--bant-metni);
        font: inherit;
        font-size: 14px;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
    }
    .sekme-secici .simge { flex: none; width: 18px; height: 18px; }
    .sekme-secici-adi { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sekme-secici .sekme-sayisi { background: var(--beyaz); color: var(--bant-metni); }
    .sekme-uyarisi { top: 54px; right: 16px; left: 16px; max-width: none; }
}

/* ---------------------------------------------------------------- Ana sayfa panosu (#83)
   Kartlar Sintek grup kartıdır (vurgu menü grubundan). Ana sayı ve her alt satır kendi süzülmüş listesine açılır; üzerine gelme ve odak
   lavanta (seçim rengi, veri anlamı taşımaz). Dikkat sayıları yalnız sıfırdan büyükken hap içinde uyarı/hata tonunda; sıfırlar sakin. */
.pano-basligi { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.pano-basligi > div:first-child { display: grid; gap: 4px; }
.pano-yenile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pano-zamani { color: var(--gri-700); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.pano {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
    align-items: start;
    gap: 16px;
    margin-bottom: 16px;
}
.pano-karti { display: grid; }
.pano-ana {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-height: 52px;
    margin: -2px -8px 6px;
    padding: 4px 8px;
    border-radius: 8px;
    color: var(--metin);
    text-decoration: none;
}
.pano-sayi { color: var(--marka-koyu); font-size: 34px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pano-sayi-metin { font-size: 20px; white-space: nowrap; }
.pano-etiket { color: var(--gri-700); font-size: 13.5px; }
.pano-ana.pano-dikkat-hata .pano-sayi { color: var(--hata-koyu); }

.pano-satirlari { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--gri-200); }
.pano-satirlari > li:not(:last-child) { border-bottom: 1px solid var(--gri-200); }
.pano-satiri {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    margin: 0 -8px;
    padding: 0 8px;
    border-radius: 6px;
    color: var(--metin);
    font-size: 13.5px;
    text-decoration: none;
}
.pano-satir-sayisi {
    min-width: 2.5ch;
    padding: 1px 8px;
    border-radius: 999px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.pano-sifir { color: var(--gri-700); }
.pano-sifir .pano-satir-sayisi { color: var(--gri-500); font-weight: 600; }
.pano-dikkat-hata .pano-satir-sayisi { background: var(--hata-acik); color: var(--hata-koyu); }
.pano-dikkat-uyari .pano-satir-sayisi { background: var(--uyari-acik); color: var(--uyari-koyu); }
:is(.pano-ana, .pano-satiri):hover { background: var(--secim-100); }
:is(.pano-ana, .pano-satiri):hover :is(.pano-etiket, .pano-satir-etiketi) { text-decoration: underline; text-underline-offset: 3px; }
:is(.pano-ana, .pano-satiri):focus-visible { outline: 2px solid var(--marka-koyu); outline-offset: 1px; }

/* Üst şeritteki pano düğmesi: yalnız simge, basılıyken (pano açık) turkuaz zemin. */
.dugme-serit-simge { justify-content: center; width: 28px; padding: 0; }
.dugme-serit-simge .simge { width: 15px; height: 15px; }
.dugme-serit[aria-pressed="true"] { background: var(--turkuaz-50); border-color: var(--marka); color: var(--marka-koyu); }
.pano-ana.pano-dikkat-uyari .pano-sayi { color: var(--uyari-koyu); }
/* Telefonda şeritte tek düğme pano düğmesidir: dokunma hedefi 44 px. */
@media (max-width: 767.98px) {
    .dugme-serit-simge { width: 44px; height: 44px; }
    .dugme-serit-simge .simge { width: 18px; height: 18px; }
}