/* =========================================================
   Zyra e Avokatisë Molla — stilet kryesore
   Ngjyrat dhe shkrimet ndryshohen këtu poshtë, te :root
   ========================================================= */

:root {
  /* Ngjyrat e zyrës: ndryshohen vetëm këtu */
  --navy: #14283F;        /* menyja, logoja dhe titujt */
  --e-bardhe: #FFFFFF;    /* sfondi kryesor */
  --gri: #F4F6F8;         /* seksionet dhe kartat e shërbimeve */
  --ari: #B69A67;         /* vetëm detaje të vogla */
  --blu: #1769A4;         /* butonat e telefonatave dhe konsultave */
  --blu-hover: #125A8E;
  --tekst: #3D4A5A;       /* teksti i zakonshëm */
  --tekst-zbehte: #5B6878; /* teksti dytësor */
  --vija: #DDE3EA;        /* vijat ndarëse */

  /* Emrat e vjetër, që përdoren ende nëpër faqe */
  --paper: var(--e-bardhe);
  --surface: var(--e-bardhe);
  --ink: var(--navy);
  --muted: var(--tekst-zbehte);
  --rule: var(--vija);
  --stamp: var(--navy);
  --stamp-soft: var(--gri);
  --on-stamp: #FFFFFF;

  /* Shkrimet */
  --font-display: "Spectral", Georgia, "Times New Roman", serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Bazat ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--blu);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding-inline: 16px;
}
@media (min-width: 720px) {
  .wrap { padding-inline: 32px; }
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }

.eyebrow {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ari);
}

/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid var(--rule); }
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 40px;
  padding-block: 22px;
}
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand svg { width: 54px; height: 54px; color: var(--stamp); flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-small {
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.8rem;
  letter-spacing: .18em;
}
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 34px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  text-decoration: none;
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--muted);
}
.site-nav a:hover { color: var(--blu); }

/* ---------- Hero ---------- */
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  padding-block: 56px 56px;
}
.hero-copy { min-width: 0; }
.hero h1 {
  font-size: clamp(2.6rem, 4.4vw, 5.2rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.005em;
  margin-top: 18px;
}
.hero h1 .h1-line { display: block; }
.hero h1 .h1-name {
  display: block;
  font-size: 1.6em;            /* "MOLLA" shumë më e madhe, si në tabelë */
  font-weight: 600;
  line-height: .95;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--stamp);
}
@media (min-width: 641px) {
  .hero h1 .h1-line { white-space: nowrap; }
}
.lead {
  font-size: clamp(1.1rem, 1.35vw, 1.4rem);
  color: var(--muted);
  max-width: 44ch;
  margin-top: 24px;
}
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 6px;
  border: 1.5px solid var(--stamp);
  font-weight: 600;
  font-size: .98rem;
  text-decoration: none;
}
.btn-primary { background: var(--stamp); color: var(--on-stamp); }
.btn-secondary { color: var(--stamp); background: transparent; }
.btn-secondary:hover { background: var(--stamp-soft); }
@media (max-width: 640px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 8px; padding-block: 40px 36px; }
}

