/* ==========================================================================
   ServisPanel — Tasarım Sistemi
   Mobil öncelikli. Açık + koyu tema. Sıfır dış bağımlılık.
   ========================================================================== */

/* --- Tasarım token'ları --------------------------------------------------- */
/* Kaynak: waterlife.com.tr/assets/css/main.css :root bloğu.
   Kurumsal tasarım sistemi birebir alındı — renk, gölge, yarıçap, tipografi. */
:root {
    /* Primary — marka mavisi */
    --primary-50:  #EBF5FF;
    --primary-100: #D6EAFF;
    --primary-200: #B3D5FF;
    --primary-300: #80BFFF;
    --primary-400: #4DA6FF;
    --primary-500: #1A8CFF;
    --primary-600: #0066CC;
    --primary-700: #0052A3;
    --primary-800: #003D7A;
    --primary-900: #002952;

    /* Secondary — turkuaz-yeşil */
    --secondary-50:  #E6FCF7;
    --secondary-100: #CCF9EF;
    --secondary-500: #00CC99;
    --secondary-600: #00A37A;
    --secondary-700: #007A5C;

    /* Accent — turuncu */
    --accent-50:  #FFF4ED;
    --accent-100: #FFE6D5;
    --accent-500: #FF6B1A;
    --accent-600: #E55A15;
    --accent-700: #CC4A11;

    /* Neutral */
    --neutral-50:  #F8F9FA;
    --neutral-100: #F1F3F4;
    --neutral-200: #E8EAED;
    --neutral-300: #DADCE0;
    --neutral-400: #BDC1C6;
    --neutral-500: #9AA0A6;
    --neutral-600: #80868B;
    --neutral-700: #5F6368;
    --neutral-800: #3C4043;
    --neutral-900: #202124;

    /* --- Uygulama içi anlamsal adlar --- */
    --renk-marka:        var(--primary-600);
    --renk-marka-koyu:   var(--primary-700);
    --renk-marka-canli:  var(--primary-500);
    --renk-marka-acik:   var(--primary-50);
    --renk-yesil:        var(--secondary-500);
    --renk-yesil-koyu:   var(--secondary-600);
    --renk-turuncu:      var(--accent-500);

    /* Durum renkleri — kurumsal paletten */
    --renk-yeni:         var(--primary-600);
    --renk-yarin:        var(--neutral-600);
    --renk-ertelenen:    var(--accent-500);
    --renk-satis:        var(--primary-500);
    --renk-kapanmayan:   var(--neutral-900);
    --renk-demo:         var(--neutral-700);
    --renk-iptal:        #D93025;                /* sitede yok — Google kırmızısı */
    --renk-tamamlandi:   var(--secondary-600);

    /* Yüzeyler */
    --yuzey:             #ffffff;
    --yuzey-2:           var(--neutral-50);
    --yuzey-3:           var(--neutral-100);
    --kenar:             var(--neutral-200);
    --kenar-belirgin:    var(--neutral-300);

    /* Metin */
    --metin:             var(--neutral-900);
    --metin-2:           var(--neutral-700);
    --metin-3:           var(--neutral-500);
    --metin-ters:        #ffffff;

    /* Yarıçap — sitenin --radius-* ölçeği */
    --yaricap-sm:        .375rem;   /* 6px  · radius-md */
    --yaricap:           .5rem;     /* 8px  · radius-lg */
    --yaricap-lg:        1rem;      /* 16px · radius-2xl */
    --yaricap-xl:        1.5rem;    /* 24px · radius-3xl */

    --bosluk:            16px;
    --dokunma:           44px;      /* iOS/Android asgari dokunma hedefi */

    /* Gölgeler — sitenin --shadow-* tanımları */
    --golge-sm:  0 2px 15px -3px rgba(0,0,0,.07), 0 10px 20px -2px rgba(0,0,0,.04);
    --golge:     0 4px 25px -5px rgba(0,0,0,.10), 0 10px 10px -5px rgba(0,0,0,.04);
    --golge-lg:  0 10px 40px -10px rgba(0,0,0,.15), 0 20px 25px -5px rgba(0,0,0,.10);
    --golge-parlama: 0 0 20px rgba(0,102,204,.3);

    /* Türetilmiş zeminler.
       color-mix() Chrome 111+ gerektirdiği ve sahadaki eski Android
       WebView'larda çalışmadığı için hazır değer kullanılıyor. */
    --zemin-hata:     #FCE8E6;
    --kenar-iade:     #F0B3AC;                   /* iade kartının kenarı */
    --zemin-basari:   var(--secondary-50);
    --zemin-dikkat:   var(--accent-50);
    --zemin-bilgi:    var(--primary-50);
    --odak-halka:     rgba(0, 102, 204, .20);
    --golge-marka:    var(--golge-parlama);
    --golge-basari:   0 0 20px rgba(0, 163, 122, .30);
    --golge-tehlike:  0 0 20px rgba(217, 48, 37, .30);

    --gecis:     150ms cubic-bezier(.4, 0, .2, 1);

    /* Tipografi — sitedeki aileler; yerelde yoksa sistem yazı tipine düşer.
       İleride woff2 dosyaları assets/fonts/ altına konup @font-face ile
       gömülebilir (dış CDN'e bağımlı kalmamak için). */
    --yazi-baslik: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --yazi: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont,
            "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --yazi-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Koyu tema — kurumsal paletin koyu tonları temel alındı */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="acik"]) {
        --renk-marka:      var(--primary-400);
        --renk-marka-koyu: var(--primary-500);
        --renk-marka-acik: var(--primary-900);
        --renk-yeni:       var(--primary-400);
        --renk-satis:      var(--primary-300);
        --yuzey:           #16191D;
        --yuzey-2:         #1E2125;
        --yuzey-3:         #282B30;
        --kenar:           #34383D;
        --kenar-belirgin:  #45494F;
        --metin:           #E8EAED;
        --metin-2:         #BDC1C6;
        --metin-3:         #9AA0A6;
        --golge-sm: 0 1px 2px rgba(0, 0, 0, .3);
        --golge:    0 4px 25px -5px rgba(0, 0, 0, .5);
        --golge-lg: 0 10px 40px -10px rgba(0, 0, 0, .6);
        --zemin-hata:   #3B1F1D;
        --kenar-iade:   #6E332C;
        --zemin-basari: #0A2E24;
        --zemin-dikkat: #3A2413;
        --zemin-bilgi:  var(--primary-900);
        --odak-halka:   rgba(77, 166, 255, .25);
    }
}

:root[data-tema="koyu"] {
    --renk-marka:      var(--primary-400);
    --renk-marka-koyu: var(--primary-500);
    --renk-marka-acik: var(--primary-900);
    --renk-yeni:       var(--primary-400);
    --renk-satis:      var(--primary-300);
    --yuzey:           #16191D;
    --yuzey-2:         #1E2125;
    --yuzey-3:         #282B30;
    --kenar:           #34383D;
    --kenar-belirgin:  #45494F;
    --metin:           #E8EAED;
    --metin-2:         #BDC1C6;
    --metin-3:         #9AA0A6;
    --zemin-hata:   #3B1F1D;
    --kenar-iade:   #6E332C;
    --zemin-basari: #0A2E24;
    --zemin-dikkat: #3A2413;
    --zemin-bilgi:  var(--primary-900);
    --odak-halka:   rgba(77, 166, 255, .25);
}

/* --- Sıfırlama ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

/* Tarayıcının [hidden] için verdiği `display:none`, yazar stilindeki
   `display:flex` gibi kurallardan zayıftır. Bu satır olmadan `hidden`
   yazılan öğeler (ör. yan menü) ekranda kalır. */
[hidden] { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    font-family: var(--yazi);
    font-size: 15px;
    line-height: 1.5;
    color: var(--metin);
    background: var(--yuzey-2);
    overscroll-behavior-y: none;
    padding-bottom: env(safe-area-inset-bottom);
}

h1, h2, h3, h4 {
    margin: 0 0 .5em;
    font-family: var(--yazi-baslik);
    line-height: 1.25;
    font-weight: 650;
}
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.0625rem; }
h4 { font-size: .9375rem; }
p  { margin: 0 0 1em; }

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

img, svg { max-width: 100%; height: auto; display: block; }

/* ==========================================================================
   ORTAK BİLEŞENLER
   ========================================================================== */

.kapsayici {
    max-width: 720px;
    margin-inline: auto;
    padding: var(--bosluk);
}

/* --- Kart ----------------------------------------------------------------- */
.kart {
    background: var(--yuzey);
    border: 1px solid var(--kenar);
    border-radius: var(--yaricap-lg);
    box-shadow: var(--golge-sm);
    overflow: hidden;
}
.kart + .kart { margin-top: var(--bosluk); }
.kart__baslik {
    padding: 14px var(--bosluk);
    border-bottom: 1px solid var(--kenar);
    font-family: var(--yazi-baslik);
    font-weight: 650;
    background: var(--yuzey-2);
}
.kart__govde { padding: var(--bosluk); }

/* --- Buton ---------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--dokunma);
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--yaricap);
    font: inherit;
    font-weight: 650;
    color: #fff;
    /* Dolgu ayrı token: koyu temada --renk-marka açık maviye dönüyor,
       beyaz yazı onun üstünde okunmuyordu (bkz. İŞLEV RENKLERİ). */
    background: var(--btn-dolgu, var(--renk-marka));
    cursor: pointer;
    text-decoration: none;
    transition: background .16s, transform .12s, box-shadow .16s;
}
.btn:hover    { background: var(--btn-dolgu-koyu, var(--renk-marka-koyu)); text-decoration: none; }
.btn:active   { transform: scale(.98); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn--blok    { width: 100%; }
.btn--ikincil {
    background: var(--yuzey);
    color: var(--metin);
    border-color: var(--kenar-belirgin);
}
.btn--ikincil:hover  { background: var(--yuzey-3); }
.btn--basarili       { background: var(--renk-tamamlandi); }
.btn--tehlike        { background: var(--renk-iptal); }
/* Varyantların kendi hover'ı olmalı: `.btn:hover` marka rengini basıyor
   ve üzerine gelince yeşil/kırmızı düğme maviye dönüyordu. */
.btn--basarili:hover { background: var(--renk-yesil-koyu); }
.btn--tehlike:hover  { background: #B3271D; }
.btn--kucuk          { min-height: 38px; padding: 0 14px; font-size: .8125rem; }

/* --- Rozet ---------------------------------------------------------------- */
.rozet {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 650;
    line-height: 1.4;
    white-space: nowrap;
    color: #fff;
    background: var(--renk-marka);
}
.rozet--basarili { background: var(--renk-tamamlandi); }
.rozet--uyari    { background: var(--accent-500); }
.rozet--hata     { background: var(--renk-iptal); }
.rozet--notr     { background: var(--neutral-500); }
.rozet--ana-hat  { background: transparent; color: var(--metin-2);
                   border: 1px solid var(--kenar-belirgin); }

/* --- Basit liste ---------------------------------------------------------- */
.liste { list-style: none; margin: 0; padding: 0; }
.liste__satir {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--dokunma);
    padding: 12px var(--bosluk);
    border-bottom: 1px solid var(--kenar);
}
.liste__satir:last-child { border-bottom: 0; }
.liste__etiket { flex: 0 0 auto; color: var(--metin-2); font-size: .875rem; }
.liste__deger  { margin-left: auto; text-align: right; font-weight: 600; word-break: break-word; }

/* --- Tablo ---------------------------------------------------------------- */
.tablo-sarmal { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tablo { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tablo th, .tablo td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--kenar);
    white-space: nowrap;
}
.tablo th {
    font-weight: 650;
    color: var(--metin-2);
    background: var(--yuzey-2);
    position: sticky;
    top: 0;
}
.tablo tbody tr:last-child td { border-bottom: 0; }
.sayi { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Form ----------------------------------------------------------------- */
.alan { margin-bottom: var(--bosluk); }
.alan__etiket {
    display: block;
    margin-bottom: 6px;
    font-size: .875rem;
    font-weight: 650;
    color: var(--metin-2);
}
.girdi, select.girdi, textarea.girdi {
    width: 100%;
    min-height: var(--dokunma);
    padding: 10px 12px;
    font: inherit;
    font-size: 16px;                 /* iOS'ta odaklanınca yakınlaşmayı önler */
    color: var(--metin);
    background: var(--yuzey);
    border: 1px solid var(--kenar-belirgin);
    border-radius: var(--yaricap);
    transition: border-color .16s, box-shadow .16s;
}
.girdi:focus {
    outline: none;
    border-color: var(--renk-marka);
    box-shadow: 0 0 0 3px var(--odak-halka);
}
textarea.girdi { min-height: 96px; resize: vertical; }
.alan__hata { margin-top: 6px; font-size: .8125rem; color: var(--renk-iptal); }

/* --- Uyarı kutusu --------------------------------------------------------- */
.uyari {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--yaricap);
    border-left: 3px solid var(--renk-marka);
    background: var(--zemin-bilgi);
    color: var(--metin);
    font-size: .875rem;
}
.uyari + .uyari       { margin-top: 10px; }
.uyari--basarili      { border-left-color: var(--renk-tamamlandi); background: var(--zemin-basari); }
.uyari--dikkat        { border-left-color: var(--accent-500);      background: var(--zemin-dikkat); }
.uyari--hata          { border-left-color: var(--renk-iptal);      background: var(--zemin-hata); }
.uyari--bilgi         { border-left-color: var(--renk-marka);      background: var(--zemin-bilgi); }

/* --- Yardımcılar ---------------------------------------------------------- */
.mono   { font-family: var(--yazi-mono); font-size: .8125rem; }
.sessiz { color: var(--metin-2); }
.kucuk  { font-size: .8125rem; }
.orta   { text-align: center; }
.sag    { text-align: right; }
.yigin  { display: flex; flex-direction: column; gap: var(--bosluk); }
/* Not: `.satir` servis listesi satırı olduğu için yatay hizalama
   yardımcısı `.hiza` adını taşır. */
.hiza   { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.aralik { margin-left: auto; }
.gizli  { display: none !important; }

.durum-nokta {
    flex: 0 0 auto;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--metin-3);
}
.durum-nokta--tamam { background: var(--renk-tamamlandi); }
.durum-nokta--hata  { background: var(--renk-iptal); }
.durum-nokta--uyari { background: var(--accent-500); }
.durum-nokta--bilgi { background: var(--renk-marka); }

/* ==========================================================================
   UYGULAMA KABUĞU — üst gradyan, alt gezinme, yan menü
   ========================================================================== */

body { overscroll-behavior-y: none; }

/* --- Üst bölüm ------------------------------------------------------------ */
.uyg-ust {
    position: relative;
    overflow: hidden;
    padding-top: env(safe-area-inset-top);
    background: #2563EB;
    background: linear-gradient(to bottom right, #2563EB 0%, #3B82F6 55%, #0891B2 100%);
    color: #fff;
}
.uyg-ust::after {                       /* koyulaştırma katmanı */
    content: "";
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, .10);
    pointer-events: none;
}

.uyg-ust__daire {
    position: absolute;
    top: 0; right: 0;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .10);
    transform: translate(40%, -45%);
    animation: kabukDaire 14s ease-in-out infinite;
    pointer-events: none;
}
@keyframes kabukDaire {
    0%, 100% { transform: translate(40%, -45%) }
    50%      { transform: translate(32%, -38%) }
}

