@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200..800&display=swap');

:root{
    --primary:#b6895b;
    --bg:#000000;
    --card:#111111;
    --card-hover:#171717;
    --text:#ffffff;
    --muted:#bdbdbd;
    --border:rgba(255,255,255,0.08);
}

/* ===================================== */
/* BASE */
/* ===================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Plus Jakarta Sans',sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{
    background:var(--bg);
    color:var(--text);
    overflow-x:hidden;
}

/* ===================================== */
/* TITLE */
/* ===================================== */

.title{
    position:relative;

    padding-top:130px;
    padding-bottom:45px;

    text-align:center;

    overflow:hidden;
}

/* SOFT BACKGROUND GLOW */

.title::before{
    content:'';

    position:absolute;

    width:300px;
    height:300px;

    background:
    radial-gradient(
    rgba(182,137,91,0.12),
    transparent 70%
    );

    top:-120px;
    left:50%;

    transform:translateX(-50%);

    filter:blur(40px);

    z-index:0;
}

/* TITLE TEXT */

.title h1{
    position:relative;
    z-index:2;

    font-size:4rem;

    font-weight:800;

    line-height:1.1;

    letter-spacing:-1px;

    color:#ffffff;
}

/* GOLD TEXT */

.title h1 span{
    color:var(--primary);
}

/* ===================================== */
/* CATEGORY NAV */
/* ===================================== */

.category-nav{
    position:sticky;
    top:84px;

    z-index:900;

    overflow-x:auto;
    overflow-y:hidden;

    width:100%;

    padding:22px 0;

    background:
    rgba(10,10,10,0.82);

    backdrop-filter:blur(18px);

    border-top:
    1px solid rgba(255,255,255,0.05);

    border-bottom:
    1px solid rgba(255,255,255,0.05);

    box-shadow:
    0 10px 35px rgba(0,0,0,0.35);

    scrollbar-width:none;
}

/* HIDE SCROLLBAR */

.category-nav::-webkit-scrollbar{
    display:none;
}

/* ===================================== */
/* INNER TRACK */
/* ===================================== */

.category-track{
    width:max-content;

    min-width:100%;

    display:flex;
    justify-content:center;
    align-items:center;

    gap:14px;

    padding:0 40px;
}

/* ===================================== */
/* BUTTON */
/* ===================================== */

.category-track a{
    flex-shrink:0;

    text-decoration:none;

    color:#ffffff;

    padding:13px 24px;

    border-radius:999px;

    font-size:0.92rem;
    font-weight:700;

    background:#141414;

    border:
    1px solid rgba(255,255,255,0.06);

    transition:
    0.3s ease;
}

/* ===================================== */
/* HOVER */
/* ===================================== */

.category-track a:hover{
    transform:translateY(-4px);

    background:var(--primary);

    color:#000000;

    border-color:var(--primary);
}

/* ===================================== */
/* MENU SECTION */
/* ===================================== */

.menu-section{
    padding:55px 7% 80px;
}

/* ===================================== */
/* SECTION DIVIDER */
/* ===================================== */

.section-divider{
    display:flex;
    align-items:center;
    gap:20px;

    margin-bottom:40px;
}

.section-divider::before,
.section-divider::after{
    content:'';

    flex:1;
    height:1px;

    background:
    rgba(255,255,255,0.08);
}

.section-divider h2{
    color:var(--primary);

    font-size:2rem;

    font-weight:800;

    letter-spacing:1px;

    white-space:nowrap;
}

/* ===================================== */
/* MENU GRID */
/* ===================================== */

.menu-container{
    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap:28px;
}

/* ===================================== */
/* MENU CARD */
/* ===================================== */

.menu-card{
    position:relative;

    background:
    linear-gradient(
    145deg,
    rgba(20,20,20,0.95),
    rgba(10,10,10,0.95)
    );

    border:
    1px solid rgba(255,255,255,0.06);

    border-radius:30px;

    padding:35px 25px;

    text-align:center;

    overflow:hidden;

    transition:0.35s ease;

    backdrop-filter:blur(10px);
}

.menu-card::before{
    content:'';

    position:absolute;

    width:220px;
    height:220px;

    background:
    rgba(182,137,91,0.08);

    border-radius:50%;

    filter:blur(70px);

    top:-100px;
    left:-80px;
}

.menu-card:hover{
    transform:translateY(-10px);

    border-color:
    rgba(182,137,91,0.25);

    background:var(--card-hover);

    box-shadow:
    0 20px 45px rgba(0,0,0,0.45);
}

