/* ============================================================
   AIOR THEME — Canonical design system
   ----------------------------------------------------------------
   Single source of truth for design tokens, components and
   utilities used across:
     · aior-home    (Astro · aior.com)
     · aior-community (XenForo · aior.com/community)
     · aior-whmcs   (WHMCS · aior.com/cart, /clientarea, ...)

   Reference: TailwindCSS Plus · light/dark, single accent (Twitter
   blue), 3-tone tonal hierarchy (page → card → input).

   DO NOT FORK. Edit this file; all platforms pick the change up.
   ============================================================ */

/* ==========================================================
   1. FONTS — Play, served from the same /aior-theme/fonts/
   ========================================================== */

@font-face {
  font-family: "Play";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/play-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Play";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/play-400-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Play";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/play-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Play";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/play-700-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* ==========================================================
   2. DESIGN TOKENS — light (default)
   3-tone hierarchy:
     page (--bg) ←  card (--bg-soft) ←  input/inner (--bg-sunken)
   Single accent: Twitter blue. No green. No multi-color gradients.
   ========================================================== */

:root {
  color-scheme: light;

  /* Page → card → input (3 distinct tones) */
  --bg:        #ffffff;     /* page */
  --bg-soft:   #f3f5f9;     /* card */
  --bg-sunken: #e8ecf2;     /* input / inner pop */
  --bg-tinted: var(--bg-soft);

  /* Foreground */
  --fg:        #0a0e1a;     /* primary */
  --fg-soft:   #1a1f2e;
  --fg-muted:  #6b7280;
  --fg-faint:  #9ca3af;
  --fg-on-accent: #ffffff;

  /* Lines */
  --line:        #e5e7eb;
  --line-strong: #d1d5db;
  --hair:        rgba(0,0,0,.06);

  /* Accent — single hue (Twitter blue) */
  --accent:        #1da1f2;
  --accent-deep:   #0d7fc2;
  --accent-soft:   #d8eefd;
  --accent-tint:   rgba(29, 161, 242, .10);
  --accent-ring:   rgba(29, 161, 242, .35);

  /* Status (muted, no aggressive saturation) */
  --warn: #f59e0b;
  --crit: #ef4444;
  --ok:   var(--accent);

  /* Backwards-compat aliases */
  --brand:        var(--accent);
  --brand-deep:   var(--accent-deep);
  --brand-soft:   var(--accent-soft);
  --on-brand:     var(--fg-on-accent);

  /* Typography scale */
  --font-sans: "Play", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Play", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-xs:   11.5px;
  --fs-sm:   12.5px;
  --fs-base: 14px;
  --fs-md:   15px;
  --fs-lg:   16.5px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  30px;
  --fs-4xl:  38px;

  /* Radius */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   18px;
  --r-2xl:  22px;
  --r-pill: 999px;

  /* Shadows (subtle, no harsh drops) */
  --sh-sm: 0 1px 2px rgba(15,23,42,.05);
  --sh-md: 0 4px 12px rgba(15,23,42,.06);
  --sh-lg: 0 12px 28px -4px rgba(15,23,42,.10);
  --sh-xl: 0 24px 48px -12px rgba(15,23,42,.18);

  /* Layout */
  --container: 80rem; /* 1280px — header & body share this max-width */
  --gutter:    16px;
  --gutter-lg: 32px;

  /* Animation */
  --ease:    cubic-bezier(.2, .6, .2, 1);
  --dur-fast: 120ms;
  --dur:      220ms;
  --dur-slow: 360ms;
}

/* ==========================================================
   3. DESIGN TOKENS — dark
   ========================================================== */

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:        #0f1115;
  --bg-soft:   #181b22;
  --bg-sunken: #232730;
  --bg-tinted: var(--bg-soft);

  --fg:        #f7f8fa;
  --fg-soft:   #d4d6da;
  --fg-muted:  #9aa0aa;
  --fg-faint:  #6b7280;

  --line:        #2a2f38;
  --line-strong: #3a3f48;
  --hair:        rgba(255,255,255,.06);

  --accent:        #1da1f2;
  --accent-deep:   #0d7fc2;
  --accent-soft:   rgba(29, 161, 242, .18);
  --accent-tint:   rgba(29, 161, 242, .14);
  --accent-ring:   rgba(29, 161, 242, .50);

  --sh-sm: 0 1px 2px rgba(0,0,0,.4);
  --sh-md: 0 4px 14px rgba(0,0,0,.45);
  --sh-lg: 0 12px 28px -4px rgba(0,0,0,.55);
  --sh-xl: 0 24px 48px -12px rgba(0,0,0,.7);
}

/* ==========================================================
   4. BASE — reset, html/body, links, selection
   ========================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--fg);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
button { font-family: inherit; }
::selection { background: var(--accent); color: var(--fg-on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.mono, code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================
   5. LAYOUT — container, stack, grid, divider
   ========================================================== */

.aior-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 640px)  { .aior-container { padding-inline: 24px; } }
@media (min-width: 1024px) { .aior-container { padding-inline: var(--gutter-lg); } }

.aior-stack    { display: flex; flex-direction: column; gap: 16px; }
.aior-stack-sm { display: flex; flex-direction: column; gap: 8px; }
.aior-stack-lg { display: flex; flex-direction: column; gap: 24px; }

