/* ==========================================================================
   Dr. Sahib Cəfərov — stylesheet

   Səhnə: pəncərədən düşən gündüz işığı, kağız üzərində. Uşaq həkiminin
   saytları adətən ya mavi-klinik, ya da cizgi filmi kimi olur. Bu, üçüncü
   yoldur: isti kağız zəmini, dərin şam yaşılı aksent, gil rəngli isti vurğu.
   40 illik təcrübəni nizam və hava göstərir, rəngli piktoqramlar yox.

   ŞRİFT — YOXLAMADAN DƏYİŞMƏ: Azərbaycan dilinə Ə (U+018F) və ə (U+0259)
   lazımdır. Bir çox veb şrift bunları daşımır və brauzer dilin ən çox işlənən
   hərfi üçün səssizcə başqa üzə keçir, söz ortasında, hər səhifədə. IBM Plex
   Sans tam dəsti daşıyır; ehtiyat olan Segoe UI də daşıyır, ona görə şrift
   yüklənənə qədərki müddət də düzgün görünür.

   Rənglər OKLCH-dədir: açıq/tünd rejim arasında keçəndə parlaqlıq eyni
   qalsın deyə. Neytrallar tam boz deyil, aksentə doğru azca çalır.
   ========================================================================== */

:root{
  color-scheme: light;

  /* --- zəmin: isti kağız, tam ağ deyil ------------------------------- */
  --bg:        oklch(98.6% 0.006 95);
  --bg-2:      oklch(96.4% 0.010 95);
  --bg-3:      oklch(93.8% 0.014 95);
  --surface:   oklch(99.4% 0.004 95);

  /* --- mürəkkəb ------------------------------------------------------ */
  --ink:       oklch(24% 0.020 165);
  --ink-2:     oklch(41% 0.018 165);   /* gövdə mətni, 8.2:1 */
  --ink-3:     oklch(50% 0.016 165);   /* ikinci dərəcəli */
  --ink-4:     oklch(51% 0.014 165);   /* kiçik etiketlər: çalarlı zəmində də AA */

  /* --- aksent: dərin şam yaşılı -------------------------------------- */
  --accent:      oklch(46% 0.075 175);   /* ağ üzərində 6.4:1 */
  --accent-deep: oklch(37% 0.070 175);
  --accent-soft: oklch(88% 0.038 175);   /* yalnız dolğu */
  --accent-wash: oklch(96% 0.018 175);
  --accent-line: oklch(84% 0.040 175);

  /* --- isti ikinci ton: gil ------------------------------------------ */
  --clay:      oklch(53% 0.105 48);
  --clay-wash: oklch(96% 0.022 60);
  --clay-line: oklch(87% 0.045 60);

  /* --- siqnallar ------------------------------------------------------ */
  --stop:      oklch(48% 0.145 25);
  --stop-wash: oklch(96.5% 0.020 25);
  --stop-line: oklch(87% 0.050 25);
  --hold:      oklch(48% 0.085 75);
  --hold-wash: oklch(96.5% 0.024 85);
  --hold-line: oklch(87% 0.048 85);
  --go:        oklch(45% 0.070 155);
  --go-wash:   oklch(96% 0.022 155);

  /* --- xətlər --------------------------------------------------------- */
  --line:   oklch(91% 0.008 95);
  --line-2: oklch(85% 0.012 95);

  /* --- ölçü ----------------------------------------------------------- */
  --wrap: 1140px;
  --measure: 68ch;
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;          /* kartın yuxarı həddi; daha yumrusu oyuncaq görünür */
  --header-h: 68px;

  /* Kölgə VƏ ya sərhəd, ikisi birdən yox. Səth qalxırsa kölgə, qalxmırsa
     saç teli xətt. Qarışdırmaq interfeysi "hazır şablon" kimi göstərir. */
  --lift-1: 0 1px 2px oklch(24% 0.02 165 / .05), 0 2px 6px oklch(24% 0.02 165 / .04);
  --lift-2: 0 2px 4px oklch(24% 0.02 165 / .05), 0 8px 20px oklch(24% 0.02 165 / .07);
  --lift-3: 0 4px 8px oklch(24% 0.02 165 / .05), 0 16px 40px oklch(24% 0.02 165 / .10);

  --sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Güclü, qısa əyri. CSS-in öz `ease-out`-u zəifdir və hərəkət ləng görünür. */
  --out:  cubic-bezier(.22, 1, .36, 1);
  --soft: cubic-bezier(.32, .72, .28, 1);

  /* Semantik təbəqələr; 999 yazmağa ehtiyac qalmır */
  --z-drawer: 60;
  --z-header: 70;
  --z-tool:   80;
  --z-panel:  90;
  --z-skip:  100;

  /* Əlçatanlıq paneli buna toxunur */
  --fs: 1;
}

