/**
 * File: demov2/assets/css/core.css
 * Purpose: Elan.az demo v2 — "Rəngli minimal" dizayn sistemi.
 *          Ağ fon, #222 mətn, brend rəngi Sky #009EF7 (palitra: Sky / Cherry / Periwinkle / Sage / Gold — istifadəçi seçimi)
 *          əsas düymələrdə, kateqoriya rəngləri (.hue-*), tünd zolaqlar,
 *          açıq rəngli bölmələr. Qradiyent / parıltı / şüşə yoxdur.
 *          Mobile-first: 640 · 768 (planşet) · 1024 (desktop) · 1280.
 */

/* ── Fonts ─────────────────────────────────────────────── */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Inter-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/Inter-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/Inter-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/Inter-Bold.woff2') format('woff2'); }

/* ── Tokens ────────────────────────────────────────────── */
:root {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F7F7F7;
  --surface-3: #EFEFEF;
  --glass: rgba(255, 255, 255, .86);
  --line: #EBEBEB;
  --line-strong: #DDDDDD;
  --text: #222222;
  --text-2: #6A6A6A;
  --text-3: #929292;
  --ink: #222222;
  --ink-hover: #000000;
  --on-ink: #FFFFFF;

  /* Brend — palitra html[data-palette] ilə dəyişir (default: Sky #009EF7 — istifadəçi seçimi) */
  --brand: #009EF7;
  --brand-hover: #008AD8;
  --brand-soft: #E6F5FE;
  --brand-soft-2: #C2E6FD;
  --brand-text: #0074BD;
  --on-brand: #FFFFFF;
  /* tünd zolaq (footer, satıcı bloku) və açıq rəngli bölmə fonu */
  --deep: #101B30;
  --deep-2: #1B2842;
  --deep-line: rgba(255, 255, 255, .12);
  --on-deep: #FFFFFF;
  --on-deep-2: rgba(255, 255, 255, .74);
  --on-deep-3: rgba(255, 255, 255, .52);
  --tint: #F4F6FA;
  --verify: #0277BD;
  --heart: #DC2626;
  --star: #E5A00D;

  --accent: var(--brand);
  --accent-hover: var(--brand-hover);
  --accent-soft: var(--brand-soft);
  --accent-text: var(--brand-text);
  /* köhnə adlar (art.js və komponentlər üçün) */
  --primary: var(--brand);
  --primary-hover: var(--brand-hover);
  --primary-soft: var(--brand-soft);
  --primary-soft-2: var(--brand-soft-2);
  --primary-text: var(--brand-text);
  --on-primary: var(--on-brand);

  /* Kateqoriya rəngləri — palitradan asılı deyil (.hue-* sinifləri ilə).
     Bənövşəyi istifadəçi qərarı ilə ləğv olunub: .hue-violet = tünd göy, .hue-indigo = denim göy. */
  --c-blue: #0277BD; --c-blue-s: #E6F2FA;
  --c-sky: #0891B2; --c-sky-s: #E2F5F9;
  --c-teal: #0E9384; --c-teal-s: #E3F6F3;
  --c-green: #16A34A; --c-green-s: #E8F7EE;
  --c-lime: #5D9C0C; --c-lime-s: #EFF7E2;
  --c-gold: #C78A00; --c-gold-s: #FDF6DE;
  --c-pink: #DB2777; --c-pink-s: #FDEBF4;
  --c-violet: #1E4E8C; --c-violet-s: #E9EFF7;
  --c-indigo: #3B5BA5; --c-indigo-s: #ECF0F8;
  --c-slate: #52627A; --c-slate-s: #EEF1F6;
  --c-red: #DC2626; --c-red-s: #FDECEC;

  --success: #16803C; --success-soft: #EDF7F0;
  --danger: #DC2626; --danger-soft: #FDECEC;
  --warning: #B25E09; --warning-soft: #FFF6E5;
  --info: var(--accent); --info-soft: var(--accent-soft);
  --gold: #B7791F; --gold-soft: #FFF5DD;
  --teal: #0F766E; --teal-soft: #EAF6F4;
  --violet: #1E4E8C; --violet-soft: #E9EFF7;
  /* art.js illüstrasiya rəngləri */
  --violet-500: #3B6FB6; --gold-400: #F2B33D; --teal-400: #3BB7A5; --teal-500: #12A594; --teal-600: #0F766E; --violet-600: #1E4E8C;
  --green-600: #16803C; --gold-500: #E5A023; --red-500: #DC2626;

  --sh-1: 0 1px 2px rgba(0, 0, 0, .06);
  --sh-2: 0 2px 8px rgba(0, 0, 0, .08);
  --sh-3: 0 6px 20px rgba(0, 0, 0, .10);
  --sh-4: 0 8px 28px rgba(0, 0, 0, .16);
  --sh-bar: 0 3px 12px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .06);
  --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
  /* çərçivə əvəzinə yüngül kölgə (kart, panel, popup) */
  --edge: 0 1px 2px rgba(16, 24, 40, .05), 0 3px 10px rgba(16, 24, 40, .06);

  --r-xs: 6px; --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 24px; --r-full: 999px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --font-logo: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --hdr-h: 64px;
  --tab-h: 62px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --gutter: 20px;
  --wrap: 1320px;
  color-scheme: light;
}
@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --hdr-h: 76px; --gutter: 40px; } }
@media (min-width: 1440px) { :root { --gutter: 56px; } }