.uyg-cubuk {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 56px;
    padding: 0 8px;
}

.uyg-cubuk__baslik {
    flex: 1;
    margin: 0 6px;
    font-family: var(--yazi-baslik);
    font-size: 1.0625rem;
    font-weight: 650;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uyg-logo {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 0 6px;
}
/* Logo lacivert-yeşil; gradyan üzerinde okunması için beyaza çevriliyor */
.uyg-logo img {
    height: 25px; width: auto;
    filter: brightness(0) invert(1);
}

.uyg-btn {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: var(--dokunma); height: var(--dokunma);
    border: 0;
    border-radius: 50%;
    background: none;
    color: #fff;
    cursor: pointer;
}
.uyg-btn:active { background: rgba(255,255,255,.18); }
.uyg-btn:hover  { background: rgba(255,255,255,.14); text-decoration: none; }

.uyg-rozet {
    position: absolute;
    top: 7px; right: 6px;
    min-width: 17px; height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--accent-500);
    color: #fff;
    font-size: .6563rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

.uyg-ust--sade .uyg-ust__daire { display: none; }

/* --- Geri düğmesi (alt sayfalar) ------------------------------------------
   Hamburgerin yerine geçer; etiketli hap biçimi ikondan daha belirgin. */
.uyg-geri {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 14px 0 6px;
    margin-left: 2px;
    border: 1.5px solid rgba(255, 255, 255, .5);
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-weight: 650;
    font-size: .9375rem;
    line-height: 1;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.uyg-geri:active { background: rgba(255, 255, 255, .32); }
.uyg-geri:hover  { background: rgba(255, 255, 255, .26); text-decoration: none; }

/* --- Gövde ---------------------------------------------------------------- */
.uyg-govde {
    max-width: 720px;
    margin-inline: auto;
    padding: var(--bosluk) var(--bosluk) calc(84px + env(safe-area-inset-bottom));
}

/* ==========================================================================
   SAYAÇ ŞERİDİ
   ========================================================================== */
/* Sayaç şeridi üst gradyanın içinde durur — kartlar yarı saydam,
   seçili olan beyaza döner. */
.sayac-serit {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 8px;
    /* Sol boşluk gövde ile hizalı (--bosluk); ilk kart ekran kenarına
       yapışmasın. scroll-padding, kaydırma sonrası da aynı boşluğu korur. */
    padding: 2px var(--bosluk) 16px;
    scroll-padding-left: var(--bosluk);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.sayac-serit::-webkit-scrollbar { display: none; }

.sayac {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 78px;
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 14px;
    background: rgba(255,255,255,.16);
    color: #fff;
    font: inherit;
    cursor: pointer;
    transition: transform .18s cubic-bezier(.2,.8,.3,1), background .18s, border-color .18s;
}
.sayac:active { transform: scale(.96); }

/* :hover özgüllüğü (0,2,0) .sayac--aktif'ten (0,1,0) yüksektir; dışlanmazsa
   tıklamadan sonra imleç kartın üstünde kaldığı sürece beyaz zemini ezer.
   hover:hover koşulu, dokunmatik cihazlarda dokunuştan sonra takılı kalan
   hover durumunu da engeller. */
@media (hover: hover) {
    .sayac:hover:not(.sayac--aktif) { background: rgba(255,255,255,.24); }
}

.sayac__deger {
    font-family: var(--yazi-baslik);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    transition: color .18s;
}
.sayac__etiket {
    font-size: .71875rem;
    font-weight: 550;
    white-space: nowrap;
    opacity: .85;
    transition: color .18s, opacity .18s;
}

.sayac--aktif {
    background: #fff;
    border-color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,.16);
}
/* Seçili kart: beyaz zemin, hem rakam hem etiket sekme renginde.
   --sayac-yazi, beyaz üzerinde okunabilir koyu tondur (bkz. PanelService). */
.sayac--aktif .sayac__deger  { color: var(--sayac-yazi); }
.sayac--aktif .sayac__etiket { color: var(--sayac-yazi); opacity: 1; font-weight: 650; }

/* ==========================================================================
   ROTA İPUCU
   ========================================================================== */
.rota-ipucu {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: 14px;
    background: var(--zemin-bilgi);
    color: var(--renk-marka);
    font-size: .75rem;
    font-weight: 550;
    line-height: 1.4;
}
.rota-ipucu svg  { flex: 0 0 auto; opacity: .75; }
.rota-ipucu span { flex: 1; }
.rota-durum {
    flex: 0 0 auto !important;
    white-space: nowrap;
    font-weight: 650;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity .22s, transform .22s;
}
.rota-durum--gorunur { opacity: 1; transform: none; }

/* ==========================================================================
   SERVİS LİSTESİ
   ========================================================================== */
.servis-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.satir {
    position: relative;
    display: flex;
    align-items: stretch;
    background: var(--yuzey);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(16,24,40,.05), 0 4px 14px rgba(16,24,40,.05);
    overflow: hidden;
    /* Sürüklerken FLIP animasyonu bu geçişi kullanır */
    transition: box-shadow .2s;
}

/* Uyarı durumunda ince renkli şerit — kalın kenarlık yerine */
.satir--uyari::before {
    content: "";
    position: absolute;
    left: 0; top: 12px; bottom: 12px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--accent-500);
}

/* --- Sürükleme durumları --- */
.satir--suruklenen {
    box-shadow: 0 8px 20px rgba(16,24,40,.14), 0 18px 40px rgba(16,24,40,.12);
    z-index: 5;
    cursor: grabbing;
}
.satir--kayan { transition: transform .2s cubic-bezier(.2, .8, .3, 1); }

/* --- Tutamaç --- */
.tutamac {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 42px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--neutral-400);
    cursor: grab;
    touch-action: none;              /* sürüklerken sayfa kaymasın */
    -webkit-user-select: none;
    user-select: none;
    transition: background .16s, color .16s;
}
.tutamac:active { cursor: grabbing; background: var(--yuzey-2); color: var(--renk-marka); }

.tutamac__no {
    display: grid;
    place-items: center;
    min-width: 21px; height: 21px;
    padding: 0 5px;
    border-radius: 11px;
    background: var(--yuzey-3);
    color: var(--metin-2);
    font-size: .6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* --- Gövde --- */
.satir__bag {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    padding: 14px;
    color: inherit;
    text-decoration: none;
}
/* Tutamaç varsa sol boşluk daralır — :has() yerine kardeş seçici
   (eski Android WebView uyumu) */
.tutamac + .satir__bag { padding-left: 4px; }
.satir__bag:hover { text-decoration: none; }

/* Gün rozeti — gün-ay (01-08), dolu renk yerine yumuşak tonlu zemin */
.gun {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 48px; height: 40px;
    border-radius: 12px;
    background: var(--zemin-bilgi);
    color: var(--renk-marka);
    font-family: var(--yazi-baslik);
    font-size: .875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
.gun--deneme { background: var(--secondary-50); color: var(--secondary-700); }

.satir__icerik { flex: 1; min-width: 0; }

.satir__ad {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--yazi-baslik);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--metin);
}

/* Adres — rota için birincil bilgi, kesilmeden tamamı görünür */
.satir__adres {
    margin-top: 2px;
    font-size: .75rem;
    line-height: 1.4;
    color: var(--metin-2);
}

/* Cihaz adresi müşterininkinden farklıysa vurgulanır */
.satir__adres--cihaz { color: var(--accent-700); }
.satir__adres--cihaz span {
    display: inline-block;
    margin-right: 5px;
    padding: 0 5px;
    border-radius: 4px;
    background: var(--zemin-dikkat);
    color: var(--accent-600);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .02em;
    vertical-align: 1px;
}

/* Şikayet / cihaz türü — ikincil */
.satir__alt {
    margin-top: 2px;
    font-size: .71875rem;
    line-height: 1.4;
    color: var(--metin-3);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.satir__sag {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: center;
}
.tutar {
    font-family: var(--yazi-baslik);
    font-size: .75rem;
    font-weight: 650;
    color: var(--metin-2);
    white-space: nowrap;
}
.satir__ad-metin { min-width: 0; }
.satir__ad .tutar { margin-left: auto; padding-left: 8px; }
.ok { color: var(--neutral-300); }

.yeni-nokta {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent-500);
    flex: 0 0 auto;
}

/* --- Etiketler — nokta + metin, dolu blok yerine --- */
.etiketler { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 7px; }

.etiket {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--metin-2);
    white-space: nowrap;
}
.etiket::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--e-renk, var(--renk-marka));
    flex: 0 0 auto;
}
.etiket--uyari { color: var(--accent-600); }
.etiket--uyari::before { background: var(--accent-500); }
.etiket--sayi {
    color: var(--metin-3);
    padding: 0 6px;
    border-radius: 8px;
    background: var(--yuzey-3);
}
.etiket--sayi::before { display: none; }

/* ==========================================================================
/* ==========================================================================
   DURUM KARTLARI (kilit / boş)
   ========================================================================== */
.durum-kart {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 34px 24px;
    text-align: center;
    background: var(--yuzey);
    border: 1px solid var(--kenar);
    border-radius: var(--yaricap-lg);
    box-shadow: var(--golge-sm);
}

.durum-kart__ikon {
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--zemin-dikkat);
    color: var(--accent-600);
}
.durum-kart__ikon--sakin { background: var(--yuzey-3); color: var(--metin-3); }

.durum-kart__baslik { margin: 0 0 6px; font-size: 1.0625rem; font-weight: 650; }
.durum-kart__metin  { margin: 0; max-width: 32ch; font-size: .875rem;
                      line-height: 1.5; color: var(--metin-2); }
.durum-kart__ek {
    margin: 10px 0 0;
    padding: 7px 12px;
    border-radius: var(--yaricap-sm);
    background: var(--zemin-dikkat);
    color: var(--accent-700);
    font-size: .78125rem;
    font-weight: 600;
}
.durum-kart .btn { margin-top: 18px; max-width: 260px; }

/* --- Yükleniyor iskeleti -------------------------------------------------- */
.iskelet {
    height: 96px;
    border-radius: var(--yaricap-lg);
    background: linear-gradient(90deg, var(--yuzey-2) 25%, var(--yuzey-3) 50%, var(--yuzey-2) 75%);
    background-size: 200% 100%;
    animation: parla 1.2s infinite;
}
@keyframes parla { from { background-position: 200% 0 } to { background-position: -200% 0 } }

/* ==========================================================================
   ALT GEZİNME
   ========================================================================== */
.alt-menu {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 45;
    display: flex;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--yuzey);
    border-top: 1px solid var(--kenar);
    box-shadow: 0 -2px 16px rgba(0,0,0,.06);
}

.alt-oge {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 62px;
    padding: 6px 2px;
    color: var(--metin-3);
    text-decoration: none;
}
.alt-oge:hover { text-decoration: none; }

.alt-oge__ikon {
    display: grid;
    place-items: center;
    width: 38px; height: 26px;
    border-radius: 13px;
    transition: background .18s, color .18s;
}
.alt-oge__etiket { font-size: .6563rem; font-weight: 600; }

.alt-oge--aktif { color: var(--renk-marka); }
.alt-oge--aktif .alt-oge__ikon { background: var(--zemin-bilgi); }

/* ==========================================================================
   YAN MENÜ
   ========================================================================== */
.yan-ortu {
    position: fixed; inset: 0;
    z-index: 60;
    background: rgba(0,0,0,.45);
    animation: soluk .18s ease;
}
@keyframes soluk { from { opacity: 0 } to { opacity: 1 } }

.yan-menu {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 61;
    width: min(84vw, 320px);
    display: flex;
    flex-direction: column;
    background: var(--yuzey);
    box-shadow: var(--golge-lg);
    animation: kaydir .24s cubic-bezier(.22,.9,.28,1);
}
@keyframes kaydir { from { transform: translateX(-100%) } to { transform: none } }