/* --- tünd rejim: eyni səhnə, axşam işığı ----------------------------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:        oklch(20% 0.014 175);
    --bg-2:      oklch(23.5% 0.016 175);
    --bg-3:      oklch(28% 0.018 175);
    --surface:   oklch(24.5% 0.016 175);
    --ink:       oklch(96% 0.010 95);
    --ink-2:     oklch(86% 0.012 95);
    --ink-3:     oklch(74% 0.012 95);
    --ink-4:     oklch(68% 0.012 95);
    --accent:      oklch(78% 0.085 175);
    --accent-deep: oklch(88% 0.070 175);
    --accent-soft: oklch(38% 0.050 175);
    --accent-wash: oklch(27% 0.030 175);
    --accent-line: oklch(40% 0.045 175);
    --clay:      oklch(76% 0.095 55);
    --clay-wash: oklch(28% 0.035 55);
    --clay-line: oklch(40% 0.050 55);
    --stop:      oklch(78% 0.120 25);
    --stop-wash: oklch(27% 0.045 25);
    --stop-line: oklch(40% 0.070 25);
    --hold:      oklch(80% 0.090 85);
    --hold-wash: oklch(27% 0.038 85);
    --hold-line: oklch(40% 0.055 85);
    --go:        oklch(78% 0.075 155);
    --go-wash:   oklch(27% 0.035 155);
    --line:   oklch(31% 0.014 175);
    --line-2: oklch(38% 0.016 175);
    --lift-1: 0 1px 2px oklch(0% 0 0 / .30);
    --lift-2: 0 2px 6px oklch(0% 0 0 / .34), 0 10px 24px oklch(0% 0 0 / .26);
    --lift-3: 0 4px 10px oklch(0% 0 0 / .36), 0 20px 48px oklch(0% 0 0 / .32);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:        oklch(20% 0.014 175);
  --bg-2:      oklch(23.5% 0.016 175);
  --bg-3:      oklch(28% 0.018 175);
  --surface:   oklch(24.5% 0.016 175);
  --ink:       oklch(96% 0.010 95);
  --ink-2:     oklch(86% 0.012 95);
  --ink-3:     oklch(74% 0.012 95);
  --ink-4:     oklch(68% 0.012 95);
  --accent:      oklch(78% 0.085 175);
  --accent-deep: oklch(88% 0.070 175);
  --accent-soft: oklch(38% 0.050 175);
  --accent-wash: oklch(27% 0.030 175);
  --accent-line: oklch(40% 0.045 175);
  --clay:      oklch(76% 0.095 55);
  --clay-wash: oklch(28% 0.035 55);
  --clay-line: oklch(40% 0.050 55);
  --stop:      oklch(78% 0.120 25);
  --stop-wash: oklch(27% 0.045 25);
  --stop-line: oklch(40% 0.070 25);
  --hold:      oklch(80% 0.090 85);
  --hold-wash: oklch(27% 0.038 85);
  --hold-line: oklch(40% 0.055 85);
  --go:        oklch(78% 0.075 155);
  --go-wash:   oklch(27% 0.035 155);
  --line:   oklch(31% 0.014 175);
  --line-2: oklch(38% 0.016 175);
  --lift-1: 0 1px 2px oklch(0% 0 0 / .30);
  --lift-2: 0 2px 6px oklch(0% 0 0 / .34), 0 10px 24px oklch(0% 0 0 / .26);
  --lift-3: 0 4px 10px oklch(0% 0 0 / .36), 0 20px 48px oklch(0% 0 0 / .32);
}

/* ------------------------------------------------------------------ reset */
*,*::before,*::after{ box-sizing:border-box }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 20px);
  /* Əlçatanlıq paneli mətn ölçüsünü buradan böyüdür; hər şey rem-dədir. */
  font-size:calc(100% * var(--fs));
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink-2);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video,iframe{ max-width:100%; display:block }
img{ height:auto }
button,input,select,textarea{ font:inherit; color:inherit }
a{ color:var(--accent-deep); text-decoration-thickness:1px; text-underline-offset:.22em }
a:hover{ color:var(--accent) }

h1,h2,h3,h4{ margin:0; color:var(--ink); font-weight:600; line-height:1.15; letter-spacing:-.021em; text-wrap:balance }
p{ margin:0 0 1.1em; text-wrap:pretty }
p:last-child{ margin-bottom:0 }
ul,ol{ margin:0 0 1.2em; padding-left:1.25em }
li{ margin:.45em 0 }
li::marker{ color:var(--accent) }
strong{ font-weight:600; color:var(--ink) }
hr{ border:0; border-top:1px solid var(--line); margin:2.5rem 0 }
small{ font-size:.86em }
::selection{ background:var(--accent-soft); color:var(--ink) }

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

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
}
/* Əlçatanlıq panelindən açılan variant */
:root[data-motion="off"] *,
:root[data-motion="off"] *::before,
:root[data-motion="off"] *::after{
  animation-duration:.01ms!important; transition-duration:.01ms!important;
}

.ico{ width:1em; height:1em; flex:0 0 auto }

/* Yalnız ekran oxuyucusu üçün: gizli, amma fokusa düşəndə görünən deyil,
   sadəcə adlandırma məqsədi daşıyır. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:var(--z-skip);
  background:var(--accent-deep); color:var(--bg);
  padding:.75rem 1.15rem; border-radius:0 0 var(--r-sm) 0; font-weight:600;
}
.skip:focus{ left:0 }

.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto }
@media (max-width:640px){ .wrap{ width:min(100% - 1.75rem, var(--wrap)) } }

/* ----------------------------------------------------------------- header */
.header{
  position:sticky; top:0; z-index:var(--z-header);
  background:color-mix(in oklch, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line);
}
.header__bar{ min-height:var(--header-h); display:flex; align-items:center; gap:1.1rem }

.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit; flex:0 0 auto }
.brand__mark{
  width:34px; height:34px; flex:0 0 34px; border-radius:10px;
  display:grid; place-items:center;
  background:var(--accent-deep); color:var(--bg);
  font-weight:600; font-size:.78rem; letter-spacing:.03em;
}
.brand__text{ display:flex; flex-direction:column; line-height:1.25 }
.brand__name{ font-weight:600; font-size:.97rem; letter-spacing:-.015em; color:var(--ink) }
.brand__role{ font-size:.7rem; color:var(--ink-4) }

