/* ============================================================
   AIOR THEME — Canonical design system
   ----------------------------------------------------------------
   Single source of truth for design tokens, components and
   utilities used across:
     · aior-home    (Astro · aior.com)
     · aiorforum.com (XenForo — repo: aiorcom/aiorforum, separate from aior monorepo)
     · 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) — values mirror
     aior-home/src/styles/global.css so all 3 platforms render identical
     surface tones (Astro homepage is the visual reference). */
  --bg:        #ffffff;     /* card surface */
  --bg-soft:   #f1f4f9;     /* sub-section / sidebar widget header strip */
  --bg-sunken: #e6eaf1;     /* page bg (gözle net görünür gri ton) */
  --bg-tinted: #ecf0f6;     /* hover / between-section */

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

  /* Lines — more prominent (the old #e8eaed was indistinguishable from the card surface) */
  --line:        #dde2eb;
  --line-strong: #c4cad3;
  --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);

  /* Apple-glass 3D kart — frosted, highlight, depth */
  --glass-bg: color-mix(in srgb, var(--bg) 84%, transparent);
  --glass-border: color-mix(in srgb, #ffffff 52%, var(--line));
  --glass-highlight: linear-gradient(145deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,.12) 36%, transparent 58%);
  --glass-shadow:
    0 1px 1px rgba(15,23,42,.03),
    0 10px 32px -12px rgba(15,23,42,.14),
    inset 0 1px 0 rgba(255,255,255,.78);
  --glass-shadow-hover:
    0 2px 4px rgba(15,23,42,.05),
    0 22px 48px -14px rgba(15,23,42,.22),
    inset 0 1px 0 rgba(255,255,255,.88);

  /* 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:        #1c1c1c;
  --bg-soft:   #2a2a2a;
  --bg-sunken: #161616;
  --bg-tinted: var(--bg-soft);

  --fg:        #f7f8f9;
  --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);

  --glass-bg: color-mix(in srgb, var(--bg-soft) 80%, transparent);
  --glass-border: color-mix(in srgb, #ffffff 11%, var(--line));
  --glass-highlight: linear-gradient(145deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 38%, transparent 60%);
  --glass-shadow:
    0 1px 2px rgba(0,0,0,.42),
    0 14px 36px -12px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.08);
  --glass-shadow-hover:
    0 2px 6px rgba(0,0,0,.48),
    0 24px 52px -14px rgba(0,0,0,.72),
    inset 0 1px 0 rgba(255,255,255,.12);
}

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

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  background: var(--bg);
  color: var(--fg);
}
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 — apple-glass 3D (frosted, highlight, depth)
   ========================================================== */

.aior-glass-3d,
.aior-card,
.aior-card-pop {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition:
    box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.aior-glass-3d::before,
.aior-card::before,
.aior-card-pop::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--glass-highlight);
  pointer-events: none;
  z-index: 0;
}
.aior-glass-3d > *,
.aior-card > *,
.aior-card-pop > * {
  position: relative;
  z-index: 1;
}

.aior-card {
  border-radius: var(--r-2xl);
  padding: 20px;
}
.aior-card-pop {
  border-radius: var(--r-2xl);
  padding: 16px;
}
.aior-card-soft {
  background: color-mix(in srgb, var(--bg-sunken) 88%, transparent);
  border-radius: var(--r-xl);
  padding: 14px;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.aior-card-hover,
.aior-glass-3d-hover { cursor: pointer; }
.aior-card-hover:hover,
.aior-glass-3d-hover:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--glass-border));
  box-shadow: var(--glass-shadow-hover);
}
@media (prefers-reduced-motion: reduce) {
  .aior-card-hover:hover,
  .aior-glass-3d-hover:hover { transform: none; }
}

/* ==========================================================
   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 #2a2a2a, 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, #f7f8f9) !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-contact-item, .footer-btk, .footer-etbis, .footer-social-tile {
  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;               /* title enlarged */
  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-xl);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  color: var(--fg);
  text-decoration: none;
  height: 100%;
  min-height: 150px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: box-shadow var(--dur-fast), transform var(--dur-fast), border-color var(--dur-fast);
}
.footer-aior .footer-contact-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--glass-highlight);
  pointer-events: none;
}
.footer-aior .footer-contact-item > * { position: relative; z-index: 1; }
.footer-aior .footer-contact-item:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--glass-border));
  transform: translateY(-4px);
  box-shadow: var(--glass-shadow-hover);
}

/* 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: 20px;
  margin-top: 18px;
  width: 100%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.footer-aior .footer-social-section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}
.footer-aior .footer-social-section-label {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  text-align: center;
}

/* Social / store tiles — pale box grid with label under icon */
.footer-aior .footer-social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 12px;
  width: 100%;
}
.footer-aior .footer-social-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 102px;
  padding: 14px 8px 12px;
  border-radius: var(--r-xl);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  text-decoration: none;
  color: var(--fg);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: box-shadow var(--dur-fast), transform var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.footer-aior .footer-social-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--glass-highlight);
  pointer-events: none;
}
.footer-aior .footer-social-tile > * { position: relative; z-index: 1; }
.footer-aior .footer-social-tile:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--glass-border));
  transform: translateY(-4px);
  box-shadow: var(--glass-shadow-hover);
  color: var(--accent);
}
.footer-aior .footer-social-tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--fg-muted);
  transition: color var(--dur-fast);
}
.footer-aior .footer-social-tile:hover .footer-social-tile-icon {
  color: var(--accent);
}
.footer-aior .footer-social-tile-icon svg {
  width: 24px;
  height: 24px;
}
.footer-aior .footer-social-tile-label {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: var(--fg-muted);
  word-break: break-word;
  hyphens: auto;
}
.footer-aior .footer-social-tile:hover .footer-social-tile-label {
  color: var(--fg);
}
.footer-aior .footer-social-tile--pending {
  opacity: 0.48;
  cursor: not-allowed;
}
.footer-aior .footer-social-tile--pending:hover {
  transform: none;
  box-shadow: inset 0 0 0 1px var(--hair);
  color: var(--fg);
}

.footer-aior .footer-social-all {
  margin: 14px 0 0;
  text-align: center;
}
.footer-aior .footer-social-all-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur-fast), opacity var(--dur-fast);
}
.footer-aior .footer-social-all-link:hover {
  opacity: 0.85;
  text-decoration: underline;
}
.footer-aior .footer-social-tile--pending:hover .footer-social-tile-icon,
.footer-aior .footer-social-tile--pending:hover .footer-social-tile-label {
  color: var(--fg-muted);
}