.aior-row     { display: flex; align-items: center; gap: 12px; }
.aior-row-end { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.aior-row-spread { display: flex; align-items: center; gap: 12px; justify-content: space-between; }

.aior-grid    { display: grid; gap: 20px; }
.aior-grid-2  { grid-template-columns: repeat(1, 1fr); }
.aior-grid-3  { grid-template-columns: repeat(1, 1fr); }
.aior-grid-4  { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px) {
  .aior-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .aior-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .aior-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .aior-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .aior-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.aior-divider { height: 1px; background: var(--line); border: 0; margin: 16px 0; }

/* ==========================================================
   6. TYPOGRAPHY — eyebrow, title, body, lede
   ========================================================== */

.aior-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-tint);
  padding: 4px 10px;
  border-radius: var(--r-pill);
}
.aior-title-xl { font-size: var(--fs-4xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.1;  margin: 0; color: var(--fg); }
.aior-title-lg { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -.015em; line-height: 1.2; margin: 0; color: var(--fg); }
.aior-title    { font-size: var(--fs-2xl); font-weight: 700; line-height: 1.25; margin: 0; color: var(--fg); }
.aior-title-sm { font-size: var(--fs-xl);  font-weight: 700; line-height: 1.3;  margin: 0; color: var(--fg); }
.aior-lede     { font-size: var(--fs-md);  color: var(--fg-muted); line-height: 1.7; margin: 0; max-width: 64ch; }
.aior-muted    { color: var(--fg-muted); }
.aior-faint    { color: var(--fg-faint); }
.aior-accent   { color: var(--accent); }

/* ==========================================================
   7. CARD / SURFACE
   3-tone hierarchy is enforced via component variants:
     .aior-card        → page bg becomes card bg
     .aior-card-soft   → softer (one tone deeper)
     .aior-card-pop    → pops above page (when used on tinted bg)
   ========================================================== */

.aior-card {
  background: var(--bg-soft);
  border-radius: var(--r-2xl);
  padding: 20px;
  box-shadow: inset 0 0 0 1px var(--hair);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.aior-card-pop {
  background: var(--bg);
  border-radius: var(--r-2xl);
  padding: 16px;
  box-shadow: inset 0 0 0 1px var(--hair), var(--sh-sm);
}
.aior-card-soft {
  background: var(--bg-sunken);
  border-radius: var(--r-xl);
  padding: 14px;
}
.aior-card-hover { cursor: pointer; }
.aior-card-hover:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px var(--accent-ring), var(--sh-lg);
}

/* ==========================================================
   8. BUTTON
   Solid accent (no gradient). Variants: primary, secondary,
   ghost, danger, sizes: sm / md / lg.
   ========================================================== */

.aior-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  font-size: var(--fs-base);
  font-weight: 700;
  border-radius: var(--r-md);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast), color var(--dur-fast),
              box-shadow var(--dur-fast), transform var(--dur-fast);
  user-select: none;
}
.aior-btn:active { transform: translateY(1px); }
.aior-btn-sm { height: 32px; padding: 0 12px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
.aior-btn-lg { height: 48px; padding: 0 22px; font-size: var(--fs-md); border-radius: var(--r-lg); }
.aior-btn-block { width: 100%; }

.aior-btn-primary  { background: var(--accent); color: var(--fg-on-accent); }
.aior-btn-primary:hover { background: var(--accent-deep); color: var(--fg-on-accent); }

.aior-btn-secondary { background: var(--bg-soft); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
.aior-btn-secondary:hover { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-ring); }

.aior-btn-ghost { background: transparent; color: var(--fg-muted); }
.aior-btn-ghost:hover { background: var(--bg-soft); color: var(--fg); }

.aior-btn-danger { background: var(--crit); color: #fff; }
.aior-btn-danger:hover { background: #b91c1c; }

.aior-btn[disabled], .aior-btn[aria-disabled="true"] {
  opacity: .55; cursor: not-allowed; pointer-events: none;
}

/* ==========================================================
   9. CHIP / BADGE / PILL
   ========================================================== */

.aior-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--r-pill);
  background: var(--bg-soft);
  color: var(--fg-muted);
  box-shadow: inset 0 0 0 1px var(--hair);
  transition: color var(--dur-fast), box-shadow var(--dur-fast);
  cursor: pointer;
  white-space: nowrap;
}
.aior-chip:hover { color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-strong); }
.aior-chip.is-active,
.aior-chip[aria-current="true"] {
  background: var(--accent); color: var(--fg-on-accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.aior-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 6px;
  background: var(--accent-tint);
  color: var(--accent);
}
.aior-badge-solid { background: var(--accent); color: var(--fg-on-accent); }
.aior-badge-warn  { background: rgba(245,158,11,.15); color: var(--warn); }
.aior-badge-crit  { background: rgba(239,68,68,.15);  color: var(--crit); }

/* ==========================================================
   10. INPUT / FORM CONTROLS
   3-tone enforced: page < card < INPUT (input is brightest in light).
   In the section .aior-card { ... .aior-input { ... } } pattern:
     - light: card #f3f5f9, input white #ffffff
     - dark:  card #181b22, input #2a2f38 (lighter)
   ========================================================== */

.aior-label {
  display: block;
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--fg-soft);
}

.aior-input,
.aior-select,
.aior-textarea {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  font: inherit;
  font-size: var(--fs-base);
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  outline: none;
  appearance: none;
}
.aior-textarea { height: auto; min-height: 88px; padding: 12px 14px; line-height: 1.6; resize: vertical; }
.aior-input::placeholder, .aior-textarea::placeholder { color: var(--fg-faint); }
.aior-input:hover, .aior-select:hover, .aior-textarea:hover { border-color: var(--line-strong); }
.aior-input:focus, .aior-select:focus, .aior-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* When inside a .aior-card the input pops one level brighter */
.aior-card .aior-input,
.aior-card .aior-select,
.aior-card .aior-textarea {
  background: var(--bg);
}
:root[data-theme="dark"] .aior-card .aior-input,
:root[data-theme="dark"] .aior-card .aior-select,
:root[data-theme="dark"] .aior-card .aior-textarea {
  background: var(--bg-sunken);
}

.aior-checkbox, .aior-radio {
  width: 16px; height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Search input with leading icon */
.aior-search {
  position: relative;
}
.aior-search input { padding-left: 40px; }
.aior-search svg {
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--fg-muted);
  pointer-events: none;
}

/* ==========================================================
   11. ALERT / TOAST
   ========================================================== */

.aior-alert {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--accent-tint);
  color: var(--fg);
  font-size: 13.5px;
  border-left: 3px solid var(--accent);
}
.aior-alert-warn { background: rgba(245,158,11,.10); border-left-color: var(--warn); }
.aior-alert-crit { background: rgba(239,68,68,.10);  border-left-color: var(--crit); }

