/* ============================================================
   ZANA PEARLS — Fleta kryesore e stileve (Design System)
   ============================================================ */

/* ---------- FONTI KapraNeue ----------
   KapraNeue është një font komercial (TypoForge Studio). Vendosi
   skedarët e licencuar (.woff2 / .woff) në /assets/fonts/ me këto
   emra dhe do të aktivizohet automatikisht. Derisa të shtohen,
   faqja bie mbrapa (fallback) te një font modern falas (Poppins)
   që ka pamje shumë të ngjashme, në mënyrë që faqja të mos prishet.
*/
@font-face {
    font-family: 'KapraNeue';
    src: url('../fonts/KapraNeue-Regular.woff2') format('woff2'),
         url('../fonts/KapraNeue-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'KapraNeue';
    src: url('../fonts/KapraNeue-Medium.woff2') format('woff2'),
         url('../fonts/KapraNeue-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'KapraNeue';
    src: url('../fonts/KapraNeue-SemiBold.woff2') format('woff2'),
         url('../fonts/KapraNeue-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'KapraNeue';
    src: url('../fonts/KapraNeue-Bold.woff2') format('woff2'),
         url('../fonts/KapraNeue-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --smerald: #153c37;
    --smerald-2: #0f2c28;
    --gold: #c5a880;
    --gold-light: #e4d3b4;
    --dark: #0b1e1b;
    --light: #f4f6f5;
    --danger: #e0685f;
    --success: #10b981;
    --font-main: 'KapraNeue', 'Poppins', 'Segoe UI', Arial, sans-serif;
    --radius: 8px;
    --shadow-soft: 0 10px 30px rgba(0,0,0,0.25);
    --transition: 0.3s cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
    background: var(--dark);
    color: #fff;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0.2px;
}

a { font-family: inherit; }
h1, h2, h3, h4, p, ul { font-family: inherit; }

img, video { max-width: 100%; }

::selection { background: var(--gold); color: var(--smerald); }

/* ============================================================
   NAVIGIMI — Stil Mejuri: transparent mbi sllajder, logo në mes,
   ikonë menuje djathtas, panel anësor (off-canvas) me linqet.
   ============================================================ */
.site-header { position: absolute; top: 0; left: 0; width: 100%; z-index: 1000; }
.site-header.is-solid { position: fixed; background: var(--smerald); box-shadow: 0 2px 15px rgba(0,0,0,0.35); border-bottom: 1px solid rgba(197,168,128,0.25); }
.site-header.no-hero { position: relative; background: var(--smerald); border-bottom: 1px solid rgba(197,168,128,0.25); }

nav.topnav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 18px 24px;
    max-width: 1400px;
    margin: 0 auto;
    transition: padding var(--transition);
}
.site-header.is-solid nav.topnav, .site-header.no-hero nav.topnav { padding: 12px 24px; }

.nav-left, .nav-right { display: flex; align-items: center; gap: 18px; }
.nav-left { justify-self: start; }
.nav-right { justify-self: end; }

.logo-container { justify-self: center; display: flex; align-items: center; text-decoration: none; }
.logo-container img { height: 108px; width: auto; display: block; filter: drop-shadow(0 2px 10px rgba(0,0,0,0.45)); transition: height var(--transition); }
.site-header.is-solid .logo-container img, .site-header.no-hero .logo-container img { height: 64px; }

.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    position: relative;
    text-decoration: none;
}
.icon-btn svg { width: 22px; height: 22px; stroke: currentColor; }
.icon-btn .cart-count {
    position: absolute; top: -4px; right: -6px;
    background: var(--gold); color: var(--smerald);
    font-size: 10px; font-weight: 700;
    width: 17px; height: 17px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: sans-serif;
}
.nav-account-name { font-size: 13px; color: var(--gold-light); font-weight: 500; display: none; }
@media (min-width: 640px) { .nav-account-name { display: inline; } }

/* Ikona e menusë (hamburger) */
.menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 30px; height: 22px; padding: 0; }
.menu-toggle span { display: block; width: 100%; height: 2px; flex-shrink: 0; background: currentColor; border-radius: 2px; transition: var(--transition); }
.menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Paneli anësor i menusë (off-canvas), i njëjtë në çdo pajisje ---------- */
.nav-overlay {
    position: fixed; inset: 0; background: rgba(6,15,13,0.6);
    opacity: 0; pointer-events: none; transition: opacity var(--transition);
    z-index: 1400;
}
.nav-overlay.show { opacity: 1; pointer-events: auto; }

.nav-drawer {
    position: fixed; top: 0; right: 0; height: 100%;
    width: min(380px, 88vw);
    background: var(--smerald);
    border-left: 1px solid var(--gold);
    z-index: 1500;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(.4,0,.2,1);
    display: flex; flex-direction: column;
    padding: 30px 0;
    box-shadow: -10px 0 40px rgba(0,0,0,0.4);
}
.nav-drawer.show { transform: translateX(0); }
.nav-drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 0 28px 20px 28px; border-bottom: 1px solid rgba(197,168,128,0.2); }
.nav-drawer-head img { height: 52px; }
.nav-drawer-close { background: none; border: none; color: var(--gold); font-size: 26px; cursor: pointer; line-height: 1; padding: 4px; }
.nav-lang-switch { display: flex; gap: 6px; padding: 16px 28px 0 28px; }
.nav-lang-switch a {
    flex: 1; text-align: center; padding: 7px 0; font-size: 12.5px; font-weight: 700;
    letter-spacing: 0.5px; text-decoration: none; color: var(--gold-light);
    border: 1px solid rgba(197,168,128,0.4); border-radius: 20px; transition: var(--transition);
}
.nav-lang-switch a.active { background: var(--gold); color: var(--smerald); border-color: var(--gold); }
.nav-lang-switch a:hover:not(.active) { border-color: var(--gold); color: #fff; }
.nav-links { display: flex; flex-direction: column; padding: 10px 0; overflow-y: auto; }
.nav-links a {
    color: #fff; text-decoration: none; font-size: 17px; font-weight: 500;
    padding: 16px 28px; border-bottom: 1px solid rgba(197,168,128,0.08);
    letter-spacing: 0.5px; transition: var(--transition);
    display: flex; align-items: center; justify-content: space-between;
}
.nav-links a:hover, .nav-links a:focus { background: rgba(197,168,128,0.1); color: var(--gold); padding-left: 34px; }
.nav-drawer-foot { margin-top: auto; padding: 20px 28px 0 28px; border-top: 1px solid rgba(197,168,128,0.2); }
.nav-drawer-foot a { color: var(--gold-light); text-decoration: none; font-size: 14px; display: block; margin-bottom: 10px; }
.nav-drawer-foot a:hover { color: #fff; }

/* ============================================================
   SLLAJDERI (Hero) — foto + video, logo & menu sipër tij
   ============================================================ */
.hero-container { width: 100%; position: relative; overflow: hidden; background: #000; }
.hero-slider { height: 620px; width: 100%; position: relative; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease-in-out; background-size: cover; background-position: center; }
.slide.active { opacity: 1; z-index: 2; }
.slide video, .slide .slide-media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,30,27,0.55) 0%, rgba(11,30,27,0.15) 35%, rgba(11,30,27,0.55) 100%); z-index: 1; }

