/* =========================================================================
 * SirrusPatron — style.css
 * Mobil-öncelikli PWA (iOS Safari + Android Chrome)
 *
 * Tasarım kuralları:
 *   • Tek sütun, full-width
 *   • Top bar (56px) + Bottom tab bar (64px + safe-area-bottom)
 *   • Safe area insets (iPhone notch + home indicator)
 *   • Dokunma hedefleri min 48px
 *   • Input font 16px (iOS otomatik zoom'u engeller)
 *   • Yok: masaüstü medya kuralları — cep için tasarlandı
 * ========================================================================= */

/* ══════════════ Reset & kök ══════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;
    -webkit-tap-highlight-color:transparent}
html{
    height:100%;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
    touch-action:manipulation;       /* çift-dokunma zoom'u engelle */
}
body{
    min-height:100%;
    min-height:100dvh;                /* dynamic viewport — iOS adres çubuğu ile uyumlu */
    font-family:'Inter','Segoe UI',-apple-system,BlinkMacSystemFont,
                'Helvetica Neue',sans-serif;
    font-size:15px;line-height:1.5;
    color:#31263e;
    background:linear-gradient(160deg,#667eea 0%,#764ba2 100%);
    background-attachment:fixed;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overscroll-behavior-y:contain;    /* pull-to-refresh pasif */
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none;
       -webkit-appearance:none;appearance:none}
input,select,textarea{font:inherit;color:inherit;outline:none}
input:not([type="checkbox"]):not([type="radio"]),
select,textarea{-webkit-appearance:none;appearance:none}
img,svg{display:block;max-width:100%}

::selection{background:rgba(67,97,238,.25)}

/* Renk tokenları */
:root{
    --brand-a:#667eea;
    --brand-b:#764ba2;
    --surface:rgba(255,255,255,.97);
    --surface-2:#f7f4fb;
    --t1:#2a2138;
    --t2:#4a3f5a;
    --t3:#6d6a75;
    --t4:#9b95a3;
    --accent:#ff9770;
    --accent-dark:#e87a50;
    --blue:#4361ee;  --blue-pale:#e5ecff;
    --green:#2a9d8f; --green-pale:#d8f1ec;
    --red:#ef476f;   --red-pale:#ffe0e6;
    --amber:#f4a261; --amber-pale:#fff0df;
    --purple:#6b4f9f;
    --border:#ebe4f0;
    --border-strong:#d7ccde;
    --shadow-1:0 4px 12px -4px rgba(60,30,90,.15);
    --shadow-2:0 14px 30px -12px rgba(60,30,90,.28);
    --shadow-3:0 24px 50px -18px rgba(60,30,90,.40);
    /* Safe area shortcut'ları */
    --sat:env(safe-area-inset-top);
    --sab:env(safe-area-inset-bottom);
    --sal:env(safe-area-inset-left);
    --sar:env(safe-area-inset-right);
}

/* ══════════════════════════════════════════════════════════════════════
 * AUTH SAYFALARI (index.php, kayit.php, sifremi-unuttum.php, sifre-sifirla.php)
 * Merkezli kart, gradient zemin görünür kalır.
 * ══════════════════════════════════════════════════════════════════════ */
body.auth{
    display:flex;flex-direction:column;align-items:center;
    justify-content:center;
    padding:calc(var(--sat) + 24px) calc(var(--sar) + 20px)
            calc(var(--sab) + 24px) calc(var(--sal) + 20px);
}
.auth-head{
    text-align:center;color:#fff;margin-bottom:22px;
}
.auth-logo{
    width:72px;height:72px;border-radius:22px;
    margin:0 auto 14px;display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.18);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.3);
    font-size:34px;font-weight:800;color:#fff;
    box-shadow:0 15px 35px -10px rgba(0,0,0,.3);
    letter-spacing:-1px;
}
.auth-title{font-size:22px;font-weight:800;letter-spacing:-.4px;margin-bottom:4px}
.auth-sub{font-size:14px;opacity:.85}
.auth-card{
    width:100%;max-width:420px;
    background:var(--surface);
    border-radius:24px;
    padding:26px 22px 22px;
    box-shadow:var(--shadow-3);
    border:1px solid rgba(255,255,255,.5);
}
.auth-footer{
    margin-top:18px;text-align:center;color:rgba(255,255,255,.85);
    font-size:13px;
}
.auth-footer a{color:#fff;font-weight:600;text-decoration:underline;
               text-underline-offset:3px;text-decoration-thickness:1.5px}

