/* ===================================================================
   Avloniy PMMI — Landing page
   Base · tokens · theme · header · hero · footer · tweaks
   =================================================================== */

/* ---------- Design tokens (LIGHT) ---------- */
:root {
  --brand: #002D6D;          /* institutional navy (seal) */
  --brand-deep: #001F4D;
  --brand-2: #1F6FD0;
  --brand-tint: var(--ds-g3, #eaf0f8);

  --action: #1F6FD0;         /* institutional blue CTA */
  --action-600: #155BB0;
  --action-tint: #E3EDF9;

  --gold: #C96F1F;           /* coral accent */
  --gold-bright: #E89B3C;
  --gold-tint: #F9EFDC;
  --frame-gold: #D2B05A;    /* soft champagne — frame hairline / medal / divider */

  --bg: var(--ds-g3, #f1f3fa);
  --surface-2: var(--ds-g2, #f7f8fd);
  --surface-3: var(--ds-g3, #eceff7);
  --glass: rgba(255,255,255,.72);

  --border: var(--ds-g4, #e4e7f2);
  --border-strong: #D3D9EA;

  --ink: #181C2E;
  --ink-2: #5A6175;
  --ink-3: #8E96AC;

  --hero-img: url("assets/bg-day.png");
  --hero-scene: url("assets/hero-light.jpg");
  --hero-photo-img: url("assets/hero-scene-day-v2.jpg");
  --block-bg: url("assets/block-bg-light.jpg");
  --lead-bg: url("assets/lead-bg-light.jpg");
  --cert-bg: url("assets/cert-bg-light.jpg");
  --page-bg: url("assets/page-bg-light.jpg");
  --hero-scrim: linear-gradient(180deg, rgba(241,243,250,0) 30%, rgba(241,243,250,.5) 78%, var(--bg) 100%);
  --hero-ink: var(--ink);

  --shadow-sm: 0 1px 2px rgba(16,33,64,.05), 0 1px 3px rgba(16,33,64,.04);
  --shadow-md: 0 6px 22px rgba(16,33,64,.08), 0 2px 6px rgba(16,33,64,.05);
  --shadow-lg: 0 18px 50px rgba(16,33,64,.13), 0 4px 12px rgba(16,33,64,.06);
  --shadow-pop: 0 28px 70px rgba(14,39,80,.22);
  --ring: 0 0 0 4px var(--action-tint);

  /* radius — tweakable */
  --r-lg: 24px;
  --r-card: 18px;
  --r-md: 13px;
  --r-sm: 10px;
  --r-pill: 999px;

  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font);

  --maxw: 1280px;
  --pad: clamp(20px, 5vw, 64px);
  --t: .26s cubic-bezier(.4, 0, .2, 1);
  --anim-mult: 1;
}

[data-theme="dark"] {
  --brand: #8FB8F0;
  --brand-deep: #0C0F1D;
  --brand-2: #5B9BEA;
  --brand-tint: rgba(91,155,234,.14);

  --action: #5B9BEA;
  --action-600: #4A8BDE;
  --action-tint: rgba(91,155,234,.16);

  --gold: #E2A845;
  --gold-bright: #EDBE6B;
  --gold-tint: rgba(226,168,69,.16);
  --frame-gold: #E8CC82;

  --bg: #10131F;
  --surface: #1B1F31;
  --surface-2: #171B2B;
  --surface-3: #232942;
  --glass: rgba(27,31,49,.66);

  --border: rgba(255,255,255,.085);
  --border-strong: rgba(255,255,255,.16);

  --ink: var(--ds-g3, #edeff9);
  --ink-2: #A9B0C9;
  --ink-3: #6E7694;

  --hero-img: url("assets/bg-night.png");
  --hero-scene: url("assets/hero-dark.jpg");
  --hero-photo-img: url("assets/hero-scene-night-v2.jpg");
  --block-bg: url("assets/block-bg-dark.jpg");
  --lead-bg: url("assets/lead-bg-dark.jpg");
  --cert-bg: url("assets/cert-bg-dark.jpg");
  --page-bg: url("assets/page-bg-dark.jpg");
  --hero-scrim: linear-gradient(180deg, rgba(16,19,31,.1) 0%, rgba(16,19,31,.3) 48%, rgba(16,19,31,.8) 82%, var(--bg) 100%);
  --hero-ink: #F2F6FF;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 8px 26px rgba(0,0,0,.4);
  --shadow-lg: 0 22px 56px rgba(0,0,0,.5);
  --shadow-pop: 0 30px 80px rgba(0,0,0,.6);
}

/* ---------- reset / base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; color-scheme: light; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--brand) 40%, transparent) transparent; }
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--brand) 38%, transparent); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
html::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--brand) 58%, transparent); background-clip: padding-box; border: 2px solid transparent; }
[data-theme="dark"] { color-scheme: dark; scrollbar-color: rgba(120,134,164,.5) transparent; }
[data-theme="dark"]::-webkit-scrollbar { width: 10px; }
[data-theme="dark"]::-webkit-scrollbar-track { background: transparent; }
[data-theme="dark"]::-webkit-scrollbar-thumb { background: rgba(120,134,164,.42); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
[data-theme="dark"]::-webkit-scrollbar-thumb:hover { background: rgba(140,155,190,.62); background-clip: padding-box; border: 2px solid transparent; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background .4s ease, color .4s ease;
}
/* ---------- global page backdrop (single continuous ornament, no section seams) ---------- */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--bg) var(--page-bg) no-repeat center center / cover;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font: inherit; }
ul { list-style: none; }
::selection { background: var(--action-tint); color: var(--action-600); }
:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; letter-spacing: -.02em; font-weight: 800; color: var(--ink); }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }
.section { padding-block: clamp(56px, 8vw, 110px); position: relative; }
.section-tight { padding-block: clamp(40px, 5vw, 64px); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--action-600);
}
[data-theme="dark"] .eyebrow { color: var(--action); }
.eyebrow::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: var(--gold-bright);
}
.section-head { max-width: 660px; margin-bottom: clamp(32px, 4vw, 52px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head h2 { font-size: clamp(28px, 4vw, 42px); margin-top: 16px; }
.section-head p { color: var(--ink-2); font-size: clamp(15px, 1.4vw, 17px); margin-top: 14px; text-wrap: pretty; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 50px; padding: 0 24px; border-radius: var(--r-pill);
  font-weight: 700; font-size: 15px; white-space: nowrap;
  transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t), border-color var(--t);
}
.btn svg { flex: 0 0 auto; }
.btn-primary { background: var(--action); color: #fff; box-shadow: 0 8px 22px -6px color-mix(in srgb, var(--action) 60%, transparent); }
.btn-primary:hover { background: var(--action-600); transform: translateY(-2px); box-shadow: 0 14px 30px -8px color-mix(in srgb, var(--action) 60%, transparent); }
.btn-navy { background: var(--brand); color: #fff; }
[data-theme="dark"] .btn-navy { background: var(--surface-3); color: var(--ink); }
.btn-navy:hover { background: var(--brand-deep); transform: translateY(-2px); }
.btn-ghost { background: var(--surface); color: var(--ink); border: 1.5px solid var(--border-strong); }
.btn-ghost:hover { border-color: var(--action); color: var(--action-600); transform: translateY(-2px); }
[data-theme="dark"] .btn-ghost:hover { color: var(--action); }
.btn-glass { background: color-mix(in srgb, var(--surface) 30%, transparent); backdrop-filter: blur(10px); color: var(--hero-ink); border: 1.5px solid color-mix(in srgb, var(--hero-ink) 28%, transparent); }
.btn-glass:hover { background: color-mix(in srgb, var(--surface) 55%, transparent); transform: translateY(-2px); }
.btn-sm { height: 40px; padding: 0 16px; font-size: 13.5px; }
.btn-block { width: 100%; }

/* link with arrow */
.tlink { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--action-600); font-size: 14.5px; transition: gap var(--t), color var(--t); }
[data-theme="dark"] .tlink { color: var(--action); }
.tlink svg { transition: transform var(--t); }
.tlink:hover { gap: 11px; }
.tlink:hover svg { transform: translateX(3px); }

/* ---------- header ---------- */
.hdr {
  --hdrt: 14px; --hdrh: 66px;
  --hdre: cubic-bezier(.4, 0, .2, 1);
  position: sticky; top: 0; z-index: 60;
  padding-inline: 0;
  margin-bottom: calc(-1 * (var(--hdrh) + var(--hdrt)));
  pointer-events: none;
  transition: top .38s var(--hdre), padding .38s var(--hdre);
}
.hdr.scrolled { top: var(--hdrt); padding-inline: clamp(12px, 2.5vw, 28px); }
.hdr-row {
  pointer-events: auto;
  display: flex; align-items: center; gap: 16px; height: var(--hdrh);
  max-width: 100%;
  padding-inline: max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));
  background: var(--glass);
  backdrop-filter: saturate(1.5) blur(22px);
  -webkit-backdrop-filter: saturate(1.5) blur(22px);
  border: 1px solid transparent;
  border-bottom-color: var(--border);
  border-radius: 0;
  transition: max-width .38s var(--hdre, ease), border-radius .38s var(--hdre, ease), padding .38s var(--hdre, ease), border-color .3s, box-shadow .38s, background .4s;
}
.hdr.scrolled .hdr-row {
  max-width: var(--maxw);
  padding-inline: 18px 12px;
  border-radius: 999px;
  border-color: rgba(255, 255, 255, .72);
  box-shadow: 0 16px 44px rgba(20, 28, 52, .14), 0 2px 6px rgba(20, 28, 52, .07);
}
[data-theme="dark"] .hdr-row { border-bottom-color: var(--border); }
[data-theme="dark"] .hdr.scrolled .hdr-row { border-color: rgba(255, 255, 255, .1); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
@media (prefers-reduced-motion: reduce) { .hdr, .hdr-row { transition: none; } }
@media (max-width: 1120px) { .hdr-row { gap: 8px; } .nav a { padding: 9px 10px; font-size: 14px; } }

.brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand-mark { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; }
.brand-mark svg { width: 40px; height: 40px; filter: drop-shadow(0 2px 4px rgba(16,33,64,.1)); }
.brand-mark .bm-sq1 { stroke: var(--brand); }
.brand-mark .bm-sq2 { stroke: var(--action); }
.brand-mark .bm-dot { fill: var(--gold-bright); }
[data-theme="dark"] .brand-mark .bm-sq1 { stroke: #9DB8EE; }
.brand-tx { display: flex; flex-direction: column; line-height: 1.12; }
.brand-name { font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.brand-name .bn-1 { color: var(--brand); }
.brand-name .bn-2 { color: var(--action); }
[data-theme="dark"] .brand-name .bn-1 { color: #EAF1FC; }
.brand-sub { font-size: 10.5px; font-weight: 600; letter-spacing: .005em; color: var(--ink-3); margin-top: 1px; white-space: nowrap; }
.drawer-head .brand-tx b { font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--ink); }

.nav { display: flex; align-items: center; gap: 4px; margin-left: 6px; }
.nav a {
  position: relative; padding: 9px 14px; border-radius: var(--r-sm);
  font-size: 14.5px; font-weight: 600; color: var(--ink-2);
  transition: color var(--t), background var(--t);
}
.nav a { white-space: nowrap; }
.nav a:hover { color: var(--ink); background: var(--surface-3); }
.nav a.active { color: var(--action-600); }
.nav a.active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2.5px; border-radius: 2px; background: var(--action); }
[data-theme="dark"] .nav a.active { color: var(--action); }

.hdr-search { position: relative; display: flex; align-items: center; width: 340px; max-width: 32vw; transition: width var(--t), max-width var(--t); }
.hdr-search:focus-within { width: 430px; max-width: 38vw; }
.hdr-search svg { position: absolute; left: 15px; width: 19px; height: 19px; color: var(--ink-3); pointer-events: none; }
.hdr-search input { width: 100%; height: 46px; border: 1px solid var(--border); background: var(--surface-2); border-radius: var(--r-pill); padding: 0 18px 0 43px; font-size: 14.5px; color: var(--ink); outline: none; transition: border-color var(--t), background var(--t), box-shadow var(--t); }
.hdr-search input::placeholder { color: var(--ink-3); }
.hdr-search input:focus { border-color: var(--action); background: var(--surface); box-shadow: var(--ring); }
@media (max-width: 1024px) { .hdr-search { display: none; } }

.hdr-spacer { flex: 1; }
.hdr-tools { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }

.icon-btn {
  width: 42px; height: 42px; border-radius: var(--r-md); display: grid; place-items: center;
  color: var(--ink-2); border: 1px solid transparent; transition: all var(--t); position: relative;
}
.icon-btn:hover { background: var(--surface-3); color: var(--ink); }

/* language switcher */
.lang { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 12px; border-radius: var(--r-md); font-size: 14px; font-weight: 700; color: var(--ink-2); border: 1px solid var(--border); background: var(--surface); transition: all var(--t); }
.lang-btn:hover { border-color: var(--border-strong); color: var(--ink); }
.lang-btn .chev { transition: transform var(--t); color: var(--ink-3); }
.lang.open .lang-btn .chev { transform: rotate(180deg); }
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 168px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); padding: 6px; opacity: 0; visibility: hidden;
  transform: translateY(-6px) scale(.98); transform-origin: top right; transition: all var(--t); z-index: 70;
}
.lang.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.lang-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: var(--r-sm); font-size: 14px; font-weight: 600; color: var(--ink-2); transition: all var(--t); }
.lang-opt:hover { background: var(--surface-3); color: var(--ink); }
.lang-opt.on { background: var(--action-tint); color: var(--action-600); font-weight: 800; }
[data-theme="dark"] .lang-opt.on { color: var(--action); }
.lang-opt .code { margin-left: auto; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--ink-3); }
.lang-opt.on .code { color: inherit; }

