:root {
    --ana: #6366f1;
    --ana-koyu: #4f46e5;
    --zemin: #0f172a;
    --kart: rgba(30, 41, 59, .72);
    --kart-duz: #1e293b;
    --metin: #f8fafc;
    --metin-sonuk: #94a3b8;
    --cizgi: rgba(255, 255, 255, .1);
    --girdi: rgba(15, 23, 42, .85);

    --renk-normal: #34d399;
    --renk-150: #818cf8;
    --renk-200: #c084fc;
    --renk-mola: #fbbf24;
    --renk-hata: #f87171;

    --sat-pazar: rgba(192, 132, 252, .09);
    --sat-cumartesi: rgba(129, 140, 248, .07);
    --sat-tatil: rgba(248, 113, 113, .09);
}

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

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

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--zemin);
    color: var(--metin);
    background-image:
        radial-gradient(at 0% 0%, rgba(99, 102, 241, .14) 0, transparent 55%),
        radial-gradient(at 100% 100%, rgba(168, 85, 247, .14) 0, transparent 55%);
    background-attachment: fixed;
    min-height: 100vh;
    padding: 1.5rem;
    line-height: 1.5;
}

.sarmal {
    max-width: 1240px;
    margin: 0 auto;
}

/* ---------- ust baslik ---------- */

.ust {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
}

h1 {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

h1 .yil {
    color: var(--ana);
}

.alt-baslik {
    color: var(--metin-sonuk);
    font-size: .9rem;
    margin-top: .15rem;
}

/* ---------- uyarilar ---------- */

.uyari {
    padding: .8rem 1.1rem;
    border-radius: .7rem;
    margin-bottom: 1.25rem;
    font-size: .92rem;
    border: 1px solid;
}

.uyari-basari {
    background: rgba(52, 211, 153, .12);
    border-color: rgba(52, 211, 153, .35);
    color: #6ee7b7;
}

.uyari-hata {
    background: rgba(248, 113, 113, .12);
    border-color: rgba(248, 113, 113, .35);
    color: #fca5a5;
}

/* ---------- kural kutusu ---------- */

.kural-kutu {
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: 1rem;
    padding: 1.1rem 1.35rem;
    margin-bottom: 1.5rem;
}

.kural-kutu h2 {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--metin-sonuk);
    margin-bottom: .75rem;
}

.kural-kutu ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: .45rem 1.5rem;
}

.kural-kutu li {
    font-size: .88rem;
    color: #cbd5e1;
    display: flex;
    align-items: baseline;
    gap: .55rem;
}

.kural-not {
    margin-top: .8rem;
    padding-top: .8rem;
    border-top: 1px dashed var(--cizgi);
    font-size: .82rem;
    color: var(--metin-sonuk);
}

.etiket {
    flex: none;
    display: inline-block;
    min-width: 3.6rem;
    text-align: center;
    padding: .12rem .5rem;
    border-radius: 1rem;
    font-size: .72rem;
    font-weight: 700;
}

.etiket-normal { background: rgba(52, 211, 153, .18); color: var(--renk-normal); }
.etiket-150    { background: rgba(129, 140, 248, .18); color: var(--renk-150); }
.etiket-200    { background: rgba(192, 132, 252, .18); color: var(--renk-200); }
.etiket-mola   { background: rgba(251, 191, 36, .18); color: var(--renk-mola); }

/* ---------- ozet kutulari ---------- */

.ozet {
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: 1rem;
    padding: 1.25rem 1.35rem;
    margin-bottom: 1.75rem;
}

.ozet-ust {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}

.ozet-ust > h2 {
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--metin-sonuk);
    padding-top: .35rem;
}

.maas-alani {
    min-width: 260px;
}

.maas-alani > label {
    display: block;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--metin-sonuk);
    margin-bottom: .35rem;
}

.maas-girdi-grup {
    display: flex;
    align-items: stretch;
}

.maas-girdi {
    font-size: 1.05rem;
    font-weight: 600;
    text-align: right;
    width: 11rem;
    border-radius: .5rem 0 0 .5rem;
    border-right: none;
    font-variant-numeric: tabular-nums;
}

.maas-birim {
    display: flex;
    align-items: center;
    padding: 0 .7rem;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--cizgi);
    border-left: none;
    border-radius: 0 .5rem .5rem 0;
    color: var(--metin-sonuk);
    font-size: .85rem;
    font-weight: 600;
}

.maas-alani .ipucu {
    margin-top: .4rem;
    max-width: 30rem;
}

.maas-alani .ipucu strong {
    color: var(--renk-mola);
    white-space: nowrap;
}

.kutu-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .8rem;
}