/* ══════════════ Form bileşenleri (mobil) ══════════════ */
.form-group{margin-bottom:10px}
.form-label{
    display:block;font-size:12.5px;font-weight:600;color:var(--t2);
    margin-bottom:5px;letter-spacing:.2px;
}
.form-input{
    width:100%;
    height:46px;
    padding:0 14px;
    font-size:16px;
    color:var(--t1);
    background:#fff;
    border:1.5px solid var(--border);
    border-radius:12px;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.form-input::placeholder{color:var(--t4)}
.form-input:focus{
    border-color:var(--brand-a);
    box-shadow:0 0 0 4px rgba(102,126,234,.15);
}
.form-input[type="password"]{letter-spacing:.15em}

.form-input-wrap{position:relative}
.form-input-wrap .form-input{padding-right:44px}
.input-eye{
    position:absolute;right:4px;top:50%;transform:translateY(-50%);
    width:38px;height:38px;border-radius:9px;
    display:flex;align-items:center;justify-content:center;
    font-size:17px;color:var(--t3);
}
.input-eye:active{background:var(--border)}

.form-hint{font-size:12px;color:var(--t3);margin-top:6px}
.form-error{font-size:12.5px;color:var(--red);margin-top:6px;font-weight:500}

/* Buttons */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    width:100%;min-height:46px;padding:0 16px;
    font-size:15px;font-weight:700;letter-spacing:.1px;
    border-radius:12px;
    transition:transform .12s ease, box-shadow .15s ease, opacity .15s ease;
    user-select:none;
}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}

.btn-primary{
    background:linear-gradient(135deg,var(--brand-a) 0%,var(--brand-b) 100%);
    color:#fff;
    box-shadow:0 10px 25px -10px var(--brand-a);
}
.btn-primary:active{box-shadow:0 5px 15px -5px var(--brand-a)}

