/* ============================================================
   Satış saytı — "studiya" dizaynı: isti kağız fonu, mürəkkəb qarası, bir vurğu rəngi (nar).
   Başlıqlar: Literata (serif). Mətn və interfeys: Onest.
   Qradiyent, parıltı, ikon qutuları, fırlanan möhür, əyri çərçivələr, "— üst yazı" etiketləri yoxdur.
   Kursiv vurğu yalnız hero başlığında. Vizual maraq real ekran şəkillərindən gəlir, bəzəkdən yox.
   Kontrast (WCAG AA, --kagiz üzərində): --ink2 8.3:1, --ink3 5.2:1, --nar 4.7:1; kağız mətn --nar üzərində 4.7:1.
   Mobil-first: trafikin çoxu Instagram-dan telefonla gəlir.
   ============================================================ */
:root{
  color-scheme: light;
  --kagiz:#F4F0E8; --kagiz2:#EAE4D8; --sehife:#FBF9F5;
  --ink:#16130F; --ink2:#4B453C; --ink3:#685F53;
  --xett:#DCD4C6; --xett2:#C3B9A7; --xettForm:#A89E8C;
  --nar:#C4371F; --narT:#A42C17; --narAcik:#F3DCD3;
  --tund:#16130F; --tund2:#221E18; --tundXett:rgba(244,240,232,.14); --tundInk2:#B8AF9F; --narTundda:#EE7A5F;
  --wa:#25D366; --ok:#2E7A4B; --xeta:#B42318;
  --serif:'Literata', Georgia, 'Times New Roman', serif;
  --sans:'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --r:14px; --rSm:10px; --pill:999px;
  --kolge:0 1px 2px rgba(22,19,15,.06), 0 24px 48px -28px rgba(22,19,15,.35);
  --en:1240px; --ustH:72px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--ustH) + 12px); -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--kagiz); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden;
}
@media(min-width:1024px){body{font-size:17px}}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{margin:0; font-family:var(--serif); font-weight:500; line-height:1.08; letter-spacing:-.018em; text-wrap:balance}
h1 em,h2 em,h3 em{font-style:italic; color:var(--nar); font-weight:450}
p{margin:0}
.ikon{flex:none; display:inline-block; vertical-align:middle}
.gizli{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.soluk{color:var(--ink3)}
.kicik{font-size:14px}
::selection{background:var(--nar); color:var(--kagiz)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--nar); outline-offset:3px; border-radius:4px}
.kec{position:absolute; left:16px; top:-60px; z-index:100; background:var(--ink); color:var(--kagiz);
  padding:10px 16px; border-radius:var(--rSm); font-weight:600; text-decoration:none; transition:top .15s}
.kec:focus{top:12px}

.kap{--gut:20px; width:100%; max-width:var(--en); margin:0 auto; padding:0 var(--gut)}
@media(min-width:768px){.kap{--gut:40px}}

