/* Saha Takip — temel stil katmanı.
   Mobil öncelikli: saha elemanı bu uygulamayı tek elle, güneş altında kullanacak.
   Dokunma hedefleri en az 48px, yüksek kontrast, tek sütun.
   Marka renkleri --brand-* değişkenlerinden gelir (firma başına farklı). */

:root {
    --brand-primary: #1d4ed8;
    --brand-accent: #ea580c;

    --bg: #f4f5f7;
    --surface: #ffffff;
    --border: #d8dbe0;
    --text: #16181d;
    --text-soft: #5b6472;
    --ok: #15803d;
    --warn: #b45309;
    --danger: #b91c1c;

    --radius: 12px;
    --tap: 48px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    /* Üst çubuk yüksekliği — yan menünün yapışkan konumu buna dayanır.
       Değiştirirsen .appbar min-height ile birlikte değiştir. */
    --appbar-h: 52px;
    --yanmenu-w: 244px;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.15rem; }
p { margin: 0 0 .75rem; }

a { color: var(--brand-primary); }

.wrap { max-width: 640px; margin: 0 auto; padding: 1rem; }
.wrap-wide { max-width: 1180px; margin: 0 auto; padding: 1rem; }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: .75rem;
}

.card-title { font-weight: 600; margin-bottom: .35rem; }

/* Butonlar — birincil eylem her zaman büyük ve tek */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: var(--tap);
    padding: .75rem 1.1rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

.btn-primary { background: var(--brand-primary); color: #fff; }
.btn-accent  { background: var(--brand-accent);  color: #fff; }
.btn-danger  { background: var(--danger);        color: #fff; }
.btn-block   { display: flex; width: 100%; }
.btn-lg      { min-height: 60px; font-size: 1.1rem; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* Form alanları */
label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .3rem; }

input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], input[type=date], input[type=time], select, textarea {
    width: 100%;
    min-height: var(--tap);
    padding: .6rem .7rem;
    font-size: 16px; /* iOS'ta 16px altı otomatik yakınlaştırma yapar */
    font-family: inherit;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}

textarea { min-height: 88px; resize: vertical; }

/* Tarih/saat alanları — iOS Safari için.
   Bu tipler iOS'ta YEREL denetim olarak çizilir: kutu genişliğini değil kendi
   içeriğini esas alır, `width: 100%` yok sayılabilir. Kullanıcı sistem yazı
   boyutunu büyütmüşse (Dynamic Type) denetim daha da genişler ve kartın sağ
   kenarından taşar — plan ekleme ekranındaki "Saat" alanında görülen buydu.
   Metin alanı gibi çizdirince kutuya uyar; dokununca yerel seçici yine açılır. */
input[type=date], input[type=time], input[type=datetime-local], input[type=month] {
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;       /* içeriğe göre şişmesini engeller */
    max-width: 100%;    /* hangi koşulda olursa olsun kabı aşmasın */
}

/* Hiçbir form alanı kabından taşmasın — yukarıdaki tipler dışında da geçerli
   bir emniyet kemeri (uzun placeholder, büyütülmüş yazı tipi, dar ekran). */
input, select, textarea { max-width: 100%; }

input:focus, select:focus, textarea:focus, .btn:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand-primary) 45%, transparent);
    outline-offset: 1px;
}

.field { margin-bottom: .9rem; }
.field-error { color: var(--danger); font-size: .88rem; margin-top: .25rem; }
.hint { color: var(--text-soft); font-size: .88rem; }

