/* ====== NAVBAR — bu hissəni öz CSS faylına köçür ====== */
  :root{
    --nav-text:#2b2b3a;
    --btn-bg:#16122b;
    --btn-bg-hover:#2a2350;
    --primary-blue:#007AD6;
    --pill-bg:var(--primary-blue);     /* hover kapsulunun rəngi */
    --pill-shadow:rgba(0,122,214,.35);

    /* Dinamik şüşə — JS scroll-a görə dəyişir */
    --glass-blur:8px;                  /* səhifənin başında az blur */
    --glass-tint:.16;                  /* ağ şüşənin şəffaflığı */
    --glass-sat:180%;
    --mx:30%; --my:0%;                 /* kursor işığının yeri */
    --shine-o:0;                       /* kursor işığının gücü */
  }
  *{box-sizing:border-box}
  body{margin:0; font-family:"DM Sans",system-ui,sans-serif}

  .nav-wrap{
    position:sticky; top:0; z-index:100;
    padding:12px 16px;
  }

  /* ---------- LIQUID GLASS ---------- */
  .navbar{
    position:relative; isolation:isolate;
    max-width:1340px; margin:0 auto;
    height:76px;
    display:flex; align-items:center; justify-content:space-between;
    gap:24px;
    padding:0 13px 0 10px;
    border-radius:999px;
    box-shadow:
      0 10px 30px rgba(60,50,140,.16),
      0 2px 6px rgba(60,50,140,.08);
    transition:box-shadow .4s ease-out;
  }
  /* bütün şüşə qatları navbarın formasını alır */
  .lg-layer{position:absolute; inset:0; border-radius:inherit; pointer-events:none}

  /* 1) Arxanı bulanıqlaşdıran + əyən (refraction) qat */
  .lg-effect{
    z-index:0; overflow:hidden;
    backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  }
  /* Chromium brauzerlərdə maye əyilmə (SVG displacement) */
  .lg-distort .lg-effect{filter:url(#lg-liquid)}

  /* 2) Ağ rəng tonu */
  .lg-tint{
    z-index:1;
    background:
      linear-gradient(180deg,rgba(255,255,255,calc(var(--glass-tint) + .12)) 0%,
                              rgba(255,255,255,var(--glass-tint)) 55%,
                              rgba(255,255,255,calc(var(--glass-tint) * .6)) 100%);
  }

  /* 3) Şüşə kənarlarının işığı (specular rim) */
  .lg-shine{
    z-index:2;
    box-shadow:
      inset 1.5px 1.5px 1px rgba(255,255,255,.75),
      inset -1px -1px 1px rgba(255,255,255,.45),
      inset 0 0 18px rgba(255,255,255,.25),
      inset 0 -10px 20px -12px rgba(120,90,200,.18);
    border:1px solid rgba(255,255,255,.35);
  }

  /* 4) Kursoru izləyən yumşaq işıq ləkəsi */
  .lg-glow{
    z-index:3; overflow:hidden; opacity:var(--shine-o);
    background:radial-gradient(220px 120px at var(--mx) var(--my),
                rgba(255,255,255,.38), rgba(255,255,255,0) 70%);
    transition:opacity .35s ease-out;
  }

  /* 5) İncə dənəvər tekstura
     (qeyd: bu qatlarda mix-blend-mode İŞLƏTMƏ — Chrome-da backdrop blur-u söndürür) */
  .lg-grain{
    z-index:3; overflow:hidden; opacity:.06;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* Məzmun şüşənin üstündə */
  .logo,.nav-links,.nav-actions,.burger{position:relative; z-index:5}

  /* backdrop-filter dəstəklənməyən brauzerlər üçün */
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .lg-tint{background:rgba(255,255,255,.82)}
  }

  /* Logo */
  .logo{display:flex; align-items:center; flex:none; border-radius:50%; transition:transform .3s cubic-bezier(.22,1,.36,1)}
  .logo img{display:block; width:60px; height:60px; object-fit:contain}
  .logo:hover{transform:rotate(-8deg) scale(1.04)}
  .logo:focus-visible{outline:2px solid var(--primary-blue); outline-offset:3px}

  /* Linklər + sürüşən pill hover effekti */
  .nav-links{
    display:flex; align-items:center; gap:2px;
    list-style:none; margin:0; padding:0;
    --pill-x:0px; --pill-w:0px; --pill-o:0;
  }
  .nav-links::before{
    content:""; position:absolute; left:0; top:50%;
    height:44px; width:var(--pill-w);
    transform:translate(var(--pill-x),-50%);
    opacity:var(--pill-o);
    border-radius:999px;
    background:var(--pill-bg);
    box-shadow:0 6px 18px var(--pill-shadow), inset 0 1px 0 rgba(255,255,255,.18);
    transition:
      transform .3s cubic-bezier(.22,1,.36,1),
      width .3s cubic-bezier(.22,1,.36,1),
      opacity .2s ease-out;
    pointer-events:none; z-index:0;
  }
  .nav-links.no-anim::before{transition:none}
  .nav-links a{
    position:relative; z-index:1;
    display:inline-block; padding:11px 15px; border-radius:999px; white-space:nowrap;
    color:var(--nav-text); text-decoration:none;
    font-size:15px; font-weight:500;
    transition:color .25s ease-out;
  }
  .nav-links a.is-lit{color:#fff}
  .nav-links a:focus-visible{outline:2px solid var(--pill-bg); outline-offset:2px}

  /* Sağ tərəf */
  .nav-actions{display:flex; align-items:center; gap:8px}
  .signup{display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 16px; border-radius:999px; color:#111; text-decoration:none; font-size:15px; font-weight:600; white-space:nowrap; transition:background .2s}
  .signup:hover{background:rgba(255,255,255,.6)}
  .signup svg{width:18px; height:18px}
  .signin{
    display:inline-flex; align-items:center; justify-content:center;
    height:50px; padding:0 24px; border-radius:999px; white-space:nowrap;
    background:radial-gradient(120% 140% at 30% 20%,#3a3168 0%,var(--btn-bg) 60%);
    color:#fff; text-decoration:none; font-size:15px; font-weight:500;
    box-shadow:0 4px 14px rgba(22,18,43,.3), inset 0 1px 0 rgba(255,255,255,.15);
    transition:transform .15s, background .2s;
  }
  .signin:hover{transform:translateY(-1px); background:var(--btn-bg-hover)}

  /* Mobil menyu düyməsi */
  .burger{
    display:none; width:44px; height:44px; border:0; border-radius:50%;
    background:rgba(255,255,255,.45); cursor:pointer;
    align-items:center; justify-content:center;
  }
  .burger svg{width:22px; height:22px}

  @media (max-width:1180px){
    .navbar{height:64px; padding:0 10px 0 10px}
    .logo img{width:50px; height:50px}
    .burger{display:inline-flex}
    .nav-links,.nav-actions{display:none}
    .navbar.open{flex-wrap:wrap; height:auto; padding:7px 12px 18px 10px; border-radius:28px}
    .navbar.open .nav-links{display:flex; flex-direction:column; align-items:flex-start; gap:6px; width:100%; order:3; padding-top:12px}
    .navbar.open .nav-actions{display:flex; width:100%; order:4; justify-content:space-between}
    .nav-links::before{display:none}
    .nav-links a{padding:10px 16px}
    .nav-links a.is-lit{color:var(--nav-text)}
    .nav-links a.active{background:var(--pill-bg); color:#fff}
  }

  @media (prefers-reduced-motion:reduce){
    .nav-links::before,.nav-links a,.lg-glow,.navbar{transition:none}
  }
  /* ====== NAVBAR SONU ====== */



  /* ====== ƏJDAHA SCROLL ANİMASİYASI ====== */
  .dragon-hero{
    position:relative;
    height:460vh;                 /* animasiyanın uzunluğu: artır = daha yavaş */
    margin-top:-100px;            /* navbarın altından başlasın */
    background:#f3f8fe;
  }
  .dh-sticky{
    position:sticky; top:0; height:100vh; overflow:hidden;
    display:grid; place-items:center;
  }
  .dh-bg{
    position:absolute; inset:0; pointer-events:none;
    background:
      radial-gradient(42vmax 42vmax at 50% 52%, rgba(0,122,214,calc(.08 + var(--glow,0) * .16)), transparent 70%),
      radial-gradient(30vmax 22vmax at 12% 8%, rgba(111,163,255,.28), transparent 70%),
      radial-gradient(30vmax 22vmax at 90% 6%, rgba(255,143,207,.22), transparent 70%),
      #f3f8fe;
  }
  .dh-stage{
    position:relative; z-index:1;
    width:min(78vh, 86vw, 700px); aspect-ratio:1;
    perspective:1200px;
    transform:translateX(var(--shift,0px)) scale(var(--scale,1));
    will-change:transform;
  }
  .dh-tilt{width:100%; height:100%; transform-style:preserve-3d; will-change:transform}
  .dh-svg{width:100%; height:100%; display:block; overflow:visible}

  .dh-ghost{fill:#007AD6; opacity:.07}
  .dh-fill, .dh-letter, .dh-since{fill:var(--primary-blue,#007AD6)}
  .dh-mask{fill:none; stroke:#fff; stroke-width:46; stroke-linecap:round; stroke-linejoin:round}
  .dh-energy{
    fill:none; stroke:#fff; stroke-width:16; stroke-linecap:round; stroke-linejoin:round;
    opacity:0;
  }
  .dh-letter{transform-box:fill-box; transform-origin:center; opacity:0}
  .dh-since{opacity:0}
  .dh-tip{opacity:0; mix-blend-mode:screen}

  /* Mətn */
  .dh-copy{
    position:absolute; z-index:2;
    left:max(24px, calc(50% - 600px)); top:50%;
    transform:translateY(calc(-50% + var(--copy-y,24px)));
    opacity:var(--copy-o,0);
    max-width:560px; pointer-events:none;
  }
  .dh-copy.on{pointer-events:auto}
  /* Referens üslubu: iri, yüngül (500) başlıq, sıx sətir aralığı */
  .dh-title{
    margin:0; font-size:clamp(44px,5.6vw,84px); font-weight:500; line-height:1.04;
    letter-spacing:-.045em; color:#0b0f1a;
  }
  .dh-sub{margin:26px 0 40px; max-width:420px; font-size:19px; line-height:1.5; color:#5d6475}
  .dh-actions{display:flex; flex-wrap:wrap; gap:14px}
  .dh-btn{
    display:inline-flex; align-items:center; gap:12px; height:58px; padding:0 30px 0 12px; border-radius:999px;
    font-size:16px; font-weight:600; text-decoration:none; transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, background .25s;
  }
  .dh-btn .i{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; flex:none}
  .dh-btn svg{width:18px; height:18px}
  .dh-btn.primary{background:#007AD6; color:#fff; box-shadow:0 12px 30px rgba(0,122,214,.35), inset 0 1px 0 rgba(255,255,255,.22)}
  .dh-btn.primary .i{background:rgba(255,255,255,.2)}
  .dh-btn.primary:hover{transform:translateY(-2px); box-shadow:0 16px 34px rgba(0,122,214,.45)}
  .dh-btn.ghost{
    padding:0 26px 0 20px; color:#1b2030; background:rgba(255,255,255,.72);
    backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%);
    box-shadow:0 10px 28px rgba(20,30,60,.08), inset 0 0 0 1px rgba(255,255,255,.9);
  }
  .dh-btn.ghost .i{width:auto; height:auto}
  .dh-btn.ghost:hover{transform:translateY(-2px); background:#fff}

  .dh-hint{
    position:absolute; z-index:2; bottom:36px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:6px;
    font-size:13px; color:#3a4a5e; opacity:var(--hint-o,1);
  }
  .dh-hint svg{width:20px; height:20px; animation:dh-bob 1.6s ease-in-out infinite}
  @keyframes dh-bob{50%{transform:translateY(6px)}}
  .dh-bar{position:absolute; z-index:2; left:50%; bottom:20px; width:120px; height:3px; margin-left:-60px; border-radius:3px; background:rgba(0,122,214,.15); overflow:hidden; opacity:var(--hint-o,1)}
  .dh-bar i{display:block; height:100%; width:100%; background:#007AD6; transform-origin:left; transform:scaleX(0)}

  /* Telefon: mətn emblemin altında */
  @media (max-width:900px){
    .dh-stage{width:min(62vh, 88vw)}
    .dh-copy{left:24px; right:24px; top:auto; bottom:48px; max-width:none; text-align:center; transform:translateY(var(--copy-y,24px))}
    .dh-title{font-size:clamp(36px,10vw,52px)}
    .dh-sub{margin:14px auto 22px; font-size:17px}
    .dh-actions{justify-content:center}
    .dh-btn{height:52px}
  }
  @media (prefers-reduced-motion:reduce){
    .dragon-hero{height:auto}
    .dh-sticky{position:relative; height:auto; min-height:100vh; padding:120px 24px 60px}
    .dh-hint svg{animation:none}
  }
  /* ====== ƏJDAHA SONU ====== */


  #kitablar,#neticeler,#filiallar,#kurslar{scroll-margin-top:96px}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  /* ====== KİTABLAR — slider (referens: Figma "smart animate" kart) ====== */
  .books{
    --ease-s:cubic-bezier(.76,0,.24,1);
    --dur:1.2s;
    position:relative; padding:120px 24px 110px;
    background:var(--bk-tint,#fbeee2);
    transition:background var(--dur) var(--ease-s);
  }
  .books-head{max-width:1200px; margin:0 auto 34px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap}
  .books-head small{display:block; font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--bk-ink,#a4520f); transition:color var(--dur) var(--ease-s)}
  .books-head h2{margin:10px 0 0; font-size:clamp(34px,4.4vw,56px); font-weight:500; letter-spacing:-.04em; line-height:1.04; color:#0b0f1a}
  .books-head p{margin:0; max-width:360px; color:#5d6475; font-size:17px; line-height:1.5}

  .bk-card{
    position:relative; max-width:1200px; margin:0 auto; aspect-ratio:16/9; min-height:520px;
    border-radius:28px; overflow:hidden; isolation:isolate;
    background:var(--bk-bg,#e8771e);
    box-shadow:0 40px 90px -30px var(--bk-shadow,rgba(160,80,10,.45));
    transition:background var(--dur) var(--ease-s), box-shadow var(--dur) var(--ease-s);
  }
  /* yüngül toz / işıq teksturası */
  .bk-card::before{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(60% 70% at 50% 45%,rgba(255,255,255,.22),transparent 70%),
      radial-gradient(1.5px 1.5px at 20% 30%,rgba(255,255,255,.5),transparent 60%),
      radial-gradient(1.5px 1.5px at 75% 22%,rgba(255,255,255,.45),transparent 60%),
      radial-gradient(1px 1px at 62% 70%,rgba(255,255,255,.5),transparent 60%),
      radial-gradient(1.5px 1.5px at 35% 78%,rgba(255,255,255,.35),transparent 60%);
  }

  /* Üst sıra */
  .bk-top{position:absolute; z-index:5; left:28px; right:28px; top:24px; display:flex; justify-content:space-between; align-items:center}
  .bk-label{font-family:"Anton",Impact,sans-serif; font-size:17px; letter-spacing:.06em; color:#fff; text-transform:uppercase}
  .bk-cta{display:inline-flex; align-items:center; height:38px; padding:0 18px; border-radius:999px; background:#fff; color:#111; font-size:13.5px; font-weight:700; text-decoration:none; box-shadow:0 6px 16px rgba(0,0,0,.12); transition:transform .25s}
  .bk-cta:hover{transform:translateY(-2px)}

  /* Nəhəng başlıq — şaquli sürüşən stack */
  .bk-titles{position:absolute; z-index:1; left:0; right:0; top:calc(9% - var(--tline) * .2); height:calc(var(--tline) * 1.4); --tline:clamp(150px,25vw,340px); overflow:hidden; pointer-events:none}
  .bk-titles ul{list-style:none; margin:0; padding:0; transform:translateY(calc(var(--i,0) * var(--tline) * -1.4)); transition:transform var(--dur) var(--ease-s)}
  .bk-titles li{
    height:calc(var(--tline) * 1.4); display:flex; align-items:center; justify-content:center;
    font-family:"Anton","Oswald",Impact,sans-serif; font-size:calc(var(--tline) * var(--fs,1)); line-height:1; letter-spacing:0; text-transform:uppercase; white-space:nowrap;
    background:linear-gradient(180deg,rgba(255,255,255,.95) 18%,rgba(255,255,255,.18) 92%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }

  /* Kitab üzlükləri */
  .bk-stage{position:absolute; z-index:3; left:50%; top:50%; width:clamp(190px,21vw,280px); aspect-ratio:210/297; transform:translate(-50%,-47%); perspective:1600px}
  .bk-stage::before{content:""; position:absolute; inset:-35% -60%; background:radial-gradient(closest-side,var(--bk-acc,rgba(255,255,255,.5)),transparent 70%); opacity:.55; filter:blur(10px); transition:background var(--dur) var(--ease-s); z-index:-1}
  .bk-book{
    position:absolute; inset:0; transform-style:preserve-3d;
    transform:translateY(130%) rotateY(-28deg) rotateX(8deg) rotateZ(6deg); opacity:0;
    transition:transform var(--dur) var(--ease-s), opacity calc(var(--dur) * .6) var(--ease-s);
  }
  .bk-book.prev{transform:translateY(-140%) rotateY(-28deg) rotateX(-6deg) rotateZ(-10deg); opacity:0}
  .bk-book.on{transform:translateY(0) rotateY(-16deg) rotateX(4deg) rotateZ(0); opacity:1}
  .bk-book.on .bk-float{animation:bk-float 6s ease-in-out infinite}
  @keyframes bk-float{50%{transform:translateY(-12px) rotateY(6deg)}}
  .bk-float{position:absolute; inset:0; transform-style:preserve-3d}
  .bk-cover{
    position:absolute; inset:0; border-radius:3px 9px 9px 3px; overflow:hidden;
    background:var(--cv) center/cover no-repeat;
    box-shadow:inset 6px 0 10px -4px rgba(0,0,0,.35), inset -1px 0 0 rgba(255,255,255,.2), 0 30px 60px rgba(0,0,0,.35);
    transform:translateZ(14px);
  }
  img.bk-cover{display:block; width:100%; height:100%; object-fit:cover}
  .bk-cover::after{content:""; position:absolute; inset:0; background:linear-gradient(105deg,rgba(0,0,0,.18) 0%,rgba(255,255,255,.18) 4%,rgba(255,255,255,0) 30%,rgba(255,255,255,.08) 60%,rgba(0,0,0,.1) 100%); pointer-events:none}
  .bk-spine{position:absolute; left:0; top:0; bottom:0; width:28px; border-radius:6px 0 0 6px; background:var(--sp); transform:rotateY(-90deg); transform-origin:left; filter:brightness(.8)}
  .bk-pages{position:absolute; right:0; top:5px; bottom:5px; width:26px; transform:translateZ(13px) rotateY(-90deg); transform-origin:right center; backface-visibility:hidden; -webkit-backface-visibility:hidden; background:repeating-linear-gradient(90deg,#f6f1e7 0 2px,#e2dccf 2px 3px); border-radius:2px}
  .bk-shadow{position:absolute; left:8%; right:8%; bottom:-11%; height:12%; border-radius:50%; background:radial-gradient(closest-side,rgba(0,0,0,.35),transparent); filter:blur(6px); transition:opacity .6s}

  /* Alt-sol: ad + təsvir (şaquli stack) */
  .bk-info{position:absolute; z-index:5; left:28px; bottom:26px; width:min(360px,34%); height:150px; overflow:hidden}
  .bk-info ul{list-style:none; margin:0; padding:0; transform:translateY(calc(var(--i,0) * -150px)); transition:transform var(--dur) var(--ease-s)}
  .bk-info li{height:150px; color:#fff; display:flex; flex-direction:column; justify-content:flex-end}
  .bk-info b{font-size:19px; font-weight:600; letter-spacing:-.01em}
  .bk-info span{display:block; margin-top:2px; font-size:12.5px; font-weight:600; opacity:.8}
  .bk-info p{margin:8px 0 0; font-size:13px; line-height:1.45; opacity:.88}
  .bk-info .ticks{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
  .bk-info .ticks em{font-style:normal; font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.16); box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}

  /* Sağ: başlıq + növbəti kitab önizləməsi */
  .bk-side{position:absolute; z-index:5; right:28px; bottom:26px; width:200px; color:#fff}
  .bk-side h3{margin:0 0 12px; font-size:19px; font-weight:600; line-height:1.2; letter-spacing:-.01em}
  .bk-next{position:relative; display:block; width:100%; height:112px; padding:0; border:0; border-radius:14px; overflow:hidden; cursor:pointer; background:rgba(255,255,255,.18); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); transition:transform .3s}
  .bk-next:hover{transform:translateY(-3px)}
  .bk-next ul{list-style:none; margin:0; padding:0; transform:translateY(calc(var(--n,1) * -112px)); transition:transform var(--dur) var(--ease-s)}
  .bk-next li{height:112px; display:flex; align-items:center; gap:12px; padding:0 14px; background:var(--nb)}
  .bk-next li i{width:56px; height:78px; flex:none; border-radius:3px 7px 7px 3px; background:var(--cv) center/cover; box-shadow:0 8px 16px rgba(0,0,0,.3); transform:rotate(-6deg)}
  .bk-next li span{font-size:12.5px; font-weight:600; text-align:left; line-height:1.3}
  .bk-next li span small{display:block; font-weight:500; opacity:.8; margin-top:2px}

  /* İdarəetmə */
  .bk-ctrl{max-width:1200px; margin:22px auto 0; display:flex; align-items:center; gap:18px}
  .bk-dots{display:flex; gap:8px; flex:1}
  .bk-dots button{position:relative; height:6px; width:34px; padding:0; border:0; border-radius:6px; background:rgba(11,15,26,.14); cursor:pointer; overflow:hidden; transition:width .5s var(--ease-s)}
  .bk-dots button.on{width:72px}
  .bk-dots button i{position:absolute; inset:0; background:var(--bk-bg); transform-origin:left; transform:scaleX(0)}
  .bk-dots button.on i{animation:bk-prog var(--auto,6s) linear forwards}
  .books.paused .bk-dots button.on i{animation-play-state:paused}
  @keyframes bk-prog{to{transform:scaleX(1)}}
  .bk-count{font-variant-numeric:tabular-nums; font-weight:600; color:#0b0f1a; white-space:nowrap}
  .bk-count span{color:#8a8f9c}
  .bk-arrow{width:50px; height:50px; border-radius:50%; border:0; display:grid; place-items:center; background:#fff; color:#0b0f1a; cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.08); transition:transform .25s, background .25s, color .25s}
  .bk-arrow:hover{transform:translateY(-2px); background:var(--bk-bg); color:#fff}
  .bk-arrow svg{width:20px; height:20px}
  .books :focus-visible{outline:2.5px solid #0b0f1a; outline-offset:3px}

  @media (max-width:900px){
    .books{padding:90px 16px 80px}
    .bk-card{aspect-ratio:auto; height:760px; min-height:0}
    .bk-titles{top:calc(9% - var(--tline) * .2); --tline:clamp(110px,30vw,170px)}
    .bk-stage{width:min(170px,46vw); top:33%}
    .bk-ctrl{gap:10px}
    .bk-count{white-space:nowrap}
    .bk-info{left:20px; right:20px; width:auto; bottom:140px; height:130px}
    .bk-info ul{transform:translateY(calc(var(--i,0) * -130px))}
    .bk-info li{height:130px}
    .bk-side{left:20px; right:20px; width:auto; bottom:20px; display:flex; align-items:center; gap:14px}
    .bk-side h3{margin:0; font-size:15px; flex:1}
    .bk-next{width:190px; flex:none}
    .bk-top{left:20px; right:20px; top:18px}
  }
  @media (prefers-reduced-motion:reduce){
    .books,.bk-card,.bk-titles ul,.bk-info ul,.bk-next ul,.bk-book{transition-duration:.01ms!important}
    .bk-book.on .bk-float{animation:none}
  }
  /* ====== KİTABLAR SONU ====== */


  /* ====== NƏTİCƏLƏR — 3-cü bölmə (motion + liquid glass) ====== */
  .res{
    --rb:14px;                                   /* dinamik blur — JS scroll-a görə dəyişir */
    --ease-r:cubic-bezier(.22,1,.36,1);
    position:relative; overflow:hidden; isolation:isolate;
    padding:140px 24px 130px; color:#fff;
    background:radial-gradient(120% 80% at 50% 0%,#0f2a57 0%,#081633 45%,#050d22 100%);
  }
  .res-orbs{position:absolute; inset:0; z-index:-1; pointer-events:none}
  .res-orbs i{position:absolute; border-radius:50%; filter:blur(60px); opacity:.75; will-change:transform}
  .res-orbs i:nth-child(1){width:520px; height:520px; left:-120px; top:8%; background:radial-gradient(circle at 35% 35%,#2aa3ff,#007AD6 55%,transparent 70%); animation:orb1 18s ease-in-out infinite}
  .res-orbs i:nth-child(2){width:440px; height:440px; right:-80px; top:34%; background:radial-gradient(circle,#4be3ff,#0aa5c8 55%,transparent 70%); opacity:.5; animation:orb2 22s ease-in-out infinite}
  .res-orbs i:nth-child(3){width:560px; height:560px; left:30%; bottom:-160px; background:radial-gradient(circle,#7a6cff,#3b2ccf 55%,transparent 70%); opacity:.45; animation:orb1 26s ease-in-out infinite reverse}
  @keyframes orb1{50%{translate:80px 60px}}
  @keyframes orb2{50%{translate:-90px -40px}}
  .res-grain{position:absolute; inset:0; z-index:-1; opacity:.07; pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  .res-wrap{max-width:1200px; margin:0 auto}

  /* Liquid glass panel */
  .lgp{
    position:relative; isolation:isolate; border-radius:28px;
    background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04) 60%,rgba(255,255,255,.07));
    backdrop-filter:blur(var(--rb)) saturate(160%); -webkit-backdrop-filter:blur(var(--rb)) saturate(160%);
    box-shadow:inset 1.5px 1.5px 1px rgba(255,255,255,.28), inset -1px -1px 1px rgba(255,255,255,.08), inset 0 0 30px rgba(255,255,255,.04), 0 30px 60px -20px rgba(0,0,0,.5);
    border:1px solid rgba(255,255,255,.1);
  }
  .lgp::after{ /* kursoru izləyən işıq */
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:var(--gl,0); transition:opacity .4s;
    background:radial-gradient(300px 200px at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.14),transparent 70%);
  }

  /* Başlıq */
  .res-head{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:40px; align-items:end; margin-bottom:56px}
  .res-eyebrow{display:inline-flex; align-items:center; gap:10px; height:36px; padding:0 16px 0 8px; border-radius:999px; font-size:13px; font-weight:600; color:#bfe2ff;
    background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); backdrop-filter:blur(10px)}
  .res-eyebrow i{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:#007AD6; font-style:normal; font-size:12px}
  .res-head h2{margin:22px 0 0; font-size:clamp(42px,6vw,88px); font-weight:500; letter-spacing:-.045em; line-height:1}
  .res-head h2 em{font-style:normal; background:linear-gradient(90deg,#5cc8ff,#9fe3ff 40%,#ffffff 60%,#5cc8ff); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shine 6s linear infinite}
  @keyframes shine{to{background-position:-200% 0}}
  .res-head p{margin:0; color:rgba(255,255,255,.65); font-size:18px; line-height:1.55}

  /* Odometr kartları */
  .res-tiles{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
  .tile{padding:26px 24px 24px; overflow:hidden; transition:transform .5s var(--ease-r)}
  .tile:hover{transform:translateY(-6px)}
  .tile .lbl{font-size:14px; color:rgba(255,255,255,.65); line-height:1.4; margin-top:14px}
  .tile .tag{display:inline-block; margin-bottom:18px; font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#7cc8ff}
  .tile.hl{background:linear-gradient(150deg,rgba(0,122,214,.55),rgba(0,122,214,.18) 60%,rgba(92,200,255,.18)); border-color:rgba(120,200,255,.35)}
  .odo{display:flex; align-items:flex-start; font-size:clamp(52px,5.4vw,78px); font-weight:600; letter-spacing:-.05em; line-height:1; height:1em; overflow:hidden; font-variant-numeric:tabular-nums}
  .odo .col{display:block; height:1em; overflow:hidden}
  .odo .col span{display:flex; flex-direction:column; transform:translateY(0); transition:transform 2s var(--ease-r)}
  .odo .col span b{display:block; height:1em; font-weight:inherit}
  .odo .sfx{color:#5cc8ff; font-size:.6em; margin-left:2px; line-height:1.2}

  /* Diaqram — şüşə borular */
  .res-chart{margin-top:16px; padding:28px 28px 22px}
  .rc-top{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap}
  .rc-top h3{margin:0; font-size:22px; font-weight:600; letter-spacing:-.02em}
  .rc-top p{margin:4px 0 0; font-size:14px; color:rgba(255,255,255,.6)}
  .seg2{position:relative; display:inline-flex; padding:5px; border-radius:999px; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
  .seg2 .pill{position:absolute; top:5px; bottom:5px; left:0; border-radius:999px; background:#007AD6; box-shadow:0 8px 20px rgba(0,122,214,.45), inset 0 1px 0 rgba(255,255,255,.25); transition:transform .45s var(--ease-r), width .45s var(--ease-r)}
  .seg2.no-anim .pill{transition:none}
  .seg2 button{position:relative; z-index:1; height:40px; padding:0 20px; border:0; border-radius:999px; background:none; color:rgba(255,255,255,.7); font:inherit; font-weight:600; cursor:pointer; transition:color .3s}
  .seg2 button.on{color:#fff}
  .tubes{position:relative; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:10px; margin-top:34px; height:330px; align-items:end}
  .tubes .hov{position:absolute; top:-10px; bottom:-8px; left:0; border-radius:26px; background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); opacity:0; pointer-events:none; transition:transform .3s var(--ease-r), opacity .25s ease-out}
  .tb{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:10px; height:100%; justify-content:flex-end; cursor:default}
  .tb .v{font-size:17px; font-weight:700; font-variant-numeric:tabular-nums; transition:color .3s, transform .3s var(--ease-r)}
  .tb .v small{font-size:.7em; color:#5cc8ff}
  .tb .glass{position:relative; width:min(46px,80%); height:240px; border-radius:23px; overflow:hidden;
    background:linear-gradient(90deg,rgba(255,255,255,.1),rgba(255,255,255,.03) 40%,rgba(255,255,255,.1));
    box-shadow:inset 2px 0 2px rgba(255,255,255,.22), inset -2px 0 2px rgba(255,255,255,.08), inset 0 -10px 20px rgba(0,0,0,.2)}
  .tb .glass::after{content:""; position:absolute; left:18%; top:6%; width:16%; height:60%; border-radius:10px; background:linear-gradient(180deg,rgba(255,255,255,.35),transparent); pointer-events:none}
  .tb .liq{position:absolute; left:0; right:0; bottom:0; height:0; transition:height 1.5s var(--ease-r);
    background:linear-gradient(180deg,#7fd6ff 0%,#2aa3ff 30%,#007AD6 100%); box-shadow:0 0 30px rgba(42,163,255,.55)}
  .tb .liq::before{ /* dalğa */
    content:""; position:absolute; left:-50%; top:-9px; width:200%; height:18px;
    background:radial-gradient(circle at 10px -4px,transparent 10px,#7fd6ff 10.5px) 0 0/20px 18px repeat-x; animation:wave 2.4s linear infinite}
  @keyframes wave{to{transform:translateX(20px)}}
  .tb .liq i{position:absolute; bottom:6px; width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.7); animation:bub 3s ease-in infinite}
  .tb .liq i:nth-child(1){left:30%; animation-delay:-.4s}
  .tb .liq i:nth-child(2){left:62%; width:4px; height:4px; animation-delay:-1.6s}
  @keyframes bub{0%{transform:translateY(0); opacity:0} 15%{opacity:.8} 100%{transform:translateY(-160px); opacity:0}}
  .tb .y{font-size:13px; color:rgba(255,255,255,.55); font-weight:600; transition:color .3s}
  .tb.peak .liq{background:linear-gradient(180deg,#ffffff 0%,#9fe3ff 25%,#2aa3ff 60%,#007AD6)}
  .tb.peak .y{color:#fff}
  .tb.na .v{color:rgba(255,255,255,.3)}
  .tb:hover .v{transform:translateY(-4px); color:#9fe3ff}
  .tb:hover .y{color:#fff}
  .rc-sum{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.7); font-size:15px}
  .rc-sum b{color:#fff; font-size:22px; letter-spacing:-.02em}

  /* Birincilər */
  .res-hall{margin-top:16px; padding:28px}
  .hall-grid{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin-top:26px; perspective:1200px}
  .champ{position:relative; padding:20px 14px 18px; border-radius:22px; text-align:center; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
    transform-style:preserve-3d; transition:transform .45s var(--ease-r), background .3s, opacity .5s, translate .6s var(--ease-r)}
  .champ:hover{background:rgba(255,255,255,.09)}
  .champ.out{opacity:0; translate:0 24px}
  .ring{position:relative; width:118px; height:118px; margin:0 auto}
  .ring svg{position:absolute; inset:0; transform:rotate(-90deg)}
  .ring circle{fill:none; stroke-width:5}
  .ring .bgc{stroke:rgba(255,255,255,.1)}
  .ring .arc{stroke:url(#ringGrad); stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset 1.6s var(--ease-r)}
  .ring img{position:absolute; inset:11px; width:calc(100% - 22px); height:calc(100% - 22px); border-radius:50%; object-fit:cover; background:#fff}
  .ring .sc{position:absolute; right:-4px; bottom:2px; min-width:44px; height:28px; padding:0 8px; border-radius:999px; display:grid; place-items:center; font-weight:800; font-size:14px; color:#fff;
    background:linear-gradient(135deg,#2aa3ff,#007AD6); box-shadow:0 6px 14px rgba(0,122,214,.5), inset 0 1px 0 rgba(255,255,255,.35); transform:translateZ(30px)}
  .champ b{display:block; margin-top:14px; font-size:15px; font-weight:600; line-height:1.25}
  .champ span{display:block; margin-top:4px; font-size:12.5px; color:rgba(255,255,255,.55)}
  .champ .crown{position:absolute; top:12px; left:14px; font-size:11px; font-weight:800; letter-spacing:.1em; color:#ffd36a}

  /* İkincilər / üçüncülər — marquee */
  .res-tick{margin-top:16px; padding:26px 0 22px; overflow:hidden}
  .res-tick .rc-top{padding:0 28px}
  .mq{position:relative; margin-top:18px; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .mq + .mq{margin-top:10px}
  .mq-track{display:flex; gap:10px; width:max-content; animation:mq 60s linear infinite}
  .mq.rev .mq-track{animation-direction:reverse; animation-duration:48s}
  .mq:hover .mq-track{animation-play-state:paused}
  @keyframes mq{to{transform:translateX(-50%)}}
  .chip{display:inline-flex; align-items:center; gap:12px; height:56px; padding:0 18px 0 8px; border-radius:999px; white-space:nowrap;
    background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); transition:background .25s, transform .25s var(--ease-r)}
  .chip:hover{background:rgba(255,255,255,.14); transform:translateY(-2px)}
  .chip .s{min-width:52px; height:40px; padding:0 10px; border-radius:999px; display:grid; place-items:center; font-weight:800; font-size:15px; color:#0b1530; background:#fff}
  .chip.p2 .s{background:linear-gradient(135deg,#ffffff,#cfd8e3)}
  .chip.p3 .s{background:linear-gradient(135deg,#ffd9b0,#e3a26a)}
  .chip b{font-weight:600; font-size:15px}
  .chip em{font-style:normal; font-size:12.5px; color:rgba(255,255,255,.55)}
  .chip .sec{font-size:11px; font-weight:700; letter-spacing:.08em; color:#7cc8ff; text-transform:uppercase}

  .res-note{margin-top:22px; font-size:13px; color:rgba(255,255,255,.45); text-align:center}

  @media (max-width:1020px){
    .res-head{grid-template-columns:minmax(0,1fr); gap:18px}
    .res-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
    .hall-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .tubes{overflow-x:auto; grid-template-columns:repeat(12,56px); padding-bottom:8px}
  }
  @media (max-width:560px){
    .res{padding:100px 16px 90px}
    .res-chart,.res-hall{padding:22px 16px}
    .res-tiles{gap:10px}
    .tile{padding:20px 16px}
    .odo{font-size:44px}
    .hall-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
    .ring{width:96px; height:96px}
    .seg2 button{padding:0 14px; font-size:14px}
  }
  @media (prefers-reduced-motion:reduce){
    .res-orbs i,.res-head h2 em,.mq-track,.tb .liq::before,.tb .liq i{animation:none!important}
    .odo .col span,.tb .liq,.ring .arc{transition:none!important}
  }

  /* ====== BİRİNCİLƏR — coverflow karusel (referens: poster carousel) ====== */
  .cf{position:relative; margin:16px 0 0; padding:30px 0 26px; overflow:hidden}
  .cf .rc-top{padding:0 28px}
  .cf-stage{position:relative; height:440px; margin-top:18px; perspective:1600px; touch-action:pan-y}
  .cf-glow{position:absolute; left:50%; top:50%; width:620px; height:380px; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
    background:radial-gradient(closest-side,rgba(0,122,214,.85),rgba(0,122,214,.35) 45%,transparent 75%); filter:blur(30px); animation:cfPulse 4s ease-in-out infinite}
  @keyframes cfPulse{50%{opacity:.7; transform:translate(-50%,-50%) scale(1.06)}}
  .cfc{
    position:absolute; left:50%; top:50%; width:250px; height:340px; margin:-170px 0 0 -125px; border-radius:22px; overflow:hidden; cursor:pointer; border:0; padding:0;
    background:#fff; color:#fff; text-align:left;
    transform:translateX(var(--x,0px)) scale(var(--s)); z-index:var(--z); opacity:var(--op);
    box-shadow:0 30px 60px -20px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.15);
    transition:transform .7s cubic-bezier(.22,1,.36,1), opacity .5s, box-shadow .5s;
  }
  .cfc img{position:absolute; left:0; top:0; width:100%; height:78%; object-fit:cover; object-position:50% 0}
  .cfc::before{ /* aşağı qradiyent — mətn üçün */
    content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg,transparent 38%,rgba(4,30,70,.55) 62%,#06204a 82%)}
  .cfc::after{ /* kənardakı kartlar: mavi tonlu qaraltma (referensdəki kimi) */
    content:""; position:absolute; inset:0; z-index:3; background:linear-gradient(180deg,rgba(0,90,180,.35),rgba(3,14,36,.55)); opacity:var(--dim); transition:opacity .6s}
  .cfc .badge{position:absolute; z-index:2; top:14px; left:14px; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:800; letter-spacing:.04em;
    background:#007AD6; color:#fff; box-shadow:0 4px 12px rgba(0,0,0,.25)}
  .cfc .badge.ru{background:#0b1530}
  .cfc .score{position:absolute; z-index:2; top:10px; right:14px; font-size:34px; font-weight:600; letter-spacing:-.04em; color:#0b1530; line-height:1}
  .cfc .score sup{font-size:12px; font-weight:700; letter-spacing:.06em; color:#007AD6; margin-left:2px; vertical-align:top; position:relative; top:6px}
  .cfc .meta{position:absolute; z-index:2; left:18px; right:18px; bottom:16px}
  .cfc .meta b{display:block; font-size:22px; font-weight:600; letter-spacing:-.02em; line-height:1.1}
  .cfc .meta span{display:block; margin-top:8px; font-size:12.5px; color:rgba(255,255,255,.75)}
  .cfc.center{box-shadow:0 40px 80px -20px rgba(0,60,140,.9), 0 0 0 2px rgba(120,200,255,.55)}
  .cfc:focus-visible{outline:3px solid #9fe3ff; outline-offset:4px}
  .cf-ctrl{display:flex; justify-content:center; align-items:center; gap:14px; margin-top:6px}
  .cf-ctrl button{width:46px; height:46px; border-radius:50%; border:0; display:grid; place-items:center; color:#fff; cursor:pointer;
    background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); transition:background .25s, transform .25s}
  .cf-ctrl button:hover{background:#007AD6; transform:translateY(-2px)}
  .cf-ctrl svg{width:18px; height:18px}
  .cf-ctrl .cnt{min-width:70px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums; color:rgba(255,255,255,.8)}
  @media (max-width:700px){
    .cf-stage{height:380px}
    .cfc{width:210px; height:290px; margin:-145px 0 0 -105px}
    .cfc .meta b{font-size:19px}
  }
  @media (prefers-reduced-motion:reduce){ .cfc{transition:none} .cf-glow{animation:none} }

  /* ====== NƏTİCƏLƏR SONU ====== */


  /* ====== FİLİALLAR — hero slider (referens: "Welcome to Qatar" hero) ====== */
  .br{position:relative; padding:110px 24px 120px; background:linear-gradient(180deg,#f3f7fc,#eaf1fa)}
  .br-head{max-width:1300px; margin:0 auto 26px; display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap}
  .br-head small{display:block; font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#007AD6}
  .br-head h2{margin:10px 0 0; font-size:clamp(34px,4.4vw,56px); font-weight:500; letter-spacing:-.04em; line-height:1.04; color:#0b0f1a}
  .br-head p{margin:0; max-width:380px; color:#5d6475; font-size:17px; line-height:1.5}

  .br-card{position:relative; max-width:1300px; margin:0 auto; height:min(86vh,740px); min-height:600px; border-radius:30px; overflow:hidden; isolation:isolate; background:#cfd8e6;
    box-shadow:0 40px 90px -30px rgba(20,40,80,.45)}
  .br-bg{position:absolute; inset:0; background-size:cover; background-position:center; clip-path:circle(0px at var(--cx,80%) var(--cy,50%)); z-index:0}
  .br-bg.base{clip-path:none; z-index:0}
  .br-bg.reveal{z-index:1; transition:clip-path 1.25s cubic-bezier(.65,0,.35,1); clip-path:circle(150% at var(--cx,80%) var(--cy,50%))}
  .br-bg.on{animation:kb 9s ease-out both}
  @keyframes kb{from{transform:scale(1.1)} to{transform:scale(1)}}
  .br-shade{position:absolute; inset:0; z-index:2; pointer-events:none;
    background:radial-gradient(60% 55% at 55% 52%,rgba(10,20,45,.38),transparent 70%),linear-gradient(180deg,rgba(20,24,40,.45) 0%,rgba(20,24,40,.08) 28%,transparent 50%,rgba(255,255,255,0) 70%,rgba(255,255,255,.75) 100%)}

  /* üst sıra */
  .br-top{position:absolute; z-index:6; left:34px; right:34px; top:26px; display:flex; justify-content:space-between; align-items:center; color:#fff;
    padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.25)}
  .br-top b{font-size:20px; font-weight:500; letter-spacing:-.01em}
  .br-top span{font-size:14px; opacity:.85; font-variant-numeric:tabular-nums}

  /* nəhəng başlıq */
  .br-title{position:absolute; z-index:3; left:34px; right:34px; top:84px; margin:0; height:1.1em; font-size:clamp(56px,9vw,148px); font-weight:800; letter-spacing:-.01em; line-height:1.05; text-transform:uppercase; pointer-events:none}
  .br-title span{position:absolute; left:0; top:0; white-space:nowrap;
    background:linear-gradient(180deg,rgba(255,255,255,.95) 20%,rgba(255,255,255,.35) 85%); -webkit-background-clip:text; background-clip:text; color:transparent;
    transition:opacity .7s ease, filter .7s ease, transform .9s cubic-bezier(.22,1,.36,1)}
  .br-title span.out{opacity:0; filter:blur(14px); transform:translateY(-30px)}
  .br-title span.pre{opacity:0; filter:blur(14px); transform:translateY(40px); transition:none}

  /* orbit — dairəvi miniatürlər */
  .br-orbit{position:absolute; z-index:5; right:-170px; top:50%; width:560px; height:560px; margin-top:-280px; pointer-events:none}
  .br-orbit .br-ring{position:absolute; inset:0; border-radius:50%; border:1.5px solid rgba(255,255,255,.6)}
  .br-orbit .br-ring.r2{inset:90px; border-color:rgba(255,255,255,.35)}
  .br-wheel{position:absolute; inset:0; transition:transform 1.1s cubic-bezier(.65,0,.35,1)}
  .br-th{position:absolute; left:50%; top:50%; width:66px; height:66px; margin:-33px 0 0 -33px; padding:0; border:0; border-radius:50%; cursor:pointer; pointer-events:auto;
    background:#fff center/cover; box-shadow:0 0 0 3px rgba(255,255,255,.85), 0 10px 24px rgba(0,0,0,.25);
    transform:rotate(var(--a)) translateX(280px) rotate(calc(var(--a) * -1 - var(--w))) scale(var(--sc,1));
    transition:transform 1.1s cubic-bezier(.65,0,.35,1), box-shadow .3s}
  .br-th.on{--sc:2.15; box-shadow:0 0 0 2px rgba(255,255,255,.95), 0 0 0 10px rgba(255,255,255,.18), 0 20px 40px rgba(0,0,0,.3)}
  .br-th:hover:not(.on){--sc:1.15}
  .br-th:focus-visible{outline:3px solid #fff; outline-offset:4px}

  /* xətt + məlumat bloku */
  .br-info{text-shadow:0 2px 14px rgba(0,0,0,.35); position:absolute; z-index:5; right:462px; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:22px; color:#fff; max-width:440px}
  .br-info .line{width:70px; height:2px; background:#fff; order:2; flex:none; border-radius:2px}
  .br-info .txt{position:relative; padding-left:22px; border-left:3px solid #fff}
  .br-info h3{margin:0; font-size:clamp(28px,2.6vw,40px); font-weight:400; letter-spacing:-.02em; line-height:1.1}
  .br-info p{margin:10px 0 0; font-size:15px; line-height:1.5; opacity:.9}
  .br-info .chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
  .br-info .chips em{font-style:normal; font-size:12px; font-weight:600; padding:5px 11px; border-radius:999px; background:rgba(255,255,255,.18); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); backdrop-filter:blur(8px)}
  .br-info .chips .br-ln{font-size:12px; font-weight:600; padding:5px 11px; border-radius:999px; color:#fff; text-decoration:none; background:rgba(255,255,255,.28); box-shadow:inset 0 0 0 1px rgba(255,255,255,.55); backdrop-filter:blur(8px); position:relative; z-index:6}
  .br-info .chips .br-ln:hover, .br-info .chips .br-ln:focus-visible{background:rgba(255,255,255,.42); outline:0}
  .br-info .txt > *{transition:opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1)}
  .br-info.swap .txt > *{opacity:0; transform:translateY(12px)}
  .br-info .txt > *:nth-child(2){transition-delay:.06s} .br-info .txt > *:nth-child(3){transition-delay:.12s}

  /* alt şüşə panel (liquid glass) */
  .br-bar{position:absolute; z-index:7; left:50%; bottom:28px; transform:translateX(-50%); width:min(940px,calc(100% - 48px));
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) auto; align-items:center; gap:4px; padding:10px 10px 10px 18px; border-radius:26px;
    background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.62)); backdrop-filter:blur(22px) saturate(170%); -webkit-backdrop-filter:blur(22px) saturate(170%);
    box-shadow:inset 1.5px 1.5px 1px rgba(255,255,255,.9), inset -1px -1px 1px rgba(255,255,255,.5), 0 20px 50px rgba(20,40,80,.18)}
  .br-f{position:relative; display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:18px; transition:background .25s}
  .br-f:hover{background:rgba(0,122,214,.07)}
  .br-f + .br-f::before{content:""; position:absolute; left:-2px; top:22%; bottom:22%; width:1px; background:rgba(20,30,50,.12)}
  .br-f svg{width:20px; height:20px; color:#5d6475; flex:none}
  .br-f label{display:block; font-size:17px; font-weight:600; color:#0b0f1a; line-height:1.15}
  .br-f select{display:block; width:100%; margin-top:2px; padding:0; border:0; background:none; font:inherit; font-size:13px; color:#6b7280; cursor:pointer; appearance:none; -webkit-appearance:none; outline:none}
  .br-f select:focus-visible{outline:2px solid #007AD6; outline-offset:3px; border-radius:6px}
  .br-go{width:54px; height:54px; border-radius:18px; border:0; display:grid; place-items:center; color:#fff; background:#007AD6; cursor:pointer; text-decoration:none;
    box-shadow:0 10px 22px rgba(0,122,214,.4), inset 0 1px 0 rgba(255,255,255,.25); transition:transform .25s, box-shadow .25s}
  .br-go:hover{transform:translateY(-2px) rotate(-8deg); box-shadow:0 14px 28px rgba(0,122,214,.5)}
  .br-go svg{width:20px; height:20px}

  @media (max-width:1020px){
    .br-card{height:760px}
    .br-orbit{right:-260px; transform:scale(.8)}
    .br-info{right:auto; left:34px; top:auto; bottom:250px; transform:none; max-width:min(440px,70%)}
    .br-info .line{display:none}
    .br-bar{grid-template-columns:repeat(2,minmax(0,1fr)); bottom:18px}
    .br-bar .br-go{grid-column:1 / -1; width:100%; height:50px; border-radius:16px}
    .br-f:nth-child(3)::before{display:none}
  }
  @media (max-width:600px){
    .br{padding:80px 12px 90px}
    .br-card{height:780px; border-radius:24px}
    .br-top{left:20px; right:20px}
    .br-title{left:20px; right:20px; font-size:11vw}
    .br-orbit{right:-300px; top:34%; transform:scale(.55)}
    .br-info{left:20px; bottom:228px; max-width:calc(100% - 40px)}
    .br-bar{grid-template-columns:repeat(2,minmax(0,1fr)); width:calc(100% - 24px); padding:8px}
    .br-f + .br-f::before{display:none}
    .br-f label{font-size:15px}
    .br-f{padding:8px 10px}
  }
  @media (prefers-reduced-motion:reduce){
    .br-bg.reveal,.br-wheel,.br-th,.br-title span{transition:none!important}
    .br-bg.on{animation:none}
  }
  /* ====== FİLİALLAR SONU ====== */


  /* ====== HAQQIMIZDA (referens: "A bit ABOUT US") ====== */
  #haqqimizda{scroll-margin-top:96px}
  .ab{position:relative; padding:130px 24px 140px; background:#fff; overflow:hidden}
  .ab::before{content:""; position:absolute; width:620px; height:620px; left:-220px; top:40px; border-radius:50%;
    background:radial-gradient(circle,rgba(0,122,214,.10),transparent 65%); pointer-events:none}
  .ab-wrap{position:relative; max-width:1240px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); gap:90px; align-items:center}

  /* sol kollaj */
  .ab-col{position:relative; height:640px}
  .ab-ph{position:absolute; margin:0; overflow:hidden; border-radius:30px; background:#dfe8f4;
    box-shadow:0 30px 70px -28px rgba(20,40,80,.35); opacity:0; transform:translateY(60px) scale(.96);
    transition:opacity .9s ease, transform 1.1s cubic-bezier(.22,1,.36,1)}
  .ab-ph img{display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.08); transition:transform 1.4s cubic-bezier(.22,1,.36,1)}
  .ab-ph:hover img{transform:scale(1.13)}
  .ab-ph.p1{left:0; top:70px; width:56%; height:470px}
  .ab-ph.p2{right:0; top:180px; width:40%; height:400px; transition-delay:.15s}
  .ab.in .ab-ph{opacity:1; transform:none}
  .ab.in .ab-ph img{transform:scale(1)}

  /* üzən kartlar */
  .ab-card{position:absolute; z-index:3; background:rgba(255,255,255,.92); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
    border-radius:22px; box-shadow:inset 1px 1px 0 rgba(255,255,255,.9), 0 24px 60px -18px rgba(20,40,80,.28), 0 0 0 1px rgba(20,40,80,.05);
    opacity:0; transform:translateY(30px); transition:opacity .8s ease .35s, transform 1s cubic-bezier(.22,1,.36,1) .35s}
  .ab.in .ab-card{opacity:1; transform:none}
  .ab.in .ab-card{animation:abBob 6s ease-in-out 1.6s infinite}
  .ab.in .ab-rate{animation-delay:2.6s}
  @keyframes abBob{0%,100%{translate:0 0} 50%{translate:0 -9px}}

  .ab-stat{left:30%; top:0; width:300px; padding:20px 22px 18px}
  .ab-stat .n{display:flex; align-items:center; gap:10px}
  .ab-stat b{font-size:40px; font-weight:700; letter-spacing:-.03em; color:#0b0f1a; font-variant-numeric:tabular-nums; line-height:1}
  .ab-stat .up{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:rgba(22,185,110,.12); color:#14a865}
  .ab-stat .up svg{width:16px; height:16px}
  .ab-stat p{margin:6px 0 14px; font-size:14px; color:#6b7280}
  .ab-av{display:flex; align-items:center}
  .ab-av i{width:40px; height:40px; border-radius:50%; border:3px solid #fff; margin-left:-10px; background:#cfd8e6 center/cover; box-shadow:0 4px 10px rgba(20,40,80,.15); transition:transform .25s ease-out}
  .ab-av i:first-child{margin-left:0}
  .ab-av i:hover{transform:translateY(-4px)}
  .ab-av em{margin-left:-10px; height:40px; min-width:40px; padding:0 10px; border-radius:999px; border:3px solid #fff; display:grid; place-items:center;
    font-style:normal; font-size:12px; font-weight:700; color:#fff; background:#007AD6; box-shadow:0 6px 14px rgba(0,122,214,.35)}

  .ab-rate{left:-14px; bottom:30px; width:270px; padding:18px 20px 16px; transition-delay:.5s}
  .ab-rate h4{margin:0; font-size:17px; font-weight:700; color:#0b0f1a}
  .ab-rate p{margin:4px 0 10px; font-size:13px; color:#6b7280}
  .ab-rate .sk{display:block; height:8px; border-radius:6px; background:#edf1f6; margin-top:7px}
  .ab-rate .sk.s2{width:72%}
  .ab-emo{display:flex; gap:6px; margin-top:14px}
  .ab-emo span{width:36px; height:36px; border-radius:12px; display:grid; place-items:center; font-size:18px; background:#f3f6fa; cursor:default; transition:transform .25s ease-out, background .25s}
  .ab-emo span:hover{transform:translateY(-3px) scale(1.08)}
  .ab-emo span.on{background:#007AD6; box-shadow:0 8px 18px rgba(0,122,214,.35)}

  /* sağ mətn */
  .ab-txt > *{opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform 1s cubic-bezier(.22,1,.36,1)}
  .ab.in .ab-txt > *{opacity:1; transform:none}
  .ab.in .ab-txt > :nth-child(2){transition-delay:.08s} .ab.in .ab-txt > :nth-child(3){transition-delay:.16s}
  .ab.in .ab-txt > :nth-child(4){transition-delay:.24s} .ab.in .ab-txt > :nth-child(5){transition-delay:.32s}
  .ab-eye{display:block; font-size:22px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#007AD6}
  .ab-txt h2{margin:4px 0 0; font-size:clamp(46px,6vw,84px); font-weight:800; letter-spacing:-.02em; line-height:.95; text-transform:uppercase; color:#0b0f1a}
  .ab-txt > p{margin:26px 0 0; max-width:520px; font-size:17px; line-height:1.7; color:#6b7280}
  .ab-more{display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s cubic-bezier(.22,1,.36,1), opacity .8s ease, transform 1s cubic-bezier(.22,1,.36,1)}
  .ab-more > div{overflow:hidden}
  .ab-more.open{grid-template-rows:1fr}
  .ab-more p{margin:16px 0 0; max-width:520px; font-size:17px; line-height:1.7; color:#6b7280}
  .ab-facts{display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 4px}
  .ab-facts span{font-size:13px; font-weight:600; color:#0b0f1a; padding:8px 14px; border-radius:999px; background:rgba(0,122,214,.07); box-shadow:inset 0 0 0 1px rgba(0,122,214,.14)}
  .ab-facts b{color:#007AD6}

  .ab-btn{position:relative; display:inline-flex; align-items:center; gap:10px; margin-top:34px; padding:18px 38px; border:0; background:none; cursor:pointer;
    font:inherit; font-size:15px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff; isolation:isolate}
  .ab-btn::before{content:""; position:absolute; inset:0; z-index:-1; border-radius:8px; transform:skewX(-12deg); background:#007AD6;
    box-shadow:0 18px 34px -10px rgba(0,122,214,.55); transition:transform .25s ease-out, box-shadow .25s ease-out, background .25s}
  .ab-btn:hover::before{transform:skewX(-12deg) translateY(-3px); box-shadow:0 24px 40px -10px rgba(0,122,214,.6); background:#0a86e6}
  .ab-btn svg{width:16px; height:16px; transition:transform .3s ease-out}
  .ab-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
  .ab-btn:focus-visible{outline:none} .ab-btn:focus-visible::before{box-shadow:0 0 0 4px rgba(0,122,214,.3), 0 18px 34px -10px rgba(0,122,214,.55)}
  .ab-cred{position:absolute; right:6px; bottom:-28px; margin:0; font-size:11px; color:#9aa3b2}

  @media (max-width:1020px){
    .ab-wrap{grid-template-columns:minmax(0,1fr); gap:70px}
    .ab-col{max-width:640px; width:100%; margin:0 auto}
  }
  @media (max-width:600px){
    .ab{padding:90px 16px 100px}
    .ab-col{height:470px}
    .ab-ph.p1{top:60px; width:60%; height:330px; border-radius:22px}
    .ab-ph.p2{top:150px; width:44%; height:280px; border-radius:22px}
    .ab-stat{left:auto; right:0; width:220px; padding:14px 16px}
    .ab-stat b{font-size:30px}
    .ab-stat p{font-size:12px; margin:4px 0 10px}
    .ab-av i,.ab-av em{width:32px; height:32px; min-width:32px}
    .ab-av em{width:auto; height:32px; font-size:11px}
    .ab-rate{left:0; bottom:0; width:220px; padding:14px 16px}
    .ab-emo span{width:30px; height:30px; font-size:15px}
    .ab-eye{font-size:17px}
    .ab-txt > p,.ab-more p{font-size:16px}
  }
  @media (prefers-reduced-motion:reduce){
    .ab-ph,.ab-ph img,.ab-card,.ab-txt > *{transition:none!important}
    .ab.in .ab-card{animation:none}
  }
  /* ====== HAQQIMIZDA SONU ====== */


  /* ====== KURSLARIMIZ (referens: kart açılan slayder) ====== */
  .cr{position:relative; padding:110px 24px 120px; background:linear-gradient(180deg,#fff,#f1f6fc)}
  .cr-head{max-width:1300px; margin:0 auto 26px; display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap}
  .cr-head small{display:block; font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#007AD6}
  .cr-head h2{margin:10px 0 0; font-size:clamp(34px,4.4vw,56px); font-weight:500; letter-spacing:-.04em; line-height:1.04; color:#0b0f1a}
  .cr-head p{margin:0; max-width:380px; color:#5d6475; font-size:17px; line-height:1.5}

  .cr-stage{--ac:#007AD6; position:relative; max-width:1300px; margin:0 auto; height:min(84vh,720px); min-height:600px; border-radius:30px; overflow:hidden; isolation:isolate;
    background:#0d1626; color:#fff; box-shadow:0 40px 90px -30px rgba(20,40,80,.5)}
  .cr-bg{position:absolute; inset:0; background:#0d1626 center/cover no-repeat; z-index:0}
  .cr-bg.kb{animation:crKb 7s ease-out both}
  @keyframes crKb{from{transform:scale(1.08)} to{transform:scale(1)}}
  .cr-grow{position:absolute; z-index:1; background:center/cover no-repeat; border-radius:18px; box-shadow:0 30px 60px rgba(0,0,0,.45);
    transition:left .95s cubic-bezier(.65,0,.35,1), top .95s cubic-bezier(.65,0,.35,1), width .95s cubic-bezier(.65,0,.35,1), height .95s cubic-bezier(.65,0,.35,1), border-radius .95s ease, box-shadow .95s ease}
  .cr-fade{position:absolute; inset:0; z-index:1; background:center/cover no-repeat; opacity:0; transform:scale(1.06); transition:opacity .8s ease, transform 1.1s cubic-bezier(.22,1,.36,1)}
  .cr-fade.on{opacity:1; transform:none}
  .cr-shade{position:absolute; inset:0; z-index:2; pointer-events:none;
    background:linear-gradient(90deg,rgba(6,10,20,.72) 0%,rgba(6,10,20,.38) 38%,rgba(6,10,20,.08) 62%,rgba(6,10,20,.25) 100%),
               linear-gradient(0deg,rgba(6,10,20,.6) 0%,transparent 40%)}

  /* üst avtomatik proqres xətti */
  .cr-time{position:absolute; z-index:8; left:0; top:0; height:4px; width:100%; transform-origin:0 50%; transform:scaleX(0); background:var(--ac); box-shadow:0 0 14px var(--ac)}
  .cr-time.run{animation:crTime var(--dur,4s) linear forwards}
  .cr-stage.paused .cr-time.run{animation-play-state:paused}
  @keyframes crTime{to{transform:scaleX(1)}}

  /* sol mətn */
  .cr-copy{position:absolute; z-index:5; left:56px; top:50%; transform:translateY(-46%); width:min(440px,40%)}
  .cr-copy > *{transition:opacity .45s ease, transform .6s cubic-bezier(.22,1,.36,1), filter .45s ease}
  .cr-copy.out > *{opacity:0; transform:translateY(-16px); filter:blur(6px)}
  .cr-copy.pre > *{opacity:0; transform:translateY(22px); filter:blur(6px); transition:none}
  .cr-copy > :nth-child(2){transition-delay:.04s} .cr-copy > :nth-child(3){transition-delay:.08s}
  .cr-copy > :nth-child(4){transition-delay:.12s} .cr-copy > :nth-child(5){transition-delay:.16s}
  .cr-dash{display:block; width:26px; height:3px; border-radius:2px; background:#fff; margin-bottom:16px}
  .cr-eye{display:block; font-size:17px; font-weight:500; opacity:.92}
  .cr-copy h3{margin:10px 0 0; font-family:'Anton','Arial Narrow','DM Sans',sans-serif; font-weight:400; font-size:clamp(46px,5.6vw,84px); line-height:1.02; letter-spacing:.005em; text-transform:uppercase; white-space:nowrap; text-shadow:0 6px 30px rgba(0,0,0,.25)}
  .cr-copy p{margin:18px 0 0; font-size:15px; line-height:1.6; opacity:.86; max-width:420px}
  .cr-act{display:flex; align-items:center; gap:14px; margin-top:26px}
  .cr-mark{width:44px; height:44px; border-radius:50%; border:0; display:grid; place-items:center; cursor:pointer; color:#fff; background:var(--ac);
    box-shadow:0 10px 24px -6px var(--ac); transition:transform .25s ease-out, background .4s}
  .cr-mark:hover{transform:translateY(-2px) scale(1.05)}
  .cr-mark svg{width:18px; height:18px}
  .cr-mark[aria-pressed="true"] svg{fill:currentColor}
  .cr-go{display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 22px; border-radius:999px; color:#fff; text-decoration:none; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:background .25s ease-out, box-shadow .25s}
  .cr-go:hover{background:rgba(255,255,255,.2); box-shadow:inset 0 0 0 1.5px #fff}
  .cr-go svg{width:14px; height:14px}

  /* kartlar */
  .cr-cards{position:absolute; z-index:5; left:44%; bottom:126px; display:flex; gap:18px; margin:0; padding:0; list-style:none}
  .cr-card{position:relative; flex:none; width:200px; height:290px; border-radius:18px; overflow:hidden; cursor:pointer; background:#1a2436 center/cover no-repeat;
    box-shadow:0 22px 44px -14px rgba(0,0,0,.6); transition:box-shadow .3s ease-out; outline:none}
  .cr-card::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(5,9,18,.82)); transition:opacity .3s}
  .cr-card:hover{box-shadow:0 30px 54px -14px rgba(0,0,0,.7), 0 0 0 2px rgba(255,255,255,.7)}
  .cr-card:focus-visible{box-shadow:0 0 0 3px #fff, 0 22px 44px -14px rgba(0,0,0,.6)}
  .cr-card.cur{display:none}
  .cr-card .in{position:absolute; z-index:1; left:16px; right:14px; bottom:16px}
  .cr-card i{display:block; width:18px; height:2px; background:#fff; margin-bottom:8px; border-radius:2px}
  .cr-card small{display:block; font-size:11px; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .cr-card b{display:block; margin-top:4px; font-family:'Anton','Arial Narrow','DM Sans',sans-serif; font-weight:400; font-size:21px; line-height:1.08; text-transform:uppercase; letter-spacing:.01em}
  .cr-card.enter{opacity:0; transform:translateX(60px)}

  /* idarəetmə */
  .cr-ctrl{position:absolute; z-index:6; left:44%; right:56px; bottom:44px; display:flex; align-items:center; gap:14px}
  .cr-btn{width:52px; height:52px; flex:none; border-radius:50%; border:0; display:grid; place-items:center; cursor:pointer; color:#fff;
    background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:background .25s ease-out, transform .25s ease-out}
  .cr-btn:hover{background:rgba(255,255,255,.2); transform:scale(1.06)}
  .cr-btn svg{width:18px; height:18px}
  .cr-track{position:relative; flex:1; height:2px; margin:0 8px 0 14px; background:rgba(255,255,255,.25); border-radius:2px}
  .cr-track b{position:absolute; left:0; top:-1px; height:4px; border-radius:3px; background:var(--ac); transition:width .8s cubic-bezier(.22,1,.36,1), background .4s}
  .cr-num{font-family:'Anton','Arial Narrow','DM Sans',sans-serif; font-size:48px; line-height:1; min-width:64px; text-align:right; font-variant-numeric:tabular-nums}

  .cr-src{max-width:1300px; margin:14px auto 0; font-size:12px; color:#9aa3b2; text-align:right}

  @media (max-width:1020px){
    .cr-copy{left:36px; width:min(520px,calc(100% - 72px)); top:70px; transform:none}
    .cr-cards{left:36px; top:auto; bottom:120px; transform:none}
    .cr-card{width:150px; height:210px}
    .cr-card b{font-size:17px}
    .cr-ctrl{left:36px; right:36px; bottom:34px}
    .cr-stage{height:780px}
    .cr-shade{background:linear-gradient(180deg,rgba(6,10,20,.7) 0%,rgba(6,10,20,.35) 45%,rgba(6,10,20,.7) 100%)}
  }
  @media (max-width:600px){
    .cr{padding:80px 12px 90px}
    .cr-stage{height:760px; min-height:0; border-radius:24px}
    .cr-copy{left:22px; width:calc(100% - 44px); top:46px}
    .cr-copy h3{font-size:46px}
    .cr-copy p{font-size:14px}
    .cr-cards{left:22px; bottom:104px; gap:12px}
    .cr-card{width:118px; height:168px; border-radius:14px}
    .cr-card .in{left:12px; bottom:12px}
    .cr-card b{font-size:15px}
    .cr-card small{font-size:10px}
    .cr-ctrl{left:22px; right:22px; bottom:28px; gap:10px}
    .cr-btn{width:44px; height:44px}
    .cr-num{font-size:36px; min-width:48px}
  }
  @media (prefers-reduced-motion:reduce){
    .cr-grow,.cr-fade,.cr-copy > *,.cr-track b{transition:none!important}
    .cr-bg.kb,.cr-time.run{animation:none}
  }
  /* ====== KURSLARIMIZ SONU ====== */


  /* ====== FOOTER ====== */
  .ft{position:relative; margin-top:40px; padding:0 16px 16px}
  .ft-in{position:relative; max-width:1340px; margin:0 auto; border-radius:34px; overflow:hidden; isolation:isolate; color:#cfd8e6;
    background:radial-gradient(120% 90% at 85% 0%,#0c3a6b 0%,rgba(12,58,107,0) 55%),radial-gradient(90% 80% at 0% 100%,#0a2a52 0%,rgba(10,42,82,0) 60%),#060d1a;
    box-shadow:0 40px 90px -40px rgba(6,13,26,.7)}
  .ft-in::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.35;
    background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
    background-size:56px 56px; -webkit-mask-image:radial-gradient(80% 70% at 70% 10%,#000,transparent 75%); mask-image:radial-gradient(80% 70% at 70% 10%,#000,transparent 75%)}
  .ft-orb{position:absolute; z-index:-1; width:420px; height:420px; border-radius:50%; right:-120px; top:-160px; background:#007AD6; filter:blur(120px); opacity:.45; pointer-events:none}

  /* CTA sətri */
  .ft-cta{display:flex; justify-content:space-between; align-items:center; gap:28px; flex-wrap:wrap; padding:64px 64px 48px; border-bottom:1px solid rgba(255,255,255,.08)}
  .ft-cta h2{margin:0; max-width:640px; font-size:clamp(32px,4vw,54px); font-weight:500; letter-spacing:-.035em; line-height:1.05; color:#fff}
  .ft-cta h2 em{font-style:normal; color:#4db1ff}
  .ft-cta-b{display:flex; gap:12px; flex-wrap:wrap}
  .ft-btn{display:inline-flex; align-items:center; gap:10px; height:54px; padding:0 26px; border-radius:999px; text-decoration:none; font-weight:600; font-size:15px; transition:transform .25s ease-out, box-shadow .25s ease-out, background .25s}
  .ft-btn.pri{color:#fff; background:#007AD6; box-shadow:0 14px 30px -8px rgba(0,122,214,.7), inset 0 1px 0 rgba(255,255,255,.25)}
  .ft-btn.pri:hover{transform:translateY(-2px); box-shadow:0 20px 36px -8px rgba(0,122,214,.8)}
  .ft-btn.gl{color:#fff; background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
  .ft-btn.gl:hover{background:rgba(255,255,255,.14)}
  .ft-btn svg{width:16px; height:16px}

  /* sütunlar */
  .ft-grid{display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:40px; padding:52px 64px 30px}
  .ft-brand{max-width:340px}
  .ft-logo{display:inline-flex; align-items:center; gap:14px; text-decoration:none; color:#fff}
  .ft-logo span{width:58px; height:58px; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:0 0 0 6px rgba(255,255,255,.06), 0 12px 30px -8px rgba(0,122,214,.6)}
  .ft-logo img{width:48px; height:48px; object-fit:contain}
  .ft-logo b{font-size:20px; font-weight:700; letter-spacing:-.02em}
  .ft-logo small{display:block; font-size:12px; font-weight:500; color:#8fa3bf; letter-spacing:.02em}
  .ft-brand p{margin:18px 0 0; font-size:15px; line-height:1.65; color:#93a4bd}
  .ft-soc{display:flex; gap:10px; margin-top:22px}
  .ft-soc a{width:42px; height:42px; border-radius:50%; display:grid; place-items:center; color:#dbe6f5; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
    transition:background .25s ease-out, transform .25s ease-out, color .25s}
  .ft-soc a:hover{background:#007AD6; color:#fff; transform:translateY(-3px)}
  .ft-soc svg{width:18px; height:18px}
  .ft-col h4{margin:6px 0 16px; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#4db1ff}
  .ft-col ul{list-style:none; margin:0; padding:0; display:grid; gap:4px}
  .ft-col a{position:relative; display:inline-block; padding:6px 12px; margin-left:-12px; border-radius:999px; color:#cfd8e6; text-decoration:none; font-size:15px;
    transition:background .25s ease-out, color .25s ease-out, transform .25s ease-out}
  .ft-col a:hover{background:rgba(0,122,214,.18); color:#fff; transform:translateX(4px)}
  .ft-col a:focus-visible,.ft-soc a:focus-visible,.ft-btn:focus-visible,.ft-made:focus-visible,.ft-top:focus-visible{outline:2px solid #4db1ff; outline-offset:3px}

  /* nəhəng yazı */
  .ft-giant{position:relative; margin:0; padding:0 40px; text-align:center; font-family:'Anton','Arial Narrow','DM Sans',sans-serif; font-weight:400; font-size:clamp(60px,14.2vw,210px);
    line-height:.9; letter-spacing:.01em; text-transform:uppercase; white-space:nowrap; user-select:none; pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.02) 85%); -webkit-background-clip:text; background-clip:text; color:transparent;
    transform:translateY(18%); opacity:0; transition:opacity 1.2s ease, transform 1.4s cubic-bezier(.22,1,.36,1)}
  .ft.in .ft-giant{opacity:1; transform:translateY(8%)}

  /* alt şüşə zolaq */
  .ft-bar{position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin:0 16px 16px; padding:12px 12px 12px 26px; border-radius:24px;
    background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.05)); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
    box-shadow:inset 1px 1px 0 rgba(255,255,255,.18), inset -1px -1px 0 rgba(255,255,255,.05), 0 20px 40px -20px rgba(0,0,0,.6)}
  .ft-copy{margin:0; font-size:14px; color:#93a4bd}
  .ft-right{display:flex; align-items:center; gap:10px}
  .ft-made{display:inline-flex; align-items:center; gap:12px; padding:6px 8px 6px 18px; border-radius:999px; text-decoration:none; color:#dbe6f5; font-size:14px;
    background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); transition:background .25s ease-out, box-shadow .25s}
  .ft-made:hover{background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
  .ft-made .chip{display:inline-flex; align-items:center; height:38px; padding:0 14px; border-radius:999px; background:#fff; box-shadow:0 6px 16px -6px rgba(0,0,0,.5); transition:transform .25s ease-out}
  .ft-made:hover .chip{transform:scale(1.04)}
  .ft-made .chip img{display:block; height:24px; width:auto; max-width:150px}
  .ft-made .chip b{display:none; font-size:14px; font-weight:700; color:#0b0f1a; letter-spacing:-.01em}
  .ft-made .chip.noimg img{display:none} .ft-made .chip.noimg b{display:block}
  .ft-top{width:46px; height:46px; flex:none; border:0; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:#fff; background:#007AD6;
    box-shadow:0 10px 24px -6px rgba(0,122,214,.7); transition:transform .25s ease-out}
  .ft-top:hover{transform:translateY(-3px)}
  .ft-top svg{width:18px; height:18px}

  @media (max-width:1020px){
    .ft-cta{padding:52px 36px 40px}
    .ft-grid{grid-template-columns:1fr 1fr; padding:44px 36px 24px}
    .ft-brand{grid-column:1 / -1; max-width:none}
  }
  @media (max-width:600px){
    .ft{padding:0 8px 8px}
    .ft-in{border-radius:26px}
    .ft-cta{padding:42px 22px 32px}
    .ft-btn{height:50px; padding:0 20px}
    .ft-grid{grid-template-columns:1fr 1fr; gap:28px 16px; padding:36px 22px 18px}
    .ft-giant{padding:0 12px; font-size:15.5vw}
    .ft-bar{margin:0 8px 8px; padding:14px; justify-content:center; text-align:center}
    .ft-right{flex-wrap:wrap; justify-content:center}
    .ft-made{padding-left:14px; font-size:13px}
  }
  @media (prefers-reduced-motion:reduce){ .ft-giant{transition:none; opacity:1; transform:translateY(8%)} }
  /* ====== FOOTER SONU ====== */

  /* ====== DEMO SƏHİFƏ — yalnız effekti görmək üçündür, öz saytında SİL ====== */
  .demo{
    min-height:180vh;
    padding-top:120px !important;
    background:
      radial-gradient(420px 260px at 12% 6%,  #6fa3ff 0%, transparent 70%),
      radial-gradient(460px 240px at 55% 8%,  #b38cff 0%, transparent 70%),
      radial-gradient(420px 260px at 88% 4%,  #ff8fcf 0%, transparent 70%),
      linear-gradient(100deg,#a9c8f2 0%,#cdd3f6 30%,#dccbf2 55%,#f0bde3 80%,#e7a6d2 100%);
    padding:180px 24px 80px;
  }
  .demo h1{font-size:clamp(44px,8vw,112px); line-height:.95; margin:0 auto 48px; max-width:1100px; color:#1b1530; letter-spacing:-.02em}
  .demo .row{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; max-width:1100px; margin:0 auto 20px}
  .demo .card{height:220px; border-radius:28px; color:#fff; font-size:28px; font-weight:700; padding:24px; display:flex; align-items:flex-end}
  .demo p{max-width:1100px; margin:40px auto; font-size:20px; line-height:1.6; color:#2b2b3a}

.load-err{margin:24px auto;padding:16px 20px;text-align:center;font-size:14px;opacity:.85}
.load-retry{margin-left:8px;padding:6px 12px;border-radius:999px;border:1px solid currentColor;background:transparent;color:inherit;font:inherit;cursor:pointer}