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

:root{
    --olive: #8a9b47;      /* Ngjyra jote e gjelbër */
    --dark-coffee: #4a2c2a; /* Ngjyra jote e kafesë */
    --black: #111;
    --white: #fff;
    --light: #f5f5f5;
}

h1, h2, h3, .hero-subtitle {
    font-family: 'Playfair Display', serif;
}

body{ background: white; color: #111; transition: 0.3s; overflow-x: hidden; }
body.dark { background: #111; color: white; }

/* LOADER */
#loader{ position:fixed; width:100%; height:100vh; background:white; display:flex; justify-content:center; align-items:center; z-index:9999; }
.spinner{ width:50px; height:50px; border:5px solid #eee; border-top:5px solid var(--olive); border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin{ 100%{transform:rotate(360deg);} }

#progressBar{ position:fixed; top:0; left:0; height:4px; background:var(--olive); width:0%; z-index:2000; }

/* HEADER */
header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    /* Transparencë dhe Blur */
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1000;
    transition: 0.4s ease;
}
header.scrolled {
    background: rgba(17, 17, 17, 0.8);
    padding: 5px 0;
}
.dark header { background: rgba(17, 17, 17, 0.85); }

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    max-width: 1300px;
    margin: 0 auto;
}
.logo img {
    width: 65px; /* Madhësi pak më e madhe */
    height: 65px;
    border-radius: 50%; /* E bën logon rreth fiks */
    background-color: #fff; /* Sfond i bardhë që të dallohet rrethi i gjelbër dhe shkrimi */
    padding: 2px; /* Pak hapësirë mes logos dhe bordit */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Një hije e lehtë që të duket si "pop-up" */
    object-fit: contain;
    transition: 0.3s ease;
}
header.scrolled .logo img {
    filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.5));
}

.logo img:hover {
    transform: scale(1.1); /* Pak zoom kur kalon miun */
}

.nav-links { display: flex; gap: 25px; list-style: none; }
.nav-links a {
    text-decoration: none;
    color: rgb(0, 0, 0); /* Tekst i bardhë që të lidhet me Hero */
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.3s;
}
.nav-links a:hover { color: var(--olive); }

.nav-actions{ display:flex; gap:15px; align-items:center; }
.theme-btn{ background:none; border:none; cursor:pointer; padding: 0; display: flex; align-items: center; }
.theme-btn img { width: 22px; filter: invert(1); } /* I bardhë mbi Hero */

.hamburger { 
    width: 30px; 
    height: 20px; /* Lartësia totale e zonës së hamburgerit */
    display: none; 
    flex-direction: column; 
    justify-content: space-between; 
    cursor: pointer; 
    z-index: 3005; 
}
.hamburger span { 
    display: block;
    height: 3px; 
    width: 100%; 
    background: white; 
    border-radius: 10px;
    transition: 0.3s;
}
.dark .hamburger span { background: white; }

.hamburger.active span:nth-child(1){ transform:rotate(45deg) translate(5px,5px); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform:rotate(-45deg) translate(7px,-7px); }

/* --- HERO SECTION - KONSTANT DHE PA HIJE --- */
.hero {
    height: 100vh;
    width: 100%; /* Merr gjithë gjerësinë e mundshme */
    max-width: 100% !important; /* Sigurohet që nuk kufizohet nga container-ët e tjerë */
    margin: 0 !important; /* Heq çdo hapsirë anash */
    padding: 0 !important; /* Heq çdo hapsirë brenda */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    overflow: hidden;
    background: #000; /* Siguron që s'ka sfond hiri */
}

.hero-slider {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 1; /* E mbajmë gjithmonë 1 */
    z-index: 0; /* Rrinë prapa */
    transition: opacity 1.5s ease-in-out;
}

.slide.active {
    z-index: 1; /* Vetëm ajo që ka klasën active del përpara */
    opacity: 1;
}

/* Animacioni që rri në lëvizje konstant */
.ken-burns {
    animation: zoomEffect 15s infinite alternate ease-in-out;
}

@keyframes zoomEffect {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}

.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: transparent; /* E kemi bërë transparent që të mos bëhet hiri */
    z-index: 1;
}

