/* =====================================================================
   rag.az — Theme 2 (professional)
   Bu fayl style.css-in ÜZƏRİNƏ yüklənir; köhnə stil silinməyib.
   Rəng dəyişmək üçün yalnız :root dəyişənlərini dəyişin.
   ===================================================================== */
:root{
  --t-brand:#E8530E;        /* loqo, fokus, kiçik vurğular */
  --t-btn:#CC4A12;          /* əsas düymə (ağ mətn, AA kontrast) */
  --t-btn-h:#B23F0E;
  --t-ink:#14171D;          /* başlıqlar */
  --t-text:#2B3038;         /* əsas mətn */
  --t-muted:#5F6672;
  --t-line:#E3E5E9;
  --t-line2:#EEF0F2;
  --t-bg:#F6F7F9;
  --t-surface:#FFFFFF;
  --t-hero:#F2F3F5;
  --t-dark:#15181E;         /* tünd bölmələr */
  --t-dark2:#1C2028;        /* tünd kartlar */
  --t-dark-line:rgba(255,255,255,.08);
  --t-dark-text:#A7AEBA;
  --t-foot:#0E1014;
  --t-ok:#157F3B;
  --t-r:10px;               /* kart radiusu */
  --t-r-sm:8px;             /* düymə / input */
  --t-font:'IBM Plex Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --t-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;

  /* köhnə dəyişənlər yeni palitraya bağlanır */
  --navy:var(--t-dark);--navy2:var(--t-dark2);--navy3:#2A2F38;--ink:var(--t-ink);
  --or:var(--t-btn);--or-h:var(--t-btn-h);--or-d:var(--t-btn);--blue:#1D5FD0;
  --bg:var(--t-bg);--line:var(--t-line);--line2:var(--t-line2);--muted:var(--t-muted);--muted-d:var(--t-dark-text);
  --font:var(--t-font);--mono:var(--t-mono);
}

/* ---------- Baza ---------- */
body{font-family:var(--t-font);color:var(--t-text);background:var(--t-bg);font-size:16px;line-height:1.55;letter-spacing:-.003em}
h1,h2,h3,.h1,.h1p,.h2{color:var(--t-ink);font-weight:600}
a{color:var(--t-btn)}a:hover{color:var(--t-btn-h)}
.mono,.sinp,.res-name,.tld-h b,.chip b,.spec b{font-family:var(--t-mono)}
::selection{background:#FBD9C6;color:var(--t-ink)}
:focus-visible{outline:2px solid var(--t-brand);outline-offset:2px}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--t-ink)!important;box-shadow:0 0 0 3px rgba(20,23,29,.08)!important}
.or{color:inherit}
.muted{color:var(--t-muted)}

