/*
    Bileşen katmanı.

    Sınıf adları mobildeki stil anahtarlarının karşılığı (WEB-PLAN §7):
        Card → .card · InnerCard → .card-inner · Hero → .hero · IconPill → .icon-pill
        Badge → .badge · InfoChip → .chip · WarningCard → .notice--warning
        EmptyStateHalo → .empty
    Yeni bir bileşen eklerken önce mobilde karşılığı var mı diye bakılmalı; varsa aynı
    adla ve aynı jetonlarla yazılmalı.
*/

/* ══════════════════════════════════════════════════════════ Temel */

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

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

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-family);
    font-size: var(--font-base);
    line-height: 1.32;
    color: var(--gray-900);
    /* Sabit (fixed) arka plan denendi ve geri alındı: kaydırılmış sayfa bazı
       yollarda (ekran görüntüsü, yazdırma) hiç boyanmıyordu. Geçiş sayfayla
       birlikte kayıyor; fark göze çarpmıyor, risk ortadan kalkıyor. */
    background: var(--canvas-gradient);
}

h1, h2, h3 {
    margin: 0;
    line-height: 1.15;
    letter-spacing: -0.3px;
}

p {
    margin: 0;
}

a {
    color: var(--link);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Klavyeyle gezinen kullanıcı nerede olduğunu görmeli. */
:focus-visible {
    outline: 2px solid var(--brand-lift);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════ Yerleşim */

/*
    Uygulama kolonu. Mobilde BasePage içeriği 680 DIP'te sınırlayıp ortalıyor; buradaki
    karşılığı bu. Tanıtım sayfası bu kolona sıkışmaz, kendi düzenini kurar (.wide).
*/
.shell {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--page-pad);
    display: flex;
    flex-direction: column;
    gap: var(--page-pad);
}

.wide {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ══════════════════════════════════════════════════════════ Hero */

/*
    Hero artık dolu bir renk levhası değil, zeminin üstüne çalan ince bir cam.
    Renkler jetonlardan geliyor (bkz. tokens.css): iki tema da aynı bileşeni
    kullanıyor, yalnızca jetonlar değişiyor.
*/
.hero {
    background: var(--hero-gradient);
    color: var(--hero-ink);
    padding: 18px 18px 22px;
    border-radius: 0 0 var(--radius-hero) var(--radius-hero);
    border-bottom: 1px solid var(--hero-edge);
    box-shadow: var(--shadow-hero);
}

.hero h1 {
    font-size: var(--font-xl);
    font-weight: 600;
    letter-spacing: -0.2px;
}

.hero p {
    margin-top: 4px;
    font-size: var(--font-sm);
    line-height: 1.3;
    color: var(--hero-ink-soft);
}

/* Cam zeminin üstünde duran kutucuk. */
.hero-tile {
    background: var(--hero-tile);
    border: 1px solid var(--hero-tile-border);
    border-radius: var(--radius-inner);
    padding: 10px 12px;
}

/* ══════════════════════════════════════════════════════════ Yüzeyler */

.card {
    background: var(--surface-gradient);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 14px;
}

/* Kartın içindeki tekil kayıt: yüzeyin üstünde değil, içinde — gölge yok. */
.card-inner {
    background: var(--surface-inner-gradient);
    border: 1px solid var(--border-inner);
    border-radius: var(--radius-inner);
    padding: 12px;
}

.card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.card__title {
    font-size: var(--font-md);
    font-weight: 600;
    letter-spacing: 0.1px;
}

/* Bölüm ikonunu markaya ait yumuşak bir kareye oturtur. */
.icon-pill {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: var(--radius-chip);
    background: var(--brand-soft);
    color: var(--on-brand-soft);
}

.icon-pill svg {
    width: 18px;
    height: 18px;
}

/* ══════════════════════════════════════════════════════════ Rozet ve çip */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: var(--font-xs);
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #fff;
    background: var(--status-cancelled);
}

.badge--pending { background: var(--status-pending); }
.badge--progress { background: var(--status-in-progress); }
.badge--ready { background: var(--status-ready); }
.badge--completed { background: var(--status-completed); }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: var(--radius-chip);
    border: 1px solid rgba(11, 110, 121, 0.18);
    background: var(--brand-soft);
    color: var(--on-brand-soft);
    font-size: var(--font-xs);
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* ══════════════════════════════════════════════════════════ Uyarı şeridi */

.notice {
    border-radius: var(--radius-card);
    padding: 12px 14px;
    font-size: var(--font-sm);
    line-height: 1.35;
    border: 1px solid var(--border);
}

.notice--warning {
    background: var(--warning-surface);
    border-color: var(--warning-border);
    color: var(--warning-text);
}

.notice--danger {
    background: rgba(224, 59, 78, 0.08);
    border-color: rgba(224, 59, 78, 0.35);
    color: var(--danger);
}

/* ══════════════════════════════════════════════════════════ Butonlar */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--radius-button);
    background: var(--brand);
    color: #fff;
    font-family: inherit;
    font-size: var(--font-base);
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}

.btn:hover { background: #0a7b87; text-decoration: none; }
.btn:active { background: var(--brand-deep); transform: scale(0.98); }

.btn:disabled {
    background: var(--gray-200);
    color: var(--gray-400);
    cursor: not-allowed;
    transform: none;
}

.btn--block { width: 100%; }

.btn--ghost {
    background: transparent;
    color: var(--brand);
    border: 1.5px solid #BCE1E5;
}

.btn--ghost:hover { background: var(--brand-soft); }
.btn--ghost:active { background: var(--brand-soft); }

/* ══════════════════════════════════════════════════════════ Form */

.field {
    display: block;
    margin-top: 12px;
}

.field__label {
    display: block;
    margin: 0 0 5px 2px;
    font-size: var(--font-sm);
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--gray-600);
}

.field__input {
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    font-family: inherit;
    font-size: var(--font-base);
    color: var(--gray-900);
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-inner);
    transition: border-color var(--dur-fast) var(--ease-out);
}

.field__input:focus {
    border-color: var(--brand-lift);
    outline: none;
}

.field__input::placeholder {
    color: var(--gray-400);
    opacity: 1;
}

/*
    Tarayıcının kendi doldurduğu alan.

    Chrome, otomatik doldurduğu alanın zeminini kendi AÇIK rengiyle (beyaza çalan
    lavanta) boyuyor ve bunu `background` ile ezmek mümkün değil — koyu temada
    sayfanın ortasında beyaz bir kutu kalıyordu. Tek yolu iç gölgeyi zemin gibi
    kullanmak; metin rengi de ayrı bir özellikle (-webkit-text-fill-color)
    zorlanmak zorunda, `color` otomatik doldurmada yok sayılıyor.
*/
.field__input:-webkit-autofill,
.field__input:-webkit-autofill:hover,
.field__input:-webkit-autofill:focus {
    box-shadow: 0 0 0 100px var(--surface) inset;
    -webkit-text-fill-color: var(--gray-900);
    caret-color: var(--gray-900);
    transition: background-color 10000s ease-out 0s;
}

.field__error {
    margin-top: 6px;
    font-size: var(--font-sm);
    color: var(--danger);
}

/* ══════════════════════════════════════════════════════════ Metin yardımcıları */

.muted {
    color: var(--gray-500);
    font-size: var(--font-sm);
    line-height: 1.38;
}

.page-title {
    font-size: var(--font-2xl);
    font-weight: 600;
}

.stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.row--between {
    justify-content: space-between;
}

/* ══════════════════════════════════════════════════════════ Marka bloğu */