.hero-content {
    z-index: 2;
    position: relative;
    padding: 20px;
    max-width: 900px;
    /* Hije vetëm te teksti që të dallohet mbi foto */
    text-shadow: 0px 4px 15px rgba(0,0,0,0.7);
}

.hero-subtitle {
    display: block;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 0.85rem;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--olive);
    animation: fadeInUp 1s ease forwards;
}

.hero h1 {
    font-size: clamp(3rem, 10vw, 5rem);
    line-height: 1.1;
    margin-bottom: 20px;
    font-weight: 700;
    animation: fadeInUp 1.3s ease forwards;
}

.hero h1 .small-text {
    font-size: 0.5em; /* e zvogëlon relative ndaj Moment */
    font-weight: 500;
    display: block;
    font-family: inherit;
}

/*.hero p {*/
/*    font-size: 1.2rem;*/
/*    letter-spacing: 1px;*/
/*    margin-bottom: 30px;*/
/*    animation: fadeInUp 1.6s ease forwards;*/
/*}*/

/*.buttons {*/
/*    display: flex;*/
/*    gap: 15px;*/
/*    justify-content: center;*/
/*    animation: fadeInUp 1.9s ease forwards;*/
/*}*/

.btn {
    padding: 16px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.4s ease;
    border: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(5px);
    display: inline-block;
}

.btn.primary { background: var(--olive); color: white; border: none; }
.btn.secondary { background: rgba(255, 255, 255, 0.1); color: white; border: 1px solid rgba(255, 255, 255, 0.2); }
.btn:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.menu-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #888;
    margin-bottom: 80px;
}


/* SECTIONS */
/* Ky rregull tani lejon që sfondi të shkojë deri në fund të ekranit */
section { 
    padding: 100px 0; /* Hoqëm 5% dhe max-width nga këtu */
    width: 100%; 
    position: relative;
}
h2 { color: var(--dark-coffee); }
/* --- ABOUT SECTION IMPROVED --- */
#about {
    background-color: #f7f7f7;
    width: 100%;
    padding: 100px 0;
    display: flex;
    justify-content: center;
}

.about-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.about-text {
    flex: 1;
}

.about-text h2 {
    font-family: 'Playfair Display', serif; /* Sigurohemi që po përdor fontin serif */
    font-size: clamp(2.6rem, 5.5vw, 3.8rem); /* Pak më i madh për dominancë */
    line-height: 1.1; /* E afron tekstin që të duket si titull reviste */
    margin-bottom: 25px;
    color: var(--dark-coffee);
    font-weight: 700;
    letter-spacing: -1px; /* I afron shkronjat pak për një pamje më moderne/bold */
    
    /* Një hije shumë e hollë që e bën tekstin të "kërcejë" pak nga sfondi */
    text-shadow: 2px 2px 0px rgba(138, 155, 71, 0.1); 
    
    position: relative;
}

/* Shto një vijë të vogël dekorative nën titull për stil */
.about-text h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    background-color: var(--olive);
    margin-top: 15px;
    border-radius: 2px;
}


/* RREGULLIMI PËR SEKSIONET E TJERA */
/* Meqë hoqëm max-width nga 'section', duhet t'u shtojmë një container edhe seksioneve të tjera nëse duam të rrinë në mes */
#menu, #gallery, #visit {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 5%;
    padding-right: 5%;
}

.menu-grid, .gallery-grid {
    display:grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap:25px; 
    margin:40px 0; 
}
/* --- MENU SECTION IMPROVED --- */
#menu {
    padding: 120px 5% 20px 5%;
    background-color: #fff;
    text-align: center;
}

#menu h2 {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    margin-bottom: 10px;
    color: var(--dark-coffee);
}

#menu::after {
    content: "Selected with care, served with love.";
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #888;
    margin-top: 20px;      
    margin-bottom: 0px;  
    line-height: 1.6;
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    margin: 30px 0 20px 0;
}

.menu-card {
    background: #fff;
    border-radius: 25px;
    overflow: hidden;
    /* Hije shumë e lehtë dhe elegante */
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid #f0f0f0;
    position: relative;
}

.menu-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.1);
    border-color: var(--olive);
}

.menu-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.menu-card:hover img {
    transform: scale(1.08); /* Efekti zoom kur kalon miun */
}