/* Legacy circle social — kept for WHMCS pages that may still reference it */
.footer-aior .footer-social-group {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 100%;
}
.footer-aior .footer-social-group-label {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.footer-aior .footer-social-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  max-width: min(100%, 920px);
}
.footer-aior .footer-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  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;
}
.footer-aior .footer-social--pending {
  opacity: 0.42;
  cursor: not-allowed;
  box-shadow: inset 0 0 0 1px var(--hair);
}
.footer-aior .footer-social--pending:hover {
  color: var(--fg-muted);
  transform: none;
  box-shadow: inset 0 0 0 1px var(--hair);
}

/* BTK + ETBİS badges on top, payment below — centered stack */
.footer-cred-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.footer-cred-badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  justify-content: center;
  gap: 18px;
  width: 100%;
  max-width: 960px;
}
@media (max-width: 720px) {
  .footer-cred-badges {
    grid-template-columns: 1fr;
  }
}

/* BTK / ETBİS card — equal width, centered */
.footer-btk {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 124px;
  padding: 18px 26px;
  border-radius: var(--r-xl);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  text-decoration: none;
  color: var(--fg);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: box-shadow var(--dur-fast), transform var(--dur-fast), border-color var(--dur-fast);
  box-sizing: border-box;
}
.footer-btk::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--glass-highlight);
  pointer-events: none;
}
.footer-btk > * { position: relative; z-index: 1; }
.footer-btk:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--glass-border));
  transform: translateY(-4px);
  box-shadow: var(--glass-shadow-hover);
}
.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;
}

.footer-etbis-img {
  width: 88px;
  height: auto;
  max-height: 52px;
  object-fit: contain;
  flex-shrink: 0;
}
/* light/dark ETBİS logo swap */
.footer-etbis-img-dark  { display: none; }
.footer-etbis-img-light { display: block; }
:root[data-theme="dark"] .footer-etbis-img-light { display: none; }
:root[data-theme="dark"] .footer-etbis-img-dark  { display: block; }

/* 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-lg);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.footer-payment::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--glass-highlight);
  pointer-events: none;
}
.footer-payment > * { position: relative; z-index: 1; }
.footer-cred-label {
  font-size: 10px; font-weight: 800;
  letter-spacing: .14em; color: var(--fg-muted); text-transform: uppercase;
}
.footer-payment-img {
  height: 20px;                   /* payment logos shrunk */
  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;
}

/* Footer meta nav — Sitemap / Robots / Announcements / KB / Forum.
   OK for SEO: the sitemap.xml link improves crawl discoverability,
   Google "discovered via on-page link" sinyalini görür. */
.footer-meta {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 4px 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed color-mix(in srgb, var(--line) 70%, transparent);
  font-size: 12px;
}
.footer-meta-link {
  color: var(--fg-muted);
  text-decoration: none;
  transition: color 120ms ease;
}
.footer-meta-link:hover { color: var(--accent); text-decoration: underline; }

/* ==========================================================
   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;
}

/* ============================================================ */
/* MENU TOGGLE (hamburger) — explicit CSS                        */
/* WHMCS'de Tailwind utility'leri (h-10 w-10 inline-flex) yoktur,*/
/* default <button> gibi büyük gözüküyordu. Bu kural 3 platformda*/
/* (Astro/WHMCS/XF) guarantees the same appearance.             */
/* ============================================================ */
[data-menu-toggle] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
[data-menu-toggle]:hover {
  background: var(--bg-soft);
  color: var(--fg);
}
[data-menu-toggle]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
[data-menu-toggle] svg {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}
/* Desktop'ta gizle (Tailwind lg:hidden replacement) */
@media (min-width: 1024px) {
  [data-menu-toggle] { display: none !important; }
  .topbar-market-mobile { display: none !important; }
}

/* Mobile header — Market shortcut (always visible beside quote CTA) */
.topbar-market-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  background: rgba(29, 161, 242, 0.08);
  box-shadow: inset 0 0 0 1px rgba(29, 161, 242, 0.22);
  white-space: nowrap;
}
.topbar-market-mobile:hover,
.topbar-market-mobile.is-active,
.topbar-market-mobile[aria-current="page"] {
  color: #fff;
  background: var(--accent);
  box-shadow: none;
}

/* Mobile menü panel — Tailwind utility'siz explicit kural */
[data-mobile-menu] {
  display: none;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: 12px 16px 16px;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
[data-mobile-menu]:not(.hidden) { display: block; }
[data-mobile-menu].hidden { display: none !important; }
@media (min-width: 1024px) {
  [data-mobile-menu] { display: none !important; }
}
[data-mobile-menu] > .grid {
  display: grid;
  gap: 4px;
}
[data-mobile-menu] a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--fg);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 140ms ease, color 140ms ease;
}
[data-mobile-menu] a:hover {
  background: var(--bg);
  color: var(--accent);
}
[data-mobile-menu] .grid-cols-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}
[data-mobile-menu] .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
}

/* === Bell + cart count badges (canonical, shared 3-platform) ===
   Badge sits on top-right of icon button, shakes when count > 0. */
.topbar-icon-btn { position: relative; }
.topbar-bell-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 14px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  box-shadow: 0 0 0 2px var(--bg, #fff);
  pointer-events: none;
}
.topbar-bell-badge[hidden] { display: none !important; }

/* ============================================================ */
/* AUTH STATE TOGGLE — anon vs authenticated visibility            */
/* `[hidden]` HTML attribute can be defeated by Tailwind/utility   */
/* classes (.inline-flex etc.). These rules force precedence with  */
/* attribute-selector specificity + !important.                    */
/*                                                                 */
/* Default (no auth): anon visible, auth hidden.                   */
/* When html[data-aior-auth="1"] is set (by FOUC + aior-theme.js   */
/* based on aior-auth=1 cookie): anon hidden, auth visible.        */
/* ============================================================ */
[data-aior-anon][hidden],
[data-aior-auth-greeting][hidden],
[data-aior-auth-panel][hidden],
[data-aior-auth-logout][hidden] { display: none !important; }

