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

.çizgi {
    border: 1px solid red;
}

:root {
    --red: #c8102e;
    --rd: #9e0b24;
    --rl: #fdf0f2;
    --rm: #fecaca;
    --w: #fff;
    --bg: #e9ecf2;
    --bo: #e2e8f0;
    --tx: #0f172a;
    --mu: #64748b;
    --mu2: #94a3b8;
    --gr: #16a34a;
    --grl: #dcfce7;
    --grb: #bbf7d0;
    --bl: #2563eb;
    --bll: #dbeafe;
    --am: #d97706;
    --aml: #fef9c3;
}

html,
body {
    min-height: 100%;
    font-family: "DM Sans", sans-serif;
    background: var(--bg);
    color: var(--tx);
}

/* ── EKRANLAR ── */
.ekran {
    display: none;
}

.ekran.on {
    display: block;
}

/* Sadece login ekranları full viewport, diğerleri içerik kadar */
#ekran-karsılama,
#ekran-kayit {
    min-height: 100vh;
}

/* ── SIDEBAR LİNK AKTİF DURUM (Material 3 — primary-fixed) ── */
.sidebar-link {
    color: #5e5e5e;
    /* secondary */
}

.sidebar-link:hover {
    background: #e6e8eb;
}

.sidebar-link.active {
    background: #ffdad9;
    /* primary-fixed */
    color: #92001e;
    /* on-primary-fixed-variant */
    font-weight: 700;
}

.sidebar-link.active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

/* Profilim mobil submenu (Bilgilerim / Taleplerim) */
.profil-submenu-link {
    color: #5e5e5e;
}

.profil-submenu-link:hover {
    background: #e6e8eb;
}

.profil-submenu-link.active {
    background: #ffdad9;
    color: #92001e;
    font-weight: 700;
}

.profil-submenu-link.active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

/* Yönetici mobil submenu (Profilim ile aynı stil) */
.yon-submenu-link {
    color: #5e5e5e;
}

.yon-submenu-link:hover {
    background: #e6e8eb;
}

.yon-submenu-link.active {
    background: #ffdad9;
    color: #92001e;
    font-weight: 700;
}

.yon-submenu-link.active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

/* Onay Merkezi mobil submenu (Profilim ile aynı stil) */
.onay-submenu-link {
    color: #5e5e5e;
}

.onay-submenu-link:hover {
    background: #e6e8eb;
}

.onay-submenu-link.active {
    background: #ffdad9;
    color: #92001e;
    font-weight: 700;
}

.onay-submenu-link.active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

/* Profil üst tab bar mobilde gizli — sekme değişimi sidebar submenu üzerinden yapılır */
@media (max-width: 767px) {
    #profilTabBar {
        display: none !important;
    }

    /* Belgelerim sekmesi içeriği üst boşluk */
    #profilTab-belgeler {
        padding-top: 16px;
    }

    /* Seyahat Departmanı mobilde tek sütun + tab kontrolüyle grup gizleme */
    #seyDepListe {
        grid-template-columns: 1fr !important;
    }

    .seyDep-group.gizli-mobil {
        display: none !important;
    }

    /* "X talep · Y tamamlandı" sayaç başlık yanında — mobilde gizle */
    #seyDepSayac {
        display: none !important;
    }

    /* Onay Merkezi üst sekme barı mobilde gizli — sekme değişimi sidebar submenu üzerinden */
    #onaySekmeler {
        display: none !important;
    }

}

/* Seyahat Departmanı mobil tab butonları */
.seyDep-mob-tab {
    flex: 1;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid var(--bo);
    border-radius: 8px;
    background: #fff;
    color: var(--mu);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.seyDep-mob-tab.aktif {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
}

/* ── UYGULAMA KABUĞU (Sidebar görünürlüğü) ── */
/* Login modunda (app-mode yok): sidebar/topbar/backdrop gizli */
body:not(.app-mode) #sidebar,
body:not(.app-mode) #sidebarBackdrop,
body:not(.app-mode) #appTopbar {
    display: none !important;
}

/* Login ekranlarında sidebar/topbar/backdrop kesin gizli — app-mode'dan bağımsız */
body.login-screen #sidebar,
body.login-screen #sidebarBackdrop,
body.login-screen #appTopbar {
    display: none !important;
}