.brand-tile {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin: 0 auto;
    border-radius: 24px;
    background: var(--brand-tile-gradient);
    box-shadow: var(--shadow-tile);
    color: #fff;
    font-size: var(--font-3xl);
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ══════════════════════════════════════════════════════════ Giriş hareketi */

/*
    Mobilde sayfa içeriği 170 ms'lik kısa bir yükselişle yerine oturuyor
    (BasePage.StartContentAppearance); web'deki karşılığı.
*/
.enter {
    animation: enter var(--dur-base) var(--ease-out) both;
}

@keyframes enter {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════ Uygulama kabuğu */

/*
    ── Üst çubuk neden yeniden yazıldı ─────────────────────────────────────────
    Eski hâli düz bir marka rengi levhasıydı ve hemen altındaki hero da aynı marka
    geçişiyle başlıyordu: iki bant tek bir turkuaz kütleye yapışıyor, çubuk "sayfanın
    üstü" gibi değil "hero'nun devamı" gibi duruyordu. Üstüne marka adı ile menü
    bağlantıları aynı şeritte, birbirine yakın ağırlıkta yan yanaydı — hangisinin marka
    hangisinin gezinme olduğu okunmuyor, "Çıkış" da bir düğmeye benzemiyordu. Bağlantı
    yazıları %87 beyazdı ve açık marka zemininde sönük kalıyordu.

    Çözüm palete dokunmadan, aynı marka merdivenini kullanarak:
    - Zemin merdivenin KOYU ucuna iniyor (deep → ink). Hero açık uçta kaldığı için iki
      bant ayrışıyor ve beyaz yazı koyu zeminde kuvvetleniyor.
    - Altta marka vurgusundan ince bir çizgi: iki bandın birleştiği yer belirsiz değil.
    - Marka bir işaret + kelime; menüden dikey bir çizgiyle ayrılıyor.
    - Bağlantılar hap biçiminde ve BULUNULAN SAYFA işaretli.
*/
.appbar {
    background: linear-gradient(180deg, var(--brand-deep) 0%, var(--brand-ink) 100%);
    color: #fff;
    border-bottom: 1px solid rgba(23, 191, 206, 0.28);
    position: relative;
    z-index: 2;
}

/*
    Üst çubuk tek satırdı ve sarmalamıyordu.

    İşletme sahibinde altı bağlantı var (Panel · Randevular · Kasa · Personel ·
    Hizmetler · Şubeler); marka ve "Çıkış" ile birlikte satırın en dar hâli 440
    pikselden genişti. Telefonda (≈390 piksel) çubuk viewport'u aşınca BELGE
    genişliyor ve sağda gövde renginin bitip html'in başladığı siyah bir şerit
    kalıyordu — kullanıcı bunu "sağa doğru siyah boşluk" diye gördü; yan çevirince
    genişlik yettiği için kayboluyordu.

    Çözüm iki katmanlı: dar ekranda bağlantılar kendi satırına iniyor, oraya da
    sığmazsa şerit kendi içinde yatay kayıyor. Sayfa gövdesi hiçbir durumda kaymıyor.
*/
/*
    Çubuğun genişliği İÇERİK KOLONUNA bağlıydı (--content-max, 760 piksel). Kabuk bir
    sayfa öğesi değil; menüde dokuz bağlantı, marka ve "Çıkış" varken 760 piksele
    sığmıyor ve geniş ekranda bile üç satıra kırılıyordu. Kabuk sayfanın en geniş
    kolonuyla (1080) aynı hizada, ona nefes payı bırakacak kadar geniş duruyor.
*/
.appbar__inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 10px var(--page-pad);
    display: flex;
    align-items: center;
    gap: 8px 14px;
    flex-wrap: wrap;
}

.appbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    flex: 0 0 auto;
    padding-inline-end: 16px;
    border-inline-end: 1px solid rgba(255, 255, 255, 0.16);
}

.appbar__brand:hover { text-decoration: none; }

/*
    Marka işareti "AY" monogramı değil artık, logonun simgesi.

    Tek varyant yetiyor: üst çubuk her iki temada da koyu marka renginde, yani
    koyu zemin için çizilmiş olan her zaman doğru. Altındaki gradyan karo kalktı —
    simgenin kendi rengi var, karonun içinde ikinci bir zemin gürültü oluyordu.
*/
.appbar__mark {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    background: url("../img/ikon-koyu.png") center / contain no-repeat;
}

.appbar__word {
    font-size: var(--font-md);
    font-weight: 600;
    letter-spacing: -0.2px;
    white-space: nowrap;
}

.appbar__nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    /* Kaydırma çubuğu çubuğun içinde yer kaplamasın. */
    scrollbar-width: none;
}

.appbar__nav::-webkit-scrollbar { display: none; }

.appbar__nav a { white-space: nowrap; }

/* Çıkış her zaman sağ uçta; bağlantılar alt satıra indiğinde de. */
.appbar__inner > form { margin-inline-start: auto; }

@media (max-width: 720px) {
    /* Bağlantılar kendi satırına: marka ve Çıkış üstte kalıyor. */
    .appbar__nav {
        order: 3;
        flex: 1 0 100%;
        padding-bottom: 2px;
    }

    /* Menü alt satıra indiğinde ayıracak bir şey kalmıyor; çizgi havada asılı kalırdı. */
    .appbar__brand {
        padding-inline-end: 0;
        border-inline-end: 0;
    }
}

.appbar__nav a {
    display: inline-flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: var(--radius-chip);
    color: rgba(255, 255, 255, 0.74);
    font-size: var(--font-sm);
    font-weight: 600;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

.appbar__nav a:hover {
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    text-decoration: none;
}

/*
    Bulunulan sayfa. Dolgu + içe kenarlık, alt çizgi değil: çubuk dar ekranda kendi
    içinde yatay kayabiliyor ve alt çizgi kesildiği yerde yarım kalıyordu.
*/
.appbar__nav a.is-active {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.appbar__action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: var(--radius-chip);
    color: #fff;
    font-family: inherit;
    font-size: var(--font-sm);
    font-weight: 600;
    padding: 8px 13px;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}

.appbar__action:hover {
    background: rgba(255, 255, 255, 0.20);
    border-color: rgba(255, 255, 255, 0.46);
}

/* ══════════════════════════════════════════════════════════ Liste satırı */

/* Tıklanabilir kayıt satırı — mobildeki InnerCard + dokunuş geri bildiriminin karşılığı. */
.record {
    display: block;
    color: inherit;
    transition: transform var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}

.record:hover {
    text-decoration: none;
    border-color: rgba(11, 110, 121, 0.35);
}

.record:active { transform: scale(0.985); }

/* ══════════════════════════════════════════════════════════ Boş durum */

.empty {
    text-align: center;
    padding: 28px 14px;
}

.empty__halo {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
}

.empty__title {
    font-size: var(--font-base);
    font-weight: 600;
    color: var(--gray-600);
}

.empty__text {
    margin-top: 4px;
    font-size: var(--font-sm);
    color: var(--gray-500);
}

/* ══════════════════════════════════════════════════════════ Eylem grubu */

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.actions .btn {
    min-height: 34px;
    font-size: var(--font-sm);
    border-radius: var(--radius-chip);
    padding: 0 12px;
}

.btn--danger {
    background: transparent;
    color: var(--danger);
    border: 1.5px solid var(--danger);
}

.btn--danger:hover { background: rgba(224, 59, 78, 0.08); }

/* ══════════════════════════════════════════════════════════ Yardımcı sınıflar */

/*
    Satır içi style="" KULLANILMIYOR.

    İçerik güvenlik politikası (style-src 'self') satır içi stilleri engelliyor ve bu
    bilinçli: bir XSS açığında saldırganın sayfayı yeniden boyamasının en kolay yolu
    satır içi stildir. İlk taslakta birkaç yerde kullanılmıştı ve tarayıcı hepsini
    sessizce bloke etti — düzen bozuldu. Aşağıdaki sınıflar o boşluğu dolduruyor.
*/

.u-auto-start { margin-inline-start: auto; }
.u-mt-sm { margin-top: 10px; }
.u-mt { margin-top: 14px; }
.u-mt-lg { margin-top: 20px; }
.u-center { text-align: center; }
.u-tight { gap: 0; }

/*
    Yalnızca ekran okuyucu için. Logo kelimeyi zaten çiziyor ama bir görsel
    başlık değil; sayfanın h1'i metin olarak kalmalı.
*/
.u-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Giriş, doğrulama gibi tek sütunlu kimlik ekranları. */
.shell--auth {
    max-width: 420px;
    padding-top: 44px;
}

/* Hero bloğunun içindeki dar başlık şeridi. */
.hero__strip {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* ══════════════════════════════════════════════════════════ İşletme paneli */

/*
    Bu ekran mobildeki 680 piksellik kolona sığmıyor: sıra listesi ve kasa yan yana
    durduğunda tek bakışta okunuyor, alt alta konduğunda kaydırma gerektiriyor.
    Geniş kolon yalnızca burada; kimlik ve liste ekranları dar kolonda kalıyor.
*/
.shell--wide { max-width: 1080px; }

/* Şube seçici: sekme görünümlü ama gerçek butonlar (GET form), betik yok. */
.switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.switcher__item {
    padding: 9px 14px;
    border-radius: var(--radius-chip);
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--gray-600);
    font-family: inherit;
    font-size: var(--font-sm);
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

.switcher__item:hover { border-color: var(--brand-lift); color: var(--brand); }

.switcher__item.is-active {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand);
}

/* ── Sayaçlar ─────────────────────────────────────────────────────────────── */

.metrics {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.metric {
    padding: 16px;
    border-radius: var(--radius-card);
    background: var(--surface-gradient);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
}

.metric__value {
    display: block;
    font-size: 27px;
    font-weight: 600;
    letter-spacing: -0.5px;
    line-height: 1.1;
    color: var(--brand);
}

.metric__value--progress { color: var(--status-in-progress); }
.metric__value--ready { color: var(--status-ready); }
.metric__value--money { font-size: 21px; color: var(--gray-900); }

.metric__label {
    display: block;
    margin-top: 4px;
    font-size: var(--font-xs);
    letter-spacing: 0.15px;
    color: var(--gray-500);
}

/* ── İki kolon ────────────────────────────────────────────────────────────── */

.cols {
    display: grid;
    gap: var(--page-pad);
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: start;
}

@media (max-width: 900px) {
    .cols { grid-template-columns: 1fr; }
}

/* ── Sıra satırı ──────────────────────────────────────────────────────────── */

.queue__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.queue__no {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: var(--font-sm);
    font-weight: 600;
}

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

.queue__ident strong {
    display: block;
    font-size: var(--font-md);
}

/* Şu an yapılan hizmet: satırın en çok bakılan bilgisi. */
.queue__now {
    display: block;
    margin-top: 2px;
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--status-in-progress);
}

.queue__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.queue__total {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--gray-600);
}