.menu-card h3 {
    font-size: 1.8rem;
    margin: 20px 0 10px 0;
    color: var(--dark-coffee);
}

.menu-card p {
    color: #666;
    font-size: 1rem;
    padding: 0 20px 25px 20px;
    line-height: 1.5;
}

.menu-btn-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 45px; 
    margin-top: 80px;
    margin-bottom: 30px;
}
.menu-btn-container .btn.primary {
    padding: 18px 45px;
    font-size: 1rem;
    letter-spacing: 1px;
    box-shadow: 0 10px 20px rgba(138, 155, 71, 0.3);
}






/* --- GALLERY SECTION --- */
#gallery {
    padding: 20px 5% 100px 5%; /* sipër vetëm 20px */
    background-color: #fff;
    text-align: center;
}

#gallery h2 {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    margin-bottom: 50px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.gallery-grid img {
    width: 100%;
    height: 300px; /* Lartësi fikse për rregullsi */
    object-fit: cover;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.4s ease;
    filter: grayscale(20%); /* Pak stil nostalgjik */
}

.gallery-grid img:hover {
    transform: scale(1.03);
    filter: grayscale(0%);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* --- VISIT SECTION --- */
/* --- VISIT SECTION FULL WIDTH --- */
#visit {
    background-color: #f7f7f7; /* Ngjyra e hirtë e lehtë */

    box-shadow: 0 0 0 100vmax #f7f7f7;
    clip-path: inset(0 -100vmax);
    width: 100%;
    padding: 100px 0; /* Hoqëm padding-un anash që sfondi të dalë deri në fund */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.visit-container {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr; /* Ndajmë hapësirën: Info majtas, Harta djathtas */
    gap: 50px;
    align-items: center;
}

.visit-info {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.visit-item {
    background: white;
    padding: 25px;
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.03);
    border-left: 5px solid var(--olive); /* Një detaj stilistik */
}

.visit-item h3 {
    font-size: 1.1rem;
    color: var(--olive);
    margin-bottom: 5px;
}

.visit-item p {
    font-weight: 600;
    color: var(--dark-coffee);
}

/* Stilimi i Hartës */
.map-container {
    width: 100%;
    height: 400px;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}
#lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); display: none; justify-content: center; align-items: center; z-index: 5000; }
#lightbox-img { max-width: 90%; max-height: 80vh; border-radius: 10px; }

/* --- FOOTER --- */
/* --- FOOTER MODERN DHE ME NGJYRA BRANDI --- */
/* --- FOOTER SOFT OLIVE --- */
/* --- FOOTER MINIMALIST LIGHT --- */
/* --- DARK OLIVE GLASSMORPHISM FOOTER --- */
footer {
    /* Ngjyra Dark Olive e errët dhe e vrenjtur */
    background-color: #2d3319; 
    padding: 100px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    color: #f0f0f0;
}

/* Shtohet një element Glassmorphism në mes të Footer */
footer::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 1100px;
    height: 80%;
    background: rgba(255, 255, 255, 0.03); /* Transparencë shumë e lehtë */
    backdrop-filter: blur(10px); /* Efekti i xhamit të mjegullt */
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 40px;
    z-index: 1;
}

/* Sigurohemi që përmbajtja të dalë mbi efektin Glass */
.footer-content {
    position: relative;
    z-index: 2;
}

