/* ============================================================
   Tera π Kafe — genel stiller (tek doğruluk kaynağı).

   Tasarım dili: Tıkla Gelsin düzeni, Tera π cafe marka renkleriyle — logo yeşili kabuk (başlık),
   yeşil ana renk, beyaz kartlar, yeşile çalan açık zemin, hap biçimli seçiciler. Başlıklar logodaki
   gibi tırnaklı (serif) yazılır. Self servis ("Bankodan Al") altın ile ayrılır.
   Kırmızı YALNIZ sil / iptal ve alerjen uyarısı içindir; konsept rengi değildir.
   Renk değişirse ŞU YERLER elle eşlenir: Kafe.Web/wwwroot/index.html (theme-color + açılış) ·
   Kafe.Web/wwwroot/manifest.webmanifest · Kafe.Mobile/wwwroot/index.html ·
   Kafe.Mobile/Platforms/Android/MainActivity.cs + Resources/values/colors.xml ·
   Kafe.Mobile/Kafe.Mobile.csproj (ikon ve açılış rengi) · wwwroot/img/tera-*.svg.
   ============================================================ */

/* Plus Jakarta Sans (SIL OFL 1.1, bkz. fonts/OFL.txt) — uygulamanın içinde taşınır, internetsiz de açılır. */
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("fonts/plus-jakarta-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* ---- Marka: Tera π cafe yeşili (QR menüdeki rozet rengi) ---- */
    --kafe-ana: #165A38;
    --kafe-ana-koyu: #124A2E;
    --kafe-ana-basili: #0D3B24;
    --kafe-ana-soluk: #E9F2ED;            /* nane zemin (kart, ikon çipi) */
    --kafe-ana-kenar: #B7D7C7;            /* nane kenar */

    /* Self servis / "Bankodan Al" ikinci rengi: altın (yeşille klasik eş) */
    --kafe-mavi: #A16207;
    --kafe-mavi-koyu: #854D0E;
    --kafe-mavi-soluk: #FBF3DF;

    --kafe-lacivert: #173B29;
    --kafe-marka-ana: #FFFFFF;
    --kafe-marka-vurgu: #FFFFFF;

    /* ---- Kabuk (logo yeşili başlık alanı: logonun kendi zemini) ---- */
    --kafe-kabuk: #013D17;
    --kafe-kabuk-metin: #FFFFFF;
    --kafe-kabuk-metin-2: rgba(255, 255, 255, .86);
    --kafe-kabuk-metin-3: rgba(255, 255, 255, .64);
    --kafe-kabuk-kenar: rgba(255, 255, 255, .45);
    --kafe-kabuk-hover: rgba(255, 255, 255, .14);
    --kafe-kabuk-cip: rgba(255, 255, 255, .16);
    --kafe-kabuk-basili: rgba(255, 255, 255, .22);
    --kafe-kabuk-hover-kenar: rgba(255, 255, 255, .7);

    /* ---- Birincil eylem = marka yeşili ---- */
    --kafe-vurgu: var(--kafe-ana);
    --kafe-vurgu-koyu: var(--kafe-ana-koyu);
    --kafe-vurgu-basili: var(--kafe-ana-basili);
    --kafe-vurgu-soluk: var(--kafe-ana-soluk);

    /* ---- Turuncu: rozet ve "dikkat" çipleri ("E-Mail doğrula!") ---- */
    --kafe-turuncu: #FF8A1F;
    --kafe-turuncu-metin: #B45309;
    --kafe-turuncu-soluk: #FFF1E3;

    /* ---- Yüzeyler ---- */
    --kafe-zemin: #F2F6F3;               /* sayfa zemini (yeşile çalan açık ton) */
    --kafe-yuzey: #FFFFFF;               /* kart */
    --kafe-yuzey-2: #F6F9F7;             /* iç blok, tablo başlığı, satır hover */
    --kafe-yuzey-3: #EDF2EE;             /* pasif / ikon kutusu */
    --kafe-yonetim-zemin: #17231C;   /* yönetim ekranı çubuğu: müşteri ekranlarının yeşilinden ayrı, koyu */
    --kafe-perde: rgba(10, 30, 18, .42);
    --kafe-perde-koyu: rgba(10, 30, 18, .6);

    /* ---- Kenarlıklar ---- */
    --kafe-kenar: #E2E9E4;
    --kafe-kenar-koyu: #CCD7CF;          /* input, çerçeveli düğme */
    --kafe-kenar-2: #9FB0A5;             /* hover kenarı */
    --kafe-kenar-ince: #EDF2EE;

    /* ---- Metin ---- */
    --kafe-metin: #1F2A24;
    --kafe-metin-2: #3E4A43;
    --kafe-metin-3: #65716A;
    --kafe-metin-4: #9AA59E;             /* yalnız ipucu/placeholder */
    --kafe-metin-ters: #FFFFFF;

    /* ---- Anlamsal renkler ---- */
    --kafe-kirmizi: #DC2626;             /* yalnız sil / iptal */
    --kafe-kirmizi-koyu: #A61E1E;
    --kafe-kirmizi-kenar: #F3B4B4;
    --kafe-kirmizi-acik: #F28B8B;
    --kafe-yesil: #12A150;
    --kafe-yesil-koyu: #0E8443;
    --kafe-yesil-kenar: #A7E3C1;
    --kafe-yesil-gecerli: #7FD1A3;

    /* ---- Durum ölçeği: zemin / metin / kenar ---- */
    --kafe-durum-acik-zemin: #F2F2F2;
    --kafe-durum-acik-metin: #555555;
    --kafe-durum-acik-kenar: #E3E3E3;

    --kafe-durum-devam-zemin: #FFF4E5;
    --kafe-durum-devam-metin: #A34E00;
    --kafe-durum-devam-kenar: #FFDDB0;

    --kafe-durum-tamam-zemin: #E6F6FD;
    --kafe-durum-tamam-metin: #0B6F99;
    --kafe-durum-tamam-kenar: #BDE6F7;

    --kafe-durum-teslim-zemin: #E7F7EE;
    --kafe-durum-teslim-metin: #0E7A3E;
    --kafe-durum-teslim-kenar: #BDEBD1;

    --kafe-durum-iptal-zemin: #FEECEC;
    --kafe-durum-iptal-metin: #B91C1C;
    --kafe-durum-iptal-kenar: #F9CACA;

    /* ---- Gölge ---- */
    --kafe-golge-1: 0 1px 2px rgba(17, 17, 17, .04);
    --kafe-golge-2: 0 6px 18px rgba(17, 17, 17, .07);
    --kafe-golge-3: 0 16px 40px rgba(17, 17, 17, .14);
    --kafe-golge-hover: 0 8px 22px rgba(17, 17, 17, .08);
    --kafe-golge-ust: 0 -4px 16px rgba(17, 17, 17, .06);
    --kafe-golge-ana: 0 8px 20px rgba(22, 90, 56, .26);

    /* ---- Odak ---- */
    --kafe-odak: 0 0 0 3px rgba(22, 90, 56, .22);
    --kafe-odak-tehlike: 0 0 0 3px rgba(198, 40, 40, .2);

    /* ---- Katman ölçeği ---- */
    --z-yapiskan: 20;
    --z-kabuk: 1040;
    --z-perde: 1044;
    --z-cekmece: 1045;
    --z-hata: 1100;

    /* ---- Köşe ---- */
    --r-1: 8px;
    --r-2: 12px;
    --r-3: 16px;
    --r-4: 20px;

    /* ---- Boşluk (4px taban) ---- */
    --b1: 4px;
    --b2: 8px;
    --b3: 12px;
    --b4: 16px;
    --b5: 24px;
    --b6: 32px;

    /* ---- Tipografi ölçeği ---- */
    --yz-11: .6875rem;
    --yz-12: .75rem;
    --yz-13: .8125rem;
    --yz-14: .875rem;
    --yz-15: .9375rem;
    --yz-17: 1.0625rem;
    --yz-20: 1.25rem;
    --yz-24: 1.5rem;

    /* ---- Ölçüler ---- */
    --menu-genislik: 0px;
    --ust-bar-h: 56px;      /* telefon üst çubuğu */
    --icerik-max: 1400px;
    --dokunma: 44px;
    --alt-menu-h: 92px;     /* yüzen alt menü + boşluk (telefon) */
    /* Alt menünün ekranın altına uzaklığı: iPhone'da ana ekran çizgisinin (güvenli alan) ancak
       küçük bir kısmı bırakılır, menü aşağıda durur; çizgisiz cihazlarda 6px. */
    --alt-menu-alt: calc(env(safe-area-inset-bottom, 0px) * .4 + 6px);

    --kafe-yazi: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Başlıklar logodaki gibi tırnaklı: Georgia (Windows, iOS, macOS) · Noto Serif (Android). İkisi de Türkçe tam. */
    --kafe-yazi-baslik: Georgia, "Noto Serif", "Times New Roman", serif;
    --kafe-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono",
                    Consolas, "Liberation Mono", monospace;
}

@media (min-width: 768px) {
    :root {
        --ust-bar-h: 64px;
    }
}

/* ============================================================
   Tipografi
   ============================================================ */

/* Uygulama hissi: sayfa yalnız dikey kayar. Ekrandan geniş bir öğe olsa bile sayfa yana kaymaz ve
   telefonun sabit alt menüsü ekran dışına taşmaz. (body'de "clip": yapışkan başlıkları bozmaz.) */
html {
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    /* Kaydırma çubuğunun yeri hep ayrılır: kısa sayfadan uzun sayfaya geçerken (çubuk belirince) ekran
       daralıp alt menü ve başlık sağa sola kaymasın. */
    scrollbar-gutter: stable;
}

