/* =========================================================
   ROOT COLORS
========================================================= */
:root{
    --primary-color:#6366f1;
    --secondary-color:#8b5cf6;
    --background-color:#0f172a;
}

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

html,
body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    background:var(--background-color);
    color:#fff;
    min-height:100vh;
}

/* =========================================================
   BODY
========================================================= */
body{
    background:
        linear-gradient(
            180deg,
            var(--background-color) 0%,
            #111827 100%
        );

    padding:20px;
}

/* =========================================================
   MOBILE PAGE
========================================================= */
.mobile-page{
    width:100%;
    max-width:500px;
    margin:0 auto;
    padding-bottom:100px;
}

/* =========================================================
   CARD
========================================================= */
.card{
    background:color-mix(
        in srgb,
        var(--background-color) 70%,
        white 10%
    );

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border:1px solid color-mix(
        in srgb,
        var(--primary-color) 25%,
        transparent
    );

    border-radius:24px;
    padding:20px;
    margin-bottom:18px;

    box-shadow:0 10px 40px rgba(0,0,0,0.25);

    animation:fadeUp .4s ease;
}

/* =========================================================
   TITLE
========================================================= */
h1{
    font-size:32px;
    font-weight:700;
    margin-bottom:12px;
}

h2{
    font-size:24px;
    margin-bottom:16px;
}

h3{
    font-size:18px;
    margin-bottom:8px;
}

p{
    line-height:1.6;
    color:#d1d5db;
}



/* =========================================================
   LOGO
========================================================= */
.site-logo{
    width:100%;
    display:flex;
    justify-content:center;
    margin-bottom:20px;
}

.site-logo img{
    max-width:180px;
    max-height:80px;
    object-fit:contain;
}

/* =========================================================
   INPUT
========================================================= */
.input{
    width:100%;
    padding:16px;
    margin-top:8px;
    margin-bottom:16px;
    border:none;
    border-radius:16px;
    background:rgba(255,255,255,0.08);
    color:#fff;
    font-size:15px;
    outline:none;
    transition:.3s;
}

.input:focus{
    background:rgba(255,255,255,0.14);
    transform:scale(1.01);
    border:1px solid var(--primary-color);
    box-shadow:0 0 0 3px color-mix(
        in srgb,
        var(--primary-color) 18%,
        transparent
    );
}

/* =========================================================
   SELECT
========================================================= */
select.input{
    appearance:none;
}

/* =========================================================
   BUTTON
========================================================= */
.btn{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
    border:none;
    border-radius:18px;
    background:linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
    color:#fff;
    font-size:16px;
    font-weight:600;
    text-decoration:none;
    cursor:pointer;
    transition:.3s;
    margin-bottom:12px;
}

.btn:hover{
    transform:translateY(-2px);
    filter:brightness(.95);
}

.btn-light{
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.1);
}

/* =========================================================
   ALERT
========================================================= */
.alert{
    padding:16px;
    border-radius:16px;
    margin-bottom:16px;
    font-size:14px;
}

.alert-success{
    background:rgba(16,185,129,.18);
    border:1px solid rgba(16,185,129,.4);
    color:#6ee7b7;
}

.alert-error{
    background:rgba(239,68,68,.18);
    border:1px solid rgba(239,68,68,.4);
    color:#fca5a5;
}

/* =========================================================
   LABEL
========================================================= */
label{
    display:block;
    margin-bottom:6px;
    font-size:14px;
    color:#cbd5e1;
}

/* =========================================================
   HR
========================================================= */
hr{
    border:none;
    height:1px;
    background:rgba(255,255,255,0.08);
    margin:20px 0;
}

/* =========================================================
   BADGE
========================================================= */
.badge{
    display:inline-flex;
    padding:8px 12px;
    border-radius:999px;
    font-size:12px;
    background:color-mix(
        in srgb,
        var(--primary-color) 25%,
        transparent
    );
    color:#fff;
}


/* =========================================================
   BOTTOM MENU
========================================================= */
.bottom-menu{
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    bottom:20px;

    width:calc(100% - 40px);
    max-width:500px;

    /* Dinamik alt menü rengi */
    background: var(--menu-color);

    backdrop-filter:blur(20px);

    border:1px solid color-mix(
        in srgb,
        var(--secondary-color) 35%,
        transparent
    );

    border-radius:24px;

    display:flex;

    justify-content:space-around;

    padding:14px;

    z-index:999;

    box-shadow:0 10px 30px rgba(0,0,0,0.25);
}

.bottom-menu a{
    color: var(--secondary-color);
    text-decoration:none;
    font-size:13px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
}

.bottom-menu a:hover{
    transform:translateY(-2px);
    color:#fff;
}

/* =========================================================
   ANIMATION
========================================================= */
@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* =========================================================
   SCROLLBAR
========================================================= */
::-webkit-scrollbar{
    width:6px;
}

::-webkit-scrollbar-thumb{
    background:var(--primary-color);
    border-radius:20px;
}

/* =========================================================
   SERVICE CARDS
========================================================= */
.selection-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-bottom:20px;
}

.selection-card{
    background:rgba(255,255,255,0.08);
    border:2px solid transparent;
    border-radius:18px;
    padding:18px;
    cursor:pointer;
    transition:.3s;
    user-select:none;
}

.selection-card.active{
    border-color:var(--secondary-color);
    background:color-mix(
        in srgb,
        var(--secondary-color) 25%,
        transparent
    );
    box-shadow:0 0 0 3px color-mix(
        in srgb,
        var(--secondary-color) 18%,
        transparent
    );
}

.selection-card h3{
    font-size:16px;
    margin-bottom:6px;
}

.selection-card p{
    font-size:13px;
    color:#cbd5e1;
}

/* =========================================================
   TIME SLOTS
========================================================= */
.time-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.time-slot{
    border:none;
    border-radius:14px;
    padding:14px;
    background:rgba(255,255,255,0.08);
    color:#fff;
    cursor:pointer;
    transition:.3s;
    font-weight:600;
}

.time-slot.active{
    background:linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
}

.time-slot:hover{
    transform:translateY(-2px);
}

.date-small{
    max-width:320px;
    padding-right:10px;
}

.stats-container {
    display: flex;
    flex-direction: column; /* sadece tek sütun */
    gap: 12px; /* kartlar arası boşluk */
    margin-bottom: 16px;
}

.stats-card {
    background: color-mix(in srgb, var(--secondary-color) 18%, rgba(255,255,255,0.08));
    padding: 18px;
    border-radius: 16px; /* yuvarlak köşe */
    text-align: center;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}

.stats-card h3 {
    margin-bottom: 6px;
    font-size: 0.95rem;
    color: #fff;
}

.stats-card p {
    font-size: 1.3rem;
    font-weight: bold;
    color: #fff;
}