.nav{ display:flex; align-items:center; gap:.1rem; margin-left:auto }
.nav__item{ position:relative }
.nav__link{
  display:inline-flex; align-items:center; gap:.28rem;
  padding:.5rem .62rem; border-radius:var(--r-sm);
  font-size:.905rem; font-weight:500; color:var(--ink-2); text-decoration:none;
  white-space:nowrap;
  transition:color .16s var(--out), background .16s var(--out);
}
.nav__link .ico{ font-size:.95em; opacity:.5; transition:transform .18s var(--out) }
.nav__link:hover{ background:var(--accent-wash); color:var(--accent-deep) }
.nav__link[aria-current="page"],.nav__link.is-active{ color:var(--accent-deep); font-weight:600 }
.nav__item:hover .nav__link .ico{ transform:translateY(1px) }

.nav__panel{
  position:absolute; top:calc(100% + .35rem); left:50%;
  transform:translateX(-50%) translateY(-4px);
  min-width:262px; padding:.4rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--lift-3);
  display:flex; flex-direction:column; gap:.05rem;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s var(--out), transform .18s var(--out), visibility .18s;
}
.nav__item:hover .nav__panel,.nav__item:focus-within .nav__panel{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.nav__sub{
  padding:.5rem .6rem; border-radius:var(--r-sm);
  font-size:.885rem; color:var(--ink-2); text-decoration:none;
  transition:background .14s var(--out), color .14s var(--out);
}
.nav__sub:hover{ background:var(--accent-wash); color:var(--accent-deep) }
.nav__panel h4{
  font-size:.7rem; font-weight:600; color:var(--ink-4);
  padding:.6rem .6rem .25rem; letter-spacing:.02em;
}
.nav__panel h4:first-child{ padding-top:.25rem }

/* Başlıqdakı WhatsApp: nömrə yazısı yerinə tək düymə. Nömrə əlaqə
   səhifəsində və altbilgidə onsuz da tam yazılıb. */
.wa-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; flex:0 0 40px; border-radius:11px;
  background:var(--accent-deep); color:var(--bg); font-size:1.15rem;
  text-decoration:none;
  transition:transform .18s var(--out), background .18s var(--out);
}
.wa-btn:hover{ background:var(--accent); color:var(--bg); transform:translateY(-1px) }
.wa-btn:active{ transform:scale(.96) }

.burger{
  display:none; width:44px; height:40px; margin-left:auto;
  align-items:center; justify-content:center;
  background:none; border:1px solid var(--line); border-radius:var(--r-sm);
  color:var(--ink-2); font-size:1.2rem; cursor:pointer;
  transition:background .16s var(--out), border-color .16s var(--out);
}
.burger:hover{ background:var(--bg-2) }
.burger .ico--close{ display:none }
.burger[aria-expanded="true"] .ico--menu{ display:none }
.burger[aria-expanded="true"] .ico--close{ display:block }

.drawer{
  position:fixed; inset:var(--header-h) 0 0; z-index:var(--z-drawer);
  background:var(--bg); overflow-y:auto; padding:1.25rem 0 3rem;
  border-top:1px solid var(--line);
}
.drawer__group{ padding:.9rem 0; border-bottom:1px solid var(--line) }
.drawer__label{ font-size:.72rem; color:var(--ink-4); font-weight:600; margin:0 0 .35rem }
.drawer__link{
  display:block; padding:.62rem 0; font-size:1rem; color:var(--ink);
  text-decoration:none; min-height:44px;
}
.drawer__link[aria-current="page"]{ color:var(--accent-deep); font-weight:600 }
.drawer__cta{ margin-top:1.35rem; width:100%; justify-content:center }

@media (max-width:1180px){
  .header .nav{ display:none }
  .burger{ display:inline-flex }
  .header .wa-btn{ margin-left:auto }
  .header .wa-btn + .burger{ margin-left:.5rem }
}
@media (min-width:1181px){ .drawer{ display:none!important } }

/* ------------------------------------------------------------ a11y paneli */
.a11y-open{
  position:fixed; left:0; top:50%; transform:translateY(-50%); z-index:var(--z-tool);
  width:42px; height:52px; display:grid; place-items:center;
  background:var(--surface); color:var(--accent-deep);
  border:1px solid var(--line); border-left:0;
  border-radius:0 var(--r) var(--r) 0;
  box-shadow:var(--lift-1); cursor:pointer; font-size:1.15rem;
  transition:transform .2s var(--out), background .16s var(--out);
}
.a11y-open:hover{ background:var(--accent-wash); transform:translateY(-50%) translateX(2px) }
.a11y-open:active{ transform:translateY(-50%) scale(.97) }