body {
    overflow-x: clip;
    overscroll-behavior-x: none;
}

html, body {
    /* system-ui: Windows'ta Segoe UI, MAUI WebView'de Roboto; ikisi de
       ı/İ/ğ/ş için tam kapsamlı. Web fontu yok — mobil çevrimdışı da açılır. */
    font-family: var(--kafe-yazi);
    font-size: 16px;
    line-height: 1.5;
    color: var(--kafe-metin);
    background-color: var(--kafe-zemin);
}

body {
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--kafe-metin);
    margin: 0 0 var(--b3);
}

h1 { font-family: var(--kafe-yazi-baslik); font-size: var(--yz-24); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
h2 { font-family: var(--kafe-yazi-baslik); font-size: var(--yz-20); font-weight: 700; line-height: 1.35; letter-spacing: 0; }
h3 { font-size: var(--yz-17); font-weight: 600; line-height: 1.4; }
h4, h5, h6 { font-size: var(--yz-15); font-weight: 600; line-height: 1.45; }

/* FocusOnNavigate her sayfa geçişinde h1'e odak verir; halka gerekmez. */
h1:focus,
h2:focus {
    outline: none;
}

/* Bağlantı rengi vurgu değildir; vurgu birincil eyleme ayrılmıştır. */
a {
    color: var(--kafe-metin-2);
    text-decoration: none;
}

a:hover {
    color: var(--kafe-metin);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Bootstrap 5.1 .fw-semibold tanımlamaz (5.3'te geldi); 600 ağırlık burada verilir. */
.fw-semibold {
    font-weight: 600;
}

small {
    font-size: var(--yz-12);
    line-height: 1.45;
    color: var(--kafe-metin-2);
}

.text-muted {
    color: var(--kafe-metin-3) !important;
}

/* Bölüm üstü etiket. Türkçe İ/ı bozulmasın diye CSS ile BÜYÜTÜLMEZ. */
.bolum-basligi {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 var(--b2);
    font-size: var(--yz-12);
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none;
    color: var(--kafe-metin-3);
    line-height: 1.3;
}

/* ============================================================
   Sayfa başlığı — başlık solda, eylemler sağda
   ============================================================ */

.sayfa-basligi {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--b3) var(--b4);
    margin: 0 0 var(--b5);
    padding-bottom: var(--b4);
    border-bottom: 1px solid var(--kafe-kenar);
}

.sayfa-basligi h1,
.sayfa-basligi h2 {
    margin: 0;
    font-size: var(--yz-24);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--kafe-metin);
}

.sayfa-basligi-alt {
    display: block;
    margin-top: var(--b1);
    font-size: var(--yz-12);
    font-weight: 400;
    color: var(--kafe-metin-3);
    font-variant-numeric: tabular-nums;
}

.sayfa-basligi-eylemler {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--b2);
    margin-left: auto;
}

/* Geri bağlantısı: başlığın üstünde küçük, sessiz bir yön göstergesi. */
.sayfa-basligi-geri {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-bottom: var(--b1);
    font-size: var(--yz-13);
    font-weight: 600;
    color: var(--kafe-metin-3);
}

.sayfa-basligi-geri:hover {
    color: var(--kafe-metin);
    text-decoration: none;
}

/* Yapışkan başlık (form detayı): düzenin üst barının altına oturur. */
.sayfa-basligi.yapiskan {
    position: sticky;
    top: calc(var(--ust-bar-h) + env(safe-area-inset-top, 0px));
    z-index: var(--z-yapiskan);
    margin: 0 0 var(--b4);
    padding: .8rem 1rem;
    background: var(--kafe-yuzey);
    border: 1px solid var(--kafe-kenar);
    border-radius: var(--r-3);
    box-shadow: var(--kafe-golge-2);
}

/* Başlığın sağındaki sessiz eylem ("Tümünü Gör") */
.baslik-eylem {
    font-size: var(--yz-13);
    font-weight: 600;
    color: var(--kafe-metin-2);
    text-decoration: none;
    padding: .3rem .5rem;
    margin-right: -.5rem;
    border-radius: var(--r-1);
    white-space: nowrap;
}

.baslik-eylem::after {
    content: " \203A";
}

.baslik-eylem:hover,
.baslik-eylem:focus {
    color: var(--kafe-metin);
    background-color: var(--kafe-yuzey-3);
    text-decoration: none;
}

/* ============================================================
   Kart — tek ilkel: Bootstrap .card, Kafe diliyle
   ============================================================ */

.card {
    background-color: var(--kafe-yuzey);
    border: 1px solid var(--kafe-kenar);
    border-radius: var(--r-3);
    box-shadow: var(--kafe-golge-1);
}

.card-header {
    padding: .8rem 1.1rem;
    background-color: transparent;
    border-bottom: 1px solid var(--kafe-kenar);
    border-radius: var(--r-3) var(--r-3) 0 0;
    font-size: var(--yz-14);
    font-weight: 600;
    letter-spacing: -.005em;
    text-transform: none;   /* Türkçe İ/ı: başlık büyük harfe çevrilmez */
    color: var(--kafe-metin);
}

.card-body {
    padding: 1rem 1.1rem;
}

/* Kart içinde ikincil blok (özet kutusu, toplam kutusu) */
.ic-kutu {
    background-color: var(--kafe-yuzey-2);
    border: 1px solid var(--kafe-kenar);
    border-radius: var(--r-2);
    padding: .85rem 1rem;
}

/* Tıklanabilir kart */
.card[role="button"] {
    cursor: pointer;
}

.card[role="button"]:hover {
    border-color: var(--kafe-kenar-2);
    box-shadow: var(--kafe-golge-hover);
}

a.card {
    color: inherit;
    text-decoration: none;
}

/* Kenarlıklı satır listesi (Panel "Son İşlemler", Bildirimler, Lisans Uyarıları) */
.liste-karti {
    background-color: var(--kafe-yuzey);
    border: 1px solid var(--kafe-kenar);
    border-radius: var(--r-3);
    box-shadow: var(--kafe-golge-1);
    overflow: hidden;
}

.liste-karti > * + * {
    border-top: 1px solid var(--kafe-kenar);
}

/* ============================================================
   Düğmeler
     btn-primary          dolu lacivert — sayfada tek birincil eylem
     btn-outline-primary  beyaz + lacivert (güçlü ikincil: Filtrele, Düzenle)
     btn-outline-secondary beyaz + gri (ikincil)
     btn-link             zeminsiz
     btn-danger / btn-outline-danger   yıkıcı
     btn-success / btn-outline-success WhatsApp / onay
   ============================================================ */

.btn {
    --btn-y: 40px;
    min-height: var(--btn-y);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .45rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--r-2);
    font-size: var(--yz-15);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.005em;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .14s ease, border-color .14s ease,
                color .14s ease, box-shadow .14s ease;
}

/* Dokunmatik: küçük ekranda hedefler en az 44px */
@media (max-width: 767.98px) {
    .btn { --btn-y: 44px; }
    .btn-sm { --btn-y: 38px; }
}

/* Tam genişlikteki düğmeler (d-grid, w-100) dar telefonda ekrandan taşmak yerine alt satıra geçer */
.d-grid > .btn,
.btn.w-100 {
    white-space: normal;
    text-align: center;
}

.btn-sm {
    --btn-y: 34px;
    padding: .3rem .7rem;
    font-size: var(--yz-13);
    font-weight: 600;
    border-radius: var(--r-1);
}

/* Yalnız ikonlu düğme: metni olmadığı için aria-label/title zorunludur. */
.btn-ikon {
    --btn-y: 34px;
    min-width: 34px;
    padding: .3rem;
    gap: 0;
}

@media (max-width: 767.98px) {
    .btn-ikon {
        --btn-y: 44px;
        min-width: 44px;
    }
}

.btn:focus,
.btn:focus-visible,
.btn:active:focus {
    outline: none;
    box-shadow: var(--kafe-odak);
}

.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
    opacity: .48;
    box-shadow: none;
    cursor: not-allowed;
}

/* ---- Birincil: dolu lacivert ---- */
.btn-primary {
    color: var(--kafe-metin-ters);
    background-color: var(--kafe-vurgu);
    border-color: var(--kafe-vurgu);
}

.btn-primary:hover,
.btn-primary:focus {
    color: var(--kafe-metin-ters);
    background-color: var(--kafe-vurgu-koyu);
    border-color: var(--kafe-vurgu-koyu);
    text-decoration: none;
}

.btn-primary:active {
    color: var(--kafe-metin-ters);
    background-color: var(--kafe-vurgu-basili);
    border-color: var(--kafe-vurgu-basili);
}

.btn-primary:disabled,
.btn-primary.disabled {
    color: var(--kafe-metin-ters);
    background-color: var(--kafe-vurgu);
    border-color: var(--kafe-vurgu);
}

/* ---- Güçlü ikincil: beyaz + lacivert ---- */
.btn-outline-primary {
    color: var(--kafe-vurgu);
    background-color: var(--kafe-yuzey);
    border-color: var(--kafe-vurgu);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: var(--kafe-vurgu-koyu);
    background-color: var(--kafe-vurgu-soluk);
    border-color: var(--kafe-vurgu-koyu);
    text-decoration: none;
}

.btn-outline-primary:active {
    color: var(--kafe-vurgu-basili);
    background-color: var(--kafe-vurgu-soluk);
    border-color: var(--kafe-vurgu-basili);
}

/* ---- İkincil: beyaz + gri kenar ---- */
.btn-outline-secondary {
    color: var(--kafe-metin);
    background-color: var(--kafe-yuzey);
    border-color: var(--kafe-kenar-koyu);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    color: var(--kafe-metin);
    background-color: var(--kafe-yuzey-3);
    border-color: var(--kafe-kenar-2);
    text-decoration: none;
}