html[data-aior-auth="1"] [data-aior-anon] { display: none !important; }
html[data-aior-auth="1"] [data-aior-auth-greeting],
html[data-aior-auth="1"] [data-aior-auth-panel],
html[data-aior-auth="1"] [data-aior-auth-logout] { display: inline-flex !important; }
html[data-aior-auth="1"] [data-aior-auth-greeting][hidden],
html[data-aior-auth="1"] [data-aior-auth-panel][hidden],
html[data-aior-auth="1"] [data-aior-auth-logout][hidden] { display: inline-flex !important; }

/* ============================================================ */
/* TOPBAR BELL + CART BADGE — force-hide [hidden]                */
/* XF aior_core.less has a `.topbar-icon-btn { display: inline-flex */
/* !important }` rule. That rule eats the HTML [hidden] attribute */
/* → the bell icon was always visible. The dual-attribute        */
/* selector below (specificity 0,0,2,0) + !important beats it.    */
/* ============================================================ */
.topbar-icon-btn[hidden],
.topbar-cart[hidden],
[data-aior-cart][hidden],
[data-aior-cart-count][hidden] { display: none !important; }

/* ============================================================ */
/* XENFORO-ONLY DARK MODE (scope: html#XF — XF html'inde id="XF") */
/* Hard-coded canonical AIOR dark palette colors (not var()):    */
/*   #1c1c1c bg, #2a2a2a card, #161616 sunken                    */
/*   #f7f8f9 text (link white), #9aa0aa muted, #2a2f38 line      */
/*   #1da1f2 accent                                              */
/* Also overrides XF variables (--xf-pageBg, --xf-subNavBg)      */
/* Astro and WHMCS are unaffected by these rules (no id="XF").    */
/* ============================================================ */

/* XF variable overrides — overrides XF style 10 light mode values */
html#XF[data-theme="dark"] {
  --xf-pageBg--h: 220; --xf-pageBg--s: 12%; --xf-pageBg--l: 8%; --xf-pageBg--a: 1;
  --xf-subNavBg--h: 220; --xf-subNavBg--s: 12%; --xf-subNavBg--l: 8%; --xf-subNavBg--a: 1;
  --xf-bodyBg--h: 220; --xf-bodyBg--s: 12%; --xf-bodyBg--l: 8%; --xf-bodyBg--a: 1;
  --xf-contentBg--h: 222; --xf-contentBg--s: 14%; --xf-contentBg--l: 12%; --xf-contentBg--a: 1;
  --xf-contentAltBg--h: 222; --xf-contentAltBg--s: 14%; --xf-contentAltBg--l: 14%; --xf-contentAltBg--a: 1;
  --xf-contentAccentBg--h: 207; --xf-contentAccentBg--s: 88%; --xf-contentAccentBg--l: 12%; --xf-contentAccentBg--a: 1;
  --xf-contentHighlightBg--h: 207; --xf-contentHighlightBg--s: 80%; --xf-contentHighlightBg--l: 16%; --xf-contentHighlightBg--a: 1;
  --xf-chromeBg--h: 220; --xf-chromeBg--s: 12%; --xf-chromeBg--l: 8%; --xf-chromeBg--a: 1;
  --xf-textColor--h: 220; --xf-textColor--s: 14%; --xf-textColor--l: 97%; --xf-textColor--a: 1;
  --xf-textColorAlt--h: 220; --xf-textColorAlt--s: 7%; --xf-textColorAlt--l: 67%; --xf-textColorAlt--a: 1;
  --xf-textColorDimmed--h: 220; --xf-textColorDimmed--s: 7%; --xf-textColorDimmed--l: 50%; --xf-textColorDimmed--a: 1;
  --xf-textColorAttention--h: 207; --xf-textColorAttention--s: 88%; --xf-textColorAttention--l: 60%; --xf-textColorAttention--a: 1;
  --xf-textColorFeature--h: 207; --xf-textColorFeature--s: 88%; --xf-textColorFeature--l: 60%; --xf-textColorFeature--a: 1;
  --xf-textColorMuted--h: 220; --xf-textColorMuted--s: 7%; --xf-textColorMuted--l: 50%; --xf-textColorMuted--a: 1;
  --xf-chromeTextColor--h: 220; --xf-chromeTextColor--s: 14%; --xf-chromeTextColor--l: 92%; --xf-chromeTextColor--a: 1;
  --xf-borderColor--h: 220; --xf-borderColor--s: 10%; --xf-borderColor--l: 19%; --xf-borderColor--a: 1;
  --xf-borderColorLight--h: 220; --xf-borderColorLight--s: 10%; --xf-borderColorLight--l: 16%; --xf-borderColorLight--a: 1;
  --xf-borderColorFaint--h: 220; --xf-borderColorFaint--s: 10%; --xf-borderColorFaint--l: 14%; --xf-borderColorFaint--a: 1;
  --xf-borderColorHeavy--h: 220; --xf-borderColorHeavy--s: 12%; --xf-borderColorHeavy--l: 24%; --xf-borderColorHeavy--a: 1;
  --xf-borderColorHighlight--h: 207; --xf-borderColorHighlight--s: 88%; --xf-borderColorHighlight--l: 50%; --xf-borderColorHighlight--a: 1;
  --xf-borderColorAttention--h: 207; --xf-borderColorAttention--s: 88%; --xf-borderColorAttention--l: 50%; --xf-borderColorAttention--a: 1;
  --xf-borderColorFeature--h: 207; --xf-borderColorFeature--s: 88%; --xf-borderColorFeature--l: 50%; --xf-borderColorFeature--a: 1;
  --xf-borderColorAccentContent--h: 207; --xf-borderColorAccentContent--s: 88%; --xf-borderColorAccentContent--l: 50%; --xf-borderColorAccentContent--a: 1;
  --xf-blockFooterBg--h: 220; --xf-blockFooterBg--s: 12%; --xf-blockFooterBg--l: 11%; --xf-blockFooterBg--a: 1;
  --xf-blockFooterTextColor--h: 220; --xf-blockFooterTextColor--s: 7%; --xf-blockFooterTextColor--l: 67%; --xf-blockFooterTextColor--a: 1;
  --xf-blockTabHeaderBg--h: 220; --xf-blockTabHeaderBg--s: 12%; --xf-blockTabHeaderBg--l: 10%; --xf-blockTabHeaderBg--a: 1;
  --xf-blockTabHeaderTextColor--h: 220; --xf-blockTabHeaderTextColor--s: 14%; --xf-blockTabHeaderTextColor--l: 92%; --xf-blockTabHeaderTextColor--a: 1;
  --xf-buttonBg--h: 222; --xf-buttonBg--s: 14%; --xf-buttonBg--l: 14%; --xf-buttonBg--a: 1;
  --xf-buttonTextColor--h: 220; --xf-buttonTextColor--s: 14%; --xf-buttonTextColor--l: 97%; --xf-buttonTextColor--a: 1;
  --xf-buttonPrimaryBg--h: 207; --xf-buttonPrimaryBg--s: 88%; --xf-buttonPrimaryBg--l: 50%; --xf-buttonPrimaryBg--a: 1;
  --xf-buttonCtaBg--h: 207; --xf-buttonCtaBg--s: 88%; --xf-buttonCtaBg--l: 50%; --xf-buttonCtaBg--a: 1;
  --xf-avatarBg--h: 220; --xf-avatarBg--s: 14%; --xf-avatarBg--l: 16%; --xf-avatarBg--a: 1;
  --xf-editorBg--h: 222; --xf-editorBg--s: 14%; --xf-editorBg--l: 11%; --xf-editorBg--a: 1;
  /* Link color WHITE (user request) — XF link var if any */
  --xf-linkColor--h: 220; --xf-linkColor--s: 14%; --xf-linkColor--l: 97%; --xf-linkColor--a: 1;
}