/* App modunda: ekranlar sidebar'a yer açacak şekilde sol padding alır (md üstü) */
@media (min-width: 768px) {
    body.app-mode .ekran:not(#ekran-karsılama):not(#ekran-kayit) {
        padding-left: 280px;
    }

    /* Sidebar daraltılmış: 72px genişlik + content padding güncellenir */
    body.app-mode.sidebar-collapsed .ekran:not(#ekran-karsılama):not(#ekran-kayit) {
        padding-left: 72px;
    }

    body.sidebar-collapsed #sidebar {
        width: 72px;
        padding-left: 6px;
        padding-right: 6px;
    }

    /* Daraltılmış modda metinleri gizle, ikonları ortala */
    body.sidebar-collapsed #sidebar h1,
    body.sidebar-collapsed #sidebar>div>p,
    body.sidebar-collapsed #sidebar .text-sm,
    body.sidebar-collapsed #sidebar #dashAd,
    body.sidebar-collapsed #sidebar .js-dashAd,
    body.sidebar-collapsed #sidebar #sidebarSaat,
    body.sidebar-collapsed #sidebar #sidebarTarih,
    body.sidebar-collapsed #sidebar .js-sidebarOnayRozet {
        display: none !important;
    }

    /* Brand header: H1 zaten yukarıdaki kuralla gizlendi; div'i gizleme,
       toggle butonunu ortala (kullanıcı genişletmek için butona ulaşabilsin) */
    body.sidebar-collapsed #sidebar>.px-md.py-sm {
        justify-content: center;
        padding: 8px;
    }

    body.sidebar-collapsed #sidebar>.mx-base.mb-md {
        justify-content: center;
        padding: 8px;
    }

    body.sidebar-collapsed #sidebar>.mx-base.mb-md>.overflow-hidden {
        display: none;
    }

    /* Daraltılmış sidebar: avatar dairesi görünür kalsın
       (yukarıdaki .text-sm gizleme kuralı daireyi de gizliyor; override) */
    body.sidebar-collapsed #sidebar #dashAv,
    body.sidebar-collapsed #sidebar .js-dashAv {
        display: flex !important;
    }

    /* Nav linkleri ve çıkış butonu: ikon ortalı */
    body.sidebar-collapsed #sidebar .sidebar-link,
    body.sidebar-collapsed #sidebar>button[onclick="cikisYap()"] {
        justify-content: center;
    }

    /* Saat/Tarih bloğu: sadece ikon kalsın */
    body.sidebar-collapsed #sidebar>.mx-base.px-sm.py-sm {
        justify-content: center;
        padding: 8px;
    }

    body.sidebar-collapsed #sidebar>.mx-base.px-sm.py-sm>.flex.flex-col {
        display: none;
    }

    /* Sidebar daraltıldığında yönetici header içeriği de sola kaysın
       (sidebar 72px + 16px boşluk) */
    body.sidebar-collapsed #yoneticiHeader {
        padding-left: 88px !important;
    }

    /* Sidebar sub-menüleri (Profilim / Yönetici / Onay Merkezi) sadece mobilde;
       desktop'ta inline style.display = "flex" tetiklense bile görünmesin */
    #profilSubmenu,
    #yoneticiSubmenu,
    #onayMerkeziSubmenu,
    #profilSubmenuChevron,
    #yoneticiSubmenuChevron,
    #onayMerkeziSubmenuChevron {
        display: none !important;
    }
}

/* Yönetici header padding değişikliği yumuşak geçişle */
#yoneticiHeader {
    transition: padding-left 0.3s ease;
}

/* Profilim → Bilgilerim sekmesi: desktopda 4 sütun, mobilde 2 sütun */
@media (min-width: 768px) {
    .profil-info-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Profil tab bar: sekmeler eşit genişlikte yayılır */
#profilTabBar .profil-tab {
    flex: 1 1 0 !important;
    text-align: center !important;
}

/* Profilim → Belgelerim sekmesi: 4 kategori (TC, Ehliyet, Pasaport, Vize) grid */
.belgeler-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    .belgeler-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ── YÖNETİCİ HEADER (sadece admin-panel & onay-atamalari ekranlarında) ── */
body.yonetici-aktif #yoneticiHeader {
    display: flex !important;
}