/* ── Palitralar ── */
/* palitralar (istifadəçi seçimi): Cherry, Periwinkle, Sage, Gold; mətn üçün tünd çalar (ağ fonda oxunsun) */
html[data-palette='cherry'] { --brand: #E66565; --brand-hover: #D65151; --brand-soft: #FDF0F0; --brand-soft-2: #F8D2D2; --brand-text: #BF3E3E; --deep: #1F1A1C; --deep-2: #2B2427; --tint: #FCF7F7; }
html[data-palette='periwinkle'] { --brand: #5759C0; --brand-hover: #4A4CAD; --brand-soft: #EFEFFA; --brand-soft-2: #D6D7F2; --brand-text: #4A4CB0; --deep: #15162E; --deep-2: #20223F; --tint: #F6F6FC; }
html[data-palette='sage'] { --brand: #5E9457; --brand-hover: #4F8049; --brand-soft: #EEF5ED; --brand-soft-2: #D3E5D0; --brand-text: #477540; --deep: #141C14; --deep-2: #1E2A1D; --tint: #F5F9F4; }
/* Gold sarıdır — düymə mətni tünd (--on-brand), ağ fonda mətn üçün tünd qızılı */
html[data-palette='gold'] { --brand: #FFC700; --brand-hover: #EBB700; --brand-soft: #FFF8DB; --brand-soft-2: #FFEBA3; --brand-text: #8A6A00; --on-brand: #1A1500; --deep: #1E1A0C; --deep-2: #2A2512; --tint: #FDFAF0; }

/* ── Kateqoriya rəngi köməkçiləri: --h (əsas), --h-s (yumşaq fon), --h-t (mətn) ── */
.hue-blue { --h: var(--c-blue); --h-s: var(--c-blue-s); }
.hue-sky { --h: var(--c-sky); --h-s: var(--c-sky-s); }
.hue-teal { --h: var(--c-teal); --h-s: var(--c-teal-s); }
.hue-green { --h: var(--c-green); --h-s: var(--c-green-s); }
.hue-lime { --h: var(--c-lime); --h-s: var(--c-lime-s); }
.hue-gold { --h: var(--c-gold); --h-s: var(--c-gold-s); }
.hue-pink { --h: var(--c-pink); --h-s: var(--c-pink-s); }
.hue-violet { --h: var(--c-violet); --h-s: var(--c-violet-s); }
.hue-indigo { --h: var(--c-indigo); --h-s: var(--c-indigo-s); }
.hue-slate { --h: var(--c-slate); --h-s: var(--c-slate-s); }
.hue-red { --h: var(--c-red); --h-s: var(--c-red-s); }
.hue-brand { --h: var(--brand); --h-s: var(--brand-soft); }
[class*='hue-'] { --h-t: color-mix(in srgb, var(--h) 84%, #000); }
/* açıq rənglərdə kiçik mətn kontrastı (WCAG AA) */
html:not([data-theme='dark']) .hue-gold { --h-t: color-mix(in srgb, var(--c-gold) 70%, #000); }
html:not([data-theme='dark']) :is(.hue-green, .hue-lime, .hue-teal) { --h-t: color-mix(in srgb, var(--h) 74%, #000); }
html[data-theme='dark'] [class*='hue-'] { --h-t: color-mix(in srgb, var(--h) 72%, #fff); }
.tx-h { color: var(--h-t); }
.bg-h { background: var(--h-s); color: var(--h-t); }

html[data-theme='dark'] {
  color-scheme: dark;
  /* demo şablonunun qaranlıq palitrası (www/demo/assets/css/dark.css) */
  --bg: #0C0E12;
  --surface: #15181E;
  --surface-2: #1E222A;
  --surface-3: #2A2F38;
  --glass: rgba(12, 14, 18, .86);
  --line: #2A2F38;
  --line-strong: #3A404B;
  --text: #EDEFF3;
  --text-2: #A6ACB8;
  --text-3: #8B92A0;
  --ink: #EDEFF3;
  --ink-hover: #D5D9E1;
  --on-ink: #0C0E12;
  --brand: #009EF7;
  --brand-hover: #1EABF8;
  --brand-soft: rgba(0, 158, 247, .15);
  --brand-soft-2: rgba(0, 158, 247, .28);
  --brand-text: #5CC3FF;
  --deep: #15181E;
  --deep-2: #1E222A;
  --deep-line: rgba(255, 255, 255, .08);
  --tint: #121419;
  --verify: #6FBDF9;
  --star: #F2BE3D;
  --c-blue: #6FBDF9; --c-blue-s: rgba(111, 189, 249, .14);
  --c-sky: #4FD1E5; --c-sky-s: rgba(79, 209, 229, .13);
  --c-teal: #3DD3BF; --c-teal-s: rgba(61, 211, 191, .12);
  --c-green: #4ADE80; --c-green-s: rgba(74, 222, 128, .12);
  --c-lime: #A3D94B; --c-lime-s: rgba(163, 217, 75, .12);
  --c-gold: #F2BE3D; --c-gold-s: rgba(242, 190, 61, .13);
  --c-pink: #F472B6; --c-pink-s: rgba(244, 114, 182, .13);
  --c-violet: #8DB4E8; --c-violet-s: rgba(141, 180, 232, .14);
  --c-indigo: #9DB2E6; --c-indigo-s: rgba(157, 178, 230, .14);
  --c-slate: #A3B1C6; --c-slate-s: rgba(163, 177, 198, .13);
  --c-red: #F87171; --c-red-s: rgba(248, 113, 113, .13);
  --success: #4ADE80; --success-soft: rgba(74, 222, 128, .1);
  --danger: #F87171; --danger-soft: rgba(248, 113, 113, .12);
  --warning: #FDB022; --warning-soft: rgba(253, 176, 34, .12);
  --gold: #F2C46D; --gold-soft: rgba(242, 196, 109, .12);
  --teal: #5EE0CB; --teal-soft: rgba(94, 224, 203, .1);
  --violet: #8DB4E8; --violet-soft: rgba(141, 180, 232, .12);
  --green-600: #4ADE80;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .45);
  --sh-2: 0 4px 10px rgba(0, 0, 0, .45);
  --sh-3: 0 12px 16px -4px rgba(0, 0, 0, .5), 0 4px 6px -2px rgba(0, 0, 0, .3);
  --sh-4: 0 16px 32px -4px rgba(0, 0, 0, .55), 0 4px 4px -4px rgba(0, 0, 0, .35);
  --sh-bar: 1px 1px 16px 4px rgba(0, 0, 0, .45);
  --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 32%, transparent);
  --edge: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 12px rgba(0, 0, 0, .28);
}
html[data-theme='dark'][data-palette='cherry'] { --brand: #E66565; --brand-hover: #EA7B7B; --brand-soft: rgba(230, 101, 101, .15); --brand-soft-2: rgba(230, 101, 101, .28); --brand-text: #F4A3A3; }
html[data-theme='dark'][data-palette='periwinkle'] { --brand: #5759C0; --brand-hover: #6A6CCF; --brand-soft: rgba(124, 126, 230, .16); --brand-soft-2: rgba(124, 126, 230, .3); --brand-text: #A9AAF0; }
html[data-theme='dark'][data-palette='sage'] { --brand: #5E9457; --brand-hover: #6EA566; --brand-soft: rgba(110, 165, 102, .16); --brand-soft-2: rgba(110, 165, 102, .3); --brand-text: #9CCB95; }
html[data-theme='dark'][data-palette='gold'] { --brand: #FFC700; --brand-hover: #FFD233; --brand-soft: rgba(255, 199, 0, .14); --brand-soft-2: rgba(255, 199, 0, .26); --brand-text: #FFD84D; --on-brand: #1A1500; }


/* ── Reset / base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + 16px); }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
  font: 400 15px/1.5 var(--font); letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden;
}
@media (min-width: 1024px) { body { font-size: 15.5px; } }
body.is-locked { overflow: hidden; }
/* filtr popover-i açıq olanda səhifə sürüşmür (popover-in öz siyahısı sürüşür); scrollbar yeri saxlanılır */
body.is-noscroll { overflow: hidden; }
html { scrollbar-gutter: stable; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.022em; line-height: 1.2; }
hr { border: 0; height: 1px; background: var(--taper); margin: 0; }
::selection { background: var(--brand-soft-2); color: var(--text); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
input::placeholder, textarea::placeholder { color: var(--text-3); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 999; background: var(--ink); color: var(--on-ink); padding: 10px 16px; border-radius: 10px; transition: top .2s; }
.skip:focus { top: 12px; }

/* ── Layout ────────────────────────────────────────────── */
.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }
.wrap--narrow { --wrap: 760px; }
.wrap--mid { --wrap: 1080px; }
main { display: block; min-height: 60vh; }
.page { padding-bottom: calc(var(--tab-h) + var(--safe-b) + 24px); }
@media (min-width: 1024px) { .page { padding-bottom: 0; } }
.section { padding-block: 36px; }
@media (min-width: 1024px) { .section { padding-block: 56px; } }
.section--tight { padding-block: 20px; }
.section--gray { background: var(--surface-2); }
.section--tint { background: var(--tint); }
.section--deep { background: var(--deep); color: var(--on-deep); }
.stack { display: flex; flex-direction: column; gap: var(--gap, 16px); }
.row { display: flex; align-items: center; gap: var(--gap, 12px); }
.row--wrap { flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.grow { flex: 1 1 auto; min-width: 0; }
.grid { display: grid; gap: var(--gap, 20px); }
.cards { display: grid; gap: 32px 20px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .cards { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; } }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(3, 1fr); gap: 36px 20px; } }
@media (min-width: 1200px) { .cards { grid-template-columns: repeat(4, 1fr); gap: 40px 24px; } }
.scroller {
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--col, 82%); gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
}
.scroller::-webkit-scrollbar { display: none; }
.scroller > * { scroll-snap-align: start; }
@media (min-width: 560px) { .scroller { --col: calc((100% - 16px) / 2); } }
@media (min-width: 900px) { .scroller { --col: calc((100% - 40px) / 3); gap: 20px; } }
@media (min-width: 1200px) { .scroller { --col: calc((100% - 72px) / 4); gap: 24px; margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; } }

.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.sec-head h2 { font-size: clamp(22px, 2.2vw, 28px); }
.sec-head p { color: var(--text-2); margin-top: 6px; max-width: 620px; font-size: 15.5px; }
.sec-head__nav { display: none; gap: 8px; }
@media (min-width: 1024px) { .sec-head__nav { display: flex; } .sec-head { margin-bottom: 26px; } }
.eyebrow { display: block; font-size: 13px; font-weight: 600; color: var(--h-t, var(--brand-text)); margin-bottom: 6px; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.nowrap { white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
 /* görünürlük köməkçiləri — yalnız gizlədir, display-i dəyişmir */
@media (max-width: 1023px) { .only-d { display: none !important; } }
@media (min-width: 1024px) { .only-m { display: none !important; } }
@media (max-width: 767px) { .hide-m { display: none !important; } }
@media (min-width: 768px) { .only-phone { display: none !important; } }

/* ── Icon ──────────────────────────────────────────────── */
.i { width: 20px; height: 20px; flex: none; }
/* sprite simvollarında fill/stroke atributu yoxdur — CSS idarə edir (fill dəyişə bilsin) */
svg.i, svg:has(> use[href^="#i-"]) { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.i--xs { width: 14px; height: 14px; }
.i--sm { width: 16px; height: 16px; }
.i--md { width: 22px; height: 22px; }
.i--lg { width: 24px; height: 24px; }
.i--xl { width: 32px; height: 32px; }

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  --h: 46px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--h); padding: 0 20px; border-radius: 10px; border: 1px solid transparent;
  font-weight: 600; font-size: 15px; line-height: 1; white-space: nowrap; user-select: none;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled, .btn.is-disabled { opacity: .4; pointer-events: none; }
.btn .i { width: 18px; height: 18px; }
.btn--sm { --h: 38px; padding: 0 14px; font-size: 14px; border-radius: 8px; }
.btn--xs { --h: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; gap: 6px; }
.btn--xs .i { width: 15px; height: 15px; }
.btn--lg { --h: 52px; padding: 0 24px; font-size: 16px; border-radius: 12px; }
.btn--xl { --h: 56px; padding: 0 28px; font-size: 16px; border-radius: 12px; }
.btn--block { width: 100%; }
.btn--pill { border-radius: var(--r-full); }
.btn--icon { width: var(--h); padding: 0; }
.btn--primary { background: var(--brand); color: var(--on-brand); }
.btn--primary:hover { background: var(--brand-hover); }
.btn--ink { background: var(--ink); color: var(--on-ink); }
.btn--ink:hover { background: var(--ink-hover); }
.btn--deep { background: var(--deep); color: var(--on-deep); }
.btn--deep:hover { background: var(--deep-2); }
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-hover); }
.btn--soft { background: var(--surface-2); color: var(--text); }
.btn--soft:hover { background: var(--surface-3); }
.btn--tint { background: var(--accent-soft); color: var(--accent-text); }
.btn--tint:hover { background: var(--primary-soft-2); }
.btn--outline { background: var(--surface); color: var(--text); border-color: var(--text); }
.btn--outline:hover { background: var(--surface-2); }
.btn--line { background: var(--surface); color: var(--text); border-color: var(--line-strong); }
.btn--line:hover { border-color: var(--text); }
.btn--ghost { background: transparent; color: var(--text); }
.btn--ghost:hover { background: var(--surface-2); }
.btn--white { background: #fff; color: #222; }
.btn--white:hover { background: #F2F2F2; }
.btn--glass { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn--glass:hover { background: rgba(255, 255, 255, .26); }
/* AI — palitranın primary rəngi (istifadəçi istəyi: qara yox) */
.btn--ai { background: var(--brand); color: var(--on-brand); }
.btn--ai:hover { background: var(--brand-hover); }
.btn--ai-soft { background: var(--c-violet-s); color: var(--c-violet); }
.btn--ai-soft:hover { background: color-mix(in srgb, var(--c-violet) 18%, var(--surface)); }
.btn--success { background: var(--success); color: #fff; }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger-soft { background: var(--danger-soft); color: var(--danger); }
.btn--wa { background: #1FAF55; color: #fff; }
.btn--wa:hover { background: #1A9A4B; }
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::before { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid; border-color: currentColor; border-color: var(--on-ink) var(--on-ink) transparent transparent; animation: spin .7s linear infinite; }
.btn--soft.is-loading::before, .btn--line.is-loading::before, .btn--outline.is-loading::before, .btn--ghost.is-loading::before { border-color: var(--text) var(--text) transparent transparent; }
.btn--accent.is-loading::before, .btn--primary.is-loading::before { border-color: #fff #fff transparent transparent; }
.link { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--line-strong); transition: text-decoration-color .2s; }
.link:hover { text-decoration-color: currentColor; }
.link .i { width: 16px; height: 16px; }
.link--accent, .link--brand { color: var(--brand-text); text-decoration-color: transparent; }
.link--accent:hover { text-decoration-color: currentColor; }
.icon-btn {
  position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  color: var(--text); transition: background .2s; -webkit-tap-highlight-color: transparent;
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn:active { background: var(--surface-3); }
/* say nişanı ortaya yaxın — kənarı ikonun sağ-üst küncünün üstünə düşür (istifadəçi istəyi) */
.icon-btn .dot { position: absolute; top: 1px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--bg); }
.icon-btn .dot:empty { min-width: 10px; width: 10px; height: 10px; padding: 0; top: 8px; right: 9px; }
.icon-btn--line { border: 1px solid var(--line-strong); background: var(--surface); width: 36px; height: 36px; }
.icon-btn--line .i { width: 16px; height: 16px; }
.icon-btn--line:hover { border-color: var(--text); background: var(--surface); box-shadow: var(--sh-1); }
.icon-btn--line:disabled { opacity: .35; }

/* ── Forms ─────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > label, .label { font-size: 14px; font-weight: 600; color: var(--text); }
.field .hint { font-size: 13px; color: var(--text-3); }
.field .err { font-size: 13px; color: var(--danger); display: none; }
.field.has-err .err { display: block; }
.field.has-err .input, .field.has-err .textarea { border-color: var(--danger); }
/* × sarğısı sütunlu field-də uzanmasın: qonşu sahədə xəta mətni çıxanda input aşağı itələnməsin */
.field > .inx { flex: none; }
/* datalist-li inputda brauzerin öz ▼ işarəsi (təkliflər yazanda yenə görünür) */
input[list]::-webkit-calendar-picker-indicator { display: none !important; }
.req::after { content: ' *'; color: var(--danger); }
.input, .textarea, .select-native {
  width: 100%; height: 50px; padding: 0 14px; border-radius: 10px; background: var(--surface);
  border: 1px solid var(--line-strong); color: var(--text); font-size: 15px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input:hover, .textarea:hover, .select-native:hover { border-color: var(--text-3); }
.input:focus, .textarea:focus, .select-native:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft-2); }
.csel:focus-visible { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft-2); }
.input--sm { height: 42px; font-size: 14.5px; border-radius: 8px; }
.input--lg { height: 56px; font-size: 16px; border-radius: 12px; }
/* iOS Safari 16px-dən kiçik xanada fokusda səhifəni böyüdür */
@media (max-width: 639px) { .input, .input--sm, .textarea { font-size: 16px; } }
.input--soft { background: var(--surface-2); border-color: transparent; }
.textarea { height: auto; min-height: 120px; padding: 12px 14px; resize: vertical; line-height: 1.55; }
.select-native { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23929292' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; }
/* ── Sahə kartı (filtr): ikon + başlıq + dəyər + ox; paneli sahənin üstünü örtür (EA.pop over) ── */
/* çərçivəsiz dolğulu plitə; ikon qutusu kənarlardan bərabər (56 − 30) / 2 = 13px */
.fld, .pop__fhead { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; height: 56px; padding: 0 12px 0 13px; border-radius: 14px; text-align: left; }
.fld { background: var(--surface-2); transition: background .15s, box-shadow .15s; }
.fld:hover { background: var(--surface-3); }
.fld.is-open { background: var(--surface); box-shadow: 0 0 0 2px var(--brand); }
.fld:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--brand); }
.fld:disabled { opacity: .5; pointer-events: none; }
.fld__ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--surface); color: var(--text-2); box-shadow: var(--sh-1); transition: background .15s, color .15s; }
.fld__ic .i { width: 15px; height: 15px; }
.fld__ic[class*='hue-'] { background: var(--h-s); color: var(--h); }
.fld.is-set .fld__ic { background: var(--brand); color: var(--on-brand); box-shadow: none; }
.fld.is-open .fld__ic { background: var(--surface-2); box-shadow: none; }
.fld.is-open.is-set .fld__ic { background: var(--brand); }
.fld__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.fld__t small { font-size: 11.5px; font-weight: 500; color: var(--text-2); }
.fld__t b { font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fld__chev { display: grid; flex: none; color: var(--text-2); }
.fld__chev .i { width: 15px; height: 15px; transition: transform .2s var(--ease); }
/* seçilmiş sahədə ox əvəzinə təmizləmə (×) */
.fld__x { display: none; place-items: center; flex: none; width: 26px; height: 26px; margin-right: -4px; border-radius: 50%; color: var(--text-2); }
.fld__x:hover { background: color-mix(in srgb, var(--text) 9%, transparent); color: var(--text); }
.fld__x .i { width: 15px; height: 15px; stroke-width: 2; }
.fld.is-set .fld__x { display: grid; }
.fld.is-set .fld__chev { display: none; }
.fld.is-open .fld__chev .i { transform: rotateX(180deg); }
/* açılan menyu / seçim: anchor-dakı aşağı ox açıq olanda yerində arxaya çevrilir (rotateX — saat əqrəbi istiqamətində fırlanmır; EA.pop anchor-a aria-expanded verir) */
svg.i:has(> use[href='#i-chevron-down']) { transition: transform .2s var(--ease); }
[aria-expanded='true'] svg.i:has(> use[href='#i-chevron-down']) { transform: rotateX(180deg); }

/* ── Tarix aralığı (EA.dateRange): solda hazır aralıqlar, sağda təqvim ── */
.pop.pop--drp { padding: 0; overflow: hidden; }
.drp { display: grid; grid-template-columns: minmax(0, 1fr); }
.drp.has-pre { grid-template-columns: 168px minmax(0, 1fr); }
.drp__pre { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; background: var(--surface-2); }
.drp__pre button { height: 38px; padding: 0 12px; border-radius: 9px; text-align: left; font-size: 14px; font-weight: 500; color: var(--text); transition: background .15s; }
.drp__pre button:hover { background: color-mix(in srgb, var(--brand) 7.5%, transparent); }
.drp__pre button.is-on { background: color-mix(in srgb, var(--brand) 15%, transparent); color: var(--brand-text); }
.drp__main { min-width: 0; display: flex; flex-direction: column; }
.drp__cal { padding: 14px 16px 8px; }
.drp__foot { display: flex; align-items: center; gap: 10px; padding: 10px 12px; box-shadow: 0 -6px 14px -12px rgba(16, 24, 40, .25); }
.drp__foot .btn--ghost .i { width: 16px; height: 16px; }
.drp__hint { flex: 1; text-align: center; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
@media (max-width: 559px) {
  .drp.has-pre { grid-template-columns: minmax(0, 1fr); }
  .drp__pre { flex-direction: row; overflow-x: auto; scrollbar-width: none; padding: 8px; }
  .drp__pre::-webkit-scrollbar { display: none; }
  .drp__pre button { flex: none; height: 34px; background: var(--surface); }
}

/* ── Təqvim (EA.calendar): 1–2 ay, ox düymələri kənarlarda ── */
.cal { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.cal--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cal-nav { position: absolute; top: -4px; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--text-2); transition: background .15s, color .15s; }
.cal-nav:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.cal-nav:disabled { opacity: .3; cursor: default; }
.cal-nav .i { width: 18px; height: 18px; }
.cal-nav--p { left: -4px; }
.cal-nav--n { right: -4px; }
.cal-m__h { height: 26px; margin-bottom: 8px; text-align: center; font-size: 15px; font-weight: 600; line-height: 26px; }
.cal-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 4px; }
.cal-dow { display: grid; place-items: center; height: 26px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.cal-d { position: relative; display: grid; place-items: center; height: 38px; padding: 0; font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; cursor: pointer; }
.cal-d > span { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; transition: background .12s, color .12s; }
.cal-d:hover:not(:disabled) > span { background: var(--surface-2); }
.cal-d.is-today > span { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 55%, transparent); }
.cal-d.is-a > span, .cal-d.is-b > span { background: var(--brand); color: var(--on-brand); font-weight: 600; box-shadow: none; }
.cal-d.is-a:hover > span, .cal-d.is-b:hover > span { background: var(--brand-hover); }
/* aralıq zolağı: gündən alçaq (26px), yuvarlaq uclu; başlanğıc / son günün mərkəzindən başlayır */
.cal-d::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 26px; margin-top: -13px; background: color-mix(in srgb, var(--brand) 15%, transparent); opacity: 0; }
.cal-d.is-in::before { opacity: 1; }
.cal-d.is-in > span { color: var(--brand-text); }
.cal-d.has-r::before { opacity: 1; left: 50%; }
.cal-d.has-l::before { opacity: 1; right: 50%; }
.cal-d.is-in.r-s::before { left: 3px; border-radius: 13px 0 0 13px; }
.cal-d.is-in.r-e::before { right: 3px; border-radius: 0 13px 13px 0; }
.cal-d.is-in.r-s.r-e::before { border-radius: 13px; }
.cal-d.is-x > span { color: var(--text-3); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.cal-d.is-off > span { color: var(--text-3); opacity: .5; }
.cal-d.is-a > span, .cal-d.is-b > span { color: var(--on-brand); text-decoration: none; } /* dolu gün çıxış kimi seçiləndə də ağ / on-brand */
.cal-d:disabled { cursor: default; }

/* sahə paneli — sahənin üstünü örtür, başlığı sahənin özüdür */
.pop.pop--fld { padding: 0 8px 8px; border: 0; border-radius: 16px; box-shadow: 0 18px 44px rgba(16, 24, 40, .18), 0 0 0 1px rgba(16, 24, 40, .06); transform: translateY(0) scale(.985); transform-origin: top left; }
.pop.pop--fld.is-open { transform: none; }
.pop.pop--fld.pop--below { --pop-pad: 6px; padding: 6px; }
.pop--fld .pop__fbody { gap: 2px; max-height: min(60vh, 24rem); overflow-y: auto; scrollbar-width: none; }
.pop__fhead { width: calc(100% + 16px); margin: 0 -8px 2px; padding-left: 16px; padding-right: 18px; border-radius: 16px 16px 0 0; cursor: pointer; position: sticky; top: 0; z-index: 1; background: var(--surface); }
.pop__fhead .fld__ic { background: var(--surface-2); box-shadow: none; }
.pop__fbody { display: flex; flex-direction: column; gap: 2px; }
/* siyahı sətirləri (nümunə: 28px ikon qutusu, 16px ikon, 14px mətn; alt növ 13px, nöqtəli) */
.fopt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border-radius: 8px; text-align: left; font-size: 14px; font-weight: 500; color: var(--text); transition: background .12s, color .12s; }
.fopt b { flex: 1; min-width: 0; font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fopt:hover { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.fopt.is-on { background: var(--brand-soft); color: var(--brand-text); }
.fopt__ic { width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; flex: none; background: var(--h-s); color: var(--h); }
.fopt__ic .i { width: 16px; height: 16px; }
.fopt__ic.hue-slate { background: var(--surface-2); color: var(--text-2); }
.fsub { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border-radius: 8px; font-size: 13px; color: var(--text-2); text-align: left; transition: background .12s, color .12s; }
.fsub i { width: 28px; flex: none; display: flex; justify-content: center; }
.fsub i::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--text-2) 40%, transparent); }
.fsub:hover { background: color-mix(in srgb, var(--surface-2) 70%, transparent); color: var(--text); }
.fsub.is-on { background: var(--brand-soft); color: var(--brand-text); font-weight: 500; }
.fsub.is-on i::before { background: var(--brand); }
@media (max-width: 639px) { .fopt { padding: 12px 8px; } .fsub { padding: 10px 8px; } }
.pop__fbody--rooms, .pop__fbody--price, .pop__fbody--loc { padding: 6px 6px 0; }
.pop__fhint { margin-top: 10px; font-size: 13px; color: var(--text-3); }
.pop__fpre { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pop__ffoot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 12px 0 0; padding: 12px 6px 4px; }
.pop__ffoot .btn--ghost { text-decoration: underline; text-underline-offset: 3px; padding: 0 8px; }

/* kiçik variant — sıx filtr zolaqları üçün */
.fld--sm, .pop--sm .pop__fhead { height: 48px; border-radius: 12px; padding: 0 10px 0 9px; gap: 8px; }
.fld--sm .fld__ic, .pop--sm .pop__fhead .fld__ic { width: 30px; height: 30px; border-radius: 8px; }
.fld--sm .fld__t small, .pop--sm .pop__fhead .fld__t small { font-size: 11px; }
.fld--sm .fld__t b, .pop--sm .pop__fhead .fld__t b { font-size: 13.5px; }
/* "Ətraflı axtarış" düyməsi */
.fld-more { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 56px; min-width: 56px; padding: 0 14px; border-radius: 14px; background: color-mix(in srgb, var(--brand) 15%, transparent); color: var(--brand-text); font-weight: 600; font-size: 14.5px; white-space: nowrap; transition: background .15s; }
.fld-more:hover { background: color-mix(in srgb, var(--brand) 22%, transparent); }
.fld-more .i { width: 19px; height: 19px; }
/* əlavə seçilmiş filtr sayı — düymənin küncündə rəqəmli nişan */
.fld-more__n { position: absolute; top: -7px; right: -7px; display: none; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--brand); color: var(--on-brand); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 3px var(--surface); }
.fld-more.is-set .fld-more__n { display: inline-grid; }
.fld-more--sm { height: 48px; min-width: 48px; border-radius: 12px; font-size: 14px; }

/* ── "Ətraflı axtarış" pəncərəsi (filters.js → EA.advFilter) — tək sütun ── */
.advf .modal__body { padding: 4px 32px 16px; }
.advf__row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; align-items: start; padding: 12px 0; } /* sahələr arasında xətt yoxdur (istifadəçi) */
.advf__row > h5 { padding-top: 10px; font-size: 14.5px; font-weight: 600; }
@media (max-width: 639px) { .advf .modal__body { padding: 4px 20px 16px; } .advf__row { grid-template-columns: 1fr; gap: 8px; padding: 10px 0; } .advf__row > h5 { padding-top: 0; } }
.advf__no .input { padding-left: 42px; }
.advf__ctl { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.advf__seg { width: 100%; display: grid; height: 44px; }
.advf__seg .seg__btn { height: 36px; }
/* Ətraflı axtarış çipləri: boz dolğu, seçiləndə brend rəngi (istifadəçinin nümunəsi) */
.advf .chip { height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--surface-2); color: var(--text); font-size: 14.5px; font-weight: 500; box-shadow: none; }
.advf .chip:hover { background: var(--surface-3); }
.advf .chip.is-on { background: var(--brand); color: var(--on-brand); box-shadow: none; }
.advf .chip.is-on:hover { background: var(--brand-hover); }
/* aktiv (dolu primary) çipdə ikon və chevron mətnlə eyni rəngdə — palitraya uyğun --on-brand (Gold-da tünd) */
.chip.is-on .i, .chip.is-on .chip__x { color: inherit; }
.advf__mm { max-width: 420px; }
.advf__checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 16px; padding-top: 8px; }
.advf__cat .i { color: var(--h); }
.advf__cat.is-on .i { color: currentColor; }
.advf .chip.is-on .i { color: inherit; }
/* Yerləşmə — dolğulu kart: ikon qutusu + şəhər / seçim iki sətirdə + ox */
.advf__loc { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 14px 8px 8px; border-radius: 12px; background: var(--surface-2); text-align: left; transition: background .15s; }
.advf__loc:hover { background: var(--surface-3); }
.advf__loc-ic { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); color: var(--brand-text); box-shadow: var(--sh-1); transition: background .15s, color .15s; }
.advf__loc-ic .i { width: 19px; height: 19px; }
.advf__loc.is-set .advf__loc-ic { background: var(--brand); color: var(--on-brand); box-shadow: none; }
.advf__loc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.advf__loc-t small { font-size: 12.5px; color: var(--text-2); }
.advf__loc-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 500; color: var(--text-2); }
.advf__loc.is-set .advf__loc-t b { color: var(--text); font-weight: 600; }
.advf__loc > .i { flex: none; width: 18px; height: 18px; color: var(--text-3); }
/* Qiymət — histoqram + slayder, altında dolğulu Minimum / Maksimum */
.rbox .histo { height: 44px; }
.rbox .range { margin: 0 12px; }
.rbox__range > .row { display: none !important; }
.rbox__in { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.rbox__f { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; border-radius: 12px; background: var(--surface-2); cursor: text; transition: box-shadow .15s, background .15s; }
.rbox__f:focus-within { background: var(--surface); box-shadow: 0 0 0 2px var(--brand), 0 0 0 5px var(--brand-soft-2); }
.rbox__f small { font-size: 12px; color: var(--text-2); }
.rbox__f input { width: 100%; min-width: 0; height: 24px; padding: 0; border: 0; outline: 0; background: none; color: var(--text); font-size: 15.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.rbox__f input::placeholder { color: var(--text-3); font-weight: 400; }
@media (max-width: 639px) { .rbox__f input { font-size: 16px; } }
.rbox__f .inx { display: block; position: static; } /* × input sətrinə yox, bütün sahəyə görə ortalansın (etiket + dəyər) */
.rbox__f .has-x > input { padding-right: 26px; }
.rbox__f .input-x { right: 8px; }
.rbox__dash { flex: none; width: 10px; height: 2px; border-radius: 1px; background: var(--text-3); }

/* önə çıxarma + ödəniş modalları (EA.promote — kabinet və elan səhifəsi) */
.pm-l { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 12px; border-radius: 12px; background: var(--surface-2); }
.pm-l img { width: 64px; height: 48px; border-radius: 8px; object-fit: cover; flex: none; }
.pm-l b { display: block; font-size: 15px; font-weight: 600; }
.pm-l small { display: block; font-size: 13.5px; color: var(--text-2); }
.pm-h { margin: 22px 0 10px; font-size: 15px; font-weight: 600; }
.svcs { display: grid; gap: 8px; }
.svc { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: 12px; background: var(--surface-2); text-align: left; transition: background .15s; }
.svc:hover { background: var(--surface-3); }
.svc.is-on { background: color-mix(in srgb, var(--brand) 15%, transparent); }
.svc__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--h-s, var(--surface-2)); color: var(--h, var(--text)); flex: none; }
.svc__ic .i { width: 19px; height: 19px; }
.svc b { display: block; font-size: 15px; font-weight: 600; }
.svc small { display: block; font-size: 13.5px; color: var(--text-2); }
.svc__from { font-size: 13.5px; color: var(--text-2); white-space: nowrap; }
@media (max-width: 479px) { .svc__from { display: none; } }
.durs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dur { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border-radius: 12px; background: var(--surface-2); transition: background .15s, color .15s; }
.dur b { font-size: 15px; font-weight: 600; }
.dur small { font-size: 13.5px; color: var(--text-2); }
.dur:hover { background: var(--surface-3); }
.dur.is-on { background: var(--brand); color: var(--on-brand); }
.dur.is-on small { color: inherit; opacity: .72; }
.pm-note { margin-top: 14px; font-size: 13.5px; color: var(--text-2); }
.pm-total { display: flex; flex-direction: column; justify-content: center; margin-right: auto; flex: none; line-height: 1.2; }
.pm-total small { font-size: 12.5px; color: var(--text-2); }
.pm-total b { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.pm-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); font-size: 15px; }
.pm-sum b { font-weight: 600; }
.payopts { display: grid; gap: 8px; }
.payopt { display: flex; width: 100%; padding: 14px 16px; border-radius: 12px; background: var(--surface-2); transition: background .15s; }
.payopt:hover { background: var(--surface-3); }
.payopt:has(input:checked) { background: color-mix(in srgb, var(--brand) 15%, transparent); }
.payopt b { display: block; font-size: 15px; font-weight: 600; }
.payopt small { display: block; font-size: 13.5px; color: var(--text-2); }
.payopt > .i { color: var(--text-2); }
.payopt.is-off { opacity: .55; cursor: not-allowed; }
.pm-secure { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; color: var(--text-3); }
.pm-secure .i { width: 15px; height: 15px; }
.okbox { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 0; text-align: center; }
.okbox .art { width: 150px; }
.okbox h3 { font-size: 22px; letter-spacing: -.02em; }
.okbox p { max-width: 380px; }

/* ── Yer seçicisi (EA.locPicker): sol — rayonlar / metro / nişangah, sağ — seçilmiş bölmənin hər şeyi ── */
.modal.lp-modal { height: min(86vh, 760px); } /* sabit hündürlük: bölmə dəyişəndə pəncərə yerindən oynamır */
@media (max-width: 639px) { .modal.lp-modal { height: 92vh; } }
.lp-modal .modal__body { flex: 1; min-height: 0; display: flex; padding: 0; overflow: hidden; }
.lp { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.lp__top { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 16px 24px 12px; }
@media (min-width: 640px) { .lp__top { grid-template-columns: 220px minmax(0, 1fr); } }
/* şəhər — dolğulu düymə: ikon qutusu + "Şəhər / Bakı" iki sətirdə (Yerləşmə kartı ilə eyni ailə) */
.lp__city { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 12px 0 5px; border-radius: 12px; background: var(--surface-2); text-align: left; transition: background .15s; }
.lp__city:hover { background: var(--surface-3); }
.lp__city-ic { flex: none; width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--surface); color: var(--brand-text); box-shadow: var(--sh-1); }
.lp__city-ic .i { width: 18px; height: 18px; }
.lp__city-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.lp__city-t small { font-size: 11.5px; color: var(--text-2); }
.lp__city-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 600; color: var(--text); }
.lp__city > .i { flex: none; width: 16px; height: 16px; color: var(--text-2); }
.lp__q .input:not(:focus) { background: var(--surface-2); border-color: transparent; }
.lp__q .input { height: 46px; padding-left: 44px; }
.lp__sel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 30px; padding: 0 24px 12px; box-sizing: content-box; }
.lp-hint { font-size: 13px; color: var(--text-2); }
.lp-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 12px; border-radius: var(--r-full); background: var(--brand-soft); color: var(--brand-text); font-size: 13.5px; font-weight: 600; }
.lp-chip .i { width: 14px; height: 14px; }
.lp-chip:hover { background: var(--brand-soft-2); }
.lp-clear { font-size: 13.5px; margin-left: 4px; }
.lp__main { flex: 1; min-height: 0; display: grid; grid-template-columns: 236px minmax(0, 1fr); padding: 4px 24px 20px; } /* yuxarıdakı şəhər / axtarış sahələri və footer düymələri ilə eyni 24px kənar */
.lp.is-city .lp__main { grid-template-columns: minmax(0, 1fr); }
.lp.is-city .lp__nav { display: none; }
/* sol panel */
.lp__nav { overflow-y: auto; overscroll-behavior: contain; padding: 10px 10px 14px; border-radius: 16px; background: var(--tint); }
.lp-nav__h { padding: 4px 10px 6px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.lp-nav__it { display: flex; align-items: center; gap: 8px; width: 100%; height: 38px; padding: 0 10px; border-radius: 9px; font-size: 14.5px; text-align: left; color: var(--text); }
/* seçilmiş — brendin 15%-i, hover — 7.5%-i; sətirlər 1px aralı */
.lp-nav__it:not(.is-on):hover { background: color-mix(in srgb, var(--brand) 7.5%, transparent); }
@media (min-width: 768px) { .lp-nav__it + .lp-nav__it { margin-top: 1px; } }
.lp-nav__it.is-on { background: color-mix(in srgb, var(--brand) 15%, transparent); } /* qalın yazı yox */
.lp-nav__it { cursor: pointer; -webkit-user-select: none; user-select: none; }
.lp-nav__it > .i { width: 17px; height: 17px; color: var(--text-2); }
/* soldakı checkbox — bütün rayon / bütün şəhər (17px ikonlarla eyni sütun) */
.lp-nav__ck { flex: none; gap: 0; }
.lp-nav__ck .check__box { width: 18px; height: 18px; border-radius: 5px; }
.lp-nav__ck .check__box::after { left: 5px; top: 1.5px; width: 5px; height: 10px; }
.lp-nav__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-nav__it small { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.lp-nav__b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--brand); color: var(--on-brand); font-size: 11.5px; font-weight: 600; }
.lp-nav__b .i { width: 13px; height: 13px; stroke-width: 3; }
.lp-nav__b--ok { width: 20px; min-width: 0; padding: 0; } /* ✓ nişanı tam dairə */
.lp-nav__sep { height: 1px; margin: 12px -10px; background: var(--line); } /* kənardan-kənara (panelin 10px padding-i), yuxarı-aşağı 12px */
/* sağ panel */
.lp__pane { position: relative; overflow-y: auto; overscroll-behavior: contain; padding: 12px 0 8px 24px; }
.lp.is-city .lp__pane { padding-left: 0; }
.lp-pane__hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.lp-pane__hd h4 { font-size: 18px; letter-spacing: -.01em; }
.lp-pane__hd small { display: block; margin-top: 2px; font-size: 13px; color: var(--text-2); }
.lp-grp { margin-top: 18px; }
.lp-grp h6 { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; padding: 0 10px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.lp-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; }
.lp-it { display: flex; width: 100%; min-height: 42px; padding: 6px 10px; gap: 10px; border-radius: 10px; font-size: 14.5px; }
.lp-it:hover { background: var(--surface-2); }
/* "Bütün şəhərlər": şəhər sətirləri (düymə) — seçəndə həmin şəhərin rejiminə keçir */
.lp-city { align-items: center; text-align: left; color: var(--text); }
.lp-city__ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--surface-2); color: var(--brand-text); }
.lp-city:hover .lp-city__ic { background: var(--surface); }
.lp-city__ic .i { width: 17px; height: 17px; }
.lp-city .lp-it__n { align-self: center; }
.lp-city__go { flex: none; width: 16px; height: 16px; color: var(--text-3); }
.lp-it.is-on .lp-it__t > span { font-weight: 600; }
.lp-it__t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.lp-it__t > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-it__t small { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-it__n { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.lp-it.is-zero .lp-it__t > span { color: var(--text-2); }
.lp-it--all { margin-bottom: 4px; padding: 10px 12px; background: var(--surface-2); }
.lp-it--all:hover { background: var(--surface-3); }
.lp-it--all.is-on { background: color-mix(in srgb, var(--brand) 15%, transparent); }
.lp-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.lp-it > .lp-dot { margin: 0 -2px 0 0; }
.lp-none { padding: 48px 12px; text-align: center; color: var(--text-2); }
/* telefon: sol panel üfüqi sürüşən pill-lər */
@media (max-width: 767px) {
  .lp__top { padding: 12px 16px 10px; }
  .lp__sel { padding: 0 16px 10px; }
  .lp__main { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); padding: 0; }
  .lp__nav { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 10px 16px; border-radius: 0; scrollbar-width: none; }
  .lp__nav::-webkit-scrollbar { display: none; }
  .lp-nav__h, .lp-nav__sep, .lp-nav__it small { display: none; }
  .lp-nav__it { flex: none; width: auto; height: 34px; padding: 0 12px; border-radius: var(--r-full); background: var(--surface); box-shadow: var(--sh-1); font-size: 14px; }
  .lp-nav__it.is-on { background: color-mix(in srgb, var(--brand) 15%, var(--surface)); color: var(--brand-text); box-shadow: none; }
  .lp-nav__it.is-on > .i { color: inherit; }
  .lp__pane, .lp.is-city .lp__pane { padding: 12px 16px 20px; }
  .lp-g { grid-template-columns: 1fr; }
}

/* təmizləmə (×) düyməsi — mətn inputları (EA.clearable) və custom select */
.inx { position: relative; display: flex; align-items: center; flex: 1; width: 100%; min-width: 0; }
.has-x > .input, .has-x > input[data-clear] { padding-right: 38px !important; } /* səhifə stilləri sağ boşluğu azaltmasın — × mətnin üstünə düşməsin */
input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; } /* brauzerin öz × düyməsi — bizimki var */
.input-x { position: absolute; right: 7px; top: 50%; z-index: 1; width: 26px; height: 26px; margin-top: -13px; display: grid; place-items: center; border-radius: 50%; color: var(--text-2); }
.input-x:hover { background: var(--surface-2); color: var(--text); }
.input-x[hidden] { display: none; }
.input-x .i { width: 15px; height: 15px; stroke-width: 2; }
.input-wrap > .input-x { left: auto; color: var(--text-2); pointer-events: auto; } /* .input-wrap > .i qaydası ikona aiddir */
.csel__x { position: absolute; right: 36px; top: 50%; width: 24px; height: 24px; margin-top: -12px; display: grid; place-items: center; border-radius: 50%; color: var(--text-2); }
.csel__x:hover { background: var(--surface-2); color: var(--text); }
.csel__x[hidden] { display: none; }
.csel__x .i { width: 14px; height: 14px; stroke-width: 2; }
.csel.has-x .csel__v { padding-right: 26px; }
.csel--bare .csel__x { right: 18px; }

/* dil seçimi: header düyməsi, menyu, dairəvi bayraqlar */
.flag { flex: none; border-radius: 50%; overflow: hidden; } /* çərçivə yox (istifadəçi istəyi) */
.lang-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px; border-radius: var(--r-full); font-size: 14px; font-weight: 600; color: var(--text-2); transition: background .15s, color .15s; }
.lang-btn:hover { background: var(--surface-2); color: var(--text); }
.lang-pop .lang-it { gap: 12px; }
.lang-pop .lang-it.is-on { color: var(--brand-text); }
.ftr__prefs .flag { margin-right: 2px; }

/* Ayarlar paneli (EA.settings) — yığcam ölçülər */
.drawer--right.sett { width: min(94vw, 380px); }
.sett__hd { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sett__ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--brand-soft); color: var(--brand-text); }
.sett__ic .i { width: 18px; height: 18px; }
.sett__hd h3 { font-size: 16px; letter-spacing: -.01em; }
.sett__hd small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--text-2); }
.sett .drawer__body { padding: 16px 20px 24px; }
.sett__sec + .sett__sec { margin-top: 20px; }
.sett__sec h4 { margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.sett__theme { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-2); }
.sett__theme button { display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 6px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--text-2); transition: background .15s, color .15s; }
.sett__theme button:hover { color: var(--text); }
.sett__theme button.is-on { background: var(--brand); color: var(--on-brand); }
.sett__theme .i { width: 16px; height: 16px; }
.sett__pals { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.sett__pal { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 2px 6px; border-radius: 10px; font-size: 12px; color: var(--text-2); }
.sett__pal:hover, .sett__pal.is-on { background: var(--surface-2); color: var(--text); }
.sett__pal i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--sw); color: #fff; }
.sett__pal i .i { width: 14px; height: 14px; stroke-width: 2.6; opacity: 0; }
.sett__pal.is-on i { box-shadow: 0 0 0 2px var(--surface-2), 0 0 0 4px var(--sw); }
.sett__pal.is-on i .i { opacity: 1; }
.sett__pal[data-pal='gold'] i { color: #1A1500; }
.sett__curs { display: flex; flex-wrap: wrap; gap: 6px; }
.sett__cur { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 8px; background: var(--surface-2); font-size: 13.5px; font-weight: 600; }
.sett__cur .flag { width: 18px; height: 18px; }
.sett__cur:hover { background: var(--surface-3); }
.sett__cur.is-on { background: var(--brand); color: var(--on-brand); }
.sett__opts { display: grid; gap: 6px; }
.sett__opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px 10px 10px; border-radius: 12px; background: var(--surface-2); text-align: left; transition: background .15s; }
.sett__opt:hover { background: var(--surface-3); }
.sett__opt.is-on { background: color-mix(in srgb, var(--brand) 15%, transparent); }
.sett__opt b { display: block; font-size: 14px; font-weight: 600; }
.sett__opt small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--text-2); }
.sett__oic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--surface); color: var(--text-2); }
.sett__oic .i { width: 17px; height: 17px; }
.sett__opt.is-on .sett__oic { background: var(--brand); color: var(--on-brand); }
.sett__ok { width: 18px; height: 18px; flex: none; color: var(--brand-text); opacity: 0; }
.sett__opt.is-on .sett__ok { opacity: 1; }
.sett__note { margin-top: 20px; font-size: 12.5px; line-height: 1.55; color: var(--text-2); }
.sett__note b { color: var(--text); }
.dnav__meta { margin-left: auto; font-size: 13px; color: var(--text-2); }