/* --- Kapak --- */
.yan-kapak {
    position: relative;
    overflow: hidden;
    padding: calc(20px + env(safe-area-inset-top)) 20px 20px;
    background: linear-gradient(to bottom right, #2563EB 0%, #3B82F6 55%, #0891B2 100%);
    color: #fff;
}
.yan-kapak__daire {
    position: absolute;
    bottom: 0; right: 0;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: rgba(255,255,255,.10);
    transform: translate(35%, 45%);
    pointer-events: none;
}
.yan-kapak__kapat { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 8px; z-index: 2; }

.yan-kapak__avatar {
    position: relative; z-index: 2;
    display: grid;
    place-items: center;
    width: 54px; height: 54px;
    margin-bottom: 11px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    border: 2px solid rgba(255,255,255,.4);
    font-family: var(--yazi-baslik);
    font-size: 1.375rem;
    font-weight: 700;
}
.yan-kapak__ad {
    position: relative; z-index: 2;
    font-family: var(--yazi-baslik);
    font-size: 1.0625rem;
    font-weight: 650;
    margin-bottom: 8px;
}
.yan-kapak__etiketler { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; }

.yan-etiket {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    font-size: .6875rem;
    font-weight: 600;
}

/* --- Menü listesi --- */
.yan-liste { flex: 1; overflow-y: auto; padding: 8px 0; -webkit-overflow-scrolling: touch; }

.yan-liste__baslik {
    padding: 14px 20px 6px;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .09em;
    color: var(--metin-3);
}

.yan-oge {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--dokunma);
    padding: 10px 16px 10px 20px;
    color: var(--metin);
    font-size: .9375rem;
    font-weight: 550;
    text-decoration: none;
}
/* Aynı özgüllük sorunu: aktif menü öğesi dışlanmazsa hover onu ezer */
@media (hover: hover) {
    .yan-oge:hover:not(.yan-oge--aktif) { background: var(--yuzey-2); }
}
.yan-oge:hover  { text-decoration: none; }
.yan-oge:active { background: var(--yuzey-3); }
.yan-oge__ad    { flex: 1; }

.yan-oge__ikon {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: 10px;
    background: var(--yuzey-2);
    color: var(--metin-2);
    flex: 0 0 auto;
}
.yan-oge__ok { color: var(--metin-3); opacity: .55; }

.yan-oge--aktif { color: var(--renk-marka); font-weight: 650; background: var(--zemin-bilgi); }
.yan-oge--aktif .yan-oge__ikon { background: var(--renk-marka); color: #fff; }

.yan-alt { border-top: 1px solid var(--kenar); padding: 8px 0 calc(10px + env(safe-area-inset-bottom)); }
.yan-oge--cikis { color: var(--renk-iptal); }
.yan-oge--cikis .yan-oge__ikon { background: var(--zemin-hata); color: var(--renk-iptal); }
.yan-alt__not { padding: 8px 20px 0; font-size: .6875rem; color: var(--metin-3); }

/* --- Geliştirme çubuğu ---------------------------------------------------- */
.gelistirme-cubugu {
    position: fixed;
    left: 8px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    z-index: 40;
    padding: 4px 9px;
    border-radius: 6px;
    background: rgba(0,0,0,.72);
    color: #fff;
    font: 500 11px/1.4 var(--yazi-mono);
    pointer-events: none;
}

@media (min-width: 560px) {
    .satir__tarih { width: 48px; height: 50px; }
}

/* ==========================================================================
   GİRİŞ EKRANLARI — flat, mobil uygulama görünümü
   Kenarlar marka mavisi · merkez açık · ortada beyaz giriş kartı
   ========================================================================== */

/* Hero — waterlife.com.tr ana sayfasındaki bölümün birebir karşılığı:
   bg-gradient-to-br from-blue-600 via-blue-500 to-cyan-600
   + bg-black/10 katman + iki adet animasyonlu bg-white/10 daire */
/* Giriş kökü viewport genişliğinde; dekorlar kaydırılabilir alan üretmez. */
html.giris-kok {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
.giris-sayfa {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background: #2563EB;
    background: linear-gradient(to bottom right, #2563EB 0%, #3B82F6 50%, #0891B2 100%);
    background-attachment: scroll;
    overscroll-behavior: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
.giris-sayfa input { -webkit-user-select: text; user-select: text; }

/* Taşan animasyonlar yalnız bu dekor katmanı içinde kırpılır.
   İçerik klavye açıldığında dikey kaydırılabilir kalır. */
.giris-arka-plan {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* Sitedeki koyulaştırma katmanı */
.hero-katman {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .10);
    pointer-events: none;
}

/* Kenarlardaki yumuşak daireler */
.hero-daire {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .10);
    pointer-events: none;
    will-change: transform;
}
.hero-daire--1 {
    top: 0; left: 0;
    width: 288px; height: 288px;
    transform: translate(-50%, -50%);
    animation: heroDaire1 12s ease-in-out infinite;
}
.hero-daire--2 {
    bottom: 0; right: 0;
    width: 384px; height: 384px;
    transform: translate(50%, 50%);
    animation: heroDaire2 15s ease-in-out infinite;
}
@media (min-width: 768px) {
    .hero-daire--1 { width: 384px; height: 384px; }
    .hero-daire--2 { width: 500px; height: 500px; }
}

/* Sitedeki hero-circle-float-1 / -2 keyframe'leri birebir */
@keyframes heroDaire1 {
    0%, 100% { transform: translate(-50%, -50%) translate(0, 0); }
    33%      { transform: translate(-50%, -50%) translate(40px, -25px); }
    66%      { transform: translate(-50%, -50%) translate(-20px, 30px); }
}
@keyframes heroDaire2 {
    0%, 100% { transform: translate(50%, 50%) translate(0, 0); }
    33%      { transform: translate(50%, 50%) translate(-50px, 20px); }
    66%      { transform: translate(50%, 50%) translate(25px, -35px); }
}

.giris-ekran {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    z-index: 1;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    padding: 28px 16px 20px;
    padding: calc(28px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
}

/* --- Geri oku ------------------------------------------------------------- */
.giris-geri {
    position: absolute;
    top: calc(14px + env(safe-area-inset-top));
    left: 12px;
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    color: #fff;
    opacity: .92;
    animation: ogeGir .4s .05s both;
}
.giris-geri:active { background: rgba(255,255,255,.18); }
.giris-geri:hover  { background: rgba(255,255,255,.14); text-decoration: none; }

/* --- Beyaz logo ----------------------------------------------------------- */
.giris-marka {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    animation: markaGir .55s cubic-bezier(.22,.9,.28,1) both;
}
.giris-marka img {
    width: 190px;
    max-width: 62vw;
    height: auto;
    /* Tek logo varlığı var; beyaza çevirmek için */
    filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,.22));
}
.giris-marka span {
    color: rgba(255,255,255,.88);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* --- Ortadaki giriş kartı ------------------------------------------------- */
.giris-kart {
    flex: 0 0 auto;
    min-width: 0;
    width: 100%;
    max-width: 400px;
    padding: 28px 24px 24px;
    background: var(--yuzey);
    border-radius: 22px;
    box-shadow:
        0 1px 2px  rgba(9, 42, 74, .06),
        0 12px 32px rgba(9, 42, 74, .16);
    animation: kartGir .5s .08s cubic-bezier(.22,.9,.28,1) both;
}

.giris-dipnot {
    color: rgba(255,255,255,.72);
    font-size: .75rem;
    font-weight: 500;
    animation: ogeGir .5s .3s both;
}

/* --- Giriş animasyonları -------------------------------------------------- */
@keyframes kartGir {
    from { opacity: 0; transform: translateY(22px) scale(.97) }
    to   { opacity: 1; transform: none }
}
@keyframes markaGir {
    from { opacity: 0; transform: translateY(-14px) }
    to   { opacity: 1; transform: none }
}
@keyframes ogeGir {
    from { opacity: 0 }
    to   { opacity: 1 }
}

/* Kart içeriği sırayla belirsin */
.giris-kart > * { animation: iceriGir .45s both; }
.giris-kart > :nth-child(1) { animation-delay: .16s }
.giris-kart > :nth-child(2) { animation-delay: .21s }
.giris-kart > :nth-child(3) { animation-delay: .26s }
.giris-kart > :nth-child(4) { animation-delay: .31s }
@keyframes iceriGir {
    from { opacity: 0; transform: translateY(8px) }
    to   { opacity: 1; transform: none }
}

/* --- Başlık / açıklama ---------------------------------------------------- */
.giris-baslik {
    text-align: center;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0 0 6px;
}

.giris-aciklama {
    text-align: center;
    color: var(--metin-2);
    font-size: .9375rem;
    line-height: 1.5;
    margin: 0 auto 24px;
    max-width: 30ch;
}
.giris-numara { color: var(--metin); white-space: nowrap; }

.giris-ipucu {
    text-align: center;
    color: var(--metin-3);
    font-size: .78125rem;
    line-height: 1.5;
    margin: 12px 0 0;
}

.giris-eylem { margin-top: 20px; }

/* --- Kod kutuları (PIN ve SMS ortak) -------------------------------------- */
.kod-kutular {
    display: flex;
    justify-content: center;
    gap: 11px;
    margin-bottom: 18px;
}
.kod-kutular--hata { animation: sars .4s cubic-bezier(.36,.07,.19,.97); }
@keyframes sars {
    10%, 90% { transform: translateX(-2px) }
    20%, 80% { transform: translateX(4px)  }
    30%, 50%, 70% { transform: translateX(-7px) }
    40%, 60% { transform: translateX(7px)  }
}

.kod-kutu {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    max-width: 64px;
    min-height: 70px;
    aspect-ratio: 1 / 1.16;
    padding: 0;
    text-align: center;
    font-size: 29px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--metin);
    background: var(--yuzey-2);
    border: 2px solid var(--kenar);
    border-radius: 14px;
    caret-color: var(--renk-marka);
    transition: border-color .15s, background .15s, box-shadow .15s, transform .15s;
}
.kod-kutu--dolu {
    background: var(--yuzey);
    border-color: var(--renk-marka);
    color: var(--renk-marka);
}
.kod-kutu:focus,
.kod-kutu--aktif {
    outline: none;
    background: var(--yuzey);
    border-color: var(--renk-marka);
    box-shadow: 0 0 0 4px var(--odak-halka);
    transform: translateY(-2px);
}
.kod-kutular--hata .kod-kutu {
    border-color: var(--renk-iptal);
    box-shadow: none;
    color: var(--renk-iptal);
}

/* --- Uyarı satırı --------------------------------------------------------- */
.giris-uyari {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 11px 13px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: var(--zemin-hata);
    color: var(--renk-iptal);
    font-size: .8125rem;
    font-weight: 550;
    line-height: 1.45;
    animation: belir .22s ease;
}
.giris-uyari svg { flex: 0 0 auto; margin-top: 1px; }
.giris-uyari--basarili { background: var(--zemin-basari); color: var(--renk-tamamlandi); }
@keyframes belir { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: none } }

/* --- Yüksek buton --------------------------------------------------------- */
.btn--yuksek {
    min-height: 54px;
    font-size: 1rem;
    font-weight: 650;
    border-radius: 14px;
    box-shadow: var(--golge-marka);
    transition: background .18s, box-shadow .18s, transform .12s;
}
.btn--yuksek:active   { transform: scale(.98); }
.btn--yuksek:disabled { box-shadow: none; }
.btn.btn--basarili {
    background: var(--renk-tamamlandi);
    box-shadow: var(--golge-basari);
}
.btn.btn--tehlike {
    background: var(--renk-iptal);
    box-shadow: var(--golge-tehlike);
}

/* --- Bağlantı butonu ------------------------------------------------------ */
.baglanti-btn {
    min-height: 42px;
    padding: 9px 14px;
    border: 0;
    background: none;
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    color: var(--renk-marka);
    cursor: pointer;
    border-radius: 10px;
}
.baglanti-btn:hover:not(:disabled) { background: var(--renk-marka-acik); text-decoration: none; }
.baglanti-btn:disabled { color: var(--metin-3); cursor: default; }
.baglanti-btn--orta { display: block; margin: 0 auto 14px; text-align: center; }

/* --- "Bu cihazı hatırla" onay kutusu -------------------------------------- */
.onay {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 14px;
    margin-bottom: 4px;
    background: var(--yuzey-2);
    border: 1.5px solid var(--kenar);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color .16s, background .16s;
}
.onay--secili,
.onay:has(input:checked) {
    border-color: var(--renk-marka);
    background: var(--renk-marka-acik);
}
.onay input { position: absolute; opacity: 0; width: 0; height: 0; }

.onay__kutu {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 22px; height: 22px;
    margin-top: 1px;
    border: 2px solid var(--kenar-belirgin);
    border-radius: 7px;
    background: var(--yuzey);
    color: #fff;
    transition: background .16s, border-color .16s;
}
.onay__kutu svg { opacity: 0; transform: scale(.6); transition: opacity .16s, transform .16s; }
.onay--secili .onay__kutu,
.onay:has(input:checked) .onay__kutu {
    background: var(--renk-marka);
    border-color: var(--renk-marka);
}
.onay--secili .onay__kutu svg,
.onay:has(input:checked) .onay__kutu svg { opacity: 1; transform: none; }
.onay input:focus-visible + .onay__kutu { box-shadow: 0 0 0 3px var(--odak-halka); }

.onay__metin { display: flex; flex-direction: column; gap: 2px; font-size: .875rem; }
.onay__metin strong { font-weight: 650; }
.onay__metin span   { color: var(--metin-2); font-size: .8125rem; line-height: 1.4; }

/* --- Tanınan kullanıcı kartı ---------------------------------------------- */
.taninan-kart {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px;
    margin-bottom: 10px;
    background: var(--yuzey-2);
    border: 1.5px solid var(--kenar);
    border-radius: 16px;
}

.taninan-avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 50px; height: 50px;
    border-radius: 50%;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--renk-marka-canli), var(--renk-marka-koyu));
}

.taninan-bilgi { flex: 1; min-width: 0; }
.taninan-ad  { overflow-wrap: anywhere; font-weight: 650; font-size: 1rem; }
.taninan-alt { color: var(--metin-2); font-size: .8125rem; }

.taninan-onay {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 27px; height: 27px;
    border-radius: 50%;
    color: #fff;
    background: var(--renk-tamamlandi);
}

.cihaz-rozet {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    margin-bottom: 4px;
    border-radius: 999px;
    background: var(--yuzey-3);
    color: var(--metin-2);
    font-size: .78125rem;
    font-weight: 600;
}