.theme-toggle .sun { display: none; }
.theme-toggle .moon { display: block; }
[data-theme="dark"] .theme-toggle .sun { display: block; }
[data-theme="dark"] .theme-toggle .moon { display: none; }

.burger { display: none; }

/* mobile drawer */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(8,15,34,.5); backdrop-filter: blur(3px); z-index: 80; opacity: 0; visibility: hidden; transition: all var(--t); }
.drawer-backdrop.open { opacity: 1; visibility: visible; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(86vw, 340px); background: var(--surface); z-index: 90; transform: translateX(100%); transition: transform var(--t); padding: 22px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-pop); overflow-y: auto; }
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.drawer a { padding: 13px 14px; border-radius: var(--r-md); font-size: 16px; font-weight: 600; color: var(--ink); transition: background var(--t); }
.drawer a:hover { background: var(--surface-3); }
.drawer .divider { height: 1px; background: var(--border); margin: 12px 0; }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: -2;
  background: url("assets/hero-bg-light.jpg") no-repeat right top / cover;
}
[data-theme="dark"] .hero-bg {
  background: url("assets/hero-bg-dark.jpg") no-repeat right top / cover;
}
.hero-bg::after { content: ""; position: absolute; inset: 0; background: var(--hero-scrim); }

/* content section (#kurslar) — global backdrop shows through */
#kurslar { position: relative; }
#kurslar::before { content: none; }
.hero-inner { padding-top: calc(clamp(48px, 7vw, 88px) + var(--hdrh, 66px) + 8px); padding-bottom: clamp(70px, 9vw, 130px); display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 4vw, 64px); align-items: center; }