/* iynə uclu bölücü — ortada görünən, kənarlara doğru itən xətt */
:root { --taper: linear-gradient(90deg, transparent, var(--line-strong) 22%, var(--line-strong) 78%, transparent); }
/* elan statistikası (EA.listingStats) */
.lst .modal__body { padding: 20px 24px 24px; }
/* başlıq: ikon + yazılar solda, × sağda (statistika, önə çıxarma) */
.modal--lhead .modal__head { justify-content: flex-start; padding: 14px 64px 14px 24px; }
.modal--lhead .modal__head h3 { text-align: left; }
.lst__hd { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lst__hd h3 { font-size: 18px; }
.lst__hd small { display: block; font-size: 13.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lst__kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 559px) { .lst__kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lst__k { padding: 14px 16px; border-radius: 14px; background: var(--surface-2); }
.lst__k span { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--h); }
.lst__k span .i { width: 17px; height: 17px; }
.lst__k b { display: block; margin-top: 6px; font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.lst__h { margin: 24px 0 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.sbars { display: flex; align-items: flex-end; gap: 3px; height: 150px; }
.sbars__c { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 6px; }
.sbars__c i { display: block; height: 3px; border-radius: 3px 3px 1px 1px; background: color-mix(in srgb, var(--brand) 32%, var(--surface-2)); transition: height .8s var(--ease-out), background .15s; }
.sbars.is-in .sbars__c i { height: calc(3px + 120px * var(--v)); }
.sbars__c:hover i, .sbars__c.is-hl i { background: var(--brand); }
.sbars__c span { height: 14px; font-size: 11.5px; color: var(--text-2); text-align: left; white-space: nowrap; overflow: visible; }
.lst__fans { display: grid; gap: 8px; }
.lst__fan { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.lst__fan b { flex: 1; min-width: 0; font-weight: 500; }
.lst__none { padding: 8px 0; color: var(--text-2); font-size: 14px; }

/* önə çıxarma pəncərəsi (EA.promote) — istifadəçinin nümunəsi */
.pm-modal .modal__body { padding: 20px 24px 12px; }
.pm__hd { display: flex; align-items: center; gap: 14px; }
.pm__ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--h-s); color: var(--h); }
.pm__ic .i { width: 22px; height: 22px; }
.pm__hd h3 { font-size: 19px; letter-spacing: -.02em; }
.pm__desc { font-size: 15px; line-height: 1.55; color: var(--text-2); }
.pm__disc { display: inline-flex; margin-top: 12px; padding: 6px 12px; border-radius: 10px; background: var(--success-soft); color: var(--success); font-size: 13.5px; font-weight: 600; }
.pm__h { margin: 22px 0 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.pm__opts { display: grid; gap: 6px; }
.pm__opt { display: flex; width: 100%; gap: 14px; padding: 14px 18px; border-radius: 12px; background: var(--surface-2); font-size: 15.5px; transition: background .15s; }
.pm__opt:hover { background: var(--surface-3); }
.pm__opt:has(input:checked) { background: color-mix(in srgb, var(--brand) 15%, transparent); }
.pm__opt s { font-size: 13.5px; color: var(--text-3); }
.pm__opt b { font-weight: 700; }
.pm__pays { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pm__pay { display: flex; align-items: center; gap: 12px; min-width: 0; height: 56px; padding: 0 14px; border-radius: 14px; background: var(--surface-2); font-size: 15px; font-weight: 500; text-align: left; transition: background .15s, box-shadow .15s; }
.pm__pay:hover:not(:disabled) { background: var(--surface-3); }
.pm__pay--wide { grid-column: 1 / -1; }
.pm__pay small { font-size: 13.5px; color: var(--text-2); }
.pm__pay b { font-weight: 700; }
.pm__pay.is-on { background: var(--brand-soft); color: var(--brand-text); box-shadow: inset 0 0 0 1.5px var(--brand); }
.pm__pay:disabled { opacity: .45; cursor: not-allowed; }
.pml { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; font-size: 10px; font-weight: 800; }
.pml .i { width: 17px; height: 17px; }
.pml--visa { background: #1A1F71; color: #fff; font-size: 9.5px; font-style: italic; letter-spacing: .02em; }
.pml--apple { background: #111; color: #fff; }
html[data-theme='dark'] .pml--apple { background: #fff; color: #111; }
.pml--google { background: #fff; color: #4285F4; font-size: 17px; box-shadow: 0 0 0 1px rgba(16, 24, 40, .08); }
.pml--birbank { background: #E30613; color: #fff; font-size: 17px; }
.pml--m10 { background: #1FB89A; color: #fff; }
.pml--pkg { background: var(--c-gold-s); color: var(--c-gold); }
.pml--bal { background: var(--c-green-s); color: var(--c-green); }
.pm__cards .payopts { display: grid; gap: 8px; }
.pm-modal .modal__foot { flex-direction: column; align-items: stretch; gap: 10px; }
.pm__note { text-align: center; font-size: 13px; color: var(--text-2); }
.ncard { display: grid; gap: 14px; margin-top: 2px; padding: 16px; border-radius: 12px; background: var(--surface-2); }
.ncard .input { background: var(--surface); }
.ncard .check { font-size: 14.5px; }
.cf { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cf__num { grid-column: 1 / -1; }
.cf .input { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* custom select (EA.select) — əsl select gizlidir, düymə onun görünüşüdür */
.csel-src { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; clip-path: inset(50%); }
.csel { position: relative; display: flex; align-items: center; text-align: left; background-image: none !important; cursor: pointer; }
.csel__v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csel__chev { position: absolute; right: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--text-3); transition: transform .2s var(--ease); pointer-events: none; }
.csel.is-open { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft-2); }
.csel.is-open .csel__chev { transform: rotateX(180deg); color: var(--brand-text); }
.csel.is-ph .csel__v { color: var(--text-3); }
.csel:disabled { cursor: not-allowed; }
.csel--bare { width: 100%; height: auto; padding: 2px 22px 0 0; border: 0; background: none; font-size: inherit; color: var(--text); }
.csel--bare .csel__chev { right: 0; }
.csel--bare.is-open { box-shadow: none; }
.pop.csel-pop { --pop-pad: 6px; padding: 6px; border-radius: 14px; }
.csel__list { display: flex; flex-direction: column; gap: 1px; }
.csel__opt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 9px 12px; border-radius: 10px; text-align: left; font-size: 15px; color: var(--text); }
.csel__opt span { flex: 1; min-width: 0; }
.csel__opt.is-act { background: var(--surface-2); }
.csel__opt.is-on { background: var(--brand-soft); color: var(--brand-text); font-weight: 600; }
.csel__ok { width: 17px; height: 17px; flex: none; opacity: 0; stroke-width: 2.2; }
.csel__opt.is-on .csel__ok { opacity: 1; }
.csel__opt:disabled { color: var(--text-3); cursor: not-allowed; }
.csel__q { position: sticky; top: -6px; z-index: 1; display: flex; align-items: center; margin: -6px -6px 6px; padding: 8px 8px 8px; background: var(--surface); }
.csel__q .i { position: absolute; left: 20px; width: 16px; height: 16px; color: var(--text-3); pointer-events: none; }
.csel__q .input { padding-left: 38px; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap > .i { position: absolute; left: 14px; color: var(--text-3); pointer-events: none; }
.input-wrap > .input { padding-left: 44px; }
.input-wrap > .input-suffix { position: absolute; right: 14px; color: var(--text-3); font-size: 14px; pointer-events: none; }
.input-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.input-pair > span { color: var(--text-3); }

/* position: relative — gizli input label-in içində qalsın; yoxsa fokusda brauzer sürüşən pəncərənin özünü (modal) scroll edir */
.check, .radio { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; font-size: 15px; -webkit-tap-highlight-color: transparent; }
.check input, .radio input { position: absolute; opacity: 0; pointer-events: none; }
.check__box, .radio__box { position: relative; width: 22px; height: 22px; flex: none; border: 1px solid var(--text-3); background: var(--surface); border-radius: 6px; transition: background .15s, border-color .15s; }
.radio__box { border-radius: 50%; }
.check__box::after { content: ''; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid var(--on-brand); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .2s var(--ease-spring); }
.radio__box::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--on-brand); transform: scale(0); transition: transform .2s var(--ease-spring); }
/* seçiləndə primary (brend) rəng — bütün checkbox və radio-lar */
.check input:checked + .check__box, .radio input:checked + .radio__box { background: var(--brand); border-color: var(--brand); }
.check input:checked + .check__box::after { transform: rotate(45deg) scale(1); }
.radio input:checked + .radio__box::after { transform: scale(1); }
.check:hover .check__box, .radio:hover .radio__box { border-color: var(--text); }
.check input:focus-visible + .check__box, .radio input:focus-visible + .radio__box { box-shadow: var(--ring); }

.switch { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch__track { position: relative; width: 46px; height: 28px; border-radius: 14px; background: #B0B0B0; transition: background .2s; flex: none; }
.switch__track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .25s var(--ease); }
.switch input:checked + .switch__track { background: var(--brand); } /* aktiv switch əsas rəngdə (istifadəçi) */
.switch input:checked + .switch__track::after { transform: translateX(18px); }
html[data-theme='dark'] .switch__track { background: var(--surface-3); }
html[data-theme='dark'] .switch input:checked + .switch__track { background: var(--brand); }
.switch input:focus-visible + .switch__track { box-shadow: var(--ring); }

/* seqment */
.seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: 10px; background: var(--surface-2); isolation: isolate; }
.seg__btn { position: relative; z-index: 1; height: 36px; padding: 0 16px; border-radius: 8px; font-weight: 500; font-size: 14px; color: var(--text-2); transition: color .2s; white-space: nowrap; }
.seg__btn:hover { color: var(--text); }
.seg__btn.is-on { color: var(--on-brand); font-weight: 600; } /* aktiv tab əsas rəngdə (istifadəçi) */
.seg__btn[data-t]::after { content: attr(data-t); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 600; }
.seg__thumb { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; border-radius: 8px; background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 0 1px rgba(0, 0, 0, .04); transition: transform .35s var(--ease), width .35s var(--ease); }
/* aktiv tab fonu — brend rəngi (light / dark) */
.seg .seg__thumb { background: var(--brand); box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
.seg--ink .seg__thumb { background: var(--ink); }
.seg--ink .seg__btn.is-on { color: var(--on-ink); }
.seg--sm .seg__btn { height: 30px; padding: 0 12px; font-size: 13px; }
.seg--block { display: grid; width: 100%; }

/* chip */
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r-full);
  border: 0; background: var(--surface-2); color: var(--text); font-size: 14px; font-weight: 500; white-space: nowrap;
  transition: background .15s, color .15s; -webkit-tap-highlight-color: transparent; cursor: pointer;
}
.chip:hover { background: var(--surface-3); }
.chip .i { width: 17px; height: 17px; }
.chip.is-on { background: var(--brand); color: var(--on-brand); }
.chip.is-on:hover { background: var(--brand-hover); }
.chip--sm { height: 34px; padding: 0 13px; font-size: 13.5px; }
.chip--soft { background: var(--surface-2); }
.chip--soft:hover { background: var(--surface-3); }
.chip__x { display: grid; place-items: center; width: 18px; height: 18px; margin-right: -6px; border-radius: 50%; }
.chip__x .i { width: 13px; height: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.chips--scroll::-webkit-scrollbar { display: none; }
.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
/* otaq sayı — kiçik kvadrat düymələr (seçilən primary) */
.opt-grid--sq { display: flex; flex-wrap: wrap; gap: 8px; }
.opt-grid--sq .opt { flex: none; width: 44px; height: 44px; padding: 0; }
.opt { height: 42px; border-radius: 10px; background: var(--surface-2); font-weight: 500; font-size: 14.5px; transition: background .15s, color .15s; }
.opt:hover { background: var(--surface-3); }
.opt.is-on { background: var(--brand); color: var(--on-brand); }

/* range */
/* ── Tək slayder (native range, .rng): çərçivəsiz, 20px brend dairə, 6px zolaq;
      dolmamış hissə fondan bir ton fərqli (light-da açıq boz, dark-da tünd fondan bir az açıq) ── */
.rng { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 24px; margin: 0; background: none; cursor: pointer; --p: 0%; }
.rng:focus { outline: none; }
.rng::-webkit-slider-runnable-track { height: 6px; border: 0; border-radius: 3px; background: linear-gradient(to right, var(--brand) var(--p), var(--surface-3) var(--p)); }
.rng::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border: 0; border-radius: 50%; background: var(--brand); box-shadow: 0 1px 4px rgba(16, 24, 40, .28); transition: transform .15s var(--ease); }
.rng:hover::-webkit-slider-thumb, .rng:active::-webkit-slider-thumb { transform: scale(1.12); }
.rng:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--brand-soft-2); }
.rng::-moz-range-track { height: 6px; border: 0; border-radius: 3px; background: var(--surface-3); }
.rng::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--brand); }
.rng::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--brand); box-shadow: 0 1px 4px rgba(16, 24, 40, .28); }
.range { position: relative; height: 28px; margin: 6px 12px 2px; }
.range__track { position: absolute; left: 0; right: 0; top: 12px; height: 4px; border-radius: 2px; background: var(--surface-3); }
.range__fill { position: absolute; top: 12px; height: 4px; border-radius: 2px; background: var(--brand); }
.range input { position: absolute; inset: 0 -12px; width: calc(100% + 24px); margin: 0; appearance: none; -webkit-appearance: none; background: none; pointer-events: none; }
.range input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 1px rgba(16, 24, 40, .08), 0 2px 6px rgba(16, 24, 40, .22); cursor: grab; transition: transform .15s; }
.range input::-webkit-slider-thumb:active { transform: scale(1.1); cursor: grabbing; }
.range input::-moz-range-thumb { pointer-events: auto; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 1px rgba(16, 24, 40, .08), 0 2px 6px rgba(16, 24, 40, .22); cursor: grab; }
.histo { display: flex; align-items: flex-end; gap: 2px; height: 56px; padding-inline: 12px; }
.histo span { flex: 1; border-radius: 2px 2px 0 0; background: var(--surface-3); transition: background .2s; }
.histo span.in { background: color-mix(in srgb, var(--brand) 55%, transparent); }