.kutu-izgara-genis {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.kutu-carpan {
    font-weight: 700;
    color: var(--metin-sonuk);
    opacity: .75;
    margin-left: .25rem;
    text-transform: none;
    letter-spacing: 0;
}

.kutu-para {
    margin-top: .55rem;
    padding-top: .5rem;
    border-top: 1px dashed var(--cizgi);
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--metin);
}

.ozet-not-sonuk {
    color: var(--metin-sonuk);
}

.kutu {
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-left: 3px solid var(--cizgi);
    border-radius: .8rem;
    padding: .9rem 1rem;
}

.kutu-deger {
    font-size: 1.3rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.kutu-kucuk .kutu-deger {
    font-size: 1.05rem;
}

.kutu-ad {
    font-size: .74rem;
    color: var(--metin-sonuk);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .35rem;
}

.kutu-ondalik {
    font-size: .74rem;
    color: #64748b;
    margin-top: .25rem;
    font-variant-numeric: tabular-nums;
}

.k-normal { border-left-color: var(--renk-normal); }
.k-normal .kutu-deger { color: var(--renk-normal); }
.k-150 { border-left-color: var(--renk-150); }
.k-150 .kutu-deger { color: var(--renk-150); }
.k-200 { border-left-color: var(--renk-200); }
.k-200 .kutu-deger { color: var(--renk-200); }
.k-genel { border-left-color: var(--metin); }

.ozet-not {
    margin-top: .6rem;
    font-size: .8rem;
    color: var(--renk-mola);
}

/* ---------- ana kart ---------- */

.ana-kart {
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: 1.1rem;
    overflow: hidden;
}

.kart-ust {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--cizgi);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, .02);
}

.ay-form {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.ay-form label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--metin-sonuk);
}

.kart-ust-sag {
    display: flex;
    align-items: center;
    gap: .9rem;
}

.kaydedilmedi {
    font-size: .8rem;
    color: var(--renk-mola);
    font-weight: 600;
}

.kaydedilmedi[hidden] {
    display: none;
}

.kart-alt {
    padding: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--cizgi);
}

.kart-alt-not {
    font-size: .82rem;
    color: var(--metin-sonuk);
}

/* ---------- form ogeleri ---------- */

select,
.metin-girdi,
.saat-girdi,
.mola-girdi {
    font: inherit;
    background: var(--girdi);
    border: 1px solid var(--cizgi);
    color: var(--metin);
    padding: .45rem .6rem;
    border-radius: .5rem;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

select:focus-visible,
.metin-girdi:focus-visible,
.saat-girdi:focus-visible,
.mola-girdi:focus-visible,
.btn:focus-visible,
a:focus-visible {
    border-color: var(--ana);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .35);
}

/*
 * Saat alanlari duz metin girdisidir; tarayicinin saat secici widget'i
 * (saat ikonu + acilir kaydirma listesi) hic olusmaz. Bicimlendirmeyi
 * app.js yapar: "830" yazip cikinca 08:30 olur.
 */
.saat-girdi {
    font-variant-numeric: tabular-nums;
    width: 5.5rem;
    text-align: center;
    letter-spacing: .04em;
}

.saat-girdi::placeholder {
    color: #475569;
    letter-spacing: normal;
}

/* Gecersiz saat girildiginde kisa uyari */
.saat-gecersiz {
    border-color: var(--renk-hata) !important;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, .25) !important;
}

/* Mola alanindaki sayi oklarini da kaldir */
.mola-girdi::-webkit-inner-spin-button,
.mola-girdi::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.mola-girdi {
    -moz-appearance: textfield;
    appearance: textfield;
}

.mola-girdi {
    width: 5.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.metin-girdi {
    width: 100%;
    padding: .6rem .75rem;
}

.btn {
    font: inherit;
    font-weight: 600;
    border: 1px solid transparent;
    padding: .55rem 1.2rem;
    border-radius: .6rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background .15s, border-color .15s;
}

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

.btn-birincil:hover {
    background: var(--ana-koyu);
}

.btn-sessiz {
    background: transparent;
    border-color: var(--cizgi);
    color: var(--metin-sonuk);
}

.btn-sessiz:hover {
    border-color: var(--ana);
    color: var(--metin);
}

.btn-buyuk {
    padding: .75rem 2.2rem;
    font-size: 1rem;
}

.btn-tam {
    width: 100%;
    margin-top: 1rem;
    padding: .7rem;
}

/* ---------- tablo ---------- */

.tablo-sarmal {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mesai-tablo {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: .9rem;
    min-width: 780px;
}

.mesai-tablo th,
.mesai-tablo td {
    padding: .55rem .9rem;
    border-bottom: 1px solid var(--cizgi);
    vertical-align: middle;
}

.mesai-tablo thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--kart-duz);
    color: var(--metin-sonuk);
    font-size: .76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 2px solid var(--cizgi);
    white-space: nowrap;
}

.mesai-tablo tbody tr {
    border-left: 3px solid transparent;
}