/* Header'lı ekranlar için üst boşluk */
body.yonetici-aktif #ekran-admin-panel,
body.yonetici-aktif #ekran-onay-atamalari,
body.yonetici-aktif #ekran-duyuru-yayinla,
body.yonetici-aktif #ekran-yonetici-masraflar,
body.yonetici-aktif #ekran-otel-rezervasyon,
body.yonetici-aktif #ekran-anlasmali-kurumlar {
    padding-top: 64px;
}

/* Aktif sekme alt çizgisi + primary renk */
#yoneticiHeader .yon-tab.active {
    color: #890015;
    /* primary */
    border-bottom: 2px solid #890015;
    font-weight: 700;
}

/* Mobilde: top bar yüksekliği kadar üst padding (top bar fixed olduğu için) */
@media (max-width: 767px) {
    body.app-mode .ekran:not(#ekran-karsılama):not(#ekran-kayit) {
        padding-top: 52px;
    }

    /* Login ekranında sağ form bölümü — desktop'taki uçak görseli mobilde arka plan,
       beyaz overlay form okunabilirliği için */
    .login-form-section {
        background-color: transparent !important;
        background-image:
            linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)),
            url("https://lh3.googleusercontent.com/aida-public/AB6AXuB6vr9hAUxd_Xcpe8zXF3BNZhPlRRtPH4SZeQNbgre9aGi3ezNxdw3R5ITIGMeNESBclHKyyEHX688GyaiMzRBsmpXARyCHQdKuQ_9NuFomlXhAIuIZcxaWsPhs1f9Tz6T7taSrSrWo9FYmuVKYeISVnmocrTEpq03KMF9Np29JJQDpnXExv5OiMlJCDMve6rQX7D3WmQpdjYhaXI6yIhJ7KH6fgM0_niyWD3jmoSOXaYRmkWaq9mrdievEwVaMLtXfncAAy_cfncLp");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    /* Yönetici header mobilde tamamen gizli — sekme değişimi sidebar submenu üzerinden */
    body.yonetici-aktif #yoneticiHeader {
        display: none !important;
    }

    /* Header gizlendiği için 64px üst padding'i appTopbar'a uygun 52px'e indir */
    body.yonetici-aktif #ekran-admin-panel,
    body.yonetici-aktif #ekran-onay-atamalari,
    body.yonetici-aktif #ekran-duyuru-yayinla,
    body.yonetici-aktif #ekran-yonetici-masraflar,
    body.yonetici-aktif #ekran-otel-rezervasyon,
    body.yonetici-aktif #ekran-anlasmali-kurumlar {
        padding-top: 52px !important;
    }
}

/* Ekranlardaki ilk wrapper'ın eski 16px üst margin'i header gittiği için kaldırıldı — bu sayede gri boşluk olmaz */
body.app-mode .ekran:not(#ekran-karsılama):not(#ekran-kayit)>div:first-child {
    margin-top: 0;
}

/* ── KARŞILAMA ── */
.karsılama {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 2fr 2fr;
}