/* --- Buton yükleniyor göstergesi ------------------------------------------ */
.donen {
    width: 19px; height: 19px;
    border: 2.5px solid rgba(255, 255, 255, .3);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: don .6s linear infinite;
}
@keyframes don { to { transform: rotate(360deg) } }

/* --- Ekran uyarlamaları --------------------------------------------------- */
@media (max-height: 700px) {
    .giris-ekran    { gap: 18px; justify-content: flex-start; padding-top: calc(20px + env(safe-area-inset-top)); }
    .giris-marka img{ width: 158px; }
    .giris-kart     { padding: 22px 20px 20px; }
    .giris-aciklama { margin-bottom: 18px; }
    .kod-kutu       { max-width: 58px; min-height: 62px; font-size: 26px; }
    .giris-dipnot   { display: none; }
}

@media (min-width: 560px) {
    .giris-kart { max-width: 420px; }
}

/* Koyu temada kart yüzeyi otomatik koyulaşır; zemin gradyanı sabit kalır */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="acik"]) .giris-kart {
        box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
    }
}

/* --- Erişilebilirlik ------------------------------------------------------ */
:focus-visible {
    outline: 2px solid var(--renk-marka);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ==========================================================================
   SERVİS DETAY  (PLAN-01 §4.3)
   ========================================================================== */

.detay-ust { padding: 18px var(--bosluk) 14px; border-bottom: 1px solid var(--kenar); }
.detay-ust__ad    { font-family: var(--yazi-baslik); font-size: 1.125rem; font-weight: 650; }
.detay-ust__firma { color: var(--metin-3); font-size: .8125rem; margin-top: 1px; }

/* Üst satır: servis no + tarih solda, durum sağda (ikincil) */
.detay-ust__ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}
.detay-ust__ust .detay-kayit { margin-bottom: 0; }
.rozet--kucuk { padding: 1px 8px; font-size: .6875rem; }

/* Ad soyad + açılan servis türü yan yana; sığmazsa tür alta iner */
.detay-ust__satir {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}
.detay-ust__satir .detay-ust__ad { min-width: 0; }
.detay-turler { display: flex; flex-wrap: wrap; gap: 6px; }
.rozet--tur {
    padding: 5px 11px;
    border-radius: 8px;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .01em;
    background: var(--rozet-zemin, var(--renk-marka));
    color: var(--rozet-yazi, #fff);
}

/* Adres — ad soyadın hemen altında, tamamı görünür */
.detay-adres {
    margin-top: 6px;
    font-size: .875rem;
    line-height: 1.45;
    color: var(--metin-2);
    overflow-wrap: anywhere;
}
.detay-adres + .detay-adres { margin-top: 4px; }
.detay-adres--cihaz { color: var(--accent-700); }
.detay-adres__etiket {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--yuzey-3);
    color: var(--metin-2);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .02em;
    vertical-align: 1px;
}
.detay-adres--cihaz .detay-adres__etiket { background: var(--zemin-dikkat); color: var(--accent-600); }
.detay-rozetler   { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* --- Telefon satırları --- */
.detay-tel { border-bottom: 1px solid var(--kenar); }
.tel-satir {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px var(--bosluk);
}
.tel-satir + .tel-satir { border-top: 1px solid var(--kenar); }
.tel-satir__bilgi { flex: 1; min-width: 0; }
.tel-satir__tur   { display: block; font-size: .6875rem; font-weight: 600; color: var(--metin-3); }
.tel-satir__no    { font-family: var(--yazi-baslik); font-weight: 600; font-variant-numeric: tabular-nums; }

.ikon-btn {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    transition: transform .12s, opacity .16s;
}
.ikon-btn:active   { transform: scale(.94); }
.ikon-btn:disabled { opacity: .5; }
.ikon-btn--ara { background: var(--zemin-basari); color: var(--secondary-700); }
.ikon-btn--sms { background: var(--zemin-dikkat); color: var(--accent-700); }

.detay-nav { display: flex; gap: 8px; padding: var(--bosluk); }
.detay-nav .btn { flex: 1; }

/* --- Mali özet --- */
.ozet-satir {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 5px 0;
    font-size: .875rem;
    color: var(--metin-2);
}
.ozet-satir strong { font-family: var(--yazi-baslik); color: var(--metin); }
.ozet-satir--vurgu {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--kenar);
    font-size: 1rem;
}
.ozet-satir--borc strong { color: var(--renk-iptal); }

/* --- Fotoğraflar --- */
.resim-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 8px;
}
.resim-oge { position: relative; aspect-ratio: 1; }
.resim-oge img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 10px;
    background: var(--yuzey-2);
}
.resim-sil {
    position: absolute;
    top: 4px; right: 4px;
    display: grid;
    place-items: center;
    width: 24px; height: 24px;
    border: 0;
    border-radius: 50%;
    background: rgba(0,0,0,.6);
    color: #fff;
    cursor: pointer;
}

/* --- Açılır kart başlığı --- */
.kart__baslik--dugme {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--kenar);
    font: inherit;
    font-family: var(--yazi-baslik);
    font-weight: 650;
    text-align: left;
    cursor: pointer;
    color: var(--metin);
}
.kart__baslik--dugme svg { color: var(--metin-3); transition: transform .2s; }
.kart__baslik--acik svg  { transform: rotate(180deg); }

/* --- Kart görünümlü düğme (alt sayfa açar) --- */
.kart--dugme {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px var(--bosluk);
    border: 0;
    font: inherit;
    text-align: left;
    color: var(--metin);
    cursor: pointer;
}
.kart-dugme__ikon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--zemin-bilgi);
    color: var(--accent-700);
}
.kart-dugme__metin {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    font-family: var(--yazi-baslik);
    font-weight: 650;
    font-size: .9375rem;
}
.kart-dugme__metin .kucuk { font-family: var(--yazi); font-weight: 400; }
.kart-dugme__ok { flex: 0 0 auto; color: var(--metin-3); }

@media (hover: hover) {
    .kart--dugme:hover { background: var(--yuzey-2); }
}
.kart--dugme:active { background: var(--yuzey-2); }

/* --- Boş durum / yükleniyor (alt sayfa içeriği) --- */
.bos-durum {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px 20px;
    color: var(--metin-3);
    font-size: .875rem;
    text-align: center;
}
/* `.donen` düğme içindeki koyu zemin için yazılmıştı; açık zeminde
   halkanın kendisi görünmez kalıyordu. Burada kenar rengi devralınır. */
.yukleniyor { display: flex; justify-content: center; padding: 40px 0; }
.yukleniyor .donen {
    width: 26px; height: 26px;
    border-color: var(--kenar);
    border-top-color: var(--accent);
}

/* --- Servis geçmişi --- */
.gecmis-liste { list-style: none; margin: 0; padding: 0; }
.gecmis-satir {
    padding: 14px var(--bosluk);
    border: 1px solid var(--kenar);
    border-radius: var(--yaricap);
    background: var(--yuzey);
    margin-bottom: 10px;
}
.gecmis-satir:last-child { margin-bottom: 0; }
.gecmis-satir--aktif {
    border-color: var(--accent);
    background: var(--zemin-bilgi);
}
.rozet--bu {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.gecmis-ust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.gecmis-tarih { font-family: var(--yazi-baslik); font-weight: 650; font-size: .875rem; }
.gecmis-tutar { margin-left: auto; font-family: var(--yazi-baslik); font-weight: 650;
                font-size: .8125rem; color: var(--renk-tamamlandi); }
.gecmis-parca { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px;
                font-size: .75rem; color: var(--metin-2); }
.gecmis-not   { margin-top: 4px; font-size: .78125rem; line-height: 1.4; color: var(--metin-2); }
.gecmis-not strong { color: var(--metin); font-weight: 600; }

/* ==========================================================================
   ALT SAYFA (bottom sheet)
   ========================================================================== */
.sayfa-ortu {
    position: fixed; inset: 0;
    z-index: 70;
    background: rgba(0,0,0,.45);
    animation: soluk .18s ease;
}

.alt-sayfa {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 71;
    max-height: 92dvh;
    display: flex;
    flex-direction: column;
    background: var(--yuzey);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -8px 32px rgba(0,0,0,.18);
    animation: sayfaYuksel .28s cubic-bezier(.22,.9,.28,1);
}
@keyframes sayfaYuksel { from { transform: translateY(100%) } to { transform: none } }

.alt-sayfa__tutamac {
    width: 38px; height: 4px;
    margin: 10px auto 2px;
    border-radius: 2px;
    background: var(--kenar-belirgin);
}
.alt-sayfa__baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px var(--bosluk) 10px;
    border-bottom: 1px solid var(--kenar);
}
.alt-sayfa__baslik h2 { margin: 0; font-size: 1.0625rem; }
.alt-sayfa__govde {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--bosluk) var(--bosluk) calc(var(--bosluk) + env(safe-area-inset-bottom));
}

/* Ürün seçimi neredeyse tüm ekranı kaplar — teknisyen listeyi kaydırırken
   arkadaki sayfayı görmesine gerek yok, uzun listede alan kazanılır. */
.alt-sayfa--tam { height: 92dvh; }

/* --- İkinci kat -----------------------------------------------------------
   Bir alt sayfanın İÇİNDEN açılan sayfa (servisi kapatma ekranındaki KVKK
   metni gibi) onun ÜSTÜNDE durmalı. İkisi de 70/71'deyken sırayı DOM
   belirliyordu: KVKK bölümü işaretlemede daha yukarıda tanımlı olduğu için
   metin, kapatma sayfasının ARKASINDA açılıyor ve görünmüyordu. */
.sayfa-ortu--ust { z-index: 80; }
.alt-sayfa--ust  { z-index: 81; }

/* --- Banka doğrulaması (3D Secure) ---------------------------------------
   Bankanın sayfası TAHSİLAT SAYFASININ ÜSTÜNDE açılır; altındaki form
   yerinde durur, teknisyen sayfadan çıkmaz. Bu yüzden katman numaraları
   alt sayfanınkinden (70/71) yüksek. */
.sayfa-ortu--banka { z-index: 80; }

.alt-sayfa--banka {
    z-index: 81;
    height: 96dvh;
    max-height: 96dvh;
}

/* Bankanın kendi sayfası boyunu bildiremez (ayrı kaynak) — kalan alanın
   tamamını kaplar, kaydırma çerçevenin içinde olur. */
.banka-cerceve {
    position: relative;
    flex: 1;
    min-height: 0;
    background: var(--yuzey-2);
}
.banka-cerceve iframe {
    display: block;
    width: 100%; height: 100%;
    border: 0;
}

.banka-bekle {
    position: absolute; inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--metin-2);
    font-size: .9375rem;
    background: var(--yuzey);
}
.banka-bekle .donen {
    border-color: var(--kenar-belirgin);
    border-top-color: var(--renk-marka);
}

.banka-dipnot {
    padding: 10px var(--bosluk) calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--kenar);
    color: var(--metin-2);
    font-size: .8125rem;
    line-height: 1.45;
    text-align: center;
}
.banka-dipnot button {
    display: block;
    margin: 6px auto 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--renk-marka);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* ==========================================================================
   YAPILAN İŞLEM — parça / iade / tahsilat  (PLAN-01 §4.9, §4.10)
   ========================================================================== */

.kart-dugme__ikon--geri { background: var(--yuzey-2); color: var(--metin-2); }

.eylem-ikili { display: flex; gap: 10px; }
.eylem-ikili .btn { flex: 1; }
.eylem-ikili .btn:last-child { flex: 0 0 34%; }

/* --- Eklenen satırlar --- */
.parca-liste { list-style: none; margin: 0; padding: 0; }
.parca-satir {
    padding: 12px var(--bosluk);
    border-bottom: 1px solid var(--kenar);
    transition: opacity .15s;
}
.parca-satir:last-child { border-bottom: 0; }
.parca-satir--bekliyor { opacity: .5; pointer-events: none; }

.parca-satir__ust {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.parca-satir__ad {
    flex: 1;
    font-size: .875rem;
    font-weight: 550;
    line-height: 1.35;
}
.parca-satir__tutar {
    font-family: var(--yazi-baslik);
    font-weight: 700;
    font-size: .9375rem;
    white-space: nowrap;
}
.parca-satir__alt { display: flex; align-items: center; gap: 8px; }
/* İade kartı kırmızı: satılan ürünle karıştırılması pahalıya patlar —
   iade depoya geri girer ve borçtan düşmez. Renk uyarı değil ayırt edici
   olduğu için zemin açık tonda, yalnızca başlık ve kenar doygun. */
.kart--iade { border-color: var(--kenar-iade); }
.kart__baslik--iade {
    color: var(--renk-iptal);
    background: var(--zemin-hata);
    border-bottom-color: var(--kenar-iade);
}
.kart--iade .parca-satir--iade { background: transparent; }
.parca-satir--iade .parca-satir__ad { color: var(--metin-2); }
.parca-satir--iade { background: var(--yuzey-2); }

.parca-sil { color: var(--metin-3); flex: 0 0 auto; }
@media (hover: hover) { .parca-sil:hover { color: var(--renk-iptal); } }

/* --- Adet seçici --- */
.adet-secim {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    border: 1.5px solid var(--kenar-belirgin);
    border-radius: 10px;
    overflow: hidden;
}
.adet-btn {
    width: 36px;
    min-height: 38px;
    border: 0;
    background: var(--yuzey-2);
    color: var(--metin);
    font: inherit;
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
}
.adet-btn:active { background: var(--kenar); }
.adet-girdi {
    width: 40px;
    min-height: 38px;
    border: 0;
    background: transparent;
    color: var(--metin);
    font: inherit;
    font-family: var(--yazi-baslik);
    font-weight: 650;
    text-align: center;
}

/* --- Para girdisi --- */
.para-girdi { position: relative; flex: 1 1 auto; }
.para-girdi .girdi { padding-right: 30px; }
.para-girdi__birim {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--metin-3);
    font-size: .875rem;
    pointer-events: none;
}
.para-girdi--kucuk .girdi {
    min-height: 38px;
    padding: 0 28px 0 10px;
    font-size: .875rem;
    text-align: right;
}
.para-girdi--kucuk .para-girdi__birim { right: 9px; font-size: .8125rem; }
.para-girdi .girdi[readonly] { background: var(--yuzey-2); color: var(--metin-2); }