/* HTML root — we override the `html, body { background: var(--bg-sunken) !important }` rule from XF aior_core.less */
html#XF[data-theme="dark"] { background: #1c1c1c !important; background-color: #1c1c1c !important; }

/* Hard-coded element overrides — maximum specificity for XF aior_core.less !important rules (body, .p-pageWrapper) */
html#XF[data-theme="dark"] body,
html#XF[data-theme="dark"] body[data-template],
html#XF[data-theme="dark"] body.Aior,
html#XF[data-theme="dark"] body[class*="template-"],
html#XF[data-theme="dark"] .p-body,
html#XF[data-theme="dark"] body .p-body,
html#XF[data-theme="dark"] .p-pageWrapper,
html#XF[data-theme="dark"] body .p-pageWrapper,
html#XF[data-theme="dark"] body[data-template] .p-pageWrapper { background: #1c1c1c !important; background-color: #1c1c1c !important; color: #f7f8f9 !important; }

/* XF aior_core.less'deki `body { background: var(--bg-sunken) !important }` rule'unu eziyoruz */
html#XF[data-theme="dark"] body[class*="template-"],
html#XF[data-theme="dark"] body.Aior { background: #1c1c1c !important; }

html#XF[data-theme="dark"] .block,
html#XF[data-theme="dark"] .block-container,
html#XF[data-theme="dark"] .block-body,
html#XF[data-theme="dark"] .block-row,
html#XF[data-theme="dark"] .menu,
html#XF[data-theme="dark"] .menu-content,
html#XF[data-theme="dark"] .panel,
html#XF[data-theme="dark"] .message,
html#XF[data-theme="dark"] .messageList .message,
html#XF[data-theme="dark"] .structItemContainer,
html#XF[data-theme="dark"] .structItem { background-color: #2a2a2a !important; color: #f7f8f9 !important; }

html#XF[data-theme="dark"] .block-header,
html#XF[data-theme="dark"] .block-tabHeader,
html#XF[data-theme="dark"] .menu-header,
html#XF[data-theme="dark"] .blockMessage { background-color: #161616 !important; color: #f7f8f9 !important; border-color: #2a2f38 !important; }

html#XF[data-theme="dark"] .block-footer,
html#XF[data-theme="dark"] .menu-footer { background-color: #161616 !important; color: #9aa0aa !important; border-color: #2a2f38 !important; }

/* Linkler — dark modda BEYAZ. Hover'da accent. */
html#XF[data-theme="dark"] a,
html#XF[data-theme="dark"] .fauxBlockLink-blockLink,
html#XF[data-theme="dark"] .structItem-title a,
html#XF[data-theme="dark"] .breadcrumbs .crumbs > a,
html#XF[data-theme="dark"] .p-navEl-link,
html#XF[data-theme="dark"] .p-titleBar a,
html#XF[data-theme="dark"] .nodeTitle,
html#XF[data-theme="dark"] .nodeTitle a { color: #f7f8f9 !important; }
html#XF[data-theme="dark"] a:hover,
html#XF[data-theme="dark"] .structItem-title a:hover,
html#XF[data-theme="dark"] .breadcrumbs .crumbs > a:hover,
html#XF[data-theme="dark"] .p-navEl-link:hover,
html#XF[data-theme="dark"] .nodeTitle a:hover { color: #4ab6f5 !important; }

html#XF[data-theme="dark"] .input,
html#XF[data-theme="dark"] textarea.input,
html#XF[data-theme="dark"] select.input { background-color: #161616 !important; color: #f7f8f9 !important; border-color: #2a2f38 !important; }
html#XF[data-theme="dark"] .input:focus { border-color: #1da1f2 !important; box-shadow: 0 0 0 3px rgba(29,161,242,.18) !important; }

html#XF[data-theme="dark"] .button { background-color: #161616 !important; color: #f7f8f9 !important; border-color: #3a3f48 !important; }
html#XF[data-theme="dark"] .button:hover { background-color: #2a2a2a !important; opacity: 0.85; }
html#XF[data-theme="dark"] .button.button--primary,
html#XF[data-theme="dark"] .button.button--cta { background-color: #4ab6f5 !important; color: #fff !important; border-color: #4ab6f5 !important; }
html#XF[data-theme="dark"] .button.button--primary:hover,
html#XF[data-theme="dark"] .button.button--cta:hover { background-color: #1da1f2 !important; }

html#XF[data-theme="dark"] hr,
html#XF[data-theme="dark"] .formRowSep,
html#XF[data-theme="dark"] .structItem-cell { border-color: #2a2f38 !important; }

html#XF[data-theme="dark"] .label { background-color: #161616 !important; color: #d4d6da !important; border-color: #3a3f48 !important; }

html#XF[data-theme="dark"] .tabs .tabs-tab,
html#XF[data-theme="dark"] .menu-tabHeader .menu-tabHeader-tab { color: #9aa0aa !important; }
html#XF[data-theme="dark"] .tabs .tabs-tab.is-active,
html#XF[data-theme="dark"] .menu-tabHeader .menu-tabHeader-tab.is-active { color: #f7f8f9 !important; border-color: #1da1f2 !important; }