.sol {
    background: linear-gradient(160deg, #c8102e 0%, #7a0818 100%);
    padding: 60px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.sol::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    top: -80px;
    right: -80px;
}

.sol::after {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    bottom: -50px;
    left: -50px;
}

.sol-ic {
    position: relative;
    z-index: 1;
}

.brand {
    font-family: "Outfit", sans-serif;
    font-weight: 900;
    font-size: 42px;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 8px;
}

.brand span {
    opacity: 0.7;
    font-weight: 400;
}

.brand-sub {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    font-family: "Outfit", sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 28px;
}

.aciklama {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
    max-width: 360px;
    margin-bottom: 40px;
}

.ozellik {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
}

.ozellik-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

.sag {
    background: var(--w);
    padding: 60px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.sag-ic {
    width: 100%;
    max-width: 380px;
}

.sag-baslik {
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 26px;
    color: var(--tx);
    margin-bottom: 8px;
}

.sag-alt {
    font-size: 14px;
    color: var(--mu);
    margin-bottom: 36px;
    line-height: 1.6;
}

.btn-ana {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 12px;
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-giris {
    background: var(--red);
    color: #fff;
}

.btn-giris:hover {
    background: var(--rd);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(200, 16, 46, 0.35);
}

.btn-kayit {
    background: var(--bg);
    color: var(--tx);
    border: 2px solid var(--bo);
}

.btn-kayit:hover {
    border-color: var(--red);
    color: var(--red);
    transform: translateY(-1px);
}

.ayrac {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0;
    color: var(--mu2);
    font-size: 12px;
}

.ayrac::before,
.ayrac::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--bo);
}

.gecici-not {
    background: var(--aml);
    border: 1px solid #fbbf24;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 12px;
    color: #92400e;
    line-height: 1.6;
    margin-top: 24px;
}

/* ── ORTAK FORM ── */
.sayfa {
    min-height: 100vh;
    background: var(--bg);
}

.sayfa-hd {
    background: var(--w);
    border-bottom: 2px solid var(--red);
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 99;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}

.hd-geri {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--bo);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    color: var(--tx);
}

.hd-baslik {
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 17px;
    flex: 1;
}

.hd-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--rl);
    border: 1px solid var(--rm);
    border-radius: 20px;
    padding: 3px 12px 3px 4px;
}

.hd-av {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    font-family: "Outfit", sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hd-ad {
    font-size: 12px;
    font-weight: 600;
    color: var(--rd);
}

/* ── PROGRESS BAR ── */
.progress-alan {
    background: var(--w);
    border-bottom: 1px solid var(--bo);
    padding: 16px 20px;
}

.progress-bar-dis {
    background: var(--bg);
    border-radius: 100px;
    height: 6px;
    margin-bottom: 10px;
    overflow: hidden;
}

.progress-bar-ic {
    height: 6px;
    background: linear-gradient(90deg, var(--red), #e84565);
    border-radius: 100px;
    transition: width 0.4s;
}

.adimlar {
    display: flex;
    justify-content: space-between;
    gap: 4px;
}

.adim {
    flex: 1;
    text-align: center;
    font-size: 10px;
    font-family: "Outfit", sans-serif;
    font-weight: 600;
    color: var(--mu2);
    transition: color 0.3s;
}

.adim.on {
    color: var(--red);
}

.adim.bitti {
    color: var(--gr);
}

/* ── FORM KART ── */
.form-kart {
    width: 100%;
    margin: 20px 0;
    background: var(--w);
    border-radius: 16px;
    border: 1px solid var(--bo);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.form-kart-b {
    padding: 16px 22px;
    border-bottom: 1px solid var(--bo);
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-kart-ic {
    padding: 22px;
}

/* ── FORM ELEMANLARİ ── */
.fg {
    margin-bottom: 16px;
}

.pwd-wrap {
    position: relative;
}

.pwd-wrap .inp {
    padding-right: 42px;
    width: 100%;
    box-sizing: border-box;
}

.pwd-eye {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 18px;
    padding: 4px 8px;
    user-select: none;
    opacity: 0.6;
}

.pwd-eye:hover {
    opacity: 1;
}

.pwd-eye:active {
    opacity: 1;
}

.fl {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--mu);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
    font-family: "Outfit", sans-serif;
}

.fl .zor {
    color: var(--red);
}

.fl .acik {
    font-size: 10px;
    font-weight: 400;
    color: var(--mu2);
    text-transform: none;
    letter-spacing: 0;
}

.inp,
.sel {
    width: 100%;
    padding: 11px 13px;
    border: 1.5px solid var(--bo);
    border-radius: 10px;
    font-size: 14px;
    font-family: "DM Sans", sans-serif;
    outline: none;
    background: var(--bg);
    color: var(--tx);
    transition:
        border 0.15s,
        background 0.15s;
}

.inp:focus,
.sel:focus {
    border-color: var(--red);
    background: var(--w);
}

.inp.hata-inp {
    border-color: var(--red);
    background: #fff8f8;
}

.r2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.r3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}

.r4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    align-items: end;
}

.hata-mesaj {
    font-size: 11px;
    color: var(--red);
    margin-top: 4px;
    display: none;
}

/* ── DOSYA YÜKLEME ── */
.dosya-alan {
    border: 2px dashed var(--bo);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    background: var(--bg);
}

.dosya-alan:hover,
.dosya-alan.dragover {
    border-color: var(--red);
    background: var(--rl);
}

.dosya-alan input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.dosya-ikon {
    font-size: 28px;
    margin-bottom: 8px;
}

.dosya-metin {
    font-size: 13px;
    color: var(--mu);
    line-height: 1.5;
}

.dosya-metin b {
    color: var(--red);
}

.dosya-preview {
    display: none;
    align-items: center;
    gap: 10px;
    background: var(--grl);
    border: 1px solid var(--grb);
    border-radius: 9px;
    padding: 10px 14px;
    margin-top: 8px;
}

.dosya-preview img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--grb);
}