/* ── Badge / tag ───────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 6px;
  font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap; color: var(--text); background: var(--surface-2);
}
.badge .i { width: 13px; height: 13px; }
.badge--white { background: #fff; color: #222; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.badge--ink { background: var(--ink); color: var(--on-ink); }
.badge--line { background: transparent; border: 1px solid var(--line-strong); }
.badge--glass { background: rgba(0, 0, 0, .55); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.badge--vip { background: var(--brand); color: var(--on-brand); box-shadow: 0 1px 2px rgba(0, 0, 0, .14); }
.badge--premium, .badge--new, .badge--urgent, .badge--ok, .badge--on { background: #fff; color: #222; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
/* rəngli nöqtə/ikonlu ağ nişan (foto üstündə) */
.badge > b { width: 7px; height: 7px; border-radius: 50%; background: var(--h, var(--brand)); flex: none; }
.badge--premium .i { color: var(--star); fill: var(--star); }
.badge--ok .i { color: var(--verify); }
.badge--soft { background: var(--h-s); color: var(--h-t); }
.badge--brand { background: var(--danger); color: #fff; height: 20px; padding: 0 7px; border-radius: 10px; font-size: 11.5px; }
.badge--soft-green { background: var(--success-soft); color: var(--success); }
.badge--soft-red { background: var(--danger-soft); color: var(--danger); }
.badge--soft-gold { background: var(--c-gold-s); color: color-mix(in srgb, var(--c-gold) 80%, #000); }
.badge--soft-teal { background: var(--teal-soft); color: var(--teal); }
.badge--soft-violet { background: var(--violet-soft); color: var(--violet); }
.badge--soft-blue { background: var(--c-blue-s); color: var(--c-blue); }
.badge--soft-brand { background: var(--brand-soft); color: var(--brand-text); }
html[data-theme='dark'] .badge--soft-gold { color: var(--c-gold); }
.dot-live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex: none; }
.dot-live::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ping 1.8s var(--ease) infinite; }
.kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--line-strong); font-size: 11.5px; font-weight: 600; color: var(--text-2); background: var(--surface); }

