/* =========================================================
   Araç Kiralama — Tasarım Sistemi
   Mobil öncelikli. Temel stiller mobil, min-width ile büyür.
   ========================================================= */

:root {
    --bg: #F4F5F8;
    --surface: #FFFFFF;
    --surface-2: #F1F3F6;
    --border: #E4E7EC;
    --border-strong: #CDD3DE;

    --text: #101828;
    --text-soft: #475467;
    --text-muted: #8A93A6;

    --brand: #1F3D6D;
    --brand-hover: #17325A;
    --brand-soft: #E9EEF6;

    --altin: #C89B4A;
    --altin-acik: #F0D48C;
    --altin-koyu: #A9771C;

    --ok: #067647;
    --ok-soft: #E6F3EC;
    --warn: #B54708;
    --warn-soft: #FAEEE1;
    --danger: #B42318;
    --danger-soft: #FBEAE8;
    --violet: #6941C6;
    --violet-soft: #F0EBFA;

    --nav: #0C1524;
    --nav-2: #1B2536;
    --nav-text: #98A2B8;

    --r-sm: 8px;
    --r: 10px;
    --r-lg: 12px;

    --sh-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --sh: 0 2px 6px -1px rgba(16, 24, 40, .07), 0 8px 18px -6px rgba(16, 24, 40, .08);
    --sh-lg: 0 18px 40px -12px rgba(16, 24, 40, .24);

    --tab-h: 64px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* display:flex/grid tanımları [hidden] özniteliğini ezmesin */
[hidden] { display: none !important; }

/* Zemin html'de durur; böylece body'nin 3B katmanları
   arka planın ÜSTÜNDE, içeriğin ALTINDA kalır.
   Düz renk yerine yumuşak kurumsal degrade — sahneye hacim katar. */
/* Zemin — üstte serin açık gri, ufka doğru ısınan kum tonu.
   Renkler düşük doygunlukta: uzun bakışta göz yormaz. */
html {
    -webkit-text-size-adjust: 100%;
    background:
        linear-gradient(180deg,
            #FAFBFD 0%,
            #F5F7FB 34%,
            #F2F3F7 52%,
            #F3F1EC 60%,
            #F2EDE3 66%,
            #EFEAE1 78%,
            #EDE9E2 100%)
        fixed;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    background: transparent;
    color: var(--text);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-optical-sizing: auto;
    /* Eksik kalınlığı tarayıcı sahte üretmesin — değişken font gerçek kalınlığı verir */
    font-synthesis-weight: none;
    letter-spacing: -.006em;
    -webkit-tap-highlight-color: transparent;
}

/* Sayı içeren alanlar hizalı görünsün */
.stat-value, .kutu-etiket, .kutu-plaka, .count-pill, .gun-gun {
    font-variant-numeric: tabular-nums;
}
::selection { background: var(--brand-soft); color: var(--brand-hover); }

/* ---------------------------------------------------------
   Arka plan — kurumsal 3B derinlik sahnesi
   Katman 1 (html::before): perspektifle uzaklaşan zemin ızgarası
   Katman 2 (body::before): yumuşak ışık havuzları + hafif dokular
   Katman 5 (.imza öğesi) : üç boyutlu yaldızlı imza (firma adının ilk kelimesi)
   Hepsi içeriğin ALTINDA kalır, okunabilirliği bozmaz.
   --------------------------------------------------------- */
/* Katman 1 — ufkun altında kaçış noktasına daralan zemin ızgarası */
html::before {
    content: ''; position: fixed; inset: 0; z-index: -3;
    pointer-events: none; overflow: hidden;
    background:
        repeating-linear-gradient(0deg,
            rgba(150, 132, 100, .17) 0 1px, transparent 1px 62px),
        repeating-linear-gradient(90deg,
            rgba(150, 132, 100, .14) 0 1px, transparent 1px 62px);
    transform: perspective(640px) rotateX(69deg) scale(2.9);
    transform-origin: 50% 100%;
    /* Yalnızca ufkun altı; öne doğru belirginleşir */
    mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.72) 18%, rgba(0,0,0,.3) 29%, transparent 36%);
    -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.72) 18%, rgba(0,0,0,.3) 29%, transparent 36%);
}

/* Katman 2 — atmosfer: ufuk ışığı ve yumuşak köşe hacimleri */
body::before {
    content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background:
        /* Ufuk çizgisinde sıcak ışık — üç kademe, yumuşak dağılım */
        radial-gradient(440px 84px at 50% 63.6%, rgba(255, 248, 228, .80), transparent 76%),
        radial-gradient(980px 200px at 50% 64.6%, rgba(233, 205, 148, .28), transparent 78%),
        radial-gradient(1600px 400px at 50% 66%, rgba(205, 175, 120, .12), transparent 80%),
        /* Ufkun hemen altında hafif pus — mesafeyi açar */
        linear-gradient(180deg, transparent 64%, rgba(255, 252, 245, .40) 68%, transparent 82%),
        /* Köşelerde çok düşük doygunlukta hacim */
        radial-gradient(820px 560px at 98% -8%, rgba(214, 178, 110, .16), transparent 66%),
        radial-gradient(720px 540px at -6% -4%, rgba(120, 145, 185, .09), transparent 68%),
        radial-gradient(700px 480px at 4% 106%, rgba(120, 145, 185, .07), transparent 68%);
}

/* Katman 3 — ufuk hattı: yumuşak altın çizgi + halesi */
body > .app::before {
    content: ''; position: fixed; z-index: -2; pointer-events: none;
    left: 0; right: 0; top: 63.8%; height: 1.5px;
    background: linear-gradient(90deg,
        transparent, rgba(200, 165, 100, .18) 14%,
        rgba(255, 250, 235, .85) 50%,
        rgba(200, 165, 100, .18) 86%, transparent);
    box-shadow: 0 0 26px 6px rgba(233, 205, 148, .26);
}
/* Katman 4 — zeminin ön kenarında çok hafif oturma gölgesi */
body > .app::after {
    content: ''; position: fixed; z-index: -2; pointer-events: none;
    left: 0; right: 0; bottom: 0; height: 26vh;
    background: linear-gradient(180deg, transparent, rgba(150, 132, 100, .12));
}

@media (max-width: 899px) {
    /* Mobilde ufuk biraz yukarı alınır — alt menü sahneyi ezmesin */
    body > .app::before { top: 60%; }
    html::before {
        transform: perspective(520px) rotateX(70deg) scale(2.5);
        mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.7) 20%, rgba(0,0,0,.28) 32%, transparent 40%);
        -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.7) 20%, rgba(0,0,0,.28) 32%, transparent 40%);
    }
    body::before {
        background:
            radial-gradient(280px 66px at 50% 59.6%, rgba(255, 248, 228, .80), transparent 76%),
            radial-gradient(620px 160px at 50% 60.6%, rgba(233, 205, 148, .26), transparent 78%),
            radial-gradient(1000px 320px at 50% 62%, rgba(205, 175, 120, .11), transparent 80%),
            linear-gradient(180deg, transparent 60%, rgba(255, 252, 245, .38) 64%, transparent 78%),
            radial-gradient(520px 400px at 100% -6%, rgba(214, 178, 110, .15), transparent 68%),
            radial-gradient(460px 380px at -6% -2%, rgba(120, 145, 185, .08), transparent 70%);
    }
}

/* Katman 5 — ÜÇ BOYUTLU yaldızlı imza (.imza öğesi: header, giriş, doğrulama).
   Öğenin kendi yazısı bronz GÖVDEDİR: alt alta binen ince gölgeler harfe
   derinlik verir, en alttaki yumuşak gölgeler onu zemine oturtur.
   ::after aynı yazıyı tam üstüne ALTIN ön yüz olarak basar (yukarıdan
   aşağı metal ışığı + arada bir geçen parıltı). Bütün öbek yarı saydam:
   içeriğin altında kalır, okumayı bozmaz. Ölçüler em — boyla birlikte büyür. */
.imza {
    position: fixed; z-index: -1; right: 26px; bottom: 52px;
    font-family: Georgia, 'Times New Roman', serif; font-weight: 700;
    /* --imza-harf: kelimenin harf sayısı. Uzun kelimede yazı küçülür, ekrandan taşmaz */
    font-size: min(clamp(52px, 8.4vw, 132px), calc(72vw / var(--imza-harf, 9)));
    letter-spacing: .05em; white-space: nowrap; line-height: 1;
    pointer-events: none; user-select: none;
    opacity: .55;
    color: #CFA24F;
    text-shadow:
        0 .010em 0 #C79A47,
        0 .020em 0 #BE913F,
        0 .030em 0 #B58838,
        0 .040em 0 #AB7F31,
        0 .050em 0 #A1762B,
        0 .060em 0 #976D25,
        0 .070em 0 #8C6420,
        0 .080em 0 #825B1B,
        0 .095em .02em rgba(60, 42, 12, .35),
        0 .16em .10em rgba(60, 42, 12, .20),
        0 .28em .24em rgba(60, 42, 12, .14);
}
.imza::after {
    content: attr(data-yazi);
    position: absolute; left: 0; top: 0;
    color: transparent; text-shadow: none;
    background:
        linear-gradient(105deg, transparent 30%, rgba(255, 252, 238, .9) 44%, transparent 58%) 100% 0 / 260% 100% no-repeat,
        linear-gradient(180deg, #FFF4D2 0%, #F2D58F 32%, #D9AA48 58%, #EBC979 80%, #C08E35 100%);
    -webkit-background-clip: text; background-clip: text;
    transform: translateZ(0);   /* parıltı yalnız bu katmanı yeniden çizsin */
}
/* Ön yüzde yavaşça gidip gelen parıltı */
@media (prefers-reduced-motion: no-preference) {
    .imza::after { animation: yaldizIsik 9s ease-in-out infinite alternate; }
    @keyframes yaldizIsik {
        from { background-position: 100% 0, 0 0; }
        to   { background-position: 0% 0, 0 0; }
    }
}
@media (max-width: 899px) {
    /* Mobilde: yüzen bildirim düğmesinin ÜSTÜNDE dursun,
       ekrana tam sığsın ve alt menüyle çakışmasın. */
    .imza {
        font-size: min(clamp(36px, 11.5vw, 70px), calc(86vw / var(--imza-harf, 9)));
        right: 16px; bottom: calc(var(--tab-h) + 104px);
        letter-spacing: .04em;
    }
    /* Mobilde ızgara daha yakın çekilir — çizgiler seyrek ve net kalsın */
    html::before { transform: perspective(560px) rotateX(66deg) scale(2.1); }
}
/* Hareket azaltma tercihinde de sorunsuz — animasyon yok, yalnız statik yaldız */

/* Klavye ile gezinenler için görünür odak halkası */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { display: block; }

.ico { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ico-sm { width: 17px; height: 17px; }
.ico-lg { width: 26px; height: 26px; }

/* ---------------------------------------------------------
   Uygulama iskeleti
   --------------------------------------------------------- */
.app { min-height: 100vh; min-height: 100dvh; }

.sidebar { display: none; }

/* Aşağı kaydırınca gizlenir, yukarı kaydırınca geri gelir */
.topbar.gizli { transform: translateY(-100%); }

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    transition: transform .25s ease;
    will-change: transform;
    /* Derinlikli lacivert cam — sol üstte hafif altın ışık */
    background:
        radial-gradient(300px 120px at 14% -30%, rgba(214, 163, 58, .16), transparent 70%),
        linear-gradient(180deg, rgba(19, 33, 56, .96), rgba(10, 20, 36, .94));
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    box-shadow: 0 8px 26px -14px rgba(0, 0, 0, .7),
                inset 0 1px 0 rgba(255, 255, 255, .07);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px;
    height: 58px;
    padding-top: env(safe-area-inset-top);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}
/* Üst çubuğun altında ince altın vurgu çizgisi — marka ile uyumlu */
/* Alt kenarda altın hat + altına düşen yumuşak ışık */
.topbar::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: linear-gradient(90deg, transparent, #C89B4A 18%, #FFF3D0 50%, #C89B4A 82%, transparent);
    box-shadow: 0 4px 14px rgba(214, 163, 58, .32);
}

.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; letter-spacing: -.02em; }
/* Marka işareti — lacivert zemin, altın çerçeve ve altın araba */
.brand-mark {
    width: 32px; height: 32px; border-radius: 9px;
    background: linear-gradient(145deg, #22314F, #101B30);
    border: 1px solid rgba(226, 195, 120, .55);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
    display: grid; place-items: center; color: #E5C878; flex: none;
}
.brand-mark .ico { width: 19px; height: 19px; }

/* Üst çubuktaki marka yazısı — tıklanınca panele gider */
.brand-link { text-decoration: none; color: inherit; border-radius: 12px; padding: 4px 8px 4px 4px; margin-left: -4px; transition: background .15s; }
.brand-link:hover  { background: rgba(255, 255, 255, .10); }
.brand-link:active { background: rgba(255, 255, 255, .16); }

/* Şatafatlı marka yazısı: akan altın ışıltısı.
   Ad yan yana sığmazsa ("Dünya" + "RENT A CAR") ikinci kısım bütün hâlinde
   alt satıra iner — kelime ortasından bölünmez, amblem gibi alt alta durur. */
.brand-ad { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 5px; line-height: 1; min-width: 0; }
.brand-ad b, .brand-ad i { white-space: nowrap; }
.brand-ad b {
    font-size: 21px; font-weight: 800; letter-spacing: .1em; color: #E5C878;
    filter: drop-shadow(0 1px 5px rgba(229, 200, 120, .35));
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .brand-ad b {
        background: linear-gradient(110deg,
            #C89B4A 0%, #F3DDA0 20%, #FFF6D8 32%, #E0B75F 46%,
            #A87F2E 60%, #F0D48C 78%, #C89B4A 100%);
        background-size: 250% auto;
        -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        animation: markaParilti 5.5s linear infinite;
    }
}
@keyframes markaParilti {
    from { background-position: 0% center; }
    to   { background-position: 250% center; }
}
.brand-ad i {
    font-style: normal; font-size: 12.5px; font-weight: 600;
    letter-spacing: .26em; text-transform: uppercase; color: #C3CCDD;
}
/* Hareket istemeyen kullanıcıda ışıltı sabit kalır */
@media (prefers-reduced-motion: reduce) {
    .brand-ad b { animation: none; }
}

/* Mobil sağ üst "Diğerleri" düğmesi */
/* Menü düğmesi — üç çizgi (hamburger), altın çerçeveli */
.diger-btn {
    position: relative; flex: none; cursor: pointer;
    display: inline-grid; place-items: center;
    width: 38px; height: 38px; padding: 0; border-radius: 11px;
    background: rgba(255, 255, 255, .10); border: 1px solid rgba(226, 195, 120, .45);
    color: var(--altin-acik);
    transition: background .15s, border-color .15s;
}
.diger-btn .ico { width: 21px; height: 21px; stroke-width: 2; }
.diger-btn:hover, .diger-btn:active { background: rgba(255, 255, 255, .2); border-color: rgba(226, 195, 120, .75); }

/* Üst çubuktaki bildirim zili (mobil) */
.zil-btn {
    position: relative; flex: none; cursor: pointer;
    width: 34px; height: 34px; border-radius: 10px;
    background: rgba(255, 255, 255, .10); border: 1px solid rgba(226, 195, 120, .4);
    color: #fff; display: grid; place-items: center;
    transition: background .15s;
}
.zil-btn:hover, .zil-btn:active { background: rgba(255, 255, 255, .2); }
.zil-btn.acil { color: #FFB4A8; border-color: rgba(255, 140, 120, .5); animation: zilSalla 2.6s ease-in-out infinite; }

.avatar-btn { position: relative; border: none; cursor: pointer; }
.avatar-btn::after {
    content: ''; position: absolute; right: -3px; bottom: -3px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--nav-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23DCE1EA'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E") center/9px no-repeat;
    border: 2px solid var(--nav);
}
.avatar-rozet {
    position: absolute; top: -4px; right: -5px;
    background: var(--danger); color: #fff;
    font-size: 9.5px; font-weight: 700; min-width: 16px; height: 16px;
    border-radius: 99px; display: grid; place-items: center; padding: 0 4px;
    border: 2px solid var(--nav);
}

.avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--nav-2); color: #DCE1EA;
    display: grid; place-items: center;
    font-size: 12px; font-weight: 700; letter-spacing: .02em;
    flex: none; text-transform: uppercase;
}

.content {
    padding: 18px 11px calc(var(--tab-h) + 26px + env(safe-area-inset-bottom));
}
@media (min-width: 480px) { .content { padding-left: 16px; padding-right: 16px; } }

/* ---------------------------------------------------------
   Sayfa başlığı
   --------------------------------------------------------- */
.page-head { margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.page-head-sol { display: flex; align-items: center; gap: 11px; min-width: 0; }
/* Sayfa başlığı — ölçülü, kurumsal; bağırmadan yönlendirir */
.page-head h1 {
    font-size: 19px; font-weight: 700; letter-spacing: -.028em; line-height: 1.22;
    color: #121C2E;
}
.page-head p { font-size: 12.5px; font-weight: 500; color: var(--text-muted); margin-top: 3px; }
@media (min-width: 560px) { .page-head h1 { font-size: 21px; } }
@media (min-width: 900px) { .page-head h1 { font-size: 22px; } }

/* Panel sayfasında mobilde başlık gizlenir — üst çubukta zaten marka var */
@media (max-width: 899px) { .page-head.gizli-mobil { display: none; } }
.page-head-islem { flex: none; display: flex; align-items: center; gap: 8px; }

/* Buton + altında kare sayaç */
.islem-yigin { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.sayi-kare {
    min-width: 34px; height: 34px; padding: 0 8px;
    display: grid; place-items: center;
    background: var(--surface); border: 1.5px solid var(--altin);
    border-radius: 9px;
    font-size: 15px; font-weight: 750; color: var(--altin-koyu);
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 3px rgba(200, 155, 74, .12);
}

.geri-btn {
    flex: none; display: inline-flex; align-items: center; gap: 5px;
    height: 36px; padding: 0 12px 0 9px;
    background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: 10px; color: var(--text-soft);
    font-size: 13.5px; font-weight: 600;
    transition: background .15s, border-color .15s;
}
.geri-btn:hover { background: var(--surface-2); border-color: var(--text-muted); }
.geri-btn span { display: none; }
@media (min-width: 560px) { .geri-btn span { display: inline; } }

/* ---------------------------------------------------------
   Alt sekme çubuğu (mobil)
   --------------------------------------------------------- */
/* Alt sekme çubuğu — üst çubukla aynı lacivert + altın kimlik */
.tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    /* Header ile aynı cam dili — ışık aşağıdan yukarı doğru açılır */
    background:
        radial-gradient(340px 130px at 50% 128%, rgba(214, 163, 58, .16), transparent 72%),
        linear-gradient(180deg, rgba(10, 20, 36, .94), rgba(16, 29, 50, .97));
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border-top: none;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -10px 30px -14px rgba(0, 0, 0, .7),
                inset 0 1px 0 rgba(255, 255, 255, .06);
}
/* Üst kenarda altın hat + yukarı vuran ışık */
.tabbar::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, #C89B4A 18%, #FFF3D0 50%, #C89B4A 82%, transparent);
    box-shadow: 0 -4px 14px rgba(214, 163, 58, .3);
}
.tab {
    position: relative;
    height: var(--tab-h);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    color: #8494AE;
    font-size: 10px; font-weight: 600; letter-spacing: -.01em;
    background: none; border: none; cursor: pointer;
    transition: color .15s;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px;
}
.tab .ico { width: 22px; height: 22px; transition: transform .18s; }
.tab.on { color: var(--altin-acik); }
.tab.on .ico { stroke-width: 2.1; transform: translateY(-1px); }
/* Aktif sekmenin üstünde ince altın gösterge */
.tab.on::before {
    content: ''; position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
    width: 26px; height: 3px; border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, var(--altin), var(--altin-acik));
}
.tab:active { color: #C3CCDD; }

/* Alt sayfa (Diğer) */
.sheet-bg {
    position: fixed; inset: 0; z-index: 50;
    background: rgba(16, 24, 40, .5);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    display: none; align-items: flex-end;
}
.sheet-bg.on { display: flex; }
.sheet {
    background: var(--surface); width: 100%;
    border-radius: 16px 16px 0 0;
    padding: 8px 14px calc(18px + env(safe-area-inset-bottom));
    animation: sheetUp .26s cubic-bezier(.32, .72, 0, 1);
    box-shadow: var(--sh-lg);
    max-height: 86vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet-grip { width: 38px; height: 4px; border-radius: 99px; background: var(--border-strong); margin: 6px auto 12px; }
.sheet-link {
    display: flex; align-items: center; gap: 13px;
    padding: 12px; border-radius: var(--r);
    font-weight: 600; font-size: 14.5px; color: var(--text-soft);
}
.sheet-link .ico { color: var(--text-muted); }
.sheet-link.on { background: var(--brand-soft); color: var(--brand); }
.sheet-link.on .ico { color: var(--brand); }
.sheet-link.danger { color: var(--danger); }
.sheet-link.danger .ico { color: var(--danger); }
.sheet-sep { height: 1px; background: var(--border); margin: 10px 2px 6px; }

/* Kategori grupları — tek kurumsal vurgu: altın */
/* Menü kategori vurgusu — tek kurumsal renk: altın */
.g-altin, .g-mavi, .g-yesil, .g-amber, .g-mor, .g-kirmizi { --grup: var(--altin); }

/* Kategori başlığı + kutucuk ızgarası */
/* Kategori başlığı — altın işaret + sağa uzanan ayraç çizgisi */
.sheet-kat {
    display: flex; align-items: center; gap: 9px;
    font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
    color: var(--text-muted); padding: 16px 2px 8px;
}
.sheet-kat::before {
    content: ''; width: 3px; height: 13px; border-radius: 2px; flex: none;
    background: linear-gradient(180deg, var(--altin-acik), var(--altin));
}
.sheet-kat::after {
    content: ''; flex: 1 1 auto; height: 1px;
    background: linear-gradient(90deg, rgba(200, 155, 74, .35), transparent);
}
/* İlk kategori üste yapışmasın */
.sheet-link + .sheet-kat { padding-top: 18px; }
.sheet-grid .sheet-item .ico { color: var(--grup, var(--text-soft)); }
.sheet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.sheet-item {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    gap: 7px; padding: 12px 5px 10px; border-radius: var(--r);
    border: 1px solid var(--border); background: var(--surface);
    font-size: 11px; font-weight: 600; line-height: 1.25;
    color: var(--text-soft); text-align: center;
    transition: background .15s, border-color .15s;
}
.sheet-item .ico { width: 21px; height: 21px; color: var(--text-soft); }
.sheet-item:active { background: var(--surface-2); }
.sheet-item.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.sheet-item.on .ico { color: var(--brand); }

/* ---------------------------------------------------------
   Kartlar
   --------------------------------------------------------- */
/* Kartlar sahnenin üstünde yüzer — yumuşak, sıcak gölge */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: 0 1px 2px rgba(120, 108, 84, .05),
                0 14px 30px -16px rgba(90, 78, 54, .20);
    overflow: hidden;
}
.card + .card { margin-top: 16px; }
.card-head {
    padding: 15px 18px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap;
}
/* Başlıksız kart üstü — yalnız sayaç, sağa yaslı */
.card-head-sag { justify-content: flex-end; padding-top: 12px; padding-bottom: 12px; }

/* Öne çıkan bölüm kutusu — takvimdeki "bugün" bloğuyla aynı altın çerçeve */
.card.vurgulu {
    border: 2px solid var(--altin);
    box-shadow: 0 0 0 4px rgba(200, 155, 74, .16),
                0 8px 22px -10px rgba(169, 119, 28, .45);
}
.card.vurgulu > .card-head {
    background: linear-gradient(100deg, rgba(233, 198, 109, .22), rgba(200, 155, 74, .08));
    border-bottom-color: rgba(200, 155, 74, .35);
}

/* Bölüm başlığı — kartın kimliği, net okunur */
.card-head h2 {
    font-size: 17px; font-weight: 700; letter-spacing: -.025em; line-height: 1.3;
    color: #101828;
}
@media (min-width: 900px) { .card-head h2 { font-size: 18px; } }
.card-body { padding: 18px; }
.count-pill {
    font-size: 12px; font-weight: 700; color: var(--text-soft);
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 6px; padding: 2px 8px;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------
   İstatistik kutuları
   --------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }

/* Mobilde yatay ve kompakt: ikon solda, sayı + etiket sağda */
/* İstatistik kartı — ikon solda, sayı ve etiket sağda (yatay) */
.stat {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r); padding: 12px;
    box-shadow: 0 1px 2px rgba(120, 108, 84, .05),
                0 8px 18px -14px rgba(90, 78, 54, .26);
    display: flex; align-items: center; gap: 11px; min-width: 0;
}
.stat-icon { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.stat-icon .ico { width: 20px; height: 20px; }
.stat-value { font-size: 22px; font-weight: 750; letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-label { font-size: 11.5px; color: var(--text-muted); font-weight: 500; margin-top: 1px; line-height: 1.25; }
/* Etiket tek biçim — kısa/uzun ayrımı yok */
.etiket-kisa { display: none; }

a.stat { color: inherit; transition: box-shadow .18s, transform .18s, border-color .18s; }

/* Sekme görevi gören kutucuklar — basılınca alttaki liste süzülür */
.stats-sekme { grid-template-columns: repeat(3, 1fr); }
.sekme-stat {
    cursor: pointer; font: inherit; color: inherit; text-align: left;
    transition: box-shadow .18s, transform .18s, border-color .18s;
}
.sekme-stat:hover { box-shadow: var(--sh); transform: translateY(-2px); }
.sekme-stat.on {
    border: 2px solid var(--altin);
    box-shadow: 0 0 0 3px rgba(200, 155, 74, .16);
    padding: 11px;   /* kalın kenarlık boyutu oynatmasın */
}
@media (max-width: 500px) {
    /* Üçü yan yana dar ekranda: ikon üstte, yazı altta */
    .stats-sekme { gap: 7px; }
    .stats-sekme .stat { flex-direction: column; align-items: flex-start; gap: 7px; padding: 10px; }
    .stats-sekme .stat.on { padding: 9px; }
    .stats-sekme .stat-icon { width: 30px; height: 30px; border-radius: 8px; }
    .stats-sekme .stat-icon .ico { width: 16px; height: 16px; }
    .stats-sekme .stat-value { font-size: 19px; }
    .stats-sekme .stat-label { font-size: 10px; }
}
.stat-yazi { min-width: 0; display: flex; flex-direction: column; }
a.stat:hover { box-shadow: var(--sh); transform: translateY(-2px); border-color: var(--border-strong); }
a.stat:active { transform: translateY(0); }
.stat { position: relative; }
.stat-sarmal { position: relative; display: flex; }
.stat-sarmal > .stat { flex: 1 1 auto; }
.stat-goz-form { position: absolute; top: 8px; right: 8px; z-index: 2; }
.stat-goz {
    width: 28px; height: 28px; border-radius: 8px; border: none; cursor: pointer;
    background: var(--surface-2); color: var(--text-muted);
    display: grid; place-items: center; opacity: .75; transition: opacity .15s, background .15s;
}
.stat-goz:hover { opacity: 1; background: var(--border); color: var(--text-soft); }
.stat-sarmal:has(.stat-goz) .stat-go { display: none; }
.stat-go { position: absolute; top: 15px; right: 14px; color: var(--text-muted); opacity: .4; }
.stat-go .ico { width: 17px; height: 17px; }
a.stat:hover .stat-go { opacity: .9; color: var(--brand); }

.tint-brand { background: var(--brand-soft); color: var(--brand); }
.tint-ok { background: var(--ok-soft); color: var(--ok); }
.tint-warn { background: var(--warn-soft); color: var(--warn); }
.tint-violet { background: var(--violet-soft); color: var(--violet); }
.tint-danger { background: var(--danger-soft); color: var(--danger); }


/* Menü rozeti (sayı göstergesi) */
.menu-rozet {
    margin-left: auto; background: var(--danger); color: #fff;
    font-size: 10.5px; font-weight: 700; min-width: 18px; height: 18px;
    border-radius: 99px; display: grid; place-items: center; padding: 0 5px;
}
.tab { position: relative; }
.tab-rozet {
    position: absolute; top: 7px; left: 50%; margin-left: 4px;
    background: var(--danger); color: #fff; font-size: 9.5px; font-weight: 700;
    min-width: 16px; height: 16px; border-radius: 99px; display: grid; place-items: center; padding: 0 4px;
}

/* ---------------------------------------------------------
   Kaporta fotoğrafları
   --------------------------------------------------------- */
.bolge-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px)  { .bolge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1050px) { .bolge-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.bolge-kutu {
    border: 1px dashed var(--border-strong); border-radius: var(--r);
    padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #FCFCFE;
}
.bolge-ad { font-size: 13px; font-weight: 700; color: var(--text-soft); }
.dosya { height: auto; padding: 9px 11px; font-size: 13px; background: var(--surface); }
.dosya::file-selector-button {
    border: none; background: var(--surface-2); color: var(--text-soft);
    padding: 6px 11px; border-radius: 8px; margin-right: 10px;
    font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.dosya::file-selector-button:hover { background: var(--border); }

.foto-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 700px)  { .foto-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .foto-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.foto-kutu {
    border: 1px solid var(--border); border-radius: var(--r);
    overflow: hidden; background: var(--surface); display: flex; flex-direction: column;
}
.foto-kutu img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--surface-2); }
.foto-kutu figcaption { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 3px; }
.foto-kutu figcaption strong { font-size: 12.5px; font-weight: 700; }
.foto-aciklama { font-size: 12px; color: var(--danger); line-height: 1.4; }
.foto-meta { font-size: 11px; color: var(--text-muted); }

/* ---------------------------------------------------------
   Kip seçici: Rezervasyon / Kiralama
   --------------------------------------------------------- */
.kip-secici {
    display: inline-flex; gap: 3px; padding: 3px; flex: none;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px;
}
.kip-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border-radius: 9px;
    font-size: 13px; font-weight: 600; color: var(--text-soft); white-space: nowrap;
    transition: background .15s, color .15s;
}
.kip-btn:hover { background: var(--surface); }
.kip-btn.on { background: var(--surface); color: var(--text); box-shadow: var(--sh-sm); }
.kip-secici .kip-btn.on:first-child { color: var(--violet); }
.kip-secici .kip-btn.on:last-child  { color: var(--warn); }