.menu-card img{
    width:145px;
    height:145px;

    object-fit:cover;

    border-radius:50%;

    border:
    4px solid rgba(182,137,91,0.9);

    margin-bottom:24px;

    transition:0.35s ease;

    position:relative;
    z-index:2;
}

.menu-card:hover img{
    transform:scale(1.05);
}

.menu-card h3{
    font-size:1.45rem;

    font-weight:700;

    line-height:1.5;

    margin-bottom:12px;

    position:relative;
    z-index:2;
}

.menu-price{
    color:var(--primary);

    font-size:1.2rem;

    font-weight:800;

    position:relative;
    z-index:2;
}

/* ===================================== */
/* OTHER TITLE */
/* ===================================== */

.other-title{
    text-align:center;

    margin-top:38px;
    margin-bottom:20px;
}

.other-title h4{
    color:var(--muted);

    font-size:0.9rem;

    font-weight:700;

    letter-spacing:2px;
}

/* ===================================== */
/* MENU LIST */
/* ===================================== */

.menu-list{
    background:
    rgba(17,17,17,0.92);

    border:
    1px solid rgba(255,255,255,0.06);

    border-radius:24px;

    overflow:hidden;

    backdrop-filter:blur(10px);
}

.menu-row{
    display:flex;

    justify-content:space-between;
    align-items:center;

    padding:18px 24px;

    border-bottom:
    1px solid rgba(255,255,255,0.05);

    transition:0.3s;
}

.menu-row:last-child{
    border-bottom:none;
}

.menu-row:hover{
    background:
    rgba(255,255,255,0.03);
}

.menu-row span:first-child{
    color:#fff;

    font-size:0.98rem;

    font-weight:500;
}

.menu-row span:last-child{
    color:var(--primary);

    font-size:1rem;

    font-weight:700;
}

.menu-info h4{

    display:inline-flex !important;

    align-items:center;

    gap:6px;

    flex-wrap:wrap;

    margin:0;
}

.menu-info h4{

    font-weight:700;
}

.menu-info h4 .menu-description-inline{

    font-weight:200 !important;
}

/* ===================================== */
/* MENU DESCRIPTION */
/* ===================================== */
.menu-description{

    color:#bdbdbd;

    font-size:0.92rem;

    line-height:1.6;

    margin-bottom:14px;

    margin-top:-2px;

    position:relative;

    z-index:2;
}

/* ===================================== */
/* INLINE DESCRIPTION */
/* ===================================== */

.menu-description-inline{

    color:rgba(255, 255, 255, 0.685) !important;

    font-size:0.78rem;

    font-weight:400 !important;

    margin-left:8px;

    opacity:3;
}

/* ===================================== */
/* SCROLL OFFSET */
/* ===================================== */

#coffee,
#milkbase,
#eskopisusu,
#teaseries,
#snack,
#flavour,
#eats,
#pasta,
#youandmie{
    scroll-margin-top:160px;
}

/* ===================================== */
/* FOOTER */
/* ===================================== */

footer{
    margin-top:90px;
}

/* ===================================== */
/* RESPONSIVE */
/* ===================================== */

@media(max-width:768px){

    .title{
        padding-top:115px;
        padding-inline:5%;
    }

    .title h1{
        font-size:2.3rem;
    }

    .category-nav{
        top:72px;
        padding:15px 5%;
    }

    .menu-section{
        padding:40px 5% 65px;
    }

    .section-divider{
        gap:12px;
    }

    .section-divider h2{
        font-size:1.5rem;
    }

    .menu-container{
        grid-template-columns:1fr;
    }

    .menu-card{
        padding:28px 20px;
        border-radius:26px;
    }

    .menu-card img{
        width:115px;
        height:115px;
    }

    .menu-card h3{
        font-size:1.2rem;
    }

    .menu-price{
        font-size:1rem;
    }

    .menu-row{
        padding:16px 18px;
    }
}

@media(max-width:500px){

    .title h1{
        font-size:2rem;
    }

    .category-nav a{
        font-size:0.82rem;
        padding:10px 18px;
    }

    .menu-card{
        border-radius:24px;
    }

    .menu-card img{
        width:100px;
        height:100px;
    }

    .menu-card h3{
        font-size:1.05rem;
    }

    .menu-row span:first-child,
    .menu-row span:last-child{
        font-size:0.9rem;
    }
}

/* ===================================== */
/* FIX LOGIN MODAL */
/* ===================================== */

.modal{

    z-index:99999 !important;
}

.modal-content{

    position:relative;

    z-index:100000 !important;
}