/* ==========================================================
   12. TABLE
   ========================================================== */

.aior-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  background: var(--bg-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--hair);
}
.aior-table th, .aior-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.aior-table th {
  font-weight: 700;
  color: var(--fg-soft);
  background: var(--bg);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.aior-table tbody tr:last-child td { border-bottom: 0; }
.aior-table tbody tr:hover { background: var(--bg-sunken); }

/* ==========================================================
   13. NAV / TOPBAR (shared base used by all 3 platforms)
   These are minimal shells; topbar markup lives in each
   platform's templates and references these classes.
   ========================================================== */

.aior-topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  box-shadow: 0 1px 0 var(--hair);
}
.aior-topbar-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 12px var(--gutter);
  display: flex; align-items: center; gap: 24px;
}
@media (min-width: 1024px) { .aior-topbar-inner { padding-inline: var(--gutter-lg); } }

.aior-topbar-nav {
  display: none;
  flex: 1;
  justify-content: center;
  gap: 4px;
}
@media (min-width: 900px) { .aior-topbar-nav { display: flex; } }
.aior-topbar-nav a {
  font-size: 13.5px; font-weight: 500;
  color: var(--fg-soft);
  padding: 8px 12px;
  border-radius: var(--r-sm);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.aior-topbar-nav a:hover,
.aior-topbar-nav a.is-active,
.aior-topbar-nav a[aria-current="page"] {
  color: var(--accent);
  background: var(--accent-tint);
}

/* ==========================================================
   14. UTIL — visibility, spacing, text helpers
   ========================================================== */

.aior-hide              { display: none !important; }
.aior-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.aior-text-center { text-align: center; }
.aior-text-right  { text-align: right; }
.aior-truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aior-line-clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.aior-line-clamp-3 {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================
   15. ANIMATION — fade/slide primitives
   ========================================================== */

@keyframes aior-fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes aior-slide-up  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.aior-fade-in  { animation: aior-fade-in  var(--dur) var(--ease) both; }
.aior-slide-up { animation: aior-slide-up var(--dur) var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================
   15.5  STICKY HEADER + LOGO swap + theme-img helpers
   ========================================================== */

/* Mount placeholders: render their children as if they were
   direct children of <body>. Without this, position:sticky on
   .topbar-utility / .topbar-main is bounded by the placeholder
   div's height (~70px) and disengages after scrolling that far.
   `display: contents` removes the wrapper from the box tree, so
   sticky binds to the actual viewport scroll container. */
[data-aior-header],
[data-aior-footer] {
  display: contents;
}

/* Top utility bar AND main nav both sticky everywhere — same behaviour
   on Astro / XF / WHMCS. Backgrounds use color-mix with --bg/--bg-soft
   so each platform's palette drives the tone (we've already aligned
   --bg/--bg-soft to identical hex values across all 3 platforms).
   The 8% transparency gives a subtle frosted-glass feel over content
   that scrolls underneath — restores the design the team had before
   migrating to canonical chrome. */
/* Sticky pair — utility + main scroll together with NO gap.
   CRITICAL: position:sticky elements are constrained by their PARENT's
   height. The JS-mounted [data-aior-header] wrapper around them is only
   as tall as its own contents (~150px), so sticky children would detach
   after scrolling that far. Setting `display: contents` on the wrapper
   removes it from the box model — children become direct children of
   <body> and stick relative to the entire page scroll. */
[data-aior-header] { display: contents; }
[data-aior-footer] { display: contents; }

:root { --topbar-utility-h: 38px; }
.topbar-utility {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--topbar-utility-h) !important;
  min-height: var(--topbar-utility-h) !important;
  max-height: var(--topbar-utility-h) !important;
  background: var(--bg-soft) !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.topbar-utility > div {
  min-height: var(--topbar-utility-h);
  height: var(--topbar-utility-h);
}
.topbar-main {
  position: sticky !important;
  top: var(--topbar-utility-h) !important;
  margin-top: 0 !important;
  z-index: 49 !important;
  background: var(--bg) !important;
  box-shadow: 0 1px 0 var(--line, rgba(0,0,0,.08));
  border-top: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Promo strip — accent-tinted but driven by accent-soft variable */
.promo-strip {
  background: var(--accent-soft, #d8eefd) !important;
  color: var(--fg, #0a0e1a) !important;
}
:root[data-theme="dark"] .promo-strip {
  background: rgba(29, 161, 242, .14) !important;
  color: var(--fg, #f7f8fa) !important;
}

@media (max-width: 640px) {
  /* Mobile: utility bar is compact. The CSS var keeps utility height +
     main bar `top` in sync — no gap when sticky. */
  :root { --topbar-utility-h: 32px; }
  .topbar-utility > div { gap: 0.25rem; }
}

/* Brand logo: only the variant matching the active theme is shown.
   Replaces the legacy .theme-img-light / .theme-img-dark switch. */
.aior-brand-light, .aior-brand-dark { display: none; }
:root:not([data-theme="dark"]) .aior-brand-light { display: block; }
:root[data-theme="dark"] .aior-brand-dark        { display: block; }

/* Generic theme-aware image helper — for footer payment/BTK logos etc. */
.theme-img-light, .theme-img-dark { display: none; }
:root:not([data-theme="dark"]) .theme-img-light { display: block; }
:root[data-theme="dark"] .theme-img-dark        { display: block; }

/* ==========================================================
   16. INSTANT THEME SWITCH — no animated colour transitions
   ----------------------------------------------------------------
   When [data-theme] changes, CSS variables update instantly. We
   used to set `transition-property: ... !important` on `*` to kill
   colour transitions, but on DOM-heavy pages (forum threads with
   1000+ nodes) that universal selector slowed first paint a lot.
   Modern browsers don't animate CSS-variable changes to background
   /color *unless* an element has an explicit transition for those
   properties. Most of our chrome doesn't — so the swap is already
   instant without a global override. Targeted rules below kill
   transitions only on elements where we DO declare them.
   ========================================================== */

.aior-card,
.aior-btn,
.aior-chip,
.aior-input, .aior-select, .aior-textarea,
.topbar-nav-link, .topbar-link, .topbar-icon-btn,
.footer-link, .footer-social, .footer-contact-item, .footer-btk {
  transition-property: transform, opacity, box-shadow, outline-color, scale, rotate, translate;
}

/* ==========================================================
   17. PLATFORM-SPECIFIC OVERRIDES (XenForo forum)
   ----------------------------------------------------------------
   Apply the canonical card aesthetic to XF's native blocks and
   buttons so the forum looks identical to Astro/WHMCS surfaces.
   These selectors only exist on /community/ pages — Astro & WHMCS
   render unaffected.
   ========================================================== */

/* Hide XF's native top/bottom scroll-jump FAB (AIOR uses its own) */
.u-scrollButtons,
.u-navButtons.js-navButtons {
  display: none !important;
}

/* XF blocks → AIOR card surfaces */
.block,
.block-container {
  background: var(--bg-soft) !important;
  border: 0 !important;
  border-radius: var(--r-2xl) !important;
  box-shadow: inset 0 0 0 1px var(--hair) !important;
  overflow: hidden;
}
.block + .block,
.block-container + .block-container { margin-top: 16px; }

.block-header,
.block-tabHeader,
.block-minorHeader,
.block-filterBar {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hair) !important;
  color: var(--fg) !important;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 14px 18px !important;
}
.block-header h2,
.block-header h3,
.block-tabHeader h2,
.block-minorHeader h2 { color: var(--fg) !important; font-weight: 700 !important; }

.block-body {
  background: var(--bg-soft) !important;
  border: 0 !important;
  padding: 14px 18px !important;
}
.block-body + .block-body,
.block-row + .block-row {
  border-top: 1px solid var(--hair) !important;
}
.block-row {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hair) !important;
}
.block-row:hover { background: var(--bg-sunken) !important; }
.block-row:last-child { border-bottom: 0 !important; }
.block-footer {
  background: var(--bg) !important;
  border: 0 !important;
  border-top: 1px solid var(--hair) !important;
  padding: 12px 18px !important;
}

/* XF buttons → AIOR button language */
.button,
.menu-linkRow {
  background: var(--bg-sunken) !important;
  color: var(--fg) !important;
  border: 0 !important;
  border-radius: var(--r-md) !important;
  box-shadow: inset 0 0 0 1px var(--line) !important;
}
.button:hover,
.menu-linkRow:hover {
  background: var(--bg) !important;
  color: var(--accent) !important;
  box-shadow: inset 0 0 0 1px var(--accent-ring) !important;
}
.button--cta,
.button.button--cta {
  background: var(--accent) !important;
  color: var(--fg-on-accent) !important;
  box-shadow: none !important;
}
.button--cta:hover,
.button.button--cta:hover {
  background: var(--accent-deep) !important;
  color: var(--fg-on-accent) !important;
  box-shadow: none !important;
}
.button--link {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--accent) !important;
}

/* Inputs / textarea — keep 3-tone hierarchy (input one tone brighter than card) */
.input, .textCtrl, textarea, select {
  background: var(--bg) !important;
  color: var(--fg) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
}
.input:focus, .textCtrl:focus, textarea:focus, select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-ring) !important;
  outline: none !important;
}
:root[data-theme="dark"] .input,
:root[data-theme="dark"] .textCtrl,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
  background: var(--bg-sunken) !important;
}

/* Forum thread/message cards (message structure) */
.message,
.message-cell,
.message-inner {
  background: var(--bg-soft) !important;
  border: 0 !important;
}
.message-cell--user,
.message-userDetails {
  background: var(--bg) !important;
  border-right: 1px solid var(--hair) !important;
}

/* Top sticky/header bars inside forum (filter bars, sub-headers) */
.p-title,
.p-description {
  color: var(--fg) !important;
}

/* Sidebar widget consistency */
.p-body-sidebar > .block,
.p-body-sidebar > .block + .block { margin-bottom: 16px; }

/* ==========================================================
   17. SCROLLBAR — fully hidden across the site.
   Page still scrolls via wheel/trackpad/keyboard; the bar itself
   is invisible. Inner overflow regions (modal lists, code blocks)
   keep their scrollbars by overriding `scrollbar-width: thin`.
   ========================================================== */

html, body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
* {
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
}
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ==========================================================
   17.4  FLOATING ACTION BUTTONS — WhatsApp + Scroll-to-top
   ----------------------------------------------------------------
   Cross-platform: Astro, WHMCS, XenForo all render these via
   inline markup. Rules here are canonical so they apply identically
   regardless of which host CSS bundle is loaded.
   ========================================================== */

/* WhatsApp FAB — bottom-left, accent disc with pulse aura */
.wa-fab {
  position: fixed !important;
  left: clamp(0.75rem, 2vw, 1.25rem) !important;
  bottom: clamp(0.75rem, 2vw, 1.25rem) !important;
  z-index: 9999 !important;            /* above XF chrome / overlays */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 999px !important;
  background: var(--accent, #1da1f2) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  box-shadow: 0 10px 28px -6px color-mix(in srgb, var(--accent, #1da1f2) 65%, transparent),
              0 0 0 1px rgba(255,255,255,.08);
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.wa-fab:hover {
  transform: scale(1.06);
  background: var(--accent-deep, #0d7fc2) !important;
  color: #ffffff !important;
}
.wa-fab:active { transform: scale(0.98); }
.wa-fab svg {
  display: block !important;
  width: 30px !important;
  height: 30px !important;
  fill: #ffffff !important;             /* hard-set so currentColor isn't required */
  pointer-events: none;
}
.wa-fab svg path { fill: #ffffff !important; }

/* Pulse aura — TWO concentric expanding rings behind the button */
.wa-fab::before,
.wa-fab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--accent, #1da1f2);
  z-index: -1;
  animation: aiorWaPulse 2.4s cubic-bezier(.4, 0, .6, 1) infinite;
  pointer-events: none;
}
.wa-fab::after { animation-delay: 1.2s; }
@keyframes aiorWaPulse {
  0%   { transform: scale(1);   opacity: .55; }
  80%  { transform: scale(1.9); opacity: 0;   }
  100% { transform: scale(1.9); opacity: 0;   }
}
@media (prefers-reduced-motion: reduce) {
  .wa-fab::before, .wa-fab::after { animation: none; opacity: 0; }
}

/* Scroll-to-top FAB — bottom-right, hidden until scrolled */
.scroll-top-fab {
  position: fixed !important;
  right: clamp(0.75rem, 2vw, 1.25rem) !important;
  bottom: clamp(0.75rem, 2vw, 1.25rem) !important;
  z-index: 9998 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 999px !important;
  background: var(--fg, #0a0e1a) !important;
  color: var(--bg, #ffffff) !important;
  border: 0 !important;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms, background 180ms ease;
  box-shadow: 0 10px 28px -8px rgba(0,0,0,.35);
}
.scroll-top-fab[data-visible="true"] {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s, background 180ms ease;
}
.scroll-top-fab:hover { background: var(--accent, #1da1f2) !important; color: #fff !important; }
.scroll-top-fab svg { width: 22px !important; height: 22px !important; stroke: currentColor; }

/* ==========================================================
   17.5  CANONICAL FOOTER — centered, structured, light/dark
   ----------------------------------------------------------------
   Drives /aior-theme/footer.html. Centered everything, soft
   dividers between blocks, theme-aware BTK + payment logos.
   ========================================================== */

.footer-aior {
  background: var(--bg-soft);
  color: var(--fg);
  border-top: 1px solid var(--hair);
  text-align: center;
}

.footer-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--hair) 18%, var(--hair) 82%, transparent);
  margin: 0 auto;
  max-width: 80rem;
}

/* Tagline above link grid */
.footer-aior h3.footer-tagline-top,
.footer-aior p.footer-tagline-top,
.footer-aior .footer-tagline-top {
  display: block;
  max-width: 64ch;
  margin: 0 auto 36px;
  padding: 0;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--accent);
}

/* Link grid — 5 columns. Grid is auto-sized to fit columns and
   centered with margin: 0 auto so there's deliberate whitespace
   either side. Each column's content stays LEFT-aligned. */
.footer-aior .footer-link-grid {
  display: grid;
  /* Mobile baseline: 2 columns sized to their content (max-content), grid
     shrink-wraps to the columns' total width, then `margin: 0 auto` centers
     the whole block on the page. Column contents stay left-aligned. */
  grid-template-columns: repeat(2, max-content);
  gap: 28px 36px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
}
@media (min-width: 560px)  { .footer-aior .footer-link-grid { grid-template-columns: repeat(2, minmax(170px, max-content)); gap: 36px 48px; } }
@media (min-width: 900px)  { .footer-aior .footer-link-grid { grid-template-columns: repeat(3, minmax(170px, max-content)); } }
@media (min-width: 1100px) { .footer-aior .footer-link-grid { grid-template-columns: repeat(5, minmax(170px, max-content)); } }

.footer-aior .footer-col {
  text-align: left;
  display: flex;
  flex-direction: column;
}

.footer-aior .footer-col-title {
  font-size: 15px;               /* başlık büyütüldü */
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--fg);              /* daha güçlü kontrast */
  margin: 0 0 14px;
  text-align: left;
  text-transform: none;
}
.footer-aior .footer-col-title-mt { margin-top: 26px; }

.footer-aior .footer-link-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
  align-items: flex-start;       /* LEFT-align in column */
  text-align: left;
}
.footer-aior .footer-link {
  font-size: 13px;
  color: var(--fg-muted);
  text-decoration: none;
  transition: color var(--dur-fast);
  white-space: nowrap;
}
.footer-aior .footer-link:hover { color: var(--accent); }

/* Timeline (2001 → 2009 → 2025 → 2026) */
.footer-timeline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 28px;
}
.footer-timeline-item { text-align: center; }
.footer-timeline-year {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -.01em;
}
.footer-timeline-label {
  font-size: 12.5px;
  color: var(--fg-muted);
  margin-top: 4px;
}
.footer-timeline-sep {
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--line-strong);
}
@media (max-width: 640px) { .footer-timeline-sep { display: none; } }