.dosya-preview-ad {
    font-size: 12px;
    font-weight: 600;
    color: var(--gr);
    flex: 1;
}

.dosya-preview-sil {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--mu);
    padding: 2px 6px;
}

/* ── BUTONLAR ── */
.btn {
    padding: 11px 24px;
    border: none;
    border-radius: 10px;
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-red {
    background: var(--red);
    color: #fff;
}

.btn-red:hover {
    background: var(--rd);
}

.btn-out {
    background: var(--w);
    color: var(--tx);
    border: 1.5px solid var(--bo);
}

.btn-full {
    width: 100%;
    padding: 13px;
    font-size: 15px;
}

.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-nav {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

/* ── UYARI / OK ── */
.uyari {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 14px;
    display: none;
    line-height: 1.6;
}

.uyari.hata {
    background: #fee2e2;
    border: 1px solid var(--rm);
    color: #b91c1c;
}

.uyari.basari {
    background: var(--grl);
    border: 1px solid var(--grb);
    color: var(--gr);
}

.uyari.bilgi {
    background: var(--bll);
    border: 1px solid #bfdbfe;
    color: var(--bl);
}

/* ── DASHBOARD ── */
.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    max-width: 760px;
    margin: 20px auto;
    padding: 0 16px;
}

.dash-kart {
    background: var(--w);
    border: 1px solid var(--bo);
    border-radius: 16px;
    padding: 22px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.dash-kart:hover {
    border-color: var(--red);
    box-shadow: 0 4px 20px rgba(200, 16, 46, 0.12);
    transform: translateY(-2px);
}

.dash-ikon {
    font-size: 38px;
    margin-bottom: 10px;
}

.dash-ad {
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--tx);
    margin-bottom: 4px;
}

.dash-alt {
    font-size: 12px;
    color: var(--mu);
}

/* ── TALEP KARTI ── */
.talep-kart {
    background: var(--w);
    border: 1px solid var(--bo);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
}

.bdg {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 8px;
    font-family: "Outfit", sans-serif;
}

.b-wait {
    background: var(--aml);
    color: var(--am);
}

.b-ok {
    background: var(--grl);
    color: var(--gr);
}

.b-red {
    background: #fee2e2;
    color: #b91c1c;
}

.b-bl {
    background: var(--bll);
    color: var(--bl);
}

.bos {
    padding: 32px;
    text-align: center;
    color: var(--mu);
    font-size: 13px;
}

/* ── FİRMA KARTI ── */
.firma-opt {
    border: 2px solid var(--bo);
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.15s;
    margin-bottom: 8px;
}

.firma-opt:hover,
.firma-opt.secili {
    border-color: var(--red);
    background: var(--rl);
}

.firma-opt.secili .firma-ad {
    color: var(--red);
}

.firma-ad {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 2px;
}

.firma-alt {
    font-size: 11px;
    color: var(--mu);
}

/* ── GİRİŞ FORMU ── */
.giris-kart {
    max-width: 420px;
    margin: 40px auto;
    background: var(--w);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

.giris-kart-ust {
    background: linear-gradient(135deg, var(--red), var(--rd));
    padding: 28px 28px 20px;
    text-align: center;
}

.giris-kart-ust h2 {
    font-family: "Outfit", sans-serif;
    font-weight: 800;
    font-size: 22px;
    color: #fff;
    margin-bottom: 4px;
}

.giris-kart-ust p {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
}

.giris-kart-ic {
    padding: 24px 28px;
}

.sifre-link {
    font-size: 12px;
    color: var(--bl);
    cursor: pointer;
    display: block;
    text-align: right;
    margin-top: -10px;
    margin-bottom: 14px;
}

@media (max-width: 680px) {
    .karsılama {
        grid-template-columns: 1fr;
    }

    .sol {
        padding: 40px 24px 32px;
        min-height: auto;
    }

    .sag {
        padding: 32px 24px;
    }

    .brand {
        font-size: 32px;
    }

    .r2,
    .r3,
    .r4 {
        grid-template-columns: 1fr;
    }

    .dash-grid {
        grid-template-columns: 1fr 1fr;
    }

    .form-kart-ic {
        padding: 16px;
    }

    .btn-nav {
        flex-direction: column;
    }
}

/* HAVA DURUMU */
.hava-kart {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    padding: 8px 10px;
    text-align: center;
    min-width: 68px;
    flex: 1;
}

.hw-sehir {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.65);
    font-family: Outfit, sans-serif;
    font-weight: 700;
    margin-bottom: 2px;
}

.hw-ikon {
    font-size: 22px;
    margin: 2px 0;
}

.hw-temp {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    font-family: Outfit, sans-serif;
}

/* SAAT */
.saat-kart {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 7px 9px;
    text-align: center;
    min-width: 62px;
    flex: 1;
}

.saat-sehir {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.6);
    font-family: Outfit, sans-serif;
    font-weight: 700;
    margin-bottom: 1px;
}