.btn-outline-secondary:active {
    color: var(--kafe-metin);
    background-color: var(--kafe-yuzey-3);
    border-color: var(--kafe-kenar-koyu);
}

/* ---- Sessiz ---- */
.btn-link {
    color: var(--kafe-metin-2);
    background-color: transparent;
    border-color: transparent;
    font-weight: 600;
    text-decoration: none;
}

.btn-link:hover,
.btn-link:focus {
    color: var(--kafe-metin);
    background-color: var(--kafe-yuzey-2);
    text-decoration: none;
}

/* ---- Yıkıcı ---- */
.btn-danger {
    color: var(--kafe-metin-ters);
    background-color: var(--kafe-kirmizi);
    border-color: var(--kafe-kirmizi);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    color: var(--kafe-metin-ters);
    background-color: var(--kafe-kirmizi-koyu);
    border-color: var(--kafe-kirmizi-koyu);
}

.btn-danger:focus,
.btn-outline-danger:focus {
    box-shadow: var(--kafe-odak-tehlike);
}

.btn-outline-danger {
    color: var(--kafe-kirmizi-koyu);
    background-color: var(--kafe-yuzey);
    border-color: var(--kafe-kirmizi-kenar);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    color: var(--kafe-metin-ters);
    background-color: var(--kafe-kirmizi);
    border-color: var(--kafe-kirmizi);
}

/* ---- WhatsApp / onay yeşili ---- */
.btn-success {
    color: var(--kafe-metin-ters);
    background-color: var(--kafe-yesil);
    border-color: var(--kafe-yesil);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    color: var(--kafe-metin-ters);
    background-color: var(--kafe-yesil-koyu);
    border-color: var(--kafe-yesil-koyu);
}

.btn-outline-success {
    color: var(--kafe-yesil-koyu);
    background-color: var(--kafe-yuzey);
    border-color: var(--kafe-yesil-kenar);
}

.btn-outline-success:hover,
.btn-outline-success:focus {
    color: var(--kafe-metin-ters);
    background-color: var(--kafe-yesil);
    border-color: var(--kafe-yesil);
}

/* Bitişik grupta odaklanan öğe komşu kenarlığın üstünde kalsın */
.input-group > .form-control:focus,
.input-group > .form-select:focus,
.input-group > .btn:focus {
    z-index: 3;
}

/* ============================================================
   Form kontrolleri — iki yoğunluk: varsayılan + tablo içi -sm
   ============================================================ */

.form-control,
.form-select {
    min-height: 42px;
    padding: .5rem .75rem;
    font-size: var(--yz-15);
    line-height: 1.4;
    color: var(--kafe-metin);
    background-color: var(--kafe-yuzey);
    border: 1px solid var(--kafe-kenar-koyu);
    border-radius: var(--r-2);
    box-shadow: none;
    transition: border-color .14s ease, box-shadow .14s ease;
}

/* Küçük ekranda 16px altı yazı sayfayı zumlatır; alanlar da büyür. */
@media (max-width: 767.98px) {
    .form-control,
    .form-select {
        min-height: 46px;
        font-size: 1rem;
    }
}

.form-control::placeholder {
    color: var(--kafe-metin-4);
}

.form-control:hover:not(:focus):not(:disabled),
.form-select:hover:not(:focus):not(:disabled) {
    border-color: var(--kafe-kenar-2);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    outline: none;
    border-color: var(--kafe-vurgu);
    box-shadow: var(--kafe-odak);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--kafe-yuzey-2);
    color: var(--kafe-metin-2);
    border-color: var(--kafe-kenar);
}

.form-control-sm,
.form-select-sm {
    min-height: 36px;
    padding: .3rem .55rem;
    font-size: var(--yz-13);
    border-radius: var(--r-1);
}

textarea.form-control {
    min-height: 96px;
    line-height: 1.55;
}

input[type="date"].form-control,
input[type="number"].form-control,
input[type="tel"].form-control {
    font-variant-numeric: tabular-nums;
}

.form-label {
    display: block;
    font-size: var(--yz-13);
    font-weight: 600;
    color: var(--kafe-metin);
    margin-bottom: .35rem;
}

.form-text {
    display: block;
    font-size: var(--yz-12);
    line-height: 1.5;
    color: var(--kafe-metin-3);
    margin-top: .3rem;
}

/* Blazor EditForm doğrulama sınıfları (işaretlemede görünmez; framework basar) */
.valid.modified:not([type=checkbox]) {
    outline: none;
    border-color: var(--kafe-yesil-gecerli);
}

.invalid,
.form-control.invalid,
.form-select.invalid {
    outline: none;
    border-color: var(--kafe-kirmizi);
    background-image: none;
}

.invalid:focus,
.form-control.invalid:focus,
.form-select.invalid:focus {
    border-color: var(--kafe-kirmizi);
    box-shadow: var(--kafe-odak-tehlike);
}

.validation-message {
    display: block;
    color: var(--kafe-kirmizi-koyu);
    font-size: var(--yz-12);
    font-weight: 500;
    line-height: 1.45;
    margin-top: .3rem;
}

/* Doğrulama özeti (ValidationSummary). Bileşen hata olmasa da <ul>'u çizdiği
   için :empty ile gizlenir; aksi hâlde formun üstünde sürekli boş bir kırmızı
   kutu dururdu. Yalnız tek bölüm düzenlenirken kullanılır: hata gizli bir
   bölümdeyse alan yanındaki mesaj çizilmez ve Kaydet sessiz kalırdı. */
.validation-errors {
    margin: 0 0 var(--b3);
    padding: var(--b3) var(--b4);
    list-style: none;
    background-color: var(--kafe-durum-iptal-zemin);
    border: 1px solid var(--kafe-durum-iptal-kenar);
    border-radius: var(--r-2);
}

.validation-errors:empty {
    display: none;
}

.validation-errors .validation-message {
    margin-top: 0;
}

.validation-errors li + li {
    margin-top: .25rem;
}

.form-check-input {
    border-color: var(--kafe-kenar-koyu);
}

/* Seçim bir eylemdir; işaret vurgu rengini alır. */
.form-check-input:checked {
    background-color: var(--kafe-vurgu);
    border-color: var(--kafe-vurgu);
}

.form-check-label {
    font-size: var(--yz-14);
    color: var(--kafe-metin);
}

/* ============================================================
   Tablolar
   ============================================================ */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--kafe-metin);
    --bs-table-accent-bg: transparent;
    --bs-border-color: var(--kafe-kenar);
    margin-bottom: 0;
    color: var(--kafe-metin);
    font-size: var(--yz-14);
    border-color: var(--kafe-kenar);
}

/* Başlık BÜYÜK HARFE ÇEVRİLMEZ (Türkçe İ/ı). */
.table > thead th {
    padding: .6rem .75rem;
    font-size: var(--yz-12);
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none;
    color: var(--kafe-metin-2);
    background-color: var(--kafe-yuzey-2);
    white-space: nowrap;
    border-top: 0;
    border-bottom: 1px solid var(--kafe-kenar);
}

.table > tbody > tr > td {
    padding: .72rem .75rem;
    vertical-align: middle;
    border-top: 0;
    border-bottom: 1px solid var(--kafe-kenar);
}

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

/* Bootstrap hover'ı accent değişkeni üzerinden boyanır. */
.table-hover > tbody > tr:hover {
    --bs-table-accent-bg: var(--kafe-yuzey-3);
    color: var(--kafe-metin);
}

.table-responsive {
    -webkit-overflow-scrolling: touch;
}

.table tr[role="button"] {
    cursor: pointer;
}

.table tr[role="button"]:focus-visible {
    outline: 2px solid var(--kafe-vurgu);
    outline-offset: -2px;
}

/* Satır sonu eylem sütunu */
.tablo-eylemler {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--b1);
    white-space: nowrap;
}

.table th.tablo-eylemler-basligi,
.table td.tablo-eylemler-hucresi {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.table > tbody > tr:hover .tablo-eylemler .btn {
    border-color: var(--kafe-kenar-koyu);
}

/* ============================================================
   Rozetler — tek sistem; Enums.cs Renk() bu adları döndürür
   ============================================================ */

.badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .22rem .5rem;
    font-size: var(--yz-12);
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: none;
    border: 1px solid transparent;
    border-radius: var(--r-1);
    white-space: nowrap;
    vertical-align: middle;
}

.rozet-acik {                                   /* Açık */
    background-color: var(--kafe-durum-acik-zemin);
    color: var(--kafe-durum-acik-metin);
    border-color: var(--kafe-durum-acik-kenar);
}

.rozet-devam {                                  /* Devam Ediyor / Kısmi Ödendi */
    background-color: var(--kafe-durum-devam-zemin);
    color: var(--kafe-durum-devam-metin);
    border-color: var(--kafe-durum-devam-kenar);
}

.rozet-tamam {                                  /* Tamamlandı */
    background-color: var(--kafe-durum-tamam-zemin);
    color: var(--kafe-durum-tamam-metin);
    border-color: var(--kafe-durum-tamam-kenar);
}

.rozet-teslim {                                 /* Teslim Edildi / Ödendi / Aktif */
    background-color: var(--kafe-durum-teslim-zemin);
    color: var(--kafe-durum-teslim-metin);
    border-color: var(--kafe-durum-teslim-kenar);
}

.rozet-iptal {                                  /* İptal / Ödenmedi / Süresi doldu */
    background-color: var(--kafe-durum-iptal-zemin);
    color: var(--kafe-durum-iptal-metin);
    border-color: var(--kafe-durum-iptal-kenar);
}