/* Contact row — equal-height grid (5 cards, all same size) */
.footer-aior .footer-contact-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  justify-content: center;
  align-items: stretch;
  max-width: 76rem;
  margin: 0 auto;
}
@media (min-width: 600px)  { .footer-aior .footer-contact-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .footer-aior .footer-contact-row { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .footer-aior .footer-contact-row { grid-template-columns: repeat(5, 1fr); } }

.footer-aior .footer-contact-item {
  display: flex;
  flex-direction: column;
  align-items: center;          /* center icon + text */
  text-align: center;
  gap: 10px;
  padding: 22px 18px 18px;
  border-radius: var(--r-lg);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--hair);
  color: var(--fg);
  text-decoration: none;
  height: 100%;
  min-height: 150px;
  transition: box-shadow var(--dur-fast), transform var(--dur-fast);
}
.footer-aior .footer-contact-item:hover {
  box-shadow: inset 0 0 0 1px var(--accent-ring);
  transform: translateY(-1px);
}

/* Text block on top, icon pinned at the bottom */
.footer-aior .footer-contact-text {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  line-height: 1.4;
  min-width: 0;
  width: 100%;
  flex: 1;                       /* grow so icon sits at bottom */
}
.footer-aior .footer-contact-label {
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  color: var(--accent); text-transform: uppercase;
  margin-bottom: 6px;
}
.footer-aior .footer-contact-value {
  font-size: 12.5px; color: var(--fg); font-weight: 500;
  word-break: break-word;
}
.footer-aior .footer-contact-value.mono {
  font-size: 13.5px; letter-spacing: -.005em;
}
.footer-aior .footer-contact-hint {
  font-size: 11px; color: var(--fg-muted);
  margin-top: 6px;
}