.saat-zaman {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    font-family: Outfit, sans-serif;
    letter-spacing: 0.5px;
}

.saat-ulke {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.45);
}

/* KAYAN YAZI */
@keyframes kayan {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* Şifre kural satırları */
.sifre-kural {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--mu);
    padding: 4px 0;
    transition: color 0.15s;
}

.sifre-kural.ok {
    color: var(--gr);
}

.sifre-kural .sk-ikon {
    font-size: 14px;
    display: inline-block;
    width: 18px;
    text-align: center;
}

/* ─── MOBİL / PWA İYİLEŞTİRMELERİ ─── */
html,
body {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    overscroll-behavior-y: contain;
}

body {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

input,
select,
textarea,
button {
    -webkit-appearance: none;
    appearance: none;
    font-size: 16px !important;
}

/* 16px: iOS zoom engeli */
button,
.btn,
.dash-kart {
    min-height: 44px;
    touch-action: manipulation;
}

/* Apple HIG minimum tap target */
input[type="date"],
input[type="time"] {
    min-height: 44px;
}

.inp,
.sel {
    min-height: 42px;
    padding: 10px 12px;
}

/* PWA standalone mod: tam ekran */
@media all and (display-mode: standalone) {
    body {
        padding-top: calc(env(safe-area-inset-top) + 8px);
    }
}

/* Keyboard açıkken taşma engeli */
@media (max-height: 500px) {
    .sayfa-hd {
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--w);
    }
}

/* Profil tab bar scrollbar gizle (Chrome/Safari) */
#profilTabBar::-webkit-scrollbar {
    display: none;
}

#profilTabBar {
    background: #fff;
    border-radius: 10px;
}

/* Yönetici → Çalışanlar listesi: desktop'ta 2 kolonlu kart grid */
.admin-liste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/* 2 kolonlu kart düzeninde tablo başlığı anlamsız → desktop'ta gizle */
.admin-liste .admin-kart-head {
    display: none;
}

/* Email satırı küçük font */
.admin-kart-email {
    font-size: 11px;
    color: var(--mu, #6b7280);
    line-height: 1.3;
    word-break: break-all;
    margin: 2px 0 0;
}

.admin-kart {
    display: grid;
    grid-template-columns: 2.2fr 1.6fr auto;
    align-items: center;
    gap: 12px;
    background: var(--bg);
    border: 1px solid var(--bo);
    border-radius: 9px;
    padding: 12px 16px;
}

.admin-kart-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--red);
}

.admin-kart-head {
    background: #f1f5f9;
    border: 1px solid var(--bo);
    border-radius: 9px;
    padding: 10px 16px;
}