.btn-ghost{
    background:var(--surface-2);color:var(--t2);
    border:1.5px solid var(--border);
}
.btn-ghost:active{background:#ede7f3}

.btn-danger{background:var(--red);color:#fff;
            box-shadow:0 10px 25px -10px var(--red)}

/* Uyarı/bilgi kutuları */
.alert{
    padding:10px 12px;border-radius:10px;font-size:13px;
    margin-bottom:10px;display:flex;align-items:flex-start;gap:8px;
    line-height:1.4;
}
.alert-ikon{font-size:18px;flex-shrink:0;margin-top:-1px}
.alert-red{background:var(--red-pale);color:#9c2648;
           border:1px solid rgba(239,71,111,.25)}
.alert-green{background:var(--green-pale);color:#1d6b61;
             border:1px solid rgba(42,157,143,.25)}
.alert-blue{background:var(--blue-pale);color:#2b3fa0;
            border:1px solid rgba(67,97,238,.20)}
.alert-amber{background:var(--amber-pale);color:#8b4f1e;
             border:1px solid rgba(244,162,97,.30)}

/* ══════════════════════════════════════════════════════════════════════
 * UYGULAMA LAYOUT'U (Dashboard & iç sayfalar)
 * Top bar + içerik + bottom tab bar
 * ══════════════════════════════════════════════════════════════════════ */
body.app{
    padding-top:calc(var(--sat) + 56px);       /* top bar boşluğu */
    padding-bottom:calc(var(--sab) + 72px);    /* tab bar boşluğu */
}

/* TOP BAR */
.topbar{
    position:fixed;top:0;left:0;right:0;z-index:30;
    height:calc(var(--sat) + 56px);
    padding:var(--sat) 8px 0;
    display:flex;align-items:center;
    background:rgba(255,255,255,.80);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    border-bottom:.5px solid rgba(31,26,62,.10);
}
.tb-left, .tb-right{display:flex;align-items:center;gap:4px}
.tb-center{flex:1;text-align:center;min-width:0;padding:0 4px}
.tb-title{
    font-size:16px;font-weight:700;color:var(--t1);
    letter-spacing:-.2px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tb-btn{
    width:44px;height:44px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    font-size:20px;color:var(--t2);
}
.tb-btn:active{background:rgba(31,26,62,.08)}
.tb-btn-back{font-size:24px;font-weight:600}

/* Sayfa kapsayıcı */
.page{
    padding:10px 14px;
    padding-left:calc(var(--sal) + 14px);
    padding-right:calc(var(--sar) + 14px);
    max-width:640px;margin:0 auto;
}

/* BOTTOM TAB BAR */
.tabbar{
    position:fixed;bottom:0;left:0;right:0;z-index:30;
    padding-bottom:var(--sab);
    background:rgba(255,255,255,.88);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    border-top:.5px solid rgba(31,26,62,.10);
    display:flex;
}
.tab{
    flex:1;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;padding:8px 4px 10px;min-height:64px;
    color:var(--t3);
    transition:color .15s ease;
}
.tab.active{color:var(--brand-a)}
.tab-ikon{
    font-size:22px;line-height:1;
    transition:transform .2s ease;
}
.tab.active .tab-ikon{transform:translateY(-1px) scale(1.05)}
.tab-ad{
    font-size:10.5px;font-weight:600;letter-spacing:.1px;
}

/* ══════════════ Kartlar & içerik ══════════════ */
.card{
    background:var(--surface);
    border-radius:16px;
    padding:14px 16px;
    box-shadow:var(--shadow-2);
    border:1px solid rgba(255,255,255,.5);
    margin-bottom:10px;
}
.card-title{
    font-size:11px;font-weight:700;color:var(--t3);
    text-transform:uppercase;letter-spacing:.8px;
    margin-bottom:10px;display:flex;align-items:center;gap:6px;
}
.card-title .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}

.card-row{
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 0;
    border-bottom:1px solid var(--border);
}
.card-row:last-child{border-bottom:none;padding-bottom:0}
.card-row:first-child{padding-top:0}

/* Büyük sayfa başlığı (iOS-style Large Title) */
.page-greet{
    color:#fff;padding:10px 2px 14px;
}
.page-greet-hi{font-size:13px;opacity:.85;margin-bottom:2px}
.page-greet-title{font-size:24px;font-weight:800;letter-spacing:-.5px}

/* Metric grid (dashboard için — Parça 2'de kullanılacak) */
.metrics{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;
}
.metric{
    background:var(--surface);border-radius:18px;
    padding:14px 14px 12px;
    box-shadow:var(--shadow-1);
    border:1px solid rgba(255,255,255,.5);
}
.metric-ikon{font-size:22px;margin-bottom:6px}
.metric-deger{
    font-size:20px;font-weight:800;color:var(--t1);
    font-variant-numeric:tabular-nums;letter-spacing:-.3px;
}
.metric-etiket{font-size:11.5px;color:var(--t3);margin-top:2px;font-weight:600}

/* Şube dropdown / chip */
.chip-select{
    display:inline-flex;align-items:center;gap:6px;
    padding:8px 14px;border-radius:40px;
    background:rgba(255,255,255,.22);
    color:#fff;font-size:13px;font-weight:600;
    border:1px solid rgba(255,255,255,.3);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}

/* Boş durum */
.empty{
    text-align:center;padding:40px 20px;color:var(--t3);
}
.empty-ikon{font-size:56px;margin-bottom:10px;opacity:.7}
.empty-mesaj{font-size:14px;margin-bottom:14px}

/* ══════════════ PWA yükleme ipucu kartı ══════════════ */
.install-hint{
    position:fixed;left:12px;right:12px;
    bottom:calc(var(--sab) + 72px + 12px);
    z-index:40;
    background:var(--surface);
    border-radius:18px;
    padding:14px 14px 14px 14px;
    box-shadow:var(--shadow-3);
    border:1px solid rgba(255,255,255,.5);
    display:none;
    animation:slide-up .25s ease-out;
}
.install-hint.show{display:block}
@keyframes slide-up{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
.install-hint-row{display:flex;align-items:center;gap:12px}
.install-hint-ikon{
    width:44px;height:44px;border-radius:12px;
    background:linear-gradient(135deg,var(--brand-a),var(--brand-b));
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:22px;flex-shrink:0;
    box-shadow:0 8px 18px -6px var(--brand-a);
}
.install-hint-body{flex:1;min-width:0}
.install-hint-title{font-size:13.5px;font-weight:700;color:var(--t1)}
.install-hint-sub{font-size:12px;color:var(--t3);margin-top:2px}
.install-hint-close{
    width:34px;height:34px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    font-size:18px;color:var(--t3);flex-shrink:0;
}
.install-hint-close:active{background:var(--border)}
.install-hint-actions{margin-top:12px;display:flex;gap:8px}
.install-hint-actions .btn{min-height:42px;font-size:14px}

/* ══════════════ iOS Nasıl Yüklerim modal'ı ══════════════ */
.modal-bg{
    position:fixed;inset:0;z-index:100;
    background:rgba(30,20,50,.55);
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
    display:none;align-items:flex-end;justify-content:center;
    padding:20px;padding-bottom:calc(var(--sab) + 20px);
    animation:fade-in .2s ease-out;
}
.modal-bg.show{display:flex}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.modal{
    width:100%;max-width:480px;
    background:var(--surface);
    border-radius:22px;
    padding:20px;
    box-shadow:var(--shadow-3);
    animation:sheet-up .28s cubic-bezier(.2,.7,.2,1);
}
@keyframes sheet-up{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-head{
    display:flex;align-items:flex-start;justify-content:space-between;
    gap:12px;margin-bottom:14px;
}
.modal-title{font-size:17px;font-weight:800;color:var(--t1);letter-spacing:-.2px}
.modal-x{
    width:34px;height:34px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    font-size:20px;color:var(--t3);flex-shrink:0;margin-top:-4px;
}
.modal-step{
    display:flex;gap:12px;padding:12px 0;
    border-bottom:1px solid var(--border);
}
.modal-step:last-child{border-bottom:none;padding-bottom:0}
.modal-step-num{
    width:26px;height:26px;border-radius:50%;
    background:linear-gradient(135deg,var(--brand-a),var(--brand-b));
    color:#fff;font-size:12px;font-weight:800;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.modal-step-body{font-size:14px;color:var(--t2);line-height:1.5}
.modal-step-body b{color:var(--t1);font-weight:700}
.modal-step-body .ios-share{
    display:inline-flex;align-items:center;justify-content:center;
    width:22px;height:22px;vertical-align:-5px;margin:0 2px;
    color:#3478f6;
}

/* ══════════════ Toast ══════════════ */
.toast{
    position:fixed;left:50%;transform:translateX(-50%);
    bottom:calc(var(--sab) + 84px);
    padding:11px 18px;border-radius:40px;
    background:rgba(20,15,35,.90);color:#fff;
    font-size:13.5px;font-weight:600;
    box-shadow:0 10px 30px -10px rgba(0,0,0,.4);
    z-index:200;
    opacity:0;pointer-events:none;
    transition:opacity .18s ease, transform .25s ease;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.hide{transform:translateX(-50%) translateY(10px)}

/* ══════════════ Yardımcılar ══════════════ */
.text-center{text-align:center}
.muted{color:var(--t3)}
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:14px}.mt-3{margin-top:20px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:14px}.mb-3{margin-bottom:20px}

/* ══════════════ Form — checkbox (Beni hatırla) ══════════════ */
.form-check{
    display:flex;align-items:center;gap:10px;
    padding:10px 4px 10px 2px;
    font-size:14px;color:var(--t2);
    cursor:pointer;user-select:none;
    border-radius:10px;
    transition:background .15s ease;
}
.form-check:active{background:rgba(102,126,234,.08)}
.form-check input[type="checkbox"]{
    width:22px;height:22px;margin:0;
    accent-color:var(--brand-a);
    cursor:pointer;flex-shrink:0;
}
.form-check span{font-weight:500}
.form-check-hint{
    margin-left:auto;font-size:11.5px;color:var(--t4);
    background:var(--surface-2);
    padding:2px 10px;border-radius:20px;font-weight:600;
}

/* ══════════════════════════════════════════════════════════════════════
 * SPA NAVIGATION — sayfa geçişi animasyonu + progress bar
 * ══════════════════════════════════════════════════════════════════════ */

/* İnce progress bar üstte */
#sp-progress{
    position:fixed;left:0;right:0;
    top:calc(var(--sat) + 56px - 3px);   /* top bar'ın alt kenarı */
    height:3px;width:0;
    background:linear-gradient(90deg, #ff9770, #ffd166);
    box-shadow:0 0 8px rgba(255,151,112,.5);
    z-index:50;opacity:0;
    pointer-events:none;
    transition:width .6s cubic-bezier(.2,.7,.2,1), opacity .2s ease;
    border-radius:0 2px 2px 0;
}

/* Main'in geçiş animasyonu */
#sp-main{
    transition:opacity .14s ease, transform .22s cubic-bezier(.2,.7,.2,1);
    will-change:opacity, transform;
}
#sp-main.sp-leaving{
    opacity:0;
    transform:translateY(6px);
}
#sp-main.sp-entering{
    opacity:0;
    transform:translateY(-6px);
    transition:none;                      /* enter başlarken animasyon yok */
}

/* Masaüstü frame'inde progress bar ortalanmalı */
@media (min-width: 640px){
    body.app #sp-progress{
        left:50%;transform:translateX(-50%);
        max-width:480px;width:0;
    }
    /* width animate ederken transform ile ortalama çakışır — workaround: */
    body.app #sp-progress{
        left:50%;margin-left:-240px;transform:none;max-width:480px;
    }
    @media (max-width: 500px){
        body.app #sp-progress{margin-left:0;left:0;max-width:none}
    }
}