.ozet-satir--indirim strong { color: var(--renk-tamamlandi); }
.kdv-satir { display: inline-flex; align-items: center; gap: 7px; }
.kdv-secim {
    min-height: 30px;
    padding: 0 6px;
    border: 1px solid var(--kenar-belirgin);
    border-radius: 8px;
    background: var(--yuzey);
    color: var(--metin);
    font: inherit;
    font-size: .8125rem;
}
.olumlu { color: var(--renk-tamamlandi); }

/* --- Ürün arama --- */
.urun-arac {
    padding: 10px var(--bosluk) 0;
    border-bottom: 1px solid var(--kenar);
}
.arama-kutu { position: relative; }
.arama-kutu svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--metin-3);
    pointer-events: none;
}
.arama-kutu .girdi { padding-left: 36px; }

.grup-serit {
    display: flex;
    gap: 7px;
    margin: 10px calc(var(--bosluk) * -1) 0;
    padding: 0 var(--bosluk) 10px;
    overflow-x: auto;
    scrollbar-width: none;
}
.grup-serit::-webkit-scrollbar { display: none; }
.grup-cip {
    flex: 0 0 auto;
    padding: 6px 13px;
    border: 1.5px solid var(--kenar-belirgin);
    border-radius: 999px;
    background: var(--yuzey);
    color: var(--metin-2);
    font: inherit;
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.grup-cip--aktif {
    background: var(--renk-marka);
    border-color: var(--renk-marka);
    color: #fff;
}
/* Arama yazılırken grup süzgeci uygulanmaz; şerit soluk kalır */
.grup-serit--pasif { opacity: .45; pointer-events: none; }

.urun-liste { list-style: none; margin: 0; padding: 0; }
.urun-satir {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--kenar);
}
.urun-satir:last-child { border-bottom: 0; }
.urun-satir--yok { opacity: .5; }
.urun-satir__bilgi { flex: 1; min-width: 0; }
.urun-satir__ad {
    display: block;
    font-size: .875rem;
    font-weight: 550;
    line-height: 1.35;
}
.urun-satir__alt {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 3px;
    font-size: .75rem;
}
.urun-satir__sag {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}
.urun-satir__fiyat {
    font-family: var(--yazi-baslik);
    font-weight: 700;
    font-size: .875rem;
    white-space: nowrap;
}
.urun-ekle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border: 0;
    border-radius: 50%;
    background: var(--renk-marka);
    color: #fff;
    cursor: pointer;
}
.urun-ekle:disabled { background: var(--kenar-belirgin); cursor: not-allowed; }

/* Ürün eklendi geri bildirimi — sayfa kapanmadan, listede kalarak */
.urun-satir { transition: background .25s; }
.urun-satir--eklendi { background: var(--zemin-basari); }
.urun-satir--islemde { opacity: .55; pointer-events: none; }
.urun-eklenen {
    margin-left: auto;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--renk-tamamlandi);
    color: #fff;
    font-size: .625rem;
    font-weight: 700;
}

/* Silinmek üzere — "Geri al" süresi boyunca soluk durur */
.parca-satir--siliniyor {
    opacity: .4;
    text-decoration: line-through;
    pointer-events: none;
}

/* ==========================================================================
   ONLINE ÖDEME  (PLAN-01 §4.20)
   ========================================================================== */

.girdi--kart {
    font-family: var(--yazi-baslik);
    font-size: 1.125rem;
    letter-spacing: .09em;
}

/* Ay / Yıl / CVV yan yana */
.kart-alt {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}
.kart-alt .alan { margin-bottom: 16px; }

/* --- Sonuç ekranı (banka dönüşü, `bos` düzen) --- */
.sonuc-ekran {
    max-width: 460px;
    margin-inline: auto;
    padding: 32px var(--bosluk) calc(32px + env(safe-area-inset-bottom));
    text-align: center;
}
.sonuc-ekran .kart,
.sonuc-ekran .uyari { text-align: left; margin-bottom: 14px; }
.sonuc-ekran .btn { margin-bottom: 10px; text-decoration: none; }

.sonuc-ikon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px; height: 84px;
    margin: 0 auto 20px;
    border-radius: 50%;
    color: #fff;
}
.sonuc-ikon--basari { background: var(--renk-tamamlandi); }
.sonuc-ikon--hata   { background: var(--renk-iptal); }

.sonuc-baslik {
    margin: 0 0 8px;
    font-family: var(--yazi-baslik);
    font-weight: 750;
    font-size: 1.375rem;
}
.sonuc-metin {
    margin: 0 0 22px;
    color: var(--metin-2);
    font-size: .9375rem;
    line-height: 1.5;
}

/* ==========================================================================
   BİLDİRİM ŞERİDİ
   `alert()` mobilde sayfayı dondurup dokunma odağını kaybettiriyordu.
   ========================================================================== */
.bildirim-serit {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(84px + env(safe-area-inset-bottom));
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.bildirim-balon {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: var(--yaricap);
    background: #202124;
    color: #fff;
    font-size: .8125rem;
    line-height: 1.4;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .28);
    animation: bildirimGir .22s cubic-bezier(.22, .9, .28, 1);
    pointer-events: auto;
}
.bildirim-balon--hata   { background: var(--renk-iptal); }
.bildirim-balon--basari { background: var(--renk-tamamlandi); }
.bildirim-balon--islem span { flex: 1; }
.bildirim-balon--islem button {
    flex: 0 0 auto;
    padding: 4px 10px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.bildirim-balon--cikis { animation: bildirimCik .24s forwards; }

@keyframes bildirimGir { from { opacity: 0; transform: translateY(12px) } }
@keyframes bildirimCik { to   { opacity: 0; transform: translateY(12px) } }

.rozet--stok   { background: transparent; color: var(--renk-tamamlandi);
                 border: 1px solid var(--renk-tamamlandi); padding: 1px 7px; font-size: .6875rem; }
.rozet--yok    { background: transparent; color: var(--renk-iptal);
                 border: 1px solid var(--renk-iptal); padding: 1px 7px; font-size: .6875rem; }
.rozet--hizmet { background: transparent; color: var(--metin-3);
                 border: 1px solid var(--kenar-belirgin); padding: 1px 7px; font-size: .6875rem; }
.rozet--bekliyor { background: var(--zemin-dikkat); color: var(--accent-700);
                   padding: 1px 7px; font-size: .6875rem; }

/* --- Alınan tahsilatlar ---
   Parça satırıyla aynı iskelet: üstte ad + tutar, altta rozetler ve
   eylemler. Tutar sağda ve kalın; teknisyen listeye baktığında önce
   rakamları tarıyor. */
.tahsilat-liste { list-style: none; margin: 0; padding: 0; }
.tahsilat-satir {
    padding: 12px var(--bosluk);
    border-bottom: 1px solid var(--kenar);
    transition: opacity .15s;
}
.tahsilat-satir:last-child { border-bottom: 0; }
/* Silme onayı yerine 5 sn'lik "Geri al": satır sönük ve tıklanamaz olur */
.tahsilat-satir--siliniyor { opacity: .4; pointer-events: none; }

.tahsilat-satir__ust { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tahsilat-satir__ad  { flex: 1; font-size: .875rem; font-weight: 550; }
.tahsilat-satir__tutar {
    font-family: var(--yazi-baslik);
    font-weight: 700;
    font-size: .9375rem;
    white-space: nowrap;
    color: var(--renk-tamamlandi);
}
.tahsilat-satir__alt   { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tahsilat-satir__eylem { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.tahsilat-satir__not   { margin-top: 6px; line-height: 1.4; }

.tahsilat-sil { color: var(--metin-3); }
@media (hover: hover) { .tahsilat-sil:hover { color: var(--renk-iptal); } }

/* Değiştirilemeyen kayıt: düğme yerine gerekçe. Bankadan çekilmiş kart
   ya da muhasebenin onayladığı havale sahadan düzeltilemez. */
.tahsilat-kilit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    font-size: .6875rem;
    color: var(--metin-3);
}

/* --- Senet satırları --- */
.senet-satir {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.senet-satir .girdi[type="date"] { flex: 1 1 auto; min-height: 38px; font-size: .875rem; }
.alan__ipucu--hata { color: var(--renk-iptal); font-weight: 600; }

/* ==========================================================================
   AŞAMA 7 — depo · hesap · bildirim · harita
   ========================================================================== */

/* Ürün arama çubuğu kart içine gömüldüğünde kenar boşlukları farklı */
.urun-arac--gomulu { padding: 12px var(--bosluk); }

.buyuk-tutar {
    margin-bottom: 10px;
    font-family: var(--yazi-baslik);
    font-weight: 750;
    font-size: 2rem;
    line-height: 1.1;
    letter-spacing: -.02em;
}
.buyuk-tutar span { font-size: 1.125rem; font-weight: 650; color: var(--metin-3); }
/* Merkeze teslim edilmemiş para varsa tutar kırmızı: gözden kaçmasın */
.buyuk-tutar--borc { color: var(--renk-iptal); }

/* Dönem/sekme şeridi kart dışında dururken kenar payı gerekir */
.grup-serit--bagimsiz { margin: 0; padding: 0 0 2px; }
.grup-serit--bagimsiz .grup-cip { text-decoration: none; }

/* Liste satırının tamamı bağlantı olduğunda */
.liste__bag {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}
.liste__satir--yeni { background: var(--zemin-bilgi); }

.rota-no {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--renk-marka);
    color: #fff;
    font-family: var(--yazi-baslik);
    font-weight: 700;
    font-size: .75rem;
}
/* Adresi haritada çözülemeyen durak — sıradaki yeri belli, pini yok */
.rota-no--bos {
    background: transparent;
    border: 1.5px dashed var(--kenar-belirgin);
    color: var(--metin-3);
}

/* --- Bildirimler --- */
.bildirim {
    padding: 13px var(--bosluk);
    border-bottom: 1px solid var(--kenar);
}
.bildirim:last-child { border-bottom: 0; }
.bildirim--yeni { background: var(--zemin-bilgi); }
.bildirim__ust { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.bildirim__ad  { flex: 1; font-family: var(--yazi-baslik); font-weight: 650; font-size: .875rem; }
.bildirim__metin { font-size: .8125rem; line-height: 1.45; color: var(--metin-2); }
.bildirim__alt { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.bildirim__alt .btn { flex: 0 0 auto; text-decoration: none; }

.mesaj-govde { font-size: .9375rem; line-height: 1.6; }

/* --- Profil --- */
.profil-ust {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: var(--bosluk);
    border-bottom: 1px solid var(--kenar);
}
.profil-harf {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--renk-marka);
    color: #fff;
    font-family: var(--yazi-baslik);
    font-weight: 700;
    font-size: 1.375rem;
}
.profil-ad { font-family: var(--yazi-baslik); font-weight: 700; font-size: 1.0625rem; }

/* --- Harita ekranı: gövdenin tamamı harita --- */
.harita-ekran {
    position: relative;
    /* Gövde dolgusundan taşarak ekranın tamamını kaplar. Alt dolgu
       `.uyg-govde` içinde 84px + güvenli alan olduğu için sol/sağ/üstten
       farklı; bu yüzden tek tek yazılıyor.
       Yükseklik `--harita-yukseklik` ile JS'ten gelir (harita.js); üst
       çubuğun yüksekliği düzene göre değiştiği için CSS'te sabitlenemez. */
    height: var(--harita-yukseklik, 62dvh);
    min-height: 300px;
    margin: calc(var(--bosluk) * -1) calc(var(--bosluk) * -1)
            calc((84px + env(safe-area-inset-bottom)) * -1);
    background: var(--yuzey-2);
    overflow: hidden;
}
.harita-tuval {
    position: absolute;
    inset: 0;
    touch-action: none;
    cursor: grab;
}
.harita--surukleniyor { cursor: grabbing; }

/* Sekme şeridi haritanın üzerinde yüzer */
.harita-serit {
    position: absolute;
    top: 10px; left: 0; right: 0;
    z-index: 3;
    display: flex;
    gap: 7px;
    padding: 0 12px 4px;
    overflow-x: auto;
    scrollbar-width: none;
}
.harita-serit::-webkit-scrollbar { display: none; }
.harita-serit .grup-cip {
    text-decoration: none;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
.harita-serit .grup-cip--aktif { background: var(--renk-marka); }

/* Alt bilgi çubuğu */
.harita-alt {
    position: absolute;
    left: 10px; right: 10px;
    /* Alt menünün üstünde kalsın */
    bottom: calc(84px + env(safe-area-inset-bottom));
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--yaricap);
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    font-size: .75rem;
}
.harita-alt__bilgi { flex: 1; min-width: 0; line-height: 1.4; }
.harita-alt .btn { flex: 0 0 auto; text-decoration: none; }

.harita-bos {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 20px;
}

:root[data-theme="dark"] .harita-serit .grup-cip:not(.grup-cip--aktif),
:root[data-theme="dark"] .harita-alt { background: rgba(28, 34, 44, .95); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .harita-serit .grup-cip:not(.grup-cip--aktif),
    :root:not([data-theme="light"]) .harita-alt { background: rgba(28, 34, 44, .95); }
}

/* Durak modalı */
.durak-ad {
    margin-bottom: 8px;
    font-family: var(--yazi-baslik);
    font-weight: 700;
    font-size: 1.0625rem;
}
.durak-eylem { display: flex; gap: 8px; margin-top: 14px; }
.durak-eylem .btn { flex: 1; text-decoration: none; }

.harita-karolar, .harita-pinler {
    position: absolute;
    inset: 0;
}
.harita-pinler { pointer-events: none; }
.harita-karolar img {
    position: absolute;
    width: 256px; height: 256px;
    user-select: none;
    -webkit-user-drag: none;
}

.harita-pin {
    position: absolute;
    transform: translate(-50%, -100%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border: 2px solid #fff;
    border-radius: 50% 50% 50% 4px;
    background: var(--renk-marka);
    color: #fff;
    font: inherit;
    font-family: var(--yazi-baslik);
    font-weight: 700;
    font-size: .75rem;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
    cursor: pointer;
    pointer-events: auto;
}
/* Sokak düzeyinde çözülemeyen adres — kesin nokta değil, semt merkezi */
.harita-pin--yaklasik {
    background: var(--accent-500);
    border-style: dashed;
}

.harita-zoom {
    position: absolute;
    right: 10px;
    width: 32px; height: 32px;
    border: 1px solid var(--kenar-belirgin);
    border-radius: 8px;
    background: var(--yuzey);
    color: var(--metin);
    font: inherit;
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}
.harita-zoom--arti { top: 10px; }
.harita-zoom--eksi { top: 48px; }

.harita-atif {
    position: absolute;
    right: 0; bottom: 0;
    z-index: 2;
    padding: 2px 6px;
    background: rgba(255,255,255,.78);
    color: #333;
    font-size: .625rem;
    text-decoration: none;
}

/* ==========================================================================
   FORMLAR — servis açma / müşteri ekleme  (PLAN-01 §4.7, §4.8)
   ========================================================================== */

.kart--form { padding: var(--bosluk); }
.kart--form .alan:last-of-type { margin-bottom: 0; }

.form-baslik {
    margin: 4px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--kenar);
    font-family: var(--yazi-baslik);
    font-weight: 650;
    font-size: .9375rem;
}
.form-baslik:not(:first-child) { margin-top: 22px; }

.girdi--buyuk {
    min-height: 54px;
    font-family: var(--yazi-baslik);
    font-size: 1.25rem;
    font-weight: 650;
    letter-spacing: .06em;
    text-align: center;
}

/* Katlanır bölüm — fatura ve cihaz bilgileri çoğu kayıtta boş geçilir */
.katlanir {
    margin-bottom: 16px;
    border: 1px solid var(--kenar);
    border-radius: var(--yaricap);
    overflow: hidden;
}
.katlanir > summary {
    padding: 12px 14px;
    background: var(--yuzey-2);
    font-family: var(--yazi-baslik);
    font-weight: 600;
    font-size: .875rem;
    cursor: pointer;
    list-style: none;
}
.katlanir > summary::-webkit-details-marker { display: none; }
.katlanir > summary::after {
    content: '+';
    float: right;
    color: var(--metin-3);
    font-size: 1.125rem;
    line-height: 1;
}
.katlanir[open] > summary::after { content: '−'; }
.katlanir > *:not(summary) { padding-left: 14px; padding-right: 14px; }
.katlanir > .alan:first-of-type { margin-top: 14px; }
.katlanir > .alan:last-child { margin-bottom: 14px; }
.katlanir > p { margin: 12px 14px 0; }

/* İşlem seçim çipleri */
.secim-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
    gap: 8px;
}
.secim-cip { position: relative; cursor: pointer; }
.secim-cip input { position: absolute; opacity: 0; width: 0; height: 0; }
.secim-cip span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 10px;
    border: 1.5px solid var(--kenar-belirgin);
    border-radius: 11px;
    background: var(--yuzey);
    color: var(--metin-2);
    font-size: .8125rem;
    font-weight: 550;
    text-align: center;
    transition: background .16s, border-color .16s, color .16s;
}
.secim-cip input:checked + span {
    background: var(--zemin-bilgi);
    border-color: var(--renk-marka);
    color: var(--accent-700);
    font-weight: 650;
}
.secim-cip input:focus-visible + span { outline: 2px solid var(--renk-marka); outline-offset: 2px; }

/* Servis tipi seçimi — teknisyenin açabildiği sınırlı liste */
.tip-secim { display: flex; flex-direction: column; gap: 8px; }
.tip-kart { position: relative; cursor: pointer; }
.tip-kart input { position: absolute; opacity: 0; width: 0; height: 0; }
.tip-kart__govde {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border: 1.5px solid var(--kenar-belirgin);
    border-radius: 12px;
    background: var(--yuzey);
    transition: background .16s, border-color .16s;
}
.tip-kart__ad {
    font-family: var(--yazi-baslik);
    font-weight: 650;
    font-size: .9375rem;
    color: var(--metin);
}
.tip-kart__not { font-size: .75rem; color: var(--metin-2); }
.tip-kart input:checked + .tip-kart__govde {
    background: var(--zemin-bilgi);
    border-color: var(--renk-marka);
}
.tip-kart input:checked + .tip-kart__govde .tip-kart__ad { color: var(--accent-700); }
.tip-kart input:focus-visible + .tip-kart__govde { outline: 2px solid var(--renk-marka); outline-offset: 2px; }

/* İkili seçim (atama) */
.secim-ikili { display: flex; gap: 10px; }
.secim-btn { flex: 1; position: relative; cursor: pointer; }
.secim-btn input { position: absolute; opacity: 0; width: 0; height: 0; }
.secim-btn span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border: 1.5px solid var(--kenar-belirgin);
    border-radius: 12px;
    background: var(--yuzey);
    color: var(--metin-2);
    font-family: var(--yazi-baslik);
    font-weight: 650;
    font-size: .875rem;
    transition: background .16s, border-color .16s, color .16s;
}
.secim-btn input:checked + span {
    background: var(--renk-marka);
    border-color: var(--renk-marka);
    color: #fff;
}
.secim-btn input:focus-visible + span { outline: 2px solid var(--renk-marka); outline-offset: 2px; }

/* Telefon listesinin altındaki ekleme düğmesi */
.tel-ekle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    min-height: 42px;
    border: 0;
    border-top: 1px solid var(--kenar);
    background: none;
    color: var(--renk-marka);
    font: inherit;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
}
@media (hover: hover) { .tel-ekle-btn:hover { background: var(--yuzey-2); } }
.tel-ekle-btn:active { background: var(--yuzey-2); }