html#XF[data-theme="dark"] .p-footer,
html#XF[data-theme="dark"] .p-footer-row,
html#XF[data-theme="dark"] .p-copyright { background-color: #161616 !important; color: #9aa0aa !important; border-top-color: #2a2f38 !important; }

/* XF native sub-nav (Forumlar / Yenilikler / Medya / Kaynaklar / Üyeler) */
html#XF[data-theme="dark"] .p-nav,
html#XF[data-theme="dark"] .p-navSticky,
html#XF[data-theme="dark"] .p-sectionLinks,
html#XF[data-theme="dark"] .p-titleBar { background-color: #1c1c1c !important; }
html#XF[data-theme="dark"] .p-navEl.is-selected .p-navEl-link { border-bottom-color: #1da1f2 !important; }
html#XF[data-theme="dark"] .p-sectionLinks { border-color: #2a2f38 !important; }

/* Shake animation — applied to bell when unread > 0 */
@keyframes aior-bell-shake {
  0%, 50%, 100% { transform: rotate(0); }
  4%  { transform: rotate(-14deg); }
  8%  { transform: rotate(12deg); }
  12% { transform: rotate(-10deg); }
  16% { transform: rotate(8deg); }
  20% { transform: rotate(-5deg); }
  24%, 48% { transform: rotate(0); }
}
/* Cart icon active state — BLUE accent + shake when items in cart */
.topbar-cart.is-active svg {
  animation: aior-bell-shake 2.4s ease-in-out infinite;
  transform-origin: 50% 4px;
}
.topbar-cart.is-active        { color: var(--accent, #1d9bf0); }
.topbar-cart.is-active:hover  { color: var(--accent-deep, #0d7fc2); }
/* Cart badge: blue (default red is for the alert bell) */
.topbar-cart.is-active .topbar-bell-badge {
  background: var(--accent, #1d9bf0);
  box-shadow: 0 0 0 2px var(--bg, #fff);
  animation: aior-cart-pulse 1.6s ease-in-out infinite;
}
@keyframes aior-cart-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.14); }
}

/* 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.is-active,
.topbar-nav-link[aria-current="page"],
.topbar-mega-toggle[aria-expanded="true"],
.topbar-dropdown-toggle[aria-expanded="true"],
[data-dropdown-toggle][aria-expanded="true"] {
  color: var(--accent);
}
/* Active page chip — slightly stronger emphasis than hover */
.topbar-nav-link.is-active,
.topbar-nav-link[aria-current="page"] {
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* Mega-menu — full-screen panel opened by clicking "Services" */
/* Mega toggle button — exact visual parity with the anchor.
   The .topbar-nav-link rule sets everything (font, color, padding);
   here do ONLY a button-specific reset; do not override font/color. */
.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);
}

/* Dropdown toggle — chevron parity with .topbar-mega-toggle (e.g. KURUMSAL) */
[data-dropdown-toggle],
.topbar-dropdown-toggle {
  position: relative;
  border: 0;
  background: transparent;
  cursor: pointer;
}
[data-dropdown-toggle]::after,
.topbar-dropdown-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%;
}
[data-dropdown-toggle][aria-expanded="true"]::after,
.topbar-dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

/* Full-width panel below the header (left to right) */
.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 — right side of the mega menu */
.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;
}
/* Promo card contrast in dark mode */
: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;
}
/* Inner row — padding given directly so the bar renders the same height
   on Astro (Tailwind utility cache) AND on WHMCS / XF (where Tailwind
   utility classes like .py-2.5 are not generated). Mirrors py-2.5 px-4. */
.promo-strip-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 80rem;
  padding: 10px 16px;
}
@media (min-width: 640px) {
  .promo-strip-inner { flex-direction: row; gap: 1rem; padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
  .promo-strip-inner { padding-left: 2rem; padding-right: 2rem; }
}
.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);
}

/* ---------------------------------------------------------------- */
/*  FLIP-CLOCK COUNTDOWN — split-flap mechanical clock              */
/* ---------------------------------------------------------------- */
.promo-flipclock {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  font-family: var(--font-mono, "SF Mono", ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.promo-flipclock .flip-group {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.promo-flipclock .flip-cards {
  display: inline-flex;
  gap: 2px;
}
.promo-flipclock .flip-card {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 30px;
  border-radius: 4px;
  background: linear-gradient(180deg, #1f2937 0%, #0f172a 50%, #111827 50%, #0b1220 100%);
  color: #f8fafc;
  font-size: 18px;
  font-weight: 700;
  line-height: 30px;
  text-align: center;
  letter-spacing: -0.02em;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(0, 0, 0, 0.5),
    0 1px 2px rgba(15, 23, 42, 0.18),
    0 4px 10px rgba(15, 23, 42, 0.12);
  perspective: 200px;
}
/* center hairline mimics the split-flap seam */
.promo-flipclock .flip-card::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.55);
  z-index: 5;
  pointer-events: none;
}
.promo-flipclock .flip-card::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04) 30%, rgba(255, 255, 255, 0.04) 70%, transparent);
  z-index: 6;
  pointer-events: none;
}
.promo-flipclock .flip-face {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: center;
  backface-visibility: hidden;
}
/* flip animation when value changes */
.promo-flipclock .flip-card.is-flipping .flip-face {
  animation: flip-card-rotate 520ms cubic-bezier(.34, .92, .54, 1) both;
}
@keyframes flip-card-rotate {
  0%   { transform: rotateX(0);     opacity: 1; }
  35%  { transform: rotateX(-90deg); opacity: 0.55; }
  36%  { transform: rotateX(90deg);  opacity: 0.55; }
  100% { transform: rotateX(0);     opacity: 1; }
}

.promo-flipclock .flip-label {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  line-height: 1;
}

.promo-flipclock .flip-sep {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg-muted);
  margin-bottom: 14px; /* align with cards, above labels */
  opacity: 0.65;
  animation: flip-sep-blink 1s steps(1) infinite;
}
@keyframes flip-sep-blink {
  0%, 50%   { opacity: 0.7; }
  51%, 100% { opacity: 0.25; }
}

/* Light theme stays dark cards (cinematic look) — only minor tweaks */
:root:not([data-theme="dark"]) .promo-flipclock .flip-card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(0, 0, 0, 0.45),
    0 1px 2px rgba(15, 23, 42, 0.10),
    0 4px 10px rgba(15, 23, 42, 0.10);
}