.hero-copy { max-width: 600px; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px;
  padding: 7px 15px 7px 10px; border-radius: var(--r-pill); white-space: nowrap;
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--action-600);
  background: color-mix(in srgb, var(--surface) 58%, transparent); backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--hero-ink) 12%, transparent); box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .hero-eyebrow { color: var(--action); background: color-mix(in srgb, var(--surface) 46%, transparent); }
.hero-eyebrow svg { width: 16px; height: 16px; color: var(--gold-bright); }

.hero h1 { font-family: "Lora", Georgia, "Times New Roman", serif; color: var(--hero-ink); font-size: clamp(36px, 5.2vw, 62px); line-height: 1.07; letter-spacing: -.015em; font-weight: 700; }
.hero h1 .accent { color: var(--action-600); }
[data-theme="dark"] .hero h1 .accent { color: var(--action); }

.hero-divider { display: flex; align-items: center; gap: 12px; width: 250px; max-width: 60%; margin-top: 24px; }
.hero-divider .ln { height: 1px; flex: 1; background: linear-gradient(90deg, var(--frame-gold), transparent); }
.hero-divider .ln:first-child { background: linear-gradient(90deg, transparent, var(--frame-gold)); }
.hero-divider svg { width: 16px; height: 16px; color: var(--frame-gold); flex: 0 0 16px; }