.kip-aciklama {
    display: flex; align-items: flex-start; gap: 9px;
    margin: 0 18px 16px; padding: 11px 13px; border-radius: var(--r);
    font-size: 13.5px; line-height: 1.5;
}
.kip-aciklama .ico { flex: none; margin-top: 2px; }
.kip-aciklama em { font-style: normal; font-weight: 700; }
.kip-aciklama.rez { background: var(--violet-soft); color: #53389E; }
.kip-aciklama.kir { background: var(--warn-soft); color: #93370D; }

/* ---------------------------------------------------------
   Sekmeler
   --------------------------------------------------------- */
.sekmeler { display: flex; gap: 6px; margin-bottom: 16px; overflow-x: auto; padding-bottom: 2px; }
.sekme {
    flex: none; padding: 9px 15px; border-radius: 10px;
    background: var(--surface); border: 1px solid var(--border);
    font-size: 14px; font-weight: 600; color: var(--text-soft); white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s;
}
.sekme:hover { background: var(--surface-2); }
.sekme.on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---------------------------------------------------------
   Takvim kısayolu
   --------------------------------------------------------- */
.takvim-git {
    display: flex; align-items: center; gap: 13px;
    background: linear-gradient(120deg, #101E36, #1C3763);
    color: #fff; border-radius: var(--r-lg); padding: 15px 16px;
    margin-bottom: 16px; border: 1px solid rgba(200, 155, 74, .4);
    box-shadow: 0 4px 14px -6px rgba(12, 21, 36, .45);
    transition: transform .15s, box-shadow .15s;
}
.takvim-git-ikon { color: var(--altin-acik); }
.takvim-git:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(12, 21, 36, .55); }
.takvim-git-ikon {
    width: 40px; height: 40px; border-radius: 10px; flex: none;
    background: rgba(255, 255, 255, .14); display: grid; place-items: center;
}
.takvim-git-yazi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.takvim-git-yazi strong { font-size: 15.5px; font-weight: 700; letter-spacing: -.02em; }
.takvim-git-yazi small { font-size: 12.5px; opacity: .85; }
.takvim-git-ok { margin-left: auto; flex: none; opacity: .8; }

/* ---------------------------------------------------------
   Sanayideki araçlar
   --------------------------------------------------------- */
.sanayi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
@media (min-width: 700px)  { .sanayi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sanayi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.sanayi-kutu {
    background: var(--surface); border: 1px solid var(--border);
    border-left: 4px solid var(--warn); border-radius: var(--r);
    padding: 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.sanayi-plaka {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 16px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sanayi-model { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sanayi-not { font-size: 11.5px; color: var(--warn); margin-top: 4px; line-height: 1.4; overflow-wrap: anywhere; }
.sanayi-alt { display: flex; gap: 7px; margin-top: 10px; flex-wrap: wrap; }
.sanayi-alt .btn, .sanayi-alt form { flex: 1 1 auto; }
.sanayi-alt form .btn { width: 100%; }

/* ---------------------------------------------------------
   Belge blokları (muayene / sigorta / kasko)
   --------------------------------------------------------- */
.belge-blok { margin-top: 16px; }
.belge-bas { cursor: pointer; list-style: none; gap: 11px; }
.belge-bas::-webkit-details-marker { display: none; }
.belge-bas h2 { flex: 1 1 auto; min-width: 0; }
.belge-ikon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.belge-ikon .ico { width: 18px; height: 18px; }
.belge-ac { flex: none; color: var(--text-muted); transition: transform .2s; }
.belge-blok[open] .belge-ac { transform: rotate(90deg); }
.belge-blok:not([open]) .card-head { border-bottom: none; }

/* ---------------------------------------------------------
   Plaka
   --------------------------------------------------------- */
.plate {
    display: inline-flex; align-items: stretch;
    border: 1.5px solid #C9CFDC; border-radius: 5px;
    background: #fff; overflow: hidden;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    line-height: 1; white-space: nowrap;
}
.plate-tr {
    background: #12409B; color: #fff;
    font-size: 8px; font-weight: 700; letter-spacing: .04em;
    display: grid; place-items: center; padding: 0 4px;
}
.plate-no { padding: 5px 8px; font-size: 14px; font-weight: 700; letter-spacing: .05em; color: #101828; text-transform: uppercase; }
.plate-lg .plate-no { font-size: 17px; padding: 6px 10px; }
.plate-lg .plate-tr { font-size: 9px; padding: 0 5px; }

/* ---------------------------------------------------------
   Rozetler
   --------------------------------------------------------- */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 600; letter-spacing: -.005em;
    padding: 4px 9px 4px 8px; border-radius: 6px; white-space: nowrap;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge-ok { color: var(--ok); background: var(--ok-soft); }
.badge-warn { color: var(--warn); background: var(--warn-soft); }
.badge-danger { color: var(--danger); background: var(--danger-soft); }
.badge-brand { color: var(--brand); background: var(--brand-soft); }
.badge-violet { color: var(--violet); background: var(--violet-soft); }
.badge-gray { color: var(--text-soft); background: var(--surface-2); }

/* ---------------------------------------------------------
   Şube rozeti
   --------------------------------------------------------- */
.sube {
    display: inline-flex; align-items: center; flex: none;
    height: 21px; padding: 0 8px; border-radius: 6px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; white-space: nowrap;
}
.sube-r1  { background: #E9EFFC; color: #1F3D6D; }
.sube-r2  { background: #E6F3EC; color: #067647; }
.sube-r3  { background: #F0EBFA; color: #6941C6; }
.sube-r4  { background: #FAEEE1; color: #B54708; }
.sube-r5  { background: #E4F1F6; color: #0E7490; }
.sube-yok { background: var(--surface-2); color: var(--text-muted); }

/* ---------------------------------------------------------
   Butonlar
   --------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 46px; padding: 0 18px;
    border-radius: 9px; border: 1px solid transparent;
    font-size: 14.5px; font-weight: 600; letter-spacing: -.012em;
    cursor: pointer; transition: background .15s, border-color .15s, transform .06s, box-shadow .15s;
    white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.985); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 1px 2px rgba(31, 61, 109, .3); }
.btn-primary:hover { background: var(--brand-hover); }
.btn-ok { background: var(--ok); color: #fff; }
.btn-ok:hover { background: #05603A; }
.btn-ghost { background: var(--surface); border-color: var(--border-strong); color: var(--text-soft); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-mor { background: var(--violet); color: #fff; }
.btn-mor:hover { background: #56369F; }
.btn-uyari { background: var(--warn); color: #fff; }
.btn-uyari:hover { background: #9A3D06; }

/* Aranabilir araç seçici */
.arac-secici { border: 1px solid var(--border-strong); border-radius: 12px; overflow: hidden; background: var(--surface); }
.arac-secici .search { border-bottom: 1px solid var(--border); }
.arac-secici .search-input { border: none; border-radius: 0; }
.arac-secici .search-input:focus { box-shadow: none; }
.arac-liste { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.arac-secili {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 11px 13px; background: var(--brand-soft);
    box-shadow: inset 3px 0 0 var(--brand);
}
.arac-degistir { margin-left: auto; font-size: 11.5px; color: var(--brand); font-weight: 600; }
.arac-secenek {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 11px 13px; border: none; border-top: 1px solid var(--border);
    background: none; text-align: left; cursor: pointer; width: 100%;
    transition: background .12s;
}
.arac-secenek:first-child { border-top: none; }
.arac-secenek:hover { background: var(--surface-2); }
.arac-secenek.on { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
.arac-plaka {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 14.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; flex: none;
}
.arac-model { font-size: 13px; color: var(--text-soft); flex: 1 1 auto; min-width: 0; }

/* Kamera / galeri seçim düğmeleri */
.foto-secim { display: flex; gap: 9px; flex-wrap: wrap; }
.foto-btn {
    flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 44px; padding: 0 14px; border-radius: 12px;
    border: 1px dashed var(--border-strong); background: var(--surface);
    color: var(--text-soft); font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background .15s, border-color .15s;
}
.foto-btn:hover { background: var(--surface-2); border-color: var(--brand); color: var(--brand); }
.foto-btn-sm { height: 36px; padding: 0 10px; font-size: 12.5px; gap: 5px; }

/* Fotoğraf görüntüleyici (tam ekran) */
.foto-izle {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(6, 10, 20, .92);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    display: none; align-items: center; justify-content: center;
    flex-direction: column; gap: 14px; padding: 22px;
}
.foto-izle.on { display: flex; animation: bildirimGir .18s ease; }
.foto-izle img { max-width: 100%; max-height: 82vh; border-radius: 12px; box-shadow: var(--sh-lg); }
.foto-izle-yazi { color: #E6EAF2; font-size: 13.5px; font-weight: 600; text-align: center; }
.foto-izle-kapat {
    position: absolute; top: 16px; right: 16px;
    width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(255, 255, 255, .16); color: #fff; display: grid; place-items: center;
}
.foto-izle-kapat:hover { background: rgba(255, 255, 255, .28); }

/* Küçük resim düğmeleri */
.foto-ac { border: none; padding: 0; background: none; cursor: pointer; display: block; width: 100%; }
.plaka-ac { border: none; padding: 0; background: none; cursor: pointer; }

.belge-onizleme {
    border: 1px solid var(--border); border-radius: var(--r); background: var(--surface);
    padding: 0; cursor: pointer; overflow: hidden; display: block; width: 100%; max-width: 260px;
}
.belge-onizleme img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.belge-onizleme span { display: block; padding: 7px; font-size: 11.5px; color: var(--text-muted); }
.belge-onizleme:hover { border-color: var(--brand); }

.mini-galeri { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.mini-galeri button { border: 1px solid var(--border); border-radius: 9px; padding: 0; background: none; cursor: pointer; overflow: hidden; }
.mini-galeri img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.mini-galeri button:hover { border-color: var(--brand); }

/* Fotoğrafın sağ üst köşesinde eklenme tarihi damgası */
.foto-damgali { position: relative; }
.foto-zaman {
    position: absolute; top: 4px; right: 4px; z-index: 2;
    background: rgba(12, 21, 36, .72); color: #fff;
    font-size: 8.5px; font-weight: 600; line-height: 1.2;
    padding: 2px 5px; border-radius: 5px; pointer-events: none;
    font-variant-numeric: tabular-nums; letter-spacing: .01em;
    max-width: calc(100% - 8px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.foto-kutu .foto-zaman, .foto-grid .foto-zaman { font-size: 10.5px; top: 6px; right: 6px; padding: 3px 7px; }

.not-form { display: flex; gap: 6px; align-items: center; min-width: 190px; }
.not-form .input { flex: 1 1 auto; min-width: 0; }
.not-form .btn { flex: none; padding: 0 10px; }

.islem-btnler { display: flex; gap: 6px; flex-wrap: wrap; }
.islem-btnler .btn { flex: 0 0 auto; }
@media (max-width: 899px) {
    .islem-btnler { width: 100%; }
    .islem-btnler .btn { flex: 1 1 auto; }
}
.btn-sm { height: 36px; padding: 0 13px; font-size: 13px; border-radius: 10px; }
/* Yalnız mobilde görünen öğe (masaüstünde yan menüde karşılığı var) */
@media (min-width: 900px) { .sadece-mobil { display: none !important; } }
/* Yalnız geniş ekranda görünen öğe (mobilde alt sekmeden gidilir) */
@media (max-width: 899px) { .sadece-web { display: none !important; } }
.btn-block { width: 100%; }

.link-btn { font-size: 13px; font-weight: 600; color: var(--brand); }
.link-btn:hover { text-decoration: underline; }
.link-danger { color: var(--danger); }

/* ---------------------------------------------------------
   Formlar
   --------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.field label, .lbl { display: block; font-size: 13px; font-weight: 600; color: var(--text-soft); margin-bottom: 6px; letter-spacing: -.01em; }
.field .hint { font-size: 12px; color: var(--text-muted); margin-top: 5px; }
.input, select.input, textarea.input {
    width: 100%; height: 46px; padding: 0 13px;
    background: var(--surface);
    border: 1px solid var(--border-strong); border-radius: 9px;
    font-size: 16px; color: var(--text);
    transition: border-color .15s, box-shadow .15s;
    -webkit-appearance: none; appearance: none;
}
textarea.input { height: auto; min-height: 84px; padding: 11px 13px; resize: vertical; line-height: 1.5; }
select.input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238A94A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px;
}
.input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3.5px var(--brand-soft); }
.input:read-only { background: var(--surface-2); color: var(--text-soft); border-style: dashed; }
.input::placeholder { color: var(--text-muted); }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.alt-baslik {
    font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--text-muted); border-top: 1px solid var(--border);
    padding-top: 15px; margin-top: 3px;
}
.tarih-ikili { display: flex; align-items: center; gap: 7px; }
.tarih-ikili .input { min-width: 0; }
.tarih-ikili span { color: var(--text-muted); flex: none; font-size: 13px; }
.secim { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text-soft); cursor: pointer; }
.secim input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brand); flex: none; }
.col-full { grid-column: 1 / -1; }

/* ---------------------------------------------------------
   Kiralama / rezervasyon formu — numaralı bölümler
   --------------------------------------------------------- */
.kir-form { display: grid; gap: 13px; }
.form-bolum {
    border: 1px solid var(--border); border-radius: 14px;
    background: var(--surface); overflow: hidden;
    box-shadow: var(--sh-sm);
}
.bolum-bas {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 15px; border-bottom: 1px solid var(--border);
    background: linear-gradient(100deg, var(--surface-2), var(--surface));
}
.bolum-no {
    flex: none; width: 27px; height: 27px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--brand); color: #fff;
    font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.bolum-yazi { min-width: 0; }
.bolum-yazi h3 { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.bolum-yazi p  { font-size: 12.5px; color: var(--text-muted); margin: 1px 0 0; }
.bolum-icerik { padding: 15px; }
.bolum-icerik > .form-grid { gap: 13px; }

/* Hesaplanan dönüş — formun çıktısı, altın çerçeveyle öne çıkar */
.donus-kutu {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 11px;
    border: 1.5px solid var(--altin);
    background: linear-gradient(100deg, rgba(233, 198, 109, .20), rgba(200, 155, 74, .05));
}
.donus-kutu .ico { width: 22px; height: 22px; flex: none; color: var(--altin-koyu); }
.donus-yazi { min-width: 0; }
.donus-etiket {
    display: block; font-size: 11px; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase; color: var(--altin-koyu);
}
.donus-deger {
    display: block; font-size: 16.5px; font-weight: 700; color: var(--text);
    letter-spacing: -.01em; margin-top: 1px; font-variant-numeric: tabular-nums;
}
.donus-deger:empty::after { content: 'Tarih ve gün girin'; font-size: 14px; font-weight: 600; color: var(--text-muted); }

/* Gönder düğmesi — mobilde tam genişlik, rahat dokunulur */
.kir-alt { display: grid; gap: 9px; }
.kir-alt .btn { width: 100%; height: 50px; font-size: 15px; }
.kir-alt .btn-ghost { height: 44px; font-size: 14px; }

@media (min-width: 760px) {
    .bolum-icerik { padding: 17px 18px; }
    .bolum-icerik > .form-grid { grid-template-columns: 1fr 1fr; gap: 15px; }
    .kir-alt { grid-auto-flow: column; justify-content: start; gap: 10px; }
    .kir-alt .btn { width: auto; min-width: 240px; padding: 0 22px; }
    .kir-alt .btn-ghost { min-width: 120px; height: 50px; font-size: 15px; }
}

/* Dar ekran form/pencere standardı dosyanın SONUNDADIR —
   buradaki temel kuralların hepsini ezebilmesi için. */

/* ---------------------------------------------------------
   Uyarılar
   --------------------------------------------------------- */
.alert {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; border-radius: var(--r);
    font-size: 14px; font-weight: 500; margin-bottom: 16px;
    border: 1px solid transparent;
}
.alert .ico { flex: none; margin-top: 1px; }
.alert-ok { background: var(--ok-soft); color: #05603A; border-color: #BEDFCE; }
.alert-err { background: var(--danger-soft); color: #912018; border-color: #F0C3BD; }

/* ---------------------------------------------------------
   Tablolar — mobilde karta dönüşür
   --------------------------------------------------------- */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tbl th {
    text-align: left; padding: 11px 14px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-muted); background: var(--surface-2); white-space: nowrap;
}
table.tbl td { padding: 13px 14px; border-top: 1px solid var(--border); vertical-align: middle; }
table.tbl tbody tr:hover { background: #FAFBFD; }
table.tbl .num { font-variant-numeric: tabular-nums; }
table.tbl .nowrap { white-space: nowrap; }

@media (max-width: 899px) {
    table.tbl, table.tbl tbody, table.tbl tr, table.tbl td { display: block; width: 100%; }
    table.tbl thead { display: none; }
    .tbl-wrap { padding: 12px; }
    table.tbl tr {
        border: 1px solid var(--border); border-radius: var(--r);
        padding: 4px 0; margin-bottom: 10px; background: var(--surface);
        box-shadow: var(--sh-sm);
    }
    table.tbl tr:last-child { margin-bottom: 0; }
    table.tbl tbody tr:hover { background: var(--surface); }
    table.tbl td {
        border: none; padding: 8px 14px;
        display: flex; align-items: center; justify-content: space-between; gap: 14px;
        min-height: 36px; font-size: 14.5px;
    }
    table.tbl td + td { border-top: 1px dashed var(--border); }
    table.tbl td::before {
        content: attr(data-label);
        font-size: 12px; font-weight: 700; color: var(--text-muted);
        flex: none; letter-spacing: .01em; text-transform: uppercase;
    }
    table.tbl td.cell-wide { flex-direction: column; align-items: flex-start; gap: 4px; }
    .empty-row td { display: block; }
    .empty-row td::before { display: none; }
    .empty-row tr, table.tbl tr.empty-row { border: none; }
}

/* ---------------------------------------------------------
   Arama
   --------------------------------------------------------- */
.card-tools { padding: 13px 18px; border-bottom: 1px solid var(--border); background: #FCFCFE; }
.search { position: relative; }
.search > .ico {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); pointer-events: none; width: 18px; height: 18px;
}
.search-input {
    width: 100%; height: 44px; padding: 0 42px 0 41px;
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: 9px;
    font-size: 16px; color: var(--text);
    transition: border-color .15s, box-shadow .15s;
    -webkit-appearance: none; appearance: none;
}
.search-input::placeholder { color: var(--text-muted); }
.search-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3.5px var(--brand-soft); }
.search-input::-webkit-search-cancel-button { display: none; }
.search-clear {
    position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; border: none; border-radius: 9px;
    background: var(--surface-2); color: var(--text-soft);
    cursor: pointer; display: none; place-items: center;
}
.search-clear.on { display: grid; }
.search-clear:hover { background: var(--border); }

.no-result td { text-align: center; padding: 34px 20px; color: var(--text-muted); font-size: 14px; }
.no-result-box { text-align: center; padding: 34px 20px; color: var(--text-muted); font-size: 14px; }
@media (max-width: 899px) {
    table.tbl tr.no-result { border: 1px dashed var(--border-strong); background: transparent; }
    .no-result td { display: block; }
    .no-result td::before { display: none; }
}

/* ---------------------------------------------------------
   Boş durum
   --------------------------------------------------------- */
.empty { text-align: center; padding: 44px 20px; }
.empty-icon {
    width: 54px; height: 54px; border-radius: 12px;
    background: var(--surface-2); color: var(--text-muted);
    display: grid; place-items: center; margin: 0 auto 13px;
}
.empty-icon .ico { width: 25px; height: 25px; }
.empty h3 { font-size: 15px; font-weight: 600; color: var(--text-soft); }
.empty p { font-size: 13.5px; color: var(--text-muted); margin-top: 4px; }

/* ---------------------------------------------------------
   Kiralama kartları
   --------------------------------------------------------- */
.rental-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.rental {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--sh-sm);
    overflow: hidden; transition: box-shadow .18s, border-color .18s, transform .18s;
}
.rental:hover { box-shadow: var(--sh); transform: translateY(-1px); }
.rental.late { border-color: #EBC4BF; background: linear-gradient(180deg, #FDF6F5 0%, var(--surface) 62%); }
.rental-tap { display: block; width: 100%; text-align: left; background: none; border: none; padding: 15px 15px 13px; cursor: pointer; }
.rental-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; }
.rental-late-badge { margin-left: auto; }
.rental-model { font-size: 15px; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.rental-meta { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 13.5px; color: var(--text-soft); }
.rental-meta .ico { width: 16px; height: 16px; color: var(--text-muted); flex: none; }
.rental-meta b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.rental.late .rental-meta b { color: var(--danger); }
.rental-kaporta { padding: 0 15px 10px; }
.rental-kaporta .link-btn { display: inline-flex; align-items: center; gap: 5px; }
.rental-foot { padding: 0 15px 15px; }
.iade-form { display: flex; flex-direction: column; gap: 8px; }
.input-sm { height: 38px; font-size: 14px; border-radius: 10px; }
.rental-hint { font-size: 11.5px; color: var(--text-muted); display: flex; align-items: center; gap: 5px; margin-top: 10px; }
.rental-hint .ico { width: 13px; height: 13px; }

/* ---------------------------------------------------------
   Takvim — dikey gün akışı
   --------------------------------------------------------- */
.tkv { display: flex; flex-direction: column; gap: 10px; }

.ay-ayrac {
    display: flex; align-items: center; gap: 12px;
    margin: 12px 2px 4px; font-size: 12px; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted);
}
.ay-ayrac::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.gun { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); }

/* Bugünden sonraki günler ekrana girene kadar çizilmez.
   Takvim 61 gün bloku ve 256 kart basıyor; hepsini birden çizmek telefonda
   açılışta takılmaya yol açıyordu. Ölçüm (412 px genişlik): 63 ms -> 45 ms.
   İçerik kaybolmaz, arama da çalışır — yalnız çizim ertelenir.
   Bugün ve öncesi bilerek dışarıda: sayfa açılışta bugüne kayıyor,
   üstteki blokların gerçek yüksekliği şaşmasın (bkz. pages/takvim.php). */
.tkv .gun.uzak { content-visibility: auto; contain-intrinsic-size: auto 200px; }
/* BUGÜN — ayrı ve belirgin altın çerçeve, diğer günlerden net ayrışır */
.gun.bugun {
    position: relative;
    border: 2px solid var(--altin);
    box-shadow: 0 0 0 4px rgba(200, 155, 74, .16),
                0 8px 22px -10px rgba(169, 119, 28, .5);
}
/* Sol kenarda altın şerit — listede gözle hemen bulunur */
.gun.bugun::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, var(--altin-acik), var(--altin));
    z-index: 1;
}
.gun.bugun .gun-gun { color: var(--altin-koyu, #A9771C); }
.gun.bos { background: transparent; border-style: dashed; box-shadow: none; }

.gun-bas { display: flex; align-items: center; gap: 9px; padding: 11px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.gun.bos .gun-bas { background: transparent; border-bottom: none; padding: 9px 14px; }
.gun.bugun .gun-bas {
    background: linear-gradient(100deg, rgba(233, 198, 109, .28), rgba(200, 155, 74, .12));
    border-bottom-color: rgba(200, 155, 74, .4);
}
/* "Bugün" rozeti de altın olsun */
.gun.bugun .badge-brand {
    background: linear-gradient(140deg, #E9C66D, #C2902C);
    color: #221803; font-weight: 700;
}
.gun.bugun .badge-brand::before { background: #221803; }
.gun.hs .gun-bas { background: #EFF2F7; }
.gun-gun { font-size: 20px; font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.gun.bos .gun-gun { font-size: 16px; color: var(--text-soft); }
.gun-etiket { font-size: 13.5px; font-weight: 600; color: var(--text-soft); line-height: 1.25; }
.gun-etiket s { display: block; font-size: 11.5px; color: var(--text-muted); text-decoration: none; font-weight: 500; }
.gun-ozet { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--text-muted); text-align: right; white-space: nowrap; }

/* Takvim gün blokları da 3'lü ızgara */
.kutular { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px; align-items: stretch; }
/* Kart içeriği esner, işlem butonları her zaman en altta hizalanır */
.kutular .kutu-tap { flex: 1 1 auto; }
/* Takvim ızgarası — masaüstünde satırda 5 kutucuk (mobilde 3 kalır) */
@media (min-width: 900px) { .kutular { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 14px; } }

/* Küçük durum satırı — boş bölümler için kompakt kutu */
.mini-durum {
    display: flex; align-items: center; gap: 8px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
    padding: 11px 14px; margin-bottom: 16px;
    font-size: 13.5px; font-weight: 600; color: var(--text-muted);
    box-shadow: var(--sh-sm);
}

/* Yatay kaydırmalı kart şeridi (panel: Dönüşü Yaklaşanlar) */
.serit { position: relative; }
.kutular.kaydir-yatay {
    display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    padding: 14px 14px 16px; gap: 10px;
    scrollbar-width: none;
}
.kutular.kaydir-yatay::-webkit-scrollbar { display: none; }
.kaydir-yatay .kutu {
    flex: 0 0 180px; scroll-snap-align: start;
    transition: box-shadow .18s, transform .18s, border-color .18s;
}
.kaydir-yatay .kutu:hover { transform: translateY(-2px); box-shadow: var(--sh); }
@media (min-width: 700px) { .kaydir-yatay .kutu { flex-basis: 205px; } }

/* Telefonda kart genişliği ekrana göre hesaplanır.
   Sabit 180px, 360–390px'lik telefonlarda ikinci kartı tam butonun ortasından
   kesiyordu; bozuk görünüyordu. Ekranın yarısından iç boşluk payı düşülünce
   iki kart tam sığar, kenarlar temiz biter. 140px alt sınır çok dar
   telefonlarda "Rezerve" yazısının kırılmasını engeller.
   Masaüstü ve tablet görünümü değişmez. */
@media (max-width: 699px) {
    .kaydir-yatay .kutu { flex: 0 0 max(140px, calc(50vw - 30px)); }
}

/* Masaüstü: şeritte tam 7 kart görünür — hepsi aynı genişlikte, eşit aralıklı.
   Kart daraldığı için içerideki yazı ve butonlar bir tık sıkılaştırılır. */
@media (min-width: 900px) {
    .kutular.kaydir-yatay { gap: 8px; padding: 12px 12px 14px; }
    /* Yedi kart sığmayacak kadar dar ekranda kartlar küçülmez, şerit kaydırılır */
    .kutular.kaydir-yatay .kutu { flex: 0 0 max(144px, calc((100% - 48px) / 7)); }
    .kutular.kaydir-yatay .kutu-tap { padding: 10px 9px 0; }
    .kutular.kaydir-yatay .kutu-plaka { font-size: 13.5px; }
    .kutular.kaydir-yatay .kutu-model,
    .kutular.kaydir-yatay .kutu-etiket { font-size: 11px; }
    .kutular.kaydir-yatay .kutu-islem { padding: 8px 5px 8px; gap: 3px; }
    .kutular.kaydir-yatay .kutu-btn {
        min-height: 43px; padding: 6px 1px 5px; font-size: 9px; gap: 3px;
    }
    .kutular.kaydir-yatay .kutu-btn .ico { width: 15px; height: 15px; }
}

/* Kenarlarda yumuşak solma — devamı olduğunu belli eder */
.serit::before, .serit::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 26px;
    pointer-events: none; z-index: 2; transition: opacity .2s;
}
.serit::before { left: 0;  background: linear-gradient(90deg, var(--surface), transparent); }
.serit::after  { right: 0; background: linear-gradient(270deg, var(--surface), transparent); }
.serit.bas::before { opacity: 0; }
.serit.son::after  { opacity: 0; }

/* Kaydırma okları — yalnız fare ile gezilen geniş ekranda */
.serit-ok {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
    border: 1px solid var(--border-strong); background: var(--surface);
    color: var(--text-soft); display: none; place-items: center;
    box-shadow: var(--sh-sm); transition: background .15s, color .15s;
}
.serit-ok:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.serit-ok.sol   { left: 6px; }
.serit-ok.sag   { right: 6px; }
.serit-ok.sol .ico { transform: rotate(180deg); }
.serit-ok[disabled] { opacity: .3; pointer-events: none; }
@media (hover: hover) and (min-width: 700px) { .serit-ok { display: grid; } }

/* Kart ızgarası tek başına kullanıldığında (kart sarmalı olmadan) */
.kutular-genis { padding: 0; gap: 11px; }
.kutular-genis .kutu { box-shadow: var(--sh-sm); }
@media (min-width: 700px)  { .kutular-genis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .kutular-genis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- Kompakt 3'lü ızgara: mobilde bile satırda 3 kart ---- */
.kutular-uc { padding: 0; gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kutular .kutu { box-shadow: var(--sh-sm); border-left-width: 3px; }
.kutular .kutu-tap { padding: 9px 9px 0; gap: 1px; }
.kutular .kutu-plaka { font-size: 12px; letter-spacing: 0; }
.kutular .kutu-ust { gap: 4px; flex-wrap: wrap; }
.kutular .kutu-model { font-size: 10px; }
.kutular .kutu-etiket { font-size: 10px; margin-top: 3px; line-height: 1.35; }
.kutular .sube { height: 16px; padding: 0 5px; font-size: 8.5px; letter-spacing: .02em; }
/* Rozet dar kartta kesilmesin, gerekirse alt satıra sarsın */
.kutular .badge {
    height: auto; min-height: 17px; padding: 2px 6px 2px 5px; font-size: 9px;
    white-space: normal; line-height: 1.3; gap: 4px; align-items: flex-start;
}
.kutular .badge::before { margin-top: 4px; }

/* Butonlar: ikon üstte, işlev yazısı altında */
.kutular .kutu-islem { padding: 6px 4px 6px; gap: 3px; margin-top: 0; }
.kutular .kutu-btn {
    height: auto; padding: 7px 1px 6px; border-radius: 8px;
    flex-direction: column; gap: 3px; font-size: 9px; line-height: 1.15;
}
.kutular .kutu-btn span {
    display: block; width: 100%; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: clip;
    letter-spacing: -.03em;
}
.kutular .kutu-btn .ico { display: block; width: 15px; height: 15px; }
@media (max-width: 400px) {
    .kutular .kutu-btn { font-size: 8px; padding: 5px 0 4px; }
    .kutular .kutu-btn .ico { width: 14px; height: 14px; }
}

/* Ekran genişledikçe yazılar büyür, kart sayısı artar */
@media (min-width: 560px) {
    .kutular .kutu-btn { font-size: 10.5px; padding: 7px 4px 6px; }
    .kutular .kutu-btn .ico { width: 16px; height: 16px; }
    .kutular .kutu-plaka { font-size: 13.5px; letter-spacing: .02em; }
    .kutular .kutu-model, .kutular .kutu-etiket { font-size: 11px; }
}
/* Masaüstünde kartlar ferahlar, butonlar yatay ve rahat tıklanır olur */
@media (min-width: 900px) {
    .kutular .kutu-tap { padding: 12px 13px 0; gap: 2px; }
    .kutular .kutu-plaka { font-size: 15px; }
    .kutular .kutu-model, .kutular .kutu-etiket { font-size: 12px; }
    .kutular .kutu-not, .kutular .kutu-alan { font-size: 11.5px; }
    .kutular .sube { height: 18px; padding: 0 7px; font-size: 9.5px; }
    .kutular .badge { font-size: 10.5px; }
    /* Buton: ikon üstte, yazı altta — 3-4 butonlu kartta da yazı kesilmez.
       Yatay iç boşluk 0: takvimde gün sütunları dar olduğu için kart 148px'e
       iner ve üç buton paylaşınca yazıya 27px kalıyordu — "Sanayi" sessizce
       kesiliyordu (span'da overflow:hidden var, kırpma fark edilmiyor).
       Boşluk kaldırılıp punto 11,5 → 10,5 düşürülünce en dar yazıya 2,6px pay
       kalıyor; ölçülen en sıkışık düğme yine "Sanayi". */
    .kutular .kutu-islem { padding: 9px 10px 10px; gap: 7px; }
    .kutular .kutu-btn {
        flex-direction: column; gap: 4px;
        min-height: 48px; padding: 8px 0 7px; font-size: 10.5px;
    }
    .kutular .kutu-btn span { width: 100%; letter-spacing: -.04em; }
    .kutular .kutu-btn .ico { width: 17px; height: 17px; }
}
@media (min-width: 900px) { .kutular-uc { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; } }
/* Envanter — mobilde 3, masaüstünde satırda 5 kutucuk */
@media (min-width: 900px) { .kutular-bes { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } }
/* Envanter kartı: plaka ve marka/model kalın ve okunur */
.kutular-bes .kutu-tap { padding-bottom: 11px; gap: 3px; }
.kutular-bes .kutu-plaka { font-weight: 800; }
.kutular-bes .kutu-model {
    font-weight: 700; color: var(--text); white-space: normal;
    font-size: 12px; line-height: 1.3;
}
@media (min-width: 900px) { .kutular-bes .kutu-model { font-size: 13px; } }

/* Kart içindeki rozet satırı (kalan gün vb.) */
.kutu-rozet { display: flex; margin-top: 5px; min-width: 0; }
.kutu-rozet .badge { max-width: 100%; display: inline-flex; }

/* Kart içindeki etiketli alan: küçük başlık + değer */
.kutu-alan {
    display: block; margin-top: 5px; min-width: 0;
    font-size: 10px; line-height: 1.35; color: var(--text-soft);
}
.kutu-alan b {
    display: block; font-size: 8.5px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
}
.kutu-alan i {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; font-style: normal; overflow-wrap: anywhere;
}
@media (min-width: 560px) {
    .kutu-alan { font-size: 11px; }
    .kutu-alan b { font-size: 9.5px; }
}

/* Kart içindeki not satırı */
.kutu-not {
    font-size: 10px; color: var(--text-muted); line-height: 1.35;
    margin-top: 4px; overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
@media (min-width: 560px) { .kutu-not { font-size: 11px; } }
.kutu {
    background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--border-strong);
    border-radius: var(--r); min-width: 0; overflow: hidden;
    display: flex; flex-direction: column;
    transition: box-shadow .15s, transform .12s, border-color .15s;
}
.kutu:hover { box-shadow: var(--sh); transform: translateY(-1px); }
a.kutu { text-decoration: none; color: inherit; }
.kutu-tap {
    width: 100%; text-align: left; cursor: pointer;
    background: none; border: none; padding: 11px 12px;
    display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.kutu-ust { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.kutu-ust .sube { flex: none; }

/* İşlem butonları kendi satırında — ızgara sayesinde hepsi AYNI genişlikte */
.kutu-islem {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    align-items: stretch; gap: 6px; padding: 0 10px 10px;
    border-top: 1px solid var(--border); padding-top: 9px; margin-top: 2px;
}
.kutu-islem form { display: contents; }
/* Çok butonlu kart: 2 sütuna sarar, hepsi yine aynı boyutta kalır */
.kutu-islem.sar { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-columns: auto; }
.kutu-btn {
    flex: 1 1 0; min-width: 0; width: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    height: 32px; padding: 0 6px; border-radius: 9px;
    border: 1px solid transparent; cursor: pointer;
    font-size: 11.5px; font-weight: 700; white-space: nowrap;
    transition: background .15s, border-color .15s;
}
.kutu-btn .ico { width: 14px; height: 14px; flex: none; display: none; }
@media (min-width: 520px) { .kutu-btn .ico { display: block; } }
.kutu-btn span { overflow: hidden; text-overflow: ellipsis; }
.kutu-btn.iade   { background: var(--ok); color: #fff; }
.kutu-btn.iade:hover { background: #05603A; }
.kutu-btn.teslim { background: var(--brand); color: #fff; }
.kutu-btn.teslim:hover { background: var(--brand-hover); }
/* Uzat — turkuaz: süre işlemi, diğer butonlardan ayırt edilir */
.kutu-btn.uzat   { background: #0E7490; color: #fff; }
.kutu-btn.uzat:hover { background: #0A5A73; }
/* Nötr buton (Foto, Düzenle gibi yardımcı işlemler) */
.kutu-btn.duz   { background: var(--surface); border-color: var(--border-strong); color: var(--text-soft); }
.kutu-btn.duz:hover { background: var(--surface-2); border-color: var(--text-muted); }
.kutu-btn.kirala  { background: var(--brand); color: #fff; }
.kutu-btn.kirala:hover { background: var(--brand-hover); }
.kutu-btn.rezerve { background: var(--violet); color: #fff; }
.kutu-btn.rezerve:hover { background: #56369F; }
/* İptal — rezervasyonu iptal eder (kayıt silinmez) */
.kutu-btn.iptal   { background: var(--surface); border-color: #E5C2BD; color: var(--danger); }
.kutu-btn.iptal:hover { background: var(--danger-soft); border-color: var(--danger); }
.kutu-btn.sanayi  { background: var(--warn); color: #fff; }
.kutu-btn.sanayi:hover { background: #9A3D06; }
.kutu-btn.arsiv   { background: var(--surface); border-color: #E5C2BD; color: var(--danger); }
.kutu-btn.arsiv:hover { background: var(--danger-soft); border-color: var(--danger); }

/* Boştaki araç kartı — yeşil şerit */
.kutu.bosta { border-left-color: var(--ok); }


.kutu.rezerve { border-left-color: var(--violet); background: #FCFBFE; }
.kutu.rezerve .kutu-etiket { color: var(--violet); }

.kutu-plaka {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 15px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
    color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (min-width: 520px) { .kutu-plaka { font-size: 16px; letter-spacing: .04em; } }
.kutu-model { font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.kutu-etiket { font-size: 11.5px; font-weight: 700; margin-top: 4px; overflow-wrap: anywhere; }

.kutu.aktif   { border-left-color: #B54708; } .kutu.aktif   .kutu-etiket { color: #B54708; }
.kutu.gecikti { border-left-color: #B42318; background: #FDF6F5; } .kutu.gecikti .kutu-etiket { color: #B42318; }
.kutu.gelecek { border-left-color: var(--brand); } .kutu.gelecek .kutu-etiket { color: var(--brand); }
.kutu.bitti   { border-left-color: #98A2B3; background: #FAFBFC; } .kutu.bitti .kutu-etiket { color: #667085; }
.kutu.bitti .kutu-plaka { color: var(--text-soft); }

/* Uzatma izi — eski tarihte kalan kutucuk */
.kutu.uzatildi { border-left-color: #9B8CE0; background: #FCFBFE; border-style: dashed; }
.kutu.uzatildi .kutu-etiket { color: var(--violet); }
.kutu.uzatildi .kutu-plaka { color: var(--text-muted); }

/* Aynı gün dönüp yeniden çıkacak araç (takvim).
   Sol kenar GELİŞ rengini korur — takvimde göz turuncuyu tarayarak o gün
   dönecek araçları buluyor, o iz kaybolmamalı. Rezervasyonu olduğu mor
   zemin tonu ve altındaki mor düğmeyle belli olur. */
/* Takvimde plaka, şube rozetiyle AYNI satırda duruyor (diğer sayfalarda rozet
   alt satırda). Dar kutucukta ikisi yan yana kıl payı sığmıyordu — "99XX003…"
   diye plaka kesiliyordu. Bu satırdaki plaka ve rozet birazcık küçülür;
   plaka asla kırpılmasın diye rozet de daha dar bir kalıba girer. */
.kutu-ust .kutu-plaka { font-size: 13.5px; flex: none; }
.kutu-ust .kutu-plaka + .sube { padding: 0 5px; font-size: 9px; letter-spacing: 0; }
/* Model artık üst satırda değil, kendi satırında. Oradaki "flex: 1 1 auto"
   yatay esneme içindi; dikey sıralamada modeli boyuna uzatıp "Geliş" yazısını
   kartın altına itiyordu. Kendi satırında esnemesin. */
.kutular .kutu-tap > .kutu-model { flex: none; }

/* TELEFON: takvim kutucuğu 96px'e kadar iniyor, üst satırda plakaya 74px yer
   kalıyor. Plaka (59px) + şube rozeti (43px) oraya sığmıyor, 32px taşıp
   rozet "DAML…" diye kesiliyordu. Sığmadığında rozet alt satıra insin —
   plaka da şube adı da tam okunur, sadece kart bir satır uzar. */
/* Seçici bilerek "kutu-tap >" ile derinleştirildi: aşağıda (dosyanın ilerisinde)
   ".kutular .kutu-ust { flex-wrap: nowrap }" var, aynı ağırlıkta olsaydı sonra
   geldiği için o kazanır ve rozet yine kesilirdi. */
@media (max-width: 640px) {
    .kutular .kutu-tap > .kutu-ust { flex-wrap: wrap; row-gap: 2px; }
    .kutular .kutu-tap > .kutu-ust .sube { margin-left: 0; }
}

.kutu.rez-var { background: #FAF8FF; }
.kutu-rez-dugme {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    width: 100%; cursor: pointer;
    padding: 6px 10px; border: none; border-top: 1px solid #E6DEFB;
    background: #F2ECFE; color: var(--violet);
    /* font kısayolu KULLANILMAZ: "font: 600 11.5px/1.2 inherit" içindeki
       inherit geçerli bir yazı tipi adı değil, tarayıcı kuralın tamamını
       atıyor ve düğme 15px kalıyordu. Özellikler ayrı ayrı yazılır. */
    font-family: inherit; font-weight: 600; font-size: 11.5px; line-height: 1.2;
    letter-spacing: .01em;
    transition: background .15s;
}
.kutu-rez-dugme:hover { background: #E7DCFD; }
.kutu-rez-dugme .ico { width: 13px; height: 13px; flex: none; }
.kutu-rez-dugme span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Telefonda kutucuk dar: "Rezerve 17:28" kırpılıp "Rezerv…" oluyordu.
   Yazı küçülür, yan boşluk daralır, saat her zaman tam görünür. */
@media (max-width: 640px) {
    .kutu-rez-dugme { font-size: 10px; padding: 6px 4px; gap: 3px; }
    .kutu-rez-dugme .ico { width: 11px; height: 11px; }
}
/* Pencerenin altındaki iki işlem butonu kenara yapışmasın */
.tk-rez-alt { margin-top: 0; padding: 0 20px 20px; }

.tkv-bos { text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: 14px; }

@media (min-width: 900px) {
    .tkv-alan { max-width: 820px; }
    .kutular { padding: 14px; gap: 12px; }
    .gun-bas { padding: 13px 16px; }
}

/* ---------------------------------------------------------
   Takvim / zaman çizelgesi (eski şerit görünüm — kullanılmıyor)
   --------------------------------------------------------- */
.tl-bar-ust { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.tl-bar-ust .search { flex: 1 1 210px; }

.tl-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 4px 0; font-size: 12.5px; color: var(--text-soft); }
.tl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tl-legend i { width: 13px; height: 13px; border-radius: 4px; display: block; }

.tl-wrap {
    overflow: auto; max-height: 68vh;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--sh-sm);
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.tl { --g: 40px; --v: 128px; position: relative; width: max-content; min-width: 100%; }

.tl-head { position: sticky; top: 0; z-index: 5; display: flex; background: var(--surface-2); border-bottom: 1px solid var(--border-strong); }
.tl-corner {
    position: sticky; left: 0; z-index: 6;
    width: var(--v); flex: none; background: var(--surface-2);
    border-right: 1px solid var(--border-strong);
    display: flex; align-items: flex-end; padding: 0 12px 9px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
}
.tl-months { display: flex; height: 25px; }
.tl-month {
    flex: none; display: flex; align-items: center;
    font-size: 11.5px; font-weight: 700; color: var(--text-soft);
    border-right: 1px solid var(--border-strong); white-space: nowrap; min-width: 0;
}
/* Etiket, ay bloğu görünürken sol kenara yapışsın (üst öğede overflow:hidden OLMAMALI) */
.tl-month > span {
    position: sticky; left: calc(var(--v) + 10px);
    padding: 0 12px 0 0; background: var(--surface-2);
}
.tl-daynums { display: flex; height: 36px; }
.tl-day {
    width: var(--g); flex: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-right: 1px solid var(--border); font-variant-numeric: tabular-nums;
}
.tl-day b { font-size: 12.5px; font-weight: 600; line-height: 1.1; }
.tl-day s { font-size: 9px; color: var(--text-muted); text-decoration: none; letter-spacing: .02em; }
.tl-day.hs { background: #EEF1F6; }
.tl-day.bg { background: var(--brand); border-radius: 8px 8px 0 0; }
.tl-day.bg b { color: #fff; }
.tl-day.bg s { color: rgba(255, 255, 255, .78); }

.tl-body { position: relative; }
.tl-overlay { position: absolute; top: 0; bottom: 0; z-index: 0; pointer-events: none; }
.tl-hs { position: absolute; top: 0; bottom: 0; background: #F5F7FA; }
.tl-bugun { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--brand); opacity: .55; }

.tl-row { position: relative; z-index: 1; display: flex; height: 50px; border-bottom: 1px solid var(--border); }
.tl-row:last-child { border-bottom: none; }
.tl-veh {
    position: sticky; left: 0; z-index: 2;
    width: var(--v); flex: none; background: var(--surface);
    border-right: 1px solid var(--border-strong);
    padding: 0 11px; display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
.tl-row:hover .tl-veh { background: #FAFBFD; }
.tl-veh-plaka { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 12.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.tl-veh-model { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-track {
    position: relative; flex: none;
    background-image: linear-gradient(90deg, var(--border) 0 1px, transparent 1px);
    background-size: var(--g) 100%;
}

.tl-cb {
    position: absolute; top: 8px; height: 34px;
    border: none; border-radius: 9px; padding: 0 9px;
    display: flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 600; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    cursor: pointer; box-shadow: 0 1px 3px rgba(16, 24, 40, .2);
    transition: transform .12s, box-shadow .12s, filter .12s;
}
.tl-cb:hover { transform: translateY(-1px); filter: brightness(1.07); box-shadow: var(--sh); z-index: 4; }
.tl-cb.gelecek { background: linear-gradient(180deg, #6366F1, #4F46E5); }
.tl-cb.aktif   { background: linear-gradient(180deg, #F59E0B, #D97706); }
.tl-cb.gecikti { background: linear-gradient(180deg, #FB7185, #E11D48); }
.tl-cb.bitti   { background: linear-gradient(180deg, #9AA6B8, #6B7A90); }

.durum-ek { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.lg.gelecek { background: #1F3D6D; }
.lg.aktif   { background: #B54708; }
.lg.gecikti { background: #B42318; }
.lg.bitti    { background: #6B7A90; }
.lg.uzatildi { background: #9B8CE0; }

@media (min-width: 900px) {
    .tl { --g: 44px; --v: 176px; }
    .tl-row { height: 54px; }
    .tl-veh-plaka { font-size: 13.5px; }
    .tl-veh-model { font-size: 12px; }
    .tl-wrap { max-height: 66vh; }
}

/* ---------------------------------------------------------
   Modal — mobilde alt sayfa
   --------------------------------------------------------- */
.modal {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(16, 24, 40, .5);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    display: none; align-items: flex-end; justify-content: center;
}
.modal.on { display: flex; }
.modal-panel {
    background: var(--surface); width: 100%;
    max-height: 88vh; display: flex; flex-direction: column;
    border-radius: 16px 16px 0 0;
    box-shadow: var(--sh-lg);
    animation: sheetUp .26s cubic-bezier(.32, .72, 0, 1);
}
/* Aşağı çekilebildiğini gösteren tutamaç */
.modal-panel::before {
    content: ''; flex: none;
    width: 42px; height: 4px; margin: 8px auto 0;
    border-radius: 99px; background: var(--border-strong);
}
.modal-head {
    padding: 12px 18px 13px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none;
}
.modal-head h3 { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.modal-x {
    width: 32px; height: 32px; border-radius: 9px; border: none;
    background: var(--surface-2); color: var(--text-soft);
    display: grid; place-items: center; cursor: pointer; flex: none;
}
.modal-x:hover { background: var(--border); }
.modal-body { padding: 6px 18px 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.dl-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.dl-row dt { font-size: 13.5px; color: var(--text-muted); font-weight: 500; flex: none; }
.dl-row dd { font-size: 14.5px; font-weight: 600; text-align: right; word-break: break-word; }
.dl-block { padding: 12px 0; border-bottom: 1px solid var(--border); }
.dl-block dt { font-size: 13.5px; color: var(--text-muted); font-weight: 500; margin-bottom: 5px; }
.dl-block dd { font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.dl-row:last-child, .dl-block:last-child { border-bottom: none; }

.uzatma-satir {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 10px; border-radius: 9px;
    background: var(--surface-2); margin-top: 6px;
}
.uzatma-gun { font-size: 12px; font-weight: 700; color: var(--brand); }
.uzatma-ok { font-size: 13px; font-variant-numeric: tabular-nums; }
.uzatma-meta { font-size: 11px; color: var(--text-muted); }

.onay-mesaj { font-size: 15px; line-height: 1.55; color: var(--text-soft); padding: 6px 0 2px; }
.onay-alt { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }
.onay-alt .btn { flex: 1 1 auto; }
@media (min-width: 560px) { .onay-alt .btn { flex: 0 0 auto; } }

/* Ana işlem üstte tam genişlik, ikincil işlemler altında yan yana */
.onay-alt-dikey { flex-direction: column; align-items: stretch; gap: 9px; }
.onay-alt-dikey .btn { flex: 0 0 auto; }
.onay-ikincil { display: flex; gap: 9px; }
.onay-ikincil .btn { flex: 1 1 0; }

/* Pencere içi işlem butonları — alt alta, tam genişlik */
.pencere-islem { display: grid; gap: 9px; margin-top: 12px; }
.pencere-islem .btn { width: 100%; }
.btn-iptal { color: var(--danger); border-color: #E5C2BD; }
.btn-iptal:hover { background: var(--danger-soft); border-color: var(--danger); }

/* ---------------------------------------------------------
   Bildirim çubuğu (alt sağ)
   --------------------------------------------------------- */
.bildirim {
    position: fixed; right: 16px; z-index: 55;
    bottom: calc(var(--tab-h) + 14px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
@media (min-width: 900px) { .bildirim { bottom: 20px; right: 22px; } }

/* Mobilde zil üst çubuğa taşındı: yüzen zil gizlenir, panel üstten açılır */
@media (max-width: 899px) {
    .bildirim .bildirim-btn { display: none; }
    .bildirim-panel {
        position: fixed; z-index: 60;
        top: calc(60px + 8px + env(safe-area-inset-top));
        left: 10px; right: 10px; width: auto;
    }
}

/* Sağ alt köşedeki yüzen bildirim düğmesi */
.yuzen-btn {
    position: relative; width: 52px; height: 52px; border-radius: 50%;
    border: none; cursor: pointer; flex: none;
    display: grid; place-items: center; color: #fff;
    transition: transform .15s, background .15s;
}
.yuzen-btn:hover { transform: translateY(-2px); }
.yuzen-sayi {
    position: absolute; top: -3px; right: -3px;
    min-width: 21px; height: 21px; padding: 0 6px; border-radius: 99px;
    background: var(--nav); color: #fff; border: 2px solid var(--bg);
    font-size: 11px; font-weight: 700; display: grid; place-items: center;
}


.bildirim-btn { background: var(--warn); box-shadow: 0 8px 22px -6px rgba(181, 71, 8, .55); }
.bildirim-btn.acil { background: var(--danger); box-shadow: 0 8px 22px -6px rgba(180, 35, 24, .6); animation: zilSalla 2.6s ease-in-out infinite; }
@keyframes zilSalla {
    0%, 88%, 100% { transform: rotate(0); }
    90% { transform: rotate(-11deg); }
    93% { transform: rotate(9deg); }
    96% { transform: rotate(-5deg); }
}
.bildirim-panel {
    width: min(340px, calc(100vw - 32px));
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--sh-lg);
    overflow: hidden; display: flex; flex-direction: column;
    animation: bildirimGir .2s ease;
}
@keyframes bildirimGir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.bildirim-bas {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 12px 12px 15px; background: var(--surface-2);
    border-bottom: 1px solid var(--border); flex: none;
}
.bildirim-bas strong { flex: 1 1 auto; font-size: 14px; letter-spacing: -.02em; }
.bildirim-ses {
    width: 30px; height: 30px; border-radius: 8px; border: none; cursor: pointer;
    background: none; color: var(--text-soft); display: grid; place-items: center;
}
.bildirim-ses:hover { background: var(--border); }
.bildirim-ses.kapali { color: var(--text-muted); opacity: .5; text-decoration: line-through; }

.bildirim-liste { max-height: 46vh; overflow-y: auto; }
.bildirim-satir {
    display: flex; align-items: flex-start;
    border-bottom: 1px solid var(--border);
    border-left: 4px solid transparent; transition: background .12s;
}
.bildirim-satir:hover { background: var(--surface-2); }
.bildirim-git {
    flex: 1 1 auto; min-width: 0;
    display: grid; grid-template-columns: auto 1fr; gap: 2px 9px;
    padding: 11px 4px 11px 15px;
}
.bildirim-kapat {
    flex: none; width: 30px; height: 30px; margin: 8px 8px 0 0;
    border: none; border-radius: 8px; background: none; cursor: pointer;
    color: var(--text-muted); display: grid; place-items: center;
}
.bildirim-kapat:hover { background: var(--border); color: var(--text-soft); }
.bildirim-satir.gecti    { border-left-color: var(--danger); background: #FDF6F5; }
.bildirim-satir.yaklasti { border-left-color: var(--warn); }
.bildirim-plaka {
    grid-column: 1; font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 13.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
}
.bildirim-tur { grid-column: 2; font-size: 12.5px; font-weight: 600; color: var(--text-soft); }
.bildirim-arac { grid-column: 1 / -1; font-size: 11.5px; color: var(--text-muted); }
.bildirim-gun { grid-column: 1 / -1; font-size: 12px; font-weight: 700; margin-top: 2px; }
.bildirim-satir.gecti .bildirim-gun    { color: var(--danger); }
.bildirim-satir.yaklasti .bildirim-gun { color: var(--warn); }

.bildirim-alt {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 15px; font-size: 11px; color: var(--text-muted);
    background: var(--surface-2); flex: none;
}
.bildirim-alt .link-btn { flex: none; font-size: 11.5px; background: none; border: none; cursor: pointer; padding: 0; }

/* ---------------------------------------------------------
   Giriş sayfası
   --------------------------------------------------------- */
.auth {
    min-height: 100vh; min-height: 100dvh;
    display: grid; place-items: center; padding: 24px 18px;
    background:
        radial-gradient(900px 520px at 18% -8%, rgba(31, 61, 109, .4), transparent 60%),
        radial-gradient(700px 480px at 100% 108%, rgba(23, 52, 96, .55), transparent 62%),
        var(--nav);
}
.auth-card {
    position: relative; overflow: hidden;
    width: 100%; max-width: 396px;
    background: var(--surface); border-radius: 16px;
    padding: 34px 26px 26px; box-shadow: 0 24px 60px -18px rgba(6, 10, 20, .6);
}
/* Giriş kartının üstünde altın renk bandı */
.auth-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--altin), var(--altin-acik), var(--altin));
}
.auth-mark {
    width: 54px; height: 54px; border-radius: 14px;
    background: linear-gradient(145deg, #22314F, #101B30);
    border: 1px solid rgba(226, 195, 120, .55);
    display: grid; place-items: center; color: #E5C878; margin: 0 auto 16px;
    box-shadow: 0 8px 20px -6px rgba(12, 21, 36, .55);
}
.auth-mark .ico { width: 28px; height: 28px; }
.auth-card h1 { font-size: 21px; font-weight: 700; text-align: center; letter-spacing: -.03em; }
.auth-card .sub { font-size: 14px; color: var(--text-muted); text-align: center; margin: 5px 0 22px; }
.auth-form { display: grid; gap: 14px; }
.auth-foot { text-align: center; font-size: 12px; color: var(--text-muted); margin-top: 18px; }

/* ---------------------------------------------------------
   Toast bildirimleri — tarayıcının alert() penceresi yerine
   --------------------------------------------------------- */
.toast-kutu {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(var(--tab-h) + 18px + env(safe-area-inset-bottom));
    z-index: 95; display: flex; flex-direction: column; gap: 8px;
    width: min(420px, calc(100vw - 28px)); pointer-events: none;
}
@media (min-width: 900px) { .toast-kutu { bottom: 24px; } }
.toast {
    display: flex; align-items: flex-start; gap: 10px;
    background: var(--surface); border: 1px solid var(--border);
    border-left: 4px solid var(--brand); border-radius: var(--r);
    padding: 12px 15px; box-shadow: var(--sh-lg);
    font-size: 13.5px; font-weight: 600; color: var(--text);
    animation: toastGir .24s cubic-bezier(.22, 1, .36, 1);
}
.toast.ok    { border-left-color: var(--ok); }
.toast.hata  { border-left-color: var(--danger); }
.toast.uyari { border-left-color: var(--warn); }
.toast.cikiyor { opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; }
@keyframes toastGir { from { opacity: 0; transform: translateY(10px); } }

/* İşlem sürerken buton kilitlenir — aynı kayıt iki kez gönderilmez */
.btn.bekliyor { pointer-events: none; opacity: .75; }
.btn.bekliyor::after {
    content: ''; width: 15px; height: 15px; margin-left: 8px; flex: none;
    border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
    animation: donme .7s linear infinite;
}
@keyframes donme { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .btn.bekliyor::after { animation: none; border-top-color: currentColor; opacity: .5; }
}

/* =========================================================
   MASAÜSTÜ
   ========================================================= */
@media (min-width: 900px) {
    .app { display: grid; grid-template-columns: 254px minmax(0, 1fr); }

    .topbar { display: none; }
    .tabbar { display: none; }
    .sheet-bg { display: none !important; }

    .sidebar {
        display: flex; flex-direction: column;
        position: sticky; top: 0; height: 100vh; height: 100dvh;
        color: #fff; padding: 16px 12px 12px;
        overflow-y: auto; overscroll-behavior: contain;
        /* Derinlikli lacivert panel + sağ kenarda altın hat */
        background:
            radial-gradient(420px 300px at 20% -4%, rgba(214, 163, 58, .09), transparent 62%),
            linear-gradient(180deg, #101F38 0%, #0C1729 46%, #0A1424 100%);
        border-right: 1px solid rgba(200, 155, 74, .16);
        box-shadow: 1px 0 0 rgba(0, 0, 0, .3), 6px 0 26px -14px rgba(0, 0, 0, .55);
    }
    /* İnce, zarif kaydırma çubuğu */
    .sidebar::-webkit-scrollbar { width: 5px; }
    .sidebar::-webkit-scrollbar-thumb { background: rgba(200, 155, 74, .3); border-radius: 99px; }
    .sidebar::-webkit-scrollbar-track { background: transparent; }

    /* Marka bloğu — cam panel, altında altın hairline */
    .sidebar .brand {
        position: relative; font-size: 16.5px;
        margin: 0 2px 18px; padding: 12px 12px 15px;
        border-radius: 14px;
        background: linear-gradient(150deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
        border: 1px solid rgba(255, 255, 255, .07);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    }
    .sidebar .brand::after {
        content: ''; position: absolute; left: 12px; right: 12px; bottom: 9px;
        height: 2px; border-radius: 99px;
        background: linear-gradient(90deg, var(--altin), var(--altin-acik) 30%, transparent 88%);
    }
    .sidebar .brand-mark {
        width: 34px; height: 34px; border-radius: 10px;
        background: linear-gradient(145deg, #1B3055, #0E1D33);
        border: 1px solid rgba(226, 195, 120, .5);
        color: var(--altin-acik);
        box-shadow: 0 2px 10px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .08);
    }

    .nav-group { margin-bottom: 14px; }
    /* Kategori başlığı — okunur boyut, ölçülü harf aralığı, açık renk */
    .nav-title {
        position: relative;
        font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
        color: #A8B5C9;
        padding: 9px 10px 9px 13px;
        display: flex; align-items: center; gap: 9px;
        cursor: pointer; list-style: none; user-select: none;
        border-radius: 8px; transition: background .15s, color .15s;
    }
    .nav-title::-webkit-details-marker { display: none; }
    .nav-title:hover { background: rgba(255, 255, 255, .05); color: #E6EAF2; }
    /* Sol kenardaki kısa altın işaret */
    .nav-title i {
        position: absolute; left: 0; top: 50%; transform: translateY(-50%);
        width: 3px; height: 13px; border-radius: 0 2px 2px 0; flex: none;
        background: linear-gradient(180deg, var(--altin-acik), var(--altin));
        opacity: .85;
    }
    /* Sıra: işaret · başlık · ayraç çizgisi · ok */
    .nav-title span { flex: none; order: 1; }
    .nav-title::after {
        content: ''; order: 2; flex: 1 1 auto; height: 1px; margin: 0 4px;
        background: linear-gradient(90deg, rgba(200, 155, 74, .3), rgba(200, 155, 74, .04));
    }
    .nav-ac { order: 3; flex: none; opacity: .5; transform: rotate(90deg); transition: transform .18s; width: 13px; height: 13px; }
    details.nav-group:not([open]) .nav-ac { transform: rotate(0deg); }
    /* Gruplar arası nefes payı */
    details.nav-group + details.nav-group { margin-top: 4px; }
    /* Menü satırı — ikon kendi kutusunda, dokunma alanı geniş */
    .nav-link {
        position: relative;
        display: flex; align-items: center; gap: 11px;
        padding: 9px 11px; border-radius: 11px;
        color: #B7C2D3; font-size: 14.5px; font-weight: 500; letter-spacing: -.01em;
        border: 1px solid transparent;
        transition: background .16s, color .16s, border-color .16s;
    }
    .nav-link .ico {
        width: 30px; height: 30px; flex: none; padding: 5.5px;
        border-radius: 9px; box-sizing: border-box;
        background: rgba(255, 255, 255, .05);
        color: #93A0B6;
        transition: background .16s, color .16s;
    }
    .nav-link:hover {
        background: rgba(255, 255, 255, .05);
        border-color: rgba(255, 255, 255, .07);
        color: #E6EAF2;
    }
    .nav-link:hover .ico { background: rgba(200, 155, 74, .14); color: var(--altin-acik); }

    /* Aktif sayfa — altın çerçeveli cam panel, solda altın şerit */
    .nav-link.on {
        background: linear-gradient(120deg, rgba(200, 155, 74, .16), rgba(200, 155, 74, .05) 62%, transparent);
        border-color: rgba(200, 155, 74, .34);
        color: #FFF6E2; font-weight: 600;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07),
                    0 4px 14px -6px rgba(169, 119, 28, .5);
    }
    .nav-link.on::before {
        content: ''; position: absolute; left: -1px; top: 50%; transform: translateY(-50%);
        width: 3px; height: 22px; border-radius: 0 3px 3px 0;
        background: linear-gradient(180deg, var(--altin-acik), var(--altin));
    }
    .nav-link.on .ico {
        background: linear-gradient(145deg, rgba(233, 198, 109, .3), rgba(200, 155, 74, .14));
        color: var(--altin-acik);
    }
    .nav-link + .nav-link { margin-top: 3px; }

    /* Alt bölüm — kullanıcı kartı ve çıkış */
    .side-foot {
        margin-top: auto; padding-top: 12px;
        border-top: 1px solid rgba(255, 255, 255, .07);
    }
    .side-user {
        display: flex; align-items: center; gap: 11px;
        margin-bottom: 8px; padding: 11px 12px; border-radius: 13px;
        background: linear-gradient(150deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
        border: 1px solid rgba(255, 255, 255, .07);
    }
    .side-user .avatar {
        width: 36px; height: 36px;
        background: linear-gradient(145deg, #1B3055, #0E1D33);
        color: var(--altin-acik);
        border: 1px solid rgba(226, 195, 120, .5);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    }
    .side-user-name { font-size: 13.5px; font-weight: 600; color: #EDF1F7; line-height: 1.35; }
    .side-user-role {
        display: inline-block; margin-top: 3px;
        font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
        color: var(--altin-acik);
        background: rgba(200, 155, 74, .14);
        border: 1px solid rgba(200, 155, 74, .28);
        padding: 1px 7px; border-radius: 5px;
    }
    .side-out {
        display: flex; align-items: center; gap: 11px;
        padding: 10px 12px; border-radius: 11px;
        font-size: 14px; font-weight: 600; color: #93A0B6;
        border: 1px solid transparent;
        transition: background .16s, color .16s, border-color .16s;
    }
    .side-out .ico { width: 17px; height: 17px; }
    .side-out:hover {
        background: rgba(239, 98, 98, .12); color: #FF9B9B;
        border-color: rgba(239, 98, 98, .28);
    }

    .content { padding: 30px 34px 44px; max-width: 1320px; }
    .page-head { margin-bottom: 22px; }
    .page-head h1 { font-size: 24px; }

    .stats { grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }
    .stats-5 { grid-template-columns: repeat(5, 1fr); }
    /* Masaüstünde dikey ve ferah */
    .stat { padding: 18px; flex-direction: column; align-items: flex-start; gap: 0; border-radius: var(--r-lg); }
    .stat-yazi { width: 100%; }
    .stat-icon { margin-bottom: 11px; }
    .stat-value { font-size: 30px; }
    .stat-label { font-size: 12.5px; margin-top: 5px; }

    .form-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .form-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
    .form-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

    .rental-grid { grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 16px; }

    .modal { align-items: center; padding: 24px; }
    .modal-panel { max-width: 440px; border-radius: 14px; max-height: 84vh; animation: pop .2s ease; }
    @keyframes pop { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } }
}

@media (min-width: 1180px) {
    .rental-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
}

/* ---------------------------------------------------------
   Dar ekran standardı: TÜM formlar ve açılır pencereler
   kiralama formuyla aynı ölçüde. Dosyanın en sonunda durur;
   üstteki temel kuralları bilinçli olarak ezer.
   Girdi yazısı 16px kalır — küçülürse iOS odaklanınca
   sayfayı zorla yakınlaştırır.
   --------------------------------------------------------- */
@media (max-width: 759px) {
    /* Form öğeleri — her sayfada aynı */
    .field label, .lbl { font-size: 12px; margin-bottom: 4px; }
    .field .hint { font-size: 10.5px; margin-top: 3px; }
    .input, select.input { height: 41px; padding: 0 11px; border-radius: 8px; }
    textarea.input { height: auto; min-height: 64px; padding: 9px 11px; }
    select.input { padding-right: 34px; background-position: right 9px center; }
    .form-grid { gap: 10px; }
    .foto-btn { height: 38px; padding: 0 11px; font-size: 12px; gap: 6px; }
    .alt-baslik { font-size: 10.5px; padding-top: 12px; }
    .pencere-islem { gap: 8px; margin-top: 10px; }

    /* Düğmeler — pencere ve form içinde aynı boy */
    .btn { height: 42px; padding: 0 15px; font-size: 13.5px; }
    .btn-sm { height: 33px; padding: 0 11px; font-size: 12.5px; }

    /* Açılır pencereler (tüm modaller) */
    .modal-head { padding: 9px 15px 10px; }
    .modal-head h3 { font-size: 14.5px; }
    .modal-x { width: 29px; height: 29px; }
    .modal-body { padding: 4px 15px 16px; }
    .dl-row { padding: 9px 0; gap: 12px; }
    .dl-block { padding: 9px 0; }
    .dl-row dt, .dl-block dt { font-size: 12px; }
    .dl-row dd, .dl-block dd { font-size: 13px; }
    .onay-mesaj { font-size: 13.5px; }
    .onay-alt { margin-top: 14px; gap: 8px; }

    /* Kiralama formunun numaralı bölümleri */
    .kir-form { gap: 9px; }
    .form-bolum { border-radius: 12px; }
    .bolum-bas { padding: 9px 12px; gap: 9px; }
    .bolum-no { width: 21px; height: 21px; font-size: 11px; }
    .bolum-yazi h3 { font-size: 13px; line-height: 1.25; }
    .bolum-yazi p  { font-size: 11px; line-height: 1.3; margin-top: 2px; }
    .bolum-icerik { padding: 11px 12px 13px; }
    .bolum-icerik > .form-grid { gap: 10px; }
    .arac-liste { max-height: 210px; }

    .donus-kutu { padding: 9px 11px; gap: 9px; border-radius: 9px; }
    .donus-kutu .ico { width: 18px; height: 18px; }
    .donus-etiket { font-size: 9.5px; }
    .donus-deger { font-size: 14px; }

    .kir-alt .btn { height: 46px; font-size: 14.5px; }
    .kir-alt .btn-ghost { height: 41px; font-size: 13.5px; }
}

/* ---------------------------------------------------------
   WhatsApp Bildirim sayfası
   --------------------------------------------------------- */
/* Katlanır kart: başlığa basınca açılır/kapanır */
details.card > summary { list-style: none; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary.card-head { cursor: pointer; user-select: none; }
details.card > summary.card-head:hover h2 { color: var(--brand); }
.katla-ok { margin-left: auto; color: var(--text-muted); transition: transform .2s; flex: none; }
.katla-sag { display: flex; align-items: center; gap: 8px; }
details[open] .katla-ok { transform: rotate(90deg); }

/* Uyarı satırları — plaka, belge, kalan gün */
.uyari-satir {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 11px 0; border-bottom: 1px solid var(--border);
}
.uyari-satir:last-child { border-bottom: none; }
.uyari-arac { min-width: 0; flex: 1 1 180px; }
.uyari-plaka {
    display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700; font-size: 14px; letter-spacing: .03em;
}
.uyari-model { display: block; font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.uyari-belge { flex: 0 1 auto; font-size: 13px; font-weight: 600; color: var(--text-soft); }
.uyari-tarih { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Alıcı satırı */
.alici-satir {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    padding: 11px 0; border-bottom: 1px solid var(--border);
}
.alici-satir:last-child { border-bottom: none; }
.alici-bilgi { flex: 1; min-width: 170px; }
.alici-tel {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px; color: var(--text-muted); letter-spacing: .02em;
}

/* Sistemde olan kullanıcı — nabız atan yeşil nokta */
.canli-nokta {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: currentColor; margin-right: 5px; vertical-align: 1px;
    animation: canliNabiz 1.6s ease-in-out infinite;
}
@keyframes canliNabiz {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

/* Kullanıcı listesi — avatar + bilgi + oturum + işlemler */
.kul-satir {
    display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
    padding: 13px 0; border-bottom: 1px solid var(--border);
}
.kul-satir:last-child { border-bottom: none; }
.kul-avatar {
    width: 42px; height: 42px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: var(--brand-soft); color: var(--brand);
    font-weight: 700; font-size: 14.5px; letter-spacing: .02em;
}
.kul-avatar.yonetici {
    background: linear-gradient(135deg, rgba(233,198,109,.30), rgba(200,155,74,.16));
    color: var(--altin-koyu);
}
.kul-avatar.pasif { background: var(--surface-2); color: var(--text-muted); }
.kul-bilgi { flex: 1 1 190px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kul-bilgi .badge { align-self: flex-start; }
.kul-ad { font-weight: 700; letter-spacing: -.01em; }
.kul-kadi {
    font-size: 12px; color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0;
}
.kul-oturum { flex: 1 1 180px; font-size: 12.5px; }
.kul-islem { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
@media (max-width: 700px) {
    .kul-oturum { flex-basis: 100%; padding-left: 55px; }
    .kul-islem  { padding-left: 55px; }
}

/* Üçlü özet satırı (Kullanıcılar, Şubeler) — dar ekranda kompakt */
.stats-uc { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 500px) {
    .stats-uc { gap: 7px; }
    .stats-uc .stat { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; }
    .stats-uc .stat-icon { width: 28px; height: 28px; border-radius: 8px; }
    .stats-uc .stat-icon .ico { width: 15px; height: 15px; }
    .stats-uc .stat-value { font-size: 18px; }
    .stats-uc .stat-label { font-size: 9.5px; line-height: 1.2; }
}

/* Kullanıcı/şube satırları — dar ekranda avatar solda sabit,
   tüm içerik onun hizasında tek kolonda akar */
@media (max-width: 700px) {
    .kul-satir {
        display: grid; grid-template-columns: 36px 1fr;
        gap: 3px 11px; padding: 11px 0; align-items: start;
    }
    .kul-avatar { width: 36px; height: 36px; font-size: 12.5px; grid-row: 1 / span 3; margin-top: 2px; }
    .kul-bilgi  { grid-column: 2; gap: 3px; }
    .kul-ad     { font-size: 14px; }
    .kul-kadi   { font-size: 10.5px; overflow-wrap: anywhere; line-height: 1.45; }
    .kul-oturum { grid-column: 2; padding-left: 0; flex-basis: auto; font-size: 11.5px; margin-top: 2px; }
    .kul-oturum .hint { font-size: 10.5px; }
    .kul-islem  { grid-column: 2; padding-left: 0; margin-top: 5px; }
}

/* Tarih etiketi tek satırda kalır — kart yükseklikleri eşitlenir */
.kutu-etiket.tek-satir { white-space: nowrap; overflow: hidden; letter-spacing: -.015em; }

/* ---------------------------------------------------------
   Kart ızgarası — tüm sayfalarda ortak mobil düzeni
   --------------------------------------------------------- */
/* Üst satır: model tek satırda kısalır (…), şube rozeti hep tam görünür */
.kutular .kutu-ust { flex-wrap: nowrap; align-items: center; }
.kutular .kutu-model {
    flex: 1 1 auto; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kutular .kutu-ust .badge { flex: none; }

/* Not en fazla iki satır — kartlar eşit boyda kalır */
.kutular .kutu-not {
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}

/* Sayfa başlığındaki buton + sayı karesi dar ekranda yan yana durur */
@media (max-width: 700px) {
    .islem-yigin { flex-direction: row; align-items: center; gap: 8px; }
}

/* Km iste/yenile düğmesi — kutunun yanında durur */
.km-satir { display: flex; gap: 7px; }
.km-satir .input { flex: 1 1 auto; min-width: 0; }
.km-iste {
    flex: none; width: 46px; height: 46px; border-radius: 9px;
    border: 1px solid var(--border-strong); background: var(--surface);
    color: var(--text-soft); display: grid; place-items: center; cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.km-iste:hover { border-color: var(--brand); color: var(--brand); }
.km-iste:disabled { opacity: .5; pointer-events: none; }
.km-iste.donuyor .ico { animation: kmDon 0.9s linear infinite; }
@keyframes kmDon { to { transform: rotate(360deg); } }
@media (max-width: 759px) { .km-iste { width: 41px; height: 41px; border-radius: 8px; } }

/* Bakım ilerleme çubuğu — aralığın ne kadarı kullanıldı */
.bakim-cubuk {
    display: block; height: 6px; border-radius: 99px;
    background: var(--surface-2); overflow: hidden; margin-top: 6px; max-width: 260px;
}
.bakim-dolu { display: block; height: 100%; border-radius: 99px; background: var(--ok); transition: width .3s; }
.bakim-dolu.yakin { background: var(--warn); }
.bakim-dolu.tasti { background: var(--danger); }

/* Bakım sayfası — canlı km satırları */
.bk-satir {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 13px 10px; border-bottom: 1px solid var(--border);
    border-left: 3px solid transparent; border-radius: 0 10px 10px 0;
}
.bk-satir:last-child { border-bottom: none; }
/* Bakımı gelen/geçen araç — turuncu vurgu, listenin başında durur */
.bk-satir.bk-dikkat {
    border-left-color: var(--warn);
    background: linear-gradient(90deg, rgba(234, 88, 12, .07), transparent 70%);
}
.kul-avatar.bk-turuncu { background: rgba(234, 88, 12, .16); color: var(--warn); }
.bk-kimlik { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bk-km { flex: 0 0 auto; text-align: right; min-width: 110px; }
.bk-km-deger {
    display: block; font-size: 22px; font-weight: 750; letter-spacing: -.03em;
    font-variant-numeric: tabular-nums; line-height: 1.1;
}
.bk-km-deger small { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.bk-km-tarih { display: block; margin-top: 2px; }
.bk-donem { flex: 1 1 210px; font-size: 12.5px; }
@media (max-width: 760px) {
    .bk-satir { gap: 8px 12px; padding: 11px 8px; }
    .bk-km { order: 2; text-align: left; }
    .bk-km-deger { font-size: 19px; }
    .bk-kimlik { flex-basis: 100%; order: 1; }
    .bk-donem { flex-basis: 100%; order: 3; }
    .bk-satir .kul-islem { order: 4; }
    .bk-satir .kul-avatar { display: none; }
}

/* ---------------------------------------------------------
   Bakım tablosu — her araç kendi çerçeveli satır kutusunda.
   (Önceki bk-satir akış kuralları burada bilinçli ezilir.)
   --------------------------------------------------------- */
.bk-baslik {
    display: none;
    padding: 4px 14px 8px; margin: 0 0 2px;
    font-size: 11px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-muted);
}
.bk-satir {
    display: grid; grid-template-columns: 1fr; gap: 9px;
    border: 1px solid var(--border-strong); border-left: 4px solid var(--border-strong);
    border-radius: 12px; background: var(--surface);
    padding: 12px 14px; margin: 0 0 10px; box-shadow: var(--sh-sm);
}
.bk-satir:last-of-type { margin-bottom: 2px; }
.bk-satir.bk-dikkat {
    border-color: var(--warn); border-left-color: var(--warn);
    background: linear-gradient(90deg, rgba(234, 88, 12, .06), var(--surface) 55%);
}
.bk-kimlik { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bk-km { text-align: left; min-width: 0; }
.bk-donem { font-size: 12.5px; min-width: 0; }
.bk-islem { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }

/* Dar ekran: bölümler kesikli çizgiyle ayrılır — iç içe girme biter */
@media (max-width: 859px) {
    .bk-km, .bk-donem, .bk-islem {
        border-top: 1px dashed var(--border); padding-top: 9px;
    }
}

/* Geniş ekran: sütunlu tablo düzeni */
@media (min-width: 860px) {
    .bk-baslik,
    .bk-satir {
        grid-template-columns: minmax(0, 1fr) 150px 250px max-content;
        column-gap: 18px; align-items: center;
    }
    .bk-baslik { display: grid; }
    .bk-km { text-align: right; }
    .bk-baslik span:nth-child(2) { text-align: right; }
    .bk-islem { justify-content: flex-end; }
    .bk-baslik span:last-child { text-align: right; }
}

/* Bakım satırı üst çizgisi: plaka bölünmez, rozet gerekirse alta iner */
.bk-adsatir { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.bk-plaka {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .03em; white-space: nowrap; font-weight: 700;
}
@media (min-width: 860px) {
    .bk-baslik,
    .bk-satir { grid-template-columns: minmax(0, 1fr) 135px 225px max-content; column-gap: 14px; }
}

/* Dar ekranda bakım kutusu iç sırası: kimlik → km → dönem → butonlar */
@media (max-width: 859px) {
    .bk-kimlik { order: 1; }
    .bk-km     { order: 2; }
    .bk-donem  { order: 3; }
    .bk-islem  { order: 4; }
}

/* Bakım tablosu: dönem kolonu pencereye taşındı — iki kolonlu düzen */
@media (min-width: 860px) {
    .bk-baslik,
    .bk-satir { grid-template-columns: minmax(0, 1fr) 190px max-content; }
}
/* Km altındaki dönem aralığı — küçük yazı: başlangıç – bugün */
.bk-aralik {
    display: block; margin-top: 2px;
    font-size: 10.5px; color: var(--text-muted); letter-spacing: -.01em;
    white-space: nowrap;
}
/* Bakımı GEÇEN araç — kırmızı çerçeve (yaklaşan turuncu kalır) */
.bk-satir.bk-tasti {
    border-color: var(--danger); border-left-color: var(--danger);
    background: linear-gradient(90deg, rgba(190, 40, 40, .06), var(--surface) 55%);
}

/* Sekmeli üçlü kutucuklar her ekranda ÜÇ EŞİT sütun — tabloyla hizalı */
.stats.stats-sekme { grid-template-columns: repeat(3, 1fr); }

/* Özet kutusundan listeye atlayınca hedef kutu kısa süre parlar */
.bk-flas { outline: 3px solid var(--altin); outline-offset: 2px; transition: outline-color .3s; }

/* Bakım satırı tıklanabilir — pencere açar */
.bk-satir { cursor: pointer; }
.bk-satir .bk-islem { cursor: default; }

/* Bakım kutuları — kurumsal cila */
.bk-satir { transition: box-shadow .16s, border-color .16s; }
.bk-satir:hover { box-shadow: var(--sh); }
.bk-satir:hover .bk-plaka { color: var(--brand); }
.bk-plaka { font-size: 14px; }

/* Km girilmemiş araç — dokunulabilir kesikli rozet */
.bk-km-bos {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 13px; border: 1.5px dashed var(--border-strong); border-radius: 10px;
    font-size: 12px; font-weight: 600; color: var(--text-muted);
    transition: border-color .15s, color .15s;
}
.bk-satir:hover .bk-km-bos { border-color: var(--brand); color: var(--brand); }
@media (min-width: 860px) { .bk-km .bk-km-bos { float: right; } }

/* ===== Yakıt göstergesi (teslim / iade pencereleri) ===== */
.yakit-kutu {
    border: 1px solid var(--border); border-radius: 14px;
    padding: 14px 16px 12px; display: flex; flex-direction: column;
    align-items: center; gap: 8px;
}
.yakit-svg { width: 154px; height: 101px; cursor: pointer; touch-action: none; }
.yakit-surgu {
    -webkit-appearance: none; appearance: none;
    width: 100%; max-width: 220px; height: 8px; border-radius: 99px;
    background: linear-gradient(90deg, #e0524a 0%, #e8a13c 50%, #2f9e63 100%);
    outline: none; cursor: pointer;
}
.yakit-surgu::-webkit-slider-thumb {
    -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
    background: #fff; border: 2px solid #b9c0cc;
    box-shadow: 0 1px 5px rgba(15, 23, 42, .28); cursor: pointer;
}
.yakit-surgu::-moz-range-thumb {
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff; border: 2px solid #b9c0cc;
    box-shadow: 0 1px 5px rgba(15, 23, 42, .28); cursor: pointer;
}
.yakit-etiket { text-align: center; display: flex; flex-direction: column; gap: 1px; min-height: 36px; }
.yakit-deger { font-size: 15px; font-weight: 700; line-height: 1.25; transition: color .2s; }
.yakit-oran { font-size: 11.5px; color: var(--text-muted); }
.yakit-surgu:disabled { opacity: .35; cursor: not-allowed; }
/* Düzelt kutucuğu — çerçevenin sağ üst köşesinde durur */
.yakit-kutu { position: relative; }
.yakit-duzelt {
    position: absolute; top: 8px; right: 8px;
    padding: 5px 9px;
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 600; line-height: 1;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 9px; color: var(--text-soft); cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.yakit-duzelt:hover { border-color: var(--brand); color: var(--brand); }
.yakit-duzelt .ico { width: 13px; height: 13px; flex: none; }

/* ===== Şubeler: şube seçim kutucuğu ===== */
.sube-secim { align-items: flex-start; }
.sube-btnler { display: flex; flex-wrap: wrap; gap: 7px; }
.sube-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; border-radius: 99px;
    border: 1px solid var(--border); background: var(--surface);
    font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
    color: var(--text-soft); cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.sube-btn b {
    min-width: 21px; padding: 1px 6px; border-radius: 99px;
    background: var(--surface-2); color: var(--text-muted); font-size: 11.5px;
}
.sube-btn:hover { border-color: var(--brand); color: var(--brand); }
.sube-btn.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.sube-btn.on b { background: rgba(255, 255, 255, .22); color: #fff; }

/* ===== İki adımlı doğrulama ===== */
/* Kod girişi — rakamlar iri ve aralıklı, telefonda da rahat okunur */
.ia-kod {
    font-family: ui-monospace, monospace;
    font-size: 22px; font-weight: 700; letter-spacing: .34em;
    text-align: center;
}
.ia-kurulum { display: grid; gap: 20px; align-items: start; }
@media (min-width: 720px) { .ia-kurulum { grid-template-columns: auto 1fr; } }
.ia-qr-kutu {
    background: #fff; border: 1px solid var(--border); border-radius: 12px;
    padding: 10px; display: inline-flex; line-height: 0;
}
.ia-sir {
    display: block; background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 10px; padding: 12px 14px;
    font-family: ui-monospace, monospace; font-size: 15px; font-weight: 700;
    letter-spacing: .08em; word-break: break-all; color: var(--text);
}
/* Yedek kodlar — bir kez gösterilir, kopyalanabilir olsun */
.yedek-liste {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px;
}
.yedek-kod {
    background: var(--surface-2); border: 1px dashed var(--border-strong);
    border-radius: 8px; padding: 9px 10px; text-align: center;
    font-family: ui-monospace, monospace; font-size: 14px; font-weight: 700;
    letter-spacing: .06em; color: var(--text);
}

/* ===== FiloTürk Takip ===== */
/* Kurulum durumu rozetleri — hangi bilgi tamam, hangisi eksik */
.ft-adimlar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ft-adim {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px; border-radius: 99px;
    border: 1px solid var(--border); background: var(--surface-2);
    font-size: 12.5px; font-weight: 600; color: var(--text-muted);
}
.ft-adim .ico { width: 14px; height: 14px; }
.ft-adim.tamam { border-color: rgba(6, 118, 71, .35); background: var(--ok-soft); color: var(--ok); }

/* Dört sekmeli kutucuk şeridi — mobilde 2x2, geniş ekranda tek sıra */
.stats.stats-dort { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .stats.stats-dort { grid-template-columns: repeat(4, 1fr); } }

/* Dönem km kutucukları — tıklanınca ayrıntı penceresi açılır */
.ft-donem {
    display: block; width: 100%; text-align: left; cursor: pointer;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 12px 14px; margin-bottom: 8px;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ft-donem:hover { border-color: var(--brand); box-shadow: 0 2px 10px -6px rgba(31, 61, 109, .5); }
.ft-donem:active { transform: scale(.995); }
.ft-donem-ust { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ft-donem-plaka {
    font-family: ui-monospace, monospace; letter-spacing: .04em;
    font-size: 15px; font-weight: 700; color: var(--text);
}
.ft-donem-km { font-size: 17px; font-weight: 700; color: var(--brand); white-space: nowrap; }
.ft-donem-alt {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    margin-top: 3px; font-size: 12.5px; color: var(--text-muted);
}
.ft-donem-ara { font-weight: 600; color: var(--text-soft); white-space: nowrap; }
.ft-donem-canli {
    display: block; margin-top: 7px; padding-top: 7px;
    border-top: 1px dashed var(--border);
    font-size: 12px; color: var(--text-muted);
}
.ft-donem-canli strong { color: var(--text-soft); }
@media (max-width: 560px) {
    .ft-donem-alt { flex-direction: column; gap: 2px; }
    .ft-donem-ara { white-space: normal; }
}

/* Eşleştirme satırındaki km değeri */
.ft-km { display: block; font-size: 13.5px; font-weight: 700; color: var(--text); }

/* Cihaz no girişi + Kaydet — dar ekranda alt alta düşer */
.ft-esle-form { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.ft-esle-form .input { height: 36px; font-size: 13px; border-radius: 9px; max-width: 150px; }
@media (max-width: 720px) {
    .ft-esle-form { width: 100%; }
    .ft-esle-form .input { max-width: none; flex: 1 1 120px; }
}

/* Profil fotoğrafı — avatar dairesini tamamen kaplar */
.kul-avatar.fotolu, .avatar.fotolu { padding: 0; overflow: hidden; background: var(--surface-2); }
.kul-avatar.fotolu img, .avatar.fotolu img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;
}

/* Sanayi not geçmişi — her kayıt ayrı satırda, en yeni üstte */
.sny-not {
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--r-sm); padding: 8px 10px;
    font-size: 13px; line-height: 1.5; color: var(--text-soft);
    word-break: break-word;
}
.sny-not + .sny-not { margin-top: 6px; }

/* =========================================================
   Kompakt kutucuk şeridi (.stats-mini)
   Yönetim sayfalarında kutucuklar bilgi kartı değil, kısa
   özet/sekme görevi görür — bu yüzden küçük ve yatay durur,
   ekranı boydan boya kaplamaz. Panel gibi sayfalar etkilenmez.
   ========================================================= */
.stats.stats-mini { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; }

.stats-mini .stat {
    padding: 10px 12px; border-radius: 11px;
    flex-direction: row; align-items: center; gap: 10px;
}
.stats-mini .stat-icon { width: 32px; height: 32px; border-radius: 9px; margin-bottom: 0; }
.stats-mini .stat-icon .ico { width: 17px; height: 17px; }
.stats-mini .stat-value { font-size: 20px; }
.stats-mini .stat-label { font-size: 11px; margin-top: 0; }
.stats-mini .sekme-stat.on { padding: 9px 11px; }   /* kalın kenarlık boyu oynatmasın */

/* Geniş ekran: kutucuklar sayfa genişliğine göre eşit paylaşılır.
   auto-fill kullanılır — tek kutucuk varsa sayfayı boydan boya germez,
   kendi sütununda durur. */
@media (min-width: 900px) {
    .stats.stats-mini {
        grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
        gap: 12px; margin-bottom: 18px;
    }
    .stats-mini .stat { padding: 14px 17px; border-radius: 12px; gap: 12px; }
    .stats-mini .stat-icon { width: 36px; height: 36px; border-radius: 10px; }
    .stats-mini .stat-icon .ico { width: 19px; height: 19px; }
    .stats-mini .stat-value { font-size: 24px; }
    .stats-mini .stat-label { font-size: 11.5px; }
    .stats-mini .sekme-stat.on { padding: 13px 16px; }
    /* Şube butonları kutucuğu iki sütun kaplar — butonlar tek sırada dursun */
    .stats-mini .sube-secim { grid-column: span 2; }
}

/* Dar ekranda şube butonları kutucuğu tam satır kaplar — butonlar
   alt alta düşüp kutuyu uzatmasın, yan yana sığsın. */
@media (max-width: 899px) {
    .stats-mini .sube-secim { grid-column: 1 / -1; }
    .sube-btn { padding: 6px 11px; font-size: 12px; }
}

/* ===== Kullanıcı yetkileri ===== */
/* Rol açıklamaları — kullanıcı ekleme formunun altında */
.rol-aciklama { margin-top: 12px; font-size: 12.5px; line-height: 1.7; color: var(--text-muted); }
.rol-aciklama p { margin: 0 0 3px; }
.rol-aciklama strong { color: var(--text-soft); }

/* Sayfa izni kutucukları */
.izin-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 6px; }
.izin-kutu {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px;
    background: var(--surface-2); font-size: 12.5px; cursor: pointer;
    transition: border-color .15s, background .15s;
}
.izin-kutu:hover { border-color: var(--border-strong); }
.izin-kutu input { accent-color: var(--brand); flex: none; }
.izin-kutu span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* İşlem izinleri — açıklamalar uzun olduğu için tam satır, kırpılmadan */
.izin-liste-genis { grid-template-columns: 1fr; }
.izin-liste-genis .izin-kutu { align-items: flex-start; }
.izin-liste-genis .izin-kutu span { white-space: normal; overflow: visible; line-height: 1.5; }
@media (min-width: 760px) {
    .izin-liste-genis { grid-template-columns: repeat(2, 1fr); }
}

/* İşaretli izin gözle görülür olsun */
.izin-kutu:has(input:checked) {
    border-color: var(--brand);
    background: color-mix(in srgb, var(--brand) 10%, var(--surface-2));
}
.izin-kutu:has(input:checked) span { color: var(--text); font-weight: 600; }

/* ===== Yetki penceresi — sayfa sayfa izin kutuları ===== */
.izin-ust {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.izin-ust .hint { flex: 1 1 260px; margin: 0; }
.izin-ust-dugme { display: flex; gap: 6px; flex: none; }

.izin-sayfalar { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 820px) { .izin-sayfalar { grid-template-columns: repeat(2, 1fr); } }

.izin-sayfa {
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface); overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.izin-sayfa:has(.izin-sayfa-kutusu:checked) {
    border-color: var(--brand);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 35%, transparent);
}

/* Kutu başlığı — sayfanın kendisini açan tik */
.izin-sayfa-bas {
    display: flex; align-items: center; gap: 9px; cursor: pointer;
    padding: 10px 12px; background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-size: 13px; font-weight: 700; color: var(--text-soft);
}
.izin-sayfa-bas input { accent-color: var(--brand); flex: none; }
.izin-sayfa:has(.izin-sayfa-kutusu:checked) .izin-sayfa-bas { color: var(--text); }
.izin-sayfa-acik .izin-sayfa-bas { cursor: default; }
.izin-rozet {
    margin-left: auto; flex: none; font-style: normal; font-size: 10.5px;
    font-weight: 600; letter-spacing: .3px; text-transform: uppercase;
    padding: 2px 7px; border-radius: 999px;
    background: var(--surface-3, rgba(255,255,255,.06)); color: var(--text-muted);
}

/* Kutunun içindeki işlem tikleri */
.izin-islemler { display: grid; gap: 5px; padding: 9px 12px 11px; }
.izin-islemler .izin-kutu { padding: 7px 9px; border-radius: 8px; font-size: 12px; }
.izin-islemler .izin-kutu span { white-space: normal; overflow: visible; line-height: 1.45; }
.izin-bos { font-size: 11.5px; color: var(--text-muted); font-style: italic; }

/* Sayfa kapalıyken içindeki işlemler soluk görünür — bilgi amaçlı, kilitli değil */
.izin-sayfa:not(.izin-sayfa-acik):not(:has(.izin-sayfa-kutusu:checked)) .izin-islemler { opacity: .5; }


/* ===== Yetki penceresi — yan menüdeki gruplarla aynı bölüm başlıkları ===== */
.izin-grup {
    display: flex; align-items: center; gap: 9px;
    margin: 16px 0 8px;
    font-size: 11px; font-weight: 800; letter-spacing: .09em;
    text-transform: uppercase; color: var(--text-muted);
}
.izin-grup:first-of-type { margin-top: 4px; }
.izin-grup i {
    width: 3px; height: 13px; border-radius: 2px; flex: none;
    background: linear-gradient(180deg, var(--altin-acik, #E9C66D), var(--altin, #C89B4A));
}
.izin-grup::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--border), transparent);
}

/* Kutu başlığı — sayfa adı üstte, kısa açıklama altında */
.izin-sayfa-bas { align-items: flex-start; }
.izin-sayfa-bas > input { margin-top: 3px; }
.izin-sayfa-ad { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.izin-sayfa-ad > span { line-height: 1.3; }
.izin-sayfa-ad small {
    font-size: 11px; font-weight: 500; letter-spacing: 0;
    color: var(--text-muted); line-height: 1.35; text-transform: none;
}
.izin-rozet { margin-top: 2px; }

/* ===== Yetki penceresi — kutucuk tikleri ve bölüm toplu tiki ===== */
.izin-grup { cursor: pointer; }
.izin-grup-kutusu { accent-color: var(--brand); flex: none; margin: 0; }

.izin-alt-etiket {
    display: block; margin: 4px 0 1px;
    font-size: 10px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--text-muted);
}
.izin-alt-etiket:first-child { margin-top: 0; }

/* ===== WhatsApp — uyarı türü seçimi, gruplu kutucuklar ===== */
.wsp-tur-grup { margin: 12px 0 7px; }
.wsp-tur-grup:first-of-type { margin-top: 8px; }
.wsp-tur-liste { grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 7px; }
.wsp-tur-kutu { align-items: flex-start; padding: 9px 11px; border-radius: 10px; }
.wsp-tur-kutu input { margin-top: 2px; }
.wsp-tur-ad { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wsp-tur-kutu .wsp-tur-ad > span {
    white-space: normal; overflow: visible;
    font-weight: 600; font-size: 12.5px; line-height: 1.3;
}
.wsp-tur-kutu .wsp-tur-ad small {
    white-space: normal; overflow: visible;
    font-size: 11px; font-weight: 500; color: var(--text-muted); line-height: 1.35;
}

/* ===== WhatsApp — alıcı listesi, kurumsal satırlar ===== */
.alici-satir {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 13px 2px; border-bottom: 1px solid var(--border);
}
.alici-satir:last-child { border-bottom: 0; }
.alici-satir.kapali { opacity: .6; }

.alici-simge {
    width: 36px; height: 36px; flex: none; margin-top: 2px;
    display: grid; place-items: center; border-radius: 11px;
    background: color-mix(in srgb, var(--brand) 12%, var(--surface-2));
    color: var(--brand);
}
.alici-satir.kapali .alici-simge { background: var(--surface-2); color: var(--text-muted); }

.alici-bilgi { flex: 1; min-width: 170px; display: flex; flex-direction: column; gap: 3px; }
.alici-ust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.alici-ust strong { font-size: 14px; }
.alici-tel { font-family: ui-monospace, monospace; font-size: 12px; color: var(--text-muted); letter-spacing: .03em; }
.alici-turler { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }

.alici-islem { display: flex; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; align-self: center; }
.alici-islem form { display: inline; }

@media (max-width: 640px) {
    .alici-satir { flex-wrap: wrap; }
    .alici-islem { width: 100%; justify-content: flex-start; padding-left: 48px; align-self: auto; }
}

/* Uyarı penceresindeki tür listesi — pencere içinde daha derli toplu */
#uyariModal .wsp-tur-liste { grid-template-columns: 1fr; }
@media (min-width: 700px) {
    #uyariModal .wsp-tur-liste { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Toplam Araç kod penceresi ===== */
@media (min-width: 900px) {
    .modal-panel.modal-dar { max-width: 380px; }
}
/* 4 haneli kod alanı — rakamlar aralıklı ve ortada */
.kod-girdi {
    font-family: ui-monospace, monospace;
    font-size: 26px; font-weight: 700; letter-spacing: .45em;
    text-align: center; padding-left: .45em;   /* harf aralığı sağa kaydırmasın */
}

/* ===== Kod kilidi ekranı — Envanter / Araç Arşivi ===== */
.kod-kilit-kart { max-width: 420px; margin: 26px auto; }
.kod-kilit { text-align: center; padding: 10px 4px 4px; }
.kod-kilit-ikon {
    width: 56px; height: 56px; margin: 0 auto 14px;
    display: grid; place-items: center; border-radius: 16px;
    background: color-mix(in srgb, var(--brand) 12%, var(--surface-2));
    color: var(--brand);
}
.kod-kilit-ikon .ico { width: 26px; height: 26px; }
.kod-kilit h2 { font-size: 17px; margin: 0 0 6px; }
.kod-kilit .hint { margin: 0 auto; max-width: 320px; line-height: 1.6; }
.kod-kilit-alan { margin-top: 18px; text-align: left; }
.kod-kilit-islem { display: grid; gap: 8px; margin-top: 16px; }
.kod-kilit .alert { margin-top: 12px; text-align: left; }

/* Sayı gösterimi kutusu — tek sıra tam genişlik */
.izin-sayfalar:has(.izin-sayfa-genis) { grid-template-columns: 1fr; }
.izin-sayfa-bas-duz { cursor: default; }
.izin-islemler-ikili { grid-template-columns: 1fr; }
@media (min-width: 700px) {
    .izin-islemler-ikili { grid-template-columns: repeat(2, 1fr); }
}

/* Sayı izni yoksa kutucuktaki rakam boş kalır — boş satır yer kaplamasın */
.stat-value:empty { display: none; }

/* Görünüm kısıtları — tik "kapatma" anlamına geldiği için kırmızı çizgi */
.izin-grup-kisit i {
    background: linear-gradient(180deg, var(--danger), color-mix(in srgb, var(--danger) 70%, #000));
}
.izin-sayfa-kisit { border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); }
.izin-sayfa-kisit:has(input:checked) {
    border-color: var(--danger);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 35%, transparent);
}
.izin-sayfa-kisit .izin-kutu:has(input:checked) {
    border-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 10%, var(--surface-2));
}



.iade-yakit-alan { position: relative; }
.iade-rapor {
    position: absolute; top: 0; left: 0; z-index: 2;
    padding: 5px 10px; font-size: 11.5px; gap: 5px;
}
.iade-rapor .ico { width: 14px; height: 14px; }
@media (max-width: 560px) {
    .iade-rapor { position: static; margin-bottom: 8px; display: inline-flex; }
}

/* ===== İade Al penceresi — bölüm düzeni ===== */
.iade-satir { margin-top: 14px; }

/* Kirada yapılan km kutusu — şube seçicisiyle aynı yükseklikte durur */
.iade-km-kutu {
    display: flex; align-items: stretch; gap: 8px;
}
.iade-km-kutu .iade-fark {
    flex: 1; min-height: 42px;
    display: flex; flex-direction: column; justify-content: center;
    padding: 8px 12px; border-radius: 10px; font-size: 13px;
    background: color-mix(in srgb, var(--ok, #1d9a6c) 10%, var(--surface-2));
    border: 1px solid color-mix(in srgb, var(--ok, #1d9a6c) 32%, var(--border));
}
.iade-km-kutu .iade-fark strong { font-size: 16px; line-height: 1.2; }
.iade-km-kutu .iade-fark small { display: block; margin-top: 1px; color: var(--text-muted); font-size: 11px; }
.iade-km-kutu .iade-fark.uyari {
    background: color-mix(in srgb, var(--danger) 8%, var(--surface-2));
    border-color: color-mix(in srgb, var(--danger) 32%, var(--border));
}
/* Yenile düğmesi — kutuyla aynı boyda kare */
.iade-yenile {
    flex: none; width: 42px; min-height: 42px;
    display: grid; place-items: center; cursor: pointer;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface-2); color: var(--text-soft);
    transition: border-color .15s, color .15s;
}
.iade-yenile:hover { border-color: var(--brand); color: var(--brand); }
.iade-yenile:disabled { opacity: .5; cursor: default; }

/* Yakıt bölümü ve rapor satırı — üst üste binmeden, aralıklı */
.iade-yakit-alan { margin-top: 16px; }
.iade-rapor-satir { margin-top: 4px; }
.iade-rapor-satir .hint { margin-top: 6px; text-align: center; }

/* ==========================================================================
   Bakım Geçmişi satırı
   Toplam sayaç ekranda yer almaz; satır tarih/saat + yapılan işlem üzerinedir.
   ========================================================================== */
.bkg-satir {
    display: grid;
    grid-template-columns: 108px 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
}
.bkg-satir:last-of-type { border-bottom: 0; }

.bkg-plaka {
    font-family: ui-monospace, monospace;
    font-size: 13px; font-weight: 700;
    letter-spacing: .03em; color: var(--text);
}

.bkg-is { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bkg-islem {
    font-size: 13.5px; font-weight: 600; color: var(--text);
    overflow-wrap: anywhere;
}
.bkg-islem.bkg-bos { font-weight: 500; color: var(--text-muted); }
.bkg-kisi { font-size: 11.5px; color: var(--text-muted); }

.bkg-fotolar { display: flex; gap: 6px; flex-wrap: wrap; }

/* Tarih üstte, saat altında — göz tarihe önce takılsın */
.bkg-zaman { text-align: right; line-height: 1.35; white-space: nowrap; }
.bkg-tarih { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
.bkg-saat  { display: block; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Dar ekran: plaka ile tarih aynı satırda, işlem altta tam genişlikte */
@media (max-width: 640px) {
    .bkg-satir { grid-template-columns: 1fr auto; gap: 6px 10px; }
    .bkg-is      { grid-column: 1 / -1; }
    .bkg-fotolar { grid-column: 1 / -1; }
    .bkg-zaman   { text-align: right; }
}

/* ==========================================================================
   Cihaz Sorunları — FiloTürk paneli
   Sağlık şeridi + tür başlıkları + araç kartları. Türün rengi tek yerden:
   data-tur özniteliği kart kenarını, başlık noktasını ve şerit rozetini boyar.
   ========================================================================== */
:root {
    --tur-sebeke: var(--danger);
    --tur-sebeke-soft: var(--danger-soft);
    --tur-sinyal: var(--warn);
    --tur-sinyal-soft: var(--warn-soft);
    --tur-uydu: var(--violet);
    --tur-uydu-soft: var(--violet-soft);
    --tur-aku: #8A6D00;
    --tur-aku-soft: #F7F0DC;
}

/* Sağlık şeridi — kartın en üstünde tek bakışta özet */
.ft-serit {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 12px 0 14px;
    border-bottom: 1px solid var(--border);
}
.ft-serit-ok, .ft-serit-oge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px;
    font-size: 12.5px; color: var(--text-soft);
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.ft-serit-ok { color: var(--ok); background: var(--ok-soft); border-color: transparent; }
.ft-serit-ok strong, .ft-serit-oge strong { font-size: 13.5px; }
.ft-serit-oge[data-tur="sebeke"] { color: var(--tur-sebeke); background: var(--tur-sebeke-soft); border-color: transparent; }
.ft-serit-oge[data-tur="sinyal"] { color: var(--tur-sinyal); background: var(--tur-sinyal-soft); border-color: transparent; }
.ft-serit-oge[data-tur="uydu"]   { color: var(--tur-uydu);   background: var(--tur-uydu-soft);   border-color: transparent; }
.ft-serit-oge[data-tur="aku"]    { color: var(--tur-aku);    background: var(--tur-aku-soft);    border-color: transparent; }

/* Tür başlığı — renkli nokta + ad + adet */
.ft-grup-bas {
    display: flex; align-items: baseline; gap: 8px;
    margin: 20px 2px 10px;
}
.ft-grup-bas::before {
    content: ''; align-self: center;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--text-muted);
}
.ft-grup-bas[data-tur="sebeke"]::before { background: var(--tur-sebeke); }
.ft-grup-bas[data-tur="sinyal"]::before { background: var(--tur-sinyal); }
.ft-grup-bas[data-tur="uydu"]::before   { background: var(--tur-uydu); }
.ft-grup-bas[data-tur="aku"]::before    { background: var(--tur-aku); }
.ft-grup-ad {
    font-size: 12px; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase;
    color: var(--text);
}
.ft-grup-adet { font-size: 12px; color: var(--text-muted); }

/* Araç kartı — sol kenar türün renginde, sağda ölçüm sütunu */
.ft-cihaz {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px; align-items: center;
    padding: 13px 16px;
    margin-bottom: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: 12px;
}
.ft-cihaz[data-tur="sebeke"] { border-left-color: var(--tur-sebeke); }
.ft-cihaz[data-tur="sinyal"] { border-left-color: var(--tur-sinyal); }
.ft-cihaz[data-tur="uydu"]   { border-left-color: var(--tur-uydu); }
.ft-cihaz[data-tur="aku"]    { border-left-color: var(--tur-aku); }

.ft-cihaz-ikon {
    width: 38px; height: 38px; flex: none;
    display: grid; place-items: center;
    border-radius: 10px; color: var(--text-soft);
    background: var(--surface-2);
}
.ft-cihaz-ikon .ico { width: 19px; height: 19px; }
.ft-cihaz[data-tur="sebeke"] .ft-cihaz-ikon { color: var(--tur-sebeke); background: var(--tur-sebeke-soft); }
.ft-cihaz[data-tur="sinyal"] .ft-cihaz-ikon { color: var(--tur-sinyal); background: var(--tur-sinyal-soft); }
.ft-cihaz[data-tur="uydu"]   .ft-cihaz-ikon { color: var(--tur-uydu);   background: var(--tur-uydu-soft); }
.ft-cihaz[data-tur="aku"]    .ft-cihaz-ikon { color: var(--tur-aku);    background: var(--tur-aku-soft); }

.ft-cihaz-bilgi { min-width: 0; }
.ft-cihaz-ust { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ft-cihaz-plaka {
    font-family: ui-monospace, monospace;
    font-size: 14px; font-weight: 700;
    letter-spacing: .04em; color: var(--text);
}
.ft-cihaz-arac { font-size: 12.5px; color: var(--text-soft); }
.ft-cihaz-teshis {
    margin: 3px 0 0; font-size: 12.5px; line-height: 1.55;
    color: var(--text-soft); overflow-wrap: anywhere;
}
.ft-cihaz-no { display: block; margin-top: 3px; font-size: 11px; color: var(--text-muted); }

/* Ölçüm sütunu: etiket + değer alt alta, sayılar hizalı */
.ft-cihaz-veri {
    display: grid; gap: 3px 18px;
    grid-template-columns: repeat(3, auto);
    margin: 0; text-align: right;
}
.ft-cihaz-veri dt {
    font-size: 10.5px; font-weight: 600;
    letter-spacing: .05em; text-transform: uppercase;
    color: var(--text-muted);
}
.ft-cihaz-veri dd {
    margin: 1px 0 0; font-size: 12.5px; font-weight: 600;
    color: var(--text); font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ft-yok { color: var(--text-muted); font-weight: 500; }

/* Dar ekran: ölçümler kartın altına yan yana iner, üç eşit sütun taşmaz */
@media (max-width: 720px) {
    .ft-cihaz { grid-template-columns: auto 1fr; }
    .ft-cihaz-veri {
        grid-column: 1 / -1; text-align: left;
        grid-template-columns: repeat(3, 1fr); gap: 3px 8px;
        padding-top: 9px; border-top: 1px dashed var(--border);
    }
    .ft-cihaz-veri dd { white-space: normal; font-size: 12px; }
}

/* Cihaz Sorunları başlık sağı: rozet + yenile düğmesi yan yana */
.ft-bas-sag { display: flex; align-items: center; gap: 10px; }
#ftYenileBtn.donuyor .ico { animation: ftdon .8s linear infinite; }
#ftYenileBtn:disabled { opacity: .6; cursor: default; }
@keyframes ftdon { to { transform: rotate(360deg); } }

/* Hız ihlali satırı — hız solda büyük, plaka+yer ortada, tarih sağda */
.ft-ihlal {
    display: grid;
    grid-template-columns: 74px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
}
.ft-ihlal:last-child { border-bottom: 0; }

.ft-ihlal-hiz {
    display: flex; flex-direction: column; align-items: center;
    padding: 7px 6px;
    border-radius: 10px;
    background: var(--warn-soft);
    border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--border));
    color: var(--warn);
    line-height: 1.1;
}
.ft-ihlal-hiz strong { font-size: 19px; font-variant-numeric: tabular-nums; }
.ft-ihlal-hiz small { font-size: 10.5px; font-weight: 600; }

.ft-ihlal-bilgi { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ft-ihlal-yer { font-size: 12.5px; color: var(--text-soft); overflow-wrap: anywhere; }

.ft-ihlal-zaman { text-align: right; line-height: 1.35; white-space: nowrap; }
.ft-ihlal-zaman { font-size: 13px; font-weight: 600; color: var(--text); }
.ft-ihlal-zaman small { display: block; font-weight: 400; font-size: 12px; color: var(--text-muted); }

@media (max-width: 640px) {
    .ft-ihlal { grid-template-columns: 64px 1fr; gap: 10px; }
    .ft-ihlal-zaman { grid-column: 2; text-align: left; }
}

/* Panel: Hız İhlalleri + Km Kotası — filo durumu kutularının altında yan yana */
.panel-izleme {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
    margin-bottom: 16px;
}
@media (max-width: 900px) { .panel-izleme { grid-template-columns: 1fr; } }

.pk-satir { padding: 10px 0; border-bottom: 1px solid var(--border); }
.pk-satir:last-of-type { border-bottom: 0; }
.pk-ust { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pk-deger { margin-left: auto; font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pk-deger strong { font-size: 15px; }
.pk-deger small { color: var(--text-muted); }
.pk-satir .bakim-cubuk { margin-top: 7px; }
.pk-alt { margin-top: 4px; font-size: 12px; }
.pk-asim { color: var(--danger); font-weight: 700; }

/* ==========================================================================
   Aylık Tablo — Excel'deki dönüş planının birebir karşılığı
   Beyaz: dönüş bekleniyor · Koyu yeşil: iade alındı (satır silinmez) ·
   Kırmızı: günü geçti · Turuncu ₺: aracın borcu (tıklayıp yazılır)
   ========================================================================== */
.ayt-subeler { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

.ayt-kaydir { overflow-x: auto; }

.ayt-tablo {
    border-collapse: collapse;
    table-layout: auto;          /* sütunlar içeriğe göre genişler */
    width: 100%;
    border: 1.5px solid #3a3f36;
}

/* Tarih başlığı — Excel'deki yeşil şerit */
.ayt-tablo th {
    background: #8DC63F;
    color: #14210A;
    text-align: center;
    padding: 9px 12px 8px;
    border: 1.5px solid #3a3f36;
    line-height: 1.3;
    white-space: nowrap;         /* tarih hiçbir zaman kırılmaz */
    font-weight: 700;
}
.ayt-tablo th strong { display: block; font-size: 17px; letter-spacing: .01em; }
.ayt-tablo th small  { display: block; font-size: 13px; font-weight: 400; }

/* Tablo yazı ailesi — Excel çıktısındaki kalın serif görünüm */
.ayt-tablo th,
.ayt-kayit, .ayt-elle, .ayt-kborc,
.ayt-elle-girdi, .ayt-borc-girdi {
    font-family: 'Times New Roman', Georgia, 'Liberation Serif', serif;
}

.ayt-tablo td {
    border: 1.5px solid #3a3f36;
    background: var(--surface);
    padding: 6px;
    vertical-align: top;
    width: calc(100% / 7);       /* eşit başlar, içerik taşarsa büyür */
}

.ayt-gun {
    min-height: 132px;
    display: flex; flex-direction: column; gap: 4px;
}

/* Bugünün sütunu altın çerçeveyle öne çıkar */
.ayt-tablo th.ayt-bugun { box-shadow: inset 0 0 0 2.5px #B8860B; }
.ayt-tablo td.ayt-bugun { background: #FFFBEA; }

/* Araç satırı — Excel'deki ince çerçeveli şerit.
   nowrap: yazı kırpılmaz, sütun onun kadar genişler. */
/* Satırlar kutusuz: yalnız ince ayraç çizgisiyle alt alta dizilir */
.ayt-kayit {
    display: block;
    border: 0;
    border-bottom: 1px solid #C9CFC2;
    background: none;
    padding: 5px 8px;
    font-size: 15px; font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.4;
    color: #000;
    text-align: center;
    white-space: nowrap;
    cursor: default;
}
.ayt-kayit.ayt-tiklanir { cursor: pointer; }
.ayt-kayit.ayt-tiklanir:hover { background: #FFFBEA; box-shadow: inset 0 0 0 1.5px #B8860B; }

/* İade alınan araç — koyu yeşil bant; kayıt silinmez, rengi döner */
.ayt-kayit.ayt-donmus {
    background: #55663B;
    border-bottom-color: #2E381E;
    color: #F2F5EA;
}
.ayt-kayit.ayt-donmus.ayt-tiklanir:hover { background: #63764A; }

/* Günü geçtiği halde dönmeyen — kırmızı */
.ayt-kayit.ayt-gecikmis {
    background: var(--danger-soft);
    border-bottom-color: var(--danger);
    color: var(--danger);
}

/* Aracın borcu — hemen altındaki turuncu şerit (Excel'deki gibi).
   Araç iade alındıysa borç şeridi de koyulaşır. */
.ayt-kborc {
    display: block;
    border: 0;
    border-bottom: 1px solid #B8860B;
    background: #FFC000;
    color: #201700;
    padding: 4px 8px;
    margin-top: -4px;            /* aracına yapışık dursun */
    font-size: 15px; font-weight: 700;
    letter-spacing: .01em;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
}
.ayt-kborc.ayt-donmus {
    background: #55663B;
    border-bottom-color: #2E381E;
    color: #F2F5EA;
    cursor: default;
}

/* Borç giriş kutusu — araca tıklanınca altında açılır */
.ayt-borc-girdi {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #8a6508;
    background: #FFD65A;
    color: #201700;
    padding: 5px 8px;
    margin-top: -4px;
    font-size: 15px; font-weight: 700;
    text-align: center;
}
.ayt-borc-girdi:focus { outline: none; box-shadow: inset 0 0 0 1.5px #8a6508; }
.ayt-borc-girdi:disabled { opacity: .55; }

.ayt-hata { color: var(--danger); font-weight: 600; }

.ayt-ornek { padding: 1px 7px; border: 1px solid #3a3f36; border-radius: 4px; font-weight: 700; font-size: 11.5px; background: var(--surface); }
.ayt-donmus-ornek   { border-color: #2E381E; color: #F2F5EA; background: #55663B; }
.ayt-gecikmis-ornek { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
.ayt-borc-ornek     { border-color: #B8860B; color: #201700; background: #FFC000; }

/* Elle yazılan satırlar — Excel gibi kullanıcı kendi satırını yazar */
.ayt-elle {
    display: block;
    border: 0;
    border-bottom: 1px dashed #A9B199;   /* elle yazılan satır: kesikli ayraç */
    background: none;
    padding: 5px 8px;
    font-size: 15px; font-weight: 700;
    letter-spacing: .01em; line-height: 1.4;
    color: #000;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
}
.ayt-elle:hover { background: #FFFBEA; box-shadow: inset 0 0 0 1.5px #B8860B; }

/* Sadece rakam yazıldıysa turuncu tutar şeridine dönüşür.
   Tutar araç satırının DEVAMI gibi okunmalı, onunla yarışmamalı: bu yüzden
   yazısı bir tık küçük, şerit ince ve dar tutulur. Excel'deki gibi aracın
   altına yapışır ama satırın tamamını kaplamaz — kutu içinde ortalanır. */
.ayt-elle.ayt-para {
    width: fit-content;
    max-width: 100%;
    margin: -5px auto 1px;       /* üstündeki araç satırına yapışır */
    padding: 1px 10px;
    border: 0;
    border-radius: 3px;
    background: #FFC000;
    color: #3A2A00;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .02em;
}
.ayt-elle.ayt-para:hover {
    background: #F0B400;
    box-shadow: inset 0 0 0 1.5px #8a6508;
}

/* Yazma kutusu */
.ayt-elle-girdi {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #8a6508;
    background: #FFFBEA;
    color: var(--text);
    padding: 5px 8px;
    font-size: 15px; font-weight: 700;
    letter-spacing: .01em;
    text-align: center;
}
.ayt-elle-girdi:focus { outline: none; box-shadow: inset 0 0 0 1.5px #8a6508; }
.ayt-elle-girdi:disabled { opacity: .55; }

/* "+" satır ekleme düğmesi — kutunun altında, imleç gelince belirir */
.ayt-ekle {
    margin-top: auto;
    align-self: stretch;
    border: 1px dashed var(--border-strong);
    background: none;
    color: var(--text-muted);
    font-size: 14px; font-weight: 700;
    line-height: 1; padding: 3px 0;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s, color .15s, border-color .15s;
}
.ayt-gun:hover .ayt-ekle { opacity: 1; }
.ayt-ekle:hover { color: #8a6508; border-color: #B8860B; background: #FFFBEA; }

/* Aylık Tablo — kalın yazı + metin seçilebilirlik
   Satırlar fareyle seçilip Ctrl+C ile kopyalanabilir; seçim varken
   tıklama düzenleyici açmaz (sayfadaki JS bunu gözetir). */
.ayt-kayit, .ayt-elle, .ayt-kborc, .ayt-tablo th {
    font-weight: 800;
    -webkit-user-select: text;
    user-select: text;
}
.ayt-kayit, .ayt-elle, .ayt-kborc { font-size: 16px; }
.ayt-tablo th strong { font-weight: 800; }
.ayt-tablo th small  { font-weight: 600; }

/* Seçilen yazı göz alıcı olsun — kopyaladığını görsün */
.ayt-kayit::selection, .ayt-elle::selection, .ayt-kborc::selection { background: #B8860B; color: #fff; }

/* Satır yazısı serbestçe seçilebilir — fareyle seç, Ctrl+C ile kopyala.
   Düzenleme çift tıkla açıldığı için tek tık seçimi bozmaz. */
.ayt-kayit, .ayt-elle {
    -webkit-user-select: text;
    user-select: text;
    cursor: text;
}
.ayt-kayit.ayt-tiklanir:hover,
.ayt-elle:hover { background: #FFFBEA; box-shadow: inset 0 0 0 1.5px #B8860B; }
.ayt-kayit.ayt-donmus.ayt-tiklanir:hover { background: #63764A; }
.ayt-kayit.ayt-donmus::selection, .ayt-kborc::selection { background: #B8860B; color: #fff; }
/* Metin imleci: satırın seçilebilir yazı olduğu belli olsun
   (.ayt-tiklanir kuralından daha belirgin seçici gerekiyor) */
.ayt-tablo .ayt-kayit, .ayt-tablo .ayt-kayit.ayt-tiklanir,
.ayt-tablo .ayt-elle, .ayt-tablo .ayt-kborc { cursor: text; }

/* Sağ tık menüsü — Excel'deki gibi; kutuda hiçbir düğme durmaz */
.ayt-menu {
    position: fixed; z-index: 900;
    min-width: 172px;
    padding: 5px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(16, 24, 40, .16);
    font-family: var(--yazi, system-ui), system-ui, sans-serif;
}
.ayt-menu-oge {
    display: block; width: 100%;
    padding: 8px 12px;
    border: 0; border-radius: 6px;
    background: none;
    color: var(--text);
    font-size: 13.5px; font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.ayt-menu-oge:hover { background: var(--brand-soft); color: var(--brand); }
.ayt-menu-oge.tehlike { color: var(--danger); }
.ayt-menu-oge.tehlike:hover { background: var(--danger-soft); color: var(--danger); }

/* ---- TELEFON ----
   Menü uzun basmayla açılıyor; seçenekler parmakla rahat basılacak kadar
   yüksek olmalı, yoksa yanlış satıra dokunuluyor. */
@media (max-width: 899px) {
    .ayt-menu { min-width: 208px; padding: 6px; }
    .ayt-menu-oge { padding: 13px 14px; font-size: 15px; }
}

/* Tablodaki hücreye uzun basınca tarayıcının kendi "kopyala/yapıştır" balonu
   çıkıp bizim menümüzü bastırıyordu; o balon kapatıldı. Metin seçimi ve
   Ctrl+C kopyalama bilgisayarda aynen çalışmaya devam eder. */
.ayt-tablo .ayt-kayit,
.ayt-tablo .ayt-elle,
.ayt-tablo .ayt-kborc,
.ayt-tablo .ayt-ekle {
    -webkit-touch-callout: none;
}
/* Seçili satır — Delete tuşuyla silinecek satır belli olsun (Excel hissi) */
.ayt-elle:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--brand);
    background: var(--brand-soft);
}
.ayt-elle.ayt-para:focus { background: #FFD65A; box-shadow: inset 0 0 0 2px #8a6508; }

/* Koyu Yeşil düğmesi — başlıkta, yanında renk karesi */
.ayt-yesil-dugme { display: inline-flex; align-items: center; gap: 7px; }
.ayt-yesil-kare {
    width: 13px; height: 13px; border-radius: 3px;
    background: #55663B; border: 1px solid #2E381E;
}

/* Elle satır da koyu yeşile kapatılabilir */
.ayt-elle.ayt-donmus {
    background: #55663B;
    border-bottom-color: #2E381E;
    color: #F2F5EA;
}
.ayt-elle.ayt-para.ayt-donmus { background: #55663B; color: #F2F5EA; }

/* Çift tıkla yazı düzenleme — Excel hücresi gibi */
.duzenleniyor {
    background: #FFFBEA !important;
    box-shadow: inset 0 0 0 2px #B8860B !important;
    cursor: text;
    white-space: nowrap;
}
.duzenleniyor:focus { outline: none; }

/* Yapıştırma hedefi olan gün kutusu */
.ayt-gun:focus { outline: 2px dashed var(--brand); outline-offset: -2px; }

/* Seçili sistem satırı da belli olsun */
.ayt-kayit:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--brand);
    background: var(--brand-soft);
}
.ayt-kayit.ayt-donmus:focus { background: #63764A; box-shadow: inset 0 0 0 2px #FFC000; }
.ayt-elle.ayt-donmus:focus  { background: #63764A; box-shadow: inset 0 0 0 2px #FFC000; }

/* Tablonun dibi — aşağı kaydırınca yeni haftalar buradan yüklenir */
.ayt-dip {
    padding: 14px;
    text-align: center;
    font-size: 12.5px;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}
.ayt-dip:hover .ayt-dip-yazi { color: var(--brand); }

/* Aylık Tablo: başlık sabit, tablo kendi kutusu içinde kayar
   (sayfanın tamamı değil — Excel penceresi gibi) */
.ayt-kaydir {
    max-height: calc(100vh - 330px);
    min-height: 340px;
    overflow: auto;                 /* hem yatay hem dikey kendi içinde */
    overscroll-behavior: contain;   /* dibe gelince sayfa kaymasın */
    border: 1px solid var(--border);
    border-radius: 8px;
}
@media (max-width: 900px) { .ayt-kaydir { max-height: calc(100vh - 260px); } }

/* Kart başlığı kaydırma alanının üstünde sabit durur */
.ayt-kaydir + .hint { margin-top: 12px; }

/* 7 gün tek parça: tablo kutuya tam sığar, yatay kaydırma yok.
   Sığmayan yazı kırpılmaz — hücre içinde alt satıra iner. */
.ayt-kaydir { overflow-x: hidden; }

.ayt-tablo {
    table-layout: fixed;
    width: 100%;
    min-width: 0;
}
.ayt-tablo th,
.ayt-tablo td { width: 14.2857%; }        /* 7 eşit sütun */

.ayt-tablo th { padding: 8px 4px 7px; }
.ayt-tablo th strong { font-size: 14px; }
.ayt-tablo th small  { font-size: 11px; }

/* Satırlar: tek satıra sığmazsa alt satıra sarar */
.ayt-kayit, .ayt-elle, .ayt-kborc, .ayt-elle-girdi, .ayt-borc-girdi {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 13.5px;
    padding-left: 5px; padding-right: 5px;
    line-height: 1.3;
}
.ayt-tablo td { padding: 4px; }

/* Yazı sarmaz — tek satırda kalır, sığmazsa JS punto düşürür (aytSigdir).
   Böylece hiçbir satır iki satıra bölünmez, kutunun dışına da taşmaz. */
.ayt-kayit, .ayt-elle, .ayt-kborc {
    white-space: nowrap;
    overflow: hidden;
    word-break: normal;
    overflow-wrap: normal;
}
.ayt-elle-girdi, .ayt-borc-girdi { white-space: nowrap; }
/* Sarma durumunda kelimeler bütün kalsın, harf ortasından kırılmasın */
.ayt-kayit, .ayt-elle, .ayt-kborc { word-break: keep-all; overflow-wrap: normal; }

/* ---- Aylık Tablo: mobil görünüm ----
   Telefonda 7 sütun 40 px'e düşüp okunmaz oluyordu. Burada tablo
   genişletilir, ekranda 3 gün görünür, yana kaydırılarak diğer günlere
   geçilir. Dikey kaydırma yine kutunun kendi içindedir. */
@media (max-width: 768px) {
    .ayt-kaydir {
        overflow-x: auto;                    /* yana kaydırma açılır */
        max-height: calc(100vh - 250px);
        min-height: 300px;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;       /* gün sütunlarına oturur */
    }
    /* Sütun genişliği yazıya göre sabit: satır tek satırda sığsın.
       Ekrana ~2,5 gün girer, kalanına yana sürükleyerek geçilir. */
    .ayt-tablo { min-width: 960px; }

    .ayt-tablo th { padding: 7px 3px 6px; scroll-snap-align: start; }
    .ayt-tablo th strong { font-size: 12.5px; }
    .ayt-tablo th small  { font-size: 10.5px; }

    .ayt-tablo td { padding: 3px; }
    .ayt-gun { min-height: 96px; gap: 3px; }

    .ayt-kayit, .ayt-elle, .ayt-kborc { padding: 4px 5px; }

    /* Şube sekmeleri ve başlık dar ekranda alt alta düzgün dursun */
    .ayt-subeler { gap: 6px; }
    .card-head .ft-bas-sag { flex-wrap: wrap; gap: 6px; row-gap: 4px; }
}


/* Uzatılan kiralamanın eski günü: koyu yeşil, kapanmış satır.
   Sağ üstünde küçük ok — "bu araç ileri bir tarihe taşındı". */
.ayt-uzatildi { position: relative; padding-right: 16px; }
.ayt-uzatildi::after {
    content: '↷';
    position: absolute; right: 4px; top: 50%;
    transform: translateY(-50%);
    font-size: 11px; opacity: .8;
}


/* ---- "Dönüş günü belli değil" kutucuğu (kiralama formu) ----
   Kayıt yalnız kendi şubesinin sayfalarında görünsün diye işaretlenir. */
.ozel-kutu {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px; margin-top: 8px; cursor: pointer;
    border: 1px solid var(--border); border-radius: var(--r);
    background: var(--surface-2, #F8FAFC);
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.ozel-kutu:hover { border-color: var(--border-strong); }
.ozel-kutu input { flex: none; width: 18px; height: 18px; cursor: pointer; accent-color: var(--brand); }
.ozel-yazi { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ozel-baslik { font-size: 13.5px; font-weight: 700; color: var(--text); }
.ozel-aciklama { font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.ozel-aciklama b { color: var(--text-soft); font-weight: 700; }
/* İşaretliyken kutucuk belirginleşir — personel kaydın kapsamını gözden kaçırmaz */
.ozel-kutu:has(input:checked) {
    border-color: #B8860B; background: #FFF8E6; box-shadow: inset 0 0 0 1px #FFE9A8;
}
.ozel-kutu:has(input:checked) .ozel-aciklama b { color: #7A5B00; }

/* Şubeye özel kaydın rozeti — "Sadece Merkez" gibi okunur */
.rozet-ozel {
    display: inline-flex; align-items: center; gap: 4px;
    height: 17px; padding: 0 6px; border-radius: 5px;
    background: #FFF3CD; border: 1px solid #E8C860; color: #6B4E00;
    font-size: 9px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}


/* ---------------------------------------------------------
   Borç Takibi — kişi kişi alacak / verilen para defteri
   Excel düzeni: İsim · Alacak · Verilen · Tarih · Açıklama · Net Borç
   --------------------------------------------------------- */

/* Kart başlığının sağındaki düğme öbeği (sayaç + Yeni Kayıt) */
.kh-aksiyon { display: flex; align-items: center; gap: 10px; }

/* Sayı sütunları sağa yaslı — rakamlar alt alta hizalansın */
table.tbl th.sag, table.tbl td.sag { text-align: right; }
table.tbl td.sag.num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* Kutucuk süzgeci — arama kutusunun altında */
.borc-suzgec { display: flex; gap: 6px; margin-top: 11px; overflow-x: auto; padding-bottom: 2px; }
.borc-suzgec .sekme { cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; padding: 7px 13px; }

/* Özet kutularındaki tutarlar uzun — biraz küçültülür */
.stat-value.borc-tutar { font-size: 19px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* Tablo yazısı öne çıksın — rakamlar ve isim uzaktan okunabilsin */
.borc-tablo th { color: var(--text-soft); font-size: 11px; }
/* Sekiz sütunla birlikte 15px yazı isimleri ve açıklamayı 3-4 satıra sarıyordu */
.borc-tablo td { font-size: 13.5px; font-weight: 600; color: var(--text); }
.borc-tablo td.sag.num { font-size: 14px; font-weight: 700; white-space: nowrap; }

.borc-ad { font-weight: 800; font-size: 15.5px; color: var(--text); letter-spacing: -.01em; }
.borc-tablo td.cell-wide { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.borc-verilen { color: var(--ok); }
.borc-net { color: var(--danger); font-size: 14.5px; font-weight: 800; }
/* Masraf: alacaktan düşmez, işin maliyeti — net borçla karışmasın diye soluk */
.borc-masraf { color: var(--warn, #b45309); font-weight: 600; }

/* Vadesi geçen satır: soldan kırmızı şerit */
.borc-gecti { background: #FFF6F5; box-shadow: inset 3px 0 0 var(--danger); }
.borc-gecti:hover { background: #FFF0EE !important; }

/* Kapanan kayıt: soluklaştırılmaz — yalnız sol şeridi yeşil olur.
   Saydamlık yazıyı okunmaz hâle getiriyordu. */
.borc-kapandi { box-shadow: inset 3px 0 0 var(--ok); }
.borc-kapandi td.sag.num { color: var(--text-soft); }

@media (max-width: 899px) {
    /* Mobilde satır karta dönüşür; isim satırı başlıksız ve öne çıkar */
    .borc-tablo td.cell-wide::before { display: none; }
    .borc-tablo td.cell-wide { padding-top: 11px; }
    .borc-ad { font-size: 15.5px; }
    .borc-gecti { box-shadow: inset 3px 0 0 var(--danger), var(--sh-sm); }
    .stat-value.borc-tutar { font-size: 16px; }
    .kh-aksiyon { width: 100%; justify-content: space-between; }
}

/* Para kutusu — sol tarafta ₺, yazarken binlik ayracı JS koyar */
.para-alan { position: relative; }
.para-simge {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); font-size: 15px; font-weight: 700;
    pointer-events: none; line-height: 1;
}
.input.para-kutu {
    padding-left: 31px;
    font-variant-numeric: tabular-nums;
    font-weight: 700; font-size: 15.5px; letter-spacing: -.01em;
}
.input.para-kutu::placeholder { font-weight: 500; letter-spacing: 0; }

/* Dikkat kutusu — bilgi ile hata arasında, sarı tonlu uyarı */
.alert-dikkat { background: #FFF8E6; color: #6B4E00; border-color: #E8C860; }

/* Finans kilidi — her şube kendi kutusunda */
.fn-sube {
    border: 1px solid var(--border); border-radius: var(--r);
    padding: 13px 14px; margin-bottom: 12px; background: var(--surface);
}
.fn-sube:last-of-type { margin-bottom: 0; }
.fn-sube-ust { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fn-sube-ad { font-weight: 700; }

/* Kirada yapılan km — yapılan yol önde, sayaç değerleri arkada */
.km-buyuk {
    font-weight: 800; font-size: 15.5px;
    font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.km-alt {
    display: block; margin-top: 2px;
    font-size: 11.5px; font-weight: 500; color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
/* Canlı veri geldiğini gösteren nabız */
.km-canli {
    display: inline-block; width: 7px; height: 7px; margin-left: 6px;
    border-radius: 50%; background: var(--ok); vertical-align: middle;
    animation: kmNabiz 1.8s ease-in-out infinite;
}
@keyframes kmNabiz { 0%, 100% { opacity: .3 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .km-canli { animation: none; opacity: .85 } }

/* Bilgi kutusu — uyarı değil, sadece durum açıklaması */
.alert-bilgi { background: #EEF4FF; color: #23417A; border-color: #C3D6F5; }

/* ---------------------------------------------------------
   Panel künyesi — firmanın ticari unvanı kurumsal başlık olarak
   --------------------------------------------------------- */
.kurumsal-bas {
    position: relative;
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    padding: 20px 22px 18px 26px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, #FFFFFF 0%, #FCFAF5 55%, #F7F2E8 100%);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: 0 1px 2px rgba(16, 30, 54, .04), 0 10px 24px -18px rgba(90, 78, 54, .35);
    overflow: hidden;
}

/* Sol kenardaki lacivert–altın şerit */
.kb-seritler {
    position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand) 45%, var(--altin) 45%, var(--altin) 100%);
}

.kb-icerik { min-width: 0; }

.kb-ust {
    display: block;
    font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--text-muted);
}

.kb-ad {
    margin: 7px 0 0;
    font-size: 25px; font-weight: 800; line-height: 1.15;
    letter-spacing: -.005em; color: var(--brand);
    text-wrap: balance;
}

/* Adın altındaki kısa altın çizgi */
.kb-cizgi {
    display: block; width: 52px; height: 3px; margin: 11px 0 0;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--altin), rgba(200, 155, 74, .25));
}

.kb-alt {
    margin: 11px 0 0;
    font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
    color: var(--text-soft);
}

/* Mobilde başlık kutusu alçalır: telefonda ekranın üçte biri künyeye
   gitmesin, altındaki takvim ve kutucuklar yukarı çıksın. Yazı boyları
   okunaklı kalır — kısalan yalnız aradaki dikey boşluklardır.
   Masaüstü görünümü hiç değişmez. */
@media (max-width: 899px) {
    .kurumsal-bas {
        padding: 12px 14px 11px 18px;
        margin-bottom: 12px;
        border-radius: var(--r);
        gap: 10px;
    }
    .kb-ad    { font-size: 19px; margin-top: 4px; line-height: 1.12; }
    .kb-ust   { font-size: 9.5px; letter-spacing: .14em; }
    .kb-alt   { font-size: 11.5px; line-height: 1.4; margin-top: 6px; }
    .kb-cizgi { width: 42px; height: 2.5px; margin-top: 6px; }
}

/* Dar telefonlarda bir tık daha toplu */
@media (max-width: 480px) {
    .kurumsal-bas { padding: 10px 12px 10px 16px; margin-bottom: 10px; }
    .kb-ad    { font-size: 17.5px; margin-top: 3px; }
    .kb-ust   { font-size: 9px; }
    .kb-alt   { font-size: 11px; margin-top: 5px; }
    .kb-cizgi { width: 36px; margin-top: 5px; }
}

/* Detay penceresindeki görünürlük düğmesi — dar kolona sığar */
.ozel-satir { margin: 0; }
.ozel-satir .ozel-baslik { font-size: 13px; }
.dl-row .ozel-satir { justify-content: flex-end; }
.ozel-durum { display: block; margin-top: 5px; font-size: 11.5px; line-height: 1.45; text-align: right; }

/* ---------------------------------------------------------
   Gelecek Araçlar — tablo yazı düzeni
   Times New Roman 800 sıkışık ve okumayı zorlaştırıyordu.
   Sayfanın kendi yazı ailesine (Inter) geçildi: rakamlar eşit
   genişlikte dizilir, saatler alt alta hizalanır.
   --------------------------------------------------------- */
.ayt-tablo th,
.ayt-kayit, .ayt-elle, .ayt-kborc,
.ayt-elle-girdi, .ayt-borc-girdi,
.duzenleniyor {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-variant-numeric: tabular-nums lining-nums;
}

/* Araç satırı: kalın ve net */
.ayt-kayit, .ayt-elle, .ayt-kborc {
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1.5;
    padding: 6px 9px;
}

/* Tarih başlığı — yeşil şerit sadeleşir */
.ayt-tablo th { padding: 8px 10px 7px; }
.ayt-tablo th strong { font-size: 14px; font-weight: 700; letter-spacing: .01em; }
.ayt-tablo th small  { font-size: 11.5px; font-weight: 500; letter-spacing: .04em;
                       text-transform: uppercase; opacity: .8; margin-top: 1px; }

/* Tutar şeridi biraz daha belirgin dursun */
.ayt-kborc, .ayt-elle.ayt-para { font-weight: 700; letter-spacing: .01em; }

/* Yazma kutusu satırla aynı ölçüde olsun — düzenlerken yazı zıplamasın */
.ayt-elle-girdi { font-size: 13.5px; font-weight: 600; letter-spacing: .015em; padding: 6px 9px; }

/* Satır aralarındaki ayraç yumuşasın */
.ayt-kayit { border-bottom-color: #DCE0D5; }
.ayt-elle  { border-bottom-color: #C7CEBA; }

@media (max-width: 899px) {
    .ayt-kayit, .ayt-elle, .ayt-kborc, .ayt-elle-girdi { font-size: 12.5px; padding: 5px 7px; }
    .ayt-tablo th strong { font-size: 12.5px; }
    .ayt-tablo th small  { font-size: 10.5px; }
}

/* Satır HER ZAMAN tek satırda kalır — alt satıra inmez.
   Yazının hücreye sığması için harf aralığı sıfırlanır ve yan boşluk
   daraltılır; böylece punto düşürmeye daha az gerek kalır, yazı büyük
   ve okunaklı kalır. */
.ayt-tablo .ayt-kayit,
.ayt-tablo .ayt-elle,
.ayt-tablo .ayt-kborc,
.ayt-tablo .duzenleniyor {
    white-space: nowrap;
    letter-spacing: 0;
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
}
.ayt-elle-girdi { letter-spacing: 0; padding-left: 5px; padding-right: 5px; font-weight: 800; }
.ayt-tablo td { padding: 5px 3px; }

/* Kalın yazı satırda da geçerli olsun — eski kurallar bunu 600'e çekmesin */
.ayt-tablo .ayt-kayit,
.ayt-tablo .ayt-elle,
.ayt-tablo .ayt-kborc { font-weight: 800; }

/* Belgeler sayfası: dört kutucuk yan yana (Takipte · Yaklaşan · Geçen · Belgesi yok) */
.stats.stats-sekme.stats-dortlu { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 899px) {
    .stats.stats-sekme.stats-dortlu { grid-template-columns: repeat(2, 1fr); }
}

/* Envanter kartı: araç sahibi, ruhsat sahibinin hemen altında.
   Ruhsat başkasının adınaysa gerçek sahibi kartta görünsün. */
.kutu-alan.kutu-sahip { margin-top: 6px; }
.kutu-alan.kutu-sahip b { color: var(--altin-koyu, #8a6508); }
.kutu-alan.kutu-sahip i { font-weight: 700; color: var(--text); }

/* ---- WhatsApp: cihaz sorunu uyarı ayarı ----
   "Bildirimler açık olsun" tikinin yanında duran küçük ayar kümesi.
   Araç kapalı otoparkta ya da şebekenin çekmediği bir yerde olabilir;
   kaç dakika beklenip kaç saatte bir hatırlatılacağı buradan ayarlanır. */
.cihaz-ayar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    padding: 8px 14px;
    border: 1px solid var(--cizgi, #e5e7eb);
    border-radius: 10px;
    background: var(--yuzey-2, #f8fafc);
}
.cihaz-ayar-baslik {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    font-size: 12.5px;
    letter-spacing: .2px;
    color: var(--altin-koyu, #8a6508);
    white-space: nowrap;
}
.cihaz-ayar-baslik .ico { opacity: .85; }
.cihaz-ayar label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2, #475569);
    white-space: nowrap;
}
.cihaz-ayar-alan {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
}
.cihaz-ayar input[type="number"] {
    width: 74px;
    padding: 5px 8px;
    border: 1px solid var(--cizgi, #e5e7eb);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-weight: 800;
    text-align: center;
    color: var(--text);
}
.cihaz-ayar input[type="number"]:focus {
    outline: none;
    border-color: var(--altin, #c8a24a);
    box-shadow: 0 0 0 3px rgba(200, 162, 74, .18);
}
.cihaz-ayar em {
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-3, #94a3b8);
}

@media (max-width: 720px) {
    .cihaz-ayar { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; }
    .cihaz-ayar label { justify-content: space-between; }
}

/* Acil eşik alanı — "yolda giderken kesildi" kuralı diğer iki ayardan
   ayrılsın; bu ikisi sabır, bu ise sabrı bozan istisnadır. */
.cihaz-ayar .cihaz-ayar-acil { color: var(--kirmizi-koyu, #9f1239); }
.cihaz-ayar .cihaz-ayar-acil input[type="number"] { border-color: rgba(159, 18, 57, .35); }
.cihaz-ayar .cihaz-ayar-acil input[type="number"]:focus {
    border-color: #9f1239;
    box-shadow: 0 0 0 3px rgba(159, 18, 57, .15);
}

/* ---- Boştaki araç penceresi: şubeye özel görünürlük ----
   Şube satırının hemen altında durur. Aracın envanter şubesi değişmez;
   burada yalnız "hangi şubenin listesinde görünsün" ayarlanır. */
.ozel-sube-kutu {
    margin: 12px 0 4px;
    padding: 12px 14px;
    border: 1px solid var(--cizgi, #e5e7eb);
    border-radius: 12px;
    background: var(--yuzey-2, #f8fafc);
}
.ozel-sube-kutu .ozel-kutu {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    user-select: none;
}
.ozel-sube-kutu .ozel-baslik {
    font-weight: 800;
    font-size: 13.5px;
    color: var(--text);
}
.ozel-sube-kutu select.input {
    margin-top: 10px;
    width: 100%;
    font-weight: 700;
}
.ozel-sube-kutu select.input:disabled {
    opacity: .5;
    cursor: not-allowed;
}
.ozel-sube-kutu .pencere-islem { margin-top: 10px; }
.ozel-sube-kutu .pencere-islem .btn { width: 100%; }

/* ---- Araç penceresi: görünürlük kartı ----
   Şube satırının hemen altında durur. Aylık verilen aracı personel kendi
   şubesine kilitler; diğer şubelerin listelerinde çıkmaz. */
.gorunurluk-kart {
    margin: 14px 0 4px;
    padding: 14px;
    border: 1px solid var(--cizgi, #e5e7eb);
    border-radius: 14px;
    background: var(--yuzey-2, #f8fafc);
    transition: border-color .16s ease, background .16s ease;
}
.gorunurluk-kart.on {
    border-color: var(--altin, #c8a24a);
    background: linear-gradient(180deg, rgba(200,162,74,.07), transparent 60%),
                var(--yuzey, #fff);
}

.gorunurluk-bas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--cizgi, #e5e7eb);
}
.gorunurluk-etiket {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-3, #94a3b8);
}
.gorunurluk-durum {
    font-size: 12.5px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--yuzey-3, #eef2f7);
    color: var(--text-2, #475569);
    white-space: nowrap;
}
.gorunurluk-durum.kilitli {
    background: rgba(200, 162, 74, .16);
    color: var(--altin-koyu, #8a6508);
}

.gorunurluk-tik {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    cursor: pointer;
    user-select: none;
}
.gorunurluk-tik input[type="checkbox"] {
    width: 19px;
    height: 19px;
    margin-top: 1px;
    flex: 0 0 auto;
    accent-color: var(--altin-koyu, #8a6508);
    cursor: pointer;
}
.gorunurluk-tik b {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.35;
}
.gorunurluk-tik small {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3, #94a3b8);
    line-height: 1.45;
}

.gorunurluk-sec {
    margin-top: 12px;
    width: 100%;
    font-weight: 700;
}
.gorunurluk-sec:disabled { opacity: .45; cursor: not-allowed; }

.gorunurluk-btn { margin-top: 12px; width: 100%; }

/* ---- Sayısı gizlenmiş panel kutucuğu ----
   Kullanıcının o sayıyı görme izni yoksa rakam yerine "Tıklayınız" yazar.
   Kutucuk yerinde kalır: listeye girebilir, yalnız filo büyüklüğünü görmez. */
.stat-tikla {
    font-size: 15px !important;
    font-weight: 800;
    letter-spacing: .01em;
    color: var(--altin-koyu, #8a6508);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.stat-tikla::after {
    content: "›";
    font-size: 17px;
    line-height: 1;
    opacity: .6;
    transform: translateY(-1px);
}
.stat-sarmal.stat-sayisiz .stat:hover .stat-tikla { opacity: .85; }

/* Sayfa başlığındaki sayaç gizliyken — rozet yerinde durur, hiza bozulmaz */
.count-pill.count-gizli {
    color: var(--text-3, #94a3b8);
    background: var(--yuzey-3, #eef2f7);
    letter-spacing: .12em;
    cursor: help;
}

/* ---- Gelecek Araçlar: tutar şeridi ----
   Tutar, araç satırının DEVAMI gibi okunmalı — onunla boy ölçüşmemeli.
   Dosyanın ilerisindeki genel kurallar (.ayt-kborc { font-size:16px } gibi)
   bu şeridi de büyütüyordu; burada en sonda düzeltiliyor.
   İki kaynak da aynı görünür: kiralamadan gelen (.ayt-kborc) ve
   elle yazılan (.ayt-elle.ayt-para) tutarlar. */
.ayt-tablo .ayt-kborc,
.ayt-tablo .ayt-elle.ayt-para {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: -3px auto 2px;        /* üstündeki araç satırına yapışır */
    padding: 0 7px;
    border: 0;
    border-radius: 3px;
    background: #FFC000;
    color: #3A2A00;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .02em;
    text-align: center;
    white-space: nowrap;
}
.ayt-tablo .ayt-kborc:hover,
.ayt-tablo .ayt-elle.ayt-para:hover {
    background: #F0B400;
    box-shadow: inset 0 0 0 1.5px #8a6508;
}
/* İade alınmış / koyu yeşile kapatılmış tutar — satırla uyumlu koyu yeşil.
   ELLE YAZILAN tutar (.ayt-elle.ayt-para) da buraya dahildir: eskiden yalnız
   .ayt-kborc yazdığı için elle girilen para koyu yeşile kapatıldığında turuncu
   kalıyordu — yukarıdaki turuncu kural aynı ağırlıkta ve daha sonra geldiği
   için onu eziyordu. İki tutar kaynağı da artık aynı görünür. */
.ayt-tablo .ayt-kborc.ayt-donmus,
.ayt-tablo .ayt-elle.ayt-para.ayt-donmus {
    background: #55663B;
    color: #F2F5EA;
}

/* Dar ekranda bir tık daha küçük */
@media (max-width: 899px) {
    .ayt-tablo .ayt-kborc,
    .ayt-tablo .ayt-elle.ayt-para { font-size: 8.5px; padding: 0 5px; }
}


/* ---- Kiralama Detayı: veriliş ve gün sayısı düzeltme ----
   Başka sistemden geçilirken gerçek veriliş günü bilinmiyordu; geçiş
   penceresi açıkken bu iki alan tıklanıp düzeltilebilir. Pencere
   kapanınca düz yazıya döner, kimse dokunamaz. */
.kd-alan {
    cursor: pointer;
    border-bottom: 1px dashed var(--altin, #c8a24a);
    padding: 1px 3px;
    border-radius: 3px;
    transition: background .14s, box-shadow .14s;
}
.kd-alan:hover,
.kd-alan:focus-visible {
    outline: none;
    background: rgba(200, 162, 74, .16);
    box-shadow: inset 0 0 0 1.5px var(--altin, #c8a24a);
    border-bottom-color: transparent;
}

.kd-girdi {
    width: 150px;
    padding: 2px 6px;
    border: 1.5px solid var(--altin-koyu, #8a6508);
    border-radius: 4px;
    background: #fff;
    font: inherit;
    font-weight: 700;
    text-align: right;
    color: var(--text);
}
.kd-girdi-gun { width: 62px; }
.kd-girdi:focus { outline: none; box-shadow: 0 0 0 3px rgba(200, 162, 74, .2); }
.kd-girdi:disabled { opacity: .6; }

/* ---- İade Al: kalan borç kutusu ----
   Şube ve km kutularının hemen altında. Aracı teslim alırken tahsil
   edilecek tutar gözden kaçmasın diye turuncu vurguyla durur.
   Borç yoksa satır hiç basılmaz. */
.iade-borc-satir { margin-top: 2px; }
.iade-borc-kutu {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 9px 12px;
    border: 1px solid rgba(184, 134, 11, .45);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 192, 0, .16), rgba(255, 192, 0, .07));
}
.iade-borc-tutar {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .01em;
    color: var(--altin-koyu, #8a6508);
    font-variant-numeric: tabular-nums;
}
.iade-borc-not {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-3, #94a3b8);
}

/* ---- Koyu yeşil bantlarda yazı SİYAH ----
   İade alınmış araç ve onun dondurulmuş borcu koyu yeşil şeritte durur.
   Yazı beyazdı; okunması istenen renk siyah. Kalın punto zaten var,
   siyah bu zeminde net çıkıyor. Yeşilin tonuna dokunulmadı. */
.ayt-kayit.ayt-donmus,
.ayt-kborc.ayt-donmus,
.ayt-elle.ayt-donmus,
.ayt-elle.ayt-para.ayt-donmus,
.ayt-donmus-ornek,
.ayt-tablo .ayt-kborc.ayt-donmus,
/* Elle yazılan tutar da siyah kalsın — yukarıdaki koyu yeşil kuralı açık renk
   veriyor ve .ayt-tablo öneki yüzünden listedeki siyahı eziyordu. */
.ayt-tablo .ayt-elle.ayt-para.ayt-donmus,
.ayt-tablo .ayt-kayit.ayt-donmus {
    color: #000;
}
.ayt-kayit.ayt-donmus .ayt-alt,
.ayt-kayit.ayt-donmus small,
.ayt-kborc.ayt-donmus small { color: #000; opacity: .78; }

/* ---- "Dönüşü Yaklaşanlar" günlük rozeti ----
   Şerit artık günlük çalışma listesi: yalnız bugün (ve gecikmişler).
   Başlığın yanındaki küçük tarih, hangi güne baktığını belli eder. */
.gun-rozet {
    display: inline-block;
    margin-left: 8px;
    vertical-align: 2px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .01em;
    color: #8a6508;
    background: rgba(255, 192, 0, .16);
    border: 1px solid rgba(184, 134, 11, .35);
    border-radius: 999px;
    padding: 2px 9px;
    white-space: nowrap;
}
@media (max-width: 480px) {
    .gun-rozet { margin-left: 6px; font-size: 10.5px; padding: 1px 7px; }
}

/* ---- Veriliş / gün düzeltme kutusu: Kaydet ve Vazgeç düğmeleri ----
   Kutu eskiden odak kaybında kendiliğinden kapanıyordu; telefonda tarayıcı
   odağı vermediği için alan hiç düzeltilemiyordu. Artık kapanma yalnız
   Vazgeç ya da Escape ile olur, kaydetme kendi düğmesindedir. */
.kd-kutu {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    vertical-align: middle;
}
.kd-dugme {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid transparent;
    border-radius: 7px;
    font-size: 14px; font-weight: 800; line-height: 1;
    cursor: pointer;
    transition: filter .14s, background .14s;
}
.kd-dugme:disabled { opacity: .55; cursor: default; }
.kd-ok     { background: var(--ok, #1f7a4d); border-color: var(--ok, #1f7a4d); color: #fff; }
.kd-iptal  { background: var(--surface-2, #f1f5f9); border-color: var(--border, #dfe5ec); color: var(--text-soft, #64748b); }
.kd-ok:hover:not(:disabled)    { filter: brightness(1.1); }
.kd-iptal:hover:not(:disabled) { background: var(--surface-3, #e2e8f0); }

/* Tarih-saat kutusu, metin kutusundan geniştir */
.kd-girdi[type="datetime-local"] { width: 178px; text-align: left; }

/* Telefonda parmakla basılabilir boyut — satır dar olduğu için alta sarar */
@media (max-width: 560px) {
    .kd-kutu { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
    .kd-girdi { padding: 6px 8px; font-size: 15px; }
    .kd-girdi[type="datetime-local"] { width: 100%; min-width: 168px; }
    .kd-girdi-gun { width: 84px; }
    .kd-dugme { width: 38px; height: 38px; font-size: 16px; }
    .dl-row:has(.kd-kutu) dd { flex: 1 1 100%; }
}

/* Geciken dönüş, düzeltilebilir alanın içinde de kırmızı durur */
.kd-alan.kd-kirmizi { color: var(--danger); border-bottom-color: var(--danger); }
.kd-gecikti { color: var(--danger); font-weight: 700; }

/* ---- Hesaplanan alan: Planlanan Dönüş ----
   Elle girilmez; veriliş + gün sayısından kendiliğinden çıkar. Kesik alt
   çizgi yok — tıklanabilir sanılmasın. Küçük "hesaplanır" işareti taşır. */
.kd-hesap {
    position: relative;
    padding-right: 17px;
    cursor: default;
}
.kd-hesap::after {
    content: '∑';
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 700;
    color: var(--altin, #c8a24a);
    opacity: .75;
}
.kd-hesap.kd-kirmizi { color: var(--danger); }
.kd-hesap.kd-kirmizi::after { color: var(--danger); opacity: .6; }

/* ---- Şerit kartları: ÜÇ ŞERİTTE DE AYNI BOY ----
   Panelde üç şerit var: Dönüşü Yaklaşanlar, Boştaki Araçlar, Sanayideki
   Araçlar. Dönüşü Yaklaşanlar kartında bir satır fazla bilgi (dönüş saati +
   "Sadece şube" rozeti) ve üç düğme var; diğerlerinde iki düğme. Bu yüzden
   şeritler alt alta farklı boyda duruyordu.

   Ölçülen ve beğenilen boy Boştaki kartınki: masaüstünde 136px, telefonda
   118px. Hepsi ona sabitlendi. Yazı alanı esner, düğme satırı her kartta
   tam en altta hizalanır — kartlar yan yana da alt alta da eşit görünür. */
.kaydir-yatay .kutu {
    height: 136px;
    display: flex;
    flex-direction: column;
}
.kaydir-yatay .kutu-tap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.kaydir-yatay .kutu-islem {
    flex: 0 0 auto;
    margin-top: auto;
}
/* Uzun model adı ya da not kartı uzatmasın — tek satırda kesilir,
   tamamı zaten karta basınca açılan pencerede yazıyor. */
.kaydir-yatay .kutu-not {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Telefon: kart daha alçak, aynı kural */
@media (max-width: 699px) {
    .kaydir-yatay .kutu { height: 118px; }
}

/* ---- "Dönüşü Yaklaşanlar" başlık satırı telefonda tek satır kalsın ----
   Başlıkta ayrıca "Bugün · 17 Ağustos" rozeti var; 375px'lik telefonda
   "Takvimi Gör" bağlantısı alt satıra düşüyor ve kutuyu 32px uzatıyordu.
   Panelin en üstünde zaten büyük bir "Takvimi Gör" kutusu duruyor, o yüzden
   dar ekranda buradaki küçük bağlantı gizlenir — kutu diğer şeritlerle
   aynı boyda kalır. Geniş ekranda ikisi de görünür. */
@media (max-width: 560px) {
    .card-head.dy-bas { flex-wrap: nowrap; }
    .card-head.dy-bas .link-btn { display: none; }
    .card-head.dy-bas h2 { min-width: 0; }
}

/* ---- Panel kutucukları satırı TAM DOLDURUR ----
   Kutu sayısı kullanıcıdan kullanıcıya değişiyor: yetkisi olmayan kutu hiç
   basılmıyor. Sütun sayısı 5'e sabitken 4 kutusu olan kullanıcıda sağda boş
   bir sütun kalıyordu. Artık sınıf adı kaç kutu basıldığını söylüyor
   (stats-adet-3 / -4 / -5) ve sütun sayısı ona göre kuruluyor. */
@media (min-width: 900px) {
    .stats.stats-adet-1 { grid-template-columns: 1fr; }
    .stats.stats-adet-2 { grid-template-columns: repeat(2, 1fr); }
    .stats.stats-adet-3 { grid-template-columns: repeat(3, 1fr); }
    .stats.stats-adet-4 { grid-template-columns: repeat(4, 1fr); }
    .stats.stats-adet-5 { grid-template-columns: repeat(5, 1fr); }
}

/* Telefon ve tablet iki sütunlu kalır — kutular dar ekranda okunur boyda
   dursun. Tek başına artan son kutu satırın tamamını kaplar, yanında
   boşluk bırakmaz. */
@media (max-width: 899px) {
    .stats.stats-adet-1 .stat-sarmal,
    .stats.stats-adet-3 .stat-sarmal:last-child,
    .stats.stats-adet-5 .stat-sarmal:last-child { grid-column: 1 / -1; }
}

/* Dar telefonda kutular satırdan TAŞMASIN.
   Grid sütunu varsayılan olarak içeriğin en dar hâlinden küçülemez; "Tıklayınız"
   ve etiket yan yana gelince sütun 189px'e kilitleniyor, iki sütun 375px'lik
   ekrandan 51px taşıyordu. min-width:0 ile sütun gerçekten esner. */
.stats .stat-sarmal { min-width: 0; }
.stats .stat-sarmal > .stat { min-width: 0; }
.stats .stat-yazi { min-width: 0; }
/* Etiket kelime ortasından bölünmesin ("Rezervasyon / lar" gibi). */
.stats .stat-label { white-space: normal; overflow-wrap: normal; }
.stats .stat-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ---- Göz / kilit düğmesi KUTUNUN İÇİNDE durur ----
   Yalnız form içindeki göz düğmesi mutlak konumluydu; kodla açılan kutuların
   (Toplam Araç ve kapalı olan diğerleri) düğmesi çıplak <button> olduğu için
   flex satırında GERÇEK YER KAPLIYOR, kartı sola itip daraltıyordu — ekranda
   kutunun dışında ayrı bir kilit gibi duruyordu. İkisi de aynı kurala bağlandı:
   kartın sağ üst köşesine, kartın İÇİNE oturur, yer kaplamaz. */
.stat-sarmal > .stat-goz,
.stat-goz-form {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    margin: 0;
}
/* Telefonda parmakla basılacak kadar büyük ama kartı sıkıştırmayan boyut */
@media (max-width: 560px) {
    .stat-sarmal > .stat-goz,
    .stat-goz-form { top: 6px; right: 6px; }
    .stat-goz { width: 26px; height: 26px; border-radius: 7px; }
    .stat-goz .ico { width: 14px; height: 14px; }
}

/* Göz/kilit düğmesi sağ üstte durduğu için yazı onun altına girmesin.
   Telefonda kart yatay dizildiğinden "Tıklayınız ›" tam düğmenin oraya
   geliyordu; sağdan pay bırakılır. */
.stat-sarmal:has(.stat-goz) .stat-value { padding-right: 32px; }
@media (max-width: 560px) {
    .stat-sarmal:has(.stat-goz) .stat-value { padding-right: 30px; }
}

/* Şerit kartında etiket satırı taşarsa temiz kesilsin — rozet yarıdan
   bölünmüş gibi durmasın. */
.kaydir-yatay .kutu-etiket {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}
.kaydir-yatay .kutu-etiket > .rozet-ozel { flex: 0 0 auto; }


/* ---- Alt sekme çubuğu: KAÇ SEKME VARSA EŞİT BÖLÜŞÜR ----
   Çubuk 5 sütuna sabitti. Kullanıcının yetkisi olmayan sekme hiç basılmıyor;
   4 sekmesi olanda 5. sütun boş kalıyor, sekmeler sola toplanıp sağda boşluk
   bırakıyordu — düzensiz görünüyordu. Otomatik sütunla kaç sekme basılırsa
   basılsın çubuğu eşit paylaşırlar; PHP tarafında sayı bilmeye gerek yok. */
.tabbar {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
}

/* Planlanan dönüş satırında canlı önizleme — veriliş/gün yazılırken
   ne olacağını gösterir, kaydedilene kadar geçicidir. */
.kd-onizle {
    font-size: 11px;
    font-weight: 700;
    color: var(--altin-koyu, #8a6508);
    margin-left: 5px;
    opacity: .85;
}

/* Onay penceresindeki çok satırlı yazı satır satır dursun.
   "Veriliş: … / Gün sayısı: … / Planlanan dönüş: …" tek paragrafa
   yapışınca okunmuyordu; alt alta okunmalı. */
#onayMesaj { white-space: pre-line; line-height: 1.65; }

/* =========================================================
   iPHONE DÜZELTMELERİ (18.08.2026)
   Android'de sorun yoktu; üç kusur da yalnız iOS'ta çıkıyordu.
   ========================================================= */

/* 1) ÜST ÇUBUK — logo durum çubuğunun altında eziliyordu.
   Sebep: box-sizing border-box olduğu için `height:58px` padding'i de
   kapsıyor. iPhone'da env(safe-area-inset-top) ~59px olduğundan yükseklik
   tamamen padding'e gidiyor, markaya yer kalmıyordu. Android'de bu değer
   0 olduğu için fark edilmiyordu. Yükseklik artık güvenli alanı EK olarak
   alır; içerik yüksekliği her cihazda 58px kalır. */
.topbar { height: calc(58px + env(safe-area-inset-top)); }

/* 2) ŞERİT KARTLARI — plaka üstten, sanayi açıklaması alttan kırpılıyordu.
   Sebep: kartın yüksekliği sabitti (`height`) ve içerik taşınca
   `.kutu-tap`taki overflow:hidden kesiyordu. Rezervasyon rozeti gibi
   fazladan bir satır çıkınca iOS'un daha uzun satır yüksekliğiyle taşıyordu.
   `min-height` ile kart gerekirse uzar; flex satırı zaten hepsini en uzuna
   eşitlediği için şeritler yine hizalı kalır. */
.kaydir-yatay .kutu { height: auto; min-height: 136px; }
@media (max-width: 699px) {
    .kaydir-yatay .kutu { height: auto; min-height: 118px; }
}

/* 3) DURUM ROZETİ — "Boşta" kelimesi "Boşt / a" diye ikiye bölünüyordu.
   Sebep: `.kutu-etiket`teki overflow-wrap:anywhere kelimenin ortasından
   kırıyordu. Rozetler artık bütün kalır, yan yana sığmazsa alt satıra
   TAMAMI iner. */
.kutu-etiket {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
    overflow-wrap: normal;
}
.kutu-etiket > * { white-space: nowrap; }

/* =========================================================
   MARKA LOGOSU — firmanın logosu (Firma Ayarları'ndan yüklenir)
   Aynı görsel üç yerde: yan menü, üst çubuk ve giriş ekranı.
   Kutunun lacivert zemini kalkar; logonun kendi kırmızı zemini
   köşelere kadar dolar. Altın çerçeve marka kimliği için kalır.
   ========================================================= */
.brand-mark, .auth-mark {
    background: none;
    padding: 0;
    overflow: hidden;
}
.brand-mark img, .auth-mark img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

/* =========================================================
   WHATSAPP SOHBET — müşteri yazışma ekranı (pages/wasap_sohbet.php)
   Solda sohbet listesi, sağda balonlu akış. Telefonda tek sütuna
   iner: liste tam ekran, sohbet açılınca listeyi örter.
   ========================================================= */
.sohbet-duzen {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 14px;
    align-items: stretch;
    min-height: 60vh;
}
.sohbet-yan {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 74vh;
}
.sohbet-ara { padding: 10px; border-bottom: 1px solid var(--border); }
.sohbet-liste { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; }

.sohbet-satir {
    display: flex; flex-direction: column; gap: 3px;
    width: 100%; text-align: left;
    padding: 11px 13px;
    background: none; border: 0; border-bottom: 1px solid var(--border);
    cursor: pointer; font: inherit; color: inherit;
}
.sohbet-satir:hover { background: #FAFBFD; }
.sohbet-satir.on { background: var(--brand-soft); }
.sohbet-satir-ust { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.sohbet-satir-ust strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sohbet-satir-alt { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.sohbet-onizle {
    font-size: 12.5px; color: var(--text-soft);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sohbet-rozet {
    background: #12B76A; color: #fff;
    font-size: 11px; font-weight: 700;
    min-width: 19px; height: 19px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
}
.sohbet-acik { font-size: 11px; color: #05603A; }

.sohbet-ana {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    display: flex; flex-direction: column;
    max-height: 74vh; overflow: hidden;
}
.sohbet-bos {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px;
    padding: 40px 20px; text-align: center; color: var(--text-soft);
}
.sohbet-bos .ico { width: 34px; height: 34px; opacity: .5; }
.sohbet-govde { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.sohbet-bas {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 13px; border-bottom: 1px solid var(--border);
}
.sohbet-kisi { flex: 1; min-width: 0; }
.sohbet-kisi strong { display: block; font-size: 15px; }
.sohbet-kisi .hint { font-size: 12px; }
.sohbet-geri { display: none; }

.sohbet-akis {
    flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 14px; display: flex; flex-direction: column; gap: 8px;
    background: #F7F8FA;
}
.sohbet-balon {
    max-width: 78%;
    padding: 8px 11px;
    border-radius: 12px;
    font-size: 14px; line-height: 1.45;
    display: flex; flex-direction: column; gap: 3px;
    word-break: break-word;
}
.sohbet-balon.gelen { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); }
.sohbet-balon.giden { align-self: flex-end;   background: #DCF8C6; border: 1px solid #C7EDAE; }
.sohbet-metin { white-space: pre-wrap; }
.sohbet-saat { font-size: 10.5px; color: var(--text-soft); align-self: flex-end; }
.sohbet-tik { color: var(--text-soft); }
.sohbet-tik.okundu { color: #1F8FE8; }
.sohbet-tik.hata { color: var(--danger); font-weight: 700; }
.sohbet-olay {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-soft); font-weight: 700;
}
.sohbet-resim { max-width: 100%; border-radius: 8px; display: block; cursor: pointer; }

.sohbet-yaz {
    display: flex; gap: 8px; align-items: flex-end;
    padding: 10px; border-top: 1px solid var(--border);
}
.sohbet-yaz textarea { resize: none; min-height: 40px; max-height: 140px; }
.sohbet-kilit { padding: 12px; border-top: 1px solid var(--border); background: #FFF8E6; }
.sohbet-sablon { display: grid; gap: 8px; margin-top: 8px; }

/* Müşteri kartı — kiralama penceresindeki bölüm */
.musteri-kart { display: grid; gap: 8px; }
.musteri-kart .ozel-kutu { margin-top: 4px; }

@media (max-width: 820px) {
    .sohbet-duzen { grid-template-columns: 1fr; }
    .sohbet-yan { max-height: none; }
    .sohbet-yan.gizli-mobil { display: none; }
    .sohbet-ana { max-height: 72vh; }
    .sohbet-geri { display: inline-flex; }
    .sohbet-balon { max-width: 88%; }
}

/* Gelecek Araçlar — araca bağlı elle satır.
   Aracın altına yazılmış borç/not satırı; araç uzatılıp başka güne kayarsa
   bu satır da onunla taşınır. Soldaki ince çizgi hangi araca ait olduğunu
   gösterir, hücrenin dibindeki serbest satırlardan ayırır. */
.ayt-bagli { border-left: 3px solid var(--brand); padding-left: 5px; }

/* Düzenleme Geçmişi — bölüm düğmeleri.
   Çok bölüm olduğu için tek satırda kaydırmak yerine alt alta sarar;
   telefonda da hepsi görünür. Sayı rozeti düğmenin içinde durur. */
.log-dugmeler { flex-wrap: wrap; overflow: visible; margin: 0 0 10px; }
.log-dugmeler .sekme {
    display: inline-flex; align-items: center; gap: 7px;
    cursor: pointer; padding: 8px 13px;
}
.log-dugmeler .sekme .ico { width: 15px; height: 15px; opacity: .75; }
.log-dugmeler .sekme.on .ico { opacity: 1; }
.sekme-sayi {
    display: inline-block; min-width: 20px; padding: 1px 6px;
    border-radius: 999px; background: var(--surface-2);
    font-size: 11px; font-weight: 700; color: var(--text-muted); text-align: center;
}
.log-dugmeler .sekme.on .sekme-sayi { background: rgba(255,255,255,.22); color: #fff; }

/* ---- Borç tablosu sütun dengesi (09.09.2026) ----
   Masraf sütunu eklenince toplam sekiz sütun oldu; tarayıcı isim ve açıklamayı
   113/158 px'e sıkıştırıp metni üç dört satıra sarıyordu. Bu ikisine taban
   genişlik verilir, işlem sütunundaki düğmeler biraz daraltılır. */
@media (min-width: 900px) {
    .borc-tablo th:nth-child(1), .borc-tablo td:nth-child(1) { min-width: 175px; }
    .borc-tablo th:nth-child(5), .borc-tablo td:nth-child(5) { min-width: 215px; }
    .borc-tablo td:last-child .btn-sm { padding-left: 9px; padding-right: 9px; font-size: 12.5px; }
}

/* Borç sayfası — toplamları gizleme düğmesi (kutuların üstünde, sağda) */
.borc-gizle-satir { display: flex; justify-content: flex-end; margin: 0 0 8px; }
.borc-gizle-satir .btn { gap: 6px; }
.hata-yazi { color: var(--danger); font-size: 13px; min-height: 18px; margin: 6px 0 0; }

/* ---------------------------------------------------------
   KABİS kutusu — üst köşe (15.10.2026): KABİS'e eklenmeyi bekleyen
   araçlar "Bekliyor" / "Ekleniyor…" / "Eklendi". Masaüstünde başlığın
   sağ üstünde, telefonda başlığın altında tam genişlik.
   --------------------------------------------------------- */
.kbs-kutu {
    flex: none; align-self: flex-start; width: 320px; max-width: 100%; margin-left: auto;
    background: #fff; border: 1px solid var(--border); border-radius: var(--r);
    box-shadow: 0 1px 2px rgba(16, 30, 54, .05), 0 8px 18px -14px rgba(16, 30, 54, .35);
    font-size: 12.5px; overflow: hidden; position: relative; z-index: 1;
}
.kbs-kutu-bas { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.kbs-kutu-ad { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; color: var(--brand); }
.kbs-kutu-ad .ico { width: 15px; height: 15px; }
.kbs-kutu-ozet { margin-left: auto; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.kbs-kutu-ozet.ton-ok    { background: #E8F6EE; color: #17643A; }
.kbs-kutu-ozet.ton-bekle { background: #FFF3DC; color: #8A5300; }
.kbs-kutu-ozet.ton-isle  { background: #EAF1FF; color: #1F4FB5; }
.kbs-kutu-ozet.ton-hata  { background: #FDECEC; color: #A32222; }
.kbs-kutu-liste { list-style: none; margin: 0; padding: 2px 0; border-top: 1px solid var(--border); }
.kbs-kutu-liste li > a, .kbs-kutu-liste li > span { display: flex; align-items: center; gap: 7px; padding: 6px 10px; color: inherit; text-decoration: none; min-width: 0; }
.kbs-kutu-liste li > a:hover { background: var(--surface-2); }
.kbs-plaka {
    flex: none; padding: 1px 6px; border: 1px solid #C9D2E0; border-radius: 4px; background: #fff;
    font-size: 11.5px; font-weight: 800; letter-spacing: .03em; color: #121C2E; white-space: nowrap;
}
.kbs-firma { min-width: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kbs-durum { margin-left: auto; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; }
.kbs-durum b { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; white-space: nowrap; }
.kbs-durum b::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.kbs-durum small { font-size: 10.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.kbs-kutu-liste .ton-isle  .kbs-durum b { color: #1F4FB5; }
.kbs-kutu-liste .ton-bekle .kbs-durum b { color: #A15C00; }
.kbs-kutu-liste .ton-ok    .kbs-durum b { color: #17643A; }
.kbs-kutu-liste .ton-hata  .kbs-durum b { color: #B42318; }
.kbs-kutu-alt { display: block; padding: 6px 10px 8px; border-top: 1px solid var(--border); font-size: 11.5px; font-weight: 700; color: var(--brand); text-decoration: none; }
/* Durmuş firma satırı: "KABİS'e manuel giriş yapıldığı için robot devam edemiyor" */
.kbs-kutu-uyari { padding: 7px 10px; border-top: 1px solid #F3D9A4; background: #FFF6E3; color: #7A4A00; font-size: 11.5px; font-weight: 600; line-height: 1.4; }
.kbs-kutu-uyari.ton-hata { background: #FDECEC; border-top-color: #F5C2C2; color: #8F1D1D; }
.kbs-kutu-uyari small { font-weight: 600; opacity: .8; }
.kbs-kutu-uyari a { color: inherit; font-weight: 800; text-decoration: underline; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
    .kbs-kutu-liste .ton-isle .kbs-durum b::before { animation: kbsNabiz 1s ease-in-out infinite; }
}
@keyframes kbsNabiz { 50% { opacity: .25; transform: scale(.7); } }
@media (min-width: 900px) { .page-head.kbs-var { align-items: flex-start; } }
@media (max-width: 899px) {
    .page-head.kbs-var { flex-wrap: wrap; }
    .kbs-kutu { order: 3; width: 100%; margin-left: 0; }
}

/* ---------------------------------------------------------
   KABİS Geçmişi — Düzenleme Geçmişi › KABİS Geçmişi (yalnız yönetici)
   Her kiralamanın KABİS'e eklenmesi / çıkarılması, kim yaptı; robotun defteri.
   --------------------------------------------------------- */
.kbs-gecmis-suz { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 12px; }
.kbs-gecmis-suz .input { width: auto; flex: 1 1 140px; min-width: 0; }
.kbs-gecmis-suz input[type=date] { flex: 0 1 150px; }
.kbs-gecmis { display: flex; flex-direction: column; }
.kbs-gecmis-kalem { padding: 10px 0; border-top: 1px solid var(--border); }
.kbs-gecmis-kalem:first-child { border-top: 0; }
.kbs-gecmis-ust { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kbs-gecmis-iki { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin-top: 6px; }
.kbs-gecmis-yon { min-width: 0; font-size: 13px; }
.kbs-gecmis-kim { margin-top: 3px; font-size: 12.5px; color: var(--text-soft); }
.kbs-gecmis-mesaj { margin-top: 4px; font-size: 13px; color: var(--text-muted); }
.kbs-gecmis-mesaj.hata { color: var(--danger); font-weight: 600; }
.kbs-gecmis-adim { margin-top: 6px; font-size: 12.5px; }
.kbs-gecmis-adim summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.kbs-gecmis-sayfa { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; }
.kbs-gecmis-zaman { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.kbs-gecmis-firma { display: inline-flex; align-items: center; padding: 1px 8px; border: 1px solid var(--border); border-radius: 999px;
                    font-size: 11.5px; font-weight: 700; letter-spacing: .03em; color: var(--text-soft); background: var(--surface-2); }
.kbs-gecmis-satir { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.kbs-gecmis-satir .kbs-gecmis-zaman { min-width: 120px; }
@media (max-width: 640px) { .kbs-gecmis-iki { grid-template-columns: 1fr; } }