/* Mobile: tighter sizing + smaller labels (kept visible — Gün/Saat/Dk/Sn) */
@media (max-width: 639px) {
  .promo-flipclock .flip-card {
    width: 20px;
    height: 26px;
    font-size: 14px;
    line-height: 26px;
  }
  .promo-flipclock .flip-label {
    /* Slightly compressed but still readable on phones */
    display: block;
    font-size: 8.5px;
    letter-spacing: 0.06em;
    margin-top: 2px;
  }
  .promo-flipclock .flip-sep {
    /* Realign with the digit cards (label still pushes baseline down) */
    margin-bottom: 14px;
    font-size: 13px;
  }
  .promo-flipclock { gap: 0.28rem; }
}
.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 search (Tailwind Plus style, embedded in the hero) */
.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%; }

/* Top link grid: 5 columns, full width */
.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));
  }
}

/* Contact row: address, phone, mobile, mail, KEP — single row, equal cards */
.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;
}

/* "Teklif al / Get a quote" CTA — visible on mobile too, compact at <768px,
   stays right-aligned next to hamburger. Larger viewports keep .btn defaults. */
@media (max-width: 768px) {
  .aior-quote-cta {
    height: 2.1rem;
    padding: 0 0.7rem;
    font-size: 0.78rem;
    border-radius: 0.5rem;
  }
}
@media (max-width: 380px) {
  .aior-quote-cta {
    height: 2rem;
    padding: 0 0.55rem;
    font-size: 0.72rem;
  }
}

.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 (phone, e-mail, Login, Register) */
.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.is-active,
.topbar-nav-link[aria-current="page"] {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
/* Active page chip — slightly stronger emphasis than hover */
.topbar-nav-link.is-active,
.topbar-nav-link[aria-current="page"] {
  font-weight: 600;
}

/* 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) — headline + features stack */
.promo-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  min-width: 0;
  line-height: 1.3;
}
.promo-headline {
  display: block;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.promo-features {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-muted);
}
@media (max-width: 639px) {
  .promo-text { gap: 3px; }
  .promo-headline { font-size: 13px; }
  .promo-features { font-size: 11px; line-height: 1.45; }
}

/* Hero CTA — compact on mobile so it fits next to hamburger */
@media (max-width: 1023px) {
  .hero-quote-cta {
    height: 2rem;
    padding: 0 0.75rem;
    font-size: 0.8125rem;
    border-radius: 0.5rem;
  }
}

/* Promo-text alignment override (Tailwind sm:text-left specificity fix for WHMCS/XF) */
.promo-strip .promo-text { text-align: center; }
@media (min-width: 640px) {
  .promo-strip .promo-text { text-align: left; }
}

/* Pager mobile fix — flex items can shrink below nowrap content size */
.ref-pager-link { min-width: 0; }
.ref-pager-link > div { min-width: 0; flex: 1 1 auto; }
.ref-pager-name { display: block; }
@media (max-width: 767px) {
  .ref-pager-link { padding: 14px 16px; min-height: 64px; }
  .ref-pager-name { font-size: 14px; }
  .ref-pager-all { padding: 0 16px; min-height: 56px; }
}

/* Promo-strip stacking context — flip-card pseudos must not bleed above topbar-main */
.promo-strip {
  position: relative;
  z-index: 0;
  isolation: isolate;
}

/* Mobile promo — hide trailing arrow (row stacks vertically; arrow looked orphaned at bottom) */
@media (max-width: 639px) {
  .promo-strip-inner {
    padding-left: 18px;
    padding-right: 18px;
    gap: 0.65rem;
  }
  .promo-strip .promo-text {
    padding: 0 0.15rem;
    max-width: 100%;
  }
  .promo-strip .promo-headline,
  .promo-strip .promo-features {
    display: block;
    line-height: 1.45;
  }
  .promo-strip .promo-arrow {
    display: none;
  }
}

/* AIOR-PROMO-NEVER-STICKY: User explicitly requested promo banner NEVER be
   sticky on any breakpoint. Banner scrolls naturally with the page on every
   page across all platforms. The base .promo-strip rule above keeps
   position:relative + z-index:0 + isolation:isolate so flip-card pseudos
   stay within their own stacking context (no bleed through topbar-main). */

/* =====================================================================
   AIOR — Captcha card (math + honeypot + reCAPTCHA wrapper)
   Used by: WHMCS submitticket, contact, register; matches AIOR design
   --------------------------------------------------------------------- */
.aior-captcha-wrap {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px 14px;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  box-sizing: border-box;
}
.aior-captcha-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.aior-captcha-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  border-radius: 8px;
  flex-shrink: 0;
}
.aior-captcha-label {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg);
  font-size: 11.5px;
}
.aior-captcha-hint {
  font-size: 11.5px;
  color: var(--fg-muted);
  margin-left: 4px;
  font-weight: 500;
}

.aior-captcha-row {
  display: flex !important;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}
.aior-captcha-question {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
  user-select: none;
  letter-spacing: 0.06em;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: var(--font-mono, monospace);
}
.aior-captcha-num { color: var(--accent); }
.aior-captcha-op  { color: var(--fg-muted); font-weight: 500; }

.aior-captcha-input,
.aior-form .aior-captcha-input,
.aior-captcha-row .aior-captcha-input {
  width: 92px !important;
  max-width: 92px !important;
  min-width: 92px !important;
  flex: 0 0 92px !important;
  height: 44px !important;
  background: var(--bg) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  padding: 0 12px !important;
  color: var(--fg) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  text-align: center !important;
  font-family: var(--font-mono, monospace);
  transition: border-color 140ms ease, box-shadow 140ms ease;
  box-sizing: border-box;
}
.aior-captcha-input:focus {
  outline: 0 !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-ring) !important;
}
.aior-captcha-input::placeholder {
  color: var(--fg-muted);
  opacity: 0.45;
  font-weight: 500;
}