/* ── Surfaces ──────────────────────────────────────────── */
.card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--edge); }
.card--pad { padding: 20px; }
@media (min-width: 768px) { .card--pad { padding: 28px; } }
.card--hover { transition: box-shadow .25s; }
.card--hover:hover { box-shadow: var(--sh-3); }
.panel { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-3); }
.divider { height: 1px; background: var(--taper); margin-block: 24px; }
.avatar { --s: 40px; width: var(--s); height: var(--s); border-radius: 50%; flex: none; display: grid; place-items: center; overflow: hidden; font-weight: 600; font-size: calc(var(--s) * .38); color: #fff; background: var(--c, #222); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sq { border-radius: 24%; }
.aglogo { background: var(--surface) !important; color: var(--c, var(--text)); border: 1px solid var(--line-strong); font-weight: 700; letter-spacing: -.02em; }
html[data-theme='dark'] .aglogo { color: color-mix(in srgb, var(--c, #fff) 62%, #fff); }
.aglogo--img { overflow: hidden; padding: 0; }
.aglogo--img img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
html[data-theme='dark'] .avatar:not(.aglogo) { background: color-mix(in srgb, var(--c, #3A3A3A) 58%, #000); }
.rating { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; font-size: 14px; }
.rating .i { width: 14px; height: 14px; fill: var(--star); color: var(--star); }
.stars { display: inline-flex; gap: 2px; }
.stars .i { width: 15px; height: 15px; color: var(--star); }
.stars .i.on { fill: currentColor; }

/* ── Listing card ──────────────────────────────────────── */
.lcard { position: relative; display: flex; flex-direction: column; min-width: 0; }
.lcard__media { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: var(--surface-2); isolation: isolate; }
/* overflow-y: hidden — zolaq şaquli sürüşməsin, təkər səhifəni scroll etsin (kartın üstündə ilişməsin) */
.lcard__slides { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; transition: transform .6s var(--ease); }
.lcard__slides::-webkit-scrollbar { display: none; }
.lcard__slides img { width: 100%; height: 100%; flex: none; object-fit: cover; scroll-snap-align: start; transition: opacity .4s; }
/* hover böyütməsi bütün zolağa — ayrı şəkillər böyüyəndə növbəti şəkil sağdan görünürdü */
@media (hover: hover) { .lcard:hover .lcard__slides { transform: scale(1.03); } }
.lcard__shade { position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(transparent, rgba(0, 0, 0, .22)); pointer-events: none; z-index: 1; opacity: 0; transition: opacity .25s; }
@media (hover: hover) { .lcard:hover .lcard__shade { opacity: 1; } }
.lcard__badges { position: absolute; top: 12px; left: 12px; right: 56px; display: flex; gap: 6px; z-index: 2; pointer-events: none; }
.fav.lcard__fav { position: absolute; top: 8px; right: 8px; z-index: 3; }
.lcard__cnt { display: none; }
.lcard__dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; z-index: 2; pointer-events: none; }
/* aktiv nöqtə uzunsov həb */
.lcard__dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .6); box-shadow: 0 0 2px rgba(0, 0, 0, .25); transition: width .25s var(--ease), background .2s; }
.lcard__dots i.on { width: 16px; background: #fff; }
/* oxlar — tünd şəffaf dairə, ağ ox; dövr sonsuz olduğu üçün heç vaxt gizlənmir */
.lcard__arrow { position: absolute; top: 50%; z-index: 3; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .45); color: #fff; opacity: 0; transition: opacity .2s, background .15s, transform .15s; }
.lcard__arrow:hover { background: rgba(0, 0, 0, .62); }
.lcard__arrow:active { transform: scale(.94); }
.lcard__arrow .i { width: 16px; height: 16px; stroke-width: 2.2; }
.lcard__arrow--l { left: 10px; }
.lcard__arrow--r { right: 10px; }
@media (hover: hover) { .lcard__media:hover .lcard__arrow { opacity: 1; } }
/* toxunma ekranında oxlar görünmür — DOM-da da qalmasın (hər kartda 2 əlavə qat; şəkli sürüşdürmək kifayətdir) */
@media (hover: none) { .lcard__arrow { display: none; } }
.lcard__body { display: flex; flex-direction: column; gap: 2px; padding-top: 12px; min-width: 0; }
.lcard__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; }
.lcard__price small { font-size: 13.5px; font-weight: 400; color: var(--text-2); letter-spacing: 0; }
.lcard__drop { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; color: var(--success); }
.lcard__drop .i { width: 13px; height: 13px; stroke-width: 2.2; }
.lcard__title { font-size: 15px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lcard__addr { display: block; font-size: 15px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lcard__addr .i { display: none; }
.lcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; font-size: 14px; color: var(--text-3); }
.lcard__flags { display: none; }
.lcard__desc { display: none; }
.lcard__cmp { display: none; }
.lcard--boxed { }
/* sətir variantı */
@media (min-width: 768px) {
  .lcard--row { flex-direction: row; gap: 24px; padding: 0 0 8px; }
  .lcard--row .lcard__media { width: 320px; flex: none; }
  .lcard--row .lcard__body { flex: 1; padding-top: 4px; gap: 4px; }
  .lcard--row .lcard__price { font-size: 20px; }
  .lcard--row .lcard__title { white-space: normal; font-size: 16px; }
  .lcard--row .lcard__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; color: var(--text-2); margin-top: 6px; }
  .lcard--row .lcard__foot { margin-top: auto; }
}

/* telefon: elan kartları hər yerdə 2 sütun (şəbəkə və sürüşən zolaq) — dar kart üçün sıx üslub */
@media (max-width: 559px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .scroller:has(> .lcard) { --col: calc((100% - 12px) / 2); gap: 12px; }
  :is(.cards, .scroller) .lcard__media, .cards .cxcard__media { border-radius: 12px; }
  :is(.cards, .scroller) .lcard__badges { top: 8px; left: 8px; right: 40px; }
  :is(.cards, .scroller) .lcard__badges .badge, .cards .cxcard__st { height: 20px; padding: 0 6px; gap: 3px; font-size: 11px; }
  :is(.cards, .scroller) .lcard__badges .badge .i { width: 11px; height: 11px; }
  .cards .cxcard__st { top: 8px; left: 8px; }
  :is(.cards, .scroller) .fav.lcard__fav, .cards .fav.cxcard__fav { top: 2px; right: 2px; width: 36px; height: 36px; }
  :is(.cards, .scroller) .lcard .fav .i, .cards .cxcard .fav .i { width: 22px; height: 22px; }
  :is(.cards, .scroller) .lcard__dots { bottom: 7px; gap: 4px; }
  :is(.cards, .scroller) .lcard__dots i { width: 5px; height: 5px; }
  :is(.cards, .scroller) .lcard__dots i.on { width: 12px; }
  :is(.cards, .scroller) .lcard__body, .cards .cxcard__body { padding-top: 8px; gap: 1px; }
  :is(.cards, .scroller) .lcard__price { gap: 2px 6px; font-size: 15px; }
  :is(.cards, .scroller) .lcard__price small { display: none; } /* m² qiyməti dar kartda yer tutur — elan səhifəsində var */
  :is(.cards, .scroller) .lcard__drop { font-size: 12px; }
  :is(.cards, .scroller) .lcard__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; font-size: 13.5px; line-height: 1.35; }
  :is(.cards, .scroller) .lcard__addr { font-size: 13px; }
  :is(.cards, .scroller) .lcard__foot { font-size: 12px; }
  .cards .cxcard__name { font-size: 14.5px; }
  .cards .cxcard__meta { font-size: 13px; }
  .cards .cxcard__price { font-size: 14px; }
  .cards .cxcard__price small { font-size: 12px; }
}

/* sevimli — Airbnb üslubu ürək */
/* foto üzərindəki ürək — istifadəçinin verdiyi ikon: ağ kontur, yarımşəffaf dolğu, yumşaq kölgə */
.fav { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; -webkit-tap-highlight-color: transparent; transition: transform .15s; }
.fav .i { width: 28px; height: 28px; fill: rgba(15, 15, 15, .15); stroke: #fff; stroke-width: 1; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5)); transition: fill .15s; }
@media (max-width: 639px) { .fav .i { width: 24px; height: 24px; } }
@media (max-width: 321px) { .fav .i { width: 20px; height: 20px; } }
.fav:hover { transform: scale(1.08); }
.fav:active { transform: scale(.92); }
.fav.is-on .i { fill: var(--heart); stroke: #fff; animation: heartPop .4s var(--ease-spring); }
.fav--plain .i { filter: none; }
.fav--plain { width: 40px; height: 40px; color: var(--text); }
.fav--plain .i { width: 20px; height: 20px; fill: none; stroke: currentColor; }
.fav--plain.is-on .i { fill: var(--heart); stroke: var(--heart); }

/* skeleton */
.sk { position: relative; overflow: hidden; background: var(--surface-2); border-radius: 8px; }
.sk::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); animation: shimmer 1.4s infinite; }
html[data-theme='dark'] .sk::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .05), transparent); }
.sk-card .sk-media { aspect-ratio: 4 / 3; border-radius: var(--r); }
.sk-line { height: 12px; margin-top: 10px; }

/* ── Header ────────────────────────────────────────────── */
.hdr { position: sticky; top: 0; z-index: 60; height: var(--hdr-h); background: var(--bg); transition: box-shadow .2s; view-transition-name: hdr; }
.hdr.is-scrolled { box-shadow: 0 1px 0 rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .06); }
html[data-theme='dark'] .hdr.is-scrolled { box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
.hdr__in { height: 100%; display: flex; align-items: center; gap: 8px; }
.logo { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 21px; color: var(--text); }
.logo__mark { width: 32px; height: 32px; flex: none; }
@media (min-width: 1024px) { .logo__mark { width: 34px; height: 34px; } }
/* logo glyph-i: brend gradientli xətt + kontekst rəngində dairə (light — tünd, dark və tünd fonlar — açıq) */
.lm-stroke { fill: none; stroke: url(#lm-grad); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
/* düz dolğu — əvvəlki radial SVG mask (url(#lm-mask)) mobil brauzerlərdə sticky header scroll olanda hər kadr yenidən rasterlənib logonu titrədirdi */
.lm-dot { fill: var(--text); }
.lm-s0 { stop-color: color-mix(in srgb, var(--brand) 86%, #fff); }
.lm-s1 { stop-color: var(--brand); }
.lm-s2 { stop-color: color-mix(in srgb, var(--brand) 84%, #000); }
/* wordmark — Outfit (yalnız "Elan.az" hərfləri yüklənir), düz, italic deyil */
.logo__word { font-family: var(--font-logo); font-weight: 700; font-style: normal; letter-spacing: -.025em; line-height: 1; }
.logo__word span { color: var(--text-3); font-weight: inherit; }
.hdr__nav { display: none; }
.hdr__search { display: none; }
.hdr__actions { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.hdr__post { display: none; }
.hdr__user { display: none; }
@media (min-width: 768px) {
  .hdr__post { display: inline-flex; }
}
@media (min-width: 1024px) {
  .hdr__burger { display: none !important; }
  .hdr__nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
  .hdr__actions { margin-left: 0; }
  .nav-link { padding: 0 10px; font-size: 14.5px; }
  .hdr__user { display: inline-flex; }
}
.nav-link { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 14px; border-radius: 10px; font-weight: 500; font-size: 15px; color: var(--text-2); white-space: nowrap; transition: color .15s, background .15s; }
/* 1024–1279: yığcam nav — media qaydası yuxarıda baza .nav-link-dən əvvəl gəldiyi üçün işləmirdi, header 1024-də 18px daşırdı */
@media (min-width: 1024px) and (max-width: 1279px) { .nav-link { padding: 0 10px; font-size: 14.5px; } }
/* "Yaşayış kompleksləri" — dar desktopda (<1366) header-ə sığsın deyə qısa "Komplekslər" */
.nav-link__s { display: none; }
@media (max-width: 1365px) { .nav-link__x { display: none; } .nav-link__s { display: inline; } }
.nav-link:hover { color: var(--text); background: var(--surface-2); }
/* aktiv link — primary rəngin 15%-i fon, primary mətn (alt xətt yox) */
.nav-link.is-active { color: var(--brand-text); font-weight: 500; background: color-mix(in srgb, var(--brand) 15%, transparent); } /* qalınlıq digər linklərlə eyni */
.nav-link .i { width: 14px; height: 14px; transition: transform .2s; }
.nav-item { position: relative; }
.nav-item:hover .nav-link .i, .nav-item:has(:focus-visible) .nav-link .i { transform: rotateX(180deg); }
.mega {
  position: absolute; top: calc(100% + 12px); left: 50%; min-width: 560px; padding: 20px; border-radius: 20px;
  background: var(--surface); box-shadow: 0 0 0 1px rgba(16, 24, 40, .04), var(--sh-4);
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .18s, transform .22s var(--ease), visibility .18s;
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.mega::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
/* klavişlə gələndə açıq qalsın, amma siçanla klikdən sonra fokus menyunu açıq saxlamasın */
.nav-item:hover .mega, .nav-item:has(:focus-visible) .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
/* Alış / Kirayə — header konteynerinin mərkəzində geniş panel */
.hdr__in { position: relative; }
.nav-item--wide { position: static; }
/* geniş panel header konteynerinə görə yerləşir — üstü düymənin altına (40px link, şaquli mərkəz) hizalanır, aradakı boşluq körpü ilə örtülür */
.nav-item--wide .mega { top: calc(50% + 20px + 12px); }
.mega::before { top: -16px; height: 16px; }
.mega__col { display: flex; flex-direction: column; min-width: 0; }
.mega__title { display: flex; justify-content: space-between; gap: 12px; margin: 2px 10px 10px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.mega__title span:last-child:not(:first-child) { letter-spacing: 0; text-transform: none; font-weight: 500; }
.mega__ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--h-s, var(--surface-2)); color: var(--h, var(--text)); flex: none; transition: transform .2s var(--ease); }
.mega__ico .i { width: 19px; height: 19px; }
/* ümumi menyu sətri (Daha çox) */
.mega__link { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; transition: background .15s; }
.mega__link:hover { background: var(--surface-2); }
.mega__link:hover .mega__ico { transform: scale(1.06); }
.mega__link b { display: block; font-weight: 500; font-size: 15px; }
.mega__link small { display: block; color: var(--text-3); font-size: 13px; }
.mega--deal { width: min(1040px, calc(100vw - 48px)); min-width: 0; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr) 236px; gap: 28px; padding: 22px 22px 0; } /* overflow: hidden yox — üstdəki hover körpüsünü (::before) kəsirdi */
/* kateqoriyalar — 2 sütun, ad + say, altında alt növ keçidləri */
.mega__cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; }
.mega__cat { display: flex; align-items: flex-start; gap: 12px; padding: 10px; border-radius: 14px; transition: background .15s; }
.mega__cat:hover { background: var(--surface-2); }
.mega__cat:hover .mega__ico { transform: scale(1.06); }
.mega__cat-b { min-width: 0; padding-top: 1px; }
.mega__cat-t { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
.mega__cat-t b { font-size: 15px; font-weight: 600; line-height: 1.3; }
.mega__cat-t small { font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.mega__subs { display: flex; flex-wrap: wrap; margin-top: 3px; font-size: 13px; line-height: 1.5; }
.mega__subs a { color: var(--text-2); transition: color .15s; }
.mega__subs a:hover { color: var(--brand-text); }
.mega__subs a:not(:last-child)::after { content: '·'; margin: 0 6px; color: var(--text-3); } /* nöqtə sətrin sonunda qalır, yeni sətrə keçmir */
/* rayonlar — ad, qiymət, illik dəyişmə */
.mega__dists { display: flex; flex-direction: column; }
.mega__dists a { display: grid; grid-template-columns: minmax(0, 1fr) auto 58px; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 14.5px; transition: background .15s; }
.mega__dists a:hover { background: var(--surface-2); }
.mega__dists b { font-size: 13.5px; font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; }
.mega__dists small { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mega__dists small .i { width: 13px; height: 13px; }
.mega__dists small.is-up { color: var(--success); }
.mega__dists small.is-down { color: var(--danger); }
/* sağ sütun — xəritə kartı + sürətli seçimlər */
.mega__aside .mega__title { margin-top: 16px; }
.mega__feat { position: relative; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--surface-2); transition: box-shadow .2s, transform .2s var(--ease); }
.mega__feat:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
.mega__feat-art { display: block; background: color-mix(in srgb, var(--brand) 10%, var(--surface-2)); }
.mega__map { display: block; width: 100%; height: auto; }
.mm-w { fill: color-mix(in srgb, var(--c-blue) 24%, transparent); }
.mm-r path { fill: none; stroke: color-mix(in srgb, var(--text) 13%, transparent); stroke-width: 6; stroke-linecap: round; }
.mm-p circle { fill: var(--brand); stroke: #fff; stroke-width: 2.5; }
.mega__feat-b { display: block; padding: 12px 40px 13px 14px; }
.mega__feat-b b { display: block; font-size: 15px; font-weight: 600; }
.mega__feat-b small { display: block; margin-top: 1px; font-size: 13px; color: var(--text-2); }
.mega__feat > .i { position: absolute; right: 14px; bottom: 22px; width: 18px; height: 18px; color: var(--brand-text); transition: transform .2s var(--ease); }
.mega__feat:hover > .i { transform: translateX(3px); }
.mega__quick { display: flex; flex-wrap: wrap; gap: 6px; }
.mega__quick a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 9px; background: var(--surface-2); font-size: 13px; font-weight: 500; transition: background .15s, color .15s; }
.mega__quick a .i { width: 14px; height: 14px; color: var(--text-2); }
.mega__quick a:hover { background: color-mix(in srgb, var(--brand) 15%, transparent); color: var(--brand-text); }
.mega__quick a:hover .i { color: inherit; }
/* alt zolaq — ümumi say və orta qiymət */
.mega__foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 -22px; padding: 14px 22px; border-radius: 0 0 20px 20px; background: var(--surface-2); font-size: 13.5px; color: var(--text-2); }
.mega__foot b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.mega__foot a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--brand-text); }
.mega__foot a .i { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.mega__foot a:hover .i { transform: translateX(3px); }
/* Daha çox — iki qrup + biznes kartı */
.mega--tools { width: 660px; min-width: 0; gap: 12px; padding: 16px; }
/* biznes kartı — primary rəngin yüngül çaları (qara kart işıqlı temada ağır görünürdü) */
.mega__biz { display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 14px 14px 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--brand) 12%, var(--surface)); color: var(--text); transition: background .15s; }
.mega__biz:hover { background: color-mix(in srgb, var(--brand) 18%, var(--surface)); }
.mega__biz b { display: block; font-size: 14.5px; font-weight: 600; }
.mega__biz small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-2); }
.mega__biz > .i { flex: none; width: 18px; height: 18px; margin-left: auto; color: var(--brand-text); transition: transform .2s var(--ease); }
.mega__biz:hover > .i { transform: translateX(3px); }

.user-btn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 6px 0 14px; border-radius: var(--r-full); border: 1px solid var(--line-strong); background: var(--surface); transition: box-shadow .2s; }
.user-btn:hover { box-shadow: var(--sh-2); }
.user-btn .avatar { --s: 32px; }
.user-btn > .i { width: 18px; height: 18px; }
/* "Elan yerləşdir" — primary düymə, + ikonlu (nav linkləri ilə eyni 40px) */
.hdr-post-link { display: none; --h: 40px; gap: 6px; padding: 0 16px 0 12px; }
.hdr-post-link .i { width: 18px; height: 18px; stroke-width: 2.2; }
@media (min-width: 1280px) { .hdr-post-link { display: inline-flex; } .nav-link { padding: 0 14px; font-size: 15px; } }
.hdr .hdr__user { display: none; }
@media (min-width: 1024px) { .hdr .hdr__user { display: inline-flex; } .hdr__actions { gap: 6px; } }

/* ── Popover / dropdown ────────────────────────────────── */
.pop { position: fixed; z-index: 120; min-width: 220px; max-width: calc(100vw - 24px); padding: 8px; border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1px rgba(16, 24, 40, .04), var(--sh-4); opacity: 0; transform: translateY(-4px); transition: opacity .15s, transform .2s var(--ease); pointer-events: none; }
.pop.is-open { opacity: 1; transform: none; pointer-events: auto; }
.pop__item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border-radius: 8px; font-size: 15px; text-align: left; color: var(--text); transition: background .12s; }
.pop__item:hover, .pop__item.is-active { background: var(--surface-2); }
.pop__item .i { width: 18px; height: 18px; color: var(--text-2); }
.pop__item.is-on { font-weight: 600; }
.pop__item.is-on::after { content: ''; margin-left: auto; width: 6px; height: 11px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); }
.pop__item--danger, .pop__item--danger .i { color: var(--danger); }
.pop__sep { height: 1px; margin: var(--pop-pad, 8px) calc(var(--pop-pad, 8px) * -1); background: var(--line); } /* kənardan-kənara; yuxarı-aşağı popup padding-i qədər */
.pop__head { padding: 10px 12px 10px; }
.pop__label { padding: 10px 12px 4px; font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.tip { position: fixed; z-index: 200; max-width: 240px; padding: 6px 10px; border-radius: 8px; background: #222; color: #fff; font-size: 13px; line-height: 1.4; pointer-events: none; opacity: 0; transition: opacity .12s; }
html[data-theme='dark'] .tip { background: var(--ink); color: var(--on-ink); }
.tip.is-open { opacity: 1; }


/* ════════ Filtr zolağı — ortaq komponent (komplekslər, agentliklər, agentlik → Elanlar, biznes kabinet → Elanlar; search.html eyni dil) ════════
   .fx-bar: [axtarış .fx-q] + [çiplər .fx-chips (.fpill)] — ≥1200 bir sətir, aşağıda axtarış üstdə, çiplər sürüşən sətir
   .fx-head: nəticə sayı .fx-n · aktiv çiplər .fx-act (.achip) · .fx-clear "Sıfırla" · sağda .fx-sort / əlavə düymələr (.fx-end) */
.fx-bar { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 1200px) { .fx-bar { flex-direction: row; align-items: center; gap: 12px; } }
.fx-q { position: relative; flex: none; }
@media (min-width: 1200px) { .fx-q { width: 340px; } }
.fx-q > .i { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--text-2); pointer-events: none; z-index: 1; }
.fx-q .input { height: 44px; padding-left: 42px; border-radius: 12px; border-color: transparent; background: var(--surface-2); font-size: 14.5px; transition: background .15s, box-shadow .15s; }
.fx-q .input:hover { border-color: transparent; background: var(--surface-3); }
.fx-q .input:focus { border-color: transparent; background: var(--surface); box-shadow: 0 0 0 2px var(--brand); }
.fx-chips { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 4px; margin: -4px; }
.fx-chips::-webkit-scrollbar { display: none; }
.fx-chips.is-over { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
@media (max-width: 767px) { .fx-chips { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); } }
/* çip: dolğulu 44px plitə, rəngli ikon dairəsi (.hue-*), ox; seçiləndə dəyər + × , ikon dolu */
.fpill { -webkit-tap-highlight-color: transparent; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 10px; border-radius: 12px; background: var(--surface-2); color: var(--text); font-size: 14.5px; font-weight: 500; white-space: nowrap; transition: background .15s, box-shadow .15s, color .15s; }
.fpill:hover { background: var(--surface-3); }
.fpill.is-open, .fpill[aria-expanded='true'] { background: var(--surface); box-shadow: 0 0 0 2px var(--brand); }
.fpill__ic { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--h-s); color: var(--h); transition: background .15s, color .15s; }
.fpill__ic .i { width: 14px; height: 14px; }
.fpill__t { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.fpill__chev { width: 15px; height: 15px; color: var(--text-3); transition: transform .2s var(--ease); }
.fpill.is-open .fpill__chev, .fpill[aria-expanded='true'] .fpill__chev { transform: rotateX(180deg); }
.fpill__x { display: grid; place-items: center; width: 22px; height: 22px; margin-right: -6px; border-radius: 50%; color: var(--text-2); }
.fpill__x:hover { background: color-mix(in srgb, var(--text) 9%, transparent); color: var(--text); }
.fpill__x .i { width: 14px; height: 14px; stroke-width: 2; }
.fpill.is-set .fpill__ic { background: var(--h); color: #fff; }
html[data-theme='dark'] .fpill.is-set .fpill__ic { color: var(--bg); }
/* açar-çip (Təsdiqlənmiş, İpoteka …): seçiləndə brend 15% */
.fpill--tog { padding-right: 16px; }
.fpill--tog.is-set { background: color-mix(in srgb, var(--brand) 15%, transparent); color: var(--brand-text); }
.fpill--tog.is-set:hover { background: color-mix(in srgb, var(--brand) 22%, transparent); }
@media (max-width: 639px) { .fpill { height: 42px; padding-left: 9px; font-size: 14px; } .fpill--tog { padding-right: 14px; } }
/* nəticə başlığı */
.fx-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 22px 0 20px; }
.fx-n { flex: none; margin: 0; font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--text-2); }
.fx-n b { font-weight: 600; color: var(--text); }
.fx-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.fx-act[hidden], .fx-act:empty { display: none; }
.achip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px 0 12px; border-radius: var(--r-full); background: var(--surface-2); font-size: 13.5px; font-weight: 500; }
.achip button { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--text-2); }
.achip button:hover { background: var(--surface-3); color: var(--text); }
.achip .i { width: 13px; height: 13px; }
.fx-clear { height: 32px; padding: 0 6px; font-size: 13.5px; font-weight: 600; color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.fx-end { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.fx-sort { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; margin-right: -12px; border-radius: var(--r-full); font-size: 14px; white-space: nowrap; transition: background .15s; }
.fx-end .fx-sort { margin-right: 0; }
.fx-sort:hover { background: var(--surface-2); }
.fx-sort b { font-weight: 600; }
.fx-sort__k { color: var(--text-2); }
.fx-sort > .i { width: 15px; height: 15px; color: var(--text-2); transition: transform .2s var(--ease); }
.fx-sort[aria-expanded='true'] > .i { transform: rotateX(180deg); }
@media (max-width: 1023px) { .fx-head { padding: 18px 0; } .fx-act { order: 3; flex-basis: 100%; } }
/* sort sonuncudursa mətn şəbəkənin sağ kənarı ilə düz düşsün (optik düzləndirmə) */
.fx-end > .fx-sort:last-child { margin-right: -12px; }
@media (max-width: 559px) { .fx-sort__k { display: none; } .fx-sort, .fx-end > .fx-sort:last-child { margin-right: -10px; padding: 0 10px; } }
/* çip popover-i (EA.pop) / mobil sheet içi */
.fpop { padding: 6px; }
.fpop h4 { font-size: 15px; font-weight: 600; margin: 4px 2px 12px; }
.fpop__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 14px; padding-top: 4px; }
.fpop__foot .btn--ghost { text-decoration: underline; text-underline-offset: 3px; padding: 0 6px; }
.fpop__list { max-height: 300px; overflow-y: auto; margin-inline: -4px; }
.fpop__row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 8px; border-radius: 10px; font-size: 15px; text-align: left; }
.fpop__row:hover { background: var(--surface-2); }
.fpop__row.is-on { background: color-mix(in srgb, var(--brand) 15%, transparent); color: var(--brand-text); }
.fpop__row small { margin-left: auto; color: var(--text-3); font-size: 13px; }
/* panel sətirlərində sayı (.fopt) — 0 olan sətir sönük / seçilmir */
.fopt small { flex: none; margin-left: auto; padding-left: 8px; font-size: 13px; font-weight: 400; color: var(--text-3); }
.fopt.is-on small { color: inherit; opacity: .75; }
.fopt.is-zero b { color: var(--text-3); }
.fopt:disabled { cursor: default; }
.fopt:disabled:hover { background: none; }
.fopt:disabled .fopt__ic, .fopt:disabled .avatar { opacity: .45; }
/* telefonda filtr alt pərdəsi (EA.modal cls 'fxsheet'): düymələr altda yapışqan, əsas düymə geniş */
.fxsheet .modal__body { padding-top: 4px; }
.fxsheet .fpop { padding: 0; }
.fxsheet .fpop__foot { position: sticky; bottom: 0; margin: 12px -4px 0; padding: 12px 4px 4px; background: var(--surface); }
.fxsheet .fpop__foot .btn--primary { flex: 1; max-width: 260px; height: 44px; }