/* Metin içinde bağlantı gibi görünen düğme */
.metin-btn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--renk-marka);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* KVKK hukuki metni — uzun, okunabilirlik önemli */
.kvkk-metin {
    font-size: .8125rem;
    line-height: 1.65;
    color: var(--metin-2);
}
.kvkk-metin p { margin: 0 0 12px; }

/* --- Filtre periyodu --- */
/* Dört seçenek tek satırda: alt satıra kayınca "4 ay" ile "10 ay"
   ayrı gruplar gibi görünüyordu. */
.periyot-secim {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.periyot-btn {
    min-height: 44px;
    padding-inline: 2px;         /* dar ekranda "10 ay" sığsın */
    white-space: nowrap;
    border: 1.5px solid var(--kenar-belirgin);
    border-radius: 11px;
    background: var(--yuzey);
    color: var(--metin-2);
    font: inherit;
    font-family: var(--yazi-baslik);
    font-weight: 650;
    font-size: .875rem;
    cursor: pointer;
    transition: background .16s, border-color .16s, color .16s;
}
.periyot-btn--secili {
    background: var(--renk-marka);
    border-color: var(--renk-marka);
    color: #fff;
}
.periyot-btn:disabled { opacity: .5; cursor: not-allowed; }

/* --- Anahtar (toggle) --- */
.anahtar { display: inline-flex; flex: 0 0 auto; cursor: pointer; }
.anahtar input { position: absolute; opacity: 0; width: 0; height: 0; }
.anahtar__yol {
    display: block;
    width: 44px; height: 26px;
    border-radius: 999px;
    background: var(--kenar-belirgin);
    transition: background .18s;
}
.anahtar__top {
    display: block;
    width: 20px; height: 20px;
    margin: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transition: transform .18s;
}
.anahtar input:checked + .anahtar__yol { background: var(--renk-tamamlandi); }
.anahtar input:checked + .anahtar__yol .anahtar__top { transform: translateX(18px); }
.anahtar input:disabled + .anahtar__yol { opacity: .5; }
/* Klavye ile gezinenler için odak halkası — kutu görsel olarak gizli */
.anahtar input:focus-visible + .anahtar__yol { outline: 2px solid var(--renk-marka); outline-offset: 2px; }

/* --- Onay kutusu satırı --- */
.onay-satir {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--dokunma);
    font-size: .875rem;
    cursor: pointer;
}
.onay-satir input { width: 19px; height: 19px; accent-color: var(--renk-marka); }

/* --- Puan seçimi --- */
.puan-secim { display: flex; gap: 8px; }
.puan-btn {
    flex: 1;
    min-height: 46px;
    border: 1.5px solid var(--kenar-belirgin);
    border-radius: 12px;
    background: var(--yuzey);
    color: var(--metin-2);
    font: inherit;
    font-family: var(--yazi-baslik);
    font-size: 1rem;
    font-weight: 650;
    cursor: pointer;
    transition: background .16s, border-color .16s, color .16s;
}
.puan-btn--secili {
    background: var(--renk-marka);
    border-color: var(--renk-marka);
    color: #fff;
}

/* --- İmza --- */
.imza-kutu {
    position: relative;
    border: 1.5px dashed var(--kenar-belirgin);
    border-radius: 12px;
    background: var(--yuzey-2);
    overflow: hidden;
}
.imza-kutu canvas {
    display: block;
    width: 100%;
    height: 170px;
    touch-action: none;
}
.imza-temizle {
    position: absolute;
    top: 8px; right: 8px;
    padding: 5px 11px;
    border: 0;
    border-radius: 8px;
    background: var(--yuzey);
    color: var(--metin-2);
    font: inherit;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--golge-sm);
}

/* --- Harita + navigasyon (servis detay üstü) ------------------------------ */
.harita-kart { overflow: hidden; }

.harita { position: relative; height: 190px; background: var(--yuzey-2); }
.harita iframe { width: 100%; height: 100%; border: 0; display: block; }
.harita--yok {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--metin-3);
    font-size: .8125rem;
}

/* Adres sokak düzeyinde çözülemediğinde haritanın üstüne binen uyarı.
   Pin yok, çünkü gösterilecek kesin bir nokta yok — sadece semt. */
.harita-rozet {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 6px 10px;
    border-radius: var(--yaricap-s);
    background: rgba(20, 28, 38, .82);
    color: #fff;
    font-size: .6875rem;
    font-weight: 600;
    text-align: center;
    pointer-events: none;
}

.harita-adres {
    padding: 12px var(--bosluk) 10px;
    font-size: .875rem;
    line-height: 1.45;
    color: var(--metin);
}
.harita-etiket {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 7px;
    border-radius: 5px;
    background: var(--zemin-dikkat);
    color: var(--accent-700);
    font-size: .625rem;
    font-weight: 700;
    vertical-align: 1px;
}

.nav-butonlar {
    display: flex;
    gap: 8px;
    padding: 0 var(--bosluk) var(--bosluk);
}
/* Haritanın hemen altındaysa (arada adres notu yok) */
.nav-butonlar--ust { padding-top: 12px; }
.nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    border-radius: 12px;
    background: var(--zemin-bilgi);
    color: var(--renk-marka);
    font-size: .71875rem;
    font-weight: 650;
    text-decoration: none;
    transition: transform .12s;
}
.nav-btn:active { transform: scale(.96); }
.nav-btn:hover  { text-decoration: none; }

/* --- Servis adımları ------------------------------------------------------ */
.adimlar { list-style: none; margin: 0; padding: 0; }

.adim {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px var(--bosluk);
    border-bottom: 1px solid var(--kenar);
}
.adim:last-child { border-bottom: 0; }