/* Yatay ayarlardaki ipucu — landscape mobil / tablet için uygun kalması */
@media (min-width: 700px) {
    .page{max-width:680px}
}

/* ══════════════════════════════════════════════════════════════════════
 * SIDEBAR — sadece masaüstü görünümde aktif (default: gizli)
 * ══════════════════════════════════════════════════════════════════════ */
.sidebar{
    display:none;  /* mobilde gizli */
    position:fixed;top:0;left:0;bottom:0;
    width:240px;z-index:40;
    background:rgba(255,255,255,.94);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    border-right:.5px solid rgba(31,26,62,.10);
    padding:22px 14px 16px;
    flex-direction:column;
    overflow-y:auto;
}

.sidebar-logo{
    display:flex;align-items:center;gap:10px;
    padding:6px 10px 20px;
    margin-bottom:6px;
    border-bottom:1px solid var(--border);
    color:var(--t1);
}
.sidebar-logo-ikon{
    width:38px;height:38px;border-radius:11px;
    background:linear-gradient(135deg,var(--brand-a),var(--brand-b));
    color:#fff;font-size:18px;font-weight:800;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 18px -6px var(--brand-a);
    flex-shrink:0;
}
.sidebar-logo-yazi{
    font-size:15px;font-weight:800;letter-spacing:-.3px;
    color:var(--t1);
}