/* ── Tab bar (mobil) ───────────────────────────────────── */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; height: calc(var(--tab-h) + var(--safe-b)); padding-bottom: var(--safe-b); display: grid; grid-template-columns: repeat(5, 1fr); background: var(--bg); box-shadow: 0 -1px 0 rgba(16, 24, 40, .04), 0 -4px 16px rgba(16, 24, 40, .06); view-transition-name: tabbar; }
@media (min-width: 1024px) { .tabbar { display: none; } }
.tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; font-weight: 500; color: var(--text-2); -webkit-tap-highlight-color: transparent; }
.tab .i { width: 24px; height: 24px; }
.tab.is-active { color: var(--brand); }
.tab.is-active .i { stroke-width: 2; }
.tab .dot { position: absolute; top: 7px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--bg); }
/* mərkəz — dairəvi "Yeni elan" düyməsi (web BottomTabs ilə eyni): 48px, bar-dan yuxarı qalxır.
   margin-top: -24px → axında ikon qədər (24px) yer tutur, ona görə etiket qonşu etiketlərlə eyni sətirdədir,
   dairənin altı isə etiketdən gap (4px) qədər yuxarıda bitir */
.tab--post .tab__plus { width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(to bottom, color-mix(in srgb, var(--brand) 78%, #fff), var(--brand)); color: var(--on-brand); box-shadow: 0 4px 6px -1px rgba(16, 24, 40, .12), 0 2px 4px -2px rgba(16, 24, 40, .1); transition: transform .2s var(--ease); }
.tab--post .tab__plus .i { width: 22px; height: 22px; stroke-width: 2.2; }
.tab--post:active .tab__plus { transform: scale(.92); }

/* ── Drawer / modal / sheet ────────────────────────────── */
.scrim { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .32); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .25s; } /* arxa fon bulanıq (istifadəçi) */
.scrim.is-open { opacity: 1; }
.drawer { position: fixed; top: 0; bottom: 0; left: 0; z-index: 100; width: min(88vw, 380px); display: flex; flex-direction: column; background: var(--surface); box-shadow: var(--sh-4); transform: translateX(-102%); transition: transform .35s var(--ease-out); }
.drawer--right { left: auto; right: 0; transform: translateX(102%); width: min(94vw, 440px); }
.drawer.is-open { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 14px 20px; min-height: 64px; }
.drawer__body { flex: 1; overflow-y: auto; padding: 12px; overscroll-behavior: contain; }
.drawer__foot { padding: 14px 16px calc(14px + var(--safe-b)); box-shadow: 0 -6px 16px -10px rgba(16, 24, 40, .16); }
.dnav__link { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 10px; font-size: 15.5px; transition: background .12s; }
.dnav__link:hover, .dnav__link.is-active { background: var(--surface-2); }
.dnav__link .i { color: var(--h, var(--text-2)); }
.dnav__link .badge { margin-left: auto; }
.dnav__title { padding: 18px 12px 6px; font-size: 13px; font-weight: 600; color: var(--text-3); }

.modal-root { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 16px; }
.modal-root .scrim { z-index: 0; }
.modal { position: relative; z-index: 1; width: min(100%, var(--mw, 520px)); max-height: min(90vh, 900px); display: flex; flex-direction: column; background: var(--surface); border-radius: 20px; box-shadow: var(--sh-4); overflow: hidden; opacity: 0; transform: translateY(24px); transition: opacity .2s, transform .35s var(--ease-out); }
.modal-root.is-open .modal { opacity: 1; transform: none; }
.modal__head { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 64px; padding: 12px 64px; }
.modal__head h3 { font-size: 16px; font-weight: 600; text-align: center; letter-spacing: -.01em; }
/* × həmişə sağda (istifadəçi qərarı) */
.modal__head .modal__x { position: absolute; right: 14px; top: 50%; margin-top: -18px; }
.modal__body { padding: 20px 24px 24px; overflow-y: auto; overscroll-behavior: contain; }
.modal__foot { display: flex; justify-content: space-between; gap: 10px; padding: 14px 24px calc(14px + var(--safe-b)); background: var(--surface); box-shadow: 0 -6px 16px -10px rgba(16, 24, 40, .16); }
.modal__foot .btn { flex: 1; }
@media (min-width: 640px) { .modal__foot .btn { flex: none; } .modal__foot .btn:only-child { margin-left: auto; } }
.modal__x { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--text); transition: background .15s; flex: none; }
.modal__x:hover { background: var(--surface-2); }
.modal__x .i { width: 18px; height: 18px; }
.modal--full { --mw: 1100px; height: 90vh; }
.sheet-handle { display: none; }
@media (max-width: 639px) {
  .modal-root { place-items: end stretch; padding: 0; }
  .modal { width: 100%; max-height: 94vh; border-radius: 20px 20px 0 0; transform: translateY(100%); transition: transform .4s var(--ease-out), opacity .2s; opacity: 1; }
  .modal-root.is-open .modal { transform: translateY(var(--drag, 0px)); }
  .modal.is-dragging { transition: none; }
  .sheet-handle { display: block; position: absolute; top: 0; left: 0; right: 0; height: 18px; z-index: 2; touch-action: none; }
  .sheet-handle::after { content: ''; position: absolute; top: 7px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--line-strong); }
  .modal__body { padding: 16px 20px 20px; }
  .modal__foot { padding-inline: 20px; }
  .modal--full { height: 94vh; }
}