.queue__progress {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-inner);
    display: grid;
    gap: 8px;
}

/* Doluluk onluk kademelerle: satır içi stil yok, CSP bozulmuyor. */
.qbar {
    height: 4px;
    border-radius: 999px;
    background: var(--gray-200);
    overflow: hidden;
}

.qbar > i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand-lift), var(--brand));
    width: 0;
}

.qbar--p0 > i { width: 0; }
.qbar--p10 > i { width: 10%; }
.qbar--p20 > i { width: 20%; }
.qbar--p30 > i { width: 30%; }
.qbar--p40 > i { width: 40%; }
.qbar--p50 > i { width: 50%; }
.qbar--p60 > i { width: 60%; }
.qbar--p70 > i { width: 70%; }
.qbar--p80 > i { width: 80%; }
.qbar--p90 > i { width: 90%; }
.qbar--p100 > i { width: 100%; }

/* ── Adım listesi ─────────────────────────────────────────────────────────── */

.steps-list {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.steps-list__item {
    display: grid;
    grid-template-columns: 10px 1fr auto;
    align-items: center;
    gap: 10px;
    font-size: var(--font-sm);
}

.steps-list__state {
    font-size: var(--font-xs);
    color: var(--gray-400);
}

.dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gray-300);
}

.dot--done { background: var(--success); }
.dot--live { background: var(--status-in-progress); }

/* ── Para ─────────────────────────────────────────────────────────────────── */

.money--in { color: var(--success); }
.money--out { color: var(--danger); }

/* ══════════════════════════════════════════════════════ Faz 4-5 bileşenleri */

/*
    Aşağıdakiler işletme yazma ekranları (kayıt, kasa, şube, randevu) ve müşteri
    paneli için eklendi. Hepsi mevcut jetonlarla kuruldu; yeni renk ya da yeni
    yarıçap yok — tek yeni şey düzen.

    Satır içi stil YOK: içerik güvenlik politikası style-src 'self' olduğu için
    style="" nitelikleri tarayıcıda sessizce düşüyor. Değişken genişlikler sınıf
    kademeleriyle veriliyor (bkz. .qbar--pNN).
*/

/* ── Bildirim: olumlu ─────────────────────────────────────────────────────── */

.notice--ok {
    background: rgba(15, 158, 95, 0.09);
    border-color: rgba(15, 158, 95, 0.35);
    color: var(--success);
}

/* ── Oklu kayıt satırı ────────────────────────────────────────────────────── */

.record {
    display: flex;
    align-items: center;
    gap: 12px;
}

.record__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.record__sub {
    font-size: var(--font-sm);
    color: var(--gray-500);
}

.record__go {
    margin-inline-start: auto;
    color: var(--gray-400);
    font-size: var(--font-lg);
}

/* ── Form ─────────────────────────────────────────────────────────────────── */

/*
    İki kolonlu form. Tek kolon, altı alanlık bir formu gereksiz yere uzatıyor ve
    kullanıcıyı kaydırmaya zorluyordu; dar ekranda kendiliğinden tek kolona iniyor.
*/
.form-grid {
    display: grid;
    gap: 0 14px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Izgara içinde tüm satırı kaplaması gereken alan (açıklama, adres…). */
.form-grid .field--wide { grid-column: 1 / -1; }

.field__hint {
    margin: 5px 2px 0;
    font-size: var(--font-xs);
    color: var(--gray-400);
}

select.field__input,
textarea.field__input {
    /* Tarayıcı varsayılanı yazı tipini devralmıyor; alan kutusuyla aynı görünsün. */
    font-family: inherit;
    appearance: auto;
}

textarea.field__input {
    min-height: 78px;
    resize: vertical;
}

/* ── Eylem satırı ─────────────────────────────────────────────────────────── */

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.actions--end { justify-content: flex-end; }

.btn--sm {
    min-height: 34px;
    padding-inline: 12px;
    font-size: var(--font-sm);
    border-radius: var(--radius-chip);
}

/*
    İkincil eylem. .btn--ghost'tan farkı: bu, bir kartın İÇİNDE ve bir sürü kardeşin
    yanında duruyor — dolgusuz olması gerekiyor ki asıl eylem (başlat, tahsil et)
    öne çıksın.
*/
.btn--quiet {
    background: transparent;
    color: var(--gray-600);
    border: 1.5px solid var(--border);
    box-shadow: none;
}

.btn--quiet:hover { background: var(--brand-soft); color: var(--brand); }

/* ── Sekmeler ─────────────────────────────────────────────────────────────── */

/*
    .switcher şube seçici olarak doğdu ve butonlardan oluşuyordu. Randevu ve kasa
    ekranlarında aynı görünüm bağlantı olarak gerekiyor (adres çubuğunda taşınsın
    diye); iki seçici de aynı sınıfı paylaşsın.
*/
.switcher__item {
    text-decoration: none;
}

.switcher__item:hover { text-decoration: none; }

/* ── Tablo ────────────────────────────────────────────────────────────────── */

/*
    Kasa defteri gibi çok satırlı, çok kolonlu veri. Kart listesi bu veriyi
    okunmaz hâle getiriyordu: gözün kolonu takip etmesi gerekiyor.
    Dar ekranda tablo kendi içinde yatay kayıyor; sayfa gövdesi asla kaymıyor.
*/
.table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-inner);
    border: 1px solid var(--border-inner);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-sm);
}

.table th,
.table td {
    padding: 11px 14px;
    text-align: start;
    white-space: nowrap;
    border-bottom: 1px solid var(--border-inner);
}

.table th {
    font-size: var(--font-xs);
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--gray-500);
    background: var(--surface-inner-gradient);
}

.table tbody tr:last-child td { border-bottom: 0; }

/* Satır vurgusu: gözün uzun bir defterde satırı kaybetmemesi için. */
.table tbody tr:hover td { background: var(--brand-soft); }