/* ---------- Header: ağ, sticky, sakit ---------- */
.site-hdr{background:rgba(255,255,255,.94);color:var(--t-ink);border-bottom:1px solid var(--t-line);position:sticky;top:0;backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px)}
.hdr-in{height:68px}
.logo,.logo:hover{color:var(--t-ink)}
.logo-t{font-family:var(--t-font);font-weight:700;font-size:23px;letter-spacing:-.04em}
.logo-t b{color:var(--t-brand);font-weight:700}
.dots{grid-template-columns:repeat(3,6px);gap:3px}
.dots i{width:6px;height:6px;background:var(--t-brand)}
.dots i:nth-child(2),.dots i:nth-child(6),.dots i:nth-child(7){background:#F4A27A}
.nl{color:#3B414B;font-weight:500;font-size:14.5px;padding:8px 10px;border-radius:6px}
.nl:hover{color:var(--t-ink);background:var(--t-line2)}
.nl.on{color:var(--t-ink)}
.nl.on::after{left:10px;right:10px;bottom:-15px;height:2px;border-radius:0;background:var(--t-brand)}
.burger{border-color:var(--t-line);color:var(--t-ink);width:42px;height:42px;border-radius:var(--t-r-sm)}
.mnav{background:#fff;border-color:var(--t-line);border-radius:var(--t-r);box-shadow:0 12px 32px rgba(20,23,29,.08);margin-top:8px}
.mnav a{color:var(--t-ink);font-weight:500}
.mnav a:hover,.mnav a[aria-current]{background:var(--t-line2);color:var(--t-ink)}
.mnav .rbtn{color:#fff}

/* ---------- Düymələr ---------- */
.rbtn{height:46px;padding:0 20px;border-radius:var(--t-r-sm);font-weight:600;font-size:15px;letter-spacing:0;box-shadow:none}
.rbtn-o{background:var(--t-btn);color:#fff;box-shadow:none}
.rbtn-o:hover{background:var(--t-btn-h);color:#fff}
.rbtn-n{background:var(--t-ink);color:#fff}.rbtn-n:hover{background:#2A2F38;color:#fff}
.rbtn-l{background:#fff;color:var(--t-ink);border-color:#CFD3D9}.rbtn-l:hover{border-color:var(--t-ink);color:var(--t-ink);background:#fff}
.rbtn-x{border:1px solid var(--t-ink);color:var(--t-ink)}
.rbtn-s{height:38px;padding:0 14px;font-size:14px;border-radius:7px}
.hero .rbtn-g{color:var(--t-ink);border-color:#CFD3D9;background:#fff}
.hero .rbtn-g:hover{border-color:var(--t-ink);color:var(--t-ink);background:#fff}
.dark .rbtn-g,.side-d .rbtn-g,.cardd .rbtn-g{color:#fff;border-color:rgba(255,255,255,.28);background:transparent}

/* ---------- Tipoqrafiya ---------- */
.h1{font-size:54px;line-height:1.06;letter-spacing:-.032em}
.h1p{font-size:44px;line-height:1.1;letter-spacing:-.028em}
.h2{font-size:36px;line-height:1.15;letter-spacing:-.024em}
.eb{font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--t-btn);margin-bottom:10px}
.dark .eb,.hero .eb{color:var(--t-btn)}
.dark .eb{color:#F08A5D}
.lead{color:var(--t-muted);font-weight:400;font-size:18px}
.sh-sub{color:var(--t-muted)}
.dark,.dark .h2,.dark h2,.dark h3{color:#fff}
.dark .sh-sub{color:var(--t-dark-text)}

/* ---------- Hero: işıqlı, düz, effektsiz ---------- */
.hero{background:var(--t-hero);background-image:none;color:var(--t-ink);border-bottom:1px solid var(--t-line)}
.hero::before,.hero::after{display:none}
.hero-home>.wrap{padding-top:64px;padding-bottom:132px}
.hero-in>.wrap{padding-top:40px;padding-bottom:64px}
.badge-new{background:#fff;border-color:var(--t-line);color:var(--t-text);font-weight:500;padding:5px 12px 5px 5px}
.badge-new b{background:var(--t-ink);color:#fff;font-weight:600;border-radius:5px;letter-spacing:.02em}
.bc,.bc a{color:var(--t-muted);font-weight:500}.bc a:hover,.bc [aria-current]{color:var(--t-ink)}
.hero-ticks span,.hero-checks span{color:var(--t-text);font-weight:500}
.hero-ticks i{background:#fff;border:1px solid var(--t-line);color:var(--t-ink);border-radius:8px;width:34px;height:34px}
.sbox{box-shadow:0 1px 2px rgba(20,23,29,.04),0 8px 24px rgba(20,23,29,.06);border:1px solid var(--t-line);border-radius:12px;padding:6px}
.sinp{font-size:18px;height:54px}
.sbox .rbtn{height:54px;padding:0 26px;border-radius:8px}
.chip{background:#fff;border-color:var(--t-line);color:var(--t-ink);border-radius:8px;height:38px}
.chip:hover{border-color:var(--t-ink);background:#fff;color:var(--t-ink)}
.chip small{color:var(--t-muted)}
.dres{border:1px solid var(--t-line);border-radius:12px;box-shadow:0 8px 24px rgba(20,23,29,.06)}
.res-row{border-radius:8px}
.res-row:first-child{background:var(--t-bg)}
.res-name em{color:var(--t-btn)}

/* Hero kompozisiyası */
.hcomp-main{background:var(--t-dark);border-color:var(--t-dark);border-radius:14px;color:#fff;box-shadow:0 24px 60px rgba(20,23,29,.18)}
.hcomp-main .rack,.hcomp-main .ru{background:#1E222A}
.hcomp-dom{border:1px solid var(--t-line);border-radius:12px;box-shadow:0 12px 32px rgba(20,23,29,.10)}
.hcomp-ssl{background:#fff;color:var(--t-ink);border:1px solid var(--t-line);border-radius:12px;box-shadow:0 12px 32px rgba(20,23,29,.10)}
.hcomp-ssl svg{color:var(--t-ok)}
.mini-l{letter-spacing:.02em;text-transform:none;font-weight:600;font-size:13px;color:#8A919D}
.term{background:#0E1014}
.rack{background:var(--t-dark2);border-color:var(--t-dark-line);border-radius:8px}
.ru{background:#232730;border-radius:4px}

/* ---------- Kartlar ---------- */
.rcard{border-radius:var(--t-r);border-color:var(--t-line);box-shadow:0 1px 2px rgba(20,23,29,.04)}
.cardd{background:var(--t-dark2);border-color:var(--t-dark-line);border-radius:var(--t-r)}
.lift{transition:border-color .15s,box-shadow .15s}
.lift:hover{transform:none;border-color:#C9CDD4;box-shadow:0 6px 18px rgba(20,23,29,.07)}
.cardd.lift:hover{border-color:rgba(255,255,255,.18);box-shadow:none}
.ico{width:44px;height:44px;border-radius:8px}
.ico-o,.ico-b{background:var(--t-bg);color:var(--t-ink);border:1px solid var(--t-line)}
.ico-d{background:rgba(255,255,255,.06);color:#fff;border:1px solid var(--t-dark-line)}
.feat h3{font-weight:600}.feat p{color:var(--t-muted)}
.cardd.feat p{color:var(--t-dark-text)}
.ic-chk{color:var(--t-ok)}
.tag{border-radius:6px;font-weight:600}
.t-b{background:var(--t-line2);color:var(--t-text)}
.t-o{background:#FDEBE1;color:#9A3412}
.t-lg{font-weight:500}

/* Xidmət zolağı */
.svc-strip{margin-top:-80px}
.svc{padding:24px 20px 20px}
.svc h3{font-size:17px;font-weight:600;margin-top:16px}
.svc p{color:var(--t-muted)}
.arr{width:32px;height:32px;border:1px solid var(--t-line);color:var(--t-ink)}
.lift:hover .arr{background:var(--t-ink);border-color:var(--t-ink);color:#fff}

/* İnfrastruktur / brauzer maketləri */
.infra,.bmock{background:var(--t-dark);border-radius:14px}
.infra::before{display:none}
.infra-stats div{background:var(--t-dark2);border-radius:8px}
.bmock-in{background:var(--t-dark2);border-radius:10px}
.from-card b span{font-weight:500}

/* ---------- Tünd bölmələr ---------- */
.dark{background:var(--t-dark)}
.stats{border-top-color:var(--t-dark-line)}
.stat b{font-weight:600;letter-spacing:-.03em}
.stat.hl b{color:#fff}
.stat span{color:var(--t-dark-text)}
.stat-card b{font-weight:600}.stat-card.hl b{color:var(--t-ink)}
.side-d{border-radius:var(--t-r)}
.side-d p{color:var(--t-dark-text)}

/* ---------- Qiymət kartları ---------- */
.period{border-radius:var(--t-r-sm);padding:4px}
.period button{height:38px;border-radius:6px;font-weight:600}
.period button[aria-pressed="true"]{background:var(--t-ink)}
.period small{border-radius:5px;background:#FDEBE1;color:#9A3412}
.plan{border-radius:var(--t-r);padding:28px 24px;box-shadow:0 1px 2px rgba(20,23,29,.04)}
.plan.pop{background:#fff;color:var(--t-ink);border:2px solid var(--t-ink);box-shadow:0 12px 32px rgba(20,23,29,.08)}
.plan.pop .plan-tag,.plan.pop .plan-u,.plan.pop .plan-note,.plan.pop .pr-k{color:var(--t-muted)}
.plan.pop hr{background:var(--t-line)}
.plan.pop .spec div{border-color:var(--t-line)}
.plan.pop .spec small{color:var(--t-muted)}
.plan-badge{background:var(--t-ink);color:#fff;border-radius:5px;font-weight:600;letter-spacing:.02em}
.plan h3{font-weight:600}
.plan-price b{font-weight:600;letter-spacing:-.035em}
.plan .rbtn{background:#fff;color:var(--t-ink);border-color:#CFD3D9}
.plan .rbtn:hover{background:var(--t-ink);border-color:var(--t-ink);color:#fff}
.plan.pop .rbtn{background:var(--t-btn);border-color:var(--t-btn);color:#fff}
.plan.pop .rbtn:hover{background:var(--t-btn-h);border-color:var(--t-btn-h)}
.spec div{border-radius:8px}
.lchip{border-radius:var(--t-r-sm);font-weight:500}
.lchip[aria-pressed="true"]{background:var(--t-ink);border-color:var(--t-ink)}

/* ---------- Cədvəl, addım, forma ---------- */
.tbl th{letter-spacing:.03em;font-weight:600;background:var(--t-bg)}
.step-n{background:var(--t-ink);color:#fff;border-radius:8px;font-weight:600;width:36px;height:36px;font-size:15px}
.cardd.step .step-n{background:rgba(255,255,255,.08);color:#fff}
.inp{border-color:#CFD3D9;border-radius:var(--t-r-sm);height:46px}
.form-msg{border-radius:var(--t-r-sm);font-weight:500}
.form-card h2{font-weight:600}

/* ---------- FAQ ---------- */
.faq details{border-radius:var(--t-r)}
.faq details[open]{border-color:#C9CDD4}
.faq summary h3{font-weight:600;font-size:16px}
.faq-i{background:var(--t-bg);border-radius:6px}
.faq details[open] .faq-i{background:var(--t-ink);color:#fff}

/* ---------- SEO mətn / CTA ---------- */
.seo-box{border-radius:var(--t-r)}
.seo-box h2{font-weight:600}.seo-box h3{font-weight:600}
.seo-box p{color:#3D434D}
.cta-band{background:var(--t-dark);color:#fff;border-radius:14px}
.cta-band::before,.cta-band::after{display:none}
.cta-band .h2{color:#fff}
.cta-txt p{color:var(--t-dark-text);font-weight:400}
.cta-band .rbtn-n{background:var(--t-btn);color:#fff}.cta-band .rbtn-n:hover{background:var(--t-btn-h)}
.cta-band .rbtn-x{border:1px solid rgba(255,255,255,.3);color:#fff}.cta-band .rbtn-x:hover{background:rgba(255,255,255,.06);color:#fff}

/* ---------- Chat ---------- */
.chatw{border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.chatw-h{background:var(--t-dark2)}
.chatw-av{background:var(--t-btn);color:#fff}
.tabs button[aria-selected="true"]{background:#fff;color:var(--t-ink)}
.msg{border-radius:10px}
.msg.me{background:var(--t-ink);border-color:var(--t-ink)}

/* ---------- Footer ---------- */
.site-ftr{background:var(--t-foot);color:var(--t-dark-text)}
.site-ftr .logo,.site-ftr .logo:hover{color:#fff}
.ftr-h{font-weight:600}
.ftr-mail{color:#F08A5D}
.site-ftr nav a{color:var(--t-dark-text)}

/* ---------- Mobil alt menyu ---------- */
.bnav{display:none}
@media(max-width:768px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .bnav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(255,255,255,.97);border-top:1px solid var(--t-line);padding-bottom:env(safe-area-inset-bottom,0px);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px)}
  .bnav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:62px;color:#6B717C;font-size:11px;font-weight:500;letter-spacing:.01em;text-decoration:none;position:relative}
  .bnav a svg{width:22px;height:22px;stroke-width:1.7}
  .bnav a[aria-current="page"]{color:var(--t-ink);font-weight:600}
  .bnav a[aria-current="page"]::before{content:"";position:absolute;top:0;left:30%;right:30%;height:2px;background:var(--t-brand)}
  .bnav a:active{background:var(--t-line2)}
  .bnav .bnav-cta svg{color:var(--t-btn)}
  .hdr-r .rbtn{display:none}
}

/* ---------- Responsiv tipoqrafiya ---------- */
@media(max-width:960px){.h1{font-size:42px}.h1p{font-size:36px}}
@media(max-width:640px){
  .h1{font-size:34px;letter-spacing:-.028em}.h1p{font-size:30px}.h2{font-size:27px}
  .hdr-in{height:60px}
  .nl.on::after{display:none}
  .hero-home>.wrap{padding-top:36px;padding-bottom:110px}
  .svc{border-radius:var(--t-r)}
  .svc .arr{border:0;background:transparent}
  .lift:hover .arr{background:transparent;color:var(--t-ink)}
}
@media (prefers-reduced-motion:reduce){.site-hdr,.bnav{backdrop-filter:none}}

/* Hero kompozisiyası: terminal kartın içində qalsın */
.hcomp-main .ru:nth-child(n+6){display:none}
.hcomp-dom .tag[style]{background:var(--t-btn)!important;color:#fff!important;border-radius:6px}
.tst .stars{color:var(--t-brand)}