.toasts { position: fixed; z-index: 300; left: 50%; bottom: calc(var(--tab-h) + var(--safe-b) + 14px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; width: max-content; max-width: calc(100vw - 24px); pointer-events: none; }
@media (min-width: 1024px) { .toasts { left: 24px; transform: none; bottom: 24px; align-items: flex-start; } }
.toast { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: #222; color: #fff; font-size: 14.5px; box-shadow: var(--sh-4); pointer-events: auto; animation: toastIn .35s var(--ease-out); }
html[data-theme='dark'] .toast { background: var(--ink); color: var(--on-ink); }
.toast.is-out { animation: toastOut .25s var(--ease) forwards; }
.toast__ico { display: grid; place-items: center; flex: none; }
.toast__ico .i { width: 18px; height: 18px; }
.toast--ok .toast__ico { color: #6CE39A; }
.toast--err .toast__ico { color: #FF8A80; }
.toast--fav .toast__ico { color: #FF7085; }
html[data-theme='dark'] .toast--ok .toast__ico { color: #16803C; }
html[data-theme='dark'] .toast--err .toast__ico, html[data-theme='dark'] .toast--fav .toast__ico { color: #D92D20; }
.toast__act { margin-left: 6px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ── Tabs / accordion / stepper ────────────────────────── */
.tabs { position: relative; display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs__btn { position: relative; height: 48px; font-weight: 500; font-size: 15px; color: var(--text-2); white-space: nowrap; transition: color .15s; display: inline-flex; align-items: center; gap: 8px; }
.tabs__btn:hover { color: var(--text); }
.tabs__btn.is-on { color: var(--text); font-weight: 600; }
.tabs__btn .badge { height: 20px; padding: 0 7px; font-size: 11.5px; }
.tabs__bar { position: absolute; bottom: -1px; left: 0; height: 2px; background: var(--brand); transition: transform .3s var(--ease), width .3s var(--ease); }
.pills { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.pills::-webkit-scrollbar { display: none; }
.pill { height: 38px; padding: 0 16px; border-radius: var(--r-full); font-weight: 500; font-size: 14px; color: var(--text); background: var(--surface-2); white-space: nowrap; transition: background .15s, color .15s; display: inline-flex; align-items: center; gap: 6px; }
.pill:hover { background: var(--surface-3); }
.pill.is-on { background: color-mix(in srgb, var(--brand) 15%, transparent); color: var(--brand-text); }
.pill .cnt { font-size: 12.5px; opacity: .6; }
.acc { border-radius: 14px; background: var(--surface-2); transition: background .15s; }
.acc + .acc { margin-top: 8px; }
.acc.is-open { background: color-mix(in srgb, var(--surface-2) 60%, var(--surface-3)); }
.acc__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; text-align: left; font-weight: 500; font-size: 16px; }
.acc__q .i { transition: transform .3s var(--ease); color: var(--text-2); }
.acc.is-open .acc__q .i { transform: rotate(45deg); }
.acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.acc__a > div { overflow: hidden; color: var(--text-2); }
.acc.is-open .acc__a { grid-template-rows: 1fr; }
.acc__a > div > div { padding: 0 20px 20px; }
.steps { display: flex; align-items: center; gap: 6px; }
.steps i { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; position: relative; }
.steps i::after { content: ''; position: absolute; inset: 0; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.steps i.done::after { transform: none; }
.progress { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: inherit; background: var(--h, var(--brand)); width: var(--v, 0%); transition: width 1s var(--ease); }
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--text-2); padding-block: 16px; }
.crumbs a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.crumbs a:hover { color: var(--text); text-decoration-color: currentColor; }
.crumbs .i { width: 14px; height: 14px; color: var(--text-3); }
.pager { display: flex; justify-content: center; gap: 4px; margin-top: 40px; }
.pager a, .pager button { min-width: 40px; height: 40px; padding: 0 12px; border-radius: 50%; display: grid; place-items: center; font-weight: 500; color: var(--text); transition: background .15s; }
.pager a:hover, .pager button:hover { background: var(--surface-2); }
.pager .is-on { background: var(--ink); color: var(--on-ink); }

/* empty state */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 48px 16px; }
.empty h3 { font-size: 20px; margin-top: 8px; }
.empty p { color: var(--text-2); max-width: 400px; }
.empty .btn { margin-top: 12px; }

/* stat */
.stat__v { font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat__l { font-size: 14px; color: var(--text-2); margin-top: 4px; }
.delta { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; }
.delta .i { width: 13px; height: 13px; stroke-width: 2.2; }
.delta--up { color: var(--success); }
.delta--down { color: var(--danger); }
.delta--pill { height: 24px; padding: 0 8px; border-radius: var(--r-full); }
.delta--pill.delta--up { background: var(--success-soft); }
.delta--pill.delta--down { background: var(--danger-soft); }

/* ── Üzən elementlər ───────────────────────────────────── */
.fab-ai { position: fixed; right: 16px; bottom: calc(var(--tab-h) + var(--safe-b) + 16px); z-index: 65; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px 0 14px; border-radius: var(--r-full); background: var(--brand); color: var(--on-brand); font-weight: 600; font-size: 14.5px; box-shadow: var(--sh-4); transition: transform .2s var(--ease), box-shadow .2s, background .2s; animation: fadeUp .5s var(--ease) .6s both; }
.fab-ai:hover { transform: translateY(-2px); background: var(--brand-hover); }
.fab-ai .i { width: 20px; height: 20px; }
.fab-ai__label { display: none; }
@media (min-width: 640px) { .fab-ai__label { display: inline; } }
@media (max-width: 639px) { .fab-ai { width: 48px; padding: 0; justify-content: center; } }
@media (min-width: 1024px) { .fab-ai { right: 24px; bottom: 24px; } }
.to-top { position: fixed; right: 16px; bottom: calc(var(--tab-h) + var(--safe-b) + 76px); z-index: 64; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--text); box-shadow: var(--sh-3); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s, transform .2s; }
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
@media (min-width: 1024px) { .to-top { right: 24px; bottom: 84px; } }
.cmp-tray { position: fixed; left: 50%; bottom: calc(var(--tab-h) + var(--safe-b) + 12px); z-index: 66; transform: translate(-50%, 160%); display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 12px; border-radius: 14px; background: var(--deep); color: #fff; box-shadow: var(--sh-4); transition: transform .4s var(--ease-out); max-width: calc(100vw - 24px); }
.cmp-tray.is-on { transform: translate(-50%, 0); }
@media (min-width: 1024px) { .cmp-tray { bottom: 24px; } }
.cmp-tray__thumbs { display: flex; }
.cmp-tray__thumbs img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; border: 2px solid var(--deep); margin-left: -8px; }
.cmp-tray__thumbs img:first-child { margin-left: 0; }
.cmp-tray__txt { font-size: 14px; font-weight: 600; white-space: nowrap; }
.cmp-tray .btn--primary { background: var(--brand); color: var(--on-brand); }
.cookie { position: fixed; left: 12px; right: 12px; bottom: calc(var(--tab-h) + var(--safe-b) + 12px); z-index: 80; padding: 16px; border-radius: 14px; background: var(--surface); box-shadow: var(--sh-4); display: flex; flex-direction: column; gap: 14px; animation: fadeUp .4s var(--ease) 1.5s both; }
.cookie b { font-size: 14.5px; }
.cookie p { font-size: 13.5px; color: var(--text-2); }
.cookie .row .btn { flex: 1; }
@media (min-width: 768px) { .cookie { left: 24px; right: auto; bottom: 24px; max-width: 360px; gap: 10px; } }

/* ── Footer ────────────────────────────────────────────── */
.ftr { margin-top: 40px; background: var(--deep); color: var(--on-deep); --line: var(--deep-line); --line-strong: rgba(255, 255, 255, .2); --text: #fff; --text-2: var(--on-deep-2); --text-3: var(--on-deep-3); --surface: var(--deep-2); --surface-2: var(--deep-2); --surface-3: rgba(255, 255, 255, .1); }
.ftr .logo { color: #fff; }
.ftr .logo__word span { color: var(--on-deep-3); }
.ftr .input { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #fff; }
.ftr .input::placeholder { color: var(--on-deep-3); }
.ftr .input:focus { border-color: #fff; box-shadow: 0 0 0 1px #fff; }
.ftr__top { display: grid; gap: 36px; padding-block: 48px 36px; }
@media (min-width: 1024px) { .ftr__top { grid-template-columns: 1.1fr 2.4fr; gap: 64px; padding-block: 64px 48px; } }
.ftr__about { color: var(--text-2); font-size: 14.5px; max-width: 360px; margin-top: 14px; }
.ftr__news { margin-top: 20px; display: flex; gap: 8px; max-width: 400px; }
.ftr__news .input { height: 46px; }
.ftr__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
@media (min-width: 768px) { .ftr__cols { grid-template-columns: repeat(4, 1fr); } }
.ftr__cols h4 { font-size: 14.5px; font-weight: 600; margin-bottom: 14px; letter-spacing: -.01em; }
.ftr__cols li + li { margin-top: 10px; }
.ftr__cols a { font-size: 14.5px; color: var(--text-2); transition: color .15s; }
.ftr__cols a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.ftr__apps { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.store-btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px 0 12px; border-radius: 10px; background: #222; color: #fff; transition: background .15s; }
html[data-theme='dark'] .store-btn { background: var(--ink); color: var(--on-ink); }
.store-btn:hover { background: #000; }
.ftr .store-btn { background: #fff; color: #161616; }
.ftr .store-btn:hover { background: #EDEDED; }
.store-btn .i { width: 22px; height: 22px; }
.store-btn small { display: block; font-size: 10.5px; opacity: .75; line-height: 1.1; }
.store-btn b { display: block; font-size: 14.5px; line-height: 1.2; font-weight: 600; }
.ftr__bar { display: flex; flex-direction: column; gap: 14px; padding-block: 22px calc(22px + var(--tab-h) * 0); background: var(--taper) top / 100% 1px no-repeat; font-size: 14px; color: var(--text-2); }
@media (min-width: 900px) { .ftr__bar { flex-direction: row; align-items: center; justify-content: space-between; } }
.ftr__social { display: flex; gap: 4px; }
.ftr__social a { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--text); transition: background .15s; }
.ftr__social a:hover { background: rgba(255, 255, 255, .1); }
.ftr__pal { display: inline-flex; gap: 6px; align-items: center; height: 36px; padding: 0 6px; }
.ftr__pal { gap: 8px; height: 36px; }
/* seçilmiş palitra: ağ halqa yox — dairə böyüyür, içində check (sarıda tünd) */
.ftr__pal button { display: grid !important; place-items: center; width: 20px !important; height: 20px !important; padding: 0 !important; border-radius: 50% !important; background: var(--sw) !important; color: var(--swc, #fff); box-shadow: none; transition: width .18s var(--ease), height .18s var(--ease); }
.ftr__pal button .i { width: 13px; height: 13px; stroke-width: 3; opacity: 0; transform: scale(.4); transition: opacity .15s, transform .18s var(--ease); }
.ftr__pal button.is-on { width: 26px !important; height: 26px !important; }
.ftr__pal button.is-on .i { opacity: 1; transform: none; }
.ftr__social .i { width: 18px; height: 18px; }
.ftr__prefs { display: flex; gap: 4px; flex-wrap: wrap; }
.ftr__prefs button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: 8px; color: var(--text); font-size: 14px; font-weight: 600; }
.ftr__prefs button:hover { background: var(--surface-3); }
.ftr__prefs .i { width: 16px; height: 16px; }
.ftr__big { display: none; }
/* mobil: footer-in son sətri tab bar altında qalmasın */
@media (max-width: 1023px) { body:not([data-notab]) .ftr { padding-bottom: calc(var(--tab-h) + var(--safe-b)); } body:not([data-nofooter]) .page { padding-bottom: 24px; } }

/* ── AI köməkçi paneli ─────────────────────────────────── */
.ai-panel { position: fixed; z-index: 125; right: 0; bottom: 0; width: 100%; height: 100%; display: flex; flex-direction: column; background: var(--surface); box-shadow: var(--sh-4); transform: translateY(100%); transition: transform .4s var(--ease-out); overflow: hidden; }
.ai-panel.is-open { transform: none; }
@media (min-width: 640px) { .ai-panel { right: 24px; bottom: 24px; width: 400px; height: min(660px, calc(100vh - 48px)); border-radius: 20px; transform: translateY(16px); opacity: 0; pointer-events: none; transition: transform .3s var(--ease-out), opacity .2s; } .ai-panel.is-open { transform: none; opacity: 1; pointer-events: auto; } }
.ai-panel__head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 18px; }
.ai-panel__head .avatar { --s: 36px; background: var(--brand); color: var(--on-brand); }
.ai-panel__head .avatar .i { width: 18px; height: 18px; }
.ai-panel__head b { display: block; font-size: 15.5px; }
.ai-panel__head small { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.ai-msgs { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 86%; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; animation: msgIn .25s var(--ease-out); }
.msg--bot { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: 4px; }
.msg--me { align-self: flex-end; background: var(--brand); color: var(--on-brand); border-bottom-right-radius: 4px; }
.msg--wide { max-width: 100%; width: 100%; }
.typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); animation: typing 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
.ai-sugs { display: flex; gap: 8px; overflow-x: auto; padding: 0 18px 10px; scrollbar-width: none; }
.ai-sugs::-webkit-scrollbar { display: none; }
.ai-input { display: flex; gap: 8px; padding: 12px 14px calc(12px + var(--safe-b)); box-shadow: 0 -6px 16px -10px rgba(16, 24, 40, .16); }
.ai-input .input { border-radius: var(--r-full); height: 46px; }
.ai-input .btn { border-radius: 50%; }
.mini-l { display: flex; gap: 12px; padding: 8px; border-radius: 12px; background: var(--surface); margin-top: 8px; box-shadow: var(--edge); transition: box-shadow .15s; }
.mini-l:hover { box-shadow: var(--sh-3); }
.mini-l img { width: 72px; height: 56px; border-radius: 8px; object-fit: cover; flex: none; }
.mini-l b { display: block; font-size: 14.5px; font-weight: 600; }
.mini-l small { display: block; font-size: 13px; color: var(--text-2); }

/* ── Xəritə (Leaflet) ──────────────────────────────────── */
.map { position: relative; isolation: isolate; background: var(--surface-2); }
.leaflet-container { font-family: var(--font) !important; background: var(--surface-2) !important; }
html[data-theme='dark'] .leaflet-container:not(.is-sat) .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.95) contrast(.88) saturate(.7); }
/* xəritə düymələri: qat seçimi (xəritə / peyk), tam ekran, zoom — hamısı ağ yığcam plitələr, kölgəli */
.leaflet-control.mctl { margin: 12px 12px 0 !important; border: 0; background: none; clear: both; }
.leaflet-bottom .leaflet-control.mctl { margin: 0 12px 12px !important; }
.mctl__seg { display: flex; gap: 2px; padding: 4px; border-radius: 12px; background: var(--surface); box-shadow: 0 2px 10px rgba(16, 24, 40, .14); }
.mctl__seg button, .mctl__btn, .mctl__grp button { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; color: var(--text); transition: background .15s, color .15s; }
.mctl__seg button:hover:not(.is-on), .mctl__btn:hover, .mctl__grp button:hover:not(:disabled) { background: var(--surface-2); }
.mctl__seg button.is-on { background: var(--brand); color: var(--on-brand); }
.mctl .i { width: 18px; height: 18px; }
.mctl__btn { width: 44px; height: 44px; border-radius: 12px; background: var(--surface); box-shadow: 0 2px 10px rgba(16, 24, 40, .14); }
.mctl__grp { display: flex; flex-direction: column; gap: 2px; padding: 4px; border-radius: 12px; background: var(--surface); box-shadow: 0 2px 10px rgba(16, 24, 40, .14); }
.mctl__grp button:disabled { color: var(--text-3); cursor: default; }
html[data-theme='dark'] .mctl__seg, html[data-theme='dark'] .mctl__btn, html[data-theme='dark'] .mctl__grp { background: var(--surface-2); box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }
html[data-theme='dark'] .mctl__seg button:hover:not(.is-on), html[data-theme='dark'] .mctl__btn:hover, html[data-theme='dark'] .mctl__grp button:hover:not(:disabled) { background: var(--surface-3); }
@media (max-width: 767px) { .leaflet-control.mctl { margin: 10px 10px 0 !important; } .mctl__btn { width: 40px; height: 40px; } .mctl__seg button, .mctl__grp button { width: 32px; height: 32px; } }
/* tam ekran (Fullscreen API və ya iPhone-da CSS) — xəritə örtükləri ilə birlikdə */
.map-fs:fullscreen { display: flex; flex-direction: column; border-radius: 0 !important; background: var(--bg); }
.map-fs.is-fs { position: fixed !important; inset: 0; z-index: 1300; display: flex; flex-direction: column; width: auto !important; height: auto !important; max-height: none !important; margin: 0 !important; border-radius: 0 !important; background: var(--bg); }
.map-fs:fullscreen > .leaflet-container, .map-fs.is-fs > .leaflet-container { flex: 1; min-height: 0; height: auto !important; border-radius: 0 !important; }
.leaflet-container.map-fs:fullscreen, .leaflet-container.map-fs.is-fs { height: 100% !important; }
html[data-theme='dark'] .leaflet-container { background: #1C2126 !important; }
html[data-theme='dark'] .scrim { background: rgba(0, 0, 0, .62); }
.leaflet-control-attribution { font-size: 10px !important; background: rgba(255, 255, 255, .75) !important; }
.leaflet-control-zoom { border: 0 !important; box-shadow: var(--sh-2) !important; border-radius: 10px !important; overflow: hidden; }
.leaflet-control-zoom a { width: 36px !important; height: 36px !important; line-height: 36px !important; background: var(--surface) !important; color: var(--text) !important; border-color: var(--line) !important; }
.pmark { position: relative; display: inline-flex; align-items: center; padding: 6px 10px; border-radius: var(--r-full); background: var(--surface); color: var(--text); font: 600 13.5px/1 var(--font); white-space: nowrap; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 2px 6px rgba(0, 0, 0, .16); transform: translate(-50%, -50%); transition: transform .15s var(--ease), background .15s, color .15s; }
.pmark:hover, .pmark.is-hot { background: var(--brand); color: var(--on-brand); transform: translate(-50%, -50%) scale(1.08); z-index: 1000; }
.pmark.is-seen { background: var(--surface-3); }
.pmark--cx { background: var(--deep); color: #fff; }
.pcluster { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--deep); color: #fff; font: 600 14px var(--font); box-shadow: 0 0 0 5px color-mix(in srgb, var(--deep) 18%, transparent), 0 2px 8px rgba(0, 0, 0, .2); transform: translate(-50%, -50%); transition: transform .15s; }
.pcluster:hover { transform: translate(-50%, -50%) scale(1.08); }
.leaflet-div-icon { background: none !important; border: 0 !important; }
.leaflet-popup-content-wrapper { border-radius: 14px !important; padding: 0 !important; overflow: hidden; box-shadow: var(--sh-4) !important; background: var(--surface) !important; color: var(--text) !important; }
.leaflet-popup-content { margin: 0 !important; width: 260px !important; font-family: var(--font); }
.leaflet-popup-tip { background: var(--surface) !important; }
.leaflet-popup-close-button { z-index: 5; top: 8px !important; right: 8px !important; width: 28px !important; height: 28px !important; border-radius: 50%; background: rgba(255, 255, 255, .94) !important; color: #222 !important; font: 18px/28px var(--font) !important; }

/* ── Reveal + keyframes ────────────────────────────────── */
.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: var(--d, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.stagger > * { animation: fadeUp .5s var(--ease-out) both; }
.stagger > *:nth-child(2) { animation-delay: .04s; } .stagger > *:nth-child(3) { animation-delay: .08s; } .stagger > *:nth-child(4) { animation-delay: .12s; }
.stagger > *:nth-child(5) { animation-delay: .16s; } .stagger > *:nth-child(6) { animation-delay: .2s; } .stagger > *:nth-child(n+7) { animation-delay: .24s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { transform: translateX(100%); } }
@keyframes ping { 75%, 100% { transform: scale(2.2); opacity: 0; } }
@keyframes heartPop { 0% { transform: scale(1); } 40% { transform: scale(.8); } 70% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px); } }
@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut .18s ease both; }
::view-transition-new(root) { animation: vtIn .3s var(--ease-out) both; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ── Kompleks / agentlik kartı ─────────────────────────── */
.cxcard { position: relative; display: flex; flex-direction: column; min-width: 0; }
.cxcard__media { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: var(--surface-2); }
.cxcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
@media (hover: hover) { .cxcard:hover .cxcard__media img { transform: scale(1.03); } }
.cxcard__st { position: absolute; left: 12px; top: 12px; z-index: 1; }
.cxcard__mg { display: none; }
.fav.cxcard__fav { position: absolute; right: 8px; top: 8px; z-index: 2; }
.cxcard__body { display: flex; flex-direction: column; gap: 2px; padding-top: 12px; }
.cxcard__name { font-size: 16px; font-weight: 600; }
.cxcard__meta { font-size: 15px; color: var(--text-2); }
.cxcard__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-weight: 600; font-size: 15.5px; margin-top: 2px; }
.cxcard__price small { font-weight: 400; font-size: 14px; color: var(--text-2); }
.cxcard__prog { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); margin-top: 8px; }
.cxcard__prog .progress { flex: 1; height: 4px; }
.agcard { display: flex; flex-direction: column; overflow: hidden; }
.agcard__cover { height: 96px; overflow: hidden; background: var(--surface-2); }
.agcard__cover img { width: 100%; height: 100%; object-fit: cover; }
.agcard__body { padding: 0 20px 20px; margin-top: -28px; position: relative; }
.agcard__body .avatar { box-shadow: 0 0 0 4px var(--surface); }
.agcard__name { font-size: 16px; font-weight: 600; }
.agcard__meta { display: flex; align-items: center; gap: 6px; font-size: 14px; margin-top: 2px; }
.agcard__stats { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; padding-top: 16px; background: var(--taper) top / 100% 1px no-repeat; font-size: 13px; color: var(--text-2); }
.agcard__stats b { display: block; font-size: 15.5px; color: var(--text); font-weight: 600; }
.v-ok { display: inline-grid; color: var(--verify); }
.v-ok .i { width: 17px; height: 17px; }

/* ── Drawer kartı, bildiriş, balans ────────────────────── */
.dcard { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 14px; background: var(--surface-2); margin-bottom: 8px; }
.dcard b { display: block; font-size: 15.5px; font-weight: 600; }
.dcard small { display: block; color: var(--text-2); font-size: 13.5px; }
.dcard--guest { flex-direction: column; align-items: stretch; gap: 4px; }
.dcard--guest .btn { margin-top: 10px; }
.nlist { display: flex; flex-direction: column; }
.nitem { position: relative; display: flex; gap: 14px; padding: 14px 12px; border-radius: 12px; transition: background .12s; }
.nitem:hover { background: var(--surface-2); }
.nitem b { display: block; font-size: 15px; font-weight: 600; }
.nitem span > span { display: block; font-size: 14px; color: var(--text-2); margin-top: 2px; }
.nitem small { display: block; font-size: 13px; color: var(--text-3); margin-top: 4px; }
.nitem.is-new::after { content: ''; position: absolute; right: 14px; top: 20px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.nitem__ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--h-s, var(--surface-2)); color: var(--h, var(--text)); }
.nitem__ico .i { width: 19px; height: 19px; }
.nitem__ico--green { color: var(--success); background: var(--success-soft); }
.nitem__ico--red { color: var(--danger); background: var(--danger-soft); }
.ubal { display: flex; align-items: center; gap: 10px; margin: 2px 4px 4px; padding: 12px; border-radius: 10px; background: var(--surface-2); font-size: 14.5px; }
.ubal span:first-child { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); }
.ubal .i { width: 17px; height: 17px; }
.ubal b { margin-left: auto; }
.ubal .badge { background: var(--brand); color: var(--on-brand); height: 22px; border-radius: 6px; }

/* ── Auth modal ────────────────────────────────────────── */
.auth-modal .modal__body { padding: 0; }
.auth { display: grid; min-height: 560px; }
@media (min-width: 820px) { .auth { grid-template-columns: 1fr 1fr; } }
.auth__art { display: none; position: relative; overflow: hidden; color: #fff; background: #222 center / cover; }
@media (min-width: 820px) { .auth__art { display: flex; flex-direction: column; justify-content: flex-end; padding: 36px; } }
.auth__art::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .05) 30%, rgba(0, 0, 0, .65)); }
.auth__art > * { position: relative; }
.auth__glow, .auth__cards { display: none; }
.auth__brand { position: absolute !important; top: 28px; left: 32px; display: flex; align-items: center; gap: 6px; font-size: 19px; }
.auth__brand svg { width: 30px; height: 30px; }
.auth__art h3 { font-size: 26px; max-width: 340px; letter-spacing: -.025em; line-height: 1.2; }
.auth__perks { display: grid; gap: 8px; font-size: 14.5px; margin-top: 18px; opacity: .92; }
.auth__perks li { display: flex; gap: 10px; align-items: center; }
.auth__perks .i { width: 18px; height: 18px; }
.auth__form { position: relative; padding: 28px 24px 24px; }
@media (min-width: 640px) { .auth__form { padding: 48px 44px 32px; } }
.auth__x { position: absolute; right: 16px; top: 16px; }
@media (max-width: 639px) { .auth__x { display: none; } }
.auth__step { display: none; }
.auth__step.is-on { display: block; animation: fadeUp .35s var(--ease-out); }
.auth__step h2 { font-size: 26px; letter-spacing: -.025em; }
.auth__step > p { margin-top: 8px; }
.phone-in { display: flex; gap: 8px; }
.phone-in__cc { display: inline-flex; align-items: center; gap: 8px; flex: none; align-self: stretch; height: auto; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-strong); font-weight: 500; white-space: nowrap; }
.phone-in .input { font-weight: 500; letter-spacing: .02em; }
/* operator prefiksi — kod sahəsi ilə eyni hündürlükdə (sıra hündürlüyünə uzanır) */
.phone-src { display: none !important; }
/* bir neçə nömrə — "Nömrəni göstər" popup-ı */
.phm-modal .modal__body { padding-top: 8px; }
.phm__who { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.phm__who b { display: block; font-size: 15.5px; font-weight: 600; }
.phm__who small { display: block; font-size: 13px; color: var(--text-2); }
.phm { display: grid; gap: 8px; }
.phm__row { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 14px; background: var(--surface-2); }
.phm__ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: color-mix(in srgb, var(--brand) 15%, transparent); color: var(--brand-text); }
.phm__ic .i { width: 18px; height: 18px; }
.phm__t { flex: 1; min-width: 0; }
.phm__t b { display: block; font-size: 16.5px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; } /* nömrə 390-da iki sətrə bölünməsin */
.phm__t small { display: block; font-size: 12.5px; color: var(--text-2); }
.phm__cp { flex: none; width: 36px; height: 36px; }
.phm__cp .i { width: 17px; height: 17px; }
.phm__row .btn { flex: none; }
.phm__note { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--text-2); }
.phm__note .i { flex: none; width: 16px; height: 16px; }
/* istifadəçi: "+994 yazmağa ehtiyac yoxdur, 050, 051 belə yaz, bayraq qoyma" */
.has-op > .phone-in__cc, .has-op > .cphone__cc { display: none; }
.phone-in > .phone-op, .cphone > .phone-op { flex: none; width: 82px; height: auto; min-height: 0; align-self: stretch; padding: 0 26px 0 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.phone-op .csel__chev { right: 10px; }
/* 7 rəqəm ("555 12 34") həmişə tam görünsün: nömrə sahəsinin minimum eni rəqəmlərə + × düyməsinə görə (istifadəçi istəyi) */
.phone-in > .input:not(.phone-src), .cphone > .input:not(.phone-src), .phone-in > .inx, .cphone > .inx { flex: 1; min-width: calc(9ch + 58px); }
.auth__or { display: flex; align-items: center; gap: 14px; margin: 22px 0 16px; color: var(--text-3); font-size: 13px; }
.auth__or::before { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong)); }
.auth__or::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); }
.auth__legal { margin-top: 20px; font-size: 13px; color: var(--text-3); }
.auth__legal .link { font-weight: 500; color: var(--text-2); }
.auth__ok .art { width: 140px; margin: 0 auto 4px; }
.otp { display: flex; gap: 10px; margin-top: 24px; }
.otp input { width: 56px; height: 64px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); text-align: center; font-size: 24px; font-weight: 600; outline: none; transition: border-color .15s, box-shadow .15s; }
.otp input:focus { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.otp input.is-filled { border-color: var(--text); }
.otp.is-shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.flag-az { width: 20px; height: 14px; border-radius: 3px; background: linear-gradient(#00B5E2 0 33.3%, #EF3340 33.3% 66.6%, #509E2F 66.6%); flex: none; }

/* ── Paylaş / şikayət ──────────────────────────────────── */
.share-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.share-it { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; background: var(--surface-2); font-size: 15px; font-weight: 500; transition: background .15s; }
.share-it:hover { background: var(--surface-3); }
.share-it span { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: #fff; flex: none; }
.share-it .i { width: 18px; height: 18px; }
.share-link { display: flex; gap: 8px; margin-top: 16px; }
.share-link .input { height: 46px; font-size: 14px; background: var(--surface-2); border-color: transparent; }
.share-qr { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 14px; border-radius: 12px; background: var(--surface-2); }
.share-qr > div:first-child { flex: none; }
.rep-opt { padding: 12px; border-radius: 10px; width: 100%; }
.rep-opt:hover { background: var(--surface-2); }

/* ── Empty state illüstrasiyaları (art.js) ─────────────── */
.art { width: 168px; height: auto; overflow: visible; }
.art .a-bg { fill: var(--surface-2); }
.art .a-sh { fill: var(--text); opacity: .06; }
.art .a-sf { fill: var(--surface); }
.art .a-glass { fill: var(--surface); fill-opacity: .85; }
.art .a-o { stroke: var(--text); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.art .a-nf { fill: none; }
.art .a-br { fill: var(--accent); }
.art .a-bs { fill: var(--primary-soft-2); }
.art .a-mt { fill: var(--text-3); opacity: .3; }
.art .a-ink { fill: var(--text); }
.art .a-inv { fill: var(--surface); }
.art .a-inv2, .art .a-wt { fill: #fff; }
.art .a-vl, .art .a-vlc { fill: var(--violet-500); }
.art .a-vlt { fill: var(--violet-500); font-family: var(--font); }
.art .a-gd { fill: var(--gold-400); }
.art .a-gdt { fill: #6B4300; font-family: var(--font); }
.art .a-tl { fill: var(--teal-400); }
.art .a-tls { fill: var(--teal-soft); }
.art .a-tlx { fill: var(--teal-400); opacity: .5; }
.art .a-okc { fill: var(--success); }
.art .a-sbr { stroke: var(--accent); }
.art .a-swt { stroke: #fff; }
.art .a-sgd { stroke: var(--gold-400); }
.art .a-sinv { stroke: var(--surface); }
.art text { font-family: var(--font); }
.art .a-fl { animation: float 4.6s ease-in-out infinite; }
.art .a-fl2 { animation: float 5.8s ease-in-out -2.4s infinite; }
.art .a-tw { transform-box: fill-box; transform-origin: center; animation: twinkle 2.8s ease-in-out infinite; }
.art .a-tw:nth-of-type(2n) { animation-delay: -1.4s; }
.art .a-wig { transform-box: fill-box; transform-origin: 50% 0; animation: wiggle 3.2s ease-in-out infinite; }
.art .a-dt { animation: typing 1.2s infinite; }
.art .a-d2 { animation-delay: .15s; } .art .a-d3 { animation-delay: .3s; }
.art .a-zz { animation: zz 3s ease-in-out infinite; }
.art .a-z2 { animation-delay: -1s; } .art .a-z3 { animation-delay: -2s; }
.art .a-draw { stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw .7s .35s var(--ease) forwards; }
.art .a-pop { transform-box: fill-box; transform-origin: center; animation: confetti .9s var(--ease-spring) .2s both; }
.art .a-p2 { animation-delay: .35s; } .art .a-p3 { animation-delay: .5s; }
@keyframes twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.5); opacity: .45; } }
@keyframes wiggle { 0%, 55%, 100% { transform: rotate(0); } 62% { transform: rotate(9deg); } 70% { transform: rotate(-7deg); } 78% { transform: rotate(4deg); } 86% { transform: rotate(-2deg); } }
@keyframes zz { 0% { opacity: 0; transform: translate(0, 6px); } 30%, 70% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -8px); } }
@keyframes confetti { from { transform: scale(0) rotate(-120deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Qrafiklər (charts.js) ─────────────────────────────── */
.chart-wrap { position: relative; }
.chart { display: block; overflow: visible; touch-action: pan-y; }
.chart__grid { stroke: var(--line); stroke-width: 1; }
.chart__tick { fill: var(--text-3); font: 400 11.5px var(--font); }
.chart__cross { stroke: var(--text-3); stroke-width: 1; opacity: 0; transition: opacity .12s; }
.chart__dot { opacity: 0; transition: opacity .12s; }
.chart__area { animation: fadeIn 1s var(--ease) both; }
.chart__tip { position: absolute; z-index: 2; pointer-events: none; padding: 8px 12px; border-radius: 10px; background: var(--surface); color: var(--text); font-size: 13px; box-shadow: 0 0 0 1px rgba(16, 24, 40, .04), var(--sh-3); opacity: 0; transition: opacity .12s; white-space: nowrap; }
.chart__tip.is-on { opacity: 1; }
.chart__tip > b { display: block; margin-bottom: 4px; color: var(--text-2); font-weight: 500; }
.chart__tip span { display: flex; align-items: center; gap: 6px; }
.chart__tip i { width: 8px; height: 8px; border-radius: 50%; }
.bars { display: flex; align-items: flex-end; gap: 8px; height: calc(var(--h) + 44px); }
.bars__c { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
.bars__c i { display: block; width: 100%; max-width: 40px; height: 0; border-radius: 6px 6px 2px 2px; background: var(--brand-soft-2); transition: height 1s var(--ease-out), background .15s; }
.bars.is-in .bars__c i { height: calc(var(--h) * var(--v)); }
.bars__c:hover i { background: color-mix(in srgb, var(--brand) 55%, var(--surface)); }
.bars__c.is-hl i { background: var(--brand); }
.bars__v { font-size: 12px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.bars__l { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.spark { display: block; overflow: visible; }
.spark__l { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.2s var(--ease) .2s forwards; }
.donut { position: relative; }
.donut__c { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }

/* ── Kiçik ümumi bloklar ───────────────────────────────── */
.ico-box { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--surface-2); color: var(--text); }
.ico-box--brand { background: var(--brand-soft); color: var(--brand-text); }
.ico-box--teal { background: var(--c-teal-s); color: var(--c-teal); }
.ico-box--violet { background: var(--c-violet-s); color: var(--c-violet); }
.ico-box--gold { background: var(--c-gold-s); color: var(--c-gold); }
.ico-box--green { background: var(--c-green-s); color: var(--c-green); }
.ico-box[class*='hue-'] { background: var(--h-s); color: var(--h); }
.page-hero { padding-block: 32px 8px; }
@media (min-width: 1024px) { .page-hero { padding-block: 48px 12px; } }
.page-hero h1 { font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -.03em; }
.page-hero p { color: var(--text-2); margin-top: 10px; max-width: 640px; font-size: 16.5px; }
.mesh { display: none; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 12px 16px; font-size: 15px; }
.kv dt { color: var(--text-2); }
.kv dd { font-weight: 500; text-align: right; }
.list-check li { display: flex; gap: 12px; align-items: flex-start; padding: 6px 0; }
.list-check .i { width: 18px; height: 18px; color: var(--h, var(--c-green)); margin-top: 2px; }
.notice { display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--surface-2); color: var(--text); font-size: 14.5px; }
.notice .i { flex: none; color: var(--text-2); }
.notice--info { background: var(--c-blue-s); } .notice--info .i { color: var(--c-blue); }
.notice--brand { background: var(--brand-soft); } .notice--brand .i { color: var(--brand-text); }
.notice--warn { background: var(--warning-soft); } .notice--warn .i { color: var(--warning); }
.notice--err { background: var(--danger-soft); } .notice--err .i { color: var(--danger); }
.notice--ok { background: var(--success-soft); } .notice--ok .i { color: var(--success); }
.more-wrap { display: flex; justify-content: center; margin-top: 40px; }
.pdot { width: 18px; height: 18px; border-radius: 50%; background: var(--brand); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transform: translate(-50%, -50%); }
.ppoi { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--h, var(--text)); box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .15); transform: translate(-50%, -50%); }
.ppoi .i { width: 15px; height: 15px; }
.lasso-path { stroke: var(--brand); fill: var(--brand); }
/* çəkmə zamanı açıq xətt — dolğusuz (yalnız buraxandan sonra yüngül çalar) */
.lasso-line { stroke: var(--brand); fill: none !important; }
.is-drawing { cursor: crosshair !important; }
.is-drawing .leaflet-interactive { cursor: crosshair !important; }
/* modal/drawer açıqkən üzən elementlər gizlənir */
body.is-locked :is(.fab-ai, .cmp-tray, .to-top) { opacity: 0; pointer-events: none; }
@media (max-width: 480px) { .cmp-tray__txt { display: none; } }
.cmp-tray:not(.is-on) { visibility: hidden; transition: transform .4s var(--ease-out), visibility 0s .4s; }
.input:disabled, .textarea:disabled, .select-native:disabled { background: var(--surface-2); color: var(--text-3); cursor: not-allowed; border-color: var(--line); }