.adim__no {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--yuzey-3);
    color: var(--metin-3);
    font-family: var(--yazi-baslik);
    font-size: .8125rem;
    font-weight: 700;
}
.adim--sirada .adim__no { background: var(--renk-marka); color: #fff; }
.adim--tamam  .adim__no { background: var(--renk-tamamlandi); color: #fff; }

.adim__govde { flex: 1; min-width: 0; }
.adim__ad    { font-weight: 600; font-size: .9375rem; }
.adim__alt   { font-size: .78125rem; color: var(--metin-3); margin-top: 1px; }
.adim--bekliyor .adim__ad,
.adim--bekliyor .adim__alt { opacity: .55; }

.adim__btn {
    flex: 0 0 auto;
    padding: 7px 14px;
    border-radius: 10px;
    background: var(--zemin-bilgi);
    color: var(--renk-marka);
    font-size: .8125rem;
    font-weight: 650;
    text-decoration: none;
}
.adim__btn:hover { text-decoration: none; }

/* --- Form yardımcıları ---------------------------------------------------- */
.zorunlu { color: var(--renk-iptal); font-weight: 700; }
.alan__ipucu { margin-top: 5px; font-size: .75rem; color: var(--metin-3); }

select.girdi option:disabled { color: var(--metin-3); }

/* WebView: hareket tercihi ve bağlantı hata bildirimi */
.sp-ag-hatasi { position:fixed; left:1rem; right:1rem; bottom:calc(1rem + env(safe-area-inset-bottom)); z-index:100000; padding:1rem; border-radius:.8rem; background:#8b1c13; color:#fff; box-shadow:0 4px 24px #0003; }
.sp-ag-hatasi[hidden] { display:none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}


/* Mobil kullanım — okunabilir yüzeyler ve belirgin işlem hiyerarşisi */
.uyg-govde { --metin-3: var(--metin-2); }
.kart, .satir { border: 1px solid var(--kenar); box-shadow: 0 2px 8px rgba(16,24,40,.035); }
/* Liste yazıları bir kademe küçük: adres artık kesilmiyor, satır
   uzadığı için ad ve boşluklar da sıkılaştırıldı. */
.satir__ad { font-size: .9375rem; line-height: 1.35; }
.satir__adres, .satir__alt { line-height: 1.45; }
.satir__icerik, .adim__govde { min-width: 0; overflow-wrap: anywhere; }
.satir__bag { padding-block: 13px; gap: 11px; }
.servis-liste { gap: 12px; }
.liste-baslik { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 18px; }
.liste-baslik h2 { margin: 3px 0; font-size: 1.5rem; letter-spacing: -.035em; line-height: 1.2; }
.liste-baslik__ust { margin: 0; font-size: .6875rem; letter-spacing: .12em; font-weight: 750; color: var(--metin-2); }
.liste-baslik__bilgi { margin: 5px 0 0; font-size: .8125rem; color: var(--metin-2); min-height: 1.3em; }
.liste-baslik .btn { flex-shrink: 0; gap: 7px; padding-inline: 12px; }
.btn { border-radius: 12px; min-height: 48px; }
.btn--iade { background: var(--zemin-hata); color: #AD3025; border: 1px solid var(--kenar-iade); }
.btn--iade:hover { background: var(--zemin-hata); color: #AD3025; }
.btn:disabled { cursor: wait; }
.girdi, .adet-girdi { font-size: 16px; }
.girdi { min-height: 48px; border-radius: 10px; }
.girdi:focus { border-color: var(--renk-marka); box-shadow: 0 0 0 3px var(--renk-marka-acik); }
:where(a,button,input,select,textarea,summary):focus-visible { outline: 3px solid var(--renk-marka); outline-offset: 3px; }
.alan__etiket { font-weight: 650; }
.alan__ipucu { font-size: .8125rem; line-height: 1.5; }
/* Adet · fiyat · sil TEK satırda kalır. Sarmaya izin verilince dar
   ekranda adet üstte, fiyat altta kalıyor ve satır iki kata çıkıyordu.
   Adet düğmeleri 44 → 40 px: dokunma hedefi hâlâ yeterli, 360 px'te
   fiyat alanına ~150 px kalıyor. */
.adet-btn { width: 40px; min-height: 44px; }
.adet-girdi { width: 34px; min-height: 44px; padding: 0; }
.parca-satir__alt { flex-wrap: nowrap; gap: 8px; }
.para-girdi--kucuk { flex: 1 1 auto; min-width: 0; }
.para-girdi--kucuk .girdi { width: 100%; min-width: 0; }
.parca-satir__tutar, .ozet-satir strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.parca-satir--bekliyor { opacity: .7; pointer-events: auto; }
.parca-satir[data-siliniyor="1"] { pointer-events: none; }
.ozet-satir--vurgu { padding: 14px 12px; border-radius: 10px; background: var(--yuzey-2); gap: 12px; }
.ozet-satir--borc { background: var(--zemin-hata); }
.detay-kayit { font-size: .75rem; color: var(--metin-2); font-weight: 650; margin-bottom: 5px; }
.detay-ust__ad { font-size: 1.3rem; line-height: 1.35; }
.harita--yok { min-height: 66px; height: auto; padding: 16px; }
.adim__btn, .grup-cip, .nav-btn { min-height: 44px; }
.adim--sirada { background: var(--renk-marka-acik); border-radius: 12px; }
.alt-sayfa { width: 100%; max-width: 720px; margin-inline: auto; max-height: 92vh; max-height: 92dvh; }
.alt-sayfa__baslik { padding: 10px 16px 12px; }
.alt-sayfa__baslik h2 { font-size: 1.125rem; }
.alt-sayfa__govde { overscroll-behavior-y: contain; scroll-padding-block: 16px; }
.alt-oge { color: var(--metin-2); min-height: 64px; }
.alt-oge--aktif { color: var(--renk-marka); }
.islem-ekrani { padding-bottom: 78px; }
.islem-devam { position: fixed; z-index: 46; bottom: calc(64px + env(safe-area-inset-bottom)); left: 0; right: 0; width: 100%; max-width: 720px; margin-inline: auto; padding: 10px 16px; background: var(--yuzey); border-top: 1px solid var(--kenar); box-shadow: 0 -4px 14px rgba(16,24,40,.04); }
.islem-devam .btn { min-height: 50px; font-size: 1rem; }
.baglanti-durumu { position: sticky; top: 0; z-index: 48; padding: 10px 16px; background: var(--zemin-hata); color: var(--metin); font-size: .8125rem; line-height: 1.5; border-bottom: 1px solid var(--kenar-iade); }
.icerige-atla { position: fixed; top: -100px; left: 16px; z-index: 100; padding: 12px; background: var(--yuzey); color: var(--metin); border-radius: 8px; }
.icerige-atla:focus { top: 10px; }
@media (max-width: 360px) {
    .uyg-govde { --bosluk: 12px; }
    .satir__bag { gap: 8px; }
    .parca-satir__alt .para-girdi { flex-basis: 80px; }
    .adet-btn { width: 36px; }
}

.btn.btn--basarili { background: #087854; }
.btn.btn--basarili:hover { background: #066345; }
@media (prefers-color-scheme: dark) {
    .btn--iade, .btn--iade:hover { color: #ffb4ab; }
}

/* Dar giriş ekranı: kart, PIN ve uzun kullanıcı adı genişliği büyütmez. */
.giris-ekran > * { min-width: 0; max-width: 100%; }
.giris-ekran > .giris-kart { max-width: 400px; }
.giris-kart form { min-width: 0; width: 100%; }
@media (max-width: 360px) {
    .giris-kart { padding: 22px 16px 20px; }
    .kod-kutular { gap: 8px; }
}
@media (min-width: 560px) {
    .giris-ekran > .giris-kart { max-width: 420px; }
}

/* Kompakt müşteri geçmişi: iki satırlık özet, dokununca ayrıntı. */
.musteri-gecmis{min-width:0;max-width:100%}
.gecmis-ozet{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:0 0 6px;flex-wrap:wrap}
.gecmis-ozet strong{font-size:14px;overflow-wrap:anywhere}.gecmis-ozet>span{font-size:12px;color:var(--metin-2);white-space:nowrap}
.gecmis-sekmeler{display:flex;gap:4px;overflow-x:auto;max-width:100%;margin-bottom:6px;border-bottom:1px solid var(--kenar);scrollbar-width:none}
.gecmis-sekmeler::-webkit-scrollbar{display:none}
.gecmis-sekmeler button{flex:0 0 auto;max-width:240px;min-height:44px;padding:8px 10px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--metin-2);font:inherit;font-size:12px;text-align:left;overflow-wrap:anywhere}
.gecmis-sekmeler button[aria-pressed=true]{color:var(--renk-marka);border-bottom-color:var(--renk-marka);font-weight:700}.gecmis-sekmeler button span{font-size:11px;margin-left:4px;opacity:.8}
.gecmis-kayitlar{border:1px solid var(--kenar);border-radius:10px;overflow:hidden}
.gecmis-kart{min-width:0;background:var(--yuzey);overflow-wrap:anywhere}.gecmis-kart+.gecmis-kart{border-top:1px solid var(--kenar)}
.gecmis-kart--aktif{box-shadow:inset 3px 0 var(--renk-marka)}
.gecmis-kisa{position:relative;display:block;list-style:none;cursor:pointer;padding:10px 30px 10px 12px;min-height:64px}
.gecmis-kisa::-webkit-details-marker{display:none}
.gecmis-kisa__ust{display:flex;align-items:baseline;gap:8px;font-size:12px;line-height:1.5;flex-wrap:wrap}.gecmis-kisa__ust time{font-weight:700}.gecmis-kisa__ust>strong{margin-left:auto;white-space:nowrap;font-size:13px}
.gecmis-durum{font-size:10px;color:var(--metin-2)}
.gecmis-kisa__model{display:block;font-size:13px;font-weight:600;line-height:1.4;margin-top:3px}.gecmis-kisa__model small{font-size:10px;color:var(--renk-marka);margin-left:6px;white-space:nowrap}
.gecmis-ok{position:absolute;right:12px;top:22px;font-size:16px;color:var(--metin-2);line-height:1}.gecmis-kart[open]>.gecmis-kisa .gecmis-ok{transform:rotate(180deg)}
.gecmis-ayrinti{padding:0 12px 10px;border-top:1px dashed var(--kenar)}.gecmis-kimlik{font-size:11px;color:var(--metin-2);margin:8px 0}
.gecmis-aciklama{font-size:12px;line-height:1.5;white-space:pre-wrap;margin:6px 0}.gecmis-aciklama strong{color:var(--metin-2);margin-right:6px}.gecmis-aciklama strong::after{content:':'}
.gecmis-urunler{margin-top:8px;font-size:12px}.gecmis-urunler>strong{color:var(--metin-2);font-size:11px}.gecmis-urunler ul{list-style:none;padding:0;margin:3px 0}.gecmis-urunler li{display:flex;gap:12px;justify-content:space-between;padding:3px 0}.gecmis-urunler b{flex-shrink:0}
.gecmis-kart footer{font-size:11px;color:var(--metin-2);margin-top:8px}.gecmis-kart .etiketler{margin:6px 0;gap:4px}
.gecmis-sayfalama{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;font-size:12px}.gecmis-sayfalama .btn{min-height:44px}
.gecmis-hata{padding:12px;border-radius:10px;background:var(--zemin-dikkat);margin-bottom:8px}.gecmis-sekmeler button:focus-visible,.gecmis-kisa:focus-visible{outline:2px solid #72b4ff;outline-offset:-2px}

/* ==========================================================================
   Kullanılabilirlik düzeltmeleri — 07.10.2026
   ========================================================================== */

/* Bildirim balonu ekranın üstünde: altta sabit "Tahsilat Al / Servisi Kapat"
   çubuğunu, alt menüyü ve alt sayfaların Kaydet düğmesini örtmesin.
   Kendiliğinden kapanır (http.js); × dokununca kapanabildiğini gösterir. */
.sp-ag-hatasi {
    top: calc(62px + env(safe-area-inset-top));   /* üst çubuğun (Geri) altında */
    bottom: auto;
    max-width: 688px;
    margin-inline: auto;
    padding: 12px 42px 12px 14px;
    font-size: .9375rem;
    line-height: 1.45;
    cursor: pointer;
    animation: balonGir .18s ease-out;
}
.sp-ag-hatasi::after {
    content: "\00D7";
    position: absolute;
    top: 50%; right: 14px;
    transform: translateY(-50%);
    font-size: 1.375rem;
    line-height: 1;
    opacity: .85;
}
.sp-ag-hatasi--basari { background: #176044; }
.sp-ag-hatasi--bilgi   { background: #24364d; }
@keyframes balonGir { from { opacity: 0; transform: translateY(-8px) } to { opacity: 1; transform: none } }

/* Liste yerinde tazelenirken (geri dönüş, Yenile, devam yükleme) kaybolmaz,
   yalnız soluklaşır; Yenile düğmesinin ikonu döner. */
#listeAlani { transition: opacity .2s; }
.liste--tazeleniyor { opacity: .55; }
.btn--donuyor svg { animation: don .8s linear infinite; }

/* Rota ipucu kapatılabilir; kapatılınca rota kayıt sonucu balonla söylenir */
.rota-ipucu__kapat {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    margin: -8px -10px -8px 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: inherit;
    cursor: pointer;
}
.rota-ipucu__kapat:active { background: rgba(0, 102, 204, .12); }
.rota-ipucu-kapali .rota-ipucu { display: none; }

/* Üst bölümdeki dekor dairesi sabit: sürekli animasyon, boşta duran
   ekranda bile her kare yeniden çizim ve pil tüketimi demek. */
.uyg-ust__daire { animation: none; }

/* İşlem ekranı: eylem düğmeleri üstteki ve alttaki karta yapışıyordu */
#satirlarAlani { display: flex; flex-direction: column; gap: var(--bosluk); }
#satirlarAlani > .kart + .kart { margin-top: 0; }

/* Servis adımları: satırın tamamı dokunulabilir (yalnız küçük "Ekle" değil) */
.adim { position: relative; }
.adim__btn { position: static; border: 0; font: inherit; font-size: .8125rem; font-weight: 650; cursor: pointer; }
.adim__btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.adim--sirada .adim__btn { background: var(--renk-marka); color: #fff; }

/* Alt sayfa formlarında uyarı kutusu altındaki alan etiketine yapışıyordu */
.alt-sayfa__govde > .uyari { margin-bottom: var(--bosluk); }

/* Dokunma geri bildirimi — sayfa sunucudan gelene kadar "dokundum" hissi.
   (-webkit-tap-highlight-color her yerde kapalı; yerine yumuşak zemin.) */
.satir__bag:active, .kart--dugme:active { background: var(--yuzey-2); }
.alt-oge:active .alt-oge__ikon { background: var(--zemin-bilgi); }
.yan-oge:active, .adim--sirada:active, .adim--tamam:active { background: var(--yuzey-3); }

.sp-gidiyor-cubuk {
    position: fixed;
    top: env(safe-area-inset-top);
    left: 0; right: 0;
    z-index: 100001;
    height: 3px;
    overflow: hidden;
    pointer-events: none;
    display: none;
}
.sp-gidiyor .sp-gidiyor-cubuk { display: block; }
.sp-gidiyor-cubuk::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 40%;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 0 6px rgba(255, 255, 255, .7);
    animation: gidiyor 1s ease-in-out infinite;
}
@keyframes gidiyor { from { left: -40% } to { left: 100% } }
/* Hızlı geçişlerde yanıp sönmesin diye soluklaşma gecikmeli başlar */
.sp-gidiyor .uyg-govde { opacity: .6; transition: opacity .2s .15s; }
@media (prefers-reduced-motion: reduce) {
    .sp-gidiyor-cubuk::before { left: 0; width: 100%; animation: none; }
}

/* ==========================================================================
   İŞLEV RENKLERİ — düğme ve alanlar ne iş yaptığına göre renklenir
   --------------------------------------------------------------------------
   mavi     işlem / ilerleme   parça-hizmet ekle, kaydet, sorgula, adet
   yeşil    para / tamamlama   tahsilat, tutar, ödeme şekli, Tamamlandı
   turuncu  tarih / erteleme   tarih alanları, Ertele, ulaşılamadı SMS'i
   kırmızı  geri / iptal       iade, sil, İptal
   mor      belge / kanıt      imza, fotoğraf
   lacivert satış takibi · camgöbeği demo
   ========================================================================== */
:root {
    --islev-islem: #0066CC;  --islev-islem-zemin: #EBF5FF;  --islev-islem-kenar: #B3D5FF;  --islev-islem-dolgu: #0066CC;
    --islev-para:  #087854;  --islev-para-zemin:  #E8F6EF;  --islev-para-kenar:  #A7D9C1;  --islev-para-dolgu:  #087854;
    --islev-zaman: #C2410C;  --islev-zaman-zemin: #FFF4ED;  --islev-zaman-kenar: #FBC9A8;  --islev-zaman-dolgu: #C2410C;
    --islev-geri:  #C0261B;  --islev-geri-zemin:  #FCE8E6;  --islev-geri-kenar:  #F0B3AC;  --islev-geri-dolgu:  #C0261B;
    --islev-belge: #6D28D9;  --islev-belge-zemin: #F3EEFE;  --islev-belge-kenar: #D4C2FB;  --islev-belge-dolgu: #6D28D9;
    --islev-takip: #4338CA;  --islev-takip-zemin: #EEF0FF;  --islev-takip-kenar: #C7CBFA;  --islev-takip-dolgu: #4338CA;
    --islev-demo:  #0E7490;  --islev-demo-zemin:  #E6F6FA;  --islev-demo-kenar:  #A5DBE8;  --islev-demo-dolgu:  #0E7490;
    --tel-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230066CC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.1a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="acik"]) {
        --islev-islem: #4DA6FF;  --islev-islem-zemin: #0F2A47;  --islev-islem-kenar: #1E4B7A;
        --islev-para:  #34D399;  --islev-para-zemin:  #0B2E22;  --islev-para-kenar:  #1A5A43;
        --islev-zaman: #FB923C;  --islev-zaman-zemin: #3A2413;  --islev-zaman-kenar: #6B3B17;
        --islev-geri:  #F87171;  --islev-geri-zemin:  #3B1F1D;  --islev-geri-kenar:  #6E332C;
        --islev-belge: #A78BFA;  --islev-belge-zemin: #261A44;  --islev-belge-kenar: #47347A;
        --islev-takip: #818CF8;  --islev-takip-zemin: #1E2148;  --islev-takip-kenar: #3A3F86;
        --islev-demo:  #22D3EE;  --islev-demo-zemin:  #0B2B33;  --islev-demo-kenar:  #145566;
        --btn-dolgu: #1A6FD1;    --btn-dolgu-koyu: #155BB0;
        --tel-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234DA6FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.1a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
    }
}
:root[data-tema="koyu"] {
    --islev-islem: #4DA6FF;  --islev-islem-zemin: #0F2A47;  --islev-islem-kenar: #1E4B7A;
    --islev-para:  #34D399;  --islev-para-zemin:  #0B2E22;  --islev-para-kenar:  #1A5A43;
    --islev-zaman: #FB923C;  --islev-zaman-zemin: #3A2413;  --islev-zaman-kenar: #6B3B17;
    --islev-geri:  #F87171;  --islev-geri-zemin:  #3B1F1D;  --islev-geri-kenar:  #6E332C;
    --islev-belge: #A78BFA;  --islev-belge-zemin: #261A44;  --islev-belge-kenar: #47347A;
    --islev-takip: #818CF8;  --islev-takip-zemin: #1E2148;  --islev-takip-kenar: #3A3F86;
    --islev-demo:  #22D3EE;  --islev-demo-zemin:  #0B2B33;  --islev-demo-kenar:  #145566;
    --btn-dolgu: #1A6FD1;    --btn-dolgu-koyu: #155BB0;
}

/* --- Dolu düğmeler (ana eylem) --- */
.btn.btn--para  { background: var(--islev-para-dolgu);  box-shadow: 0 6px 18px rgba(8, 120, 84, .25); }
.btn.btn--zaman { background: var(--islev-zaman-dolgu); box-shadow: 0 6px 18px rgba(194, 65, 12, .25); }
.btn.btn--belge { background: var(--islev-belge-dolgu); box-shadow: 0 6px 18px rgba(109, 40, 217, .25); }
.btn.btn--takip { background: var(--islev-takip-dolgu); box-shadow: 0 6px 18px rgba(67, 56, 202, .25); }
.btn.btn--demo  { background: var(--islev-demo-dolgu);  box-shadow: 0 6px 18px rgba(14, 116, 144, .25); }
.btn.btn--tehlike { background: var(--islev-geri-dolgu); }
.btn.btn--para:hover, .btn.btn--zaman:hover, .btn.btn--belge:hover,
.btn.btn--takip:hover, .btn.btn--demo:hover, .btn.btn--tehlike:hover { filter: brightness(.92); }

/* --- Açık tonlu düğmeler (ikincil eylem, aynı işlev rengi) --- */
.btn.btn--ton-islem { background: var(--islev-islem-zemin); color: var(--islev-islem); border-color: var(--islev-islem-kenar); box-shadow: none; }
.btn.btn--ton-para  { background: var(--islev-para-zemin);  color: var(--islev-para);  border-color: var(--islev-para-kenar);  box-shadow: none; }
.btn.btn--ton-zaman { background: var(--islev-zaman-zemin); color: var(--islev-zaman); border-color: var(--islev-zaman-kenar); box-shadow: none; }
.btn.btn--ton-geri  { background: var(--islev-geri-zemin);  color: var(--islev-geri);  border-color: var(--islev-geri-kenar);  box-shadow: none; }
.btn.btn--ton-belge { background: var(--islev-belge-zemin); color: var(--islev-belge); border-color: var(--islev-belge-kenar); box-shadow: none; }
.btn.btn--ton-islem:hover, .btn.btn--ton-para:hover, .btn.btn--ton-zaman:hover,
.btn.btn--ton-geri:hover, .btn.btn--ton-belge:hover { filter: brightness(.96); }
/* İade düğmesi de kırmızı ton ailesine bağlanır (koyu temada da okunur) */
.btn.btn--iade, .btn.btn--iade:hover { background: var(--islev-geri-zemin); color: var(--islev-geri); border-color: var(--islev-geri-kenar); }

/* --- Alanlar --- */
/* Para: tutar, fiyat — yeşil kenar ve ₺ */
.para-girdi .girdi:not([readonly]) { border-color: var(--islev-para-kenar); }
.para-girdi .girdi:not([readonly]):focus { border-color: var(--islev-para); box-shadow: 0 0 0 3px var(--islev-para-zemin); }
.para-girdi__birim { color: var(--islev-para); font-weight: 700; }
.alan--para select.girdi { border-color: var(--islev-para-kenar); }
.alan--para select.girdi:focus { border-color: var(--islev-para); box-shadow: 0 0 0 3px var(--islev-para-zemin); }
.alan--para .alan__etiket { color: var(--islev-para); }
/* Telefon — mavi telefon simgesi */
input[type="tel"].girdi {
    padding-left: 42px;
    background-image: var(--tel-ikon);
    background-repeat: no-repeat;
    background-position: 13px 50%;
    background-size: 18px 18px;
}
/* Tarih — turuncu */
input[type="date"].girdi { border-color: var(--islev-zaman-kenar); }
input[type="date"].girdi:focus { border-color: var(--islev-zaman); box-shadow: 0 0 0 3px var(--islev-zaman-zemin); }
.alan--zaman .alan__etiket { color: var(--islev-zaman); }
/* İmza — mor kesik çizgili kâğıt. Zemin her temada açık: koyu temada
   koyu mürekkep koyu zemin üstünde görünmüyordu. */
.imza-kutu { border-color: var(--islev-belge-kenar); background: #FBFAFF; }
.alan--belge .alan__etiket { color: var(--islev-belge); }

/* --- Kart başlıkları: solda işlev şeridi --- */
.kart__baslik--islem { box-shadow: inset 4px 0 0 var(--islev-islem); }
.kart__baslik--para  { box-shadow: inset 4px 0 0 var(--islev-para); }
.kart__baslik--zaman { box-shadow: inset 4px 0 0 var(--islev-zaman); }
.kart__baslik--belge { box-shadow: inset 4px 0 0 var(--islev-belge); }
.kart__baslik--iade  { box-shadow: inset 4px 0 0 var(--islev-geri); }

/* --- Satır içi simge düğmeleri --- */
.parca-sil, .tahsilat-sil { color: var(--islev-geri); }
/* Düzenle kalemi .uyg-btn'den beyaz renk alıyor, beyaz kartta görünmüyordu */
[data-tahsilat-duzenle] { color: var(--islev-islem); }
.parca-sil:active, .tahsilat-sil:active { background: var(--islev-geri-zemin); }
[data-tahsilat-duzenle]:active { background: var(--islev-islem-zemin); }
.adet-btn { background: var(--islev-islem-zemin); color: var(--islev-islem); font-weight: 700; }
.adet-btn:active { background: var(--islev-islem-kenar); }
/* Ürün listesinde iade modu: ekle düğmesi kırmızı */
.urun-satir[data-iade="1"] .urun-ekle:not(:disabled) { background: var(--islev-geri-dolgu); }
.tahsilat-satir__tutar { color: var(--islev-para); }
.ozet-satir--borc strong { color: var(--islev-geri); }
.olumlu { color: var(--islev-para); }

/* --- Servis adımları: her adım kendi işlev renginde --- */
.adim--islem { --adim-renk: var(--islev-islem); --adim-zemin: var(--islev-islem-zemin); --adim-dolgu: var(--islev-islem-dolgu); }
.adim--para  { --adim-renk: var(--islev-para);  --adim-zemin: var(--islev-para-zemin);  --adim-dolgu: var(--islev-para-dolgu); }
.adim--belge { --adim-renk: var(--islev-belge); --adim-zemin: var(--islev-belge-zemin); --adim-dolgu: var(--islev-belge-dolgu); }
.adim--sirada { background: var(--adim-zemin, var(--renk-marka-acik)); }
.adim--sirada .adim__no { background: var(--adim-dolgu, var(--renk-marka)); color: #fff; }
.adim__btn { background: var(--adim-zemin, var(--zemin-bilgi)); color: var(--adim-renk, var(--renk-marka)); }
.adim--sirada .adim__btn { background: var(--adim-dolgu, var(--renk-marka)); color: #fff; }

/* --- Puan: 1 kırmızı → 5 yeşil --- */
.puan-btn--secili[data-puan="1"] { background: #C0261B; border-color: #C0261B; }
.puan-btn--secili[data-puan="2"] { background: #C2410C; border-color: #C2410C; }
.puan-btn--secili[data-puan="3"] { background: #B45309; border-color: #B45309; }
.puan-btn--secili[data-puan="4"] { background: #4D7C0F; border-color: #4D7C0F; }
.puan-btn--secili[data-puan="5"] { background: #087854; border-color: #087854; }

/* --- Kapatma: durum kartları (açılır liste yerine tek dokunuş) --- */
.durum-secim { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.durum-secenek {
    --d-renk: var(--metin-2); --d-zemin: var(--yuzey-2); --d-kenar: var(--kenar-belirgin);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    min-height: 58px;
    padding: 9px 30px 9px 12px;
    border: 1.5px solid var(--d-kenar);
    border-radius: 12px;
    background: var(--yuzey);
    color: var(--metin);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.durum-secenek:first-child { grid-column: 1 / -1; }
.durum-secenek__ad { display: flex; align-items: center; gap: 7px; font-size: .875rem; font-weight: 700; line-height: 1.25; }
.durum-secenek__ad::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--d-renk); }
.durum-secenek__not { padding-left: 17px; font-size: .75rem; line-height: 1.35; color: var(--metin-2); }
.durum-secenek--tamam { --d-renk: var(--islev-para);  --d-zemin: var(--islev-para-zemin);  --d-kenar: var(--islev-para-kenar); }
.durum-secenek--zaman { --d-renk: var(--islev-zaman); --d-zemin: var(--islev-zaman-zemin); --d-kenar: var(--islev-zaman-kenar); }
.durum-secenek--iptal { --d-renk: var(--islev-geri);  --d-zemin: var(--islev-geri-zemin);  --d-kenar: var(--islev-geri-kenar); }
.durum-secenek--takip { --d-renk: var(--islev-takip); --d-zemin: var(--islev-takip-zemin); --d-kenar: var(--islev-takip-kenar); }
.durum-secenek--demo  { --d-renk: var(--islev-demo);  --d-zemin: var(--islev-demo-zemin);  --d-kenar: var(--islev-demo-kenar); }
.durum-secenek[aria-checked="true"] { background: var(--d-zemin); border-color: var(--d-renk); box-shadow: inset 0 0 0 1px var(--d-renk); }
.durum-secenek[aria-checked="true"]::after {
    content: "\2713";
    position: absolute;
    top: 50%; right: 11px;
    transform: translateY(-50%);
    color: var(--d-renk);
    font-weight: 800;
}
.durum-secenek:disabled { opacity: .55; border-style: dashed; cursor: not-allowed; }
.durum-secenek:active:not(:disabled) { transform: scale(.98); }

/* Tamamlarken müşteriye gösterilecek özet (imzadan hemen önce) */
.kapat-ozet {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--islev-para-zemin);
    font-size: .8125rem;
    color: var(--metin-2);
}
.kapat-ozet strong { font-family: var(--yazi-baslik); font-size: 1rem; color: var(--islev-para); }

/* --- Servis detayı: sabit "sıradaki adım" çubuğu (alt menünün üstünde) --- */
.detay-ekrani { padding-bottom: 78px; }
.islem-devam--ikili { display: flex; gap: 10px; }
.islem-devam--ikili .btn { min-height: 50px; }
.islem-devam--ikili .btn:not(:last-child) { flex: 0 0 auto; padding-inline: 14px; }
.islem-devam--ikili .btn:last-child { flex: 1 1 auto; }