.rozet-kimlik {                                 /* sınıflandırma: Bireysel, Personel, Pasif */
    background-color: var(--kafe-yuzey-3);
    color: var(--kafe-metin-2);
    border-color: var(--kafe-kenar);
}

.rozet-vurgu {                                  /* Kurumsal, Yönetici, Parça */
    background-color: var(--kafe-vurgu-soluk);
    color: var(--kafe-vurgu);
    border-color: #C9D8FB;
}

.rozet-sayac {                                  /* menü/başlık sayaçları */
    background-color: var(--kafe-turuncu-metin);
    color: var(--kafe-metin-ters);
    border-color: transparent;
    font-variant-numeric: tabular-nums;
}



/* ============================================================
   Etiket / değer listesi (detay kartları)
   ============================================================ */

.bilgi-liste {
    display: grid;
    grid-template-columns: minmax(7.5rem, 40%) 1fr;
    gap: .3rem .75rem;
    margin: 0;
}

.bilgi-liste dt {
    color: var(--kafe-metin-3);
    font-weight: 500;
    font-size: var(--yz-13);
}

.bilgi-liste dd {
    margin: 0;
    color: var(--kafe-metin);
    font-size: var(--yz-14);
    word-break: break-word;
}

@media (max-width: 575.98px) {
    .bilgi-liste {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .bilgi-liste dt {
        margin-top: .5rem;
    }
}

/* Çok satırlı serbest metin (şikâyet, işlem, not) */
.metin-govde {
    white-space: pre-wrap;
    color: var(--kafe-metin);
    line-height: 1.55;
}

/* Boş / belirtilmemiş değer */
.bos-deger {
    color: var(--kafe-metin-3);
    font-style: italic;
}

.metin-sonuk {
    color: var(--kafe-metin-3);
    font-size: var(--yz-14);
}

/* Başlık altındaki açıklama paragrafı (Bildirimler, Lisans Uyarıları, Firma Ayarları). */
.sayfa-aciklama {
    margin-bottom: var(--b4);
    max-width: 68ch;
    font-size: var(--yz-13);
    color: var(--kafe-metin-3);
}

/* ============================================================
   Arama alanı — ikon alanın içinde
   ============================================================ */

.arama-satiri {
    max-width: 620px;
}

.arama-kutusu {
    position: relative;
}

.arama-ikon {
    position: absolute;
    left: .7rem;
    top: 0;
    bottom: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    color: var(--kafe-metin-4);
    pointer-events: none;
}

.arama-kutusu .arama-alani {
    padding-left: 2.4rem;
}

.arama-kutusu:focus-within .arama-ikon {
    color: var(--kafe-vurgu);
}

/* Liste üstü özet ve sayfalama konumu */
.liste-ozeti,
.sayfa-konumu {
    font-size: var(--yz-13);
    color: var(--kafe-metin-3);
    font-variant-numeric: tabular-nums;
}

/* Dar ekranda iki satıra iner; düğmeleri ekran dışına itmez. */
.sayfa-konumu {
    min-width: 0;
    text-align: center;
}

/* ============================================================
   Boş durum · yükleniyor
   ============================================================ */

.bos-durum {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .45rem;
    padding: 3rem 1.25rem;
    color: var(--kafe-metin-2);
}

/* Yalnız ölçü: ton, BosDurum'un geçtiği .ikon-kutu-* modifiyerinden gelir. */
.bos-durum .ikon-kutu {
    width: 48px;
    height: 48px;
    margin-bottom: var(--b2);
}

.bos-durum-baslik {
    margin: 0;
    font-size: var(--yz-17);
    font-weight: 600;
    color: var(--kafe-metin);
}

.bos-durum-metin {
    margin: 0;
    max-width: 40ch;
    font-size: var(--yz-14);
    line-height: 1.55;
    color: var(--kafe-metin-2);
}

.bos-durum .btn {
    margin-top: var(--b4);
}

/* Kart içinde duran boş durum */
.bos-durum.bos-liste {
    background-color: var(--kafe-yuzey);
    border: 1px solid var(--kafe-kenar);
    border-radius: var(--r-3);
    box-shadow: var(--kafe-golge-1);
}

.yukleniyor {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 3rem 1rem;
    font-size: var(--yz-14);
    color: var(--kafe-metin-2);
}

.yukleniyor p {
    margin: 0;
}

/* Bekleme bir durum değildir: spinner nötr renktedir. */
.spinner-border {
    width: 1.5rem;
    height: 1.5rem;
    border-width: 2px;
    color: var(--kafe-metin-3);
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
}

/* ============================================================
   Uyarı kutuları
   ============================================================ */

.alert {
    border-radius: var(--r-2);
    border-width: 1px;
    padding: .85rem 1rem;
    font-size: var(--yz-14);
    line-height: 1.5;
}

.alert-danger {
    background-color: var(--kafe-durum-iptal-zemin);
    border-color: var(--kafe-durum-iptal-kenar);
    color: var(--kafe-durum-iptal-metin);
}

.alert-warning {
    background-color: var(--kafe-durum-devam-zemin);
    border-color: var(--kafe-durum-devam-kenar);
    color: var(--kafe-durum-devam-metin);
}

.alert-success {
    background-color: var(--kafe-durum-teslim-zemin);
    border-color: var(--kafe-durum-teslim-kenar);
    color: var(--kafe-durum-teslim-metin);
}

.alert-info {
    background-color: var(--kafe-durum-tamam-zemin);
    border-color: var(--kafe-durum-tamam-kenar);
    color: var(--kafe-durum-tamam-metin);
}


/* ============================================================
   Modal — tek pencere dili (Bootstrap JS yok, Blazor açar/kapar)
   ============================================================ */

.modal.show {
    background: var(--kafe-perde);
}

.modal-content {
    border: 1px solid var(--kafe-kenar);
    border-radius: var(--r-4);
    box-shadow: var(--kafe-golge-3);
}

.modal-header,
.modal-footer {
    border-color: var(--kafe-kenar);
}

.modal-title {
    font-size: var(--yz-17);
    font-weight: 600;
}

.modal-footer .btn {
    min-height: 44px;
}

/* ============================================================
   İkon sistemi — <Ikon Ad="..."/> satır içi SVG; renk currentColor
   ============================================================ */

.ikon {
    display: inline-block;
    vertical-align: -.125em;
    flex: 0 0 auto;
    pointer-events: none;    /* düğme/satır içindeki ikon tıklamayı yutmasın */
}

.ikon-sonuk {
    color: var(--kafe-metin-4);
}

/* Dairesel soluk zemin + ikon: istatistik kartı, boş durum, satır avatarı. */
.ikon-kutu {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--kafe-vurgu-soluk);
    color: var(--kafe-vurgu);
}

/* Tonlar rozet ölçeğiyle aynı ailedendir. */
.ikon-kutu-vurgu  { background-color: var(--kafe-vurgu-soluk);          color: var(--kafe-vurgu); }
.ikon-kutu-teslim { background-color: var(--kafe-durum-teslim-zemin);   color: var(--kafe-durum-teslim-metin); }
.ikon-kutu-iptal  { background-color: var(--kafe-durum-iptal-zemin);    color: var(--kafe-durum-iptal-metin); }
.ikon-kutu-turuncu { background-color: var(--kafe-turuncu-soluk);       color: var(--kafe-turuncu-metin); }

.ikon-kutu-notr {
    background-color: var(--kafe-yuzey-2);
    color: var(--kafe-metin-3);
    box-shadow: inset 0 0 0 1px var(--kafe-kenar);
}

/* ============================================================
   Avatar + kimlik bloğu (üst bar)
   Baş harfler C# tarafında Türkçe kültürle büyütülür; CSS ile değil.
   ============================================================ */

.avatar {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--kafe-vurgu-soluk);
    color: var(--kafe-vurgu);
    font-size: var(--yz-12);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .01em;
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
    user-select: none;
}

.kimlik-blok {
    display: inline-flex;
    align-items: center;
    gap: var(--b2);
    min-width: 0;
}

.kimlik-blok-metin {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.kimlik-blok-ad {
    font-size: var(--yz-13);
    font-weight: 600;
    color: var(--kafe-metin);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kimlik-blok-rol {
    font-size: var(--yz-11);
    color: var(--kafe-metin-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   Giriş / kurulum ekranları (web SSR + mobil aynı blok)
   ============================================================ */

.hesap-govde {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--b6) var(--b4);
    background-color: var(--kafe-kabuk);
    background-image:
        radial-gradient(circle at 15% 10%, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 45%),
        radial-gradient(circle at 85% 90%, rgba(228, 108, 12, .10) 0%, rgba(228, 108, 12, 0) 50%);
}

.hesap-kabuk {
    width: 100%;
    max-width: 430px;
}

.hesap-kart {
    background: var(--kafe-yuzey);
    border: 1px solid var(--kafe-kenar);
    border-radius: var(--r-4);
    box-shadow: var(--kafe-golge-3);
    padding: var(--b6) var(--b5) var(--b5);
}

.hesap-logo {
    display: block;
    height: 88px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto var(--b4);
}

.hesap-marka {
    margin: 0;
    text-align: center;
    font-size: var(--yz-20);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--kafe-lacivert);
}

.hesap-alt-baslik {
    margin: 4px 0 0;
    text-align: center;
    font-size: var(--yz-14);
    color: var(--kafe-metin-2);
}

/* Marka çizgisi: kırmızı tek vurgu (PDF'teki marka şeridiyle aynı renk). */
.hesap-ayrac {
    height: 3px;
    width: 54px;
    margin: var(--b4) auto var(--b5);
    border-radius: 2px;
    background: var(--kafe-kirmizi);
}

.hesap-kart .btn-primary {
    width: 100%;
    min-height: 48px;
}

.hesap-uyari {
    font-size: var(--yz-14);
}

.hesap-bilgi {
    font-size: var(--yz-14);
    line-height: 1.5;
    color: var(--kafe-metin-2);
    background: var(--kafe-yuzey-2);
    border: 1px solid var(--kafe-kenar);
    border-radius: var(--r-2);
    padding: var(--b3) var(--b4);
    margin-bottom: var(--b5);
}

.hesap-dipnot {
    margin: var(--b5) 0 0;
    text-align: center;
    font-size: var(--yz-12);
    line-height: 1.6;
    color: rgba(255, 255, 255, .55);
}

@media (max-width: 400px) {
    .hesap-kart {
        padding: var(--b5) var(--b4) var(--b4);
    }

    .hesap-logo {
        height: 76px;
    }
}

/* Oturum öncesi düzen kabı (BosDuzen) */
.bos-duzen {
    min-height: 100dvh;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--kafe-kabuk);
}


/* ============================================================
   Mikro etkileşim — 140ms, yalnız renk/kenar/gölge; öğe zıplamaz
   ============================================================ */

.card,
.liste-karti,
.table > tbody > tr,
.avatar,
.ikon-kutu {
    transition: background-color .14s ease, border-color .14s ease,
                box-shadow .14s ease, color .14s ease;
}

/* ============================================================
   Odak görünürlüğü — klavye için şart
   ============================================================ */

:focus-visible {
    outline: 2px solid var(--kafe-vurgu);
    outline-offset: 2px;
}

.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
    outline: none;
}

