/* Yazı tipi: Plus Jakarta Sans (SIL OFL 1.1, fonts/OFL.txt), uygulamaya gömülü. */
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =====================================================================
   Renkler (arayüz yenilemesi Faz 1, 04.11.2026). Kurallarda sabit renk yazılmaz, aşağıdaki adlar kullanılır:
   koyu tema yalnızca bu adların değerini değiştirir.
   - Tema kullanıcının: <html data-tema="acik|koyu|sistem"> (sistem: işletim sisteminin ayarı).
   - Ana renk firmanın: <html data-vurgu="mavi|lacivert|..."> → --ana (düğme, açık temada bağlantı) ve --ana-acik
     (koyu temada bağlantı). Durum renkleri (iyi/uyarı/hata ...) anlam taşır, firmaya göre değişmez.
   ===================================================================== */
:root, :root[data-vurgu="mavi"] { --ana: #0077be; --ana-acik: #5bb8f2; }
:root[data-vurgu="lacivert"] { --ana: #1d4ed8; --ana-acik: #8db4ff; }
:root[data-vurgu="turkuaz"] { --ana: #0f766e; --ana-acik: #4fd1c5; }
:root[data-vurgu="yesil"] { --ana: #15803d; --ana-acik: #5fd38d; }
:root[data-vurgu="mor"] { --ana: #6d28d9; --ana-acik: #b69cff; }
:root[data-vurgu="bordo"] { --ana: #9f1239; --ana-acik: #ff8fab; }
:root[data-vurgu="grafit"] { --ana: #374151; --ana-acik: #c3cad5; }

:root {
    --zemin: #f3f6fa;
    --kart: #ffffff;           /* kart, kutu, tablo zemini */
    --yuzey-2: #f6f8fb;        /* tablo başlığı, hafif ayrışan zemin */
    --girdi: #ffffff;          /* form alanı zemini */
    --metin: #0f1a2b;
    --metin-2: #3d4a5c;        /* alan etiketi */
    --soluk: #5a6a80;
    --cizgi: #e0e6ee;
    --cizgi-koyu: #cdd5e0;
    --menu-zemin: #f9fbfd;

    --birincil: var(--ana);    /* düğme zemini (beyaz yazı) */
    --birincil-ust: color-mix(in srgb, var(--ana) 82%, #000);
    --vurgu: var(--ana);       /* bağlantı, odak, seçili */
    --vurgu-yazi: color-mix(in srgb, var(--ana) 85%, #000);
    --vurgu-koyu: var(--vurgu-yazi);
    --vurgu-zemin: color-mix(in srgb, var(--vurgu) 11%, var(--kart));

    --yesil: #59b7b3;          /* onay düğmesi (koyu yazı) */
    --yesil-koyu: #1a5269;
    --bilgi-zemin: #e2f4f3;  --bilgi-metin: #1a5269;  --bilgi-cizgi: #c3e6e4;
    --uyari-zemin: #fff3e0;  --uyari-metin: #8a4b08;  --uyari-cizgi: #f0cf9a;  --uyari: #b45309;  --turuncu: #f0a020;
    --hata: #c0352b;         --hata-zemin: #fde8e7;   --hata-cizgi: #f3c4bf;   --hata-dolgu: #c0352b;
    --iyi: #1d6b3a;          --iyi-zemin: #e8f5ec;
    --mor: #5b3fc4;          --mor-zemin: #ede9fe;
    --pembe: #9d174d;        --pembe-zemin: #fce7f3;
    --mavi: #0369a1;         --mavi-zemin: #e0f2fe;
    --notr: #4b5560;         --notr-zemin: #eef1f4;
    --golge: 0 1px 2px rgba(15, 26, 43, .05), 0 6px 20px rgba(15, 26, 43, .05);
    --golge-buyuk: 0 24px 64px rgba(15, 26, 43, .22);
    --perde: rgba(15, 26, 43, .45);

    --menu: #14181c;           /* giriş ekranı ve bayi portalı menüsü */
    --menu-metin: #9aa3ab;
    --yaricap: 10px;
    --menu-genislik: 252px;
    --ray-genislik: 68px;
    --egri: cubic-bezier(.2, .8, .2, 1);
    color-scheme: light;
}
:root[data-tema="koyu"] {
    --zemin: #0b111a; --kart: #121a26; --yuzey-2: #172131; --girdi: #0f1621; --menu-zemin: #0e1520;
    --metin: #e4ebf5; --metin-2: #c2cddb; --soluk: #95a4b8; --cizgi: #233145; --cizgi-koyu: #31435c;
    --vurgu: var(--ana-acik); --vurgu-yazi: var(--ana-acik); --birincil-ust: color-mix(in srgb, var(--ana) 80%, #fff);
    --yesil-koyu: #7fd8d4;
    --bilgi-zemin: #0e3337; --bilgi-metin: #7fd8d4; --bilgi-cizgi: #1d5257;
    --uyari-zemin: #3a2a10; --uyari-metin: #f2b75e; --uyari-cizgi: #6b4a17; --uyari: #f2b75e;
    --hata: #ff8576; --hata-zemin: #3d1814; --hata-cizgi: #6e2a22;
    --iyi: #4cc995; --iyi-zemin: #103223; --mor: #b8a4ff; --mor-zemin: #2a2150; --pembe: #f59ac4; --pembe-zemin: #3d1630;
    --mavi: #7cc4f5; --mavi-zemin: #0f2a40; --notr: #a5b3c6; --notr-zemin: #1d2737;
    --golge: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25); --golge-buyuk: 0 24px 64px rgba(0, 0, 0, .55);
    --perde: rgba(0, 0, 0, .6);
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    :root[data-tema="sistem"] {
        --zemin: #0b111a; --kart: #121a26; --yuzey-2: #172131; --girdi: #0f1621; --menu-zemin: #0e1520;
        --metin: #e4ebf5; --metin-2: #c2cddb; --soluk: #95a4b8; --cizgi: #233145; --cizgi-koyu: #31435c;
        --vurgu: var(--ana-acik); --vurgu-yazi: var(--ana-acik); --birincil-ust: color-mix(in srgb, var(--ana) 80%, #fff);
        --yesil-koyu: #7fd8d4;
        --bilgi-zemin: #0e3337; --bilgi-metin: #7fd8d4; --bilgi-cizgi: #1d5257;
        --uyari-zemin: #3a2a10; --uyari-metin: #f2b75e; --uyari-cizgi: #6b4a17; --uyari: #f2b75e;
        --hata: #ff8576; --hata-zemin: #3d1814; --hata-cizgi: #6e2a22;
        --iyi: #4cc995; --iyi-zemin: #103223; --mor: #b8a4ff; --mor-zemin: #2a2150; --pembe: #f59ac4; --pembe-zemin: #3d1630;
        --mavi: #7cc4f5; --mavi-zemin: #0f2a40; --notr: #a5b3c6; --notr-zemin: #1d2737;
        --golge: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25); --golge-buyuk: 0 24px 64px rgba(0, 0, 0, .55);
        --perde: rgba(0, 0, 0, .6);
        color-scheme: dark;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--metin);
    background: var(--zemin);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--vurgu); }

.ust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    background: var(--kart);
    border-bottom: 1px solid var(--cizgi);
}
.ust .marka { font-weight: 700; text-decoration: none; color: var(--metin); }
.ust nav { display: flex; gap: 14px; flex: 1; }
.ust nav a { text-decoration: none; }
.ust .oturum { display: flex; align-items: center; gap: 12px; color: var(--soluk); }
.ust .oturum form { margin: 0; }
.aktif-firma { font-weight: 600; }

.kart {
    max-width: 1100px;
    margin: 24px auto;
    padding: 20px 24px;
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: 8px;
}
.kart.dar { max-width: 520px; }
.kart.orta { max-width: 760px; }

.etiket { display: inline-block; margin-left: 6px; padding: 1px 6px; font-size: 11px; border-radius: 4px; background: var(--zemin); color: var(--soluk); }
.soluk { color: var(--soluk); }
.tablo-kaydir { overflow-x: auto; }
table.atama { margin-top: 4px; }
table.atama th, table.atama td { padding: 6px 8px; }
.orta-hiza { text-align: center; }
td.eksi { color: var(--hata); font-weight: 600; }
input[type=email] { width: 100%; padding: 8px 10px; font: inherit; border: 1px solid var(--cizgi); border-radius: 6px; }
.giris-sayfasi .kart { margin-top: 12vh; }

h1 { font-size: 22px; margin: 0 0 16px; }
h1 small { font-size: 13px; font-weight: 400; color: var(--soluk); }
h2 { font-size: 17px; margin: 24px 0 4px; }
h3 { font-size: 14px; margin: 12px 0 6px; color: var(--soluk); }

.baslik-satiri { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.baslik-satiri h1 { margin: 0; }

label { display: block; margin: 12px 0 4px; font-weight: 600; }
label.onay { display: flex; align-items: baseline; gap: 8px; font-weight: 400; margin: 6px 0; }
label.onay small { color: var(--soluk); }

input[type=text], input[type=password], input[type=search], select {
    width: 100%;
    padding: 8px 10px;
    font: inherit;
    border: 1px solid var(--cizgi);
    border-radius: 6px;
}

fieldset { margin: 16px 0; border: 1px solid var(--cizgi); border-radius: 6px; padding: 8px 14px 14px; }
legend { font-weight: 600; padding: 0 4px; }

button, .dugme {
    display: inline-block;
    padding: 8px 16px;
    font: inherit;
    color: #fff;
    background: var(--birincil);
    border: 0;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
}
button.baglanti { background: none; color: var(--vurgu); padding: 0; }
form > button { margin-top: 16px; }
.ust .oturum form > button { margin-top: 0; }

.dugmeler { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.dugmeler button { margin: 0; }

.arama { display: flex; gap: 8px; }
.arama input { width: 260px; }
.arama button { margin: 0; }

table { width: 100%; border-collapse: collapse; margin-top: 16px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--cizgi); }
th { font-size: 13px; color: var(--soluk); font-weight: 600; }
.sayi { text-align: right; font-variant-numeric: tabular-nums; }

.sayfalama { display: flex; gap: 16px; justify-content: flex-end; margin-top: 12px; color: var(--soluk); }

.bilgi, .uyari { padding: 10px 12px; border-radius: 6px; }
.bilgi { background: var(--bilgi-zemin); color: var(--bilgi-metin); }
.uyari { background: var(--uyari-zemin); color: var(--uyari-metin); }
.alan-hatasi { color: var(--hata); margin: 4px 0 0; font-size: 13px; }
.ipucu { color: var(--soluk); font-size: 13px; margin: 4px 0; }

@media (max-width: 640px) {
    .kart { margin: 12px; padding: 16px; }
    .arama input { width: 100%; }
    table { display: block; overflow-x: auto; }
}

/* Cari ekranları */
.iki-sutun { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
textarea { width: 100%; padding: 8px 10px; font: inherit; border: 1px solid var(--cizgi); border-radius: 6px; }
.arama.filtre { flex-wrap: wrap; margin-top: 12px; }
.arama.filtre select { width: auto; }
dl.bilgiler { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 8px 0 16px; }
dl.bilgiler dt { color: var(--soluk); }
dl.bilgiler dd { margin: 0; }
.notlar { white-space: pre-wrap; background: var(--zemin); padding: 10px 12px; border-radius: 6px; }
details { margin: 12px 0; }
details summary { cursor: pointer; color: var(--vurgu); }
.etiket.durum-MUSTERI { background: var(--bilgi-zemin); color: var(--bilgi-metin); }
.etiket.durum-ADAY { background: var(--uyari-zemin); color: var(--uyari-metin); }

/* Sipariş ekranları */
button.ikincil { background: var(--bilgi-metin); }
button.tehlike { background: var(--hata-dolgu); }
.dugmeler form { margin: 0; }
.dugmeler form button { margin: 0; }
.sekmeler { display: flex; flex-wrap: wrap; gap: 4px; margin: 12px 0 0; }
.sekmeler a { padding: 6px 10px; border-radius: 6px; text-decoration: none; background: var(--zemin); }
.sekmeler a.secili { background: var(--birincil); color: #fff; }
.sonuclar { list-style: none; margin: 4px 0 0; padding: 0; border: 1px solid var(--cizgi); border-radius: 6px; max-height: 280px; overflow-y: auto; }
.sonuclar:empty { display: none; }
.sonuclar li { border-bottom: 1px solid var(--cizgi); }
.sonuclar li:last-child { border-bottom: 0; }
.sonuclar li.soluk { padding: 10px 12px; }
button.sonuc { display: block; width: 100%; text-align: left; background: none; color: var(--metin); padding: 12px; border-radius: 0; }
button.sonuc:hover, button.sonuc:focus { background: var(--zemin); }
button.sonuc small { color: var(--soluk); }
.secili { padding: 10px 12px; background: var(--zemin); border-radius: 6px; }
.satirlar { display: grid; gap: 10px; margin-top: 12px; }
.satir { border: 1px solid var(--cizgi); border-radius: 8px; padding: 10px 12px; }
.satir-baslik { display: flex; gap: 6px; align-items: baseline; }
.satir-baslik .sil { margin-left: auto; }
.satir-bilgi { font-size: 13px; margin: 4px 0 8px; }
.satir-alanlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; align-items: end; }
.satir-alan { margin: 0; font-weight: 400; font-size: 13px; color: var(--soluk); }
.satir-alan input { width: 100%; padding: 10px; font: inherit; font-size: 16px; border: 1px solid var(--cizgi); border-radius: 6px; color: var(--metin); }
.satir-toplam { display: flex; flex-direction: column; text-align: right; }
.fiyat-farki { font-size: 13px; color: var(--uyari-metin); }
.fiyat-farki:empty { display: none; }
.satir.fiyat-degisti, tr.fiyat-degisti { background: var(--uyari-zemin); border-color: var(--turuncu); }
td.vurgu { color: var(--uyari-metin); font-weight: 600; }
.stok-uyari { font-size: 13px; color: var(--hata); margin-top: 4px; }
.etiket.dikkat { background: var(--uyari-zemin); color: var(--uyari-metin); }
.dikkat-kutu { border-left: 4px solid var(--turuncu); }
.etiket.siparis-ONAY_BEKLIYOR { background: var(--uyari-zemin); color: var(--uyari-metin); }
.etiket.siparis-ONAYLANDI { background: var(--bilgi-zemin); color: var(--bilgi-metin); }
.etiket.siparis-REDDEDILDI, .etiket.siparis-IPTAL { background: var(--hata-zemin); color: var(--hata); }
dl.toplamlar { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; max-width: 320px; margin: 16px 0 0 auto; }
dl.toplamlar dt { color: var(--soluk); }
dl.toplamlar dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.onay-paneli { border: 2px solid var(--vurgu); border-radius: 8px; padding: 4px 16px 16px; margin-top: 20px; }
ul.gecmis { list-style: none; padding: 0; }
ul.gecmis li { padding: 4px 0; border-bottom: 1px solid var(--cizgi); }

/* Dar ekranda tablolar karta dönüşür (data-baslik etiket olur). */
@media (max-width: 640px) {
    table.mobil-kart { display: block; }
    table.mobil-kart thead { display: none; }
    table.mobil-kart tbody, table.mobil-kart tr, table.mobil-kart td { display: block; width: 100%; }
    table.mobil-kart tr { border: 1px solid var(--cizgi); border-radius: 8px; margin-bottom: 10px; padding: 6px 10px; }
    table.mobil-kart td { border: 0; padding: 4px 0; text-align: left; }
    table.mobil-kart td::before { content: attr(data-baslik) ": "; color: var(--soluk); font-size: 13px; }
    .ust nav { order: 3; width: 100%; flex-wrap: wrap; }
    .dugmeler { flex-wrap: wrap; }
    .dugmeler button, .dugmeler .dugme { flex: 1 1 100%; text-align: center; padding: 12px; }
    dl.toplamlar { max-width: none; }
}
.logo-onizleme { max-width: 240px; max-height: 100px; border: 1px solid var(--cizgi); padding: 6px; background: var(--kart); }

/* Ödeme tablosu */
.odeme-satiri { display: grid; grid-template-columns: auto minmax(140px, 2fr) minmax(140px, 1.5fr) minmax(140px, 1.5fr); gap: 8px; align-items: end; margin: 8px 0; }
.odeme-satiri.pesinat { grid-template-columns: minmax(160px, 2fr) minmax(140px, 1.5fr) minmax(140px, 1.5fr); }
.odeme-satiri select, .odeme-satiri input[type=date] { width: 100%; padding: 9px 10px; font: inherit; font-size: 16px; border: 1px solid var(--cizgi); border-radius: 6px; }
.girdi-dugme { display: flex; gap: 6px; }
.girdi-dugme input { flex: 1; }
button.kucuk { padding: 6px 10px; font-size: 13px; margin: 0; }
.uyari-metin { color: var(--hata); font-weight: 600; }
@media (max-width: 640px) {
    .odeme-satiri, .odeme-satiri.pesinat { grid-template-columns: 1fr 1fr; }
    .odeme-satiri > button { grid-column: 1 / -1; justify-self: end; }
}
.notlar.ic { border-left: 4px solid var(--vurgu); }
form.satir-ici { display: inline-flex; gap: 6px; margin-left: 12px; } form.satir-ici input { width: 90px; padding: 4px 6px; }
.toplu-panel { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 0; padding: 10px 12px; background: var(--zemin); border-radius: 6px; } .toplu-panel select { width: auto; }
pre.ornek { background: var(--zemin); padding: 10px 12px; border-radius: 6px; overflow-x: auto; } tr.sorunlu { background: var(--hata-zemin); }

/* Tutarın solunda küçük renkli işaret; açıklama üzerine gelince (dokununca) çıkar. */
.isaret { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; cursor: help; background: var(--soluk); }
.isaret.dikkat { background: var(--turuncu); }
.isaret.bilgi { background: var(--mavi); }
.isaret:hover::after, .isaret:focus::after { content: attr(data-ipucu); position: absolute; right: 0; bottom: 140%; white-space: nowrap; background: #222; color: #fff; font-size: 12px; padding: 3px 7px; border-radius: 4px; z-index: 10; }
.isaret:focus { outline: none; }

/* Kargo / teslim durumları */
.etiket.teslim-KARGODA, .etiket.gonderi-YOLDA { background: var(--uyari-zemin); color: var(--uyari-metin); }
.etiket.teslim-TESLIM_EDILDI, .etiket.gonderi-TESLIM_EDILDI { background: var(--bilgi-zemin); color: var(--bilgi-metin); }
.etiket.teslim-TESLIM_EDILMEDI, .etiket.gonderi-TESLIM_EDILMEDI { background: var(--hata-zemin); color: var(--hata); }

/* Sipariş ekranından açılan yeni müşteri / adres penceresi */
dialog.pencere { width: min(860px, 96vw); height: min(90vh, 900px); padding: 0; border: 1px solid var(--cizgi); border-radius: 8px; }
dialog.pencere::backdrop { background: rgba(0, 0, 0, .35); }
dialog.pencere iframe { width: 100%; height: 100%; border: 0; }

/* =====================================================================
   Tema "karma" — genel görünüm. Önceki kuralların üzerine yazar.
   ===================================================================== */

/* Yerleşim: masaüstünde sabit sol menü, telefonda üstte açılır menü */
body:has(> header.ust) { padding-left: var(--menu-genislik); }
.ust {
    position: fixed; inset: 0 auto 0 0; width: var(--menu-genislik); z-index: 20;
    display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0;
    padding: 18px 14px; background: var(--menu); color: var(--menu-metin); border: 0;
    overflow-y: auto;
}
.ust-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.ust .marka { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: 16px; letter-spacing: .2px; text-decoration: none; }
.ust .marka .nokta { width: 10px; height: 10px; border-radius: 50%; background: var(--yesil); box-shadow: 0 0 0 4px rgba(89,183,179,.18); }
.menu-dugme { display: none; background: none; border: 0; color: #fff; padding: 6px; margin: 0; }
.ust nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.ust nav a {
    display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 9px;
    color: var(--menu-metin); text-decoration: none; font-size: 14px; font-weight: 500;
}
.ust nav a svg { width: 19px; height: 19px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ust nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.ust nav a.aktif { background: rgba(0,119,190,.22); color: #fff; }
.ust nav a.aktif svg { color: #5bb8f2; }
/* Açılır menü grupları: başlık diğer menü bağlantılarıyla aynı görünür, alt öğeler hemen altında açılır */
.ust nav .grup {
    display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 9px; cursor: pointer; list-style: none;
    color: var(--menu-metin); font-size: 13px; font-weight: 500; user-select: none;
}
.ust nav .grup::-webkit-details-marker { display: none; }
.ust nav .grup svg { width: 19px; height: 19px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ust nav .grup:hover { background: rgba(255,255,255,.06); color: #fff; }
.ust nav details { margin: 0; }
.ust nav .alt-menu { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
/* Ana menü beyaz; 1. alt seviye mavi, 2. alt seviye mor tonlarında ayrılır */
.ust nav a, .ust nav > details > .grup { color: #fff; }
.ust nav .alt-menu .grup, .ust nav .alt-menu > a { color: #5bb8f2; }
.ust nav .alt-menu .alt-menu .grup, .ust nav .alt-menu .alt-menu > a { color: #b89cf0; }
.ust .oturum {
    display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 16px;
    padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); color: var(--menu-metin); font-size: 13px;
}
.ust .oturum a { color: #d5dade; text-decoration: none; }
.ust .oturum .aktif-firma { display: block; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.06); color: #fff; font-weight: 600; }
.ust .oturum button.baglanti { color: var(--menu-metin); text-align: left; font-size: 13px; }

@media (max-width: 900px) {
    body:has(> header.ust) { padding-left: 0; }
    .ust { position: sticky; inset: 0 0 auto 0; width: auto; height: auto; padding: 10px 14px; overflow: visible; }
    .ust-bar { margin: 0; }
    .menu-dugme { display: block; }
    .ust nav, .ust .oturum { display: none; }
    body.menu-acik .ust nav, body.menu-acik .ust .oturum { display: flex; }
    body.menu-acik .ust nav { margin-top: 12px; }
}

/* İçerik kartı */
.kart {
    max-width: 1180px; margin: 28px auto; padding: 24px 28px;
    border: 1px solid var(--cizgi); border-radius: 14px; box-shadow: 0 1px 2px rgba(20,24,28,.04);
}
.kart.orta { max-width: 860px; }
.kart.dar { max-width: 460px; }
@media (max-width: 640px) { .kart { margin: 10px; padding: 16px; border-radius: 12px; } }

h1 { font-size: 24px; font-weight: 700; letter-spacing: -.3px; }
h1 small { font-size: 13px; }
h2 { font-size: 17px; font-weight: 700; margin-top: 28px; }
h3 { font-size: 14px; font-weight: 600; }
a { color: var(--vurgu); }

/* Form alanları */
label { font-size: 13px; font-weight: 600; color: var(--metin-2); }
input[type=text], input[type=password], input[type=search], input[type=email], input[type=number], input[type=date],
input[type=tel], select, textarea {
    padding: 10px 12px; font: inherit; color: var(--metin); background: var(--girdi);
    border: 1px solid var(--cizgi-koyu); border-radius: var(--yaricap); transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--vurgu); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vurgu) 22%, transparent); }
fieldset { border-color: var(--cizgi); border-radius: 12px; padding: 10px 16px 16px; }
legend { font-size: 13px; font-weight: 700; color: var(--soluk); text-transform: uppercase; letter-spacing: .5px; }

/* Düğmeler: mavi ana işlem, çerçeveli ikincil, yeşil onay, kırmızı tehlike */
button, .dugme {
    padding: 9px 16px; font-weight: 600; font-size: 14px; border-radius: var(--yaricap);
    background: var(--birincil); color: #fff; transition: background .15s, transform .05s;
}
button:hover, .dugme:hover { background: var(--birincil-ust); }
button:active, .dugme:active { transform: translateY(1px); }
button.ikincil { background: var(--kart); color: var(--metin); border: 1px solid var(--cizgi-koyu); }
button.ikincil:hover { background: var(--zemin); }
button.onay { background: var(--yesil); color: #0b2b2a; }
button.onay:hover { background: color-mix(in srgb, var(--yesil) 88%, #000); }
button.tehlike { background: var(--hata-dolgu); }
button.tehlike:hover { background: color-mix(in srgb, var(--hata-dolgu) 85%, #000); }
button.baglanti, button.baglanti:hover { background: none; color: var(--vurgu); padding: 0; font-weight: 600; transform: none; }
button.sonuc, button.sonuc:hover { background: none; color: var(--metin); font-weight: 400; }
button.sonuc:hover { background: var(--zemin); }

/* Tablolar */
table { border-collapse: separate; border-spacing: 0; border: 1px solid var(--cizgi); border-radius: 12px; overflow: hidden; }
th { background: var(--yuzey-2); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--soluk); padding: 10px 12px; }
td { padding: 11px 12px; border-bottom: 1px solid var(--cizgi); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--vurgu) 4%, var(--kart)); }
td.sayi, th.sayi { font-variant-numeric: tabular-nums; }
td a { font-weight: 600; text-decoration: none; }
@media (max-width: 640px) {
    table.mobil-kart { border: 0; border-radius: 0; overflow: visible; }
    table.mobil-kart tr { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 12px; padding: 10px 14px; }
    tbody tr:hover td { background: none; }
}

/* Etiketler: yuvarlak, renkli */
.etiket { padding: 2px 9px; font-size: 11.5px; font-weight: 600; border-radius: 999px; background: var(--notr-zemin); color: var(--notr); }
.etiket.siparis-ONAYLANDI, .etiket.durum-MUSTERI, .etiket.teslim-TESLIM_EDILDI, .etiket.gonderi-TESLIM_EDILDI { background: var(--bilgi-zemin); color: var(--bilgi-metin); }

/* Bildirimler */
.bilgi, .uyari { padding: 11px 14px; border-radius: var(--yaricap); font-size: 14px; }
.bilgi { border: 1px solid var(--bilgi-cizgi); }
.uyari { border: 1px solid var(--uyari-cizgi); }

/* Sekmeler */
.sekmeler a { padding: 7px 13px; border-radius: 999px; background: var(--kart); border: 1px solid var(--cizgi); color: var(--metin); font-size: 13px; font-weight: 600; }
.sekmeler a.secili { background: var(--metin); border-color: var(--metin); color: var(--kart); }

/* Diğer */
.secili { background: var(--vurgu-zemin); border-radius: var(--yaricap); }
.satir { border-radius: 12px; background: var(--kart); }
.onay-paneli { border: 1px solid var(--bilgi-cizgi); background: var(--bilgi-zemin); border-radius: 14px; }
.notlar { border-radius: var(--yaricap); }
dl.toplamlar dd strong { font-size: 17px; }
dialog.pencere { border-radius: 14px; border-color: var(--cizgi); }
.giris-sayfasi { background: var(--menu); }
.giris-sayfasi .kart { border: 0; box-shadow: 0 20px 50px rgba(0,0,0,.35); }

/* Ana sayfa */
.pano { max-width: 1180px; margin: 0 auto; padding: 28px 28px 40px; }
.karsilama { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; }
.karsilama h1 { margin: 0 0 4px; font-size: 24px; }
.karsilama p { margin: 0; }
.karsilama a { text-decoration: none; font-weight: 600; }
.kurlar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kur { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 12px; padding: 8px 14px; display: flex; flex-direction: column; min-width: 96px; }
.kur small { font-size: 11px; font-weight: 700; color: var(--soluk); letter-spacing: .5px; }
.kur b { font-size: 17px; font-variant-numeric: tabular-nums; }
.kur-tarihi { width: 100%; text-align: right; font-size: 11px; }
.hizli { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.hizli-dugme {
    display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 14px;
    background: var(--kart); border: 1px solid var(--cizgi); color: var(--metin); text-decoration: none; font-weight: 700; font-size: 15px;
    transition: border-color .15s, transform .05s;
}
.hizli-dugme svg { width: 22px; height: 22px; padding: 7px; box-sizing: content-box; border-radius: 10px; background: var(--vurgu-zemin); stroke: var(--vurgu); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hizli-dugme:hover { border-color: var(--vurgu); }
.hizli-dugme:active { transform: translateY(1px); }
.hizli-dugme.ana { background: var(--birincil); border-color: var(--birincil); color: #fff; }
.hizli-dugme.ana svg { background: rgba(255,255,255,.18); stroke: #fff; }
.hizli-dugme .rozet { margin-left: auto; min-width: 22px; padding: 2px 7px; border-radius: 999px; background: var(--birincil); color: #fff; font-size: 12px; text-align: center; }
.ozetler { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.ozet { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; text-decoration: none; color: var(--metin); }
.ozet small { color: var(--soluk); font-size: 13px; font-weight: 600; }
.ozet b { font-size: 30px; font-weight: 700; letter-spacing: -.5px; }
.ozet:hover { border-color: var(--cizgi-koyu); }
.ozet .cubuk { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.cubuk.turuncu { background: var(--turuncu); } .cubuk.gri { background: var(--soluk); } .cubuk.yesil { background: var(--yesil); }
.pano-kart { margin: 0; max-width: none; }
.pano-kart h2 { margin: 0; }
@media (max-width: 640px) {
    .pano { padding: 14px 12px 28px; }
    .karsilama h1 { font-size: 20px; }
    .hizli { grid-template-columns: 1fr 1fr; }
    .hizli .ana { grid-column: 1 / -1; }
    .ozetler { grid-template-columns: 1fr 1fr; }
    .ozet b { font-size: 24px; }
    .kurlar { width: 100%; }
    .kur { flex: 1; }
}

/* Yazı boyutu bir tık küçük; sipariş numaraları satır kırılmadan tek satırda */
body { font-size: 14px; }
h1 { font-size: 21px; }
.karsilama h1 { font-size: 22px; }
h2 { font-size: 16px; }
button, .dugme { font-size: 13.5px; padding: 8px 14px; }
label { font-size: 12.5px; }
input[type=text], input[type=password], input[type=search], input[type=email], input[type=number], input[type=date],
input[type=tel], select, textarea { padding: 9px 11px; }
th { font-size: 11px; padding: 9px 10px; }
td { padding: 10px 10px; }
td:first-child a, .no { white-space: nowrap; }
.ust nav a { font-size: 13.5px; }
.hizli-dugme { font-size: 14px; }
.ozet b { font-size: 26px; }

/* Sayfa düzeni (kartsız): başlık + araç çubuğu + içerik */
.sayfa { max-width: 1180px; margin: 0 auto; padding: 26px 28px 40px; }
.sayfa-baslik { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 18px; }
.sayfa-baslik h1 { margin: 0; }
.sayfa-baslik p { margin: 2px 0 0; font-size: 13px; }
.sayfa-baslik .dugmeler { margin: 0; gap: 8px; flex-wrap: wrap; }
.arac-cubugu { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.arac-cubugu .sekmeler { margin: 0; }
.filtre-satiri { display: flex; gap: 8px; flex-wrap: wrap; }
.filtre-satiri input[type=search] { width: 280px; }
.filtre-satiri select { width: auto; }
.filtre-satiri button { margin: 0; }
.bos-durum { text-align: center; padding: 48px 16px; background: var(--kart); border: 1px dashed var(--cizgi-koyu); border-radius: 14px; }
.bos-durum p { margin: 4px 0 0; }

/* Liste tabloları: satıra tıklanır, ikinci satır küçük bilgi */
table.liste { background: var(--kart); margin-top: 0; }
table.liste tbody tr { cursor: pointer; }
table.liste td small { display: block; font-size: 12px; margin-top: 1px; }
table.liste td .etiket { margin: 0 4px 2px 0; }
.siparis-listesi .h-no a { font-weight: 700; }
.siparis-listesi .h-tutar b { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
    .sayfa { padding: 14px 12px 28px; }
    .filtre-satiri, .filtre-satiri input[type=search] { width: 100%; }
    .filtre-satiri input[type=search] { flex: 1 1 100%; }
    .filtre-satiri select { flex: 1; }
    .arac-cubugu .sekmeler { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 2px; }
    .arac-cubugu .sekmeler a { white-space: nowrap; }
    table.liste { display: block; border: 0; background: none; overflow: visible; }
    table.liste thead { display: none; }
    table.liste tbody { display: grid; gap: 8px; }
    table.liste tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 12px; padding: 12px 14px; }
    table.liste td { display: block; border: 0; padding: 0; }
    table.liste td::before { content: none; }
    .siparis-listesi .h-no { grid-column: 1; }
    .siparis-listesi .h-tutar { grid-column: 2; grid-row: 1; text-align: right; }
    .siparis-listesi .h-musteri { grid-column: 1 / -1; }
    .siparis-listesi .h-durum { grid-column: 1 / -1; margin-top: 6px; }
}

/* Sipariş giriş ekranı: bölümler kart, altta yapışkan toplam ve düğmeler */
.form-sayfa { max-width: 920px; padding-bottom: 110px; }
.form-sayfa .sayfa-baslik a { text-decoration: none; font-weight: 600; }
.form-sayfa fieldset { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; padding: 18px 20px 20px; margin: 0 0 14px; }
.form-sayfa legend { float: left; width: 100%; padding: 0; margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--metin); text-transform: none; letter-spacing: 0; }
.form-sayfa legend ~ * { clear: both; }  /* gizli bir öğe araya girse de (ör. ödeme koşulu bilgisi) alttakiler kaymasın */
.form-sayfa .secili { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 12px 14px; }
.form-sayfa .secili #cariDegistir { margin-left: auto; }
.form-sayfa .satir { padding: 12px 14px; border-color: var(--cizgi); }
.form-sayfa .satir-baslik strong { font-size: 14px; }
.form-sayfa .satir-alan input { font-size: 15px; padding: 9px 10px; border-radius: 8px; border-color: var(--cizgi-koyu); }
.form-sayfa .satir-toplam b, .form-sayfa .satir-toplam [data-alan=toplam] { font-weight: 700; font-variant-numeric: tabular-nums; }
.form-sayfa dl.toplamlar { background: var(--zemin); border-radius: 12px; padding: 12px 14px; }
.form-sayfa dl.toplamlar dd:last-of-type strong { font-size: 18px; }
.form-sayfa #yeniMusteri, .form-sayfa #yeniAdres { margin-top: 8px; }
.alt-cubuk {
    position: fixed; left: var(--menu-genislik); right: 0; bottom: 0; z-index: 15;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 12px max(20px, calc((100vw - var(--menu-genislik) - 920px) / 2 + 20px));
    background: color-mix(in srgb, var(--kart) 94%, transparent); border-top: 1px solid var(--cizgi); backdrop-filter: blur(6px);
}
.alt-toplam small { display: block; font-size: 11px; color: var(--soluk); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.alt-toplam b { font-size: 20px; font-variant-numeric: tabular-nums; }
.alt-dugmeler { display: flex; gap: 8px; }
.alt-dugmeler button { margin: 0; }
@media (max-width: 900px) { .alt-cubuk { left: 0; padding: 10px 12px; } }
@media (max-width: 640px) {
    .form-sayfa fieldset { padding: 14px; border-radius: 12px; }
    .alt-dugmeler button { padding: 10px 12px; font-size: 13px; }
    .alt-toplam b { font-size: 17px; }
}

/* Sipariş detayı */
.detay-sayfa { max-width: 1080px; }
.geri { display: inline-block; margin-bottom: 8px; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--soluk); }
.geri:hover { color: var(--vurgu); }
.detay-sayfa .sayfa-baslik h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.detay-sayfa .sayfa-baslik h1 .etiket { margin: 0; font-size: 12px; }
.detay-sayfa .sayfa-baslik h1 small { width: 100%; font-size: 13px; }
.dugme.ikincil { background: var(--kart); color: var(--metin); border: 1px solid var(--cizgi-koyu); }
.dugme.ikincil:hover { background: var(--zemin); }
.kutu { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; padding: 16px 18px; }
dl.bilgiler.kutu { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); display: grid; gap: 12px 24px; margin: 0 0 16px; }
dl.bilgiler.kutu dt { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--soluk); grid-column: auto; }
dl.bilgiler.kutu dd { margin: 2px 0 0; font-weight: 500; }
dl.bilgiler.kutu { grid-auto-flow: row; }
.detay-sayfa table { background: var(--kart); }
.detay-sayfa h2 { margin: 26px 0 10px; }
.detay-sayfa dl.toplamlar { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; padding: 14px 16px; max-width: 340px; }
.detay-sayfa dl.toplamlar dd strong { font-size: 18px; }
.detay-sayfa .onay-paneli { padding: 6px 18px 18px; }
.detay-sayfa ul.gecmis { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; padding: 6px 16px; }
.detay-sayfa ul.gecmis li { padding: 9px 0; font-size: 13px; }
.detay-sayfa ul.gecmis li:last-child { border-bottom: 0; }
.detay-sayfa section#kargo { margin-top: 8px; }
@media (max-width: 640px) {
    .detay-sayfa .sayfa-baslik .dugmeler { width: 100%; }
    .detay-sayfa .sayfa-baslik .dugmeler > * { flex: 1 1 45%; }
    .detay-sayfa .sayfa-baslik .dugmeler form button { width: 100%; }
    .detay-sayfa dl.toplamlar { max-width: none; }
}

/* Cari listesi */
.cari-listesi .h-unvan a { font-weight: 700; }
.etiket.logo-etiket { background: var(--vurgu-zemin); color: var(--vurgu-koyu); }
.etiket.durum-PASIF { background: var(--notr-zemin); color: var(--soluk); }
@media (max-width: 640px) {
    .cari-listesi .h-unvan { grid-column: 1 / -1; }
    .cari-listesi .h-konum, .cari-listesi .h-iletisim { grid-column: auto; font-size: 13px; }
    .cari-listesi .h-durum { grid-column: 1 / -1; margin-top: 6px; }
}

/* Detay sayfalarında açılır bölümler kart görünümünde */
.detay-sayfa details { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; padding: 0 18px; margin: 10px 0; }
.detay-sayfa details > summary { padding: 13px 0; font-weight: 700; list-style: none; display: flex; align-items: center; gap: 8px; }
.detay-sayfa details > summary::-webkit-details-marker { display: none; }
.detay-sayfa details > summary::before { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--vurgu-zemin); color: var(--vurgu); font-weight: 700; }
.detay-sayfa details[open] > summary::before { content: "−"; }
.detay-sayfa details[open] { padding-bottom: 16px; }
.detay-sayfa .notlar { background: var(--kart); border: 1px solid var(--cizgi); }
/* Formlar tek kart içinde (bölümsüz formlar) */
.form-sayfa form.kutu { padding: 20px 22px; }
@media (max-width: 640px) { .form-sayfa form.kutu { padding: 14px; } }
.pencere-sayfa { padding: 18px 20px 24px; }
.filtre-cipi { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 6px 8px 6px 14px; background: var(--vurgu-zemin); color: var(--vurgu-koyu); border-radius: 999px; font-size: 13px; font-weight: 600; }
.filtre-cipi a { text-decoration: none; }
.filtre-cipi .kaldir { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--kart); color: var(--soluk); }
.bolum-baslik { margin-top: 26px; } .bolum-baslik h2 { margin: 0 0 10px; } .bolum-baslik h2 small { font-size: 13px; font-weight: 600; } .bolum-baslik a { font-weight: 600; text-decoration: none; }

/* Stok listesi */
.stok-filtre { margin-bottom: 12px; }
.malzeme-listesi .h-kod a { font-weight: 700; white-space: nowrap; }
.malzeme-listesi .h-stok { font-weight: 700; }
.malzeme-listesi td.eksi { color: var(--hata); }
.malzeme-listesi .h-ek { color: var(--soluk); }
.toplu-panel { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 12px; margin: 0 0 12px; }
@media (max-width: 640px) {
    .malzeme-listesi tr { grid-template-columns: auto 1fr auto; }
    .malzeme-listesi .h-sec { grid-row: 1; grid-column: 1; }
    .malzeme-listesi .h-kod { grid-row: 1; grid-column: 2; }
    .malzeme-listesi .h-stok { grid-row: 1; grid-column: 3; text-align: right; }
    .malzeme-listesi .h-tanim { grid-column: 1 / -1; }
    .malzeme-listesi .h-fiyat { grid-column: 1 / -1; text-align: left; font-weight: 600; }
    .malzeme-listesi .h-ek { display: none; }
    .malzeme-listesi .h-stok::before { content: "Stok "; color: var(--soluk); font-weight: 400; font-size: 12px; }
}

/* Ayar ekranları (kart içinde): başlık, dönüş bağlantıları ve tablolar */
.kart > .baslik-satiri { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--cizgi); }
.kart > .baslik-satiri > a:not(.dugme), .kart > .baslik-satiri span > a:not(.dugme) { font-size: 13px; font-weight: 600; text-decoration: none; }
.kart table td a { font-weight: 600; }
.kart table td:last-child a + a { margin-left: 10px; }
.kart .iki-sutun { gap: 0 18px; }
.kart h2 { padding-top: 6px; }
.kart form + h2, .kart table + h2 { margin-top: 28px; }

/* Yazı boyutu bir tık daha küçük */
body { font-size: 13.5px; }
h1 { font-size: 20px; }
.karsilama h1 { font-size: 21px; }
h2 { font-size: 15px; }
button, .dugme { font-size: 13px; padding: 7px 13px; }
label { font-size: 12px; }
input[type=text], input[type=password], input[type=search], input[type=email], input[type=number], input[type=date],
input[type=tel], select, textarea { padding: 8px 10px; font-size: 13.5px; }
th { font-size: 10.5px; }
td { padding: 9px 10px; }
.ust nav a { font-size: 13px; }
.etiket { font-size: 11px; }
.hizli-dugme { font-size: 13.5px; }
.ozet b { font-size: 24px; }
.alt-toplam b { font-size: 18px; }

/* Takip türü (seri / lot) işareti */
.takip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; }
.takip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.takip.seri { background: var(--mor-zemin); color: var(--mor); }
.takip.lot { background: var(--mavi-zemin); color: var(--mavi); }
@media (max-width: 640px) {
    .malzeme-listesi .h-fiyat { grid-column: 1 / 3; }
    .malzeme-listesi .h-takip { grid-column: 3; text-align: right; }
}

/* modülerp marka */
.ust .marka { gap: 10px; font-size: 19px; font-weight: 800; letter-spacing: -.4px; }
.ust .marka .marka-simge { width: 28px; height: 28px; flex: none; }
.ust .marka b { color: var(--yesil); font-weight: 800; }
.giris-marka { display: flex; align-items: center; gap: 12px; font-size: 28px; font-weight: 800; letter-spacing: -.6px; }
.giris-marka b { color: var(--yesil); font-weight: 800; }
.giris-alt { margin: 4px 0 18px; }
.ust .marka b, .giris-marka b { letter-spacing: 0; }

/* Sevk durumu */
.etiket.sevk-BEKLIYOR { background: var(--notr-zemin); color: var(--notr); }
.etiket.sevk-KISMI { background: var(--uyari-zemin); color: var(--uyari-metin); }
.etiket.sevk-TAMAM { background: var(--bilgi-zemin); color: var(--bilgi-metin); }
.sevk-satirlari { padding: 6px 18px; }
.sevk-satiri { display: grid; grid-template-columns: minmax(0, 2fr) minmax(80px, 1fr) auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--cizgi); }
.sevk-satiri:last-child { border-bottom: 0; }
.sevk-ad { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sevk-cubuk { height: 8px; background: var(--notr-zemin); border-radius: 999px; overflow: hidden; }
.sevk-cubuk span { display: block; height: 100%; background: var(--turuncu); border-radius: 999px; }
.sevk-cubuk span.tam { background: var(--yesil); }
.sevk-sayilar { display: flex; gap: 14px; }
.sevk-sayilar span { display: flex; flex-direction: column; align-items: flex-end; min-width: 42px; }
.sevk-sayilar small { font-size: 10.5px; color: var(--soluk); font-weight: 600; text-transform: uppercase; }
.sevk-sayilar b { font-variant-numeric: tabular-nums; }
.sevk-sayilar b.kalan { color: var(--uyari-metin); }
.irsaliye-baslik { margin: 16px 0 8px; }
.irsaliye { padding: 12px 16px; margin-bottom: 8px; }
.irsaliye-ust { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.irsaliye ul { list-style: none; margin: 0; padding: 0; }
.irsaliye li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 5px 0; border-top: 1px dashed var(--cizgi); }
.seri-listesi { width: 100%; color: var(--mor); font-weight: 600; }
@media (max-width: 640px) {
    .sevk-satiri { grid-template-columns: 1fr; gap: 6px; }
    .sevk-sayilar { justify-content: space-between; }
}
.cubuk.mavi { background: var(--birincil); }
.irsaliye-kargo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 2px 0 8px; padding: 8px 10px; background: var(--zemin); border-radius: 8px; font-size: 13px; }
.irsaliye-kargo .etiket { margin: 0; }
.irsaliye-kargo.eksik { background: var(--uyari-zemin); color: var(--uyari-metin); font-weight: 600; }
.irsaliye-kargo.eksik details { margin: 0; padding: 0; border: 0; background: none; width: 100%; }
.irsaliye-kargo.eksik details > summary { padding: 4px 0; font-size: 13px; }
.irsaliye-kargo.eksik form { margin: 0; }
.irsaliye-kargo.eksik form button { margin-top: 6px; }
.etiket.teslim-KISMI_TESLIM { background: var(--vurgu-zemin); color: var(--vurgu-koyu); }
.irsaliye-kargo details { width: 100%; margin: 4px 0 0; padding: 0; border: 0; background: none; } .irsaliye-kargo details > summary { padding: 2px 0; font-size: 12.5px; } .irsaliye-kargo form { margin: 0; }

/* Sipariş türleri ve demo takibi */
.etiket.tur-KONSINYE { background: var(--uyari-zemin); color: var(--uyari-metin); }
.etiket.tur-PROMOSYON { background: var(--pembe-zemin); color: var(--pembe); }
.etiket.tur-DEMO { background: var(--mor-zemin); color: var(--mor); }
.cubuk.kirmizi { background: var(--hata-dolgu); }
.demo-paneli { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; border-left: 4px solid var(--mor); border-radius: 0 14px 14px 0; }
.demo-paneli.gecikti { border-left-color: var(--hata); background: color-mix(in srgb, var(--hata) 6%, var(--kart)); }
.demo-paneli .gecikme, .demo-listesi .gecikme { color: var(--hata); font-weight: 700; }
.demo-paneli .donus-ok { color: var(--bilgi-metin); }
.demo-paneli .demo-satirlari { flex-basis: 100%; margin: 4px 0 0; }
.demo-satirlari td small { display: block; }
.satir-ici-form { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.satir-ici-form input { width: auto; }
.satir-ici-form button { margin: 0; }
.demo-listesi tr.gecikti td { background: color-mix(in srgb, var(--hata) 6%, var(--kart)); }
@media (max-width: 640px) {
    .demo-listesi .h-tarih, .demo-listesi .h-durum, .demo-listesi .h-islem { grid-column: 1 / -1; }
}
.demo-listesi .h-malzeme .seri { color: var(--mor); font-weight: 600; }
.demo-listesi tr.gecikti td:first-child { box-shadow: inset 3px 0 0 var(--hata); }
@media (max-width: 640px) {
    .demo-listesi .h-malzeme { grid-column: 1; }
    .demo-listesi .h-durum { grid-column: 2; grid-row: 1; text-align: right; }
    .demo-listesi .h-musteri { grid-column: 1 / -1; }
    .demo-listesi .h-cikis, .demo-listesi .h-tarih { grid-column: auto; font-size: 13px; }
    .demo-listesi tr.gecikti { border-left: 4px solid var(--hata); }
    .demo-listesi tr.gecikti td:first-child { box-shadow: none; }
}
/* Konsinye takibi */
.konsinye-paneli { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 14px; border-left: 4px solid var(--turuncu); border-radius: 0 14px 14px 0; }
.hizli-suzgec { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; }
.hizli-suzgec .cip { display: inline-flex; gap: 6px; align-items: center; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--cizgi); background: var(--kart); font-size: 13px; text-decoration: none; color: inherit; }
.hizli-suzgec .cip b { font-variant-numeric: tabular-nums; }
.hizli-suzgec .cip.bos { opacity: .55; }
.hizli-suzgec .cip.secili { background: var(--birincil); border-color: var(--birincil); color: #fff; }
.hizli-suzgec .cip-SKT_GECTI:not(.bos):not(.secili) b { color: var(--hata); }
.hizli-suzgec .cip-SKT_YAKIN:not(.bos):not(.secili) b { color: var(--uyari); }
.konsinye-listesi tr.ana { cursor: pointer; }
.konsinye-listesi tr.ana.acik td { border-bottom-color: transparent; }
.konsinye-listesi td { vertical-align: middle; }
.konsinye-listesi td.sayi { font-variant-numeric: tabular-nums; white-space: nowrap; }
.konsinye-listesi .ek { color: var(--soluk); font-size: 13px; }
.konsinye-listesi .ek.skt-gecti { color: var(--hata); font-weight: 700; }
.konsinye-listesi .ek.skt-yakin { color: var(--uyari); font-weight: 600; }
.konsinye-listesi tr.kapali { opacity: .55; }
.konsinye-listesi tr.ayrinti td { padding-top: 0; font-size: 13px; color: var(--metin-2); background: var(--yuzey-2); }
.konsinye-listesi tr.ayrinti span { margin-right: 16px; white-space: nowrap; }
@media (max-width: 640px) {
    .konsinye-listesi tr.ana { grid-template-columns: 1fr auto; }
    .konsinye-listesi .h-malzeme, .konsinye-listesi .h-musteri { grid-column: 1; }
    .konsinye-listesi .h-kalan { grid-column: 2; grid-row: 1; text-align: right; }
    .konsinye-listesi .h-tutar { grid-column: 2; grid-row: 2; text-align: right; font-size: 13px; }
    .konsinye-listesi tr.ayrinti { display: block; margin-top: -10px; border-top: 0; border-radius: 0 0 12px 12px; }
    .konsinye-listesi tr.ayrinti[hidden] { display: none; }
    .konsinye-listesi tr.ayrinti td { background: none; }
    .konsinye-listesi tr.ayrinti span { display: inline-block; margin: 0 10px 2px 0; }
}
.hata-metni { color: var(--hata); }
label.secim { display: flex; gap: 8px; align-items: center; font-weight: 400; margin: 6px 0; }
.onay-formu { display: grid; gap: 6px; max-width: 640px; }
.onay-formu .karar-dugmeleri { display: flex; gap: 8px; flex-wrap: wrap; }
/* Sipariş girişi: çok kalemli siparişte satırlar tek satır (masaüstü); alan adları yalnızca ilk satırda */
@media (min-width: 900px) {
    .form-sayfa .satirlar { gap: 0; border: 1px solid var(--cizgi); border-radius: 10px; overflow: hidden; background: var(--kart); }
    .form-sayfa .satirlar:empty { display: none; }
    .form-sayfa .satir { display: grid; grid-template-columns: minmax(0, 1fr) 390px; column-gap: 14px; row-gap: 1px;
        padding: 6px 10px; border: 0; border-bottom: 1px solid var(--cizgi); border-radius: 0; align-items: center; }
    .form-sayfa .satir:last-child { border-bottom: 0; }
    .form-sayfa .satir-baslik { grid-column: 1; grid-row: 1; font-size: 13px; min-width: 0; }
    .form-sayfa .satir-baslik span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .form-sayfa .satir-baslik strong { font-size: 13px; white-space: nowrap; }
    .form-sayfa .satir-bilgi { grid-column: 1; grid-row: 2; margin: 0; font-size: 11.5px; }
    .form-sayfa .satir-alanlar { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: 78px 100px 64px 1fr; gap: 6px; align-items: center; }
    .form-sayfa .satir-alan { font-size: 11px; }
    .form-sayfa .satir-alan input { padding: 5px 7px; font-size: 14px; border-radius: 6px; }
    .form-sayfa .satir + .satir .satir-alan > span, .form-sayfa .satir + .satir .satir-toplam > .soluk { display: none; }
    .form-sayfa .satir-toplam { font-size: 14px; }
    .form-sayfa .fiyat-farki, .form-sayfa .satir > .stok-uyari { grid-column: 1 / -1; margin: 0; font-size: 12px; }
}
/* Telefonda: iOS 16 pikselden küçük alana dokununca sayfayı yakınlaştırır; dokunma alanları en az 40 piksel. */
@media (max-width: 640px) {
    input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important; }
    button, a.dugme, .arac button, .arac a { min-height: 40px; }
    button.baglanti { min-height: 36px; padding-top: 8px; padding-bottom: 8px; }
}

/* Bayi ürün listesi */
.urun-liste { list-style: none; margin: 16px 0 0; padding: 0; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--kart); }
.urun-liste li { display: grid; grid-template-columns: minmax(0, 1fr) 110px 150px 130px; gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--cizgi); }
.urun-liste li:first-child { border-top: 0; }
.urun-liste li.baslik { font-size: 12px; color: var(--soluk); background: var(--zemin); border-radius: var(--yaricap) var(--yaricap) 0 0; }
.urun-liste .ad { font-weight: 600; line-height: 1.35; }
.urun-liste .kod { display: block; font-size: 12px; color: var(--soluk); }
.urun-liste .fiyat { text-align: right; font-weight: 600; white-space: nowrap; }
.urun-liste .fiyat del { font-weight: 400; font-size: 12px; color: var(--soluk); margin-right: 4px; }
.urun-liste .fiyat .oran { display: block; font-size: 11px; color: var(--yesil-koyu); }
.urun-liste .fiyat .tl, .urun-liste .fiyat .yok { display: block; font-size: 12px; font-weight: 400; color: var(--soluk); white-space: normal; }
.urun-liste button { margin: 0; width: 100%; padding: 8px 10px; }
.urun-liste button:disabled { background: var(--cizgi); color: var(--soluk); border-color: var(--cizgi); cursor: not-allowed; }
.stok { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.stok-YETERLI { background: var(--bilgi-zemin); color: var(--bilgi-metin); }
.stok-KRITIK { background: var(--hata-zemin); color: var(--hata); }
.urun-liste li.tukendi .urun, .urun-liste li.tukendi .fiyat { opacity: .5; }
.stok-AZ { background: var(--uyari-zemin); color: var(--uyari-metin); }
.stok-YOK { background: var(--zemin); color: var(--hata); }
@media (max-width: 640px) {
    .urun-liste li { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
    .urun-liste li.baslik { display: none; }
    .urun-liste .urun { grid-column: 1 / -1; }
    .urun-liste .eylem { grid-column: 1 / -1; }
}
.sepete-ekle { display: flex; gap: 6px; align-items: center; margin: 0; }
.sepete-ekle input { width: 72px; margin: 0; }
.sepete-ekle button { flex: 1; }
.urun-liste li.sorunlu { background: color-mix(in srgb, var(--hata) 6%, var(--kart)); }
.sepet-liste li { grid-template-columns: minmax(0, 1fr) 170px 140px 60px; }
.sepet-toplam { margin: 16px 0 0 auto; max-width: 360px; }
.sepet-toplam dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0 0 8px; }
.sepet-toplam dd { margin: 0; text-align: right; }
.sepet-toplam .genel { font-weight: 700; font-size: 18px; }
.sepet-toplam .dugme { display: block; text-align: center; }
@media (max-width: 640px) {
    .sepet-liste li { grid-template-columns: minmax(0, 1fr) auto; }
    .sepet-liste .sepete-ekle { grid-column: 1; }
    .sepet-liste .eylem { grid-column: auto; }
    .sepet-toplam { max-width: none; margin: 12px; }
}
/* Bayi sepeti: ürün kartları solda, özet sağda (telefonda altta) */
.sepet-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; margin-top: 16px; }
.sepet-kartlar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sepet-kart { display: grid; grid-template-columns: minmax(0, 1fr) auto 130px 36px; gap: 14px; align-items: center; padding: 14px 16px; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; }
.sepet-kart.sorunlu { border-color: var(--hata-cizgi); background: color-mix(in srgb, var(--hata) 6%, var(--kart)); }
.sepet-urun { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.sepet-urun .ad { font-weight: 600; line-height: 1.35; }
.sepet-urun .kod { font-size: 12px; color: var(--soluk); }
.sepet-miktar { display: flex; align-items: center; margin: 0; border: 1px solid var(--cizgi-koyu); border-radius: 10px; overflow: hidden; }
.sepet-miktar .adim { margin: 0; width: 34px; height: 36px; padding: 0; border: 0; border-radius: 0; background: var(--zemin); color: var(--metin); font-size: 18px; line-height: 1; }
.sepet-miktar .adim:hover { background: var(--vurgu-zemin); color: var(--vurgu); }
.sepet-miktar input { width: 64px; height: 36px; margin: 0; border: 0; border-radius: 0; text-align: center; -moz-appearance: textfield; }
.sepet-miktar input::-webkit-outer-spin-button, .sepet-miktar input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sepet-miktar .guncelle { margin: 0 0 0 6px; padding: 6px 10px; }
.sepet-tutar { display: flex; flex-direction: column; align-items: flex-end; text-align: right; white-space: nowrap; }
.sepet-tutar b { font-size: 16px; }
.sepet-tutar small { font-size: 12px; }
.sepet-cikar { margin: 0; }
.sepet-cikar button { display: grid; place-items: center; width: 36px; height: 36px; margin: 0; padding: 0; border-radius: 10px; color: var(--soluk); }
.sepet-cikar button:hover { background: var(--hata-zemin); color: var(--hata); }
.sepet-cikar svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sepet-ozet { position: sticky; top: 16px; margin: 0; max-width: none; }
.sepet-ozet h2 { margin: 0 0 12px; font-size: 17px; }
.sepet-ozet dl { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin: 0 0 14px; }
.sepet-ozet dt { color: var(--soluk); }
.sepet-ozet dd { margin: 0; text-align: right; font-weight: 600; }
.sepet-ozet .genel { padding-top: 10px; border-top: 1px solid var(--cizgi); color: var(--metin); font-weight: 700; font-size: 18px; }
.sepet-ozet .dugme { display: block; text-align: center; padding: 12px; font-size: 15px; }
.sepet-ozet .ipucu { margin: 10px 0 0; }
.sepet-bos { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; margin: 24px auto; max-width: 420px; padding: 36px 24px; }
.sepet-bos svg { width: 44px; height: 44px; padding: 12px; border-radius: 50%; background: var(--vurgu-zemin); stroke: var(--vurgu); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sepet-bos h2 { margin: 8px 0 0; }
.sepet-bos .dugme { margin-top: 10px; }
@media (max-width: 860px) {
    .sepet-duzen { grid-template-columns: 1fr; }
    .sepet-ozet { position: static; }
    .sepet-kart { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
    .sepet-tutar { grid-column: 1; grid-row: 2; align-items: flex-start; text-align: left; }
    .sepet-miktar { grid-column: 2; grid-row: 2; }
    .sepet-cikar { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; }
    .sepet-kart .sepet-urun { grid-column: 1; grid-row: 1; }
}
.urun-liste details.talep summary { display: block; text-align: center; padding: 8px 10px; cursor: pointer; list-style: none; border: 1px solid var(--cizgi-koyu); border-radius: 8px; background: var(--kart); color: var(--metin); font-size: 14px; }
.urun-liste details.talep summary::-webkit-details-marker { display: none; }
.urun-liste details.talep form { display: grid; gap: 6px; margin-top: 8px; }
.urun-liste details.talep label { font-size: 12px; color: var(--soluk); }
.urun-liste details.talep input { width: 100%; margin: 2px 0 0; }
.urun-liste .talep-edildi { display: block; font-size: 12px; margin-bottom: 4px; text-align: center; }
.ozet-satirlar { list-style: none; margin: 12px 0; padding: 0; border-top: 1px solid var(--cizgi); }
.ozet-satirlar li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--cizgi); }
.ozet-satirlar .kod { display: block; font-size: 12px; color: var(--soluk); }
.toplamlar { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0 0 16px auto; max-width: 320px; }
.toplamlar dd { margin: 0; text-align: right; }
.toplamlar .genel { font-weight: 700; font-size: 18px; }
.siparis-liste li { grid-template-columns: minmax(0, 1fr) 160px 140px 50px; }
@media (max-width: 640px) { .siparis-liste li { grid-template-columns: minmax(0, 1fr) auto; } }
.tekil-arama { margin: 8px 0 12px; }
.tekil-arama input { width: 100%; max-width: 480px; }
.tekil-sonuclar { list-style: none; margin: 6px 0 0; padding: 0; max-width: 680px; }
.tekil-sonuclar li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--cizgi); border-top: 0; background: var(--kart); }
.tekil-sonuclar li:first-child { border-top: 1px solid var(--cizgi); border-radius: 8px 8px 0 0; }
.tekil-sonuclar li:last-child { border-radius: 0 0 8px 8px; }
.tekil-sonuclar .durum { display: block; }
.dugmeler-kucuk { display: flex; gap: 6px; flex-shrink: 0; }
.dugmeler-kucuk button { margin: 0; }
.bayi-durum { display: inline-block; font-size: 12px; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.bayi-durum-BEKLIYOR { background: var(--uyari-zemin); color: var(--uyari-metin); }
.bayi-durum-OLUMLU { background: var(--vurgu-zemin); color: var(--vurgu-koyu); }
.bayi-durum-TAMAM { background: var(--bilgi-zemin); color: var(--bilgi-metin); }
.bayi-durum-OLUMSUZ { background: var(--hata-zemin); color: var(--hata); }
.zaman-cizelgesi { list-style: none; margin: 8px 0 16px; padding: 0 0 0 16px; border-left: 2px solid var(--cizgi); }
.zaman-cizelgesi li { position: relative; padding: 4px 0 10px 8px; display: flex; flex-direction: column; gap: 2px; }
.zaman-cizelgesi li::before { content: ""; position: absolute; left: -23px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--birincil); }
.zaman-cizelgesi .zaman { font-size: 12px; color: var(--soluk); }

/* Kampanyalar */
.etiket.kampanya-AKTIF { background: var(--bilgi-zemin); color: var(--bilgi-metin); }
.etiket.kampanya-TASLAK { background: var(--notr-zemin); color: var(--notr); }
.etiket.kampanya-DURDURULDU { background: var(--hata-zemin); color: var(--hata); }
.kampanya-formu h2 { margin: 26px 0 6px; font-size: 17px; }
.secim-kutusu .secilenler, .secim-kutusu .sonuclar { list-style: none; margin: 0; padding: 0; }
.secim-kutusu .secilenler { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.secim-kutusu .secilenler li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--vurgu-zemin); font-size: 13px; }
.secim-kutusu .secilenler .kaldir { margin: 0; padding: 0 6px; font-size: 16px; line-height: 1; }
.secim-kutusu .sonuclar { max-height: 240px; overflow-y: auto; border: 1px solid var(--cizgi); border-radius: 8px; background: var(--kart); }
.secim-kutusu .sonuclar:empty { display: none; }
.secim-kutusu .sonuclar li { padding: 6px 10px; border-top: 1px solid var(--cizgi); }
.secim-kutusu .sonuclar li:first-child { border-top: 0; }
.secim-kutusu .sonuclar button { margin: 0; text-align: left; }
.ozet-liste { display: grid; grid-template-columns: 140px 1fr; gap: 10px 16px; margin: 20px 0; }
.ozet-liste dt { color: var(--soluk); }
.ozet-liste dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
@media (max-width: 600px) { .ozet-liste { grid-template-columns: 1fr; gap: 2px; } .ozet-liste dd { margin-bottom: 10px; } }
.etiket.kampanya { background: var(--uyari-zemin); color: var(--uyari-metin); }
.kampanya-kutusu { margin: 14px 0; padding: 12px 16px; border: 1px solid var(--uyari-cizgi); border-radius: 12px; background: var(--uyari-zemin); }
.kampanya-kutusu h3 { margin: 0 0 6px; font-size: 15px; }
.kampanya-kutusu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.kampanya-kutusu li.uygulandi::before { content: "✓ "; color: var(--yesil-koyu); font-weight: 700; }
.kampanya-kutusu li.bilgi-satiri::before { content: "• "; }
.kampanya-kutusu li.uygulanmadi { font-size: 13px; }
.kampanya-kutusu .ipucu { margin: 6px 0 0; }
.kampanya-etiketleri { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.kampanya-etiketleri .etiket { margin: 0; }

/* E-ticaret yönetimi: site seçici ve sekmeler */
.eticaret-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-bottom: 12px; }
.eticaret-site { display: flex; align-items: center; gap: 8px; margin: 0; }
.eticaret-site label { margin: 0; }
.eticaret-site select { width: auto; margin: 0; }
.eticaret-sekmeler { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.eticaret-sekmeler a.secili { font-weight: 700; text-decoration: underline; }
.gorsel-kitaplik { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin: 8px 0; }
.gorsel-kitaplik figure { margin: 0; border: 1px solid var(--cizgi); border-radius: 6px; padding: 6px; }
.gorsel-kitaplik img { width: 100%; height: 100px; object-fit: contain; display: block; }
.gorsel-kitaplik figcaption { font-size: 12px; word-break: break-all; }
.gorsel-kitaplik form { margin: 4px 0 0; }
.renk-kutu { display: inline-block; width: 1em; height: 1em; border-radius: 3px; vertical-align: middle; border: 1px solid var(--cizgi-koyu); }
.suzgecler { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.suzgecler select { width: auto; margin: 0; max-width: 260px; }
.suzgecler button { margin: 0; }
.toplu-cubuk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; margin: 8px 0;
    background: var(--yuzey-2); border-radius: 6px; position: sticky; top: 0; z-index: 2; }
.toplu-cubuk select { width: auto; margin: 0; max-width: 280px; }
.toplu-cubuk button { margin: 0; }

/* Personel kartı: ehliyet/SRC seçenekleri yan yana */
.secenek-satiri { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 8px; }
.secenek-satiri label.onay { margin: 0; }

/* Takvim (yeni tasarım 04.11.2026; templates/takvim/takvim.html + etkinlik.html, static/js/takvim.js).
   Tür renkleri --tk-<tür>, açık ve koyu temada ayrı ton; bir öğede --tk-renk, tk-tur-<tür> sınıfıyla gelir.
   Ana sayfadaki "Bugün" kutusu eski .takvim-etkinlik sınıfını kullanır (aynı renkler). */
:root {
    --tk-gorev: #2563eb; --tk-teslim: #059669; --tk-tasit: #7c3aed; --tk-konsinye: #d97706; --tk-demo: #65a30d;
    --tk-kisi: #db2777; --tk-izin: #0891b2; --tk-tatil: #dc2626; --tk-diger: #64748b;
    --tk-dolgu: 11%;
}
:root[data-tema="koyu"] {
    --tk-gorev: #7aa7ff; --tk-teslim: #34d399; --tk-tasit: #a78bfa; --tk-konsinye: #fbbf24; --tk-demo: #a3e635;
    --tk-kisi: #f472b6; --tk-izin: #38bdf8; --tk-tatil: #f87171; --tk-diger: #94a3b8;
    --tk-dolgu: 17%;
}
@media (prefers-color-scheme: dark) {
    :root[data-tema="sistem"] {
        --tk-gorev: #7aa7ff; --tk-teslim: #34d399; --tk-tasit: #a78bfa; --tk-konsinye: #fbbf24; --tk-demo: #a3e635;
        --tk-kisi: #f472b6; --tk-izin: #38bdf8; --tk-tatil: #f87171; --tk-diger: #94a3b8;
        --tk-dolgu: 17%;
    }
}
.tk-e, .tk-cip, .tk-kart, .takvim-etkinlik { --tk-renk: var(--tk-diger); }
.tk-tur-gorev, .takvim-etkinlik.gorev { --tk-renk: var(--tk-gorev); }
.tk-tur-teslim, .takvim-etkinlik.teslim { --tk-renk: var(--tk-teslim); }
.tk-tur-tasit, .takvim-etkinlik.tasit { --tk-renk: var(--tk-tasit); }
.tk-tur-konsinye, .takvim-etkinlik.konsinye { --tk-renk: var(--tk-konsinye); }
.tk-tur-demo, .takvim-etkinlik.demo { --tk-renk: var(--tk-demo); }
.tk-tur-kisi, .takvim-etkinlik.kisi { --tk-renk: var(--tk-kisi); }
.tk-tur-izin, .takvim-etkinlik.izin { --tk-renk: var(--tk-izin); }
.tk-tur-tatil, .takvim-etkinlik.tatil { --tk-renk: var(--tk-tatil); }
.tk-gizle-gorev .tk-e.tk-tur-gorev, .tk-gizle-teslim .tk-e.tk-tur-teslim, .tk-gizle-tasit .tk-e.tk-tur-tasit,
.tk-gizle-konsinye .tk-e.tk-tur-konsinye, .tk-gizle-demo .tk-e.tk-tur-demo, .tk-gizle-kisi .tk-e.tk-tur-kisi,
.tk-gizle-izin .tk-e.tk-tur-izin, .tk-gizle-tatil .tk-e.tk-tur-tatil { display: none; }

/* Ana sayfa "Bugün" kutusu */
.takvim-etkinlik { display: inline-block; font-size: 12.5px; line-height: 1.35; padding: 2px 9px; border-radius: 7px;
    color: var(--metin); text-decoration: none; border: 0; border-left: 3px solid var(--tk-renk);
    background: color-mix(in srgb, var(--tk-renk) var(--tk-dolgu), var(--kart)); }
.takvim-etkinlik a { color: inherit; text-decoration: none; font-weight: 600; }
.takvim-etkinlik.uyari { padding: 2px 9px; font-size: 12.5px; border: 0; border-left: 3px solid var(--tk-renk);
    border-radius: 7px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--uyari) 50%, transparent); }

.takvim-sayfa { max-width: 1400px; }
.takvim-sayfa [hidden] { display: none !important; }
.tk-i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tk-nokta { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tk-renk); }

/* Üst çubuk */
.tk-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-bottom: 16px; }
.tk-baslik { margin-right: auto; min-width: 0; }
.tk-baslik h1 { margin: 0; font-size: 26px; letter-spacing: -.02em; line-height: 1.15; }
.tk-baslik p { margin: 3px 0 0; font-size: 13px; }
.tk-gezinti { display: inline-flex; align-items: stretch; height: 38px; border: 1px solid var(--cizgi-koyu); border-radius: var(--yaricap);
    background: var(--kart); overflow: hidden; }
.tk-gezinti a { display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; color: var(--metin);
    font-size: 13.5px; font-weight: 600; text-decoration: none; transition: background .15s, color .15s; }
.tk-gezinti a + a { border-left: 1px solid var(--cizgi); }
.tk-gezinti a:hover { background: var(--uzerinde); }
.tk-gezinti a.tk-ok { width: 38px; padding: 0; color: var(--soluk); }
.tk-gezinti a.tk-ok:hover { color: var(--metin); }
.tk-gezinti a.pasif { color: var(--soluk); }
.tk-secici { display: inline-flex; gap: 2px; padding: 3px; background: var(--yuzey-2); border: 1px solid var(--cizgi); border-radius: 12px; }
.tk-secici a { padding: 6px 15px; border-radius: 9px; color: var(--soluk); font-size: 13.5px; font-weight: 600; text-decoration: none;
    transition: background .15s, color .15s; }
.tk-secici a:hover { color: var(--metin); }
.tk-secici a[aria-current] { background: var(--kart); color: var(--metin);
    box-shadow: 0 1px 2px rgba(15, 26, 43, .12), 0 0 0 1px var(--cizgi); }
button.tk-abone-dugme { display: inline-flex; align-items: center; gap: 8px; height: 38px; margin: 0; padding: 0 14px;
    background: var(--kart); color: var(--metin); border: 1px solid var(--cizgi-koyu); }
button.tk-abone-dugme:hover { background: var(--uzerinde); }
button.tk-abone-dugme .tk-i { color: var(--vurgu); }
.tk-durum-nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--iyi);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--iyi) 22%, transparent); }

/* Tür süzgeci */
.tk-suzgec { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
button.tk-cip { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 5px 11px 5px 10px; border-radius: 999px;
    background: color-mix(in srgb, var(--tk-renk) 7%, var(--kart)); color: var(--metin);
    border: 1px solid color-mix(in srgb, var(--tk-renk) 28%, var(--cizgi)); font-size: 12.5px; font-weight: 600; }
button.tk-cip:hover { background: color-mix(in srgb, var(--tk-renk) 16%, var(--kart)); }
.tk-cip .tk-sayi { color: var(--soluk); font-variant-numeric: tabular-nums; }
button.tk-cip[aria-pressed="false"] { background: transparent; color: var(--soluk); border-style: dashed; border-color: var(--cizgi-koyu); }
button.tk-cip[aria-pressed="false"] .tk-nokta { background: transparent; box-shadow: inset 0 0 0 2px var(--tk-renk); }
button.tk-cip[aria-pressed="false"] .tk-ad { text-decoration: line-through; }
button.tk-hepsini-goster { margin: 0 4px; font-size: 12.5px; }
.tk-suzgec-not { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; color: var(--soluk); }
.tk-uyari-isaret { flex: none; display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%;
    background: var(--uyari); color: var(--kart); font-size: 10px; font-weight: 800; line-height: 1; }

/* Izgara (ay ve hafta) */
.tk-izgara { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--kart); border: 1px solid var(--cizgi);
    border-radius: 14px; overflow: hidden; box-shadow: var(--golge); }
.tk-gun-adi { padding: 10px 10px 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--soluk); background: var(--yuzey-2); border-bottom: 1px solid var(--cizgi); }
.tk-gun { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; min-height: 122px; padding: 6px 6px 8px;
    border-right: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); }
.tk-izgara > :nth-child(7n) { border-right: 0; }
.tk-izgara > .tk-gun:nth-last-child(-n+7) { border-bottom: 0; }
.tk-gun.hafta-sonu { background: color-mix(in srgb, var(--yuzey-2) 70%, var(--kart)); }
.tk-gun.diger-ay { background: var(--zemin); }
.tk-gun.diger-ay .tk-gun-no { color: var(--soluk); font-weight: 600; }
.tk-gun.diger-ay .tk-e { opacity: .65; }
.takvim-sayfa:not(.tk-gizle-tatil) .tk-gun.tatil { background: color-mix(in srgb, var(--tk-tatil) 7%, var(--kart)); }
.tk-gun-ust { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 26px; margin-bottom: 2px; }
.tk-gun-no { display: inline-grid; place-items: center; flex: none; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px;
    color: var(--metin); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tk-ay-kisa { font-size: 11.5px; font-weight: 600; color: var(--soluk); }
.tk-gun.bugun { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--vurgu) 50%, transparent);
    background: color-mix(in srgb, var(--vurgu) 4%, var(--kart)); }
.tk-gun.bugun .tk-gun-no { background: var(--birincil); color: #fff;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--birincil) 40%, transparent); }
a.tk-tatil, .tk-tatil { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tk-renk);
    font-size: 11.5px; font-weight: 600; text-decoration: none; cursor: pointer; }
.tk-tatil:hover { text-decoration: underline; }

/* Etkinlik hapı */
.tk-e { color: var(--metin); text-decoration: none; cursor: pointer; }
.tk-e:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 1px; }
.tk-hap { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 3px 7px 3px 6px; border-radius: 7px;
    font-size: 12px; line-height: 1.3; background: color-mix(in srgb, var(--tk-renk) var(--tk-dolgu), var(--kart));
    transition: background .15s; }
.tk-hap:hover { background: color-mix(in srgb, var(--tk-renk) 24%, var(--kart)); }
.tk-hap .tk-nokta { width: 7px; height: 7px; }
.tk-hap b { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--tk-renk) 65%, var(--metin)); }
.tk-hap .tk-e-baslik { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-hap.tk-uyarili { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--uyari) 55%, transparent); }
.tk-hap .tk-e-aciklama { display: none; }
.tk-ay .tk-hap.tk-fazla { display: none; }
button.tk-daha { align-self: flex-start; margin: 0; padding: 2px 7px; border-radius: 6px; background: none; color: var(--soluk);
    font-size: 11.5px; font-weight: 700; }