.a11y{
  position:fixed; left:0; top:50%; transform:translateY(-50%) translateX(-102%);
  z-index:var(--z-panel); width:min(310px, calc(100vw - 1.5rem));
  background:var(--surface); border:1px solid var(--line); border-left:0;
  border-radius:0 var(--r-lg) var(--r-lg) 0;
  box-shadow:var(--lift-3); padding:1.15rem 1.15rem 1.25rem;
  transition:transform .26s var(--out), visibility .26s;
  visibility:hidden;
}
.a11y[data-open="true"]{ transform:translateY(-50%) translateX(0); visibility:visible }
.a11y__head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem }
.a11y__title{ font-size:.98rem; font-weight:600; color:var(--ink) }
.a11y__close{
  width:32px; height:32px; display:grid; place-items:center;
  background:none; border:1px solid var(--line); border-radius:var(--r-sm);
  color:var(--ink-3); cursor:pointer;
  transition:background .16s var(--out), color .16s var(--out);
}
.a11y__close:hover{ background:var(--bg-2); color:var(--ink) }
.a11y__row + .a11y__row{ margin-top:1.05rem }
.a11y__label{ display:block; font-size:.76rem; font-weight:600; color:var(--ink-4); margin-bottom:.45rem }
.a11y__opts{ display:flex; gap:.4rem }
.a11y__opt{
  flex:1; min-height:44px; padding:.5rem .35rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.3rem;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm);
  color:var(--ink-2); font-size:.85rem; font-weight:500; cursor:pointer;
  transition:background .16s var(--out), border-color .16s var(--out), color .16s var(--out);
}
.a11y__opt:hover{ background:var(--accent-wash); border-color:var(--accent-line) }
.a11y__opt[aria-pressed="true"]{ background:var(--accent-deep); border-color:var(--accent-deep); color:var(--bg) }
.a11y__opt .ico{ font-size:1.05em }
.a11y__reset{
  margin-top:1.15rem; width:100%; min-height:44px;
  background:none; border:1px dashed var(--line-2); border-radius:var(--r-sm);
  color:var(--ink-3); font-size:.85rem; cursor:pointer;
  transition:color .16s var(--out), border-color .16s var(--out);
}
.a11y__reset:hover{ color:var(--ink); border-color:var(--ink-4) }
@media (max-width:640px){
  .a11y-open{ top:auto; bottom:1rem; transform:none; border-radius:0 var(--r) var(--r) 0 }
  .a11y-open:hover{ transform:translateX(2px) }
  .a11y{ top:auto; bottom:0; transform:translateY(102%); width:100%; border-radius:var(--r-lg) var(--r-lg) 0 0; border-left:1px solid var(--line) }
  .a11y[data-open="true"]{ transform:translateY(0) }
}

/* ---------------------------------------------------------------- crumbs */
.crumbs{ border-bottom:1px solid var(--line) }
.crumbs ol{ display:flex; flex-wrap:wrap; gap:.35rem; list-style:none; margin:0; padding:.6rem 0; font-size:.795rem; color:var(--ink-4) }
.crumbs li+li::before{ content:"/"; margin-right:.35rem; color:var(--line-2) }
.crumbs a{ color:var(--ink-3); text-decoration:none }
.crumbs a:hover{ color:var(--accent-deep); text-decoration:underline }
.crumbs [aria-current]{ color:var(--ink-2) }

/* --------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:44px; padding:.7rem 1.25rem; border-radius:999px;
  border:1px solid transparent; font-size:.94rem; font-weight:600;
  letter-spacing:-.004em; text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .16s var(--out), background .16s var(--out),
             border-color .16s var(--out), color .16s var(--out);
}
.btn .ico{ font-size:1.15em }
.btn:active{ transform:scale(.975) }
.btn--primary{ background:var(--accent-deep); color:var(--bg) }
.btn--primary:hover{ background:var(--accent); color:var(--bg) }
.btn--ghost{ background:transparent; color:var(--accent-deep); border-color:var(--line-2) }
.btn--ghost:hover{ background:var(--accent-wash); border-color:var(--accent-line); color:var(--accent-deep) }
.btn--quiet{ background:transparent; color:var(--ink-2); border-color:transparent; padding-inline:.6rem }
.btn--quiet:hover{ color:var(--accent-deep); background:var(--accent-wash) }
.btn--sm{ min-height:40px; padding:.45rem .95rem; font-size:.865rem }
/* Barmaqla işlənən cihazda kiçik düymə və menyu bəndi 44 px-ə çatdırılır;
   kursorda bu, başlığı lazımsız yerə hündürləşdirərdi. */