/*
    ── Kolon dengesi ───────────────────────────────────────────────────────────
    İki ayrı hata vardı ve ikisi de aynı satırı "dengesiz" gösteriyordu:

    1. TUTAR başlığı sola, altındaki sayı sağa yaslıydı. Başlık ile değeri arasında
       görünür bir kayma oluyordu — sayı sütunlarında başlık da sayıyla aynı kenara
       yaslanmalı.
    2. Artan genişlik bütün kolonlara dağılıyordu: altı kısa kolon geniş bir kartta
       birbirinden kopuyor, satır seyrek ve savruk duruyordu. Artan yer tek bir
       kolona verilmeli — defterlerde bu kolon AÇIKLAMA'dır; diğerleri içeriği
       kadar yer tutar.
*/
.table th.num,
.table td.num {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

/* Boşluğu üstlenen kolon: açıklama. Diğerleri içeriklerine göre daralıyor. */
.table th.wrap,
.table td.wrap {
    white-space: normal;
    width: 100%;
    min-width: 180px;
}

/* Satır sonundaki eylem kolonu içeriği kadar; başlığı boş olduğu için yayılmasın. */
.table th:empty { width: 1px; }

/* Eylem/işaret kolonu: satır sonuna yaslı, tutar kolonuyla aynı kenarda biter. */
.table th.act,
.table td.act {
    width: 1px;
    text-align: end;
}

/* ── Seçim ızgarası ───────────────────────────────────────────────────────── */

/*
    Hizmet seçimi. Onay kutusu + etiket tek tıklanabilir yüzey olsun diye etiketin
    kendisi kart; kutuyu ıskalayan tıklama da seçiyor.
*/
.pick-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.pick {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-inner);
    border: 1.5px solid var(--border-inner);
    background: var(--surface-inner-gradient);
    cursor: pointer;
}

.pick:hover { border-color: rgba(11, 110, 121, 0.35); }

.pick input { accent-color: var(--brand); width: 17px; height: 17px; }

.pick__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.pick__name { font-weight: 600; }

.pick__meta { font-size: var(--font-xs); color: var(--gray-500); }

/* ── Saat ızgarası ────────────────────────────────────────────────────────── */

.slots {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
}

.slot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border-radius: var(--radius-chip);
    border: 1.5px solid var(--border-inner);
    background: var(--surface-inner-gradient);
    color: var(--gray-900);
    font-size: var(--font-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.slot:hover { border-color: var(--brand-lift); color: var(--brand); }

.slot input { position: absolute; opacity: 0; pointer-events: none; }

.slot:has(input:checked) {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* ── Başlık şeridi ────────────────────────────────────────────────────────── */

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
}

.page-head .page-title { font-size: var(--font-xl); }

.page-head__spacer { margin-inline-start: auto; }

.crumb {
    display: inline-block;
    margin-bottom: 10px;
    font-size: var(--font-sm);
}

/* ── Rozet çeşitleri ──────────────────────────────────────────────────────── */

.badge--muted { background: var(--status-cancelled); }
.badge--danger { background: var(--danger); }
.badge--warn { background: var(--status-pending); }
.badge--ok { background: var(--success); }

/* Yüzeyle aynı tonda, kenarlıklı rozet: rengi anlam taşımayan etiketler için. */
.badge--soft {
    background: var(--brand-soft);
    border: 1px solid rgba(11, 110, 121, 0.18);
    color: var(--on-brand-soft);
}

/* ── Özet kutucukları ─────────────────────────────────────────────────────── */

.tiles {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* ── Liste satırı ─────────────────────────────────────────────────────────── */

.line {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.line__main { flex: 1; min-width: 160px; }

.line__title { font-weight: 600; }

.line__sub {
    margin-top: 2px;
    font-size: var(--font-sm);
    color: var(--gray-500);
}

/* ── Atama satırı ─────────────────────────────────────────────────────────── */

/*
    Personel kartının alt şeridi: görev + şube + uygula, sağda sil.
    Açılır listeler esneyerek yer paylaşıyor; dar ekranda alt alta iniyorlar.
*/
.assign {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-inner);
}

.assign__form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.assign__form .field__input {
    flex: 1 1 140px;
    min-height: 34px;
    padding-block: 4px;
    font-size: var(--font-sm);
}

/* Silme sağ uçta ve tek başına: yanlışlıkla basmak zorlaşsın. */
.assign > form:last-child { margin-inline-start: auto; }

/* ── Dar ekran ────────────────────────────────────────────────────────────── */

@media (max-width: 560px) {
    .actions .btn { flex: 1 1 auto; }
    .page-head__spacer { margin-inline-start: 0; width: 100%; }
}

/* ══════════════════════════════════════════════════════════════ Tema seçici */

/*
    Üç durumlu anahtar: Açık · Koyu · Sistem.

    Seçenekler gerçek gönder düğmesi — betik çalışmasa da tema değişiyor. Görünüm
    şube seçicisinin (.switcher) kardeşi ama daha küçük: bu bir ayar, bir gezinme
    değil, ekranda öne çıkmaması gerekiyor.
*/
.tema {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--surface);
}

.tema__item {
    padding: 5px 12px;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--gray-500);
    font-family: inherit;
    font-size: var(--font-xs);
    font-weight: 600;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
}

.tema__item:hover { color: var(--gray-900); }

.tema__item.is-active {
    background: var(--brand-soft);
    color: var(--brand);
}

/* Kimlik ekranlarının altındaki şerit: ortada ve sayfadan ayrık. */
.tema-footer {
    align-items: center;
    padding-top: 0;
}

/*
    ── Kompakt hâl ─────────────────────────────────────────────────────────────
    Başlık çubuğuna sığan ikonlu biçim. Metin etiketleri ("Açık · Koyu · Sistem")
    çubukta 130 piksel yer kaplıyordu; ikonlar aynı işi üçte bir yerde yapıyor ve
    seçenek adı ipucu olarak duruyor.
*/
.tema--kompakt {
    gap: 2px;
    padding: 3px;
    flex: 0 0 auto;
}

.tema--kompakt .tema__item {
    display: grid;
    place-items: center;
    width: 28px;
    height: 26px;
    padding: 0;
}

/*
    Panel çubuğu koyu; oradaki seçici kendi kutusunu çizmiyor, çubuğun üstünde
    yarı saydam duruyor — "Çıkış" düğmesiyle aynı dil.
*/
.appbar .tema {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
}

.appbar .tema__item { color: rgba(255, 255, 255, 0.66); }

.appbar .tema__item:hover { color: #fff; }

.appbar .tema__item.is-active {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

/*
    Tanıtım sayfasının ve kimlik ekranlarının hapı koyu sahnede duruyor, v2.css'te
    (.v2-nav .tema, .v2-kimlik__tema .tema).
*/

/* ══════════════════════════════════════════════════ Yıkama yeri doluluğu */

/*
    Sıra ekranının üst şeridi — mobildeki kapasite özetinin karşılığı.
    Personel "neden başlatamıyorum" sorusunu düğmeye basmadan görüyor.
*/
.bays {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.bay {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-inner);
    border: 1px solid var(--border-inner);
    background: var(--surface-inner-gradient);
}

.bay__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gray-300);
    flex: 0 0 auto;
}

.bay__dot--idle { background: var(--success); }
.bay__dot--busy { background: var(--status-in-progress); }
.bay__dot--off { background: var(--status-cancelled); }

.bay__text { display: flex; flex-direction: column; line-height: 1.2; }

.bay__name { font-size: var(--font-xs); font-weight: 600; }

.bay__state { font-size: var(--font-xs); color: var(--gray-500); }

/*
    Takılı kalmış yeri boşaltma düğmesi. Karonun içinde ve küçük: gündelik bir
    eylem değil, yalnızca üstünde iş olmadığı hâlde "dolu" kalan yerde çıkıyor.
*/
.bay__free {
    margin-inline-start: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--warning);
    background: transparent;
    color: var(--warning);
    font-size: var(--font-xs);
    font-weight: 600;
    cursor: pointer;
}

.bay__free:hover {
    background: var(--warning);
    color: var(--surface);
}

/* ══════════════════════════════════════════════════════ Sıra satırı başlığı */

/* "Dış Yıkama yapılıyor", "Araç hazır · ödeme bekleniyor" — mobildeki StageText. */
.queue__stage {
    display: block;
    margin-top: 3px;
    font-size: var(--font-sm);
    color: var(--brand);
    font-weight: 600;
}

/*
    Hizmet seçimi + başlat, tek satırda.
    Mobilde önce düğmeye basılıp sonra hizmet soruluyor; web'de ikisi yan yana
    durabildiği için tek adımda hallediliyor — aynı sonuç, bir tık az.
*/
/*
    Seçim ve düğme TEK PARÇA: sarmalamıyorlar.

    Sarmalamaya izin verildiğinde açılır liste satırın tamamını kaplıyor, "Hizmete
    Başla" alt satıra düşüyor, yanındaki "Sıradan Çıkar" ise yukarıda kalıyordu —
    kullanıcının "buton kayması" dediği görüntü buydu. Liste artık büyümüyor; ikisi
    birlikte duruyor, dar ekranda birlikte alt satıra iniyorlar.
*/
.start-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
    min-width: 0;
}