.slider-content { position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); z-index: 10; text-align: center; width: 90%; max-width: 800px; }
.slider-content h2 { font-size: 34px; color: #fff; margin: 0 0 12px 0; text-transform: uppercase; letter-spacing: 3px; text-shadow: 0 2px 10px rgba(0,0,0,0.7); font-weight: 600; }
.slider-content p { font-size: 16px; color: var(--gold-light); margin: 0; text-shadow: 0 2px 5px rgba(0,0,0,0.7); }
.slider-content.is-empty { display: none; }

.hero-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 11; display: flex; gap: 8px; }
.hero-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.4); cursor: pointer; transition: var(--transition); }
.hero-dots span.active { background: var(--gold); width: 24px; border-radius: 4px; }

.no-hero .hero-container { display: none; }
.page-banner { background: var(--smerald); padding: 130px 20px 50px 20px; text-align: center; border-bottom: 1px solid rgba(197,168,128,0.2); }
.page-banner h1 { color: var(--gold); font-size: 30px; text-transform: uppercase; letter-spacing: 2px; margin: 0; font-weight: 600; }

/* Përmbajtja e faqeve */
.section-container { max-width: 1150px; margin: 40px auto; padding: 0 20px; }
h2.title { text-align: center; font-size: 30px; color: var(--gold); margin-bottom: 40px; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; }

/* ---------- Butona & Forma (shared) ---------- */
.btn { display: inline-block; background: var(--gold); color: var(--smerald); padding: 13px 28px; text-decoration: none; font-weight: 700; border-radius: 4px; text-transform: uppercase; font-size: 13px; letter-spacing: 0.5px; border: 1px solid var(--gold); cursor: pointer; transition: var(--transition); font-family: var(--font-main); }
.btn:hover { background: transparent; color: var(--gold); }
.btn-outline { background: transparent; color: var(--gold); }
.btn-outline:hover { background: var(--gold); color: var(--smerald); }
.btn-block { display: block; width: 100%; text-align: center; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: transparent; color: var(--danger); }

.form-box { background: var(--smerald); border: 1px solid rgba(197,168,128,0.3); border-radius: var(--radius); padding: 35px; max-width: 460px; margin: 0 auto; }
.form-box h2 { color: var(--gold); text-align: center; margin-top: 0; text-transform: uppercase; letter-spacing: 1px; font-size: 24px; }
.form-box label { display: block; font-size: 13px; color: var(--gold-light); margin: 14px 0 6px 0; font-weight: 600; }
.form-box input, .form-box textarea, .form-box select,
.contact-form input, .contact-form textarea {
    width: 100%; padding: 12px 14px; background: var(--smerald-2);
    border: 1px solid rgba(197,168,128,0.5); color: #fff; border-radius: 4px;
    font-family: 'Segoe UI', sans-serif; font-size: 14.5px;
}
.form-box input:focus, .form-box textarea:focus, .form-box select:focus { outline: none; border-color: var(--gold); }
.form-note { text-align: center; font-size: 13.5px; color: #cbd5e1; margin-top: 18px; }
.form-note a { color: var(--gold); font-weight: 600; text-decoration: none; }
.form-note a:hover { text-decoration: underline; }

.alert { padding: 14px 18px; border-radius: 4px; font-weight: 600; font-size: 14px; margin-bottom: 20px; font-family: 'Segoe UI', sans-serif; }
.alert-success { background: rgba(16,185,129,0.15); border-left: 4px solid var(--success); color: #a7f3d0; }
.alert-error { background: rgba(224,104,95,0.15); border-left: 4px solid var(--danger); color: #fecaca; }

/* Responsive për Telefon */
@media (max-width: 768px) {
    nav.topnav { padding: 14px 16px; }
    .logo-container img { height: 76px; }
    .site-header.is-solid .logo-container img, .site-header.no-hero .logo-container img { height: 48px; }
    .nav-account-name { display: none; }

    .hero-slider { height: 430px; }
    .slider-content { bottom: 40px; }
    .slider-content h2 { font-size: 22px; letter-spacing: 1.5px; }
    .slider-content p { font-size: 13px; }
    .page-banner { padding: 105px 20px 35px 20px; }
    .page-banner h1 { font-size: 22px; }
}