/* Aktif erkek çalışan: mavi */
.admin-kart.admin-kart-erkek {
    background: #dbeafe;
    border-color: #93c5fd;
    border-left: 4px solid #2563eb;
}

/* Aktif kadın çalışan: pembe/kırmızı */
.admin-kart.admin-kart-kadin {
    background: #fce7f3;
    border-color: #f9a8d4;
    border-left: 4px solid #db2777;
}

/* Pasif (işten ayrılmış) personel kartı: gri ve soluk */
.admin-kart.admin-kart-pasif {
    background: #f3f4f6;
    border-color: #d1d5db;
    border-left: 4px solid #6b7280;
    opacity: 0.85;
}

/* İşlemler kolonundaki Düzenle butonu (icon-only) */
.admin-kart-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: transform 0.1s ease, background 0.15s ease;
}

.admin-kart-edit-btn:hover {
    background: #b91c1c;
}

.admin-kart-edit-btn:active {
    transform: scale(0.94);
}

.admin-kart-edit-btn .material-symbols-outlined {
    font-size: 20px;
}

.admin-kart-col {
    min-width: 0;
}

.admin-kart-col-end {
    text-align: right;
    justify-self: end;
}

/* Mobilde tek sütun stack: başlık şeridini gizle, kart kolonları alt alta */
@media (max-width: 767px) {
    .admin-liste {
        grid-template-columns: 1fr;
    }

    .admin-kart-head {
        display: none;
    }

    .admin-kart {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .admin-kart-col-end {
        text-align: left;
        justify-self: start;
    }
}

/* Yönetici → Firmalar listesi: 4 sütunlu tablo-benzeri kart yapısı */
.firma-liste {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.firma-kart {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1.5fr auto;
    align-items: center;
    gap: 12px;
    background: var(--bg);
    border: 1px solid var(--bo);
    border-radius: 9px;
    padding: 12px 16px;
}

.firma-kart-head {
    background: #f1f5f9;
    border: 1px solid var(--bo);
    border-radius: 9px;
    padding: 10px 16px;
}

.firma-kart-col {
    min-width: 0;
}

.firma-kart-col-end {
    text-align: right;
    justify-self: end;
    display: flex;
    align-items: center;
}

@media (max-width: 767px) {
    .firma-kart-head {
        display: none;
    }

    .firma-kart {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .firma-kart-col-end {
        text-align: left;
        justify-self: start;
        flex-wrap: wrap;
    }
}

/* Onay Atamaları liste: desktop'ta 2 kolonlu grid */
.oa-firma-liste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/* Onay Atamaları kartları: firma bilgisi | düzenle ikonu (2 sütun) */
.oa-firma-liste .oa-firma-kart {
    grid-template-columns: 1fr auto;
}

@media (max-width: 767px) {
    .oa-firma-liste {
        grid-template-columns: 1fr;
    }
}

/* Yönetici → Firmalar liste: desktop'ta 2 kolonlu grid */
.admin-firma-liste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/* Yönetici → Firmalar kartları: firma bilgisi | vergi no | işlemler (3 sütun) */
.admin-firma-liste .admin-firma-kart {
    grid-template-columns: 1.6fr 1fr auto;
}

/* Liste başlığı: tek satır, iki kart kolonu üstüne yayılır;
   her hücre kart iç kolon proporsiyonlarıyla aynı (1.6fr 1fr auto) */
.admin-firma-liste .admin-firma-head {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 2px;
}

.admin-firma-head-cell {
    display: grid;
    grid-template-columns: 1.6fr 1fr auto;
    gap: 12px;
    align-items: center;
    background: #f1f5f9;
    border: 1px solid var(--bo);
    border-radius: 9px;
    padding: 8px 16px;
    font-size: 11px;
    font-weight: 700;
    color: var(--mu);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-firma-head-end {
    text-align: right;
    justify-self: end;
}

@media (max-width: 767px) {
    .admin-firma-liste {
        grid-template-columns: 1fr;
    }

    /* Mobilde kartlar zaten tek sütun stack — başlık şeridi mantıksız, gizle */
    .admin-firma-liste .admin-firma-head {
        display: none;
    }
}