.start-row .field__input {
    flex: 0 1 190px;
    min-width: 110px;
    min-height: 34px;
    padding-block: 4px;
    font-size: var(--font-sm);
}

/* ══════════════════════════════════════════════════════════ Hero şeridi */

/*
    Ekranın kimliği. Web'de yoktu: her sayfa üst çubuğun altında doğrudan gri bir
    kart listesiyle başlıyor, hepsi birbirine benziyordu — kullanıcı "hissiz ve boş"
    diye tarif etti. Mobilde her ekranın tepesinde bu şerit var; web de aynı.

    İçerik kolonu ile hizalı ama zemin tam genişlikte: şerit sayfanın bir parçası
    değil, sayfanın başlığı.
*/
.hero__inner {
    max-width: var(--content-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Geniş ekranlar (sıra, kasa) kendi kolon genişliğini kullanıyor. */
.hero--wide .hero__inner { max-width: 1080px; }

.hero__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: var(--radius-inner);
    background: var(--hero-tile);
    border: 1px solid var(--hero-tile-border);
    color: var(--on-brand-soft);
}

.hero__icon svg { width: 22px; height: 22px; }

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

.hero__count {
    font-size: var(--font-lg);
    font-weight: 600;
    line-height: 1;
}

/* Şeridin hemen altındaki içerik kolonu şeride yaslanmasın. */
.hero + .shell { padding-top: 18px; }

/* ══════════════════════════════════════════════════════ Tek kolonlu panel */

/*
    Kasa kartı olmayan kullanıcıda (personel, şef) sağ kolon neredeyse boştu ve
    ekranın yarısı beyaz duruyordu. Kasa yoksa sıra tam genişlikte; kısayollar da
    kolon değil, altında duran yatay bir şerit.
*/
.cols--single { grid-template-columns: 1fr; }

.shortcuts-row {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Kimlik ekranlarındaki bölüm ayırıcısı — mobildeki Divider. */
.divider {
    height: 1px;
    margin: 22px 0;
    border: 0;
    background: var(--border);
}

/* ══════════════════════════════════════════════ Etkileşim katmanı (ui.js) */

/*
    Aşağıdakilerin hepsi ilerici geliştirme: betik çalışmazsa sayfa bugünkü gibi
    çalışıyor, yalnızca yumuşaklık kayboluyor. Hiçbiri içeriğin görünmesine engel
    değil — gizlenen bir şey yok, eklenen bir şey var.
*/

/* ── Üst ilerleme çubuğu ──────────────────────────────────────────────────── */

/*
    Düğmeye basıldığında ekran donuyordu ve kullanıcı bir şey olup olmadığını
    anlamıyordu. Çubuk %90'a kadar akıyor, yanıt gelince tamamlanıyor: gerçek
    ilerlemeyi bilmiyoruz ama "çalışıyor" bilgisini dürüstçe veriyor.
*/
.ilerleme {
    position: fixed;
    inset: 0 0 auto 0;
    height: 3px;
    z-index: 1000;
    pointer-events: none;
    background: transparent;
}

.ilerleme > i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(90deg, var(--brand-lift), var(--brand-accent));
    box-shadow: 0 0 10px rgba(23, 191, 206, 0.6);
    transition: width 8s cubic-bezier(0.1, 0.7, 0.3, 1);
}

.ilerleme--akiyor > i { width: 90%; }

.ilerleme--bitti > i {
    width: 100%;
    transition: width 160ms var(--ease-out), opacity 220ms var(--ease-out) 120ms;
    opacity: 0;
}

/* ── Düğme bekleme durumu ─────────────────────────────────────────────────── */

/*
    Basılan düğme dönüyor ve kilitleniyor. Kilit yalnızca görsel değil: aynı formun
    iki kez gönderilmesi gerçek bir hata sınıfıydı (sıraya iki kez araç, kasaya iki
    kez kalem).
*/
.btn.is-pending {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn.is-pending::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    color: #fff;
    animation: donuyor 620ms linear infinite;
}

/* Dolgusuz düğmelerde dönen halka marka renginde. */
.btn--quiet.is-pending::after,
.btn--ghost.is-pending::after { color: var(--brand); }

.btn--danger.is-pending::after { color: var(--danger); }

@keyframes donuyor {
    to { transform: rotate(360deg); }
}

/* ── Bildirimler ──────────────────────────────────────────────────────────── */

/*
    Eskiden sonuç mesajı sayfanın en üstünde düz bir kutuydu; kullanıcı işlemden
    sonra en üste atılıyor ve orada onu buluyordu. Artık köşeden yumuşakça girip
    kendiliğinden kayboluyor — kullanıcı bulunduğu yerde kalıyor.

    Sayfa DURUMU (ör. "Şubeler okunamadı") bildirim değil; o hâlâ sayfanın içinde,
    yerinde duruyor. Bildirim geçici bir olayın sonucudur.
*/
.toast-stack {
    position: fixed;
    z-index: 900;
    inset-block-end: 18px;
    inset-inline: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}

@media (min-width: 640px) {
    .toast-stack {
        inset-inline: auto 18px;
        align-items: flex-end;
    }
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: min(420px, 100%);
    padding: 13px 14px;
    border-radius: var(--radius-card);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 12px 28px -10px rgba(8, 48, 57, 0.45),
                0 2px 6px rgba(8, 48, 57, 0.08);
    font-size: var(--font-sm);
    line-height: 1.4;
    pointer-events: auto;

    /* Betiksiz sayfada olduğu yerde, hareketsiz ama okunur duruyor. */
    opacity: 1;
    transform: none;
    transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}

/* Betik varsa giriş hareketi: aşağıdan yukarı, yumuşak. */
.js .toast {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
}

.js .toast--acik {
    opacity: 1;
    transform: none;
}

.js .toast--kapaniyor {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
}

.toast__icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

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

.toast__close {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--gray-400);
    font-family: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.toast__close:hover { background: var(--brand-soft); color: var(--gray-900); }

.toast--ok { border-color: rgba(15, 158, 95, 0.4); }
.toast--ok .toast__icon { color: var(--success); }

.toast--danger { border-color: rgba(224, 59, 78, 0.4); }
.toast--danger .toast__icon { color: var(--danger); }

/* ── Onay penceresi ───────────────────────────────────────────────────────── */

/*
    Geri alınamaz işlemler (sıradan çıkar, sil, pasife al) önce soruyor.
    Tarayıcının confirm() kutusu yerine <dialog>: sayfanın diliyle konuşuyor,
    temayla aynı görünüyor ve klavyeyle kapanıyor.
*/
.onay {
    padding: 0;
    border: 0;
    background: transparent;
    max-width: min(420px, calc(100vw - 28px));
}

.onay::backdrop {
    background: rgba(6, 26, 31, 0.55);
    backdrop-filter: blur(2px);
}

.onay__kutu {
    padding: 20px;
    border-radius: var(--radius-card);
    border: 1px solid var(--border);
    background: var(--surface-gradient);
    box-shadow: 0 24px 48px -18px rgba(8, 48, 57, 0.55);
}

.onay__baslik {
    font-size: var(--font-lg);
    font-weight: 600;
}

.onay__metin {
    margin-top: 8px;
    font-size: var(--font-sm);
    line-height: 1.45;
    color: var(--gray-500);
}

.onay__eylemler {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

/* ── Sayfa geçişi ─────────────────────────────────────────────────────────── */

/*
    Tarayıcı destekliyorsa sayfalar arası geçiş yumuşak bir çapraz geçiş oluyor
    (Chrome 126+). Desteklemeyen tarayıcıda hiçbir şey olmuyor — sayfa bugünkü gibi
    geliyor.
*/
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
}

/*
    Çapraz geçiş varken içerik ayrıca "yükselerek" girmesin: iki hareket üst üste
    binince yumuşak değil tedirgin duruyor.
*/
@supports (view-transition-name: none) {
    .enter { animation: none; }
}

/* ══════════════════════════════════════════════ Yıkama yeri düzenleyici */

/*
    Şube kartının içindeki yıkama yeri listesi.

    Eskiden satırlar serbest akan bir kutu dizisiydi: ad, rozet, açılır liste ve düğme
    farklı genişliklerde olduğu için her satır başka yerde bitiyor, alt alta bakınca
    dağınık duruyordu. Artık ızgara — dört kolon, her satırda aynı hizada.
*/
.bay-panel {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-inner);
}

