:root {
    --bg: #f4f6f8;
    --kart: #ffffff;
    --yazi: #1d2330;
    --soluk: #6b7383;
    --cizgi: #e3e7ed;
    --ana: #2f5bea;
    --yesil: #12a150;
    --yesil-acik: #e4f6ec;
    --kirmizi: #d9342b;
    --kirmizi-acik: #fde8e7;
    --sari: #b7791f;
    --sari-acik: #fdf3df;
    --golge: 0 1px 3px rgba(20, 30, 50, .08), 0 4px 16px rgba(20, 30, 50, .05);
    --r: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
    background: var(--bg);
    color: var(--yazi);
    font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-tap-highlight-color: transparent;
}
a { color: var(--ana); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 .6em; line-height: 1.25; }
h1 { font-size: 1.45rem; }
h2 { font-size: 1.15rem; }
.soluk { color: var(--soluk); }
.kucuk { font-size: .85rem; }
.sag { text-align: right; }
.ortala { text-align: center; }
.mt { margin-top: 1rem; }
.gizli { display: none !important; }
.satir { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.satir.arasi { justify-content: space-between; }

.kart {
    background: var(--kart);
    border-radius: var(--r);
    box-shadow: var(--golge);
    padding: 1.1rem 1.2rem;
    margin-bottom: 1rem;
}

/* ---------- form ---------- */
label { display: block; font-weight: 600; font-size: .88rem; margin: .8rem 0 .3rem; }
input[type=text], input[type=tel], input[type=password], input[type=number], input[type=date],
input[type=datetime-local], input[type=month], select, textarea {
    width: 100%;
    padding: .65rem .8rem;
    border: 1px solid var(--cizgi);
    border-radius: 10px;
    font: inherit;
    background: #fff;
    color: var(--yazi);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ana); outline-offset: -1px; border-color: transparent; }
.onay { display: flex; align-items: center; gap: .5rem; font-weight: 500; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .6rem 1.1rem;
    border: 0; border-radius: 10px;
    background: var(--ana); color: #fff;
    font: inherit; font-weight: 600;
    cursor: pointer;
    text-decoration: none !important;
}
.btn:disabled { opacity: .55; cursor: default; }
.btn.ikincil { background: #e9edf3; color: var(--yazi); }
.btn.kirmizi { background: var(--kirmizi); }
.btn.yesil { background: var(--yesil); }
.btn.kucuk { padding: .35rem .7rem; font-size: .85rem; }
.btn.tam { width: 100%; }

.uyari { border-radius: 10px; padding: .7rem .9rem; margin-bottom: 1rem; }
.uyari.hata { background: var(--kirmizi-acik); color: #8e1f19; }
.uyari.basari { background: var(--yesil-acik); color: #0d6b36; }
.uyari.dikkat { background: var(--sari-acik); color: #7a4f10; }

.rozet { display: inline-block; padding: .12rem .55rem; border-radius: 99px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.rozet.yesil { background: var(--yesil-acik); color: #0d6b36; }
.rozet.kirmizi { background: var(--kirmizi-acik); color: #8e1f19; }
.rozet.sari { background: var(--sari-acik); color: #7a4f10; }
.rozet.gri { background: #eceff3; color: var(--soluk); }

/* ---------- çalışan (mobil) ---------- */
.mobil { max-width: 460px; margin: 0 auto; padding: 16px; min-height: 100vh; display: flex; flex-direction: column; }
.mobil-ust { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.mobil-ust .firma { font-weight: 700; }
.mobil-alt { margin-top: auto; padding-top: 1rem; text-align: center; font-size: .85rem; }

.selam { font-size: 1.35rem; font-weight: 700; margin: 0; }
.durum-bilgi { margin: .2rem 0 0; }

.dev-btn {
    width: 100%;
    min-height: 150px;
    border: 0;
    border-radius: 22px;
    color: #fff;
    font: inherit;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: .04em;
    cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
    transition: transform .08s;
}
.dev-btn:active { transform: scale(.98); }
.dev-btn small { font-size: .9rem; font-weight: 500; letter-spacing: 0; opacity: .9; }
.dev-btn.giris { background: linear-gradient(160deg, #19b35e, #0e8a46); }
.dev-btn.cikis { background: linear-gradient(160deg, #e5483f, #b92a22); }
.dev-btn:disabled { opacity: .7; cursor: default; }

.izin-kart { border: 2px solid #c9d6fb; text-align: left; }
.izin-kart.reddedildi { border-color: #f4c2bf; }
.izin-kart .izin-ikon { font-size: 2rem; line-height: 1; margin-bottom: .4rem; }
.izin-kart p { margin: .3rem 0 .6rem; }
.izin-kart ol { padding-left: 1.2rem; margin: .4rem 0 1rem; }
.izin-kart li { margin-bottom: .45rem; }

.zaman-cizgi { list-style: none; margin: 0; padding: 0; }
.zaman-cizgi li { display: flex; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--cizgi); }
.zaman-cizgi li:last-child { border-bottom: 0; }

.sonuc { text-align: center; padding: 2rem 1rem; }
.sonuc .ikon { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; }
.sonuc .ikon.yesil { background: var(--yesil-acik); color: var(--yesil); }
.sonuc .ikon.kirmizi { background: var(--kirmizi-acik); color: var(--kirmizi); }
.sonuc .saat { font-size: 2.6rem; font-weight: 800; margin: .2rem 0; }

.yukleniyor { display: inline-block; width: 1em; height: 1em; border: 3px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: don .8s linear infinite; }
@keyframes don { to { transform: rotate(360deg); } }

/* ---------- yönetim ---------- */
.ust-menu { background: #172036; color: #fff; }
.ust-menu .ic { max-width: 1200px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 1.2rem; min-height: 56px; flex-wrap: wrap; }
.ust-menu .logo { font-weight: 800; letter-spacing: .02em; color: #fff; }
.ust-menu nav { display: flex; gap: .2rem; flex-wrap: wrap; flex: 1; }
.ust-menu nav a { color: #c3cbe0; padding: .4rem .7rem; border-radius: 8px; font-weight: 500; }
.ust-menu nav a:hover, .ust-menu nav a.aktif { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }
.ust-menu form { margin: 0; }
.ust-menu .cikis { background: none; border: 0; color: #c3cbe0; font: inherit; cursor: pointer; }
.sayfa { max-width: 1200px; margin: 0 auto; padding: 20px 16px 40px; }

.ozet { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.ozet .kart { margin: 0; }
.ozet .sayi { font-size: 1.9rem; font-weight: 800; line-height: 1.1; }

.tablo-kutu { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .55rem .6rem; border-bottom: 1px solid var(--cizgi); text-align: left; vertical-align: middle; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--soluk); font-weight: 700; white-space: nowrap; }
tr.silindi td { color: #a0a7b4; text-decoration: line-through; }
td.sayi, th.sayi { text-align: right; font-variant-numeric: tabular-nums; }

.puantaj th, .puantaj td { padding: .35rem .4rem; font-size: .8rem; text-align: center; white-space: nowrap; }
.puantaj td:first-child, .puantaj th:first-child { text-align: left; position: sticky; left: 0; background: #fff; z-index: 1; }
.puantaj .hafta-sonu { background: #f6f7fa; }
.puantaj .uyari-hucre { background: var(--sari-acik); color: #7a4f10; font-weight: 600; }

.filtre { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; align-items: end; }
.filtre label { margin-top: 0; }

.iki-kolon { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 800px) { .iki-kolon { grid-template-columns: 1fr; } }

@media print {
    .ust-menu, .yazdirma { display: none !important; }
    body { background: #fff; }
}