/* Icon pinned at bottom of the card, larger and accent-tinted chip */
.footer-aior .footer-contact-icon {
  width: 36px; height: 36px;     /* daha büyük */
  flex-shrink: 0;
  color: var(--accent);
  margin-top: auto;              /* push to bottom */
  padding: 8px;
  background: var(--accent-tint);
  border-radius: var(--r-pill);
  box-sizing: content-box;
}

.footer-aior .footer-follow-row {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin-top: 18px;
}
.footer-aior .footer-social-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
}
.footer-aior .footer-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;          /* daha büyük rozet */
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--fg-muted);
  box-shadow: inset 0 0 0 1px var(--hair);
  transition: color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.footer-aior .footer-social:hover {
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-ring);
  transform: translateY(-2px);
}
.footer-aior .footer-social svg {
  width: 22px; height: 22px;          /* daha büyük SVG */
}

/* BTK on top, Payment below — stacked vertically, both centered */
.footer-cred-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

/* BTK card — large, attention-grabbing */
.footer-btk {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 18px 26px;
  border-radius: var(--r-xl);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--hair), 0 1px 0 rgba(0,0,0,.02);
  text-decoration: none;
  color: var(--fg);
  transition: box-shadow var(--dur-fast), transform var(--dur-fast);
}
.footer-btk:hover {
  box-shadow: inset 0 0 0 1px var(--accent-ring);
  transform: translateY(-1px);
}
.footer-btk-img {
  width: 88px; height: 88px;     /* BTK büyütüldü */
  object-fit: contain;
}
/* light/dark BTK logo swap */
.footer-btk-img-dark  { display: none; }
.footer-btk-img-light { display: block; }
:root[data-theme="dark"] .footer-btk-img-light { display: none; }
:root[data-theme="dark"] .footer-btk-img-dark  { display: block; }