.btn:focus-visible {
    outline: 2px solid var(--kafe-vurgu);
    outline-offset: 2px;
    box-shadow: var(--kafe-odak);
}

/* ============================================================
   Hareket azaltma tercihi
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
        animation-duration: .01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

    /* Dönmeyen bekleme göstergesi "donmuş" görünür — tek istisna. */
    .spinner-border {
        animation-duration: 1.1s !important;
        animation-iteration-count: infinite !important;
    }
}

/* ============================================================
   Yazdırma
   ============================================================ */

@media print {
    .yan-menu,
    .ust-bar,
    .hizli-cubuk {
        display: none !important;
    }

    .card {
        box-shadow: none;
        border: 1px solid var(--kafe-kenar-koyu);
    }
}

/* Klavye açıkken mobil alt çubuk gizlenir; :has desteklenmiyorsa yok sayılır. */
html:has(input:focus, textarea:focus, select:focus) .hizli-cubuk {
    display: none;
}

/* ---------------- Blazor hata şeridi ----------------
   Bilerek izolasyonsuz: hem MainLayout hem BosDuzen kullanır. */

#blazor-error-ui {
    background: var(--kafe-durum-devam-zemin);
    color: var(--kafe-durum-devam-metin);
    bottom: 0;
    box-shadow: var(--kafe-golge-ust);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: var(--z-hata);
}

#blazor-error-ui .reload,
#blazor-error-ui .dismiss {
    color: inherit;
    text-decoration: underline;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: .75rem;
    top: .5rem;
    text-decoration: underline;
}


/* ============================================================
   KAFE'YE ÖZGÜ BÖLÜMLER
   Menü, sepet, teslim seçimi, sipariş durumu, personel panosu,
   raporlar ve QR kartları. Hepsi yukarıdaki belirteçlerden (--kafe-*) beslenir.
   ============================================================ */

/* ---------------- Masa çipi / bilgi şeridi ---------------- */

.masa-cipi {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .8rem;
    border-radius: 999px;
    background-color: var(--kafe-turuncu-soluk);
    color: var(--kafe-turuncu-metin);
    font-size: var(--yz-13);
    font-weight: 700;
    white-space: nowrap;
}

.bilgi-seridi {
    display: flex;
    align-items: center;
    gap: var(--b3);
    padding: .7rem .9rem;
    margin-bottom: var(--b4);
    border-radius: var(--r-3);
    background-color: var(--kafe-vurgu-soluk);
    color: var(--kafe-vurgu);
    font-size: var(--yz-13);
    line-height: 1.45;
}

.bilgi-seridi a {
    font-weight: 700;
    color: var(--kafe-vurgu);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---------------- Kategori şeridi (yatay kaydırma) ---------------- */

.kategori-serit {
    display: flex;
    gap: var(--b2);
    overflow-x: auto;
    padding: 2px 2px var(--b2);
    margin: 0 0 var(--b4);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.kategori-serit::-webkit-scrollbar {
    display: none;
}

.kategori-cip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 38px;
    padding: 0 .95rem;
    border: 1px solid var(--kafe-kenar-koyu);
    border-radius: 999px;
    background-color: var(--kafe-yuzey);
    color: var(--kafe-metin-2);
    font-size: var(--yz-14);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}

.kategori-cip:hover {
    border-color: var(--kafe-kenar-2);
    color: var(--kafe-metin);
}

.kategori-cip.aktif {
    background-color: var(--kafe-vurgu);
    border-color: var(--kafe-vurgu);
    color: var(--kafe-metin-ters);
}

.kategori-cip .sayi {
    font-size: var(--yz-12);
    opacity: .7;
    font-variant-numeric: tabular-nums;
}

/* ---------------- Adet seçici ---------------- */

.adet-secici {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--kafe-kenar-koyu);
    border-radius: var(--r-2);
    background-color: var(--kafe-yuzey);
    overflow: hidden;
}

.adet-secici button {
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--kafe-vurgu);
    cursor: pointer;
}

.adet-secici button:hover {
    background-color: var(--kafe-vurgu-soluk);
}

.adet-secici button:disabled {
    color: var(--kafe-metin-4);
    background: transparent;
    cursor: default;
}

.adet-secici .adet {
    min-width: 30px;
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--kafe-metin);
}

@media (max-width: 767.98px) {
    .adet-secici button {
        width: 40px;
        height: 40px;
    }
}

/* ---------------- Sepet satırları ---------------- */

.sepet-satiri {
    display: flex;
    align-items: center;
    gap: var(--b3);
    padding: .8rem 1rem;
}

.sepet-satiri-bilgi {
    flex: 1 1 auto;
    min-width: 0;
}

.sepet-satiri-ad {
    font-weight: 700;
    color: var(--kafe-metin);
}

.sepet-satiri-alt {
    font-size: var(--yz-12);
    color: var(--kafe-metin-3);
}

.sepet-satiri-tutar {
    min-width: 84px;
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
    .sepet-satiri {
        flex-wrap: wrap;
    }

    .sepet-satiri-bilgi {
        flex: 1 1 100%;
    }

    .sepet-satiri-tutar {
        margin-left: auto;
    }

    /* Salt okunur satır (sipariş detayı): düzenleme alanı yok, tutar adla aynı satırda kalır. */
    .sepet-satiri.salt-okunur {
        flex-wrap: nowrap;
    }

    .sepet-satiri.salt-okunur .sepet-satiri-bilgi {
        flex: 1 1 auto;
    }
}

/* ---------------- Seçim kartları (teslim şekli, doğrulama türü) ---------------- */