footer .footer-logo {
    font-family: 'Playfair Display', serif;
    font-size: 3.2rem;
    color: var(--olive); /* Ngjyra jote origjinale Olive për kontrast */
    margin-bottom: 10px;
    display: block;
    font-weight: 700;
    text-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

footer p {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: #aeb495; /* Një e gjelbër e hapur/hirtë për tekstin */
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 500;
}

.social-links {
    margin: 40px 0;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.social-links a {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
    backdrop-filter: blur(5px);
}

.social-links a:hover {
    background: var(--olive);
    border-color: var(--olive);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.copyright {
    margin-top: 50px;
    font-size: 0.75rem !important;
    opacity: 0.4;
    letter-spacing: 1px;
}
.floating-btn{ position:fixed; bottom:25px; right:25px; background:var(--olive); color:white; width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:26px; text-decoration: none; z-index: 500; }

@media(max-width:768px){
    nav { padding: 10px 20px; }
   /* --- PËRDITËSIMI I HAMBURGER MENU (MOBILE) --- */
    .hamburger { 
        display: flex !important; /* Sigurohemi që shfaqet */
        position: relative;
        z-index: 3005; 
        
        /* EFEKTI GLASSMORPHISM - Transparencë + Blur që të shihet fotoja prapa */
        background: rgba(255, 255, 255, 0.1); 
        backdrop-filter: blur(10px); 
        -webkit-backdrop-filter: blur(10px);
        
        padding: 8px; /* Hapësira brenda kutisë */
        border-radius: 8px; /* E bëjmë pak rrumbullake */
        border: 1px solid rgba(255, 255, 255, 0.2); /* Një kontur i lehtë */
        
        width: 40px; /* Gjerësia e kutisë */
        height: 40px; /* Lartësia e kutisë */
    }

    /* Stilimi i tri vijave brenda hamburgerit */
    .hamburger span { 
        background: black !important; /* E bëjmë ngjyrën e vijave të zezë ose var(--olive) që të dallohen */
        height: 3px;
        width: 100%;
        margin: 2px 0; /* Hapësira mes vijave */
        display: block;
        transition: 0.3s;
    }

    /* Opsionale: Nëse dëshiron që kur të bëhet scroll, hamburgeri të marrë ngjyrën olive */
    header.scrolled .hamburger span {
        background: var(--olive) !important;
    }
    .menu-grid, .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .menu-card img, .gallery-grid img { height: 150px; }
    .menu-card h3 { font-size: 15px; padding: 10px 5px; }
    .menu-card p { display: none; }

.nav-links {
        position: fixed; 
        top: 0; 
        right: -100%; 
        width: 80%; 
        height: 100vh;
        /* Ndryshuar nga 0.98 në 0.8 që të jetë më transparent dhe i lehtë */
        background: rgba(17, 17, 17, 0.8); 
        backdrop-filter: blur(20px); 
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column; 
        justify-content: center; 
        align-items: center;
        gap: 35px; 
        transition: 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
        z-index: 3000;
        visibility: visible;
        opacity: 1;
    }
    body.dark .nav-links { background: rgba(17, 17, 17, 0.98); }
    .nav-links.active { right: 0; }
   .nav-links a { 
        font-size: 24px; 
        font-weight: 700; 
        color: white !important; 
    }

    .hero h1{ font-size: 2.8rem; }
    .buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}
    .btn { width: 100%; max-width: 250px; text-align: center; }
}

@media (max-width: 768px) {
    #about {
        padding: 80px 0;
    }
    .about-container {
        flex-direction: column;
        text-align: center;
        gap: 60px;
    }
    .about-text h2 { font-size: 2.2rem;
        letter-spacing: 0; }
    .about-image img {
        width: 85%;
        /* box-shadow: 15px 15px 0px var(--olive); */
    }
}

@media (max-width: 768px) {
    .visit-container {
        grid-template-columns: 1fr; /* Dalin njëra nën tjetrën */
        text-align: center;
    }
    .visit-item {
        border-left: none;
        border-top: 5px solid var(--olive);
    }
    .map-container {
        height: 300px;
    }
}


#about {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}



@media (max-width: 768px) {

    #about {
        width: 100%;
        margin-left: 0;
        padding: 80px 20px; /* KJO është kryesore për hapsirë anash */
    }

    .about-container {
        padding: 0 15px;
    }

    .about-text {
        padding: 0 10px;
    }

    .about-text h2 {
        font-size: 2rem;
        text-align: center;
    }

}
/*.menu-btn-container {*/
/*    margin-top: 40px;*/
/*    text-align: center;*/
/*}*/

/*.menu-btn-container .btn {*/
/*    display: inline-block;*/
/*}*/

/*.menu-subtitle {*/
/*    display: block;*/
/*    margin-top: 20px;*/
/*    font-size: 1rem;*/
/*    color: #888;*/
/*    font-family: 'Inter', sans-serif;*/
/*    letter-spacing: 0.5px;*/
/*    line-height: 1.6;*/
/*}*/