.footer-btk-text { text-align: left; line-height: 1.35; }
.footer-btk-label {
  display: block;
  font-size: 13px; font-weight: 800;
  letter-spacing: .16em; color: var(--accent); text-transform: uppercase;
  margin-bottom: 2px;
}
.footer-btk-detail {
  display: block;
  font-size: 13.5px; color: var(--fg);
  font-weight: 500;
}

/* Payment — daha küçük ve sade */
.footer-payment {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: var(--r-md);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.footer-cred-label {
  font-size: 10px; font-weight: 800;
  letter-spacing: .14em; color: var(--fg-muted); text-transform: uppercase;
}
.footer-payment-img {
  height: 20px;                   /* ödeme logoları küçültüldü */
  width: auto;
  max-width: 320px;
  object-fit: contain;
  filter: saturate(1) opacity(.9);
}
.footer-payment-img-dark  { display: none; }
.footer-payment-img-light { display: block; }
:root[data-theme="dark"] .footer-payment-img-light { display: none; }
:root[data-theme="dark"] .footer-payment-img-dark  { display: block; }

/* Bottom copyright row */
.footer-bottom {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 12.5px;
  color: var(--fg-muted);
}
.footer-copyright { margin: 0; }
.footer-copyright strong { color: var(--fg); font-weight: 700; }
.footer-tagline {
  margin: 0;
  font-size: 11.5px;
  color: var(--fg-faint);
  letter-spacing: .04em;
}

/* ==========================================================
   18. SITE CHROME — topbar / promo strip / footer / FABs
   ----------------------------------------------------------------
   Canonical chrome styling shared by Astro / WHMCS / XenForo.
   These rules drive the markup in /aior-theme/header.html and
   /aior-theme/footer.html and stay identical across platforms,
   so the host CSS files (Astro global.css, WHMCS aior.css,
   XF extra.less) can drop their copies over time.
   ========================================================== */

/* .topbar-utility / .topbar-utility > div — DUPLICATE rules removed.
   The canonical sticky pair definition lives near line 614 (v8). Leaving
   only typography helpers below. */
.topbar-utility { font-size: 12px; }
.topbar-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: 500;
  padding: 0.35rem 0.5rem;
  border-radius: 0.375rem;
  transition: color 140ms ease, background 140ms ease;
}
.topbar-link:hover {
  color: var(--fg);
  background: var(--bg);
}
.topbar-icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 28px;
  padding: 0 0.5rem;
  border-radius: 0.375rem;
  color: var(--fg-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease;
}
.topbar-icon-btn:hover {
  color: var(--fg);
  background: var(--bg);
}
.topbar-divider {
  width: 1px;
  height: 16px;
  background: var(--line);
  margin: 0 0.35rem;
}

/* Strip 2 — main header (logo + nav + tek CTA).
   .topbar-main position/sticky/bg DUPLICATE removed — canonical v8
   definition near line 638 owns layout. Keeping link styles below. */
.topbar-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.85rem;
  border-radius: 0.375rem;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fg-soft);
  letter-spacing: -0.005em;
  transition: color 140ms ease, background 140ms ease;
}
.topbar-nav-link:hover,
.topbar-nav-link[aria-current="page"],
.topbar-mega-toggle[aria-expanded="true"] {
  color: var(--accent);
}

/* Mega-menu — "Hizmetlerimiz" tıklamayla açılan tam ekran panel */
/* Mega toggle button — anchor ile birebir görsel paritesi.
   .topbar-nav-link rule'u her şeyi (font, color, padding) ayarlar;
   burada SADECE button-spesifik reset yap; font/color override etme. */
