/* ===========================================================
   Faqja publike — Granit Studio
   Paleta: shkrep i erret, pluhur guri, tunxh
   =========================================================== */

:root{
  --nate:#1E2226;
  --nate-2:#272C31;
  --gur:#6F7479;
  --pluhur:#E7E6E1;
  --leter:#F8F8F6;
  --tunxh:#A47C3C;
  --tunxh-nd:#C79B55;
  --vije:rgba(30,34,38,.14);
  --r:2px;
  --maks:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--leter);
  color:var(--nate);
  font-family:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.mark{
  font-family:Archivo,"Arial Narrow",Helvetica,sans-serif;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.06;
  margin:0 0 .5em;
}
h1{font-size:clamp(2.6rem,6.4vw,4.6rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3{font-size:1.15rem;letter-spacing:-.01em}
p{margin:0 0 1em;max-width:66ch}
a{color:inherit}
img{max-width:100%;display:block}

.wrap{max-width:var(--maks);margin:0 auto;padding:0 24px}

/* ---------- Koka ---------- */
.krye{
  position:sticky;top:0;z-index:40;
  background:rgba(30,34,38,.94);
  backdrop-filter:saturate(140%) blur(6px);
  color:var(--pluhur);
  border-bottom:1px solid rgba(231,230,225,.14);
}
.krye .wrap{display:flex;align-items:center;gap:28px;height:68px}
.logo{display:flex;align-items:baseline;gap:10px;text-decoration:none;font-family:Archivo,sans-serif;font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
.logo span{font-weight:400;font-size:.8rem;color:var(--gur);letter-spacing:.02em}
.menu{margin-left:auto;display:flex;align-items:center;gap:26px}
.menu a{text-decoration:none;font-size:.95rem;color:rgba(231,230,225,.82)}
.menu a:hover{color:#fff}
.btn-hyr{
  border:1px solid var(--tunxh);color:var(--tunxh-nd);
  padding:8px 18px;border-radius:var(--r);font-weight:600;
}
.btn-hyr:hover{background:var(--tunxh);color:#12161a}
.menu-toggle{display:none;background:none;border:0;color:inherit;font-size:1.4rem;cursor:pointer}

/* ---------- Hero ---------- */
.hero{background:var(--nate);color:var(--pluhur);padding:92px 0 0;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,760px);gap:56px}
.hero h1{color:#fff}
.hero .lead{color:rgba(231,230,225,.72);font-size:1.12rem;max-width:46ch}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0 86px}
.btn{
  display:inline-block;padding:13px 26px;border-radius:var(--r);
  text-decoration:none;font-weight:600;font-size:.98rem;border:1px solid transparent;
  transition:background .15s ease,color .15s ease;
}
.btn-primar{background:var(--tunxh);color:#14181c}
.btn-primar:hover{background:var(--tunxh-nd)}
.btn-vije{border-color:rgba(231,230,225,.35);color:var(--pluhur)}
.btn-vije:hover{border-color:var(--pluhur)}

.shirit{
  border-top:1px solid rgba(231,230,225,.14);
  background:var(--nate-2);color:rgba(231,230,225,.75);
}
.shirit .wrap{display:flex;flex-wrap:wrap;gap:38px;padding-top:18px;padding-bottom:18px;font-size:.9rem}
.shirit strong{color:var(--tunxh-nd);font-weight:600}

/* ---------- Seksione ---------- */
section{padding:76px 0}
.tit{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px;border-bottom:1px solid var(--vije);padding-bottom:16px}
.tit p{margin:0;color:#5b6166;font-size:.98rem}

/* ---------- Filtri i kategorive ---------- */
.filtra{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.filtra a{
  text-decoration:none;font-size:.9rem;padding:7px 15px;border:1px solid var(--vije);
  border-radius:100px;color:#4a5055;background:#fff;
}
.filtra a.akt{background:var(--nate);color:var(--pluhur);border-color:var(--nate)}

/* ---------- Katalogu ---------- */
.rrjet{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:22px}
.karte{background:#fff;border:1px solid var(--vije);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.karte .foto{aspect-ratio:4/3;background:#e9e7e2 center/cover no-repeat;position:relative}
.karte .foto .njesi{
  position:absolute;right:0;bottom:0;background:var(--nate);color:var(--pluhur);
  font-size:.75rem;padding:4px 10px
}
.karte .trup{padding:16px 18px 20px;display:flex;flex-direction:column;flex:1}
.karte h3{margin-bottom:4px}
.karte .gur{font-size:.85rem;color:var(--tunxh);margin-bottom:8px}
.karte p{font-size:.92rem;color:#5b6166;margin-bottom:14px}
.karte .fund{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-top:1px solid var(--vije);padding-top:12px}
.cmimi{font-family:Archivo,sans-serif;font-weight:700;font-size:1.25rem}
.cmimi small{font-weight:400;font-size:.78rem;color:#6f7479}
.lidhje{font-size:.88rem;color:var(--tunxh);text-decoration:none;border-bottom:1px solid currentColor}

/* ---------- Procesi ---------- */
.hapat{counter-reset:h;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px}
.hap{counter-increment:h;border-top:2px solid var(--nate);padding-top:14px}
.hap::before{content:counter(h,decimal-leading-zero);font-family:Archivo,sans-serif;font-weight:800;font-size:.95rem;color:var(--tunxh)}
.hap h3{margin:6px 0 6px}
.hap p{font-size:.93rem;color:#5b6166}

/* ---------- Galeria ---------- */
.galeri{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.galeri figure{margin:0;position:relative;aspect-ratio:1/1;background:#e2e0da;border-radius:var(--r);overflow:hidden}
.galeri a.zmadho{display:block;width:100%;height:100%;cursor:zoom-in}
.galeri img{width:100%;height:100%;object-fit:cover}
.galeri figcaption{position:absolute;inset:auto 0 0 0;background:linear-gradient(transparent,rgba(20,24,28,.86));color:#fff;padding:26px 12px 10px;font-size:.85rem}

/* ---------- Fotoja e zmadhuar ---------- */
#drita{
  display:none;position:fixed;inset:0;z-index:60;background:rgba(20,24,28,.94);
  padding:20px;text-align:center;overflow:auto;
}
#drita.hap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
#drita img{max-width:min(1100px,94vw);max-height:82vh;width:auto;border-radius:var(--r)}
#drita p{color:rgba(231,230,225,.8);font-size:.92rem;margin:0;max-width:60ch}
#mbyll{
  position:fixed;top:14px;right:16px;background:none;border:0;color:var(--pluhur);
  font-size:2.4rem;line-height:1;cursor:pointer;padding:6px 12px;
}

/* ---------- Kontakt ---------- */
.kontakt{background:var(--nate);color:var(--pluhur)}
.kontakt .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.kontakt h2{color:#fff}
.kontakt p{color:rgba(231,230,225,.72)}
.info{list-style:none;padding:0;margin:26px 0 0}
.info li{padding:12px 0;border-bottom:1px solid rgba(231,230,225,.14);display:flex;gap:14px;font-size:.95rem}
.info span{color:var(--gur);min-width:92px}
form.kerkese{background:var(--nate-2);padding:26px;border-radius:var(--r)}
label{display:block;font-size:.82rem;color:rgba(231,230,225,.7);margin:0 0 5px}
.fusha{margin-bottom:14px}
input,select,textarea{
  width:100%;padding:11px 13px;border-radius:var(--r);
  border:1px solid rgba(231,230,225,.2);background:#1b1f23;color:var(--pluhur);
  font:inherit;font-size:.95rem;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--tunxh);outline-offset:1px;border-color:transparent}
textarea{min-height:104px;resize:vertical}
button.btn{cursor:pointer;font:inherit;font-weight:600}

.njoftim{padding:12px 16px;border-radius:var(--r);margin-bottom:18px;font-size:.93rem}
.njoftim.ok{background:#20402f;color:#bfe7cd}
.njoftim.gab{background:#43221f;color:#f3c5bf}

/* ---------- Fundi ---------- */
footer{background:#171b1e;color:rgba(231,230,225,.6);font-size:.88rem;padding:30px 0}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between}
footer a{color:rgba(231,230,225,.8)}

/* ---------- Mobil ---------- */
@media (max-width:900px){
  .hero{padding-top:56px}
  .hero .wrap,.kontakt .wrap{grid-template-columns:1fr;gap:34px}
  .hero-cta{margin-bottom:54px}
  .menu{display:none;position:absolute;top:68px;left:0;right:0;background:var(--nate);flex-direction:column;align-items:stretch;gap:0;padding:10px 24px 20px}
  .menu.hap{display:flex}
  .menu a{padding:12px 0;border-bottom:1px solid rgba(231,230,225,.1)}
  .btn-hyr{text-align:center;margin-top:12px;border-bottom:0}
  .menu-toggle{display:block;margin-left:auto}
  section{padding:52px 0}
}

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