.secim-izgara {
    display: grid;
    gap: var(--b3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 575.98px) {
    .secim-izgara {
        grid-template-columns: 1fr;
    }
}

.secim-karti {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: var(--b3);
    padding: .9rem 1rem;
    border: 1.5px solid var(--kafe-kenar);
    border-radius: var(--r-3);
    background-color: var(--kafe-yuzey);
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}

.secim-karti:hover {
    border-color: var(--kafe-kenar-2);
}

.secim-karti.secili {
    border-color: var(--kafe-vurgu);
    background-color: var(--kafe-vurgu-soluk);
    box-shadow: inset 0 0 0 1px var(--kafe-vurgu);
}

.secim-karti-baslik {
    display: block;
    font-weight: 700;
    color: var(--kafe-metin);
}

.secim-karti-metin {
    display: block;
    margin-top: .15rem;
    font-size: var(--yz-13);
    line-height: 1.45;
    color: var(--kafe-metin-3);
}

.secim-karti-etiket {
    display: inline-block;
    margin-top: .4rem;
    font-size: var(--yz-12);
    font-weight: 700;
    color: var(--kafe-yesil-koyu);
}

.secim-karti-etiket.ucretli {
    color: var(--kafe-turuncu-metin);
}

/* ---------------- Tutar özeti ---------------- */

.tutar-ozeti {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .45rem var(--b3);
    font-size: var(--yz-14);
}

.tutar-ozeti dt {
    font-weight: 500;
    color: var(--kafe-metin-2);
}

.tutar-ozeti dd {
    margin: 0;
    text-align: right;
    color: var(--kafe-metin);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tutar-ozeti .indirim {
    color: var(--kafe-yesil-koyu);
}

.tutar-ozeti .genel {
    padding-top: .55rem;
    border-top: 1px solid var(--kafe-kenar);
    font-size: var(--yz-17);
    font-weight: 700;
    color: var(--kafe-metin);
}

/* ---------------- Sipariş durum bandı ---------------- */

.durum-bandi {
    display: flex;
    align-items: flex-start;
    gap: var(--b3);
    padding: 1rem 1.1rem;
    margin-bottom: var(--b4);
    border: 1px solid;
    border-radius: var(--r-3);
}

.durum-bandi .ikon-kutu {
    width: 44px;
    height: 44px;
    background-color: rgba(255, 255, 255, .7);
    color: inherit;
}

.durum-bandi-baslik {
    margin: 0;
    font-size: var(--yz-17);
    font-weight: 700;
    color: inherit;
}

.durum-bandi-metin {
    margin: .15rem 0 0;
    font-size: var(--yz-14);
    line-height: 1.5;
}

.durum-bandi.hazir {
    background-color: var(--kafe-durum-teslim-zemin);
    border-color: var(--kafe-durum-teslim-kenar);
    color: var(--kafe-durum-teslim-metin);
}

.durum-bandi.hazirlaniyor {
    background-color: var(--kafe-durum-devam-zemin);
    border-color: var(--kafe-durum-devam-kenar);
    color: var(--kafe-durum-devam-metin);
}

.durum-bandi.alindi {
    background-color: var(--kafe-durum-tamam-zemin);
    border-color: var(--kafe-durum-tamam-kenar);
    color: var(--kafe-durum-tamam-metin);
}

.durum-bandi.bekliyor,
.durum-bandi.teslim {
    background-color: var(--kafe-durum-acik-zemin);
    border-color: var(--kafe-durum-acik-kenar);
    color: var(--kafe-durum-acik-metin);
}

.durum-bandi.iptal {
    background-color: var(--kafe-durum-iptal-zemin);
    border-color: var(--kafe-durum-iptal-kenar);
    color: var(--kafe-durum-iptal-metin);
}

/* ---------------- Zaman çizelgesi (Ödendi → Hazırlanıyor → Hazır → Teslim) ---------------- */

.zaman-cizelgesi {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--b2);
}

.zaman-adim {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    text-align: center;
    font-size: var(--yz-12);
    color: var(--kafe-metin-3);
}

.zaman-adim::before {
    content: "";
    position: absolute;
    top: 15px;
    left: calc(-50% + 18px);
    right: calc(50% + 18px);
    height: 2px;
    background-color: var(--kafe-kenar);
}

.zaman-adim:first-child::before {
    display: none;
}

.zaman-nokta {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 2px solid var(--kafe-kenar);
    border-radius: 50%;
    background-color: var(--kafe-yuzey-3);
    color: var(--kafe-metin-4);
}

.zaman-adim.tamam::before {
    background-color: var(--kafe-vurgu);
}

.zaman-adim.tamam .zaman-nokta {
    background-color: var(--kafe-vurgu);
    border-color: var(--kafe-vurgu);
    color: var(--kafe-metin-ters);
}

.zaman-adim.simdi .zaman-nokta {
    background-color: var(--kafe-turuncu);
    border-color: var(--kafe-turuncu);
    color: var(--kafe-metin-ters);
}

.zaman-adim-ad {
    font-weight: 700;
    color: var(--kafe-metin-2);
}

.zaman-adim.tamam .zaman-adim-ad,
.zaman-adim.simdi .zaman-adim-ad {
    color: var(--kafe-metin);
}

.zaman-adim-saat {
    font-variant-numeric: tabular-nums;
}

.sure-ozeti {
    display: flex;
    flex-wrap: wrap;
    gap: var(--b2) var(--b4);
    margin-top: var(--b3);
    font-size: var(--yz-13);
    color: var(--kafe-metin-2);
}

.sure-ozeti strong {
    color: var(--kafe-metin);
    font-variant-numeric: tabular-nums;
}

/* ---------------- Segmentli denetim (sekmeler) ---------------- */

.segment {
    display: inline-flex;
    gap: 2px;
    max-width: 100%;
    padding: 3px;
    overflow-x: auto;
    background-color: var(--kafe-yuzey-2);
    border: 1px solid var(--kafe-kenar);
    border-radius: var(--r-2);
}

.segment button {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 34px;
    padding: .3rem .75rem;
    border: 0;
    border-radius: var(--r-1);
    background: transparent;
    color: var(--kafe-metin-3);
    font-size: var(--yz-13);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.segment button:hover {
    color: var(--kafe-metin);
}

.segment button.aktif {
    background-color: var(--kafe-yuzey);
    color: var(--kafe-metin);
    box-shadow: var(--kafe-golge-1);
}

/* Tam genişlik sekme: sekmeler eşit pay alır, telefonda yazı alt satıra iner (kaydırma gerekmez). */
.segment.segment-tam {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    width: 100%;
}

.segment.segment-tam button {
    justify-content: center;
    text-align: center;
}

@media (max-width: 575.98px) {
    .segment.segment-tam button {
        flex-direction: column;
        gap: .2rem;
        padding: .45rem .35rem;
        font-size: var(--yz-12);
        white-space: normal;
        line-height: 1.2;
    }
}

/* Kod / barkod metni: Bootstrap'in pembe "code" rengi yerine nötr, okunaklı. */
code {
    color: var(--kafe-metin-2);
    font-size: .9em;
    letter-spacing: .02em;
}

.segment .sayi {
    min-width: 20px;
    padding: 0 .35rem;
    border-radius: 999px;
    background-color: var(--kafe-vurgu-soluk);
    color: var(--kafe-vurgu);
    font-size: var(--yz-12);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---------------- Genel liste satırı ---------------- */

.satir {
    display: flex;
    align-items: center;
    gap: var(--b3);
    min-height: 58px;
    padding: .65rem 1.1rem;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .12s ease;
}

.satir:hover,
.satir:focus {
    background-color: var(--kafe-yuzey-2);
    color: inherit;
    text-decoration: none;
}

.satir-ana {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.satir-baslik {
    font-size: var(--yz-14);
    font-weight: 600;
    color: var(--kafe-metin);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.satir-alt {
    font-size: var(--yz-12);
    color: var(--kafe-metin-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.satir-sag {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .25rem;
}

.satir-tutar {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.satir.okunmamis .satir-baslik::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: .45rem;
    border-radius: 50%;
    background-color: var(--kafe-turuncu);
    vertical-align: middle;
}

/* ---------------- Personel sipariş panosu ---------------- */

.pano-kolonlar {
    display: grid;
    gap: var(--b4);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
}

.pano-sekmeler {
    display: none;
    margin-bottom: var(--b3);
}

@media (max-width: 991.98px) {
    .pano-kolonlar {
        grid-template-columns: 1fr;
    }

    .pano-kolon:not(.secili) {
        display: none;
    }

    .pano-sekmeler {
        display: inline-flex;
    }
}

.pano-kolon-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 var(--b3);
    padding: 0 2px;
    font-size: var(--yz-14);
    font-weight: 700;
    color: var(--kafe-metin);
}

.pano-kart {
    margin-bottom: var(--b3);
    padding: .85rem 1rem;
    background-color: var(--kafe-yuzey);
    border: 1px solid var(--kafe-kenar);
    border-left: 4px solid var(--kafe-vurgu);
    border-radius: var(--r-3);
    box-shadow: var(--kafe-golge-1);
}

.pano-kart.hazirlaniyor {
    border-left-color: var(--kafe-turuncu);
}

.pano-kart.hazir {
    border-left-color: var(--kafe-yesil);
}

.pano-kart.gecikti {
    border-left-color: var(--kafe-kirmizi);
}

.pano-kart-ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--b2);
    margin-bottom: .35rem;
}

.pano-kart-no {
    font-size: var(--yz-17);
    font-weight: 800;
    color: var(--kafe-metin);
}

.pano-sure {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: var(--yz-13);
    font-weight: 700;
    color: var(--kafe-metin-3);
    font-variant-numeric: tabular-nums;
}

.pano-kart.gecikti .pano-sure {
    color: var(--kafe-kirmizi-koyu);
}

.pano-urunler {
    margin: .35rem 0 .5rem;
    padding: 0;
    list-style: none;
    font-size: var(--yz-14);
    color: var(--kafe-metin);
}

.pano-urunler li + li {
    margin-top: .1rem;
}

.pano-not {
    margin-bottom: .5rem;
    padding: .35rem .55rem;
    border-radius: var(--r-1);
    background-color: var(--kafe-durum-devam-zemin);
    color: var(--kafe-durum-devam-metin);
    font-size: var(--yz-13);
}

.pano-musteri {
    margin-bottom: .6rem;
    font-size: var(--yz-12);
    color: var(--kafe-metin-3);
}

.pano-kart .btn-ilerlet {
    width: 100%;
}

.canli-gosterge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--yz-12);
    font-weight: 600;
    color: var(--kafe-metin-3);
}

.canli-gosterge::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--kafe-metin-4);
}

.canli-gosterge.bagli {
    color: var(--kafe-yesil-koyu);
}

.canli-gosterge.bagli::before {
    background-color: var(--kafe-yesil);
}

/* ---------------- Raporlar: KPI ve CSS çubuk grafikleri (JavaScript yok) ---------------- */

.kpi-izgara {
    display: grid;
    gap: var(--b3);
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-bottom: var(--b4);
}