@media (pointer: coarse){
  .btn--sm{ min-height:44px }
  .nav__link{ padding-block:.7rem }
}
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.5; pointer-events:none }
.btn--busy{ position:relative; color:transparent }
.btn--busy::after{
  content:""; position:absolute; width:16px; height:16px; border-radius:50%;
  border:2px solid color-mix(in oklch, var(--bg) 55%, transparent);
  border-top-color:var(--bg); animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

/* -------------------------------------------------------------- sections */
.sec{ padding:4.75rem 0 }
.sec--tight{ padding:3.25rem 0 }
.sec--tint{ background:var(--bg-2); border-block:1px solid var(--line) }
.sec--deep{ background:var(--bg-3); border-block:1px solid var(--line) }
@media (max-width:720px){ .sec{ padding:3.25rem 0 } .sec--tight{ padding:2.25rem 0 } }

.sec__head{ max-width:var(--measure); margin-bottom:2.4rem }
.sec__title{ font-size:clamp(1.55rem, 3.1vw, 2.05rem) }
.sec__lead{ margin-top:.85rem; color:var(--ink-2); font-size:1.06rem }
.sec__lead:last-child{ margin-bottom:0 }

/* Bölmə etiketi: bütün bölmələrin üstünə deyil, yalnız bölmə kateqoriyası
   məzmundan oxunmayanda. Boru kimi tökülən "eyebrow"lar şablon hissi verir. */
.kicker{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.78rem; font-weight:600; color:var(--accent-deep);
  margin-bottom:.7rem;
}
.kicker .ico{ font-size:1.05em }

.prose{ max-width:var(--measure) }
.prose h2{ font-size:clamp(1.3rem, 2.5vw, 1.6rem); margin:2.75rem 0 .85rem }
.prose h3{ font-size:1.09rem; margin:2rem 0 .55rem }
.prose > :first-child{ margin-top:0 }
.prose ul,.prose ol{ padding-left:1.15em }

.ihead{ display:flex; align-items:baseline; gap:.6rem }
.ihead .ico{ font-size:.86em; color:var(--accent); position:relative; top:.06em }

/* ------------------------------------------------------------------ hero */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line) }
.hero::before{
  content:""; position:absolute; inset:-30% -10% auto 40%; height:120%;
  background:radial-gradient(closest-side, var(--accent-wash), transparent 70%);
  pointer-events:none;
}
.hero__inner{
  position:relative; display:grid; grid-template-columns:1.1fr .9fr;
  gap:3.5rem; align-items:center; padding:4rem 0 3.75rem;
}
.hero__title{ font-size:clamp(2.05rem, 4.6vw, 3.1rem); line-height:1.06; letter-spacing:-.032em }
.hero__sub{
  margin:1rem 0 0; font-size:clamp(1.02rem, 1.7vw, 1.18rem);
  color:var(--accent-deep); font-weight:500; letter-spacing:-.012em; max-width:34ch;
}
.hero__lead{ margin-top:1.35rem; font-size:1.06rem; color:var(--ink-2); max-width:52ch }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.9rem }

/* Böyük rəqəmlər + kiçik etiket bloku SaaS şablonudur. Bunun yerinə
   sətir-sətir oxunan sənəd: sol tərəfdə fakt, sağda mənbə illəri. */
.creds{ margin:2.4rem 0 0; padding-top:1.6rem; border-top:1px solid var(--line); display:grid; gap:.65rem }
.creds div{ display:flex; gap:1rem; align-items:baseline; justify-content:space-between; font-size:.92rem }
.creds dt{ color:var(--ink-2) }
.creds dd{ margin:0; color:var(--ink-4); font-variant-numeric:tabular-nums; white-space:nowrap }

@media (max-width:940px){
  .hero__inner{ grid-template-columns:1fr; gap:2.25rem; padding:2.75rem 0 2.5rem }
  .hero::before{ inset:-40% -20% auto 20% }
}

/* ---------------------------------------------------------------- photos */
.shot{ position:relative; margin:0; border-radius:var(--r-lg); overflow:hidden; background:var(--bg-3) }
.shot img{ width:100%; height:100%; object-fit:cover }
.shot--wide img{ aspect-ratio:4/3 }
.shot--tall img{ aspect-ratio:3/4 }
.shot--square img{ aspect-ratio:1/1 }
.shot figcaption{
  margin-top:.6rem; font-size:.83rem; color:var(--ink-4); line-height:1.5;
}
/* Altyazı şəklin üstünə yox, altına yazılır: şəklin üstünə qoyulan
   qradiyent lent həm mətni oxunmaz edir, həm də şablon görünür. */
.shot--framed{ box-shadow:var(--lift-2) }

.split{ display:grid; grid-template-columns:1.2fr .8fr; gap:2.75rem; align-items:center }
.split--rev{ grid-template-columns:.8fr 1.2fr }
.split--even{ grid-template-columns:1fr 1fr }
.split--top{ align-items:start }
@media (max-width:880px){
  .split,.split--rev,.split--even{ grid-template-columns:1fr; gap:1.9rem }
  .split--rev > :first-child{ order:2 }
}

/* --------------------------------------------------------- editorial list */
/* Eyni ölçülü kart şəbəkəsinin əvəzi: nömrələnməmiş, saç teli xətlə
   ayrılmış siyahı. Səhifədə daha çox hava qalır və oxunuş sətirlə gedir. */
.rows{ display:grid; border-top:1px solid var(--line) }
.rows > *{ border-bottom:1px solid var(--line) }
.row{
  display:grid; grid-template-columns:2.25rem 1fr auto; gap:1.1rem;
  align-items:start; padding:1.35rem .25rem;
  text-decoration:none; color:inherit;
  transition:background .16s var(--out), padding-left .18s var(--out);
}
a.row:hover{ background:var(--accent-wash); padding-left:.7rem }
.row__ico{ color:var(--accent); font-size:1.35rem; line-height:1; padding-top:.15rem }
/* Hər ikisi <span>-dır: blok elan edilməsə, başlıq və mətn eyni sətirdə
   bir-birinə yapışır. */
.row__title{ display:block; font-size:1.06rem; font-weight:600; color:var(--ink); letter-spacing:-.014em; line-height:1.35 }
.row__text{ display:block; margin:.3rem 0 0; font-size:.93rem; color:var(--ink-3); line-height:1.6; max-width:62ch }
.row__go{ color:var(--accent); font-size:1.05rem; align-self:center; opacity:0; transform:translateX(-4px); transition:opacity .18s var(--out), transform .18s var(--out) }
a.row:hover .row__go,a.row:focus-visible .row__go{ opacity:1; transform:translateX(0) }
@media (max-width:640px){
  .row{ grid-template-columns:1.9rem 1fr; padding:1.15rem .1rem }
  .row__go{ display:none }
}
.rows--two{ grid-template-columns:1fr 1fr; column-gap:2.5rem }
@media (max-width:820px){ .rows--two{ grid-template-columns:1fr } }