.sidebar-nav{
    display:flex;flex-direction:column;gap:2px;
    flex:1;padding-top:12px;
}
.sidebar-item{
    display:flex;align-items:center;gap:12px;
    padding:11px 12px;
    border-radius:11px;
    color:var(--t2);
    font-size:14px;font-weight:600;
    transition:background .12s ease, color .12s ease;
    cursor:pointer;
}
.sidebar-item:hover{
    background:rgba(102,126,234,.08);
    color:var(--t1);
}
.sidebar-item.active{
    background:linear-gradient(135deg, rgba(102,126,234,.18) 0%, rgba(118,75,162,.18) 100%);
    color:var(--purple);
}
.sidebar-ikon{
    font-size:18px;line-height:1;flex-shrink:0;
    width:24px;text-align:center;
}
.sidebar-ad{flex:1}

.sidebar-footer{
    margin-top:auto;
    padding-top:14px;
    border-top:1px solid var(--border);
}
.sidebar-user{
    display:flex;align-items:center;gap:10px;
    padding:6px 8px 12px;
}
.sidebar-user-avatar{
    width:36px;height:36px;border-radius:11px;
    background:linear-gradient(135deg,var(--brand-a),var(--brand-b));
    color:#fff;font-size:15px;font-weight:700;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
}
.sidebar-user-info{min-width:0;flex:1}
.sidebar-user-ad{
    font-size:13px;font-weight:700;color:var(--t1);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sidebar-user-rol{
    font-size:11px;color:var(--t3);margin-top:1px;
}
.sidebar-cikis{
    display:flex;align-items:center;justify-content:center;gap:8px;
    padding:10px 12px;
    border-radius:11px;
    color:var(--red);
    font-size:13.5px;font-weight:600;
    background:rgba(239,71,111,.08);
    transition:background .12s ease;
}
.sidebar-cikis:hover{
    background:rgba(239,71,111,.15);
}

/* ══════════════════════════════════════════════════════════════════════
 * MASAÜSTÜ / GENİŞ EKRAN (≥ 900px) — tam panel layout
 * Sidebar solda, tab bar gizli, top bar sidebar'ın sağından başlar
 * ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {

    /* Body — sidebar için sol boşluk */
    body.app {
        padding-left: 240px;
        padding-bottom: 20px;              /* tab bar yok artık */
    }

    /* Sidebar görünür */
    .sidebar { display: flex; }

    /* Tab bar gizle */
    body.app .tabbar { display: none; }

    /* Top bar — sidebar'ın sağından başlar, tam genişlik */
    body.app .topbar {
        left: 240px;
        right: 0;
        width: auto;
        max-width: none;
        transform: none;
        border-radius: 0;
        box-shadow: 0 2px 10px -4px rgba(60,30,90,.1);
        padding: var(--sat) 18px 0;
    }
    body.app .tb-center {
        text-align: left;
        padding-left: 4px;
    }
    body.app .tb-title {
        font-size: 18px;
    }

    /* Sayfa içeriği — masaüstü genişliği */
    body.app .page {
        max-width: 960px;
        padding: 22px 28px;
        margin: 0 auto;
    }

    /* Page-greet masaüstünde */
    body.app .page-greet {
        padding: 4px 2px 20px;
    }
    body.app .page-greet-title {
        font-size: 26px;
    }

    /* Install hint masaüstünde sağ altta */
    body.app .install-hint {
        left: calc(240px + 20px);
        right: auto;
        transform: none;
        max-width: 420px;
        bottom: 20px;
    }

    /* Progress bar sidebar'ın sağından */
    body.app #sp-progress {
        left: 240px;
        right: 0;
        max-width: none;
        margin-left: 0;
    }

    /* Metric grid — 4 kolon masaüstünde */
    .metrics {
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
    }

    /* Kart'lar masaüstünde birazcık ferah, ama kompakt */
    .card {
        padding: 16px 18px;
    }

    /* Auth sayfaları (index/kayıt/şifre) hala merkezli, max-width 420 */
    /* Bu kurallar auth için değişmez */
}