.aior-captcha-status {
  font-size: 12.5px;
  font-weight: 700;
  min-height: 1em;
  flex-shrink: 1;
  min-width: 0;
  transition: color 140ms ease;
}
.aior-captcha-ok  { color: var(--accent); }
.aior-captcha-bad { color: #ef4444; }

.aior-captcha-help {
  margin: 14px 0 0;
  font-size: 11.5px;
  color: var(--fg-muted);
  line-height: 1.5;
}

/* Honeypot: visually + a11y hidden, but in DOM for bots.
   Triple-protection: position offscreen, dimensions zero, opacity zero */
.aior-honeypot,
.aior-form .aior-honeypot,
form .aior-honeypot {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  display: block !important;
}
.aior-honeypot * { display: none !important; }

@media (max-width: 480px) {
  .aior-captcha-wrap { padding: 14px; }
  .aior-captcha-row {
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .aior-captcha-question { font-size: 16px; padding: 8px 12px; }
  .aior-captcha-input,
  .aior-form .aior-captcha-input,
  .aior-captcha-row .aior-captcha-input {
    width: 80px !important;
    max-width: 80px !important;
    min-width: 80px !important;
    flex: 0 0 80px !important;
    height: 40px !important;
    font-size: 16px !important;
  }
}

/* =====================================================================
   AIOR — Submit Ticket: unified single-card layout
   --------------------------------------------------------------------- */
.aior-ticket-form { max-width: 880px; margin: 0 auto; }
.aior-ticket-card {
  padding: 28px 28px 22px !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.aior-ticket-card > .aior-form-group,
.aior-ticket-card > .aior-grid-2 { margin: 0; }
.aior-ticket-captcha-block {
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: center;
}
.aior-ticket-captcha-block .aior-captcha-wrap {
  background: transparent;
  border: 0;
  padding: 0;
  max-width: 100%;
}
.aior-ticket-actions {
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.aior-ticket-actions .aior-btn { min-width: 140px; }
.aior-attachments-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.aior-attachments-files { flex: 1; min-width: 0; }
@media (max-width: 640px) {
  .aior-ticket-card { padding: 20px 18px 18px !important; gap: 14px; }
  .aior-ticket-actions .aior-btn { width: 100%; min-width: 0; }
}

/* AIOR — Submit Ticket bottom compact tweaks (captcha + actions tighter) */
.aior-ticket-card { gap: 14px; padding: 24px 24px 18px !important; }
.aior-ticket-captcha-block {
  margin-top: 4px;
  padding-top: 14px;
}
.aior-ticket-captcha-block .aior-captcha-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px 14px;
  max-width: 100%;
}
.aior-ticket-captcha-block .aior-captcha-head {
  margin: 0;
  padding: 0;
  border: 0;
  grid-column: 1 / -1;
}
.aior-ticket-captcha-block .aior-captcha-row {
  margin: 0;
  gap: 10px;
}
.aior-ticket-captcha-block .aior-captcha-help {
  margin: 0;
  grid-column: 1 / -1;
  font-size: 11.5px;
}
.aior-ticket-actions {
  margin-top: 4px;
  padding-top: 14px;
  gap: 10px;
}
.aior-ticket-actions .aior-btn { min-width: 120px; padding: 8px 18px; }

@media (max-width: 640px) {
  .aior-ticket-captcha-block .aior-captcha-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
  .aior-ticket-actions .aior-btn { width: 100%; min-width: 0; }
}

/* =====================================================================
   AIOR — Custom file upload widget (.aior-fileup)
   Hides the native input, shows styled label/button + filename + clear
   --------------------------------------------------------------------- */
.aior-fileup {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 8px 6px 6px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.aior-fileup:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.aior-fileup:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.aior-fileup-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
}
.aior-fileup-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background 140ms ease;
  user-select: none;
  flex-shrink: 0;
}
.aior-fileup-btn:hover { background: var(--accent-deep); }
.aior-fileup-btn:active { transform: translateY(1px); }
.aior-fileup-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 4px;
  font-family: var(--font-mono, monospace);
}
.aior-fileup:not([data-has-file]) .aior-fileup-name {
  color: var(--fg-muted);
  font-style: italic;
  font-family: inherit;
}
.aior-fileup-clear {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--fg-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 140ms ease;
  flex-shrink: 0;
}
.aior-fileup-clear:hover {
  background: rgba(239, 68, 68, .1);
  border-color: #ef4444;
  color: #ef4444;
}
.aior-fileup-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--fg-muted);
  border-radius: 8px;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: all 140ms ease;
  flex-shrink: 0;
}
.aior-fileup-add:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Extra (added) file rows below */
.aior-fileup-extra { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.aior-fileup-extra:empty { display: none; }
.aior-fileup-extra .aior-fileup { padding: 4px 8px; }

@media (max-width: 480px) {
  .aior-fileup { padding: 8px; }
  .aior-fileup-name { width: 100%; flex: 1 0 100%; padding: 4px 0 0; }
  .aior-fileup-add { margin-left: auto; }
}

/* AIOR-RECAPTCHA-BADGE-HIDE: Google reCAPTCHA v3 floating badge globally hidden.
   Google's TOS allow hiding the badge IF the privacy/terms branding text is
   visible on every form — our captcha includes already display the required
   reCAPTCHA privacy/terms notice (localized per visitor), which satisfies
   that requirement. */
.grecaptcha-badge {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* Bilingual content blocks — used in XF posts via [lang=tr]/[lang=en] BBCode.
   Both blocks remain in DOM for SEO crawler access; CSS shows exactly one
   based on the active <html data-lang="X"> attribute set by aior-theme.js.
   WHMCS HTML purifier strips data-* attrs, so we also accept the standard
   `lang` attribute and the aior-lang-{tr,en} class marker as language signals. */
.aior-lang-block { display: none; }
/* Active lang detection covers all three signals on <html>: data-lang (set
   by aior-theme.js + the WHMCS pre-paint inline script), and the standard
   `lang` attribute in either short (tr/en) or WHMCS-long (turkish/english)
   form. Block-side accepts data-lang, lang, or the aior-lang-{tr,en} class
   (WHMCS purifier strips data-*). */
:root[data-lang="tr"] .aior-lang-block[data-lang="tr"],
:root[data-lang="tr"] .aior-lang-block[lang="tr"],
:root[data-lang="tr"] .aior-lang-block.aior-lang-tr,
:root[lang="tr"]      .aior-lang-block[data-lang="tr"],
:root[lang="tr"]      .aior-lang-block[lang="tr"],
:root[lang="tr"]      .aior-lang-block.aior-lang-tr,
:root[lang="turkish"] .aior-lang-block[data-lang="tr"],
:root[lang="turkish"] .aior-lang-block[lang="tr"],
:root[lang="turkish"] .aior-lang-block.aior-lang-tr,
:root[data-lang="en"] .aior-lang-block[data-lang="en"],
:root[data-lang="en"] .aior-lang-block[lang="en"],
:root[data-lang="en"] .aior-lang-block.aior-lang-en,
:root[lang="en"]      .aior-lang-block[data-lang="en"],
:root[lang="en"]      .aior-lang-block[lang="en"],
:root[lang="en"]      .aior-lang-block.aior-lang-en,
:root[lang="english"] .aior-lang-block[data-lang="en"],
:root[lang="english"] .aior-lang-block[lang="en"],
:root[lang="english"] .aior-lang-block.aior-lang-en { display: block; }

/* ==========================================================
   POINTER FX — cursor-following glass glow (site-wide)
   ========================================================== */

@property --pt-x { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --pt-y { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --intensity { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --tilt-x { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --tilt-y { syntax: "<angle>"; inherits: true; initial-value: 0deg; }

.aior-pointer-fx-host {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --pt-x: 50%;
  --pt-y: 50%;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --intensity: 0;
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: box-shadow 320ms ease, border-color 320ms ease;
}

.aior-pointer-fx-host[data-tilting="true"] {
  box-shadow:
    0 28px 72px -26px color-mix(in srgb, var(--accent) 48%, transparent),
    0 10px 32px -14px color-mix(in srgb, var(--fg) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--glass-border, var(--border)));
}

.aior-pointer-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  isolation: isolate;
  z-index: 0;
  transform: translateZ(0);
}

.aior-pointer-fx__orb {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  mix-blend-mode: screen;
  filter: blur(36px);
  z-index: 0;
}

.aior-pointer-fx__orb--auto {
  width: 280px;
  height: 280px;
  top: -90px;
  left: -110px;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--accent) 70%, transparent) 0%,
    color-mix(in srgb, var(--accent) 24%, transparent) 38%,
    transparent 70%
  );
  opacity: 0.7;
  animation: aiorPtrOrb1 14s ease-in-out infinite;
}

.aior-pointer-fx__orb--auto2 {
  width: 320px;
  height: 320px;
  bottom: -120px;
  right: -120px;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--accent) 55%, transparent) 0%,
    color-mix(in srgb, var(--accent) 18%, transparent) 40%,
    transparent 72%
  );
  opacity: 0.55;
  animation: aiorPtrOrb2 18s ease-in-out infinite;
  animation-delay: -4s;
}