.bay-panel__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.bay-panel__title {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--gray-600);
}

.bay-rows {
    display: grid;
    /* ad · rozet · durum · uygula */
    grid-template-columns: minmax(120px, 1fr) auto minmax(120px, auto) auto;
    gap: 8px 10px;
    align-items: center;
}

/*
    Her satır kendi formu ama ızgara hizasını bozmamalı: display: contents formun
    kutusunu kaldırıp çocuklarını doğrudan ızgaraya veriyor.
*/
.bay-row { display: contents; }

.bay-row__name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: var(--font-sm);
    min-width: 0;
}

/* Küçük alan: satır yüksekliğini şişirmesin. */
.field__input--sm {
    min-height: 34px;
    padding-block: 4px;
    font-size: var(--font-sm);
}

.bay-add {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.bay-add .field__input { flex: 1; }

/*
    Dar ekranda dört kolon sığmıyor; her yer kendi bloğu oluyor.
    display: contents burada geri alınıyor, yoksa form kendi kutusunu kuramıyor.
*/
@media (max-width: 620px) {
    .bay-rows {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .bay-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 10px;
        border-radius: var(--radius-inner);
        border: 1px solid var(--border-inner);
        background: var(--surface-inner-gradient);
    }

    .bay-row__name { flex: 1 1 100%; }
    .bay-row .field__input { flex: 1; }
}

/* ═══════════════════════════════════════════════ Bilgi hiyerarşisi (nizam) */

/*
    Ekranlarda ağırlık yanlış dağılmıştı: bir eylem düğmesi kartın tamamını
    kaplarken plaka, fiyat ve yıkama yeri durumu gibi ASIL veriler yardımcı metin
    boyutundaydı. Kural basit ve her ekranda aynı:

        1. Kimlik   (plaka, şube adı, kişi adı)  → en büyük, en koyu
        2. Durum    (rozet, aşama, tutar)        → okunur, renkli
        3. Ayrıntı  (adımlar, süre, açıklama)    → gövde boyutu
        4. Eylem    (düğmeler)                   → sabit, ölçülü; asla dev değil

    Aşağıdaki blok bu sırayı kuruyor.
*/

/* ── 1. Kimlik ────────────────────────────────────────────────────────────── */

.queue__ident strong {
    font-size: var(--font-lg);
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--gray-900);
}

.line__title {
    font-size: var(--font-md);
    color: var(--gray-900);
}

/* ── 2. Durum ─────────────────────────────────────────────────────────────── */

.queue__total {
    font-size: var(--font-md);
    font-weight: 600;
    color: var(--gray-900);
}

.queue__stage { font-size: var(--font-base); }

.badge { font-size: var(--font-sm); }

.chip { font-size: var(--font-sm); }

.line__sub { font-size: var(--font-base); }

/* ── 3. Ayrıntı ───────────────────────────────────────────────────────────── */

.steps-list__item { font-size: var(--font-base); }

.steps-list__state {
    font-size: var(--font-sm);
    color: var(--gray-500);
}

/* Yıkama yeri kartları sıra ekranının ikinci en çok bakılan bilgisi. */
.bay { padding: 9px 14px; }

.bay__name { font-size: var(--font-sm); }

.bay__state { font-size: var(--font-sm); }

.bay__dot { width: 11px; height: 11px; }

.metric__label { font-size: var(--font-sm); }

/* ── 4. Eylem ─────────────────────────────────────────────────────────────── */

/*
    Kartın asıl eylemi başlık şeridinde, ölçülü genişlikte duruyor.
    Eskiden "Sıraya araç ekle" tam genişlikte bir blok düğmeydi ve kartın en
    büyük öğesiydi — göz önce ona gidiyordu, sıradaki araca değil.
*/
.card__action {
    margin-inline-start: auto;
    flex: 0 0 auto;
}

/* Dar ekran kuralı dosyanın sonunda: .btn'in esneme kuralından SONRA gelmeli. */

/* ══════════════════════════════════════════════════════ Karar satırı */

/*
    Onayla / Reddet gibi iki yönlü kararlar.

    Randevu taleplerinde "Reddet" düğmesi red sebebi kutusunun altına kayıyor ve
    "Onayla" ile aynı hizada durmuyordu: kutu 46 piksel yüksekliğinde, düğmeler 34
    pikseldi ve satır sarmalıyordu. Artık üç öğe de aynı yükseklikte ve tek satırda;
    dar ekranda hep birlikte alt alta iniyor, biri diğerinin altına kaymıyor.
*/
.decision {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-inner);
}

.decision__reject {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
    min-width: 0;
}

.decision__reject .field__input {
    flex: 1 1 220px;
    min-width: 140px;
}