/* ---------- Düymələr ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:0 22px; border-radius:var(--pill); border:1.5px solid transparent;
  font:inherit; font-size:15.5px; font-weight:600; line-height:1.2;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .15s ease, background-color .15s, border-color .15s, color .15s;
}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.4; cursor:not-allowed}
/* WhatsApp: qara düymə, tanınan yaşıl ikon */
.btn-wa{background:var(--ink); color:var(--kagiz)}
.btn-wa .ikon{color:var(--wa)}
.btn-wa:hover{background:#2B261F}
.btn-p{background:var(--nar); color:#fff}
.btn-p:hover:not([disabled]){background:var(--narT)}
.btn-g{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn-g:hover:not([disabled]){background:var(--ink); color:var(--kagiz)}
.btn-sm{min-height:40px; padding:0 16px; font-size:14.5px}
.btn-boyuk{min-height:56px; padding:0 28px; font-size:16.5px}
.btn-tam{width:100%}
.lnk{display:inline-flex; align-items:center; gap:6px; background:none; border:0; padding:0; font:inherit;
  color:var(--ink); font-weight:600; text-decoration:underline; text-decoration-color:var(--xett2);
  text-underline-offset:5px; text-decoration-thickness:1.5px; cursor:pointer; transition:text-decoration-color .15s, color .15s}
.lnk:hover{text-decoration-color:var(--nar); color:var(--nar)}
.lnk .ikon{transition:transform .2s}
.lnk:hover .ikon{transform:translateX(3px)}

/* ---------- Brend ---------- */
.brend{display:inline-flex; align-items:center; gap:10px; text-decoration:none}
.brendNisan{width:30px; height:30px; flex:none; border-radius:50%; background:var(--nar); color:var(--kagiz)}
.brendNisan svg{display:block; width:100%; height:100%}
.brendAd{font-family:var(--serif); font-size:21px; font-weight:600; letter-spacing:-.02em}

/* ---------- Header ---------- */
.ust{position:sticky; top:0; z-index:40; background:rgba(244,240,232,.86); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid transparent; transition:border-color .2s}
.ust.surusdu{border-bottom-color:var(--xett)}
.ustIc{height:var(--ustH); display:flex; align-items:center; justify-content:space-between; gap:20px}
.ustNav{display:none; align-items:center; gap:30px; font-size:15px; color:var(--ink2); font-weight:500}
.ustNav > a, .acilan summary{color:inherit; text-decoration:none; padding:8px 0; cursor:pointer; transition:color .15s}
.ustNav > a:hover, .acilan summary:hover{color:var(--ink)}
.acilan{position:relative}
.acilan summary{list-style:none; display:inline-flex; align-items:center; gap:7px}
.acilan summary::-webkit-details-marker{display:none}
.acilan summary::after{content:''; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg); transition:transform .2s}
.acilan[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.acilanIc{position:absolute; top:calc(100% + 12px); left:-18px; min-width:240px; padding:8px; border-radius:var(--r);
  background:var(--sehife); border:1px solid var(--xett); box-shadow:var(--kolge); display:grid}
.acilanIc a{padding:10px 12px; border-radius:8px; text-decoration:none; color:var(--ink2)}
.acilanIc a:hover{background:var(--kagiz); color:var(--ink)}
.ustSag{display:flex; align-items:center; gap:12px}
.dilSec{display:flex; align-items:center; font-size:14px; font-weight:600}
.dilSec a{padding:6px 7px; text-decoration:none; color:var(--ink3)}
.dilSec a + a::before{content:'/'; margin:0 7px 0 -7px; color:var(--xett2); font-weight:400}
.dilSec a.aktiv{color:var(--ink)}
.ustWa{display:none}
.menyuDuyme{display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1.5px solid var(--ink);
  background:transparent; color:var(--ink); cursor:pointer}
.mobilMenyu{border-top:1px solid var(--xett); background:var(--kagiz); padding:8px 0 24px; max-height:calc(100vh - var(--ustH)); overflow:auto}
.mobilMenyu a{display:block; padding:12px 0; font-family:var(--serif); font-size:24px; text-decoration:none; border-bottom:1px solid var(--xett)}
.mmBaslik{margin-top:18px; font-size:13px; color:var(--ink3); font-weight:600}
@media(min-width:960px){
  .ustNav{display:flex}
  .menyuDuyme,.mobilMenyu{display:none!important}
  .ustWa{display:inline-flex}
}

/* ---------- Bölmə başlıqları ---------- */
.bolme{padding:72px 0}
@media(min-width:1024px){.bolme{padding:120px 0}}
.bolmeAlt{background:var(--kagiz2)}
.bolmeYuxari{padding-top:16px}
.bolmeBas{max-width:760px; margin-bottom:44px}
.bolmeBasSira{max-width:none; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px 40px}
.bolmeBasSira > div{max-width:720px}
.bolme h2{font-size:clamp(2.1rem, 5.6vw, 3.6rem)}
.bolmeAltYazi{margin-top:18px; font-size:clamp(1.02rem, 2vw, 1.15rem); color:var(--ink2); max-width:600px}

/* İki sütun: solda yapışqan başlıq, sağda məzmun */
.iki{display:grid; gap:8px}
@media(min-width:960px){
  .iki{grid-template-columns:5fr 7fr; gap:64px; align-items:start}
  .iki > .bolmeBas{position:sticky; top:calc(var(--ustH) + 32px); margin-bottom:0}
}

/* ---------- Hero ---------- */
.hero{position:relative; padding:40px 0 64px; overflow:hidden}
.heroIc{display:grid; gap:48px; align-items:center}
.hero h1{font-size:clamp(2.7rem, 9.4vw, 5.2rem); line-height:1; letter-spacing:-.03em; font-weight:500}
.hero h1 em{display:inline; font-weight:400}
:lang(ru) .hero h1{font-size:clamp(2.5rem, 8.4vw, 4.6rem); line-height:1.02}
.heroAlt{margin-top:26px; font-size:clamp(1.08rem, 2.4vw, 1.3rem); color:var(--ink2); max-width:520px; line-height:1.55}
.heroDuymeler{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.heroDuymeler .btn{flex:1 1 220px}
@media(min-width:560px){.heroDuymeler .btn{flex:0 0 auto}}
@media(min-width:1024px){
  .hero{padding:72px 0 104px}
  .heroIc{grid-template-columns:1fr 1.05fr; gap:64px}
  .heroTek{grid-template-columns:1fr}
}
.heroKicik{padding:56px 0 20px}
.heroKicik h1{font-size:clamp(2.5rem, 7vw, 4.4rem)}
.heroXidmet h1{font-size:clamp(2.5rem, 7.4vw, 4.6rem)}
.kod404{font-weight:600; color:var(--ink3); margin-bottom:12px}

/* Hero nümunələri: üç real nümunə saytın telefon ekranı, toxunanda açılır */
.hnBaslik{font-size:14.5px; font-weight:600; color:var(--ink2); margin-bottom:14px}
.hnList{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:12px}
@media(min-width:560px){.hnList{gap:18px}}
.hnList a{display:grid; gap:4px; text-decoration:none; color:inherit}
.hnTel{display:block; margin-bottom:8px; aspect-ratio:390/844; border-radius:18px; border:4px solid var(--ink); overflow:hidden; background:#fff;
  box-shadow:0 30px 40px -34px rgba(22,19,15,.6); transition:transform .3s cubic-bezier(.2,.8,.2,1)}
@media(min-width:560px){.hnTel{border-radius:26px; border-width:6px}}
.hnTel img{width:100%; height:100%; object-fit:cover; object-position:top}
.hnList a:hover .hnTel{transform:translateY(-6px)}
.hnList b{font-size:14.5px; font-weight:600; line-height:1.25}
.hnList small{font-size:12.5px; color:var(--ink3); line-height:1.35}
@media(min-width:560px){.hnList b{font-size:16px} .hnList small{font-size:13.5px}}

/* Xidmət səhifəsi: bu xidmətin canlı nümunəsi */
.heroDemo{display:inline-flex; align-items:center; gap:16px; margin-top:32px; padding:10px 22px 10px 10px; border-radius:16px;
  border:1px solid var(--xett2); background:var(--sehife); text-decoration:none; color:inherit; transition:border-color .15s}
.heroDemo:hover{border-color:var(--ink)}
.hdTel{flex:none; width:58px; aspect-ratio:390/600; border-radius:10px; border:3px solid var(--ink); overflow:hidden; background:#fff}
.hdTel img{width:100%; height:100%; object-fit:cover; object-position:top}
.heroDemo small{display:block; font-size:13px; color:var(--ink3); font-weight:500}
.heroDemo b{display:block; font:500 21px/1.2 var(--serif); margin:2px 0 6px}
.heroDemo .lnk{font-size:14.5px}

/* ---------- Paketlər ---------- */
.paketler{display:grid; gap:14px}
@media(min-width:680px){.paketler{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1140px){
  .paketler{grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--xett2); border-radius:18px; background:var(--sehife)}
  .paketler .paket{border:0; border-radius:0; background:transparent}
  .paketler .paket + .paket{border-left:1px solid var(--xett)}
  .paketler .paket.populyar{margin:-14px 0; border-radius:18px; border:0; z-index:1}
  .paketler .paket.populyar + .paket{border-left-color:transparent}
}
.paket{position:relative; display:flex; flex-direction:column; padding:30px 26px 28px; border-radius:18px; background:var(--sehife); border:1px solid var(--xett2)}
.paket.populyar{background:var(--tund); color:var(--kagiz); border-color:var(--tund); box-shadow:0 40px 60px -40px rgba(22,19,15,.7)}
.paketBas{display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:28px}
.paket h3{font-family:var(--sans); font-size:17px; font-weight:600; letter-spacing:0}
.paketNisan{display:inline-flex; align-items:center; padding:4px 10px; border-radius:var(--pill);
  background:var(--nar); color:#fff; font-size:12px; font-weight:600; white-space:nowrap}
.paketQiymet{margin-top:22px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.paketQiymet b{font-family:var(--serif); font-size:58px; font-weight:500; letter-spacing:-.03em; line-height:.95}
.paketQiymet span,.paketQiymet small{font-size:16px; font-weight:600; color:var(--ink3)}
.populyar .paketQiymet span,.populyar .paketQiymet small{color:var(--tundInk2)}
.paketAylik{min-height:22px; margin-top:8px; font-size:14.5px; color:var(--nar); font-weight:600}
.populyar .paketAylik{color:var(--narTundda)}
.paketMuddet{display:flex; justify-content:space-between; gap:10px; margin-top:18px; padding:12px 0; border-top:1px solid var(--xett); border-bottom:1px solid var(--xett);
  font-size:14.5px; color:var(--ink3)}
.paketMuddet b{color:var(--ink); font-weight:600}
.populyar .paketMuddet{border-color:var(--tundXett); color:var(--tundInk2)}
.populyar .paketMuddet b{color:var(--kagiz)}
.tikList{list-style:none; padding:0; margin:20px 0 28px; display:grid; gap:11px; font-size:15px; color:var(--ink2)}
.tikList li{display:flex; gap:10px; align-items:flex-start; line-height:1.45}
.tikList .ikon{margin-top:2px; color:var(--ok)}
.populyar .tikList{color:var(--tundInk2)}
.populyar .tikList .ikon{color:var(--narTundda)}
.paketDuymeler{margin-top:auto; display:grid; gap:16px; justify-items:center}
.populyar .lnk{color:var(--kagiz); text-decoration-color:rgba(244,240,232,.35)}
.populyar .lnk:hover{color:var(--narTundda); text-decoration-color:var(--narTundda)}
.hisse{margin:34px auto 0; max-width:640px; text-align:center; color:var(--ink2); font-size:15.5px; text-wrap:balance}

/* Aylıq dəstək — menyu kimi, nöqtəli xətlə */
.destek{margin-top:64px; display:grid; gap:24px; padding-top:32px; border-top:1px solid var(--ink)}
.destekMetn h3{font-size:clamp(1.6rem, 3.4vw, 2.1rem)}
.destekMetn p{margin-top:10px; color:var(--ink2); max-width:420px}
.destekList{list-style:none; padding:0; margin:0; display:grid; gap:22px}
.destekList li{display:grid; gap:4px}
.dSetir{display:flex; align-items:baseline; gap:10px}
.dSetir b{font-family:var(--serif); font-size:21px; font-weight:500}
.dNoqte{flex:1; min-width:20px; border-bottom:2px dotted var(--xett2); transform:translateY(-5px)}
.destekQ{font-weight:700; white-space:nowrap; font-size:17px}
.destekQ small{font-weight:500; color:var(--ink3); font-size:14px}
.destekList .soluk{font-size:14.5px}
@media(min-width:900px){.destek{grid-template-columns:5fr 7fr; gap:64px}}

/* ---------- Portfolio ---------- */
.pGrid{display:grid; gap:20px}
@media(min-width:720px){.pGrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.pGrid{gap:40px 32px}}
.pKart{display:flex; flex-direction:column; min-width:0}
.pEkran{position:relative; display:block; border-radius:12px; overflow:hidden; border:1px solid var(--xett2); background:var(--sehife);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s}
.pKart:hover .pEkran{transform:translateY(-4px); box-shadow:0 30px 50px -34px rgba(22,19,15,.55)}
.pCubuq{display:flex; align-items:center; gap:6px; height:30px; padding:0 12px; background:var(--sehife); border-bottom:1px solid var(--xett)}
.pCubuq i{width:9px; height:9px; border-radius:50%; background:var(--xett2)}
.pCubuq span{margin-left:10px; flex:1; max-width:280px; height:18px; border-radius:5px; background:var(--kagiz);
  color:var(--ink3); font-size:10.5px; line-height:18px; padding:0 8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.pEkran img{width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top}
/* Nümunə dizayn: şəkil yoxdursa — tipoqrafik üz qabığı */
.pQapaq{position:relative; aspect-ratio:16/11; display:flex; flex-direction:column; justify-content:flex-end; gap:16px; padding:18px 20px;
  background:color-mix(in srgb, var(--tema) 14%, var(--sehife)); color:color-mix(in srgb, var(--tema) 72%, #000); overflow:hidden}
.pQapaq::after{content:attr(data-herf); position:absolute; right:-4%; bottom:-28%; font:italic 400 13rem/1 var(--serif);
  color:color-mix(in srgb, var(--tema) 15%, transparent)}
.pQAd{position:relative; z-index:1; font:500 clamp(1.9rem, 4.2vw, 2.5rem)/1 var(--serif); letter-spacing:-.02em}
.pQAd em{font-weight:400}
.pQDuyme{position:relative; z-index:1; align-self:flex-start; padding:7px 14px; border-radius:999px; background:var(--tema); color:#fff; font-size:12px; font-weight:600}
.pMetn{padding:18px 2px 0; display:flex; flex-direction:column; gap:6px}
.pUst{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; font-size:14px; color:var(--ink3)}
.pMetn h3{font-size:clamp(1.5rem, 3vw, 1.85rem)}
.pMetn > p:not(.pUst){color:var(--ink2); font-size:15.5px; max-width:520px}
.pMetn .lnk{margin-top:8px; align-self:flex-start}
.nisan{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--pill);
  font-size:12.5px; font-weight:600; border:1px solid var(--xett2); color:var(--ink2)}
.nisanOk{border-color:transparent; background:var(--ok); color:#fff}
/* Bütün kartlar bərabərdir (2 sütun); müştəri saytı yalnız yaşıl nişanla seçilir */
.pBos{grid-column:1 / -1; border:1.5px dashed var(--xett2); border-radius:12px}
.pBosIc{padding:28px; display:grid; gap:14px; justify-items:start}
@media(min-width:720px){.pBosIc{grid-template-columns:1fr auto; align-items:center; gap:10px 40px; padding:32px 36px} .pBosIc .btn{grid-row:1 / 3; grid-column:2}}
.pBosIc h3{font-size:28px}
.pBosIc p{color:var(--ink2)}

/* ---------- Proses ---------- */
.proses{list-style:none; padding:0; margin:0; display:grid; gap:0}
@media(min-width:720px){.proses{grid-template-columns:repeat(2,1fr); gap:0 40px}}
@media(min-width:1024px){.proses{grid-template-columns:repeat(4,1fr); gap:0 32px}}
.addim{position:relative; padding:24px 0 30px; border-top:1px solid var(--ink)}
.addimM{display:block; font:500 clamp(1.7rem, 3.4vw, 2.2rem)/1.1 var(--serif); letter-spacing:-.02em; margin-bottom:14px}
.addim h3{font-family:var(--sans); font-size:17px; font-weight:600; letter-spacing:0; margin-bottom:8px}
.addim p{color:var(--ink2); font-size:15.5px}

/* ---------- Tünd bölmə (kalkulyator) ---------- */
.bolmeTund{background:var(--tund); color:var(--kagiz)}
.bolmeTund .bolmeAltYazi{color:var(--tundInk2)}
.bolmeTund h2 em{color:var(--narTundda)}

/* ---------- Kalkulyator ---------- */
.kalkKap .bolmeBas{margin-left:auto; margin-right:auto; text-align:center}
.kalkKap .bolmeAltYazi{margin-left:auto; margin-right:auto}
.kalk{max-width:880px; margin:0 auto; padding:24px 20px; border-radius:20px; background:var(--tund2); border:1px solid var(--tundXett)}
@media(min-width:768px){.kalk{padding:40px}}
.kalkIreli{display:flex; align-items:center; gap:16px; margin-bottom:26px; font-size:13.5px; font-weight:600; color:var(--tundInk2)}
.kalkIreli span{white-space:nowrap}
.kalkXett{flex:1; height:2px; background:var(--tundXett)}
.kalkXett i{display:block; height:100%; background:var(--narTundda); transition:width .35s ease}
.kalkAddim{border:0; margin:0; padding:0; min-width:0}
.kalkAddim legend{padding:0; font:500 clamp(1.5rem, 3.6vw, 2rem)/1.15 var(--serif); letter-spacing:-.015em; margin-bottom:20px}
.kalkAlt{margin:-8px 0 16px; color:var(--tundInk2); font-size:14.5px}
.secimler{display:grid; gap:10px}
.secimChip{grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.secimChip{grid-template-columns:repeat(4,1fr)}}
.secimKart{grid-template-columns:1fr}
@media(min-width:640px){.secimKart{grid-template-columns:repeat(2,1fr)}}
.secim{position:relative; display:block; cursor:pointer}
.secim input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.secim > span{display:flex; flex-direction:column; justify-content:center; gap:3px; min-height:56px; height:100%; padding:12px 16px; border-radius:12px;
  border:1px solid rgba(244,240,232,.22); font-weight:500; font-size:15px; line-height:1.3; color:var(--kagiz);
  transition:border-color .15s, background-color .15s}
.secimChip .secim > span{text-align:center; align-items:center; font-size:14.5px}
.secimKart .secim > span{padding:16px 18px 16px 50px; min-height:70px}
.secimKart .secim > span::before{content:''; position:absolute; left:18px; top:50%; width:18px; height:18px; margin-top:-9px;
  border-radius:50%; border:1.5px solid rgba(244,240,232,.45); transition:border-color .15s, background-color .15s, box-shadow .15s}
.secimCheck > span::before{border-radius:5px!important}
.secim b{font-size:16px; font-weight:600}
.secim small{font-size:14px; color:var(--tundInk2); font-weight:500}
.secim small:empty{display:none}
.secim small.daxil{color:#7FD19B}
.secim:hover > span{border-color:rgba(244,240,232,.5)}
.secim input:focus-visible + span{outline:2px solid var(--narTundda); outline-offset:2px}
.secim input:checked + span{border-color:var(--kagiz); background:var(--kagiz); color:var(--ink)}
.secim input:checked + span small{color:var(--ink3)}
.secim input:checked + span small.daxil{color:var(--ok)}
.secimKart .secim input:checked + span::before{border-color:var(--nar); background:var(--nar); box-shadow:inset 0 0 0 3px var(--kagiz)}
.secimCheck input:checked + span::before{background:var(--nar) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat!important; box-shadow:none!important}
.kalkNav{display:flex; justify-content:space-between; gap:12px; margin-top:28px}
.kalkNav [data-kalk-davam]{margin-left:auto; min-width:160px}
.kalk .btn-g{color:var(--kagiz); border-color:rgba(244,240,232,.4)}
.kalk .btn-g:hover:not([disabled]){background:var(--kagiz); color:var(--ink); border-color:var(--kagiz)}
.kalk .btn-p[disabled]{opacity:1; background:transparent; border-color:rgba(244,240,232,.2); color:rgba(244,240,232,.4)}
.kalk .btn-wa{background:var(--kagiz); color:var(--ink)}
.kalk .btn-wa:hover{background:#fff}
.kalk .btn-wa .ikon{color:#1DA851}
.kalkNetice{display:grid; grid-template-columns:minmax(0,1fr); gap:28px; outline:none}
.kalkNeticeAlt .btn{white-space:normal; text-align:center}
@media(min-width:768px){.kalkNetice{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:44px}}
.kalkNeticeEt{font-size:14.5px; color:var(--tundInk2); font-weight:600}
.kalkQiymet{margin-top:8px; font:500 clamp(2.8rem, 8vw, 4rem)/1 var(--serif); letter-spacing:-.03em; color:var(--kagiz)}
.kalkAylik{margin-top:8px; font-weight:600; color:var(--narTundda)}
.kalkQeyd{margin-top:16px; font-size:14px; color:var(--tundInk2)}
.kalkNeticeAlt{display:grid; gap:14px; align-content:start}
.kalkVeYa{text-align:center; color:var(--tundInk2); font-size:14px}
.kalkYeniden{justify-self:center; font-size:14.5px; color:var(--kagiz); text-decoration-color:rgba(244,240,232,.35)}
.kalkNeticeAlt .sForma{padding:0; border:0; background:none; box-shadow:none}
.kalk .sahe label{color:var(--tundInk2)}
.kalk .sahe input{background:transparent; color:var(--kagiz); border-color:rgba(244,240,232,.3)}
.kalk .sahe input::placeholder{color:rgba(244,240,232,.4)}
.kalk .sahe input:focus{border-color:var(--kagiz); background:rgba(244,240,232,.04)}
.kalk .sGizli,.kalk .sUgur p{color:var(--tundInk2)}
.kalk .sXeta{background:rgba(238,122,95,.14); color:#FFB4A2}
.kalkNoscript{text-align:center}
.kalkCari{margin-left:auto; white-space:nowrap; font:500 19px/1 var(--serif); color:var(--kagiz); letter-spacing:-.01em}
.kalkCari span{font:600 13.5px/1 var(--sans); color:var(--tundInk2); letter-spacing:0; margin-right:4px}
.kalkBlok + .kalkBlok{margin-top:28px}
.kalkAltBaslik{font-weight:600; font-size:16px; margin-bottom:12px}
.kalkAltBaslik + .kalkAlt{margin-top:-6px}
.secimUc{grid-template-columns:1fr}
@media(min-width:640px){.secimUc{grid-template-columns:repeat(3,1fr)}}
.secimTovsiye{align-self:flex-start; margin-bottom:4px; padding:2px 8px; border-radius:var(--pill); background:rgba(238,122,95,.16); color:var(--narTundda);
  font:600 11.5px/1.5 var(--sans); font-style:normal; letter-spacing:.02em}
.secim input:checked + span .secimTovsiye{background:var(--narAcik); color:var(--narT)}
.kalkSay{display:flex; align-items:center; gap:14px; font-size:15px; color:var(--tundInk2)}
.kalkSay output{min-width:2ch; text-align:center; font:500 30px/1 var(--serif); color:var(--kagiz)}
.kalkSayBtn{width:48px; height:48px; border-radius:50%; border:1px solid rgba(244,240,232,.3); background:none; color:var(--kagiz); font:500 22px/1 var(--sans); cursor:pointer}
.kalkSayBtn:hover{background:var(--kagiz); color:var(--ink)}
.kalkSayBtn:focus-visible{outline:2px solid var(--narTundda); outline-offset:2px}
.kalkQrAylik{margin-top:20px}
.kalkHazir{margin-top:14px; font-size:15px; color:var(--kagiz)}
.kalkCedvelBas{margin-top:26px; font-size:13.5px; font-weight:600; color:var(--tundInk2)}
.kalkCedvel{width:100%; margin-top:8px; border-collapse:collapse; font-size:14.5px; border-top:1px solid var(--tundXett)}
.kalkCedvel th,.kalkCedvel td{padding:9px 0; border-bottom:1px solid var(--tundXett); vertical-align:top}
.kalkCedvel th{font-weight:500; text-align:left; color:var(--tundInk2); padding-right:12px}
.kalkCedvel td{text-align:right; white-space:nowrap; font-weight:600; font-variant-numeric:tabular-nums}
.kalkCedvel .kalkCem th,.kalkCedvel .kalkCem td{color:var(--kagiz); font-weight:700; border-bottom:0; padding-top:12px}
.kalkOdenis{margin:16px 0 0; display:grid; gap:10px; font-size:14.5px}
.kalkOdenis dt{color:var(--tundInk2); font-weight:600; font-size:13.5px}
.kalkOdenis dd{margin:2px 0 0; color:var(--kagiz)}
.kalk .kalkPaylas{font-size:15px}

/* ---------- Forma ---------- */
.sForma{display:grid; gap:14px; padding:28px; border-radius:18px; background:var(--sehife); border:1px solid var(--xett); box-shadow:var(--kolge); color:var(--ink)}
.sFormaBaslik{font-size:28px; margin-bottom:4px}
.sahe{display:grid; gap:6px}
.sahe label{font-size:14px; font-weight:600; color:var(--ink2)}
.sahe input,.sahe textarea{width:100%; min-height:52px; padding:12px 14px; border-radius:10px; border:1.5px solid var(--xettForm);
  background:#fff; color:var(--ink); font:inherit; font-size:16px; transition:border-color .15s, box-shadow .15s}
.sahe input::placeholder{color:var(--ink3); opacity:.7}
.sahe input:focus{outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(22,19,15,.08)}
.sahe input[aria-invalid="true"]{border-color:var(--xeta)}
.balCeni{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.sXeta{padding:10px 12px; border-radius:10px; background:#FCE8E4; color:var(--xeta); font-size:14.5px}
.sGizli{display:flex; align-items:center; justify-content:center; gap:6px; font-size:13px; color:var(--ink3); text-align:center}
.sUgur{text-align:center; display:grid; gap:10px; justify-items:center; padding:12px 0}
.sUgur .tik{width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:var(--ok); color:#fff}
.sUgur h3{font-size:28px}
.sUgur p{color:var(--ink2)}
.sUgur .ref{font-size:13.5px; color:var(--ink3)}

/* ---------- Kim qurur ---------- */
.haqqimda{display:grid; gap:40px; align-items:center}
@media(min-width:880px){.haqqimda{grid-template-columns:380px 1fr; gap:80px}}
.haqqimdaTek{grid-template-columns:1fr!important; max-width:calc(760px + 2 * var(--gut))}
.haqqimdaSekil{max-width:320px; width:100%; aspect-ratio:4/5; margin:0; border-radius:var(--r); overflow:hidden; background:var(--kagiz)}
@media(min-width:880px){.haqqimdaSekil{max-width:380px}}
.haqqimdaSekil img{width:100%; height:100%; object-fit:cover}
.haqqimdaMetn h2{margin-bottom:22px}
.haqqimdaMetn > p{color:var(--ink2); font-size:17.5px; margin-bottom:16px; max-width:600px}
.haqqimdaMetn .btn{margin-top:12px}
.haqqimdaMetn .kicik{margin-top:14px}
.haqqimdaLi{display:inline-flex; align-items:center; gap:8px; margin-top:18px; color:var(--ink2); font-size:15px; font-weight:500; text-underline-offset:4px}
.haqqimdaLi:hover{color:var(--ink)}

/* ---------- Rəylər ---------- */
.reyler{display:grid; gap:20px}
@media(min-width:720px){.reyler{grid-template-columns:repeat(3,1fr)}}
.rey{margin:0; display:flex; flex-direction:column; gap:18px; padding:28px; border-radius:var(--r); background:var(--sehife); border:1px solid var(--xett)}
.rey blockquote{margin:0; font:400 19px/1.5 var(--serif)}
.rey figcaption{margin-top:auto; display:grid}
.rey figcaption span{font-size:14px; color:var(--ink3)}

/* ---------- FAQ ---------- */
.faqSol .lnk{margin-top:6px}
.faqCta{margin-top:22px; color:var(--ink2); max-width:340px}
.faq{border-top:1px solid var(--ink)}
.faqSual{border-bottom:1px solid var(--xett)}
.faqSual summary{list-style:none; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 0;
  font-weight:600; font-size:17px; cursor:pointer; transition:color .15s}
.faqSual summary:hover{color:var(--nar)}
.faqSual summary::-webkit-details-marker{display:none}
.faqIsare{flex:none; position:relative; width:30px; height:30px; border-radius:50%; border:1.5px solid var(--xett2); transition:background-color .2s, border-color .2s}
.faqIsare::before,.faqIsare::after{content:''; position:absolute; left:50%; top:50%; width:11px; height:1.5px; margin:-.75px 0 0 -5.5px;
  background:var(--ink); transition:transform .2s}
.faqIsare::after{transform:rotate(90deg)}
.faqSual[open] .faqIsare{background:var(--ink); border-color:var(--ink)}
.faqSual[open] .faqIsare::before,.faqSual[open] .faqIsare::after{background:var(--kagiz)}
.faqSual[open] .faqIsare::after{transform:rotate(0)}
.faqSual p{padding:0 50px 24px 0; color:var(--ink2); font-size:16px}

/* ---------- Son çağırış (nar) ---------- */
.sonCta{background:var(--nar); color:#fff}
.sonCta ::selection{background:var(--ink)}
.sonIc{display:grid; gap:44px; align-items:center}
@media(min-width:960px){.sonIc{grid-template-columns:1.15fr .85fr; gap:72px}}
.sonMetn h2{font-size:clamp(2.6rem, 7vw, 5rem); line-height:1}
.sonMetn h2 em{color:#fff}
.sonMetn > p{margin-top:22px; font-size:clamp(1.05rem, 2vw, 1.2rem); color:rgba(255,255,255,.9); max-width:520px}
.sonCta .btn-wa{background:var(--kagiz); color:var(--ink)}
.sonCta .btn-wa:hover{background:#fff}
.sonCta .btn-wa .ikon{color:#1DA851}
.sonCta .btn-g{color:#fff; border-color:rgba(255,255,255,.6)}
.sonCta .btn-g:hover{background:#fff; color:var(--nar); border-color:#fff}
.sonCta .lnk{color:#fff; text-decoration-color:rgba(255,255,255,.45)}
.sonCta .lnk:hover{color:#fff; text-decoration-color:#fff}
.sonCta .sForma{box-shadow:0 40px 60px -40px rgba(60,10,0,.6); border:0}
.digerXidmet{margin-top:40px; display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center}
.digerXidmet .altBaslik{width:100%; margin:0; color:rgba(255,255,255,.8)}

/* ---------- Xidmət səhifəsi ---------- */
.xidmetPaket{max-width:440px; width:100%; justify-self:center}
.xpBaslik{font-family:var(--sans); font-size:17px; font-weight:600; letter-spacing:0}
.xpAlt{margin-top:22px; font-size:14px; font-weight:600; color:var(--tundInk2)}
.xidmetPaket .tikList{margin-top:12px}
.hisseKicik{margin-top:14px; text-align:center; font-size:13.5px; color:var(--tundInk2)}
.ustunlukler{list-style:none; margin:0; padding:0; display:grid; border-top:1px solid var(--ink)}
.ustunlukler li{padding:26px 0; border-bottom:1px solid var(--xett)}
.ustunlukler h3{font-size:clamp(1.4rem, 2.6vw, 1.7rem); margin-bottom:10px}
.ustunlukler p{color:var(--ink2); font-size:15.5px}
@media(min-width:880px){.ustunlukler{grid-template-columns:repeat(3, 1fr); gap:0 40px} .ustunlukler li{border-bottom:0; padding-bottom:8px}}
.kimler{margin-top:56px}
.kimler h3{font-size:clamp(1.5rem, 3vw, 2rem); margin-bottom:18px}
.kimler ul{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px}
.kimler li{padding:10px 16px; border-radius:var(--pill); border:1px solid var(--xett2); background:var(--sehife); font-size:15px; color:var(--ink)}

/* ---------- Mətn səhifəsi / 404 ---------- */
.metnSehife{max-width:760px}
.metnSehife h2{font-size:26px; margin:40px 0 12px}
.metnSehife h2:first-child{margin-top:0}
.metnSehife p{color:var(--ink2); font-size:17px}
.tapilmadi{padding:96px 0 120px}
.tapilmadi .heroAlt{margin-bottom:6px}

/* ---------- Footer ---------- */
.alt{background:var(--tund); color:var(--kagiz); padding:72px 0 calc(24px + env(safe-area-inset-bottom)); overflow:hidden}
.altIc{display:grid; gap:40px}
@media(min-width:768px){.altIc{grid-template-columns:1.5fr 1fr 1fr}}
.alt .brendNisan{background:var(--narTundda); color:var(--tund)}
.altBrend p{margin-top:16px; color:var(--tundInk2); max-width:340px; font-size:15px}
.sosial{display:flex; gap:10px; margin-top:20px}
.sosial a{width:42px; height:42px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--tundXett); color:var(--tundInk2); transition:color .15s, border-color .15s}
.sosial a:hover{color:var(--kagiz); border-color:var(--kagiz)}
.altBaslik{font-size:14px; font-weight:600; color:var(--tundInk2); margin-bottom:16px}
.altList{list-style:none; padding:0; margin:0; display:grid; gap:10px; font-size:15.5px}
.altList a{text-decoration:none; color:var(--kagiz)}
.altList a:hover{color:var(--narTundda)}
.altList .soluk{color:var(--tundInk2)}
.altSon{position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; margin-top:56px; padding-top:22px;
  font-size:13.5px; color:var(--tundInk2)}
.altSon::before{content:''; position:absolute; top:0; left:var(--gut); right:var(--gut); height:1px; background:var(--tundXett)}
.altSon a{color:inherit}

/* ---------- Mobil panel (masaüstündə WhatsApp başlıqdadır) ---------- */
.mobilPanel{position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; gap:10px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:rgba(244,240,232,.94);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-top:1px solid var(--xett)}
.mobilPanel a{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; border-radius:var(--pill);
  font-weight:600; text-decoration:none; font-size:15.5px}
.mpZeng{border:1.5px solid var(--ink); color:var(--ink)}
.mpWa{background:var(--ink); color:var(--kagiz); flex:1.4!important}
.mpWa .ikon{color:var(--wa)}
body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
@media(min-width:768px){
  .mobilPanel{display:none}
  body{padding-bottom:0}
}

/* ---------- Scroll-da görünmə (hereket.js) ---------- */
html.hereket .gorun{opacity:0; transform:translateY(16px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(var(--i, 0) * 70ms)}
html.hereket .gorun.gorundu{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important; transition:none!important}
}