:root[data-theme="dark"] .aior-pointer-fx__orb--auto { opacity: 0.85; }
:root[data-theme="dark"] .aior-pointer-fx__orb--auto2 { opacity: 0.7; }

@keyframes aiorPtrOrb1 {
  0%, 100% { transform: translate(0%, 0%) scale(1); }
  20%  { transform: translate(180%, 30%) scale(1.1); }
  45%  { transform: translate(260%, 120%) scale(1.05); }
  65%  { transform: translate(120%, 180%) scale(0.95); }
  85%  { transform: translate(20%, 100%) scale(1.08); }
}

@keyframes aiorPtrOrb2 {
  0%, 100% { transform: translate(0%, 0%) scale(1); }
  25%  { transform: translate(-150%, -60%) scale(0.95); }
  50%  { transform: translate(-260%, -150%) scale(1.1); }
  75%  { transform: translate(-100%, -180%) scale(1); }
}

.aior-pointer-fx__orb--cursor {
  inset: -10%;
  width: auto;
  height: auto;
  border-radius: inherit;
  background: radial-gradient(
    240px circle at var(--pt-x) var(--pt-y),
    color-mix(in srgb, var(--accent) 65%, transparent) 0%,
    color-mix(in srgb, var(--accent) 22%, transparent) 28%,
    transparent 60%
  );
  filter: blur(14px);
  opacity: calc(0.85 * var(--intensity));
  transition: opacity 220ms ease;
}

.aior-pointer-fx__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent) 18%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 18%, transparent) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(ellipse 280px 220px at var(--pt-x) var(--pt-y), black 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 280px 220px at var(--pt-x) var(--pt-y), black 0%, transparent 75%);
  opacity: calc(0.4 + 0.45 * var(--intensity));
  z-index: 1;
}

.aior-pointer-fx__glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  background-size: 220% 220%;
  background-position: calc(120% - var(--pt-x)) calc(120% - var(--pt-y));
  mix-blend-mode: overlay;
  opacity: calc(0.45 * var(--intensity));
  transition: opacity 220ms ease;
  z-index: 1;
}

:root[data-theme="dark"] .aior-pointer-fx__glare {
  mix-blend-mode: screen;
  opacity: calc(0.3 * var(--intensity));
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
}

.aior-pointer-fx__edge {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
  opacity: calc(0.3 + 0.7 * var(--intensity));
  z-index: 2;
}

.aior-pointer-fx-host > *:not(.aior-pointer-fx) {
  position: relative;
  z-index: 1;
}

/* Interior marketing heroes — never tilt (pointer-fx must not bind .page-hero) */
.page-hero.aior-pointer-fx-host,
[data-aior-no-pointer-fx].aior-pointer-fx-host,
.hero-modern-card.aior-pointer-fx-host,
.hero-modern-slider .aior-pointer-fx-host,
.hero-modern-slider .hero-modern-card,
.hero-modern-slider .hero-modern-slide .hero-modern-card {
  transform: none !important;
  perspective: none !important;
  transform-style: flat !important;
  box-shadow: none !important;
}
.page-hero .aior-pointer-fx,
[data-aior-no-pointer-fx] .aior-pointer-fx,
.hero-modern-card .aior-pointer-fx,
.hero-modern-slider .aior-pointer-fx {
  display: none !important;
}

/* Page-wide ambient cursor glow (behind content) */
.aior-cursor-ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  --page-pt-x: -9999px;
  --page-pt-y: -9999px;
  --page-intensity: 0;
}

.aior-cursor-ambient__glow {
  position: fixed;
  left: var(--page-pt-x);
  top: var(--page-pt-y);
  width: min(520px, 90vw);
  height: min(520px, 90vw);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--accent) 16%, transparent) 0%,
    color-mix(in srgb, var(--accent) 6%, transparent) 42%,
    transparent 72%
  );
  opacity: calc(0.55 * var(--page-intensity));
  filter: blur(2px);
  transition: opacity 280ms ease;
}

body > [data-aior-header],
body > main,
body > [data-aior-footer],
body > [data-scroll-top],
body > [data-wa-fab],
body > [data-aior-cookie] {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .aior-pointer-fx__orb--auto,
  .aior-pointer-fx__orb--auto2 {
    animation-duration: 24s;
  }
  .aior-pointer-fx-host {
    transform: none;
  }
}