@media (max-width: 700px) {
    .decision {
        flex-direction: column;
        align-items: stretch;
    }

    .decision__reject { margin-inline-start: 0; }

    /* Her karar kendi satırını alıyor; düğmeler yan yana sıkışmıyor. */
    .decision > form { width: 100%; }

    /*
        Tam genişlik YALNIZCA tek düğmeli formlara ("Onayla", "Araç geldi, sıraya al").
        Red formunda düğme kutunun yanında duruyor; ona da %100 verilince kart dışına
        taşıyordu — düğmeler küçülmediği için (etiketleri bölünmesin diye) taşan taraf
        kartın kendisi oluyordu.
    */
    .decision > form:not(.decision__reject) > .btn { width: 100%; }

    /* Dar yerde kısalması gereken kutu; min-width: 0 olmadan içeriği kadar yer tutuyor. */
    .decision__reject .field__input {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* ══════════════════════════════════════════ Eylem satırı hizası (genel) */

/*
    Tüm ekranlarda aynı kural: bir satırdaki düğmeler ve alanlar ortadan hizalı ve
    aynı yükseklikte. Farklı yüksekliklerde öğeler yan yana gelince satır "kayık"
    duruyordu — kullanıcının "buton kayması" dediği şey buydu.
*/
.actions > * { vertical-align: middle; }

.actions .field__input,
.start-row .field__input {
    min-height: 34px;
    padding-block: 4px;
    font-size: var(--font-sm);
}

/* ── Kapasite şeridi ──────────────────────────────────────────────────────── */

.capacity {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

/*
    Yıkama yerleri sıra ekranının ikinci en çok bakılan bilgisi: "başlatabilir miyim?"
    sorusunun cevabı burada. Geniş ekranda serbest akan bir rozet dizisi olarak kalınca
    dağınık duruyordu; artık eşit genişlikte hücrelere oturuyor ve tek bakışta sayılıyor.
*/
@media (min-width: 900px) {
    .bays {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
        gap: 8px;
    }

    .bay { padding: 10px 14px; }
}

/* ══════════════════════════════════════════════════════════════ Filo seçimi */

/* Bilgilendirme şeridi: uyarı değil, yol gösterme. */
.notice--info {
    background: var(--brand-soft);
    border: 1px solid rgba(11, 110, 121, 0.18);
    color: var(--gray-700);
}

.notice--info a { font-weight: 600; }

/*
    Toplu seçim şeridi: "tümünü seç" düğmesi ve canlı sayaç.
    Düğme betiksiz hiç görünmüyor; sayaç da boş kalıyor — o yüzden şerit kendi
    başına bir kutu değil, sadece bir hizalama satırı.
*/
.bulk {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-height: 34px;
}

.bulk .muted { font-size: var(--font-sm); }

/* ══════════════════════════════════════════════ Kart içi eylem şeridi */

/*
    Bir kartın altındaki eylemler her ekranda aynı görünsün: üstündeki içerikten ince
    bir çizgiyle ayrılıyor, aynı boşlukla başlıyor. Karar satırı (.decision) da aynı
    ölçüleri kullanıyor — randevu talepleri ile sıra kartı artık aynı dili konuşuyor.
*/
.actions--bar {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-inner);
}

/* ══════════════════════════════════════════════════ Düğme etiketi bölünmez */

/*
    Bir düğmenin yazısı asla iki satıra kırılmıyor.

    Dar bir satırda esnek kutu önce düğmeyi sıkıştırıyordu: "Hizmete Başla" alt alta
    iki satıra düşüyor, düğme kalınlaşıyor ve yanındakilerle hizası bozuluyordu. Yeri
    dar olan taraf açılır liste; kısalması gereken o.
*/
.btn {
    white-space: nowrap;
    flex: 0 0 auto;
}

.btn--block { flex: 1 1 auto; }

.start-row .btn,
.actions .btn,
.decision .btn { flex: 0 0 auto; }

/* ══════════════════════════════════════════════════════ Süzgeç satırı eylemi */

/*
    Süzgeç formlarındaki "Göster" düğmesi ızgara kolonunun tamamını kaplıyordu: dolgulu
    marka rengiyle, yanındaki açılır listeden daha ağır duruyor ve sayfanın en dikkat
    çeken öğesi oluyordu. Oysa süzgeç yardımcı bir araç; asıl içerik altındaki liste.

    Dar ekranda tam genişlik kalıyor — orada parmakla basılıyor ve zaten tek kolon var.
*/
@media (min-width: 720px) {
    .form-grid .field > .btn--block {
        width: auto;
        min-width: 128px;
    }
}

/* ═════════════════════════════════════════ Kart eylemi — dar ekran */

/*
    Dar ekranda başlık şeridi sarmalıyor ve eylem tam genişliğe yayılıyor: orada
    parmakla basılacak bir hedef, farenin nişan aldığı bir düğme değil.

    Seçici `.btn.card__action` çünkü yukarıdaki `.btn { flex: 0 0 auto }` (düğme
    etiketi bölünmesin diye) tek sınıflı bir kuralı bastırıyordu — düğme dar ekranda
    da başlığın yanında kalıyordu.
*/
@media (max-width: 560px) {
    .card__head { flex-wrap: wrap; }

    .btn.card__action,
    .card__action {
        flex: 1 0 100%;
        margin-inline-start: 0;
        text-align: center;
    }
}

/* ══════════════════════════════════════════════════════════════ Filo kartı */

/*
    Filo talebi. Bir filo hesabının gönderdiği araçlar ekrana tek tek plakalar hâlinde
    düşüyordu: "34CGB204" ile "34PZM273"ün aynı şirketten geldiği belli değildi ve
    işletme her birini ayrı karara bağlamak zorundaydı. Kart artık şirketin adıyla
    başlıyor, plakalar onun altında liste.

    Sol kenardaki ince marka şeridi bu kartın diğerlerinden farklı bir şey olduğunu
    renk paletine yeni bir ton katmadan söylüyor.
*/
.fleet {
    border-inline-start: 3px solid var(--brand-lift);
    padding-inline-start: 12px;
}

.fleet__mark {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-inline-end: 8px;
    vertical-align: -6px;
    border-radius: 8px;
    background: var(--brand-soft);
    color: var(--on-brand-soft);
}

.fleet__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

/* Filo çipi biraz daha kuvvetli: kartın ne olduğunu söyleyen etiket bu. */
.chip--fleet {
    background: var(--brand-lift);
    border-color: transparent;
    color: #fff;
}

/* ══════════════════════════════════════════════════════════ Sessiz işaret */

/*
    Satırın kaynağını söyleyen not — durum rozeti DEĞİL.

    Kasa defterinde "Sistem" işareti dolgulu bir rozetti ve kalem adının yanında
    duruyordu: gerçek durum rozetleriyle (Sırada, Onay bekleyen) aynı ağırlıkta
    görünüyor, ama onlar kadar önemli değil — satırın nereden geldiğini söylüyor,
    o kadar. Üstelik kolonu şişirip komşu kolona dayanıyordu.

    Dolgu yok, kenarlık yok: küçük bir nokta ve soluk bir kelime. Yanındaki veriyle
    yarışmıyor, sorulduğunda cevabı veriyor.
*/
.marker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-xs);
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--gray-400);
    white-space: nowrap;
    cursor: help;
}

.marker::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.65;
    flex: 0 0 auto;
}

/* ══════════════════════════════════════════════════════════ Zaman çizgisi */

/*
    Yıkamanın saatleri: sıraya alındı · başladı · hazır · tamamlandı.

    Tablo değil, etiket/değer satırları: dört satırlık bir şey için tablo kurmak hem
    fazla hem dar ekranda kayıyor. Değerler sağa yaslı ve tabular rakamla — saatler
    alt alta hizalı okunuyor.
*/
.timeline {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-inner);
    display: grid;
    gap: 2px;
}

.timeline__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
}

.timeline__label {
    font-size: var(--font-sm);
    color: var(--gray-500);
}

.timeline__value {
    font-size: var(--font-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--gray-900);
}

/* ══════════════════════════════════════════════════════════════ Fotoğraflar */

.photos + .photos { margin-top: 18px; }

.photos__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.photos__title {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--gray-600);
}

/*
    Kare ızgara: fotoğraflar farklı oranlarda geliyor (telefon dikey, tablet yatay) ve
    olduğu gibi dizilince satırlar tırtıklı oluyordu. Hepsi aynı kutuya oturuyor,
    içerik kırpılıyor; tam hâli tıklanınca yeni sekmede açılıyor.
*/
.photos__grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.photo {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-inner);
    border: 1px solid var(--border-inner);
    overflow: hidden;
    background: var(--surface-inner-gradient);
}

.photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--dur-base) var(--ease-out);
}

.photo:hover img { transform: scale(1.04); }

/* Saat görselin üstünde: altına ayrı bir satır koymak ızgarayı bozuyordu. */
.photo__time {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 14px 8px 6px;
    font-size: var(--font-xs);
    font-weight: 600;
    color: #fff;
    background: linear-gradient(180deg, rgba(6, 26, 31, 0) 0%, rgba(6, 26, 31, 0.72) 100%);
}

/* Dosya seçici alanın kendi iç dolgusu var; kutu yüksekliğini şişirmesin. */
.field__input[type="file"] {
    padding: 9px 12px;
    cursor: pointer;
}

/* ══════════════════════════════════════════════════════ Canlı yenileme */

/*
    Bir bölge yerinde tazelendiğinde kısa bir vurgu.

    Sessiz güncelleme tek başına kafa karıştırıyor: sayısı değişen bir kart
    kullanıcının gözünün ucundan kaçıyor ve "ben mi yanlış gördüm" oluyor. Vurgu
    bir saniyede sönüyor — dikkat çekiyor ama işi bölmüyor.

    Sayfa yeniden yüklenmediği için kaydırma konumu, açık menüler ve yazılmakta
    olan metin yerinde kalıyor; bu animasyon o sessizliğin tek görünür izi.
*/
@keyframes canliVurgu {
    from { background-color: var(--brand-soft); }
    to { background-color: transparent; }
}

.canli-degisti {
    animation: canliVurgu 900ms var(--ease-out);
    border-radius: var(--radius-inner);
}

/*
    Hareketi azalt diyene hareket yok; renk ve saydamlık geçişleri kalıyor (bkz. tokens.css).
    Canlı güncelleme sessizce geliyor; basınca küçülme, fotoğrafın büyümesi, bildirimin kayarak
    gelmesi ve içeriğin yükselerek açılması yok.
*/
@media (prefers-reduced-motion: reduce) {
    .canli-degisti { animation: none; }

    .enter { animation: none; }

    .btn:active,
    .record:active,
    .photo:hover img,
    .js .toast,
    .js .toast--kapaniyor { transform: none; }
}

/* ══════════════════════════════════════════════════════════════ Sayfalama */

/*
    Uzun listelerin altındaki şerit.

    Liste yirmi kaydı geçtiğinde ekran kullanılamaz hâle geliyordu: aranan kayda
    ulaşmak sürekli kaydırmak demekti ve kaydırdıkça nerede olunduğu kayboluyordu.
    Şerit hem gezinme hem konum bilgisi veriyor ("34 kayıt · sayfa 2/4").

    Numaralar bağlantı, düğme değil: sayfa adres çubuğunda taşınıyor, geri tuşu
    çalışıyor ve betik gerekmiyor.
*/
.pager {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-inner);
}

.pager__step,
.pager__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
    padding: 0 10px;
    border-radius: var(--radius-chip);
    border: 1px solid var(--border);
    color: var(--gray-600);
    font-size: var(--font-sm);
    font-weight: 600;
    white-space: nowrap;
}