/* ---------- Koka (e bardhë, me menynë navy) dhe hyrja mbi foton ---------- */
.sign {
  --sign-bg: var(--navy);
  --sign-ink: #FFFFFF;
  --sign-ink-soft: #D5DEE8;
}
.site-header.sign {
  position: relative;
  background: var(--e-bardhe);
  color: var(--navy);
  border-bottom: 1px solid var(--vija);
}
.site-header.sign .brand svg { color: var(--navy); }
.site-header.sign .brand-small { color: var(--tekst-zbehte); }
.site-header.sign .brand-name { color: var(--navy); }
.site-header.sign .site-nav a { color: var(--navy); }
.site-header.sign .site-nav a:hover { color: var(--blu); }
.hero.sign { color: #FFFFFF; }
.hero.sign :focus-visible { outline-color: #FFFFFF; }
.hero.sign .eyebrow {
  color: var(--ari);
  font-size: clamp(.92rem, 1.1vw, 1.15rem);
  letter-spacing: .16em;
}
.hero.sign h1 { color: #FFFFFF; }
.hero.sign h1 .h1-name { color: #FFFFFF; }
.hero.sign .lead { color: var(--sign-ink-soft); }

/* Rreshti i besimit në hyrje: "Mbi 30 vite përvojë · Ish-gjyqtar" */
.hero-besim {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  font-size: clamp(1.02rem, 1.2vw, 1.2rem);
  font-weight: 600;
  letter-spacing: .01em;
  color: #FFFFFF;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}
.hero-besim li { display: flex; align-items: center; gap: 10px; }
.hero-besim li::before {      /* rrethi i artë me shenjën ✓ */
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B69A67' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M8 12.4l2.8 2.8L16.2 9.8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hero.sign .btn {
  min-height: 56px;
  padding: 0 30px;
  font-size: 1.08rem;
  transition: background-color .2s ease, border-color .2s ease;
}
.hero.sign .btn-primary { background: var(--blu); border-color: var(--blu); color: #FFFFFF; }
.hero.sign .btn-primary:hover { background: var(--blu-hover); border-color: var(--blu-hover); }
.hero.sign .btn-secondary { color: #FFFFFF; border-color: rgba(255, 255, 255, .75); }
.hero.sign .btn-secondary:hover { background: rgba(255, 255, 255, .1); border-color: #FFFFFF; }

/* ---------- Kreu me foton e gjykatës (menyja + hyrja) ---------- */
.krye {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy);    /* ngjyra derisa të ngarkohet fotoja */
}
.krye-foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 30%;
}
/* Hija navy mbi foto, që shkrimet e bardha të lexohen qartë */
.krye::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(20, 40, 63, .94) 0%, rgba(20, 40, 63, .85) 36%, rgba(20, 40, 63, .55) 66%, rgba(20, 40, 63, .35) 100%),
    linear-gradient(0deg, rgba(12, 24, 38, .55) 0%, rgba(12, 24, 38, 0) 30%);
}
.krye .hero.sign { background: transparent; }
.krye .hero .wrap {
  min-height: clamp(440px, 70vh, 760px);
  padding-block: 64px 88px;
}
.krye .hero .lead { text-shadow: 0 1px 14px rgba(0, 0, 0, .5); }
@media (max-width: 640px) {
  .krye-foto { object-position: 56% 30%; }
  .krye::before {
    background: linear-gradient(180deg, rgba(20, 40, 63, .9) 0%, rgba(20, 40, 63, .72) 45%, rgba(20, 40, 63, .85) 100%);
  }
  .krye .hero .wrap { min-height: 0; padding-block: 44px 56px; }
}

/* ---------- Menyja në telefon: butoni ☰ dhe koka që qëndron lart ---------- */
.menu-btn { display: none; }
@media (max-width: 800px) {
  html { scroll-padding-top: 78px; }   /* titujt nuk fshihen nën menynë */
  .krye { z-index: 30; padding-top: 67px; }
  .site-header.sign {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    box-shadow: 0 6px 18px -12px rgba(20, 40, 63, .35);
  }
  .site-header .wrap { flex-wrap: nowrap; gap: 16px; padding-block: 10px; }
  .brand { gap: 10px; }
  .brand svg { width: 44px; height: 44px; }
  .brand-small { font-size: .72rem; }
  .brand-name { font-size: 1.4rem; }
  .menu-btn {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    flex: none;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--vija);
    border-radius: 10px;
    background: #FFFFFF;
    color: var(--navy);
    cursor: pointer;
  }
  .menu-btn span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .25s ease, opacity .2s ease;
  }
  .menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #FFFFFF;
    border-top: 1px solid var(--vija);
    border-bottom: 1px solid var(--vija);
    box-shadow: 0 18px 30px -18px rgba(20, 40, 63, .45);
  }
  .menu-btn[aria-expanded="true"] + .site-nav { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; padding: 4px 16px 10px; }
  .site-nav li + li { border-top: 1px solid var(--vija); }
  .site-header.sign .site-nav a { display: block; padding: 14px 4px; font-size: 1.12rem; }
}

/* Vula dhe çekiçi (3D; versioni 2D shfaqet vetëm nëse 3D nuk mbështetet) */
.hero-3d {
  position: relative;
  width: clamp(300px, 34vw, 540px);
  max-width: 100%;
  aspect-ratio: 1 / 1;
  cursor: pointer;
}
.hero-3d canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 12px;
  opacity: 0;
  transition: opacity .6s ease;
}
.hero-3d.is-3d canvas { opacity: 1; }
.hero-3d.is-3d .hero-art { display: none; }
@media (max-width: 640px) {
  .hero-3d { width: min(380px, 92vw); justify-self: center; }
}
.hero-art {
  --t0: .9s;                 /* kur fillon çekiçi pas daljes së tekstit */
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--ari);
  filter: drop-shadow(0 0 10px rgba(182, 154, 103, .35));
}
.hero-art.replay { --t0: .05s; }
.stamp-ink {
  opacity: .2;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.gavel {
  transform-box: fill-box;
  transform-origin: 96.4% 50%;  /* boshti i rrotullimit: fundi i dorezës */
  transform: rotate(16deg);
}
.gavel-head, .gavel-cap, .gavel-handle, .gavel-collar { fill: currentColor; }
.gavel-band { fill: var(--sign-bg); }
.shock {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.burst-lines {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.burst-lines path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
}

/* Animacioni: teksti del, çekiçi ngrihet dhe godet, vula ndizet */
.hero.sign .hero-copy > * { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.hero.sign .hero-copy > :nth-child(2) { animation-delay: .1s; }
.hero.sign .hero-copy > :nth-child(3) { animation-delay: .2s; }
.hero.sign .hero-copy > :nth-child(4) { animation-delay: .3s; }
.hero.sign .hero-copy > :nth-child(5) { animation-delay: .4s; }
.hero-art.play .gavel { animation: gavel-strike 1.5s var(--t0) both; }
.hero-art.play .stamp-ink {
  animation:
    ink-on .35s calc(var(--t0) + .93s) both,
    stamp-hit .45s calc(var(--t0) + .93s) both;
}
.hero-art.play .shock { animation: shock .8s calc(var(--t0) + .93s) ease-out both; }
.hero-art.play .burst-lines { animation: burst .5s calc(var(--t0) + .93s) ease-out both; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes gavel-strike {
  0%   { opacity: 0; transform: rotate(40deg); }
  20%  { opacity: 1; transform: rotate(40deg); }
  45%  { transform: rotate(46deg); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  62%  { transform: rotate(-2deg); animation-timing-function: ease-out; }
  70%  { transform: rotate(10deg); animation-timing-function: ease-in; }
  80%  { transform: rotate(0deg); animation-timing-function: ease-out; }
  100% { opacity: 1; transform: rotate(16deg); }
}
@keyframes ink-on {
  from { opacity: .2; }
  to   { opacity: 1; }
}
@keyframes stamp-hit {
  0%   { transform: scale(1); }
  25%  { transform: scale(.94); }
  65%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}
@keyframes shock {
  0%   { opacity: 0; transform: scale(.97); }
  1%   { opacity: .9; transform: scale(.97); }
  100% { opacity: 0; transform: scale(1.45); }
}
@keyframes burst {
  0%   { opacity: 0; transform: scale(.4); }
  1%   { opacity: 1; transform: scale(.4); }
  60%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
  .hero.sign .hero-copy > *,
  .hero-art.play .gavel,
  .hero-art.play .stamp-ink,
  .hero-art.play .shock,
  .hero-art.play .burst-lines { animation: none; }
  .stamp-ink { opacity: 1; }
}

/* ---------- Seksionet ---------- */
.section { padding-block: 72px; }
.section-head {
  display: grid;
  gap: 10px;
  margin-bottom: 36px;
  max-width: 62ch;
}
.section-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 500; }
.section-head p { color: var(--muted); }

/* ---------- Fushat e praktikës ---------- */
/* Ngjyrat e seksionit: ndryshoni vetëm këto vlera për ta rinovuar */
.fushat {
  --f-bg: var(--e-bardhe);    /* sfondi i seksionit */
  --f-card: var(--gri);       /* sfondi i kartave */
  --f-line: #E3E8EE;          /* vija e kartave */
  --f-title: var(--navy);     /* titujt */
  --f-text: var(--tekst-zbehte); /* teksti i vogël */
  --f-accent: var(--navy);    /* ikonat dhe linqet */
  --f-num: rgba(182, 154, 103, .6);
  --f-hover-bg: var(--navy);  /* karta kur kalon miun mbi të */
  --f-hover-title: #FFFFFF;
  --f-hover-text: #C9D4E0;
  --f-hover-accent: var(--ari);
  background: var(--f-bg);
  color: var(--f-title);
}
.fushat .section-head { max-width: 70ch; margin-bottom: 44px; }
.fushat .eyebrow {
  color: var(--ari);
  font-size: clamp(.9rem, 1vw, 1.05rem);
  letter-spacing: .16em;
}
.fushat .section-head h2 {
  color: var(--f-title);
  font-size: clamp(2rem, 3.8vw, 3.4rem);
}
.fushat .section-head p:not(.eyebrow) { color: var(--f-text); font-size: 1.1rem; }

.areas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.area {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 28px 28px 26px;
  background: var(--f-card);
  border: 1px solid var(--f-line);
  border-radius: 12px;
  transition: transform .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.area h3, .area-items, .area-icon, .area-link { transition: color .25s ease, stroke .25s ease; }
.area-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 6px;
}
.area-icon {
  width: 46px;
  height: 46px;
  fill: none;
  stroke: var(--f-accent);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.area-num {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1;
  color: var(--f-num);
  font-variant-numeric: lining-nums tabular-nums;
}
.area h3 { font-size: 1.45rem; color: var(--f-title); }
.area-items { color: var(--f-text); font-size: 1rem; }
.area-link {
  margin-top: auto;
  padding-top: 10px;
  font-weight: 600;
  font-size: 1rem;
  color: var(--f-accent);
  text-decoration: none;
}
.area-link::after {           /* e gjithë karta bëhet e klikueshme */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.area:hover .area-link { text-decoration: underline; text-underline-offset: 4px; }

/* Të gjitha kartat janë gri; kur kalon miun mbi një kartë, ajo bëhet navy */
@media (hover: hover) {
  .area:hover {
    transform: translateY(-4px);
    background: var(--f-hover-bg);
    border-color: var(--f-hover-bg);
    box-shadow: 0 22px 40px -26px rgba(0, 0, 0, .45);
  }
  .area:hover h3 { color: var(--f-hover-title); }
  .area:hover .area-items { color: var(--f-hover-text); }
  .area:hover .area-icon { stroke: var(--f-hover-accent); }
  .area:hover .area-link { color: #FFFFFF; }
}
.area:focus-within { border-color: var(--navy); }

@media (max-width: 899px) {
  .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area.featured { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .areas { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .area { transition: none; }
  .area:hover { transform: none; }
}

/* ---------- Seksionet e fushave (Civile, Familjare, Penale, Administrative, Dëmshpërblime) ---------- */
/* Ngjyrat e seksioneve: ndryshoni vetëm këto vlera për t'i rinovuar */
.sherbim {
  --c-bg: var(--e-bardhe);    /* sfondi i seksionit */
  --c-title: var(--navy);     /* titujt */
  --c-text: var(--tekst);     /* teksti */
  --c-accent: var(--ari);     /* detajet e arta */
  --c-tab: var(--gri);        /* shiritat e mbyllur */
  --c-tab-hover: #E9EEF3;
  --c-line: #E3E8EE;
  --c-num: var(--ari);        /* numrat e shiritave */
  --c-label: var(--tekst);    /* titujt vertikalë */
  --c-open-bg: #FFFFFF;       /* shiriti i hapur */
  --c-open-title: var(--navy);
  --c-open-text: var(--tekst);
  --c-open-accent: var(--navy);
  background: var(--c-bg);
  color: var(--c-title);
  border-block: 1px solid var(--c-line);
}
/* Seksionet me numër çift kanë sfond gri, që të dallohen nga njëri-tjetri */
.sherbim.alt {
  --c-bg: var(--gri);
  --c-tab: #EAEEF2;
  --c-tab-hover: #E0E6EC;
  border-block: 0;
}
.sherbim + .sherbim { border-top: 0; }
.sherbim-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  max-width: 64ch;
}
.sherbim-intro h2 {
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-title);
}
.office {
  color: var(--c-accent);
  font-size: clamp(.95rem, 1.1vw, 1.15rem);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.tagline {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  font-weight: 500;
  line-height: 1.25;
  margin-top: 10px;
  color: var(--c-title);
}
@media (max-width: 480px) {
  .sherbim-intro h2 { font-size: 2rem; letter-spacing: .03em; }
}
.sherbim-intro .desc {
  color: var(--c-text);
  font-size: clamp(1.1rem, 1.3vw, 1.3rem);
  max-width: 56ch;
}
.slider-title {
  font-size: clamp(1.8rem, 2.8vw, 2.6rem);
  margin-top: 64px;
  color: var(--c-title);
}
.slider-hint { color: var(--c-text); font-size: 1.1rem; margin: 8px 0 28px; }

/* Shiritat e shërbimeve (kompjuter): shirita vertikalë, njëri i hapur.
   Numri i shiritave (--n) e vendos vetë script.js */
.slider {
  /* gjerësia e çdo shiriti të mbyllur: ngushtohet kur ka shumë shërbime */
  --tab: clamp(44px, calc((100cqw - 500px) / var(--n, 10)), 64px);
  container-type: inline-size;
  display: flex;
  height: 580px;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--c-tab);
}
@media (max-width: 1199px) {
  .slider { height: 540px; }
}
.slide {
  position: relative;
  display: flex;
  flex: 0 0 var(--tab);
  min-width: 0;
  overflow: hidden;
  border-left: 1px solid var(--c-line);
  transition: flex-grow .55s cubic-bezier(.4, 0, .2, 1), background-color .3s ease;
}
.slide:first-child { border-left: 0; }
.slide.is-open { flex-grow: 1; background: var(--c-open-bg); }

.slide-tab {
  flex: 0 0 var(--tab);
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 28px 0;
  border: 0;
  background: transparent;
  color: var(--c-label);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.slide-tab:hover { background: var(--c-tab-hover); color: var(--c-title); }
.slide-tab:focus-visible { outline-offset: -3px; }
.slide.is-open .slide-tab { color: var(--c-open-text); cursor: default; }
.slide.is-open .slide-tab:hover { background: transparent; }
.slide-num {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--c-num);
  font-variant-numeric: lining-nums tabular-nums;
}
.slide.is-open .slide-num { color: var(--ari); }
.slide-label {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  writing-mode: vertical-rl;
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .01em;
}
.slide-plus { display: none; }

.slide-panel { flex: 1 1 auto; min-width: 0; }
.slide-body {
  position: relative;
  height: 100%;
  min-width: 400px;
  width: calc(100cqw - var(--n, 10) * var(--tab) - (var(--n, 10) - 1) * 1px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  padding: 40px 56px 40px 40px;
  overflow: hidden;
  opacity: 0;
  transition: opacity .25s ease;
}
.slide.is-open .slide-body { opacity: 1; transition-delay: .2s; }

/* Vula "M" e zbehtë në sfond të shiritit të hapur */
.slide-body::after {
  content: "M";
  position: absolute;
  right: -50px;
  bottom: -70px;
  width: 320px;
  height: 320px;
  border: 2px solid var(--c-open-accent);
  border-radius: 50%;
  box-shadow: inset 0 0 0 12px var(--c-open-bg), inset 0 0 0 13px var(--c-open-accent);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 160px;
  font-weight: 600;
  color: var(--c-open-accent);
  opacity: .06;
  transform: rotate(-9deg);
  pointer-events: none;
}
.slide-icon {
  width: 64px;
  height: 64px;
  fill: none;
  stroke: var(--c-open-accent);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.slide-body h4 {
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
  font-weight: 500;
  max-width: 20ch;
  color: var(--c-open-title);
}
.slide-body p {
  color: var(--c-open-text);
  font-size: 1.1rem;
  line-height: 1.65;
  max-width: 48ch;
}
.slide-cta {
  margin-top: 8px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--blu);
  text-decoration: none;
}
.slide-cta:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Shiritat e shërbimeve (tablet dhe telefon): listë që hapet me klik */
@media (max-width: 1099px) {
  .slider { flex-direction: column; height: auto; }
  .slide {
    flex: none;
    flex-direction: column;
    border-left: 0;
    border-top: 1px solid var(--c-line);
  }
  .slide:first-child { border-top: 0; }
  .slide-tab {
    flex: none;
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 18px 18px;
  }
  .slide.is-open .slide-tab { cursor: pointer; }
  .slide-num { font-size: 1.15rem; }
  .slide-label {
    writing-mode: horizontal-tb;
    overflow: visible;
    font-size: 1.05rem;
    color: var(--c-title);
  }
  .slide.is-open .slide-label { color: var(--c-open-title); }
  .slide-plus {
    display: block;
    position: relative;
    flex: none;
    width: 14px;
    height: 14px;
    color: var(--c-num);
  }
  .slide.is-open .slide-plus { color: var(--c-open-accent); }
  .slide-plus::before,
  .slide-plus::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - .75px);
    height: 1.5px;
    background: currentColor;
    transition: transform .3s ease;
  }
  .slide-plus::after { transform: rotate(90deg); }
  .slide.is-open .slide-plus::after { transform: rotate(0deg); }

  .slide-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .4s ease;
  }
  .slide.is-open .slide-panel { grid-template-rows: 1fr; }
  .slide-body {
    min-height: 0;
    min-width: 0;
    width: auto;
    height: auto;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 18px 0 66px;
  }
  .slide-body::after,
  .slide-body h4 { display: none; }
  .slide-icon { width: 40px; height: 40px; }
  .slide-body p { font-size: 1.05rem; }
  .slide-cta { margin-bottom: 24px; }
}
@media (max-width: 440px) {
  .slide-body { padding-left: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .slide, .slide-body, .slide-panel, .slide-plus::after { transition: none; }
}

/* Nëse JavaScript nuk punon, shërbimet shfaqen si listë e thjeshtë */
.slider:not(.gati) { display: block; height: auto; padding: 8px 28px; background: var(--c-open-bg); }
.slider:not(.gati) .slide { display: block; padding: 20px 0; border-left: 0; border-top: 1px solid var(--c-line); }
.slider:not(.gati) .slide:first-child { border-top: 0; }
.slider:not(.gati) h4 { font-size: 1.3rem; margin-bottom: 6px; }
.slider:not(.gati) p { color: var(--c-text); }

/* ---------- Avokatët ---------- */
/* Ngjyrat e seksionit: ndryshoni vetëm këto vlera për ta rinovuar */
.avokatet {
  --a-bg: var(--gri);         /* sfondi i seksionit */
  --a-title: var(--navy);     /* emrat dhe titujt */
  --a-text: var(--tekst);     /* teksti i biografisë */
  --a-muted: var(--tekst-zbehte); /* teksti dytësor */
  --a-accent: var(--ari);     /* detajet e arta */
  --a-line: var(--vija);      /* vijat */
  background: var(--a-bg);
  color: var(--a-title);
  border-top: 1px solid var(--a-line);
}
.avokatet .section-head { max-width: 70ch; margin-bottom: 56px; }
.avokatet .eyebrow {
  color: var(--a-accent);
  font-size: clamp(.9rem, 1vw, 1.05rem);
  letter-spacing: .16em;
}
.avokatet .section-head h2 { color: var(--a-title); font-size: clamp(2rem, 3.6vw, 3.2rem); }

.profil {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 32px 64px;
  align-items: start;
}
.profil + .profil {
  margin-top: 88px;
  padding-top: 88px;
  border-top: 1px solid var(--a-line);
}
/* Profili i dytë: fotoja në të djathtë */
.profil-mbrapsht { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
.profil-mbrapsht .profil-foto { order: 2; }

.profil-foto {
  position: sticky;           /* fotoja qëndron në ekran ndërsa lexohet biografia */
  top: 24px;
  margin: 0;
}
.profil-foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 14px;
  background: #E9EDF1;
  box-shadow: 0 30px 60px -36px rgba(20, 40, 63, .55);
}

.profil-tekst { min-width: 0; max-width: 72ch; }
.profil h3 {
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 600;
  color: var(--a-title);
}
.profil-rol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  margin-top: 14px;
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  font-weight: 600;
  color: var(--a-accent);
}
.profil-rol span:not(:last-child)::after {
  content: "·";
  margin: 0 12px;
  color: var(--a-line);
}
.profil-bio {
  display: grid;
  gap: 16px;
  margin-top: 28px;
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--a-text);
}
.profil-hyrje {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  line-height: 1.45;
  color: var(--a-title);
}

/* Listat kohore: vitet në të majtë, përshkrimi në të djathtë */
.profil-lista {
  display: grid;
  gap: 40px;
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid var(--a-line);
}
.profil-lista h4 {
  font-size: 1.35rem;
  color: var(--a-title);
  margin-bottom: 18px;
}
.kohe {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.kohe li {
  position: relative;
  display: grid;
  grid-template-columns: 7.6rem minmax(0, 1fr);
  gap: 16px;
  padding-left: 18px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--a-text);
}
.kohe li::before {            /* pika e artë para çdo viti */
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--a-accent);
}
.kohe-vit {
  font-weight: 600;
  color: var(--a-accent);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 899px) {
  .profil,
  .profil-mbrapsht { grid-template-columns: 1fr; gap: 28px; }
  .profil-mbrapsht .profil-foto { order: 0; }
  .profil-foto { position: static; max-width: 340px; }
  .profil + .profil { margin-top: 64px; padding-top: 64px; }
}
@media (max-width: 480px) {
  .kohe li { grid-template-columns: 1fr; gap: 2px; }
  .profil-rol { flex-direction: column; }
  .profil-rol span:not(:last-child)::after { content: none; }
}

/* ---------- Kontakt dhe formulari ---------- */
.kontakt {
  --k-bg: var(--e-bardhe);    /* sfondi i seksionit */
  --k-card: var(--gri);       /* karta e formularit */
  --k-line: var(--vija);
  --k-title: var(--navy);
  --k-text: var(--tekst-zbehte);
  --k-accent: var(--ari);     /* detajet e arta */
  --k-field: #FFFFFF;         /* sfondi i fushave */
  --k-btn: var(--blu);        /* butoni "Dërgo" */
  --k-btn-text: #FFFFFF;
  --k-wa: #1F9D55;            /* butoni i WhatsApp */
  background: var(--k-bg);
  color: var(--k-title);
}
.kontakt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
  gap: 56px;
  align-items: start;
}
.kontakt-info { min-width: 0; }
.kontakt .eyebrow {
  color: var(--ari);
  font-size: clamp(.9rem, 1vw, 1.05rem);
  letter-spacing: .16em;
}
.kontakt .section-head h2 { color: var(--k-title); font-size: clamp(2rem, 3.6vw, 3.2rem); }
.kontakt .section-head p:not(.eyebrow) { color: var(--k-text); font-size: 1.1rem; }

.contact-list {
  margin: 0;
  border-top: 1px solid var(--k-line);
}
.contact-row {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 16px;
  padding-block: 18px;
  border-bottom: 1px solid var(--k-line);
  align-items: baseline;
}
.contact-row dt { color: var(--k-text); font-size: 1rem; }
.contact-row dd { margin: 0; font-size: 1.1rem; line-height: 1.7; overflow-wrap: anywhere; }
.contact-row a { color: var(--k-title); font-weight: 600; text-decoration: none; }
.contact-row a:hover { color: var(--blu); text-decoration: underline; text-underline-offset: 3px; }

/* Karta e formularit */
.form-card {
  display: grid;
  gap: 18px;
  padding: 34px;
  background: var(--k-card);
  border: 1px solid var(--k-line);
  border-radius: 16px;
  box-shadow: 0 30px 60px -40px rgba(20, 40, 63, .35);
  scroll-margin-top: 24px;
}
.form-card h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); color: var(--k-title); }
.form-sub { color: var(--k-text); margin-top: -8px; }
.form-kontakt { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field label { font-weight: 600; font-size: .95rem; color: var(--k-title); }
.req { color: #B3261E; }
.form-kontakt input:not([type="checkbox"]),
.form-kontakt select,
.form-kontakt textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 1rem;
  color: var(--k-title);
  background: var(--k-field);
  border: 1.5px solid var(--k-line);
  border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-kontakt textarea { min-height: 130px; resize: vertical; }
.form-kontakt input:focus,
.form-kontakt select:focus,
.form-kontakt textarea:focus {
  outline: none;
  border-color: var(--blu);
  box-shadow: 0 0 0 3px rgba(23, 105, 164, .18);
}
.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .95rem;
  color: var(--k-text);
  cursor: pointer;
}
.check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--blu);
}
.btn-send {
  min-height: 56px;
  border: 0;
  border-radius: 10px;
  background: var(--k-btn);
  color: var(--k-btn-text);
  font: inherit;
  font-size: 1.08rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s ease;
}
.btn-send:hover { background: var(--blu-hover); }
.btn-send[disabled] { opacity: .65; cursor: progress; }
.form-status {
  padding: 12px 14px;
  border-radius: 10px;
  font-weight: 600;
}
.form-status.ok { background: #E6F4EA; color: #1E5E34; }
.form-status.err { background: #FBEAEA; color: #8A1C1C; }
.form-or {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--k-text);
  font-size: .9rem;
}
.form-or::before,
.form-or::after { content: ""; flex: 1; height: 1px; background: var(--k-line); }
.btn-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  border-radius: 10px;
  background: var(--k-wa);
  color: #FFFFFF;
  font-size: 1.08rem;
  font-weight: 600;
  text-decoration: none;
  transition: filter .2s ease;
}
.btn-wa:hover { filter: brightness(1.08); }
.btn-wa svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.form-note { font-size: .85rem; color: var(--k-text); }

@media (max-width: 900px) {
  .kontakt-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 520px) {
  .form-card { padding: 22px; }
  .field-row { grid-template-columns: 1fr; }
  .contact-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- Footer: në qendër, me krijuesin e faqes poshtë ---------- */
.site-footer { background: var(--navy); color: #C9D4E0; }
.site-footer .wrap {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding-block: 32px;
  text-align: center;
  font-size: .95rem;
}
.site-footer .krijuesi {
  font-size: .82rem;
  letter-spacing: .04em;
  color: #8FA1B5;
}
.site-footer .krijuesi span { color: var(--ari); font-weight: 600; }

/* ---------- Butonat e shpejtë në telefon: Telefono dhe WhatsApp ---------- */
.thirrje-shpejte { display: none; }
@media (max-width: 900px) {
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .thirrje-shpejte {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid var(--vija);
    box-shadow: 0 -8px 24px -16px rgba(20, 40, 63, .4);
  }
  .thirrje-shpejte a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    border-radius: 10px;
    color: #FFFFFF;
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
  }
  .thirrje-shpejte svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .ts-tel { background: var(--blu); }
  .ts-tel:active { background: var(--blu-hover); }
  .ts-wa { background: #1F9D55; }
}