.hero-sub { font-size: clamp(15px, 1.5vw, 18px); color: color-mix(in srgb, var(--hero-ink) 78%, transparent); margin-top: 22px; max-width: 480px; line-height: 1.7; text-wrap: pretty; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
[data-theme="dark"] .hero-cta .btn-navy { background: color-mix(in srgb, var(--action) 16%, transparent); border: 1.5px solid var(--action); color: #fff; box-shadow: 0 0 26px -6px var(--action); }
[data-theme="dark"] .hero-cta .btn-navy:hover { background: color-mix(in srgb, var(--action) 26%, transparent); }
[data-theme="dark"] .hero-cta .btn-ghost { background: color-mix(in srgb, var(--surface) 42%, transparent); border-color: var(--border-strong); color: var(--hero-ink); backdrop-filter: blur(8px); }

.hero-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.hstat { display: flex; align-items: center; gap: 11px; padding: 13px 15px; border-radius: var(--r-md); flex: 1 1 auto;
  background: color-mix(in srgb, var(--surface) 72%, transparent); border: 1px solid color-mix(in srgb, var(--hero-ink) 10%, transparent);
  backdrop-filter: blur(8px); box-shadow: var(--shadow-sm); }
[data-theme="dark"] .hstat { background: color-mix(in srgb, var(--surface) 52%, transparent); }
.hstat-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 40px; color: #fff; }
.hstat-ic svg { width: 21px; height: 21px; }
.hstat-ic.i-teal { background: linear-gradient(135deg, #0E9E78, #16C79A); }
.hstat-ic.i-coral { background: linear-gradient(135deg, var(--gold), var(--gold-bright)); }
.hstat-ic.i-navy { background: linear-gradient(135deg, #1B3F7A, #2C6AB0); }
.hstat-tx { display: flex; flex-direction: column; line-height: 1.15; }
.hstat-tx b { font-family: var(--font-display); font-size: 19px; font-weight: 800; color: var(--hero-ink); white-space: nowrap; }
.hstat-tx span { font-size: 11.5px; font-weight: 600; color: color-mix(in srgb, var(--hero-ink) 62%, transparent); margin-top: 2px; white-space: nowrap; }

/* hero visual (ornamental cusped frame + floating cards) */
.hero-visual { position: relative; }
.hero-frame { position: relative; aspect-ratio: 7 / 5; filter: drop-shadow(0 26px 52px rgba(16,33,64,.20)); }
[data-theme="dark"] .hero-frame { filter: drop-shadow(0 26px 60px rgba(0,0,0,.6)) drop-shadow(0 0 50px rgba(226,184,68,.16)); }
.hero-photo { position: absolute; inset: 0; background-image: var(--hero-photo-img); background-size: cover; background-position: 58% 42%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20700%20500'%20preserveAspectRatio%3D'none'%3E%3Cpath%20d%3D'M56%200%20L644%200%20A56%2056%200%200%200%20700%2056%20L700%20444%20A56%2056%200%200%200%20644%20500%20L56%20500%20A56%2056%200%200%200%200%20444%20L0%2056%20A56%2056%200%200%200%2056%200%20Z'%20fill%3D'%23fff'%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20700%20500'%20preserveAspectRatio%3D'none'%3E%3Cpath%20d%3D'M56%200%20L644%200%20A56%2056%200%200%200%20700%2056%20L700%20444%20A56%2056%200%200%200%20644%20500%20L56%20500%20A56%2056%200%200%200%200%20444%20L0%2056%20A56%2056%200%200%200%2056%200%20Z'%20fill%3D'%23fff'%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat;
  transition: transform .8s ease; }
.hero-visual:hover .hero-photo { transform: scale(1.035); }
/* hero-frame-art (oltin ramka) 2026-07-20 da olib tashlandi */
@media (prefers-reduced-motion: reduce) { .hero-visual:hover .hero-photo { transform: none; } }

.hero-pop { position: absolute; z-index: 3; }
.hero-pop-feats { top: 6%; left: 4%; width: 322px; max-width: 80%; padding: 16px; border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
[data-theme="dark"] .hero-pop-feats { background: color-mix(in srgb, var(--surface) 76%, transparent);
  border-color: color-mix(in srgb, var(--action) 32%, transparent); box-shadow: var(--shadow-lg), 0 0 44px -18px var(--action); }
.hp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.hp-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 36px; background: var(--action-tint); color: var(--action-600); }
[data-theme="dark"] .hp-ic { color: var(--action); }
.hp-ic svg { width: 20px; height: 20px; }
.hp-head b { font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--ink); }
.hp-list { display: flex; flex-direction: column; gap: 11px; }
.hp-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); line-height: 1.3; white-space: nowrap; }
.hp-list svg { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 1px; color: var(--action-600); }
[data-theme="dark"] .hp-list svg { color: var(--action); }

.hero-pop-cert { bottom: 7%; left: 3%; display: flex; align-items: center; gap: 13px; padding: 14px 18px; border-radius: 16px;
  background: linear-gradient(135deg, #0C7A5F, #119C77); color: #fff; box-shadow: var(--shadow-lg); }
[data-theme="dark"] .hero-pop-cert { background: linear-gradient(135deg, #093C49, #0E5A52);
  border: 1px solid color-mix(in srgb, var(--gold-bright) 40%, transparent); box-shadow: var(--shadow-lg), 0 0 44px -16px var(--gold-bright); }
.hpc-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 38px; background: rgba(255,255,255,.16); }
.hpc-ic svg { width: 20px; height: 20px; }
.hpc-tx { display: flex; flex-direction: column; line-height: 1.2; }
.hpc-tx b { font-size: 14px; font-weight: 800; }
.hpc-tx span { font-size: 11.5px; opacity: .82; margin-top: 2px; }
.hpc-medal { margin-left: 4px; color: var(--frame-gold); display: grid; place-items: center; }
.hpc-medal svg { width: 30px; height: 30px; }

/* ---------- footer ---------- */
.footer { background: radial-gradient(120% 110% at 86% -12%, rgba(124, 113, 255, .28), transparent 54%), linear-gradient(163deg, #232447 0%, #12142A 64%); color: #C6CBE4; padding-top: clamp(56px, 7vw, 88px); position: relative; overflow: hidden; }
[data-theme="dark"] .footer { background: linear-gradient(180deg, transparent 0%, rgba(4,8,20,.55) 34%, rgba(4,8,20,.8) 100%); border-top: 1px solid var(--border); }
[data-theme="dark"] .footer::before { content: none; }
.footer::before { content: ""; position: absolute; inset: 0; background: var(--footer-bg-base, #12142A) url("assets/footer-bg.jpg") no-repeat center center / cover; z-index: 0; }
.footer .wrap { position: relative; z-index: 1; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; }
.footer-brand .brand-name .bn-1 { color: #fff; }
.footer-brand .brand-name .bn-2 { color: var(--action); }
.footer-brand .brand-mark .bm-sq1 { stroke: #cdd8ec; }
.footer-brand .brand-sub { color: #8fa3c4; }
.footer-brand p { color: #9fb0cd; font-size: 14px; margin-top: 18px; max-width: 300px; line-height: 1.7; }
.footer-social { display: flex; gap: 10px; margin-top: 22px; }
.footer-social a { width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; background: rgba(255,255,255,.07); color: #cdd8ec; transition: all var(--t); }
.footer-social a:hover { background: var(--action); color: #fff; transform: translateY(-2px); }
.footer-col h4 { color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 18px; }
.footer-col a { display: block; color: #9fb0cd; font-size: 14.5px; padding: 7px 0; transition: color var(--t), padding-left var(--t); }
.footer-col a:hover { color: #fff; padding-left: 5px; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 26px 0; border-top: 1px solid rgba(255,255,255,.1); }
.footer-bottom p { font-size: 13.5px; color: #8093b2; }
.footer-bottom .fb-links { display: flex; gap: 22px; }
.footer-bottom .fb-links a { font-size: 13.5px; color: #8093b2; transition: color var(--t); }
.footer-bottom .fb-links a:hover { color: #fff; }

/* ---------- reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity calc(.7s * var(--anim-mult)) ease, transform calc(.7s * var(--anim-mult)) cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: calc(.07s * var(--anim-mult)); }
.reveal.d2 { transition-delay: calc(.14s * var(--anim-mult)); }
.reveal.d3 { transition-delay: calc(.21s * var(--anim-mult)); }
.reveal.d4 { transition-delay: calc(.28s * var(--anim-mult)); }
body.anim-off .reveal { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ---------- tweaks panel ---------- */
#tweaks-host { position: fixed; right: 18px; bottom: 18px; z-index: 200; font-family: var(--font); }
.tw-panel { width: 296px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-pop); overflow: hidden; }
.tw-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); cursor: grab; }
.tw-head b { font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.tw-head .x { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-3); }
.tw-head .x:hover { background: var(--surface-3); color: var(--ink); }
.tw-body { padding: 6px 16px 16px; max-height: 70vh; overflow-y: auto; }
.tw-sec { padding-top: 14px; }
.tw-sec > label { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 9px; }
.tw-seg { display: flex; gap: 6px; background: var(--surface-3); padding: 4px; border-radius: 11px; }
.tw-seg button { flex: 1; padding: 8px 6px; border-radius: 8px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); transition: all var(--t); }
.tw-seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.tw-swatches { display: flex; gap: 9px; }
.tw-sw { width: 34px; height: 34px; border-radius: 9px; border: 2px solid transparent; box-shadow: var(--shadow-sm); transition: transform var(--t); position: relative; }
.tw-sw:hover { transform: scale(1.08); }
.tw-sw.on { border-color: var(--ink); }
.tw-sw.on::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 800; }
.tw-range { width: 100%; accent-color: var(--action); }
.tw-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tw-toggle { width: 44px; height: 26px; border-radius: 99px; background: var(--surface-3); position: relative; transition: background var(--t); flex: 0 0 44px; }
.tw-toggle.on { background: var(--action); }
.tw-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--t); }
.tw-toggle.on::after { transform: translateX(18px); }
.tw-fab { width: 54px; height: 54px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-pop); margin-left: auto; transition: transform var(--t); }
.tw-fab:hover { transform: scale(1.06) rotate(20deg); }
#tweaks-host[hidden] { display: none; }


/* ---------- header qidiruv natijalari ---------- */
.hdr-search-dd { position: absolute; top: calc(100% + 10px); left: 0; min-width: 320px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 6px; display: none; z-index: 70; max-height: 56vh; overflow-y: auto; }
.hdr-search.open .hdr-search-dd { display: block; }
.sr-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 10px; border: 0; background: none; font-family: var(--font); font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer; }
.sr-item:hover { background: var(--surface-3); }
.sr-item .ic { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; display: grid; place-items: center; background: var(--action-tint); color: var(--action-600); }
.sr-item .ic svg { width: 16px; height: 16px; }
[data-theme="dark"] .sr-item .ic { color: var(--action); }
.sr-item .tx { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-item .tp { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.sr-empty { padding: 12px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.search-hit { outline: 2.5px solid var(--action); outline-offset: 4px; }

/* qidiruv overlay (o'rtada, ⌘K / "/") */
.search-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 20px 20px; background: color-mix(in srgb, #04102b 55%, transparent); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); opacity: 0; transition: opacity .2s ease; }
.search-overlay[hidden] { display: none; }
.search-overlay.show { opacity: 1; }
.search-modal { width: 100%; max-width: 640px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; transform: translateY(-14px) scale(.975); transition: transform .22s cubic-bezier(.22,.61,.36,1); }
.search-overlay.show .search-modal { transform: none; }
.search-bar { display: flex; align-items: center; gap: 12px; padding: 15px; border-bottom: 1px solid var(--border); }
.search-bar-ic { width: 22px; height: 22px; color: var(--ink-3); flex: 0 0 22px; }
.search-bar input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-family: var(--font); font-size: 18px; color: var(--ink); }
.search-bar input::placeholder { color: var(--ink-3); }
.search-kbd { font-size: 11px; font-weight: 700; color: var(--ink-3); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 6px; padding: 2px 6px; background: var(--surface-2); }
.search-esc { border: 0; background: var(--surface-3); color: var(--ink-2); width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; flex: 0 0 30px; transition: background var(--t), color var(--t); }
.search-esc svg { width: 16px; height: 16px; }
.search-esc:hover { background: var(--action-tint); color: var(--action-600); }
.search-results { max-height: 54vh; overflow-y: auto; padding: 8px; }
.search-results .sr-item { font-size: 15px; padding: 11px 12px; }
.search-results .sr-item.on { background: var(--surface-3); }
.search-results .sr-item .ic { width: 34px; height: 34px; flex: 0 0 34px; }
.search-results .sr-empty { padding: 22px 14px; text-align: center; }
@media (max-width: 560px) { .search-overlay { padding: 8vh 12px 12px; } .search-bar input { font-size: 16px; } .search-kbd { display: none; } }