/* Rozet ve durum */
.badge {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
}
.badge-ok     { background: #dcfce7; color: var(--ok); }
.badge-warn   { background: #fef3c7; color: var(--warn); }
.badge-danger { background: #fee2e2; color: var(--danger); }
.badge-soft   { background: #eef1f5; color: var(--text-soft); }

/* Bildirim şeritleri */
.flash-stack { position: sticky; top: 0; z-index: 40; padding: .5rem .75rem 0; }
.flash {
    padding: .7rem .9rem;
    border-radius: 10px;
    margin-bottom: .5rem;
    font-size: .95rem;
    border: 1px solid;
}
.flash-success { background: #dcfce7; border-color: #86efac; color: #14532d; }
.flash-error   { background: #fee2e2; border-color: #fca5a5; color: #7f1d1d; }
.flash-info    { background: #dbeafe; border-color: #93c5fd; color: #1e3a8a; }
.flash-warning { background: #fef3c7; border-color: #fcd34d; color: #78350f; }

/* Boş durum ve hata sayfaları */
.state {
    text-align: center;
    padding: 3rem 1.25rem;
}
.state h1 { font-size: 1.4rem; }
.state p { color: var(--text-soft); }

/* Basit tablo — dar ekranda yatay kaydırır, sayfa gövdesi kaymaz */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: .93rem; }
table.data th, table.data td {
    padding: .55rem .6rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
}
table.data th { background: #eef1f5; font-weight: 600; }

.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .88rem; }
.muted { color: var(--text-soft); }
.mt { margin-top: 1rem; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }

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

/* ============================================================
   Panel kabuğu
   ============================================================ */

/* Süper admin geçiş uyarısı — yanlışlıkla müşteri verisinde işlem yapmayı önler */
.super-banner {
    background: #7c2d12; color: #fed7aa;
    padding: .5rem .9rem; font-size: .85rem; text-align: center;
}

.appbar {
    display: flex; align-items: center; gap: .5rem;
    min-height: var(--appbar-h);
    padding: .35rem .75rem;
    background: var(--brand-primary); color: #fff;
    position: sticky; top: 0; z-index: 50;
}
.appbar-brand {
    color: #fff; text-decoration: none; font-weight: 700;
    display: flex; align-items: center; gap: .5rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.appbar-brand img { display: block; }
.appbar-right { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.appbar-user {
    color: #fff; opacity: .92; text-decoration: none; font-size: .9rem;
    max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inline { display: inline; margin: 0; }
.linkish {
    background: none; border: 0; color: #fff; opacity: .9;
    font: inherit; font-size: .9rem; cursor: pointer; padding: 0; text-decoration: underline;
}

/* Çekmece düğmesi — yalnız dar ekranda; geniş ekranda menü zaten duruyor */
.appbar-menu {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: none;
    margin-left: -.25rem;
    background: none; border: 0; border-radius: 9px;
    color: #fff; cursor: pointer;
}
.appbar-menu:active { background: rgba(255, 255, 255, .18); }

/* ------------------------------------------------------------------
   Kabuk: yan menü + içerik
   ------------------------------------------------------------------ */

.kabuk { display: flex; align-items: flex-start; }

.icerik { flex: 1 1 auto; min-width: 0; padding: 1rem; }
.icerik-ic { max-width: 1180px; margin: 0 auto; }
/* Saha ekranları tek sütun okunur: uzun satır telefonda da masaüstünde de kötü */
.icerik.dar .icerik-ic { max-width: 820px; }

.yanmenu {
    display: flex; flex-direction: column;
    width: var(--yanmenu-w); flex: 0 0 var(--yanmenu-w);
    background: var(--surface);
    border-right: 1px solid var(--border);
}

.yanmenu-ust {
    display: flex; align-items: center; justify-content: space-between;
    padding: .8rem 1rem; font-weight: 700;
    border-bottom: 1px solid var(--border);
}
.yanmenu-kapat {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-right: -.5rem;
    background: none; border: 0; border-radius: 9px;
    color: var(--text-soft); cursor: pointer;
}

.yanmenu-nav { flex: 1 1 auto; overflow-y: auto; padding: .5rem .55rem 1rem; }
.yanmenu-grup { margin-top: .35rem; }
.yanmenu-baslik {
    padding: .7rem .6rem .25rem;
    font-size: .7rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-soft);
}

.nav-oge {
    display: flex; align-items: center; gap: .65rem;
    min-height: 42px; padding: .45rem .6rem;
    border-radius: 9px;
    color: var(--text); text-decoration: none;
    font-size: .93rem; font-weight: 500;
}
.nav-oge span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-oge:hover { background: var(--bg); }
.nav-ikon { flex: none; width: 20px; height: 20px; color: var(--text-soft); }

/* "Buradasınız" — onlarca ekran arasında kaybolmamak için tek görsel çapa */
.nav-oge.aktif {
    background: color-mix(in srgb, var(--brand-primary) 12%, var(--surface));
    color: var(--brand-primary); font-weight: 700;
}
.nav-oge.aktif .nav-ikon { color: var(--brand-primary); }

.yanmenu-alt {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .7rem .9rem calc(.7rem + var(--safe-bottom));
    border-top: 1px solid var(--border);
}
.yanmenu-kisi { text-decoration: none; color: var(--text); min-width: 0; }
.yanmenu-ad {
    display: block; font-weight: 600; font-size: .9rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.yanmenu-rol { display: block; font-size: .78rem; color: var(--text-soft); }
.yanmenu-alt form { margin: 0; }

.yanmenu-perde { display: none; }

/* ---- Dar ekran: yan menü soldan açılan çekmeceye döner ---- */
@media (max-width: 1079.98px) {
    .yanmenu {
        position: fixed; top: 0; bottom: 0; left: 0; z-index: 70;
        width: 84vw; max-width: 310px;
        transform: translateX(-100%);
        transition: transform .2s ease-out;
        box-shadow: 0 0 32px rgba(0, 0, 0, .28);
    }
    body.menu-acik .yanmenu { transform: none; }

    .yanmenu-perde[hidden] { display: none; }
    body.menu-acik .yanmenu-perde {
        display: block;
        position: fixed; inset: 0; z-index: 65;
        background: rgba(15, 18, 25, .5);
    }

    /* Dokunmatik: satırlar parmak boyunda olmalı */
    .nav-oge { min-height: var(--tap); font-size: .97rem; }
}

/* ---- Geniş ekran: menü sabit, kapatma düğmesi anlamsız ---- */
@media (min-width: 1080px) {
    .yanmenu {
        position: sticky; top: var(--appbar-h);
        max-height: calc(100vh - var(--appbar-h));
    }
    .yanmenu-ust, .yanmenu-kapat { display: none; }
    .icerik { padding: 1.25rem 1.75rem 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .yanmenu { transition: none; }
}

/* Yalnız geniş ekranda görünen üst çubuk öğeleri (dar ekranda çekmecede duruyorlar) */
.genis-only { display: none; }
@media (min-width: 768px) { .genis-only { display: inline-flex; } }

/* ------------------------------------------------------------------
   Saha elemanı alt sekme çubuğu — telefonda tek elle erişim
   ------------------------------------------------------------------ */

.tabbar { display: none; }

@media (max-width: 1079.98px) {
    body.role-field .tabbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
        display: flex; background: var(--surface);
        border-top: 1px solid var(--border);
    }
    body.role-field .icerik { padding-bottom: calc(var(--tap) + 1.75rem + var(--safe-bottom)); }
}

.tabbar a, .tabbar button {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    min-height: var(--tap);
    padding: .35rem .15rem calc(.35rem + var(--safe-bottom));
    background: none; border: 0;
    font-family: inherit; font-size: .68rem; font-weight: 600;
    color: var(--text-soft); text-decoration: none; cursor: pointer;
}
.tabbar span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar .nav-ikon { width: 22px; height: 22px; }
.tabbar a:active, .tabbar button:active { background: var(--bg); }
.tabbar .aktif { color: var(--brand-primary); }
.tabbar .aktif .nav-ikon { color: var(--brand-primary); }

/* Girişsiz ekranlar (giriş, 2FA, parola, KVKK) */
body.plain { display: grid; place-items: start center; min-height: 100vh; padding: 1.5rem 1rem 3rem; }
.plain-box { width: 100%; max-width: 26rem; }
.plain-brand {
    text-align: center; font-weight: 700; font-size: 1.15rem;
    margin-bottom: 1.25rem; color: var(--brand-primary);
}
.plain-box .flash { margin: 0 0 .8rem; }
.plain-wide { max-width: 42rem; }

/* Yetki matrisi */
.matrix { width: 100%; border-collapse: collapse; }
.matrix th, .matrix td { padding: .5rem .55rem; border-bottom: 1px solid var(--border); text-align: left; }
.matrix th { background: #eef1f5; font-size: .85rem; white-space: nowrap; }
.matrix td.center, .matrix th.center { text-align: center; }
.matrix input[type=checkbox] { width: 22px; height: 22px; }

.checkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .4rem .9rem; }
.checkrow { display: flex; align-items: center; gap: .55rem; padding: .35rem 0; }
.checkrow input[type=checkbox] { width: 22px; height: 22px; flex: none; }
.checkrow label { margin: 0; font-weight: 500; }

.secret-box {
    background: #eef1f5; border: 1px dashed var(--brand-primary); border-radius: 10px;
    padding: .8rem; font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 1.05rem; letter-spacing: .05em; word-break: break-all; text-align: center;
}

.legal {
    max-height: 22rem; overflow-y: auto; background: var(--surface);
    border: 1px solid var(--border); border-radius: 10px;
    padding: 1rem; font-size: .93rem; white-space: pre-wrap;
}

.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.mb { margin-bottom: 1rem; }

/* Filtre satırı — dar ekranda tek sütuna iner */
.grid-filter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .75rem;
    align-items: end;
}

/* İçe aktarım sonucu */
.import-stats { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.import-stats .stat {
    background: #eef1f5; border-radius: 10px; padding: .6rem .9rem; min-width: 7rem;
}
.import-stats .stat b { display: block; font-size: 1.4rem; line-height: 1.2; }
.import-stats .stat span { color: var(--text-soft); font-size: .82rem; }

.error-list { max-height: 14rem; overflow-y: auto; font-size: .88rem; }
.error-list li { margin-bottom: .2rem; }

/* Kod örneği kutusu (CSV başlıkları vb.) */
pre.sample {
    background: #1e293b; color: #e2e8f0; border-radius: 10px;
    padding: .8rem; overflow-x: auto; font-size: .85rem; line-height: 1.5;
}

/* ============================================================
   PWA: bağlantı durumu, güncelleme, ana ekrana ekle
   ============================================================ */

/* Çevrimdışı şeridi — ekranın altında, sekme çubuğunun üstünde durur.
   Saha elemanı bağlantısının koptuğunu ANINDA görmeli ama panik yapmamalı;
   metin bilerek "kayıtların güvende" diyor. */
.netbar {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    z-index: 45;
    padding: .6rem .9rem;
    font-size: .88rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.35;
}
.netbar[hidden] { display: none; }
.netbar-offline { background: #78350f; color: #fde68a; }
.netbar-syncing { background: #1e3a8a; color: #bfdbfe; }

/* Şerit yalnız alt sekme çubuğu VARKEN yukarı kalkar. Çubuk artık sadece
   dar ekrandaki saha elemanında görünüyor; başka her durumda en altta durur. */
@media (max-width: 1079.98px) {
    body.role-field .netbar { bottom: calc(var(--tap) + var(--safe-bottom)); }
}

/* Yeni sürüm hazır bildirimi */
.update-toast {
    position: fixed;
    left: 50%; transform: translateX(-50%);
    bottom: calc(1.5rem + var(--safe-bottom));
    z-index: 46;
    display: flex; align-items: center; gap: .75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
    padding: .7rem .9rem;
    max-width: calc(100vw - 2rem);
}
.update-toast span { font-size: .92rem; }

/* ============================================================
   Plan ekranı
   ============================================================ */

.plan-item {
    border-top: 1px solid var(--border);
    padding: .7rem 0;
}
.plan-item:first-of-type { border-top: 0; }

.plan-item-head {
    display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
}
.plan-time {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--brand-primary);
    min-width: 3.2rem;
}
.plan-target { font-weight: 600; }

.btn-sm { min-height: 38px; padding: .3rem .7rem; font-size: .88rem; }

/* İkili seçim (Okul/Bayi, Ziyaret/Yeni bayi) — sahada tek dokunuşla seçilir */
.segmented { display: flex; gap: .5rem; flex-wrap: wrap; }
.segmented .seg { flex: 1 1 8rem; margin: 0; }
.segmented .seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.segmented .seg span {
    display: flex; align-items: center; justify-content: center;
    min-height: var(--tap);
    padding: .6rem .8rem;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}
.segmented .seg input:checked + span {
    border-color: var(--brand-primary);
    background: color-mix(in srgb, var(--brand-primary) 12%, var(--surface));
    color: var(--brand-primary);
}
.segmented .seg input:focus-visible + span {
    outline: 3px solid color-mix(in srgb, var(--brand-primary) 45%, transparent);
}

.sil-form { display: inline-flex; gap: .4rem; align-items: center; flex-wrap: wrap; }

/* ============================================================
   Ziyaret akışı
   ============================================================ */

/* Aktif ziyaret kartı — ekranın en dikkat çeken öğesi olmalı */
.aktif-ziyaret {
    background: var(--brand-accent);
    color: #fff;
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: .75rem;
    text-align: center;
}
.aktif-baslik { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; opacity: .9; }
.aktif-hedef { font-size: 1.1rem; font-weight: 700; margin: .25rem 0 .4rem; }
.aktif-sayac {
    font-size: 2.6rem; font-weight: 700; line-height: 1.1;
    font-variant-numeric: tabular-nums;
    margin-bottom: .6rem;
}
.aktif-btn { background: #fff; color: var(--brand-accent); border-color: transparent; }
.aktif-not { font-size: .8rem; opacity: .9; margin: .5rem 0 0; }

/* Adım blokları — her adım ne yapılacağını tek cümleyle söyler */
.adim {
    border-top: 1px solid var(--border);
    padding: 1rem 0;
}
.adim:first-of-type { border-top: 0; padding-top: 0; }
.adim-baslik {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    font-weight: 600; margin-bottom: .5rem;
}
.adim-no {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; flex: none;
    border-radius: 50%;
    background: var(--brand-primary); color: #fff;
    font-size: .85rem; font-weight: 700;
}

/* GPS durumu */
.gps-durum {
    padding: .7rem .9rem;
    border-radius: 10px;
    font-size: .92rem;
    font-weight: 600;
    border: 1px solid;
}
.gps-bekliyor { background: #eef1f5; border-color: var(--border); color: var(--text-soft); }
.gps-tamam    { background: #dcfce7; border-color: #86efac; color: #14532d; }
.gps-hata     { background: #fee2e2; border-color: #fca5a5; color: #7f1d1d; }

/* Fotoğraf çekme düğmesi — parmakla kolay bulunacak kadar büyük */
.foto-btn {
    display: flex; align-items: center; justify-content: center;
    min-height: 72px;
    border: 2px dashed var(--brand-primary);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand-primary) 6%, var(--surface));
    color: var(--brand-primary);
    font-size: 1.05rem; font-weight: 700;
    cursor: pointer;
    margin: 0;
}
.foto-btn:active { background: color-mix(in srgb, var(--brand-primary) 15%, var(--surface)); }

.foto-onizleme { margin-top: .7rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.foto-onizleme img {
    max-width: 100%; max-height: 240px;
    border-radius: 10px; display: block;
}
/* Bayi raf fotoğrafları: birden fazla olduğu için küçük kareler */
.foto-onizleme .onizleme-kare {
    width: 88px; height: 88px; object-fit: cover;
    border-radius: 8px; flex: none;
}
.foto-onizleme .hint { flex-basis: 100%; margin: 0; }

/* Ziyaret detayındaki fotoğraf galerisi */
.foto-galeri {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: .5rem;
}
.foto-galeri img {
    width: 100%; height: 120px; object-fit: cover;
    border-radius: 8px; display: block;
}

/* Görüşülen kişi satırı */
.kisi-satir {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .8rem;
    margin-bottom: .6rem;
    background: var(--bg);
}

/* ============================================================
   Bildirimler
   ============================================================ */

.zil {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; min-height: 40px;
    color: #fff; text-decoration: none;
}
/* Üst çubuktaki ikonlar marka renginin üstünde durur — gri tonu buradan geçmemeli */
.appbar .nav-ikon { color: inherit; }
.zil .nav-ikon { width: 22px; height: 22px; }
.zil-rozet {
    position: absolute; top: 2px; right: 0;
    min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 999px;
    background: var(--danger); color: #fff;
    font-size: .7rem; font-weight: 700; line-height: 18px;
    text-align: center;
}
/* Ekran okuyucu için görünür, gözle görünmez */
.gizli-metin {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.bildirim-yeni { border-left: 4px solid var(--brand-primary); }

/* Özet kutuları (bildirim ayarları, raporlar) */
.summary-row { display: flex; gap: .75rem; flex-wrap: wrap; }
.ozet-kutu {
    background: #eef1f5; border-radius: 10px;
    padding: .7rem 1rem; min-width: 8rem; flex: 1 1 8rem;
}
.ozet-kutu b { display: block; font-size: 1.5rem; line-height: 1.2; }
.ozet-kutu span { color: var(--text-soft); font-size: .82rem; }

/* Reddedilen kayıt uyarısı (çevrimdışı kuyruk) */
.ret-uyari {
    position: fixed; left: 1rem; right: 1rem;
    bottom: calc(1.5rem + var(--safe-bottom));
    z-index: 50;
    background: #fee2e2; border: 1px solid #fca5a5; color: #7f1d1d;
    border-radius: var(--radius); padding: .9rem;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .2);
    max-width: 32rem; margin: 0 auto;
}
.ret-uyari p { font-size: .9rem; margin: .4rem 0; }

/* Ana ekrana ekle kutusu */
.a2hs {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; flex-wrap: wrap;
    background: color-mix(in srgb, var(--brand-primary) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--brand-primary) 35%, var(--border));
}
.a2hs[hidden] { display: none; }

/* ==================================================================
 *  Faz 11 — yönetici ekranı ve raporlar
 * ================================================================== */

/* KPI kutuları: telefonda 2 sütun, masaüstünde 4 */
.kpi-grid {
    display: grid; gap: .6rem;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: .8rem;
}
@media (min-width: 720px) { .kpi-grid { grid-template-columns: repeat(4, 1fr); } }

.kpi {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: .8rem .9rem;
}
.kpi-deger { display: block; font-size: 1.65rem; font-weight: 700; line-height: 1.15; }
.kpi-bolu  { font-size: 1rem; font-weight: 500; color: var(--text-soft); }
.kpi-ad    { display: block; color: var(--text-soft); font-size: .82rem; margin-top: .15rem; }
.kpi-uyari { border-color: #fbbf24; background: #fffbeb; }

/* Rapor filtreleri */
.rapor-filtre { display: flex; flex-direction: column; gap: .6rem; }
.segmented-wrap { flex-wrap: wrap; }
.ozel-aralik { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.ozel-aralik input[type="date"] {
    min-height: var(--tap); padding: 0 .6rem;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--text); font: inherit;
}
.rapor-aralik-metni { margin: 0; font-size: .82rem; }

/* Rapor tabloları — dar ekranda .table-scroll içinde yatay kayar */
.rapor-tablo { width: 100%; border-collapse: collapse; font-size: .88rem; }
.rapor-tablo th, .rapor-tablo td {
    padding: .5rem .55rem; text-align: left;
    border-bottom: 1px solid var(--border); white-space: nowrap;
}
.rapor-tablo th {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .02em;
    color: var(--text-soft); font-weight: 600;
}
.rapor-tablo tbody tr:last-child td { border-bottom: 0; }
.rapor-tablo .sayi { text-align: right; font-variant-numeric: tabular-nums; }

.oran { display: inline-block; padding: .1rem .4rem; border-radius: 6px; font-weight: 600; }
.oran-iyi   { background: #dcfce7; color: #14532d; }
.oran-orta  { background: #fef3c7; color: #78350f; }
.oran-dusuk { background: #fee2e2; color: #7f1d1d; }

/* Haftalık plan ızgarası */
.hafta-tablo .gun-hucre {
    display: inline-block; min-width: 2.4rem; text-align: center;
    padding: .12rem .3rem; border-radius: 6px; font-size: .8rem; font-weight: 600;
}
.gun-tam   { background: #dcfce7; color: #14532d; }
.gun-kismi { background: #fef3c7; color: #78350f; }
.gun-eksik { background: #fee2e2; color: #7f1d1d; }
.gun-izin  { background: #e0e7ff; color: #312e81; }
.gun-bos   { background: #f1f5f9; color: #64748b; }

/* Grafikler (satır içi SVG) */
.grafik { width: 100%; height: auto; display: block; }
.grafik-eksen  { font-size: 10px; fill: var(--text-soft); }
.grafik-etiket { font-size: 12px; fill: var(--text); }
.grafik-deger  { font-size: 11px; fill: var(--text-soft); }

.halka { width: 96px; height: 96px; flex: 0 0 auto; }
.halka-deger { font-size: 21px; font-weight: 700; fill: var(--text); }
.halka-alt   { font-size: 10px; fill: var(--text-soft); }
.halka-grid { display: grid; gap: .6rem; grid-template-columns: 1fr; margin-bottom: .8rem; }
@media (min-width: 620px) { .halka-grid { grid-template-columns: 1fr 1fr; } }
.halka-kart { display: flex; align-items: center; gap: .9rem; }

/* Canlı pano satırları */
.sahada-satir, .plan-eksik-satir, .siralama-satir {
    display: flex; align-items: center; justify-content: space-between;
    gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.sahada-satir:last-child, .plan-eksik-satir:last-child,
.siralama-satir:last-child { border-bottom: 0; }
.sahada-sag { display: flex; align-items: center; gap: .5rem; }
.sayac-kucuk { font-variant-numeric: tabular-nums; font-weight: 600; }
.sira-no {
    display: inline-block; min-width: 1.4rem; color: var(--text-soft);
    font-size: .8rem; font-variant-numeric: tabular-nums;
}

.siralama-grid { display: grid; gap: .6rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .siralama-grid { grid-template-columns: 1fr 1fr; } }

.ozet-satirlar > .row-between {
    padding: .45rem 0; border-bottom: 1px solid var(--border);
}
.ozet-satirlar > .row-between:last-child { border-bottom: 0; }

/* Açıklama kutusu — ekranda "neden böyle" anlatan notlar */
.bilgi-kutu {
    background: color-mix(in srgb, var(--brand-primary) 6%, var(--surface));
    border-color: color-mix(in srgb, var(--brand-primary) 30%, var(--border));
    font-size: .9rem;
}

/* Şüpheli kayıt kartı */
.supheli-olcum {
    display: flex; flex-wrap: wrap; gap: .5rem .9rem;
    margin: .5rem 0; font-size: .84rem; color: var(--text-soft);
}
.supheli-sebep { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .88rem; }
.supheli-karar-gecmisi {
    margin-top: .5rem; padding: .5rem .7rem;
    background: #f1f5f9; border-radius: 8px; font-size: .88rem;
}
.supheli-form { margin-top: .7rem; border-top: 1px solid var(--border); padding-top: .7rem; }
.supheli-form textarea {
    width: 100%; padding: .55rem; font: inherit;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--text);
}

.revizyon-satir {
    padding: .5rem 0; border-bottom: 1px solid var(--border);
}
.revizyon-satir:last-child { border-bottom: 0; }

/* ==================================================================
 *  Ana ekran kısayolları
 *  Yan menünün özeti değil tamamlayıcısı: telefonda çekmeceyi açmadan,
 *  masaüstünde göz gezdirerek sık ekranlara girilir.
 * ================================================================== */

.kisayol-grid {
    display: grid; gap: .55rem;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
}
.kisayol {
    display: flex; align-items: center; gap: .6rem;
    min-height: 54px; padding: .65rem .75rem;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--text);
    text-decoration: none; font-weight: 600; font-size: .9rem;
}
.kisayol:hover { border-color: var(--brand-primary); }
.kisayol .nav-ikon { width: 22px; height: 22px; color: var(--brand-primary); }
.kisayol span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==================================================================
 *  Geniş ekran ince ayarları
 *
 *  Taban stil mobil önceliklidir: 48px dokunma hedefi, tam genişlik alan,
 *  tek sütun. Aynı ölçüler faresi olan 24" ekranda seyrek ve şişkin duruyor;
 *  yönetici bir ekrana iki katı kadar satır sığdırabilmeli.
 * ================================================================== */

@media (min-width: 1080px) {
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.18rem; }

    .card { padding: 1.1rem 1.25rem; margin-bottom: 1rem; }

    .btn { min-height: 40px; padding: .5rem 1rem; }
    .btn-lg { min-height: 48px; }
    .btn-sm { min-height: 34px; }
    /* Tam genişlik düğme 1100px'e yayılmasın; birincil eylem yine belirgin */
    .btn-block { max-width: 24rem; }

    input[type=text], input[type=email], input[type=password], input[type=tel],
    input[type=number], input[type=date], input[type=time], select, textarea {
        min-height: 40px;
    }
    /* Tek satırlık girdi ekran boyunca uzayınca yazılan yer gözden kaçıyor */
    .field > input, .field > select { max-width: 32rem; }
    .field > textarea { max-width: 46rem; }
    .grid-filter .field > input, .grid-filter .field > select { max-width: none; }

    .segmented .seg { flex: 0 1 12rem; }
    .segmented .seg span { min-height: 40px; }

    .rapor-tablo th, .rapor-tablo td,
    table.data th, table.data td { padding: .45rem .7rem; }

    /* Rapor filtreleri yan yana sığar */
    .rapor-filtre { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .75rem; }
}

/* Çok geniş ekranda içerik ortada kalsın ama kenar boşluğu abartılmasın */
@media (min-width: 1600px) {
    .icerik-ic { max-width: 1360px; }
}

/* Yazdırma: rapor çıktısı alan yönetici için */
@media print {
    .appbar, .appbar-menu, .yanmenu, .yanmenu-perde,
    .tabbar, .rapor-filtre, .btn, .netbar { display: none !important; }
    .card { break-inside: avoid; border-color: #999; }
    .icerik { padding: 0 !important; }
    .icerik-ic { max-width: none !important; }
    body { background: #fff; }
}

/* Bağlantı tabanlı sekme çubuğu (rapor aralığı, şüpheli kayıt durumu).
   .segmented radyo düğmeleri için yazılmıştı; burada seçim bir bağlantıdır
   çünkü durum URL'de tutulmalı (paylaşılabilir, geri tuşu çalışsın). */
.segmented > a {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 2.4rem; padding: .35rem .8rem;
    border: 2px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--text);
    font-weight: 600; font-size: .88rem; text-decoration: none;
}
.segmented > a.aktif {
    border-color: var(--brand-primary);
    background: color-mix(in srgb, var(--brand-primary) 12%, var(--surface));
    color: var(--brand-primary);
}

/* ==================================================================
 *  Faz 12 — hedef ve gerçekleşme
 * ================================================================== */

/* Saha elemanının hedef özeti: telefonda tek bakışta okunmalı */
.hedef-ozet { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.hedef-tutar { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }

.ay-satir {
    padding: .5rem 0; border-bottom: 1px solid var(--border);
}
.ay-satir:last-child { border-bottom: 0; }

/* Hedef atama formundaki tutar kutusu — sağa hizalı, tabular rakam */
.hedef-girdi {
    width: 100%; min-width: 9rem; min-height: 2.5rem;
    padding: .35rem .55rem; text-align: right;
    font: inherit; font-variant-numeric: tabular-nums;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface); color: var(--text);
}
.hedef-girdi:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand-primary) 45%, transparent);
    border-color: var(--brand-primary);
}

/* Aktarım ekranındaki metin kutuları */
.card input[type="url"],
.card input[type="password"] {
    width: 100%; min-height: var(--tap); padding: 0 .6rem;
    font: inherit; border: 1px solid var(--border);
    border-radius: var(--radius); background: var(--surface); color: var(--text);
}
code {
    background: #f1f5f9; padding: .05rem .3rem;
    border-radius: 4px; font-size: .88em;
}