/* İkonsuz variant: sadəcə başlıq və ox. Əlaqəli səhifə siyahıları üçün. */
.row--plain{ grid-template-columns:1fr auto; padding:1.05rem .25rem; align-items:center }
.row--plain .row__title{ font-size:.99rem; font-weight:500 }
.row--plain .row__go{ opacity:.45; transform:none }
a.row--plain:hover .row__go{ opacity:1 }

/* ----------------------------------------------------------------- cards */
/* Kart yalnız səth həqiqətən qalxanda işlənir. Sərhəd VƏ kölgə birlikdə
   verilmir: biri seçilir. */
.card{
  display:flex; flex-direction:column;
  padding:1.5rem; border-radius:var(--r);
  background:var(--surface); border:1px solid var(--line);
}
.card--lift{ border-color:transparent; box-shadow:var(--lift-2) }
a.card{ text-decoration:none; color:inherit; transition:border-color .18s var(--out), transform .18s var(--out) }
a.card:hover{ border-color:var(--accent-line); transform:translateY(-2px) }
.card__ico{ color:var(--accent); font-size:1.5rem; margin-bottom:.85rem }
.card__title{ font-size:1.04rem; margin-bottom:.4rem }
.card__text{ font-size:.925rem; color:var(--ink-3); line-height:1.6 }
.card ul{ margin:.85rem 0 0; padding-left:1.1em; font-size:.9rem; color:var(--ink-3) }
.card__more{ margin-top:1rem; font-size:.86rem; font-weight:600; color:var(--accent-deep); display:inline-flex; align-items:center; gap:.35rem }

.grid{ display:grid; gap:1.1rem }
.grid--2{ grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)) }
.grid--3{ grid-template-columns:repeat(auto-fit, minmax(288px, 1fr)) }

/* -------------------------------------------------------------- callouts */
/* Yan zolaq yoxdur: fon çaları, tam saç teli sərhəd və ikon kifayətdir. */
.callout{
  margin:1.9rem 0; padding:1.25rem 1.4rem;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--bg-2); font-size:.955rem; color:var(--ink-2);
}
.callout__title{ display:flex; align-items:center; gap:.5rem; font-weight:600; color:var(--ink); margin-bottom:.55rem }
.callout__title .ico{ font-size:1.15em; color:var(--accent) }
.callout--warn{ background:var(--hold-wash); border-color:var(--hold-line) }
.callout--warn .callout__title{ color:var(--hold) }
.callout--warn .callout__title .ico{ color:var(--hold) }
.callout--stop{ background:var(--stop-wash); border-color:var(--stop-line) }
.callout--stop .callout__title{ color:var(--stop) }
.callout--stop .callout__title .ico{ color:var(--stop) }
.callout--stop li::marker{ color:var(--stop) }
.callout ul{ margin:0; padding-left:1.15em }
.callout li{ font-size:.94rem }

/* ----------------------------------------------------------------- quote */
/* Sol zolaq deyil: böyük dırnaq işarəsi və optik sıxılmış sətir. */
.quote{ margin:2.2rem 0; padding-left:2.4rem; position:relative }
.quote::before{
  content:"\201C"; position:absolute; left:0; top:-.35em;
  font-size:3.4rem; line-height:1; color:var(--accent-soft);
}
.quote p{ font-size:1.09rem; line-height:1.55; color:var(--ink); letter-spacing:-.012em }
.quote footer{ margin-top:.7rem; font-size:.83rem; color:var(--ink-4) }

/* ------------------------------------------------------------- checklist */
.checks{ list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:.6rem }
.checks li{ display:flex; gap:.6rem; align-items:flex-start; margin:0; font-size:.95rem; color:var(--ink-2) }
.checks .ico{ color:var(--accent); font-size:1.15em; position:relative; top:.18em }

/* ------------------------------------------------------------- timeline */
.tl{ list-style:none; margin:0; padding:0; position:relative }
.tl::before{ content:""; position:absolute; left:5px; top:.7rem; bottom:.7rem; width:1px; background:var(--line-2) }
.tl li{ position:relative; padding:0 0 1.6rem 1.9rem; margin:0 }
.tl li:last-child{ padding-bottom:0 }
.tl li::before{
  content:""; position:absolute; left:0; top:.52rem; width:11px; height:11px;
  border-radius:50%; background:var(--bg); border:2px solid var(--accent);
}
.tl__when{ display:block; font-size:.78rem; font-weight:600; color:var(--accent-deep); font-variant-numeric:tabular-nums }
.tl__what{ display:block; font-weight:600; color:var(--ink); margin-top:.2rem; font-size:1rem }
.tl__note{ display:block; color:var(--ink-3); font-size:.9rem; margin-top:.2rem; line-height:1.55 }

/* ----------------------------------------------------------------- facts */
.facts{ margin:0; display:grid; gap:0; border-top:1px solid var(--line) }
.facts > div{ display:grid; grid-template-columns:9rem 1fr; gap:1rem; padding:.85rem 0; border-bottom:1px solid var(--line) }
.facts dt{ font-size:.85rem; color:var(--ink-4) }
.facts dd{ margin:0; font-size:.95rem; color:var(--ink); font-weight:500 }
@media (max-width:560px){ .facts > div{ grid-template-columns:1fr; gap:.15rem } }