.topbar-mega-toggle {
  position: relative;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.topbar-mega-toggle > svg { display: none; }
.topbar-mega-toggle::after {
  content: "";
  display: inline-block;
  margin-left: 0.3rem;
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 5.5px solid var(--accent-deep);
  transition: transform 220ms ease;
  transform-origin: 50% 35%;
}
.topbar-mega-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

/* Header altında soldan sağa tam genişlik panel */
.topbar-mega-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 60;
  display: none;
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 24px 60px -28px rgba(15, 23, 42, 0.22);
}
.topbar-mega-panel[data-open="true"] {
  display: block;
  animation: megaPanelIn 320ms cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: left center;
}
@keyframes megaPanelIn {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}
.topbar-mega-dialog {
  width: 100%;
  max-width: 96rem;
  margin: 0 auto;
  padding: 1.75rem 1.5rem 2rem;
}
.topbar-mega-intro {
  padding-right: 0.5rem;
}
.topbar-mega-intro-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin-bottom: 0.6rem;
}
.topbar-mega-intro-body {
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg-soft);
  text-align: left;
}
:root[data-theme="dark"] .topbar-mega-panel {
  background: var(--bg);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 24px 60px -28px rgba(0,0,0,0.6);
}
.topbar-mega-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) repeat(3, minmax(160px, 1fr)) minmax(220px, 280px);
  gap: 2rem;
}
.topbar-mega-col {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.topbar-mega-heading {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--fg);
  margin-bottom: 0.35rem;
}
.topbar-mega-link {
  display: inline-flex;
  align-items: center;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fg-soft);
  padding: 0.3rem 0;
  border-radius: 6px;
  transition: color 140ms ease, transform 140ms ease;
}
.topbar-mega-link:hover {
  color: var(--accent-deep);
  transform: translateX(2px);
}
/* Promo card — mega menü sağı */
.topbar-mega-promo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.1rem 1.15rem;
  border-radius: 14px;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--brand) 18%, var(--bg)) 0%,
    color-mix(in srgb, var(--brand) 8%, var(--bg)) 100%);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line));
  text-decoration: none;
  color: var(--fg);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.topbar-mega-promo:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--brand) 40%, transparent);
}
.topbar-mega-promo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.topbar-mega-promo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand) 22%, var(--bg));
  color: var(--brand-deep);
}
.topbar-mega-promo-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: #0f172a;
  color: #ffffff;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.topbar-mega-promo-pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: #ffffff;
  color: var(--fg);
  border: 1px solid var(--line);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.topbar-mega-promo-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 0.15rem;
}
.topbar-mega-promo-body {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--fg-soft);
}
.topbar-mega-promo-cta {
  margin-top: 0.35rem;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: #0f172a;
  color: #ffffff;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
}
/* Karanlık modda promo kartı kontrastı */
:root[data-theme="dark"] .topbar-mega-promo {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--brand) 14%, var(--bg-soft)) 0%,
    color-mix(in srgb, var(--brand) 6%, var(--bg-soft)) 100%);
  border-color: color-mix(in srgb, var(--brand) 35%, rgba(255,255,255,0.08));
}
:root[data-theme="dark"] .topbar-mega-promo-pill {
  background: rgba(255, 255, 255, 0.08);
  color: var(--fg);
  border-color: rgba(255, 255, 255, 0.18);
}
:root[data-theme="dark"] .topbar-mega-promo-tag,
:root[data-theme="dark"] .topbar-mega-promo-cta {
  background: var(--brand);
  color: #062019;
}
:root[data-theme="dark"] .topbar-mega-promo-icon {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}
@media (max-width: 1100px) {
  .topbar-mega-grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
  .topbar-mega-intro { grid-column: 1 / -1; }
  .topbar-mega-promo { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .topbar-mega-dialog { padding: 1.25rem 1rem 1.5rem; }
  .topbar-mega-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .topbar-mega-intro-title { font-size: 18px; }
}

/* Strip 3 — promo banner (mavi, estetik) */
.promo-strip {
  display: block;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--accent) 8%,  var(--bg-soft)) 0%,
      color-mix(in srgb, var(--accent) 16%, var(--bg-soft)) 50%,
      color-mix(in srgb, var(--accent) 8%,  var(--bg-soft)) 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  color: var(--fg);
  text-decoration: none;
  transition: background 220ms ease;
}
.promo-strip:hover {
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--accent) 14%, var(--bg-soft)) 0%,
      color-mix(in srgb, var(--accent) 24%, var(--bg-soft)) 50%,
      color-mix(in srgb, var(--accent) 14%, var(--bg-soft)) 100%);
}
.promo-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  background: var(--accent-deep);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--accent) 50%, transparent);
}
.promo-countdown {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.7rem;
  border-radius: 0.5rem;
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.promo-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--accent-deep);
  transition: transform 180ms ease;
  flex-shrink: 0;
}
.promo-strip:hover .promo-arrow { transform: translateX(3px); }

/* Strip 4 — domain arama (Tailwind Plus tarzı, hero içinde gömülü) */
.hero-domain-band {
  position: relative;
}
.hero-domain-band > div {
  position: relative;
}

.focus-ring:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Big numeric metric — feels engineering */
.metric {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: -0.04em;
}

.footer-aior {
  position: relative;
  background:
    radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 60%),
    radial-gradient(50% 70% at 0% 100%, color-mix(in srgb, var(--accent) 4%, transparent), transparent 60%),
    var(--bg-soft);
}
.footer-aior::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--accent) 35%, transparent) 50%,
    transparent 100%
  );
  pointer-events: none;
}

.footer-col-title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
  position: relative;
  padding-left: 14px;
}
.footer-col-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.footer-link-list {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.footer-link {
  font-size: 14px;
  color: var(--fg-soft);
  position: relative;
  display: inline-block;
  transition: color 140ms ease, transform 140ms ease;
}
.footer-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1px;
  width: 0;
  background: var(--accent);
  transition: width 180ms ease;
}
.footer-link:hover {
  color: var(--fg);
  transform: translateX(2px);
}
.footer-link:hover::after { width: 100%; }

/* Üst link grid: 5 kolon, tam genişlik */
.footer-link-grid {
  display: grid;
  gap: 2.5rem 2rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .footer-link-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .footer-link-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* İletişim bandı: adres, telefon, mobil, mail, KEP — tek satır, eşit kartlar */
.footer-contact-row {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 640px) {
  .footer-contact-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .footer-contact-row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.875rem;
  }
}
.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1rem;
  border-radius: 0.75rem;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--fg-soft);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, color 160ms ease, box-shadow 160ms ease;
  min-width: 0;
  min-height: 68px;
}
.footer-contact-item:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