/* ══════════════════════════════════════════════════════════════════════
 * MOBİL FRAME (640px - 899px) — tablet portrait vb. için mobil görünüm
 * ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 640px) and (max-width: 899px) {

    /* Uygulama iç sayfalarda top bar + tab bar'ı frame olarak ortala */
    body.app .topbar,
    body.app .tabbar {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 100%;
        max-width: 480px;
        box-shadow: 0 10px 30px -10px rgba(30,20,50,.28);
    }
    body.app .topbar {
        border-radius: 0 0 20px 20px;
    }
    body.app .tabbar {
        border-radius: 20px 20px 0 0;
    }

    body.app .page {
        max-width: 448px;
    }

    body.app .page-greet {
        padding: 6px 2px 16px;
    }
    body.app .page-greet-title {
        font-size: 22px;
    }

    body.app .install-hint {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        max-width: 448px;
        width: calc(100% - 24px);
    }
}

/* Ekstra geniş ekranlar (≥ 1280px): daha dramatik gradient + içerik genişler */
@media (min-width: 1280px) {
    body.app .page {
        max-width: 1100px;
    }
}

/* Dark-mode (iOS otomatik status bar uyumu için hazır — opsiyonel) */
@media (prefers-color-scheme: dark){
    /* Şimdilik gradient her koşulda açık kalıyor. Dark sürüm Aşama 3'te. */
}