/* ------------------------------------------------------------------- faq */
details[data-faq]{ border-bottom:1px solid var(--line) }
details[data-faq] summary{
  list-style:none; cursor:pointer; padding:1.15rem 2.5rem 1.15rem 0;
  position:relative; font-weight:600; color:var(--ink); font-size:1rem;
  transition:color .16s var(--out);
}
details[data-faq] summary::-webkit-details-marker{ display:none }
details[data-faq] summary:hover{ color:var(--accent-deep) }
details[data-faq] summary::after{
  content:""; position:absolute; right:.45rem; top:1.45rem;
  width:8px; height:8px; border-right:1.75px solid var(--accent); border-bottom:1.75px solid var(--accent);
  transform:rotate(45deg); transition:transform .2s var(--out);
}
details[data-faq][open] summary::after{ transform:rotate(-135deg); top:1.7rem }
details[data-faq] .faq__body{ padding:0 2.5rem 1.25rem 0; color:var(--ink-2); font-size:.96rem }

/* ----------------------------------------------------------------- media */
.media{ display:grid; border-top:1px solid var(--line) }
.media__item{
  display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:center;
  padding:1.25rem .25rem; border-bottom:1px solid var(--line);
  text-decoration:none; color:inherit;
  transition:background .16s var(--out), padding-left .18s var(--out);
}
a.media__item:hover{ background:var(--accent-wash); padding-left:.7rem }
.media__ico{ color:var(--accent); font-size:1.3rem }
.media__kicker{ display:block; font-size:.76rem; color:var(--ink-4); margin-bottom:.2rem }
.media__title{ font-size:1rem; font-weight:600; color:var(--ink); margin:0; line-height:1.4 }
.media__note{ margin:.3rem 0 0; font-size:.9rem; color:var(--ink-3) }
.media__go{ color:var(--ink-4); font-size:1rem }
a.media__item:hover .media__go{ color:var(--accent) }

.video{ position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--ink); aspect-ratio:16/9; box-shadow:var(--lift-2) }
.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }

/* ------------------------------------------------------------------- map */
.map{ position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--bg-3); aspect-ratio:16/10 }
.map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.map--tall{ aspect-ratio:4/3 }
:root[data-theme="dark"] .map iframe{ filter:invert(.9) hue-rotate(180deg) saturate(.7) }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .map iframe{ filter:invert(.9) hue-rotate(180deg) saturate(.7) } }
@media (max-width:640px){ .map,.map--tall{ aspect-ratio:1/1 } }
.actions{ display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.1rem }

/* ----------------------------------------------------------------- vcard */
.vcard{ max-width:500px; margin-inline:auto; padding:2rem 1.75rem 1.85rem; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--lift-3); text-align:center }
.vcard__photo{ width:116px; height:116px; margin:0 auto 1.1rem; border-radius:50%; overflow:hidden; background:var(--bg-3) }
.vcard__photo img{ width:100%; height:100%; object-fit:cover }
.vcard__photo picture{ display:contents }
.vcard__name{ font-size:1.45rem; letter-spacing:-.025em }
.vcard__role{ margin:.35rem 0 0; color:var(--accent-deep); font-weight:500 }
.vcard__place{ margin:.2rem 0 0; color:var(--ink-4); font-size:.9rem }
.vcard__rows{ display:grid; margin:1.6rem 0 0; text-align:left; border-top:1px solid var(--line) }
.vcard__row{
  display:grid; grid-template-columns:auto 1fr; gap:.85rem; align-items:center;
  padding:.85rem .15rem; border-bottom:1px solid var(--line);
  text-decoration:none; color:var(--ink); min-height:44px;
  transition:background .16s var(--out), padding-left .18s var(--out);
}
a.vcard__row:hover{ background:var(--accent-wash); padding-left:.55rem }
.vcard__row .ico{ color:var(--accent); font-size:1.2rem }
.vcard__k{ display:block; font-size:.74rem; color:var(--ink-4) }
.vcard__v{ display:block; font-weight:600; font-size:.96rem; margin-top:.05rem }
.vcard__v small{ display:block; font-weight:400; font-size:.82rem; color:var(--ink-3); margin-top:.1rem }
.vcard__actions{ display:grid; gap:.55rem; margin-top:1.4rem }

/* ------------------------------------------------------------------ form */
.form{ display:grid; gap:1.15rem; max-width:34rem }
.field{ display:grid; gap:.4rem }
.field > label{ font-size:.875rem; font-weight:600; color:var(--ink) }
.field .hint{ font-size:.8rem; color:var(--ink-4) }
.req{ color:var(--stop); font-weight:400 }
.input,.select,.textarea{
  width:100%; min-height:46px; padding:.65rem .8rem;
  background:var(--bg); color:var(--ink);
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  transition:border-color .16s var(--out), background .16s var(--out);
}
.input::placeholder,.textarea::placeholder{ color:var(--ink-4) }
.input:hover,.select:hover,.textarea:hover{ border-color:var(--ink-4) }
.input:focus-visible,.select:focus-visible,.textarea:focus-visible{ border-color:var(--accent); outline-offset:1px }
.textarea{ min-height:110px; resize:vertical; line-height:1.55 }
.select{ appearance:none; padding-right:2rem; background-image:none }

.tel-group{ display:grid; grid-template-columns:auto auto 1fr; gap:.4rem; align-items:stretch }
.tel-prefix{
  display:inline-flex; align-items:center; padding:0 .7rem;
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r-sm);
  color:var(--ink-2); font-weight:600; font-variant-numeric:tabular-nums;
}
.tel-group .select{ min-width:5.4rem }
.tel-group .input{ font-variant-numeric:tabular-nums; letter-spacing:.02em }
@media (max-width:420px){ .tel-group{ grid-template-columns:auto 1fr } .tel-group .input{ grid-column:1 / -1 } }