/* ==========================================================
   19. TAILWIND UTILITY SHIM — for canonical header/footer
   ----------------------------------------------------------------
   header.html and footer.html use Tailwind utility classes for
   their structural layout. Astro pages get these from Tailwind's
   compiler, but XenForo and WHMCS don't have Tailwind. We define
   the minimal subset actually used here so the canonical chrome
   layout renders identically on every platform.
   ========================================================== */

/* Layout containers */
.mx-auto { margin-left: auto; margin-right: auto; }
.ml-auto { margin-left: auto; }
.max-w-7xl { max-width: 80rem; }
.w-10 { width: 2.5rem; }
.h-10 { height: 2.5rem; }
.h-16 { height: 4rem; }

/* Padding / margin */
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-4 { padding-left: 1rem;   padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem;   padding-right: 2rem; }
.py-2 { padding-top: 0.5rem;  padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-6 { padding-top: 1.5rem;  padding-bottom: 1.5rem; }
.py-8 { padding-top: 2rem;    padding-bottom: 2rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.pt-16 { padding-top: 4rem; }
.pb-10 { padding-bottom: 2.5rem; }
.mt-2  { margin-top: 0.5rem; }

/* Display */
.flex          { display: flex; }
.inline-flex   { display: inline-flex; }
.grid          { display: grid; }
.hidden        { display: none; }
.block         { display: block; }

/* Flex */
.flex-1        { flex: 1 1 0%; }
.flex-col      { flex-direction: column; }
.items-center  { align-items: center; }
.justify-center{ justify-content: center; }
.justify-end   { justify-content: flex-end; }

/* Gaps */
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }

/* Grid columns */
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Position */
.sticky { position: sticky; }
.top-0  { top: 0; }
.z-30   { z-index: 30; }

/* Text */
.text-center           { text-align: center; }
.text-sm               { font-size: 0.875rem; }
.text-\[11\.5px\]      { font-size: 11.5px; }
.text-\[12px\]         { font-size: 12px; }
.text-\[13px\]         { font-size: 13px; }
.text-muted            { color: var(--fg-muted); }
.font-medium           { font-weight: 500; }
.font-semibold         { font-weight: 700; }
.leading-snug          { line-height: 1.375; }
.rounded-md            { border-radius: 0.375rem; }

/* sm: 640px+ */
@media (min-width: 640px) {
  .sm\:flex             { display: flex; }
  .sm\:flex-row         { flex-direction: row; }
  .sm\:inline           { display: inline; }
  .sm\:inline-flex      { display: inline-flex; }
  .sm\:block            { display: block; }
  .sm\:hidden           { display: none !important; }
  .sm\:justify-between  { justify-content: space-between; }
  .sm\:gap-4            { gap: 1rem; }
  .sm\:text-left        { text-align: left; }
  .sm\:px-6             { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* lg: 1024px+ */
@media (min-width: 1024px) {
  .lg\:flex             { display: flex; }
  .lg\:hidden           { display: none; }
  .lg\:inline-flex      { display: inline-flex; }
  .lg\:ml-0             { margin-left: 0; }
  .lg\:px-8             { padding-left: 2rem; padding-right: 2rem; }
}

/* ==========================================================
   20. BUTTON SHIM — `.btn`, `.btn-brand` etc. used by canonical
   header.html (e.g. "Teklif al" CTA). Astro defines these in its
   @layer components; we mirror them here so XF/WHMCS render
   identical CTA buttons.
   ========================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.5rem;
  padding: 0 0.95rem;
  border-radius: 0.625rem;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.btn-primary { background: var(--fg); color: var(--bg); }
.btn-primary:hover { background: var(--fg-soft); color: var(--bg); }

/* CTA buttons — Twitter blue accent */
.btn-brand,
.btn-accent {
  background: var(--accent);
  color: #ffffff !important;            /* ensure visible against accent */
}
.btn-brand:hover,
.btn-accent:hover {
  background: var(--accent-deep);
  color: #ffffff !important;
}

.btn-ghost {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg);
}
.btn-ghost:hover {
  border-color: var(--line-strong);
  background: var(--bg-soft);
  color: var(--fg);
}

/* Brand logo (header) — explicit height so it renders the same on XF */
.brand-mark {
  height: 1.625rem;
  width: auto;
  display: block;
}

/* Topbar icon button (theme/lang/cart) */
.topbar-icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 28px;
  padding: 0 0.5rem;
  border-radius: 0.375rem;
  color: var(--fg-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color 140ms ease, background 140ms ease;
}
.topbar-icon-btn:hover {
  color: var(--fg);
  background: var(--bg-soft);
}

/* Topbar plain link (telefon, e-posta, Giriş, Kayıt) */
.topbar-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: 500;
  padding: 0.35rem 0.5rem;
  border-radius: 0.375rem;
  text-decoration: none;
  transition: color 140ms ease, background 140ms ease;
}
.topbar-link:hover {
  color: var(--fg);
  background: var(--bg-soft);
}

/* Topbar nav link (main horizontal menu) */
.topbar-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--fg-soft);
  font-size: 13.5px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 0.375rem;
  text-decoration: none;
  transition: color 140ms ease, background 140ms ease;
}
.topbar-nav-link:hover,
.topbar-nav-link[aria-current="page"] {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* Topbar divider (between icon group and login/register) */
.topbar-divider {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: var(--line);
  margin: 0 6px;
}

/* Focus ring — keyboard accessibility */
.focus-ring:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 0.375rem;
}

/* Mobile menu link (header.html mobile menu items) */
.aior-mobile-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 0.5rem 0.5rem;
  border-radius: 0.375rem;
  color: var(--fg-soft);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease;
}
.aior-mobile-link:hover {
  color: var(--accent);
  background: var(--bg-soft);
}

/* Promo text (campaign banner) */
.promo-text {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  margin: 0;
}