.pager__step:hover,
.pager__page:hover {
    border-color: var(--brand-lift);
    color: var(--brand);
    text-decoration: none;
}

/* Sınırdaki adım görünür kalıyor ama tıklanacak bir yer olmadığı belli oluyor. */
.pager__step.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.pager__pages {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.pager__page.is-active {
    background: var(--brand-soft);
    border-color: transparent;
    color: var(--on-brand-soft);
}

.pager__gap {
    padding: 0 2px;
    color: var(--gray-400);
}

/* Konum bilgisi sağ uçta; şerit dar ekranda alt satıra iniyor. */
.pager__count {
    margin-inline-start: auto;
    font-size: var(--font-sm);
    color: var(--gray-500);
}

@media (max-width: 560px) {
    .pager__count {
        margin-inline-start: 0;
        flex: 1 0 100%;
    }
}

/* ══════════════════════════════════════════════ Deftere bağlı yıkama */

/*
    Kasa satırındaki plaka, o yıkamanın detayına açılıyor.

    Defter "ne kadar" sorusunu cevaplıyordu; "ne yapıldı" sorusunun cevabı hiçbir
    yerde yoktu. Bağlantı satırın içinde ve sessiz: tablo bir liste değil, defter —
    her satırın altı çizili mavi bir bağlantıya dönüşmesi okunurluğu bozardı. Fare
    üstüne gelince belli oluyor.
*/
.ledger-link {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    color: inherit;
}

.ledger-link:hover {
    color: var(--brand);
    text-decoration: none;
}

.ledger-link__go {
    opacity: 0;
    font-weight: 600;
    transition: opacity var(--dur-fast) var(--ease-out);
}

.ledger-link:hover .ledger-link__go { opacity: 1; }

/* Dokunmatikte "üstüne gelmek" yok; ok her zaman görünüyor. */
@media (hover: none) {
    .ledger-link__go { opacity: 0.55; }
}

/*
    ── Araç tipi fiyat oranları ──────────────────────────────────────────────

    Yedi satırlık kısa bir liste ve her satır aynı üç parçadan oluşuyor: ad, yüzde
    kutusu, örnek tutar. Izgara olması ad ve tutarların dikeyde hizalanmasını
    sağlıyor — tek tek kartlarda göz her satırda yeniden yer arıyordu.
*/
.rates {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.rate {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-inner);
    border: 1.5px solid var(--border-inner);
    background: var(--surface-inner-gradient);
}

.rate__name { font-weight: 600; }

/* Yüzde işareti kutunun İÇİNDE duruyor: ayrı bir etiket olarak sağda kalınca
   hangi sayıya ait olduğu ikinci satırda kayboluyordu. */
.rate__input { position: relative; display: inline-flex; align-items: center; }

.rate__input .field__input {
    width: 92px;
    padding-right: 26px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.rate__unit {
    position: absolute;
    right: 10px;
    color: var(--gray-400);
    pointer-events: none;
}

.rate__hint {
    min-width: 78px;
    text-align: right;
    font-size: var(--font-xs);
    color: var(--gray-500);
    font-variant-numeric: tabular-nums;
}

/*
    ── Ciro çubuğu ───────────────────────────────────────────────────────────

    Performans tablosunda sıralamayı sayı okumadan görünür kılıyor. <progress>
    seçildi çünkü CSP satır içi stili engelliyor: oran bir style yerine value/max
    ile taşınıyor. Bunun bedeli, dolgu rengini üç ayrı sözde-öğede tanımlamak.
*/
.bar {
    display: block;
    width: 100%;
    max-width: 180px;
    height: 5px;
    margin-top: 5px;
    border: 0;
    border-radius: 999px;
    background: var(--border-inner);
    appearance: none;
}

.bar::-webkit-progress-bar {
    border-radius: 999px;
    background: var(--border-inner);
}

.bar::-webkit-progress-value {
    border-radius: 999px;
    background: var(--brand);
}

.bar::-moz-progress-bar {
    border-radius: 999px;
    background: var(--brand);
}

/*
    ── Personel satırındaki "girişte kod" şeridi ─────────────────────────────

    Kimliğin hemen altında, atama formunun üstünde: güvenlikle ilgili bir bilgi,
    görev/şube düğmeleriyle karışmamalı. Dar ekranda düğme alt satıra iniyor.
*/
.logincode {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 10px;
}

.logincode__label {
    font-size: var(--font-xs);
    color: var(--gray-500);
}

.logincode__form { margin-inline-start: auto; }

.logincode__hint { margin: 0 0 12px; }

/* ══════════════════════════════════════════════════════ Alanlar ve yerler */

/*
    Alan: yerleri gruplayan, adını işletmenin koyduğu bölüm ("Yıkama kabinleri",
    "İç temizlik"). Araç bir işlemden diğerine geçerken alan değiştirebiliyor; dış
    yıkaması biten araç iç temizliğe çekilirken kabin sıradaki araca boşalıyor.

    Şube ekranında alanlar kart içinde ikinci bir kart DEĞİL: ince kesik bir çizgiyle
    ayrılıyorlar. İç içe kutular ekranı boğuyordu.
*/
.zone-intro { margin: 0 0 12px; }

.zone {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--border-inner);
}

.zone:first-of-type {
    margin-top: 4px;
    padding-top: 0;
    border-top: 0;
}

.zone__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-bottom: 10px;
}

.zone__name {
    font-size: var(--font-base);
    font-weight: 700;
}

.zone__count {
    font-size: var(--font-xs);
    color: var(--gray-500);
}

/*
    Alanı düzenleme kapalı duruyor: gündelik iş yerin durumunu değiştirmek, alanın adı
    ayda bir değişir. Açılınca satırın tamamını alıyor — üstteki başlığın üstüne binen
    bir açılır pencere, betik olmadan kapatılamıyordu.
*/
.zone__menu { margin-inline-start: auto; }

.zone__menu[open] {
    flex: 1 1 100%;
    margin-inline-start: 0;
}

.zone__menu > summary { list-style: none; width: fit-content; cursor: pointer; }
.zone__menu > summary::-webkit-details-marker { display: none; }

.zone__menu-panel {
    display: grid;
    gap: 8px;
    margin-top: 8px;
    padding: 10px;
    border-radius: var(--radius-inner);
    border: 1px solid var(--border-inner);
    background: var(--surface-inner-gradient);
}

.zone-form,
.bay-edit__form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.zone-form .field__input,
.bay-edit__form .field__input {
    flex: 1 1 150px;
    min-width: 0;
}

/* Yerlerin adı ve alanı: her alanın altında kapalı bir bölüm. */
.zone__tools { margin-top: 10px; }

.zone__tools > summary {
    width: fit-content;
    cursor: pointer;
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--brand);
}

.bay-edit {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.bay-edit__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.bay-edit__form { flex: 1 1 320px; }

/* Yer ve alan ekleme: alt alta iki satır; seçim kutusu adı ezmesin. */
.zone-add {
    display: grid;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-inner);
}

.zone-add .bay-add {
    margin-top: 0;
    flex-wrap: wrap;
}

.zone-add .bay-add .field__input {
    flex: 1 1 180px;
    min-width: 0;
}

.zone-add .bay-add .bay-add__pick { flex: 0 1 190px; }

/* ── Sıra ekranı: alanlara göre gruplu kapasite şeridi ─────────────────────── */

.bay-groups {
    display: grid;
    gap: 12px;
}

.bay-group__title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
    font-size: var(--font-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.bay-group__count {
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

/*
    Aracın şu anki yeri — "İç Temizlik › Nokta 1". Araç adımlar arasında yer
    değiştirebildiği için personel onu nerede bulacağını karttan okuyor.
*/
.queue__where {
    display: flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    margin-top: 4px;
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--gray-700);
}

.queue__where svg {
    flex: 0 0 auto;
    color: var(--brand);
}

.queue__where--hold { color: var(--warning); }

/*
    Hizmet ve yer seçimi birlikte. Tek listeli satırın "sarmalamaz" kuralı (bkz.
    .start-row) burada bilerek gevşetiliyor: iki açılır liste ve düğme dar ekrana tek
    satırda sığmıyor, sığdırmaya çalışınca listeler okunmaz genişliğe iniyordu.
*/
.start-row--wrap { flex-wrap: wrap; }

.start-row--wrap .field__input { flex: 1 1 150px; }