.field[data-invalid="true"] .input,
.field[data-invalid="true"] .select,
.field[data-invalid="true"] .textarea,
.field[data-invalid="true"] .tel-prefix{ border-color:var(--stop) }
.error{ display:none; font-size:.82rem; color:var(--stop) }
.field[data-invalid="true"] .error{ display:block }
.form__note{ font-size:.85rem; color:var(--ink-4); max-width:44ch }
.form__status{ font-size:.9rem; padding:.85rem 1rem; border-radius:var(--r-sm); background:var(--go-wash); color:var(--go); display:none }
.form__status[data-show="true"]{ display:block }

/* ------------------------------------------------------------------ band */
.band{ background:var(--accent-deep); color:var(--bg) }
.band__inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.75rem; padding:2.9rem 0 }
.band__title{ font-size:clamp(1.3rem, 2.5vw, 1.65rem); color:var(--bg) }
.band__text{ margin:.55rem 0 0; color:color-mix(in oklch, var(--bg) 82%, transparent); max-width:50ch }
.band__actions{ display:flex; flex-wrap:wrap; gap:.65rem }
.band .btn--primary{ background:var(--bg); color:var(--accent-deep) }
.band .btn--primary:hover{ background:var(--accent-wash); color:var(--accent-deep) }
.band .btn--ghost{ color:var(--bg); border-color:color-mix(in oklch, var(--bg) 45%, transparent) }
.band .btn--ghost:hover{ background:color-mix(in oklch, var(--bg) 14%, transparent); border-color:var(--bg); color:var(--bg) }

/* --------------------------------------------------------------- contact */
.contact{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:0; border-top:1px solid var(--line) }
.contact > div{ padding:1.4rem 1.5rem 1.4rem 0; border-bottom:1px solid var(--line) }
.contact__label{ display:flex; align-items:center; gap:.45rem; font-size:.78rem; color:var(--ink-4); font-weight:600; margin:0 0 .5rem }
.contact__label .ico{ color:var(--accent); font-size:1.1em }
.contact__value{ font-size:1.14rem; font-weight:600; color:var(--ink); text-decoration:none; display:block; letter-spacing:-.018em }
a.contact__value:hover{ color:var(--accent-deep) }
.contact__sub{ margin:.4rem 0 0; font-size:.88rem; color:var(--ink-3) }
.contact__list{ display:grid; gap:.3rem; margin-top:.55rem }
.contact__list a{ font-size:.98rem; font-weight:500; color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:.4rem }
.contact__list a:hover{ color:var(--accent-deep) }

/* ---------------------------------------------------------------- footer */
.footer{ background:var(--bg-2); border-top:1px solid var(--line); padding:3.25rem 0 1.75rem; margin-top:0 }
.footer__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:2.5rem }
.footer__col{ display:flex; flex-direction:column; gap:.42rem }
.footer__col a{ color:var(--ink-2); text-decoration:none; font-size:.9rem; transition:color .16s var(--out) }
.footer__col a:hover{ color:var(--accent-deep) }
.footer__label{ font-size:.76rem; color:var(--ink-4); font-weight:600; margin:0 0 .35rem }
.footer__name{ margin:.75rem 0 0; font-weight:600; color:var(--ink); font-size:1.02rem }
.footer__role{ margin:.1rem 0 0; font-size:.86rem; color:var(--ink-3) }
.footer__note{ margin:.7rem 0 0; font-size:.84rem; color:var(--ink-4); line-height:1.55; max-width:32ch }
.footer__addr{ margin:.6rem 0 0; font-size:.86rem; color:var(--ink-3); line-height:1.6 }
.footer__hint{ font-size:.74rem; color:var(--ink-4) }
.footer__base{ margin-top:2.75rem; padding-top:1.35rem; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; align-items:flex-start }
.footer__base p{ margin:0; font-size:.8rem; color:var(--ink-4) }
.footer__disc{ max-width:58ch; line-height:1.55; margin-top:.45rem!important }
.footer__credit{ flex:0 0 auto; white-space:nowrap }
.footer__credit a{ color:var(--ink-2); font-weight:600; text-decoration:none; border-bottom:1px solid var(--line-2) }
.footer__credit a:hover{ color:var(--accent-deep); border-bottom-color:var(--accent) }
@media (max-width:860px){ .footer__grid{ grid-template-columns:1fr 1fr; gap:2rem } }
@media (max-width:560px){ .footer__grid{ grid-template-columns:1fr } }

/* ------------------------------------------------------------------- 404 */
.err{ padding:6rem 0; text-align:center }
.err h1{ font-size:clamp(2rem, 5.5vw, 2.9rem); letter-spacing:-.03em }
.err p{ margin-top:.9rem; color:var(--ink-2); max-width:44ch; margin-inline:auto }
.err .btn{ margin-top:1.9rem }

/* ----------------------------------------------------------------- print */
@media print{
  .header,.drawer,.crumbs,.band,.a11y,.a11y-open,.btn,.map,.video{ display:none!important }
  body{ background:#fff; color:#000; font-size:11pt }
  .sec{ padding:1rem 0 }
  a{ text-decoration:none; color:#000 }
  .shot{ break-inside:avoid }
}