button.tk-daha:hover { background: var(--uzerinde); color: var(--metin); }

/* Hafta: sütunlarda kartlar (saat aralığı, başlık, açıklama) */
.tk-hafta .tk-gun { min-height: 440px; gap: 6px; padding: 8px; }
.tk-hafta .tk-gun-no { min-width: 30px; height: 30px; font-size: 15px; }
.tk-hafta .tk-hap { flex-wrap: wrap; align-items: flex-start; gap: 2px 6px; padding: 7px 9px; border-radius: 9px;
    border-left: 3px solid var(--tk-renk); }
.tk-hafta .tk-hap .tk-nokta { display: none; }
.tk-hafta .tk-hap b { flex-basis: 100%; font-size: 11.5px; }
.tk-hafta .tk-hap .tk-e-baslik { white-space: normal; font-weight: 600; }
.tk-hafta .tk-hap .tk-e-aciklama { display: -webkit-box; flex-basis: 100%; overflow: hidden; color: var(--soluk); font-size: 11.5px;
    white-space: pre-line; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Gün gün liste (Liste görünümü; telefonda ızgaranın altında) */
.tk-ajanda { display: none; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; overflow: hidden; box-shadow: var(--golge); }
.tk-liste .tk-izgara { display: none; }
.tk-liste .tk-ajanda { display: block; }
.tk-ajanda-gun { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; padding: 14px 18px;
    border-bottom: 1px solid var(--cizgi); scroll-margin-top: 72px; }
.tk-ajanda-gun:last-of-type { border-bottom: 0; }
.tk-ajanda-gun.tk-gizli { display: none; }
.tk-ajanda-gun.bugun { background: color-mix(in srgb, var(--vurgu) 5%, var(--kart)); }
.tk-ajanda-gun.tk-vurgula { animation: tk-vurgula 1.2s var(--egri); }
@keyframes tk-vurgula { from { background: var(--vurgu-zemin); } }
.tk-ajanda-tarih { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 4px 10px; }
.tk-ajanda-no { font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; min-width: 32px; }
.tk-ajanda-gun.bugun .tk-ajanda-no { color: var(--vurgu-yazi); }
.tk-ajanda-gunadi { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.tk-ajanda-tarih small { display: block; font-size: 11.5px; color: var(--soluk); }
.tk-bugun-rozet { padding: 2px 8px; border-radius: 999px; background: var(--birincil); color: #fff; font-size: 11px; font-weight: 700; }
.tk-ajanda-liste { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tk-bos-gun { display: none; margin: 4px 0; color: var(--soluk); font-size: 13px; }
.tk-ajanda-gun.tk-bos .tk-bos-gun { display: block; }
.tk-satir { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 9px 12px;
    border-radius: 10px; border-left: 3px solid var(--tk-renk); background: color-mix(in srgb, var(--tk-renk) 6%, var(--kart));
    transition: background .15s; }
.tk-satir:hover { background: color-mix(in srgb, var(--tk-renk) 13%, var(--kart)); }
.tk-e-saat { padding-top: 1px; color: var(--metin-2); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tk-e-govde { min-width: 0; }
.tk-satir .tk-e-baslik { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; }
.tk-e-tur { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; color: var(--soluk); font-size: 12px; }
.tk-e-tur .tk-nokta { width: 7px; height: 7px; }
.tk-uyari-metin { padding: 0 7px; border-radius: 999px; background: var(--uyari-zemin); color: var(--uyari-metin); font-weight: 600; }
.tk-satir .tk-e-aciklama { display: -webkit-box; margin-top: 3px; overflow: hidden; color: var(--soluk); font-size: 12.5px;
    white-space: pre-line; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tk-e-ok { margin-top: 2px; color: var(--soluk); }
.tk-bos-durum { display: grid; justify-items: center; gap: 6px; padding: 38px 16px; color: var(--soluk); text-align: center; }
.tk-bos-durum .tk-i { width: 34px; height: 34px; stroke-width: 1.5; color: var(--cizgi-koyu); }
.tk-bos-durum p { margin: 0; }

/* Ayrıntı kartı */
.tk-perde { position: fixed; inset: 0; z-index: 79; background: var(--perde); }
.tk-kart { position: fixed; z-index: 80; width: min(360px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow-y: auto;
    padding: 14px 18px 18px; background: var(--kart); color: var(--metin); border: 1px solid var(--cizgi);
    border-top: 4px solid var(--tk-renk); border-radius: 14px; box-shadow: var(--golge-buyuk); animation: tk-belir .16s var(--egri); }
.tk-kart:not([class*="tk-tur-"]) { border-top-color: var(--vurgu); }
.tk-kart[hidden], .tk-perde[hidden] { display: none; }
@keyframes tk-belir { from { opacity: 0; transform: translateY(4px); } }
.tk-kart-ust { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.tk-kart-tur { display: inline-flex; align-items: center; gap: 7px; color: var(--soluk); font-size: 12px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; }
.tk-kart:not([class*="tk-tur-"]) .tk-kart-tur .tk-nokta { display: none; }
button.tk-kapat { display: inline-grid; place-items: center; width: 32px; height: 32px; margin: 0 -8px 0 0; padding: 0; border-radius: 8px;
    background: none; color: var(--soluk); }
button.tk-kapat:hover { background: var(--uzerinde); color: var(--metin); }
.tk-kart h2 { margin: 0 0 6px; font-size: 17px; line-height: 1.3; }
.tk-kart-zaman { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 10px; color: var(--metin-2); font-size: 13px; }
.tk-kart-zaman [data-k="saat"] { font-weight: 700; }
.tk-kart-uyari { display: inline-block; margin: 0 0 10px; padding: 3px 10px; border-radius: 999px; background: var(--uyari-zemin);
    color: var(--uyari-metin); font-size: 12.5px; font-weight: 600; }
.tk-kart-uyari[hidden], .tk-kart-aciklama[hidden], .tk-kart-zaman[hidden], .tk-kart-gunler[hidden], .tk-kart-ac[hidden] { display: none; }
.tk-kart-aciklama { margin: 0 0 14px; font-size: 13.5px; white-space: pre-line; overflow-wrap: anywhere; }
.tk-kart-gunler { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 2px; }
.tk-kart-gunler .tk-hap { padding: 6px 9px; font-size: 13px; }
.tk-kart-ac { display: inline-flex; }

/* Abonelik penceresi */
dialog.tk-pencere { width: min(580px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0; color: var(--metin);
    background: var(--kart); border: 1px solid var(--cizgi); border-radius: 16px; box-shadow: var(--golge-buyuk); }
dialog.tk-pencere::backdrop { background: rgba(15, 26, 43, .45); }
.tk-pencere-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 12px;
    border-bottom: 1px solid var(--cizgi); }
.tk-pencere-ust h2 { margin: 0; font-size: 17px; }
.tk-pencere-govde { padding: 6px 20px 20px; }
.tk-adres { display: flex; gap: 8px; }
.tk-adres input { flex: 1; min-width: 0; }
.tk-adres button { margin: 0; flex: none; }
.tk-pencere-alt { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cizgi); }
.tk-pencere-alt form, .tk-pencere-alt button { margin: 0; }

/* Telefon: küçük ızgara (noktalar) + altında gün gün liste, kart alttan açılır */
@media (max-width: 640px) {
    .tk-ust { gap: 10px 8px; margin-bottom: 12px; }
    .tk-baslik { flex-basis: 100%; }
    .tk-baslik h1 { font-size: 22px; }
    .tk-gezinti, .tk-secici { height: 36px; }
    .tk-gezinti a { padding: 0 10px; }
    .tk-gezinti a.tk-ok { width: 32px; }
    .tk-secici a { padding: 5px 10px; }
    button.tk-abone-dugme { height: 36px; margin-left: auto; padding: 0 9px; }
    button.tk-abone-dugme .tk-metin { display: none; }
    .tk-suzgec { flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px 12px; padding: 0 12px 2px; scrollbar-width: none; }
    .tk-suzgec > * { flex: none; }
    .tk-suzgec-not { display: none; }

    .tk-liste .tk-izgara, .tk-izgara { display: grid; border-radius: 14px; }
    .tk-gun-adi { padding: 8px 0 6px; font-size: 10.5px; letter-spacing: .03em; text-align: center; }
    .tk-gun, .tk-hafta .tk-gun { min-height: 54px; padding: 5px 2px 6px; gap: 3px; align-items: center; border-right: 0; border-bottom: 0;
        cursor: pointer; flex-flow: row wrap; justify-content: center; align-content: flex-start; }
    .tk-gun-ust { flex-basis: 100%; justify-content: center; min-height: 0; margin: 0 0 2px; }
    .tk-gun-no, .tk-hafta .tk-gun-no { min-width: 28px; height: 28px; font-size: 13.5px; }
    .tk-ay-kisa, .tk-gun-ust .tk-tatil { display: none; }
    .tk-gun.bugun { box-shadow: none; background: none; }
    .tk-gun.tk-secili-gun .tk-gun-no { box-shadow: inset 0 0 0 2px var(--vurgu); }
    .tk-gun.bugun.tk-secili-gun .tk-gun-no { box-shadow: 0 0 0 2px var(--kart), 0 0 0 4px var(--vurgu); }
    .tk-izgara .tk-e, .tk-hafta .tk-izgara .tk-hap { pointer-events: none; width: 6px; height: 6px; min-width: 0; padding: 0; gap: 0;
        border: 0; border-radius: 50%; background: var(--tk-renk); box-shadow: none; font-size: 0; }
    .tk-izgara .tk-e > * { display: none; }
    .tk-izgara .tk-hap.tk-fazla, button.tk-daha { display: none; }

    .tk-ajanda, .tk-liste .tk-ajanda { display: block; margin-top: 14px; }
    .tk-ajanda-gun { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 14px; }
    .tk-ajanda-no { font-size: 22px; }
    .tk-ajanda-tarih > span:not(.tk-bugun-rozet) { display: flex; align-items: baseline; gap: 6px; }
    .tk-satir { grid-template-columns: 62px minmax(0, 1fr) auto; gap: 10px; padding: 9px 10px; }

    .tk-kart { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 82vh; padding: 12px 18px calc(20px + env(safe-area-inset-bottom));
        border-radius: 18px 18px 0 0; border-left: 0; border-right: 0; border-bottom: 0; animation: tk-yuksel .22s var(--egri); }
    .tk-kart::before { content: ""; display: block; width: 38px; height: 4px; margin: 0 auto 8px; border-radius: 4px; background: var(--cizgi-koyu); }
    .tk-kart-ac { width: 100%; justify-content: center; padding: 12px; }
    @keyframes tk-yuksel { from { transform: translateY(40px); opacity: .4; } }
}

/* Masraf: karekoddan doldurulan alanlar */
input.karekoddan, select.karekoddan { border-color: var(--yesil); background: color-mix(in srgb, var(--yesil) 10%, transparent); }
input[type=file].gizli-dosya { display: none; }
/* Masraf: canlı karekod tarama (yalnızca https / localhost) */
.canli-tarama { position: fixed; inset: 0; z-index: 100; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.canli-tarama video { width: 100%; height: 100%; object-fit: cover; }
.canli-cerceve { position: absolute; top: 50%; left: 50%; width: 60vmin; height: 60vmin; transform: translate(-50%, -50%);
    border: 3px solid rgba(255,255,255,.85); border-radius: 14px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); pointer-events: none; }
.canli-durum { position: absolute; top: 16px; left: 16px; right: 16px; margin: 0; padding: 10px 12px; border-radius: 10px;
    background: rgba(0,0,0,.6); color: #fff; font-size: 14px; text-align: center; }
.canli-dugmeler { position: absolute; bottom: 24px; left: 16px; right: 16px; display: flex; gap: 12px; justify-content: center; }
.canli-dugmeler button { min-width: 140px; }
fieldset.belge-secimi { border: 0; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
fieldset.belge-secimi legend { font-weight: 600; margin-bottom: 4px; width: 100%; }
fieldset.belge-secimi .ipucu { width: 100%; margin: 0; }
/* Masraf onayı */
.eylem-kutusu { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 12px 0; padding: 12px;
    border: 1px solid var(--cizgi); border-radius: 10px; background: color-mix(in srgb, var(--vurgu) 5%, transparent); }
.eylem-kutusu form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0; }
.eylem-kutusu input[type=text] { min-width: 220px; margin: 0; }
button.kucuk { padding: 4px 10px; font-size: 12.5px; }
ul.gecmis { padding-left: 18px; font-size: 13px; }
.etiket.dikkat { background: var(--uyari-zemin); color: var(--uyari-metin); margin-left: 0; font-weight: 600; }
/* Masraf süreci adım göstergesi */
ol.adimlar { list-style: none; counter-reset: adim; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 12px 0; }
ol.adimlar li { counter-increment: adim; flex: 1 1 140px; padding: 8px 10px; border-radius: 8px; font-size: 13px;
    background: var(--zemin); color: var(--soluk); border: 1px solid transparent; }
ol.adimlar li::before { content: counter(adim) ". "; font-weight: 700; }
ol.adimlar li.bitti { color: var(--iyi); }
ol.adimlar li.bitti::before { content: "✓ "; }
ol.adimlar li.simdi { background: var(--vurgu-zemin); border-color: var(--vurgu); color: inherit; font-weight: 600; }
.eylem-kutusu.vurgu { background: color-mix(in srgb, var(--yesil) 10%, transparent); border-color: var(--yesil); }
.evrak-formu .tam { width: 100%; }
.evrak-formu label.onay { display: block; margin: 4px 0; }
tr.gecikmis td { background: color-mix(in srgb, var(--hata) 8%, transparent); }
tr.gecikmis td:first-child a { color: var(--hata); font-weight: 600; }
details.satir-ici { display: inline-block; margin-left: 6px; font-size: 12.5px; }

/* Onay bekleyen sayısı (menü) ve ana sayfa kutuları */
.menu-rozet { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 5px; border-radius: 9px; font-size: 11px;
    line-height: 18px; text-align: center; font-weight: 600; color: #fff; background: var(--hata-dolgu); vertical-align: middle; }
.onay-kutusu { border-left: 4px solid var(--hata); }
.onay-kutusu .geciken td { color: var(--hata); }
.bugun-liste { list-style: none; margin: 0; padding: 0; }
.bugun-liste li { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--cizgi); }
.bugun-liste li:last-child { border-bottom: 0; }
.bugun-liste .saat { min-width: 86px; color: var(--soluk); font-variant-numeric: tabular-nums; }
.hava { display: flex; align-items: center; gap: 10px; }
.hava b { font-size: 20px; }

/* Servis formu: sipariş giriş ekranının kart düzeni üzerine iki sütunlu ızgara, satır kartları ve yan yana onay kartları */
.servis-sayfa { max-width: 1040px; }
.servis-sayfa .sayfa-baslik h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.servis-sayfa .sayfa-baslik h1 .etiket { margin: 0; font-size: 12px; }
.servis-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; margin-top: 8px; }
.servis-izgara .genis { grid-column: 1 / -1; }
.servis-izgara textarea { min-height: 110px; resize: vertical; }
.servis-sayfa .secili { background: var(--vurgu-zemin); border-radius: 10px; margin-bottom: 6px; }
.servis-sayfa .secili strong { font-size: 15px; }
.servis-sayfa #adresSec { margin-bottom: 6px; }
.servis-sayfa .sayac { color: var(--uyari-metin); }
.malzeme-ust { display: grid; grid-template-columns: 1fr 120px; gap: 0 14px; align-items: start; }
.malzeme-ust .malzeme-ara { position: relative; }
.malzeme-ust .sonuclar { position: absolute; left: 0; right: 0; z-index: 20; background: var(--kart); box-shadow: 0 12px 28px rgba(20,24,28,.14); max-height: 340px; }
.sonuclar .sonuc small { color: var(--soluk); }
.sonuclar button.secili { background: var(--vurgu-acik, rgba(0,110,200,.12)); outline: 2px solid var(--vurgu, #0a6ebd); outline-offset: -2px; }
.bos-satir { margin: 12px 0 0; padding: 18px; text-align: center; color: var(--soluk); border: 1.5px dashed var(--cizgi-koyu); border-radius: 12px; font-size: 14px; }
.servis-sayfa .satir-alanlar { grid-template-columns: 110px 170px 1fr; }
.servis-sayfa .satir-seri { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); gap: 8px; margin-top: 6px; }
.servis-sayfa .satir + .satir .satir-seri .satir-alan > span { display: inline; }
.garanti-durumu { margin: 6px 0 2px; padding: 6px 10px; border-radius: 6px; font-size: 13px; background: var(--iyi-zemin); color: var(--iyi); }
.garanti-durumu.bitti { background: var(--uyari-zemin); color: var(--uyari-metin); }
.servis-sayfa .satir-alan input:not([type=number]) { font-size: 14px; }
.ucret-toplam { display: grid; grid-template-columns: minmax(0, 260px) 1fr; gap: 16px; align-items: start; margin-top: 16px; }
.ucret-toplam .ucret input { font-size: 16px; }
.ucret-toplam dl.toplamlar { margin: 0 0 0 auto; width: 100%; max-width: 340px; }
.ucret-toplam .toplam-notu { grid-column: 1 / -1; margin: 0; text-align: right; }
.girdi-dugme { display: flex; gap: 8px; align-items: stretch; }
.girdi-dugme select { flex: 1; min-width: 0; }
.girdi-dugme button { margin: 0; white-space: nowrap; }
details.kart-acilir { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; padding: 0 20px; margin: 0 0 14px; }
details.kart-acilir > summary { cursor: pointer; padding: 16px 0; font-weight: 700; font-size: 15px; list-style: none; display: flex; align-items: center; gap: 8px; }
details.kart-acilir > summary::-webkit-details-marker { display: none; }
details.kart-acilir > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--soluk); border-bottom: 2px solid var(--soluk); transform: rotate(-45deg); transition: transform .15s; }
details.kart-acilir[open] > summary::before { transform: rotate(45deg); }
details.kart-acilir[open] { padding-bottom: 18px; }
.kontrol-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 4px 14px; margin-bottom: 12px; }
table.kucuk-tablo { margin: 10px 0 8px; }
table.kucuk-tablo input { width: 100%; }
dialog.kucuk-pencere { width: min(440px, calc(100vw - 32px)); height: auto; padding: 22px 24px; border: 0; border-radius: 16px; box-shadow: 0 24px 60px rgba(20,24,28,.25); }
dialog.kucuk-pencere::backdrop { background: rgba(20,24,28,.45); }
dialog.kucuk-pencere h2 { margin: 0 0 4px; }
.pencere-dugmeler { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.pencere-dugmeler button { margin: 0; }

/* Servis formu detayı */
.onay-kartlari { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 0 16px; }
.onay-karti { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; padding: 16px 18px 18px; }
.onay-karti::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cizgi-koyu); }
.onay-karti.d-BEKLIYOR::before { background: var(--turuncu); }
.onay-karti.d-ONAYLANDI::before { background: var(--yesil); }
.onay-karti.d-REDDEDILDI::before { background: var(--hata-dolgu); }
.onay-karti header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.onay-karti h2 { margin: 0; font-size: 15px; }
.onay-karti p { margin: 0; font-size: 14px; }
.onay-karti form { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.onay-karti form input { flex: 1; min-width: 140px; margin: 0; }
.onay-karti form button { margin: 0; }
.etiket.o-BEKLIYOR { background: var(--uyari-zemin); color: var(--uyari-metin); }
.etiket.o-ONAYLANDI { background: var(--bilgi-zemin); color: var(--bilgi-metin); }
.etiket.o-REDDEDILDI { background: var(--hata-zemin); color: var(--hata); }
.etiket.f-TAMAMLANDI { background: var(--bilgi-zemin); color: var(--bilgi-metin); }
.etiket.f-ONAYDA { background: var(--uyari-zemin); color: var(--uyari-metin); }
.etiket.f-IPTAL { background: var(--hata-zemin); color: var(--hata); }
.zaman-cizelgesi { list-style: none; margin: 0; padding: 0; }
.zaman-cizelgesi li { position: relative; padding: 0 0 12px 20px; font-size: 14px; }
.zaman-cizelgesi li::before { content: ""; position: absolute; left: 4px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--birincil); }
.zaman-cizelgesi li::after { content: ""; position: absolute; left: 7.5px; top: 17px; bottom: 0; width: 1px; background: var(--cizgi-koyu); }
.zaman-cizelgesi li:last-child::after { display: none; }
.zaman-cizelgesi small { display: block; color: var(--soluk); font-size: 12.5px; }
@media (max-width: 760px) {
    .servis-izgara, .onay-kartlari, .ucret-toplam { grid-template-columns: 1fr; }
    .malzeme-ust { grid-template-columns: 1fr 90px; }
    .servis-sayfa .satir-alanlar, .servis-sayfa .satir-seri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .servis-sayfa .satir-toplam { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; }
    .ucret-toplam .toplam-notu { text-align: left; }
}.hata-metni { color: var(--hata); }
.kutu-baslik { margin: 0 0 6px; font-size: 14px; text-transform: uppercase; letter-spacing: .4px; color: var(--soluk); }
.servis-sayfa .servis-izgara > .kutu { margin: 0 0 14px; }
.iptal-formu { margin-top: 18px; }
/* Sık liste (servis formları): küçük yazı, alt satırda ikincil bilgi (ör. seri no). */
table.sik-liste { font-size: 0.875rem; }
table.sik-liste th, table.sik-liste td { padding-top: 6px; padding-bottom: 6px; }
table.sik-liste .alt-bilgi { display: block; color: var(--soluk); font-size: 0.8rem; }
table.sik-liste .alt-bilgi a { color: inherit; }

/* =====================================================================
   Kabuk (arayüz yenilemesi Faz 1, 04.11.2026; örnek docs/tasarim/arayuz-ornegi.html): solda daraltılabilir menü
   (yalnız simgeler kalır, üzerine gelince alt menü açılır), üstte ince çubuk (yol, destek, tema); telefonda menü
   çekmeceye döner ve altta sekme çubuğu çıkar. Sınıf adları (ym-, uc-, alt-sekme) bayi portalının eski .ust menüsüyle
   karışmasın diye ayrıdır. Menünün daraltılmış olması sayfa boyanmadan <html class="menu-dar"> ile uygulanır.
   ===================================================================== */
.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:root { --uzerinde: color-mix(in srgb, var(--metin) 7%, transparent); }
kbd { font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--cizgi); background: var(--yuzey-2); color: var(--soluk); }

body:has(> .yan-menu) { padding-left: var(--menu-genislik); }
@media (min-width: 901px) { html.menu-dar { --menu-genislik: var(--ray-genislik); } }
.kabuk-hazir body:has(> .yan-menu) { transition: padding-left .3s var(--egri); }

.yan-menu {
    position: fixed; z-index: 30; inset: 0 auto 0 0; width: var(--menu-genislik);
    display: flex; flex-direction: column; min-height: 0; background: var(--menu-zemin); border-right: 1px solid var(--cizgi);
}
.kabuk-hazir .yan-menu { transition: width .3s var(--egri), transform .32s var(--egri), visibility .32s; }
.yan-menu [hidden] { display: none !important; }
.ym-marka { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 16px; flex: none; }
.ym-logo { display: grid; place-items: center; width: 34px; height: 34px; flex: none; }
.ym-logo svg { width: 30px; height: 30px; }
.ym-logo .ym-logo-delik { fill: var(--menu-zemin); }
.ym-marka-ad { display: block; min-width: 0; color: var(--metin); text-decoration: none; font-weight: 700; font-size: 15px; line-height: 1.2; white-space: nowrap; }
.ym-marka-ad b { color: var(--vurgu); }
.ym-marka-ad small { display: block; font-weight: 500; font-size: 11.5px; color: var(--soluk); overflow: hidden; text-overflow: ellipsis; }
.ym-marka-ad:hover small { color: var(--vurgu); }

.ym-ara {
    display: flex; align-items: center; gap: 8px; margin: 2px 12px 6px; height: 36px; padding: 0 10px; flex: none;
    border: 1px solid var(--cizgi); border-radius: 10px; background: var(--kart); color: var(--soluk); font-weight: 400; cursor: text;
}
.ym-ara:focus-within { border-color: var(--vurgu); box-shadow: 0 0 0 3px var(--vurgu-zemin); }
.ym-ara input[type=search], .ym-ara input[type=search]:focus {
    flex: 1; min-width: 0; width: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
    color: var(--metin); font-size: 13px;
}
.ym-ara kbd { margin-left: auto; }

.ym-liste { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 4px 10px 12px; scrollbar-width: thin; }
.ym-baslik { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--soluk); padding: 14px 10px 6px; white-space: nowrap; }
.yan-menu .ym-modul-dugme {
    position: relative; display: flex; align-items: center; gap: 11px; width: 100%; margin: 0; padding: 8px 10px;
    border: 0; border-radius: 9px; background: none; color: var(--metin); font-size: 14px; font-weight: 600;
    text-align: left; white-space: nowrap; text-decoration: none; transition: background .15s;
}
.yan-menu .ym-modul-dugme:hover { background: var(--uzerinde); }
.yan-menu .ym-modul-dugme:active { transform: none; }
.ym-modul-dugme .i { color: var(--soluk); }
.ym-modul.aktif-ic > .ym-modul-dugme .i:first-child, .ym-modul-dugme.aktif .i { color: var(--vurgu); }
.yan-menu .ym-modul-dugme.aktif { background: var(--vurgu-zemin); color: var(--vurgu-yazi); }
.ym-ok { margin-left: auto; width: 16px; height: 16px; }
.kabuk-hazir .ym-ok { transition: transform .25s var(--egri); }
.ym-modul.acik > .ym-modul-dugme .ym-ok { transform: rotate(90deg); }
.ym-alt-menu { display: grid; grid-template-rows: 0fr; }
.kabuk-hazir .ym-alt-menu { transition: grid-template-rows .28s var(--egri); }
.ym-modul.acik > .ym-alt-menu { grid-template-rows: 1fr; }
.ym-alt-menu > div { overflow: hidden; }
.ym-oge-satir { position: relative; }
.ym-oge {
    position: relative; display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 5px 34px 5px 39px;
    border-radius: 8px; color: var(--soluk); font-size: 13.5px; text-decoration: none; white-space: nowrap;
    transition: background .15s, color .15s;
}
.ym-oge:hover { color: var(--metin); background: var(--uzerinde); }
.ym-oge.aktif { color: var(--vurgu-yazi); background: var(--vurgu-zemin); font-weight: 600; }
.ym-oge.aktif::before { content: ""; position: absolute; left: 22px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--vurgu); }
.ym-oge.ym-fav { padding-left: 10px; padding-right: 10px; color: var(--metin); font-weight: 500; }
.ym-oge.ym-fav .i { color: var(--soluk); }
.ym-oge.ym-fav.aktif::before { display: none; }
.ym-oge.ym-fav.aktif .i { color: var(--vurgu); }
.ym-etiket { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ym-bolum { display: block; padding: 8px 10px 2px 39px; font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--soluk); }
.yan-menu .ym-yildiz, .yan-menu .ym-yildiz:hover {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px;
    display: grid; place-items: center; margin: 0; padding: 0; border: 0; border-radius: 6px; background: none;
    color: var(--soluk); opacity: 0; transition: opacity .15s, color .15s;
}
.ym-yildiz .i { width: 15px; height: 15px; }
.ym-oge-satir:hover .ym-yildiz, .yan-menu .ym-yildiz:focus-visible { opacity: 1; }
.yan-menu .ym-yildiz.secili { opacity: 1; color: #e2a400; }
.ym-yildiz.secili .i { fill: currentColor; }
.yan-menu .ym-yildiz:hover { color: #e2a400; }
@media (hover: none) { .yan-menu .ym-yildiz { opacity: .55; } }
.ym-rozet {
    display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 6px; margin-left: auto;
    border-radius: 10px; background: var(--hata-dolgu); color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
}
.ym-modul-dugme .ym-rozet + .ym-ok { margin-left: 6px; }
.ym-bos { margin: 6px 10px; font-size: 12.5px; color: var(--soluk); }
.ym-kayitlar .ym-kayit { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; height: auto; padding-top: 6px; padding-bottom: 6px; }
.ym-kayitlar .ym-kayit small { color: var(--soluk); font-size: 11.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yan-menu a.ym-isaret { outline: 2px solid var(--vurgu); outline-offset: -2px; background: var(--vurgu-zemin); }
.menu-dar .ym-kayitlar { display: none; }

.ym-alt { position: relative; flex: none; display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--cizgi); white-space: nowrap; }
.yan-menu .ym-kisi-dugme {
    display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; margin: 0; padding: 4px; border: 0; border-radius: 10px;
    background: none; color: var(--metin); font-size: 13px; font-weight: 400; text-align: left;
}
.yan-menu .ym-kisi-dugme:hover { background: var(--uzerinde); }
.ym-kisi { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--vurgu-zemin); color: var(--vurgu-yazi); font-weight: 700; font-size: 12.5px; }
.ym-kisi-ad { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; line-height: 1.2; }
.ym-kisi-ad small { display: block; overflow: hidden; text-overflow: ellipsis; color: var(--soluk); font-weight: 500; font-size: 11.5px; }

.simge-dugme, button.simge-dugme {
    position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none; margin: 0; padding: 0;
    border: 0; border-radius: 10px; background: none; color: var(--soluk); text-decoration: none; transition: background .15s, color .15s;
}
.simge-dugme:hover, button.simge-dugme:hover { background: var(--uzerinde); color: var(--metin); }
.simge-dugme.kucuk { width: 30px; height: 30px; border-radius: 8px; }
.kabuk-hazir .ym-daralt .i { transition: transform .3s var(--egri); }

/* Açılır küçük menüler: kişi (şifre, çıkış), tema */
.acilir-menu {
    position: absolute; z-index: 60; display: none; min-width: 210px; padding: 6px;
    background: var(--kart); border: 1px solid var(--cizgi); border-radius: 12px; box-shadow: var(--golge-buyuk);
}
.acilir-menu.acik { display: block; }
.acilir-menu a, .acilir-menu button, .acilir-menu button:hover {
    display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 8px 10px; border: 0; border-radius: 8px;
    background: none; color: var(--metin); font-size: 13.5px; font-weight: 500; text-align: left; text-decoration: none;
}
.acilir-menu a:hover, .acilir-menu button:hover { background: var(--uzerinde); }
.acilir-menu form { margin: 0; }
.acilir-menu .i { color: var(--soluk); }
.acilir-menu [aria-checked="true"] { color: var(--vurgu-yazi); font-weight: 600; }
.acilir-menu [aria-checked="true"]::after { content: "✓"; margin-left: auto; }
.acilir-menu [aria-checked="true"] .i { color: var(--vurgu); }
.acilir-menu hr { margin: 6px 0; border: 0; border-top: 1px solid var(--cizgi); }
.acilir-baslik { padding: 6px 10px 4px; font-size: 12px; color: var(--soluk); }
.acilir-baslik b { display: block; color: var(--metin); font-size: 13.5px; }
.ym-kisi-menu { left: 10px; bottom: calc(100% + 4px); }

/* Daraltılmış menü (yalnızca simgeler), geniş ekranda */
@media (min-width: 901px) {
    .menu-dar .ym-marka-ad, .menu-dar .ym-baslik, .menu-dar .ym-modul-dugme .ym-etiket, .menu-dar .ym-ok,
    .menu-dar .ym-liste .ym-alt-menu, .menu-dar .ym-fav, .menu-dar .ym-ara kbd, .menu-dar .ym-ara input, .menu-dar .ym-kisi-ad,
    .menu-dar .ym-bos { display: none; }
    .menu-dar .ym-marka { justify-content: center; padding: 0; }
    .menu-dar .ym-ara { justify-content: center; margin: 2px 12px 10px; padding: 0; cursor: pointer; }
    .menu-dar .yan-menu .ym-modul-dugme { justify-content: center; padding: 10px 0; }
    .menu-dar .ym-modul-dugme .ym-rozet { position: absolute; top: 3px; right: 7px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
    .menu-dar .ym-alt { flex-direction: column; padding: 10px 0; }
    .menu-dar .yan-menu .ym-kisi-dugme { flex: none; padding: 2px; }
    .menu-dar .ym-daralt .i { transform: rotate(180deg); }
    .menu-dar .ym-kisi-menu { left: calc(100% + 8px); bottom: 8px; }
}
.ym-ucan {
    position: fixed; z-index: 45; min-width: 230px; max-height: calc(100vh - 16px); overflow-y: auto; padding: 8px;
    background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; box-shadow: var(--golge-buyuk);
    opacity: 0; transform: translateX(-6px); pointer-events: none; transition: opacity .15s, transform .2s var(--egri);
}
.ym-ucan.gorunur { opacity: 1; transform: none; pointer-events: auto; }
.ym-ucan-baslik { padding: 6px 10px 8px; font-weight: 700; }
.ym-ucan .ym-oge { padding-left: 12px; padding-right: 10px; }
.ym-ucan .ym-oge.aktif::before { left: 3px; }
.ym-ucan .ym-bolum { padding-left: 12px; }
.ym-ucan .ym-yildiz { display: none !important; }

/* Üst çubuk */
.ust-cubuk {
    position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 6px; height: 56px; padding: 0 18px 0 24px;
    background: color-mix(in srgb, var(--zemin) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--cizgi);
}
.uc-yol { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; color: var(--soluk); font-size: 13px; white-space: nowrap; }
.uc-yol .i { width: 14px; height: 14px; }
.uc-yol b { overflow: hidden; text-overflow: ellipsis; color: var(--metin); font-weight: 600; }
.uc-sag { position: relative; display: flex; align-items: center; gap: 2px; margin-left: auto; }
.uc-tema-menu { right: 0; top: calc(100% + 6px); }
.uc-cekmece { display: none !important; }

.ym-perde { display: none; position: fixed; inset: 0; z-index: 55; background: var(--perde); }
.alt-sekmeler { display: none; }

/* Telefon ve dar ekran: menü soldan açılan çekmece, altta sekme çubuğu */
@media (max-width: 900px) {
    body:has(> .yan-menu) { padding-left: 0; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
    body:has(> .yan-menu):has(.alt-cubuk) { padding-bottom: 0; }
    .yan-menu { width: min(310px, 86vw); z-index: 58; transform: translateX(-104%); visibility: hidden; box-shadow: var(--golge-buyuk); }
    .cekmece-acik .yan-menu { transform: none; visibility: visible; }
    .cekmece-acik .ym-perde { display: block; }
    .cekmece-acik body { overflow: hidden; }
    .ym-daralt { display: none !important; }
    .ym-ara kbd { display: none; }
    .ym-ara input[type=search], .ym-ara input[type=search]:focus { font-size: 16px; } /* iOS 16 pikselden küçükte yakınlaştırır */
    .ust-cubuk { height: 54px; padding: 0 8px 0 6px; }
    .uc-cekmece { display: inline-grid !important; }
    .alt-sekmeler {
        position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
        padding: 6px 4px calc(8px + env(safe-area-inset-bottom)); background: var(--kart); border-top: 1px solid var(--cizgi);
    }
    body:has(.alt-cubuk) .alt-sekmeler { display: none; }
    .alt-sekme, button.alt-sekme, button.alt-sekme:hover {
        position: relative; display: grid; justify-items: center; gap: 3px; min-width: 0; margin: 0; padding: 5px 0 2px;
        border: 0; border-radius: 10px; background: none; color: var(--soluk); font-size: 11px; font-weight: 600; text-decoration: none;
    }
    .alt-sekme .i { width: 22px; height: 22px; }
    .alt-sekme .ad { max-width: 100%; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .alt-sekme.secili { color: var(--vurgu); }
    .alt-sekme.secili::before { content: ""; position: absolute; top: -7px; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--vurgu); }
    .alt-sekme .ym-rozet { position: absolute; top: 0; left: calc(50% + 6px); min-width: 17px; height: 17px; margin: 0; font-size: 10px; }
}

@media print {
    .yan-menu, .ust-cubuk, .alt-sekmeler, .ym-perde, .ym-ucan { display: none !important; }
    body:has(> .yan-menu) { padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .yan-menu, .ym-alt-menu, .ym-ok, .ym-ucan, body { transition: none !important; }
}

/* Firma formu: ana renk seçimi */
.renk-secimi { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.renk-secimi label { display: flex; align-items: center; gap: 7px; margin: 0; padding: 6px 12px 6px 8px; border: 1px solid var(--cizgi); border-radius: 999px; font-weight: 500; cursor: pointer; }
.renk-secimi label:has(input:checked) { border-color: var(--vurgu); background: var(--vurgu-zemin); font-weight: 600; }
.renk-secimi input { margin: 0; }
.renk-ornek { width: 16px; height: 16px; border-radius: 50%; flex: none; }

/* =====================================================================
   Ortak liste (arayüz yenilemesi Faz 2, 04.11.2026; static/js/liste.js): sayılı sekmeler, araç çubuğu, sütun başı
   arama, sıralama, genişlik tutamacı, süzgeç etiketleri, Sütunlar/Süzgeç panelleri (telefonda alttan açılır).
   ===================================================================== */
.akilli-liste .al-tablo [hidden], .akilli-liste .al-tablo tr[hidden] { display: none !important; }
/* Liste betiği hazırlayana kadar (sekme/süzgeç/sütun uygulanmadan) tablo gizli: önce eski, sonra yeni görünüm
   yanıp sönmesin (kullanıcı 04.11). Betik çalışmazsa tablo 3 sn sonra yine görünür. */
.akilli-liste:not(.al-hazir) .al-tablo { visibility: hidden; animation: al-goster 0s 6s forwards; }
@keyframes al-goster { to { visibility: visible; } }
/* Hazırlanırken logonun kareleri sağdan sola yanıp söner (kullanıcı isteği 04.11). */
.akilli-liste:not(.al-hazir) { position: relative; min-height: 50vh; }
.akilli-liste:not(.al-hazir)::before {
    content: "Liste hazırlanıyor…"; position: fixed; left: 50%; top: 45vh; transform: translate(-50%, -50%); z-index: 5;
    padding-top: 52px; min-width: 160px; text-align: center; color: var(--soluk, #6b7280); font-size: .9rem;
    background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22%3E%3Cstyle%3E.k%7Banimation:a 1.2s ease-in-out infinite;opacity:.15%7D.s1%7Banimation-delay:0s%7D.s2%7Banimation-delay:.3s%7D%40keyframes a%7B0%25,100%25%7Bopacity:.15;transform:translateX(0)%7D40%25%7Bopacity:1;transform:translateX(-1.5px)%7D%7D%3C/style%3E%3Crect class=%22k s1%22 x=%2218%22 y=%222%22 width=%2212%22 height=%2212%22 rx=%223.5%22 fill=%22%2359b7b3%22/%3E%3Ccircle class=%22k s1%22 cx=%2224%22 cy=%2224%22 r=%225%22 fill=%22none%22 stroke=%22%230077be%22 stroke-width=%222%22/%3E%3Crect class=%22k s2%22 x=%222%22 y=%222%22 width=%2212%22 height=%2212%22 rx=%223.5%22 fill=%22%230077be%22/%3E%3Crect class=%22k s2%22 x=%222%22 y=%2218%22 width=%2212%22 height=%2212%22 rx=%223.5%22 fill=%22%2359b7b3%22/%3E%3C/svg%3E") center top / 44px 44px no-repeat;
    animation: al-yukleyici-gizle 0s 6s forwards;
}
@keyframes al-yukleyici-gizle { to { visibility: hidden; } }
.al-sekmeler { display: flex; gap: 4px; overflow-x: auto; margin: 4px 0 12px; border-bottom: 1px solid var(--cizgi); scrollbar-width: none; }
.al-sekmeler .al-sekme, .al-sekmeler .al-sekme:hover {
    display: inline-flex; align-items: center; gap: 7px; flex: none; margin: 0 0 -1px; padding: 9px 12px; border: 0;
    border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--soluk); font-size: 13.5px; font-weight: 600; white-space: nowrap;
}
.al-sekmeler .al-sekme:hover { color: var(--metin); }
.al-sekmeler .al-sekme b { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--notr-zemin); color: var(--notr); font-size: 11.5px; text-align: center; }
.al-sekmeler .al-sekme.secili { color: var(--vurgu-yazi); border-bottom-color: var(--vurgu); }
.al-sekmeler .al-sekme.secili b { background: var(--vurgu-zemin); color: var(--vurgu-yazi); }
.al-arac { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.al-ara { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; max-width: 360px; height: 38px; margin: 0; padding: 0 11px;
    border: 1px solid var(--cizgi-koyu); border-radius: var(--yaricap); background: var(--girdi); color: var(--soluk); font-weight: 400; }
.al-ara:focus-within { border-color: var(--vurgu); box-shadow: 0 0 0 3px var(--vurgu-zemin); }
.al-ara input[type=search], .al-ara input[type=search]:focus { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.al-arac select.al-gorunum { width: auto; height: 38px; padding: 0 10px; margin: 0; }
.al-arac .al-dugme { display: inline-flex; align-items: center; gap: 7px; height: 38px; margin: 0; padding: 0 12px; }
.al-arac .al-dugme .i { width: 17px; height: 17px; }
.al-say { min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--birincil); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.al-suzgec-dugme { display: none !important; }
.al-bosluk { flex: 1; }
.al-yogunluk { display: inline-flex; padding: 3px; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yuzey-2); }
.al-yogunluk button, .al-yogunluk button:hover { margin: 0; padding: 5px 10px; border: 0; border-radius: 7px; background: none; color: var(--soluk); font-size: 12.5px; font-weight: 600; }
.al-yogunluk button.secili { background: var(--kart); color: var(--metin); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.al-cipler { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -2px 0 10px; }
.al-cip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px 0 11px; border-radius: 999px; background: var(--vurgu-zemin); color: var(--vurgu-yazi); font-size: 12.5px; font-weight: 600; }
.al-cip button, .al-cip button:hover { display: grid; place-items: center; width: 22px; height: 22px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; }
.al-cip button:hover { background: color-mix(in srgb, var(--vurgu) 15%, transparent); }
.al-cip .i { width: 13px; height: 13px; }
.al-temizle { font-size: 12.5px; }

.akilli-liste table.al-tablo { margin-top: 0; }
.akilli-liste tr[data-href] { cursor: pointer; }
.akilli-liste table.al-tablo.al-sabit { table-layout: fixed; max-width: none; min-width: 100%; }
.akilli-liste .al-sabit td, .akilli-liste .al-sabit th { overflow: hidden; text-overflow: ellipsis; }
.al-tablo thead th { position: relative; vertical-align: bottom; }
.al-tablo .al-baslik, .al-tablo .al-baslik:hover {
    display: inline-flex; align-items: center; gap: 4px; max-width: 100%; margin: 0; padding: 0; border: 0; background: none;
    color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; cursor: pointer;
}
.al-tablo .al-baslik:hover { color: var(--metin); }
.al-tablo th.al-sirali .al-baslik { color: var(--vurgu-yazi); }
.al-tablo th.al-sirali .al-baslik::after { content: "↑"; font-size: 12px; }
.al-tablo th.al-sirali.al-azalan .al-baslik::after { content: "↓"; }
.al-tutamac { position: absolute; top: 0; right: -4px; bottom: 0; z-index: 2; width: 9px; cursor: col-resize; touch-action: none; }
.al-tutamac::after { content: ""; position: absolute; top: 25%; bottom: 25%; left: 4px; width: 1px; background: var(--cizgi-koyu); opacity: 0; transition: opacity .15s; }
.al-tablo thead th:hover .al-tutamac::after, .al-surukleniyor .al-tutamac::after { opacity: 1; }
.al-surukleniyor, .al-surukleniyor * { cursor: col-resize !important; user-select: none; }
.al-tablo .al-suz-satiri th { padding: 0 6px 8px; background: var(--yuzey-2); text-transform: none; letter-spacing: 0; }
.al-tablo input.al-sutun-ara { width: 100%; min-width: 0; height: 28px; margin: 0; padding: 3px 8px; font-size: 12.5px; border-radius: 7px; }
.al-bos { padding: 34px 16px; text-align: center; color: var(--soluk); border: 1px dashed var(--cizgi-koyu); border-radius: 14px; margin-top: 10px; }
.al-bos b { display: block; color: var(--metin); margin-bottom: 4px; }
.al-alt { padding: 10px 2px 0; color: var(--soluk); font-size: 12.5px; }
/* Sunucu kipi: sayfalama, yükleniyor, hata */
.akilli-liste[data-kip="sunucu"] .al-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.al-sayfalama { display: inline-flex; align-items: center; gap: 4px; }
.al-sayfalama > span { padding: 0 6px; }
.al-sayfalama .dugme { min-width: 34px; margin: 0; }
.akilli-liste.al-yukleniyor .al-tablo tbody { opacity: .45; transition: opacity .15s; }
.al-hata { margin: 0 0 10px; }

.al-perde { display: none; position: fixed; inset: 0; z-index: 70; background: var(--perde); }
.al-perde.acik { display: block; }
.al-panel {
    position: fixed; z-index: 71; top: 0; right: 0; bottom: 0; width: min(380px, 100vw); display: flex; flex-direction: column;
    background: var(--kart); border-left: 1px solid var(--cizgi); box-shadow: var(--golge-buyuk);
    transform: translateX(105%); visibility: hidden; transition: transform .3s var(--egri), visibility .3s;
}
.al-panel.acik { transform: none; visibility: visible; }
.al-tutac { display: none; width: 40px; height: 4px; margin: 8px auto 0; border-radius: 4px; background: var(--cizgi-koyu); }
.al-panel-ust { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 16px 18px 10px; }
.al-panel-ust h2 { margin: 0 0 4px; font-size: 16px; }
.al-panel-ust p { margin: 0; color: var(--soluk); font-size: 12.5px; }
.al-panel-govde { flex: 1; overflow-y: auto; padding: 4px 12px 12px; }
.al-panel-alt { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--cizgi); }
.al-panel-alt .dugme { margin: 0; }
.al-sutun-satiri { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 9px; }
.al-sutun-satiri:hover { background: var(--uzerinde); }
.al-sutun-satiri.kapali { opacity: .7; }
.al-sutun-satiri.suruklenen { opacity: .4; }
.al-sutun-satiri label { display: flex; align-items: center; gap: 9px; flex: 1; margin: 0; font-weight: 500; font-size: 13.5px; cursor: pointer; }
.al-sutun-satiri label input { margin: 0; }
.al-tut { display: grid; place-items: center; width: 20px; color: var(--soluk); cursor: grab; }
.al-tut .i { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.al-sutun-satiri.kapali .al-tut { visibility: hidden; }
.al-panel-alan { display: block; margin: 0 6px 10px; }
.al-panel-alan input { margin-top: 4px; }
/* Sütunlar paneli: hazır görünüm seçimi, açma-kapama düğmeleri, adla kaydetme (04.11.2026) */
.al-gorunum-alan { margin: 0 6px 14px; padding-bottom: 14px; border-bottom: 1px solid var(--cizgi); }
.al-gorunum-alan label { display: block; margin-bottom: 5px; font-size: 12.5px; font-weight: 600; color: var(--soluk); }
.al-gorunum-alan select { width: 100%; margin: 0; }
.al-gorunum-sil { margin-top: 8px; font-size: 12.5px; }
.al-gorunum-sil[hidden], .al-sil-onay[hidden] { display: none; }
.al-sil-onay { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; }
.al-sil-onay span { flex: 1; min-width: 0; }
.al-sil-onay .dugme { margin: 0; }
.al-panel { width: min(400px, 100vw); }
.al-panel-dugmeler .dugme { white-space: nowrap; }
.al-sutun-listesi { display: flex; flex-direction: column; gap: 6px; }
.al-sutun-listesi .al-sutun-satiri { padding: 7px 8px; border: 1px solid var(--cizgi); border-radius: 11px; }
.al-sutun-listesi .al-sutun-satiri.kapali .al-sutun-ad { color: var(--soluk); }
.al-anahtar { position: relative; display: inline-block; width: 36px; height: 21px; flex: none; }
.al-anahtar input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.al-anahtar span { position: absolute; inset: 0; border-radius: 999px; background: var(--cizgi-koyu); transition: background .2s; }
.al-anahtar span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .22s var(--egri); }
.al-anahtar input:checked + span { background: var(--vurgu); }
.al-anahtar input:checked + span::after { transform: translateX(15px); }
.al-anahtar input:focus-visible + span { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.al-panel-alt:has(.al-panel-dugmeler) { flex-direction: column; align-items: stretch; }
.al-panel-dugmeler { display: flex; gap: 8px; }
.al-panel-dugmeler .dugme { flex: 1; }
.al-panel-dugmeler[hidden], .al-kaydet-form[hidden], .al-panel-not[hidden], .al-kaydet-hata[hidden] { display: none; }
.al-kaydet-form { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.al-kaydet-form label { font-size: 12.5px; font-weight: 600; color: var(--soluk); }
.al-kaydet-form input { margin: 0; }
.al-kaydet-not { margin: 0; font-size: 12px; color: var(--soluk); }
.al-kaydet-hata { margin: 0; font-size: 12.5px; color: var(--hata); }
.al-panel-not { margin: 0; font-size: 12.5px; color: var(--vurgu-yazi); }
.al-fab { display: none; }

/* Akıllı liste içeren sayfa ekranın bütün genişliğini kullanır (menü daraltılınca liste de genişler). */
.kart:has(.akilli-liste), .sayfa:has(.akilli-liste) { max-width: none; }
.kart:has(.akilli-liste) { margin: 20px 24px; }

@media (max-width: 640px) {
    .kart:has(.akilli-liste) { margin: 10px; }
    .akilli-liste .al-suzgec-dugme { display: inline-flex !important; }
    .al-ara { flex-basis: 100%; max-width: none; }
    .al-arac select.al-gorunum { flex: 1; min-width: 0; }
    .al-yogunluk, .al-bosluk, .akilli-liste .al-arac .al-dugme:last-child { display: none; }
    .akilli-liste table.al-tablo.al-sabit { table-layout: auto; width: 100% !important; }
    .al-panel { top: auto; left: 0; width: auto; max-height: 86vh; border-left: 0; border-radius: 22px 22px 0 0; transform: translateY(105%); }
    .al-panel.acik { transform: none; }
    .al-tutac { display: block; }
    .al-panel-alt .dugme { flex: 1; }
    .al-fab {
        display: grid; position: fixed; z-index: 24; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); width: 54px; height: 54px;
        place-items: center; border-radius: 18px; background: var(--birincil); color: #fff; text-decoration: none; font-size: 28px; line-height: 1;
        box-shadow: 0 10px 26px color-mix(in srgb, var(--birincil) 45%, transparent);
    }
}
/* Servis formu durum etiketleri (liste) */
.etiket.sf-TASLAK { background: var(--notr-zemin); color: var(--notr); }
.etiket.sf-ONAYDA { background: var(--uyari-zemin); color: var(--uyari-metin); }
.etiket.sf-TAMAMLANDI { background: var(--iyi-zemin); color: var(--iyi); }
.etiket.sf-SIPARISE_DONUSTU { background: var(--vurgu-zemin); color: var(--vurgu-yazi); }
.etiket.sf-IPTAL { background: var(--hata-zemin); color: var(--hata); }

/* Servis formu işlem şeridi (04.11.2026): düğmeler; gerekçe ve kod kutusu gerektiğinde açılır */
.sf-islemler { margin: 4px 0 16px; }
.sf-durum-satiri { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 10px; font-size: 13px; color: var(--soluk); }
.sf-dugmeler { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.sf-dugmeler form, .sf-dugmeler details { margin: 0; }
.sf-dugmeler button, .sf-dugmeler .dugme { margin: 0; }
.sf-yetkili { display: flex; flex-direction: column; gap: 2px; }
.sf-yetkili label { margin: 0; font-size: 11.5px; color: var(--soluk); }
.sf-yetkili select { margin: 0; min-width: 240px; }
.detay-sayfa details.sf-ac { position: relative; background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
.detay-sayfa details.sf-ac > summary { padding: 8px 16px; font-weight: 600; font-size: 14px; display: inline-flex; list-style: none; cursor: pointer;
    background: var(--kart); color: var(--metin); border: 1px solid var(--cizgi-koyu); border-radius: 8px; }
.detay-sayfa details.sf-ac > summary:hover, .detay-sayfa details.sf-ac[open] > summary { background: var(--zemin); }
.detay-sayfa details.sf-ac > summary::before { content: none; }
.detay-sayfa details.sf-ac > summary::-webkit-details-marker { display: none; }
.sf-ac .sf-ac-kutu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 340px; }
.sf-ac-kutu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; background: var(--kart);
    border: 1px solid var(--cizgi); border-radius: 10px; box-shadow: var(--golge-buyuk); }
.sf-ac-kutu input[name=gerekce] { flex: 1; min-width: 0; margin: 0; }
.sf-ac-kutu button { margin: 0; }
.sf-kod { margin-top: 10px; max-width: 520px; box-shadow: none; border-color: var(--uyari-cizgi); background: var(--uyari-zemin); }
.sf-kod label { width: 100%; margin: 0; font-size: 13px; }
.sf-kod input { width: 140px; margin: 0; letter-spacing: .2em; }
.sf-onay-metni { margin: 10px 0 0; font-size: 12.5px; }
.sf-liste-adim { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sf-liste-adim form { margin: 0; }
.sf-liste-adim button.kucuk { margin: 0; padding: 3px 9px; font-size: 12px; white-space: nowrap; }

/* Rol ekranı: yetki kataloğu (modül → konu → yetki) */
.rol-ust { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.rol-ust .genis { grid-column: 1 / -1; }
.yetki-modul { border: 1px solid var(--cizgi); border-radius: 6px; margin: 8px 0; }
.yetki-modul > summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; cursor: pointer; }
.yetki-modul > summary .modul-ad { font-weight: 600; }
.yetki-modul .secili-sayi { color: var(--soluk); font-size: 13px; }
.yetki-modul .modul-dugmeler { margin-left: auto; display: flex; gap: 6px; }
.yetki-modul .modul-dugmeler button { margin: 0; padding: 3px 9px; font-size: 12px; }
.yetki-modul.eski > summary .modul-ad { color: var(--soluk); }
.yetki-modul > .ipucu { padding: 0 12px; }
.yetki-tablosu { width: 100%; border-collapse: collapse; }
.yetki-tablosu td { padding: 5px 8px; border-top: 1px solid var(--cizgi); vertical-align: top; }
.yetki-tablosu .konu-satiri th { text-align: left; padding: 10px 8px 4px; font-size: 13px; color: var(--soluk); }
.yetki-tablosu td.sec { width: 28px; }
.yetki-tablosu .yetki-ad { display: inline; font-weight: 400; margin: 0; cursor: pointer; }
.yetki-tablosu small { display: block; }
.yetki-kod { margin-left: 6px; font-size: 11px; color: var(--soluk); background: none; }
.yetki-tablosu td.isaretler { white-space: nowrap; text-align: right; }
.yetki-tablosu td.kapsam { width: 100px; }
.yetki-tablosu td.kapsam select { margin: 0; padding: 3px 6px; width: auto; }
.sinif-isaret, .risk-isaret { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 11px; margin-left: 4px; }
.sinif-isaret { background: var(--zemin); color: var(--soluk); }
.risk-isaret.kritik { background: var(--hata-zemin); color: var(--hata); border: 1px solid var(--hata-cizgi); }
.risk-isaret.hassas { background: var(--uyari-zemin); color: var(--uyari-metin); }
@media (max-width: 700px) {
    .rol-ust { grid-template-columns: 1fr; }
    .yetki-modul .modul-dugmeler { margin-left: 0; }
    .yetki-tablosu td.isaretler { text-align: left; white-space: normal; }
}