@media (max-width: 1199.98px) {
    .kpi-izgara {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .kpi-izgara {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.kpi {
    padding: .85rem 1rem;
    background-color: var(--kafe-yuzey);
    border: 1px solid var(--kafe-kenar);
    border-radius: var(--r-3);
    box-shadow: var(--kafe-golge-1);
}

.kpi-baslik {
    font-size: var(--yz-12);
    font-weight: 600;
    color: var(--kafe-metin-3);
}

.kpi-deger {
    margin-top: .25rem;
    font-size: var(--yz-20);
    font-weight: 700;
    line-height: 1.2;
    color: var(--kafe-metin);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.kpi-alt {
    margin-top: .15rem;
    font-size: var(--yz-12);
    color: var(--kafe-metin-3);
}

.cubuk-grafik {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 190px;
    padding-top: var(--b2);
    overflow-x: auto;
}

.cubuk-sutun {
    flex: 1 0 16px;
    min-width: 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
}

.cubuk {
    width: 100%;
    min-height: 2px;
    border-radius: 4px 4px 0 0;
    background-color: var(--kafe-vurgu);
    transition: background-color .14s ease;
}

.cubuk.bos {
    background-color: var(--kafe-kenar);
}

.cubuk-sutun:hover .cubuk {
    background-color: var(--kafe-turuncu);
}

.cubuk-etiket {
    font-size: 10px;
    line-height: 1;
    color: var(--kafe-metin-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.yatay-cubuk {
    height: 8px;
    border-radius: 999px;
    background-color: var(--kafe-yuzey-3);
    overflow: hidden;
}

.yatay-cubuk > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background-color: var(--kafe-vurgu);
}

.yatay-cubuk.turuncu > span {
    background-color: var(--kafe-turuncu);
}

.sira-no {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--kafe-vurgu-soluk);
    color: var(--kafe-vurgu);
    font-size: var(--yz-12);
    font-weight: 700;
}

.sure-izgara {
    display: grid;
    gap: var(--b3);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 575.98px) {
    .sure-izgara {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------------- Masalar ve QR kartları ---------------- */

.qr-izgara {
    display: grid;
    gap: var(--b3);
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.qr-karti {
    padding: 1rem;
    text-align: center;
    background-color: var(--kafe-yuzey);
    border: 1px solid var(--kafe-kenar);
    border-radius: var(--r-3);
    box-shadow: var(--kafe-golge-1);
}

.qr-karti.pasif {
    opacity: .55;
}

.qr-karti img {
    width: 100%;
    max-width: 180px;
    aspect-ratio: 1;
    image-rendering: pixelated;
}

.qr-karti-baslik {
    margin: .5rem 0 0;
    font-size: var(--yz-17);
    font-weight: 800;
    color: var(--kafe-metin);
}

.qr-karti-adres {
    font-size: 11px;
    color: var(--kafe-metin-3);
    word-break: break-all;
}

.qr-eylemler {
    display: flex;
    justify-content: center;
    gap: var(--b1);
    margin-top: var(--b2);
}

/* ---------------- Görseller ---------------- */

.kucuk-gorsel {
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: var(--r-1);
    background-color: var(--kafe-yuzey-3);
    color: var(--kafe-metin-4);
}

.kucuk-gorsel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.onizleme-gorsel {
    display: block;
    width: 100%;
    max-height: 300px;
    object-fit: contain;
    border-radius: var(--r-2);
    background-color: var(--kafe-yuzey-3);
}

/* ---------------- Satır içi fiyat düzenleme ---------------- */

.fiyat-girdi {
    position: relative;
    width: 130px;
}

.fiyat-girdi .form-control {
    padding-right: 1.8rem;
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.fiyat-girdi::after {
    content: "₺";
    position: absolute;
    top: 50%;
    right: .65rem;
    transform: translateY(-50%);
    font-weight: 700;
    color: var(--kafe-metin-3);
    pointer-events: none;
}

.fiyat-girdi.kaydedildi .form-control {
    border-color: var(--kafe-yesil-gecerli);
    background-color: var(--kafe-durum-teslim-zemin);
}

.fiyat-girdi.hatali .form-control {
    border-color: var(--kafe-kirmizi);
}

/* ---------------- Anlık bildirim balonu ---------------- */

.balon {
    position: fixed;
    top: calc(var(--ust-bar-h) + env(safe-area-inset-top, 0px) + 12px);
    left: 16px;
    right: 16px;
    z-index: var(--z-hata);
    max-width: 460px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: var(--b3);
    padding: .9rem 1rem;
    border: 1px solid var(--kafe-durum-teslim-kenar);
    border-radius: var(--r-3);
    background-color: var(--kafe-yuzey);
    box-shadow: var(--kafe-golge-3);
    animation: balon-gir .22s ease-out;
}

.balon-govde {
    flex: 1 1 auto;
    min-width: 0;
}

.balon-baslik {
    font-weight: 700;
    color: var(--kafe-metin);
}

.balon-metin {
    font-size: var(--yz-14);
    color: var(--kafe-metin-2);
}

.balon-kapat {
    flex: 0 0 auto;
    padding: .2rem;
    border: 0;
    background: transparent;
    color: var(--kafe-metin-3);
    cursor: pointer;
}

@keyframes balon-gir {
    from { transform: translateY(-8px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

/* ---------------- Hesap ekranları (giriş, kayıt, telefon doğrulama) ---------------- */

.hesap-alt-baglanti {
    margin-top: var(--b4);
    text-align: center;
    font-size: var(--yz-14);
    color: var(--kafe-metin-2);
}

.hesap-alt-baglanti a {
    font-weight: 700;
    color: var(--kafe-vurgu);
}

.hesap-dipnot a {
    color: rgba(255, 255, 255, .8);
    text-decoration: underline;
}

.kod-girdi {
    letter-spacing: .5em;
    text-align: center;
    font-size: 1.4rem !important;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---------------- Metin sayfaları (Gizlilik Politikası, Hesap Silme) ---------------- */

.metin-sayfasi {
    max-width: 760px;
    padding: var(--b5);
    background-color: var(--kafe-yuzey);
    border: 1px solid var(--kafe-kenar);
    border-radius: var(--r-3);
    box-shadow: var(--kafe-golge-1);
    line-height: 1.6;
}

.metin-sayfasi h2 {
    margin: var(--b5) 0 var(--b2);
    font-size: 1.05rem;
    font-weight: 700;
}

.metin-sayfasi ul,
.metin-sayfasi ol {
    padding-left: 1.25rem;
}

.metin-sayfasi li + li {
    margin-top: .35rem;
}

/* ---------------- Site alt bilgisi (yalnız web, bkz. SiteAltBilgisi) ----------------
   Sabit sepet çubuğu (ana sayfa) ve sabit eylem şeridi (Sepetim, Ödeme…) alt bilginin son satırlarını örtmesin. */

@media (max-width: 991.98px) {
    .ana:has(.siparis-cubugu) ~ .site-alt .site-alt-ic,
    .kabuk:has(.alt-eylem) .site-alt-ic {
        padding-bottom: calc(var(--alt-menu-alt) + 170px);
    }
}

@media (min-width: 992px) {
    .ana:has(.siparis-cubugu) ~ .site-alt .site-alt-ic {
        padding-bottom: 108px;
    }
}

/* ---------------- Yazdırma ---------------- */

@media print {
    .sepet-cubugu,
    .balon,
    .qr-eylemler,
    .ekle-formu,
    .sayfa-basligi-eylemler {
        display: none !important;
    }

    .qr-karti {
        break-inside: avoid;
        border: 1px solid #000;
        box-shadow: none;
    }
}

/* ============================================================
   TIKLA GELSİN KATMANI — ortak bileşenlerin son görünümü.
   Bu bölüm yukarıdaki temel kuralları bilerek ezer (aynı seçici, sonra gelir).
   ============================================================ */

/* ---- Sayfa başlığı: telefonda başlık üst çubukta ortalanmış gösterilir, burada gizlenir ---- */
.sayfa-basligi {
    padding-bottom: 0;
    border-bottom: 0;
}

.sayfa-basligi h1,
.sayfa-basligi h2 {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.025em;
}

.sayfa-basligi-alt {
    font-size: var(--yz-14);
}

@media (max-width: 991.98px) {
    .sayfa-basligi h1,
    .sayfa-basligi-geri {
        position: absolute !important;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .sayfa-basligi {
        margin-bottom: var(--b4);
    }

    .sayfa-basligi-alt {
        margin-top: 0;
    }

    .sayfa-basligi:not(:has(.sayfa-basligi-alt)):not(:has(.sayfa-basligi-eylemler)) {
        margin: 0;
    }
}

/* ---- Düğmeler ---- */
.btn {
    border-radius: 14px;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
    box-shadow: none;
}

@media (max-width: 767.98px) {
    .btn { --btn-y: 48px; font-size: 16px; }
    .btn-sm { --btn-y: 38px; font-size: 14px; }
    .btn-ikon { --btn-y: 44px; }
}

.btn-lg {
    --btn-y: 54px;
    font-size: 17px;
    font-weight: 700;
    border-radius: 16px;
}

/* ---- Kart ---- */
.card,
.liste-karti {
    border-radius: 18px;
    box-shadow: none;
}

.card-header {
    padding: 1rem 1.15rem;
    border-radius: 18px 18px 0 0;
    font-size: var(--yz-17);
    font-weight: 700;
}

.card-body {
    padding: 1.1rem 1.15rem;
}

/* ---- Form alanları ---- */
.form-control,
.form-select {
    min-height: 48px;
    border-color: #DADADA;
    border-radius: 14px;
    padding: .65rem 1rem;
}

@media (max-width: 767.98px) {
    .form-control,
    .form-select {
        min-height: 54px;
    }
}

.form-control-sm,
.form-select-sm {
    min-height: 38px;
    border-radius: 10px;
    padding: .35rem .7rem;
}

.form-label {
    font-weight: 600;
    color: var(--kafe-metin-2);
}

/* ---- Açma/kapama anahtarı (iOS biçimi, açıkken kırmızı) ---- */
.form-switch .form-check-input {
    width: 3.1em;
    height: 1.8em;
    margin-top: -.15em;
    border: 0;
    border-radius: 999px;
    background-color: #E2E2E2;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.4' fill='%23fff'/%3e%3c/svg%3e");
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
    cursor: pointer;
}

.form-switch .form-check-input:checked {
    background-color: var(--kafe-ana);
}

.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.4' fill='%23fff'/%3e%3c/svg%3e");
}

.form-check-input:checked {
    background-color: var(--kafe-ana);
    border-color: var(--kafe-ana);
}

/* ---- Hap biçimli seçici (Sana Gelsin / Bankodan Al) ---- */
.segment {
    display: flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid #DADADA;
    border-radius: 999px;
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px rgba(17, 17, 17, .05);
}

.segment button {
    flex: 1 1 0;
    justify-content: center;
    min-height: 44px;
    padding: .35rem .9rem;
    border-radius: 999px;
    color: var(--kafe-ana);
    font-size: var(--yz-15);
    font-weight: 600;
}

.segment button:hover {
    color: var(--kafe-ana-koyu);
    background-color: var(--kafe-ana-soluk);
}

.segment button.aktif,
.segment button.aktif:hover {
    background-color: var(--kafe-ana);
    color: #FFFFFF;
    box-shadow: 0 6px 14px rgba(22, 90, 56, .26);
}

.segment button.aktif .sayi {
    background-color: rgba(255, 255, 255, .25);
    color: #FFFFFF;
}

/* Ürün yönetimi: kategori başlıkları (tabloda ara satır, telefonda başlık) — ürünler karışmaz. */
.urun-kategori-satiri th {
    padding: .9rem .75rem .45rem;
    border-bottom: 2px solid var(--kafe-ana);
    background-color: var(--kafe-ana-soluk);
    color: var(--kafe-ana);
    font-size: var(--yz-15);
    font-weight: 800;
}

.urun-kategori-satiri small,
.urun-kategori-basligi small {
    margin-left: .5rem;
    color: var(--kafe-metin-3);
    font-size: var(--yz-13);
    font-weight: 600;
}

.urun-kategori-basligi {
    margin: 1.1rem 0 .5rem;
    padding-bottom: .35rem;
    border-bottom: 2px solid var(--kafe-ana);
    color: var(--kafe-ana);
    font-size: 1.05rem;
    font-weight: 800;
}

/* Henüz açılmamış seçenek (ör. "Kartla Öde · Henüz aktif değil"): görünür ama seçilemez. */
.segment button:disabled,
.segment button:disabled:hover {
    background-color: transparent;
    color: var(--kafe-metin-3);
    box-shadow: none;
    opacity: 1;
    cursor: not-allowed;
}

.segment-iki-satir {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    text-align: left;
}

.segment-not {
    font-size: 11px;
    font-weight: 600;
}

/* ---- Boş durum: yumuşak leke üzerinde kırmızı çizgi ikon ---- */
.bos-durum {
    padding: 2.5rem 1rem 2rem;
    border: 0;
    background: transparent;
}

.bos-durum .ikon-kutu {
    border: 0;
    width: 168px;
    height: 150px;
    margin-bottom: 1.4rem;
    border-radius: 58% 42% 50% 50% / 55% 46% 54% 45%;
    background-color: var(--kafe-ana-soluk);
    color: var(--kafe-ana);
}

.bos-durum .ikon-kutu .ikon {
    width: 56px;
    height: 56px;
}

.bos-durum-baslik {
    font-size: 21px;
    font-weight: 700;
    color: var(--kafe-metin);
}

.bos-durum-metin {
    max-width: 380px;
    font-size: var(--yz-15);
    color: var(--kafe-metin-3);
}

.bos-durum .btn {
    min-width: 180px;
    margin-top: .6rem;
}

/* ---- Rozetler ---- */
.badge {
    border-radius: 999px;
    padding: .38em .75em;
    font-weight: 700;
}

/* ---- Altta sabit eylem şeridi (telefon) — masaüstünde akışın içindedir ---- */
.alt-eylem {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: calc(var(--z-kabuk) - 2);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    border-top: 1px solid var(--kafe-kenar);
    background-color: #FFFFFF;
}

.alt-eylem .btn {
    width: 100%;
    --btn-y: 54px;
    font-size: 17px;
    font-weight: 700;
    border-radius: 16px;
}

/* Alt menü telefonda her sayfada açık: sabit eylem şeridi (Siparişi Onayla vb.) menünün ÜSTÜNE oturur,
   menünün altında kalıp görünmez olmaz. */
@media (max-width: 991.98px) {
    .kabuk:not(.menusuz) .alt-eylem {
        bottom: calc(var(--alt-menu-alt) + 78px);
        padding-bottom: 6px;
        border-top: 0;
        background: transparent;
    }

    .kabuk:not(.menusuz) .alt-eylem-bosluk {
        height: 112px;
    }
}

.alt-eylem .btn:disabled,
.alt-eylem .btn.disabled {
    border-color: #DADADA;
    background-color: #DADADA;
    color: #FFFFFF;
    opacity: 1;
}

.alt-eylem-bosluk {
    height: 96px;
}

@media (min-width: 992px) {
    .alt-eylem {
        position: static;
        flex-direction: row;
        justify-content: flex-end;
        padding: 0;
        margin-top: var(--b5);
        border: 0;
        background: transparent;
    }

    .alt-eylem .btn {
        width: auto;
        min-width: 240px;
    }

    .alt-eylem-bosluk {
        display: none;
    }
}

/* ---- Menü satırı (Hesabım listesi): kenarlı beyaz kart, kırmızı ikon, sağda ok ---- */
.menu-satirlari {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.menu-satiri {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: 64px;
    padding: 0 18px;
    border: 1px solid var(--kafe-kenar);
    border-radius: 18px;
    background-color: #FFFFFF;
    color: var(--kafe-metin);
    font-size: 16px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.menu-satiri:hover,
.menu-satiri:focus {
    color: var(--kafe-metin);
    text-decoration: none;
    border-color: var(--kafe-ana-kenar);
}

.menu-satiri > .ikon:first-child {
    flex: none;
    color: var(--kafe-ana);
}

.menu-satiri-yazi {
    flex: 1;
    min-width: 0;
}

.menu-satiri-ok {
    flex: none;
    color: var(--kafe-metin-2);
}

.menu-satiri.acik {
    border-radius: 18px 18px 0 0;
}

.menu-satiri-icerik {
    margin-top: -13px;
    padding: 16px 18px 18px;
    border: 1px solid var(--kafe-kenar);
    border-top: 0;
    border-radius: 0 0 18px 18px;
    background-color: #FFFFFF;
}

.menu-satiri.cikis,
.menu-satiri.cikis:hover {
    color: var(--kafe-ana);
}

/* Turuncu "dikkat" çipi ("E-Mail doğrula!") */
.dikkat-cipi {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    background-color: var(--kafe-turuncu);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

/* ---- Sayfa içi bölüm başlığı ---- */
.bolum-basligi {
    font-size: var(--yz-15);
    font-weight: 700;
    color: var(--kafe-metin);
}

.bos-durum.bos-liste {
    border: 0;
    background: transparent;
}

/* ---- Giriş / kayıt / doğrulama ekranları: logo yeşili üst bant, üstüne binen beyaz kart ---- */
.hesap-govde {
    align-items: flex-start;
    padding: calc(env(safe-area-inset-top, 0px) + 56px) 16px 32px;
    background-color: var(--kafe-zemin);
    background-image: linear-gradient(to bottom, var(--kafe-kabuk) 0, var(--kafe-kabuk) 260px, transparent 260px);
}

.hesap-kart {
    border: 0;
    border-radius: 24px;
    box-shadow: 0 16px 40px rgba(17, 17, 17, .12);
}

.hesap-logo {
    height: 84px;
}

.hesap-marka {
    font-family: var(--kafe-yazi-baslik);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--kafe-lacivert);
}

.hesap-ayrac {
    background: var(--kafe-ana);
}

.hesap-kart .btn-primary {
    min-height: 54px;
    font-size: 17px;
    border-radius: 16px;
}

.hesap-dipnot,
.hesap-dipnot a {
    color: var(--kafe-metin-3);
}

@media (min-width: 992px) {
    .hesap-govde {
        padding-top: 96px;
        background-image: linear-gradient(to bottom, var(--kafe-kabuk) 0, var(--kafe-kabuk) 320px, transparent 320px);
    }
}

/* Telefonda giriş / kayıt ekranları sabit durur: sayfa yukarı aşağı kaymaz, iOS'ta esneme yok. Görünüm
   (logo, boşluklar, alanlar) yukarıdaki gibi aynen kalır; içerik ekrandan uzun olursa (klavye açıkken,
   kayıt formu) yalnız bu alanın içi kayar. */
@media (max-width: 991.98px) {
    .hesap-govde {
        position: fixed;
        inset: 0;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: none;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---- Seçim çipleri (ürün düzenleme: alerjenler ve tercihler) ---- */
.secim-cipleri {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.secim-cipi {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--kafe-kenar-koyu);
    border-radius: 999px;
    background-color: var(--kafe-yuzey);
    color: var(--kafe-metin-2);
    font-size: var(--yz-13);
    font-weight: 600;
    cursor: pointer;
}

.secim-cipi:hover {
    border-color: var(--kafe-kenar-2);
}

.secim-cipi.secili {
    border-color: var(--kafe-ana);
    background-color: var(--kafe-ana);
    color: #FFFFFF;
}

.secim-cipi.tehlike.secili {
    border-color: var(--kafe-kirmizi);
    background-color: var(--kafe-kirmizi);
}

/* ---- Sürükle-bırak sıralama (kategoriler, ürünler) ---- */
.siralanir {
    cursor: grab;
}

.siralanir:active {
    cursor: grabbing;
}

.tasima-tutamak {
    flex: none;
    display: grid;
    place-items: center;
    width: 22px;
    color: var(--kafe-metin-4);
}

/* Solda sabit sıra numarası */
.sira-rozet {
    flex: none;
    display: grid;
    place-items: center;
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border-radius: 10px;
    background-color: var(--kafe-ana-soluk);
    color: var(--kafe-ana);
    font-size: var(--yz-14);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.suruklenen {
    opacity: .45;
}

/* Bırakılacak yer: üstte yeşil çizgi */
.birakma-hedefi {
    box-shadow: inset 0 3px 0 var(--kafe-ana);
    background-color: var(--kafe-ana-soluk);
}

.sira-sutunu {
    width: 1%;
    white-space: nowrap;
}