/* ══════════════════════════════════════════════════════════════════════
 * EKİP YÖNETİMİ (kullanicilar.php)
 * ══════════════════════════════════════════════════════════════════════ */

/* Yetki seçim chip'leri */
.yetki-chip{
    flex:1; min-width:140px;
    display:flex; align-items:center; gap:10px;
    padding:9px 11px;
    background:#faf8fe;
    border:2px solid var(--border);
    border-radius:10px;
    cursor:pointer;
    transition:all .15s ease;
}
.yetki-chip:has(input:checked){
    border-color:var(--brand-a);
    background:#f0edfe;
    box-shadow:0 4px 10px -4px rgba(102,126,234,.3);
}
.yetki-chip input{ display:none; }
.yetki-chip > div{ font-size:12.5px; color:var(--t1); line-height:1.35; }
.yetki-chip > div b{ font-size:13px; }
.yetki-chip > div span{ color:var(--t3); font-size:11px; }

/* Ekip satırları */
.ekip-row{
    display:flex; align-items:flex-start; gap:10px;
    padding:10px 0;
    border-bottom:1px solid var(--border);
}
.ekip-row:last-child{ border-bottom:none; padding-bottom:0; }
.ekip-row:first-child{ padding-top:0; }
.ekip-avatar{
    width:38px; height:38px; border-radius:11px;
    background:linear-gradient(135deg,var(--brand-a),var(--brand-b));
    color:#fff; font-size:15px; font-weight:800;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; box-shadow:0 6px 14px -5px var(--brand-a);
}
.ekip-bilgi{ flex:1; min-width:0; }
.ekip-ad{
    font-size:14px; font-weight:700; color:var(--t1);
    display:flex; align-items:center; gap:6px; flex-wrap:wrap;
    line-height:1.2;
}
.ekip-yetki{
    font-size:9.5px; font-weight:700; text-transform:uppercase;
    color:#fff; padding:2px 7px; border-radius:50px; letter-spacing:.4px;
}
.ekip-meta{
    font-size:11.5px; color:var(--t2); margin-top:2px;
    word-break:break-all; line-height:1.3;
}
.ekip-btns{ display:flex; gap:5px; flex-shrink:0; }
.btn-ikon{
    width:32px; height:32px; border-radius:9px;
    background:#f5f3ff; border:none; font-size:14px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .12s ease;
}
.btn-ikon:hover{ background:#e5d9ff; }
.btn-ikon-red{ background:#fee2e2; }
.btn-ikon-red:hover{ background:#fecaca; }

/* Modal */
.modal-backdrop{
    display:none;
    position:fixed; inset:0; z-index:999;
    background:rgba(30,20,50,.55);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    align-items:center; justify-content:center;
    padding:20px;
    animation:modalIn .2s ease;
}
.modal-backdrop.acik{ display:flex; }
@keyframes modalIn{ from{opacity:0} to{opacity:1} }
.modal{
    background:var(--surface);
    border-radius:20px;
    padding:22px;
    width:100%; max-width:400px;
    box-shadow:0 20px 50px -15px rgba(30,20,50,.4);
    animation:modalScale .2s ease;
}
@keyframes modalScale{ from{transform:scale(.95);opacity:0} to{transform:scale(1);opacity:1} }
.modal-title{
    font-size:17px; font-weight:800; color:var(--t1);
    margin-bottom:16px; padding-bottom:12px;
    border-bottom:1px solid var(--border);
}

/* Masaüstünde ekip biraz büyür ama kompakt kalır */
@media (min-width: 900px){
    .ekip-row{ padding:12px 2px; }
    .ekip-avatar{ width:42px; height:42px; border-radius:12px; font-size:16px; }
    .ekip-ad{ font-size:14.5px; }
}
}