.mesai-tablo tbody tr:hover {
    background: rgba(255, 255, 255, .03);
}

.mesai-tablo tbody tr.satir-dolu {
    border-left-color: var(--ana);
}

tr.gun-pazar { background: var(--sat-pazar); }
tr.gun-cumartesi { background: var(--sat-cumartesi); }
tr.gun-tatil { background: var(--sat-tatil); }

tr.gun-bugun th.h-tarih .t-gun {
    color: var(--ana);
}

tr.gun-bugun th.h-tarih .t-gun::after {
    content: ' bugun';
    font-size: .68rem;
    font-weight: 600;
    color: var(--ana);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.h-tarih {
    font-weight: 400;
}

.t-gun {
    display: block;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.t-ad {
    display: block;
    font-size: .74rem;
    color: var(--metin-sonuk);
}

.t-oran {
    font-weight: 700;
    margin-left: .3rem;
}

tr.gun-pazar .t-oran { color: var(--renk-200); }
tr.gun-tatil .t-oran { color: var(--renk-200); }
tr.gun-cumartesi .t-oran { color: var(--renk-150); }

.t-tatil {
    display: block;
    font-size: .72rem;
    color: var(--renk-hata);
    font-weight: 600;
}

.s-toplam,
.s-normal,
.s-150,
.s-200 {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.s-toplam { font-weight: 600; }
.s-normal { color: var(--renk-normal); }
.s-150 { color: var(--renk-150); }
.s-200 { color: var(--renk-200); font-weight: 600; }

.mesai-tablo tfoot th,
.mesai-tablo tfoot td {
    background: var(--kart-duz);
    font-weight: 700;
    border-top: 2px solid var(--cizgi);
    border-bottom: none;
    position: sticky;
    bottom: 0;
}

.mesai-tablo tfoot th {
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .05em;
    color: var(--metin-sonuk);
}

/* ---------- dip ---------- */

.dip {
    margin-top: 1.5rem;
    text-align: center;
    font-size: .78rem;
    color: #64748b;
}

/* ---------- giris sayfasi ---------- */

.giris-sayfasi {
    display: flex;
    align-items: center;
    justify-content: center;
}

.giris-kart {
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: 1.1rem;
    padding: 2.25rem;
    width: 100%;
    max-width: 380px;
}

.giris-kart h1 {
    font-size: 1.4rem;
    text-align: center;
}

.giris-alt {
    text-align: center;
    color: var(--metin-sonuk);
    font-size: .85rem;
    margin: .3rem 0 1.5rem;
}

.giris-kart label {
    display: block;
    font-size: .8rem;
    color: var(--metin-sonuk);
    margin-bottom: .35rem;
}

/* ---------- kurulum ---------- */

.kurulum-kart {
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: 1.1rem;
    padding: 2rem;
    max-width: 660px;
    margin: 0 auto;
}

.kurulum-kart h1 {
    font-size: 1.4rem;
    margin-bottom: .4rem;
}

.kurulum-kart p {
    color: var(--metin-sonuk);
    font-size: .9rem;
    margin-bottom: 1.25rem;
}

.kurulum-kart fieldset {
    border: 1px solid var(--cizgi);
    border-radius: .7rem;
    padding: 1.1rem;
    margin-bottom: 1.1rem;
}

.kurulum-kart legend {
    padding: 0 .5rem;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--metin-sonuk);
}

.alan {
    margin-bottom: .9rem;
}

.alan:last-child {
    margin-bottom: 0;
}

.alan label {
    display: block;
    font-size: .82rem;
    margin-bottom: .3rem;
    color: #cbd5e1;
}

.alan .ipucu {
    font-size: .76rem;
    color: #64748b;
    margin-top: .25rem;
}

.secim-satir {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.secim-satir label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .88rem;
    cursor: pointer;
}

pre.kod {
    background: var(--girdi);
    border: 1px solid var(--cizgi);
    border-radius: .6rem;
    padding: .9rem;
    overflow-x: auto;
    font-size: .8rem;
    line-height: 1.6;
    color: #cbd5e1;
}

/* ---------- erisilebilirlik ---------- */

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

@media print {
    body {
        background: #fff;
        color: #000;
        padding: 0;
    }

    .kart-ust,
    .kart-alt,
    .kural-kutu,
    .ust .btn,
    .dip {
        display: none;
    }

    .ana-kart,
    .kutu {
        border: 1px solid #ccc;
        background: none;
    }

    .mesai-tablo {
        min-width: 0;
        font-size: .75rem;
    }

    .kutu-deger,
    .kutu-para,
    .s-normal,
    .s-150,
    .s-200 {
        color: #000;
    }

    .ozet {
        border: 1px solid #ccc;
        background: none;
    }

    .maas-girdi,
    .maas-birim {
        border-color: #ccc;
        background: none;
        color: #000;
    }
}