/* =========================================================
   Ticarium Business Tycoon - template5 main.css
   ---------------------------------------------------------
   Structure adapted from the user-provided iron-front-landing.html
   reference (bold condensed type, angular clip-path chrome, fixed header,
   media slider, stat counters), reworded for Ticarium and recolored to
   template1's exact navy/gold/turquoise palette per the brief ("renk
   tonu template1 gibi olsun") - variable NAMES and VALUES below are the
   same as template1/css/main.css.

   UPDATE: the hero's original autoplaying YouTube background video +
   right-side "play fullscreen" popup were replaced with a real background
   image (.hero-bg-image-t5, header_bg_1.webp) + a drifting colour-glow tint
   on top (.hero-anim-bg-t5) - see pages/home.php's header comment for the
   full reasoning. The trailer itself now lives inline in the Media section
   (.t5-trailer-frame).

   Two deliberate content departures from the reference (see
   views/pages/home.php's header comment for the reasoning): no hero/
   character cards (replaced with a Sectors section), and only 2 store
   buttons (no PC client exists for Ticarium).
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;800&family=Barlow:wght@400;500;600;700&display=swap');

:root{
  --tc-navy-950: #060b1a;
  --tc-navy-900: #0a1230;
  --tc-navy-800: #101a44;
  --tc-navy-700: #16225c;
  --tc-blue-500: #2f6bff;
  --tc-blue-400: #4f8bff;
  --tc-turquoise: #1fd1c9;
  --tc-gold-500: #ffb300;
  --tc-gold-300: #ffd873;
  --tc-green-500: #17a673;
  --tc-green-400: #2ecc8f;
  --tc-text: #eaf0ff;
  --tc-text-muted: #9fb0d9;
  --tc-radius-lg: 20px;
  --tc-radius-md: 14px;
  --tc-shadow-card: 0 20px 45px rgba(4, 10, 30, .45);

  --tc-font-display: "Big Shoulders Display", "Segoe UI", system-ui, sans-serif;
  --tc-font-body: "Barlow", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  /* Angular corner clips - matching the reference HTML's actual polygon
     values exactly (it uses a simple slanted-parallelogram cut on both
     sides, at three different insets depending on the element, not a
     6-point hexagon cut). Cards in the reference have NO clip-path at
     all (plain rectangles with a border/border-top accent), so this
     template doesn't clip any card either. */
  --tc-clip-tag: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  --tc-clip-cta: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  --tc-clip-store: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}

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

html{ scroll-behavior: smooth; }

body{
  background: var(--tc-navy-950);
  color: var(--tc-text);
  font-family: var(--tc-font-body);
}

h1, h2, h3{ font-family: var(--tc-font-display); }

a{ color: var(--tc-turquoise); text-decoration: none; }
a:hover{ color: var(--tc-gold-300); }

.skip-link{ position: absolute; top: -40px; left: 0; background: #fff; color: #000; padding: 8px 12px; z-index: 2000; }
.skip-link:focus{ top: 0; }

/* ---------- Scroll-reveal ("reveal" naming, same mechanism as [data-animate]) ---------- */
.reveal,
[data-animate]{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.16,.8,.24,1), transform .6s cubic-bezier(.16,.8,.24,1);
}
.reveal.is-visible,
[data-animate].is-visible{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal, [data-animate]{ opacity: 1; transform: none; transition: none; }
}

/* ---------- Eyebrow label (angular tag, reference's signature chip) ---------- */
.eyebrow{
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tc-gold-300);
  border: 1px solid rgba(255,179,0,.4); padding: .35rem .8rem;
  clip-path: var(--tc-clip-tag); background: rgba(255,179,0,.07);
  margin-bottom: .9rem;
}

/* ---------- Section shells ---------- */
.section{ padding: 5.5rem 0; }
.section-dark{ background: var(--tc-navy-900); }
.section-darker{ background: var(--tc-navy-950); }
.section-head{ margin-bottom: 1.5rem; }
.section-title{ font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.9rem); letter-spacing: .02em; text-transform: uppercase; }
.section-sub{ color: var(--tc-text-muted); max-width: 640px; }

/* ---------- Buttons ---------- */
.btn-cta-t5{
  font-family: var(--tc-font-display); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #241800; background: linear-gradient(180deg, var(--tc-gold-300), var(--tc-gold-500));
  border: none; padding: .5rem 1.3rem; clip-path: var(--tc-clip-cta);
  transition: filter .2s ease, transform .2s ease;
}
/* :focus/:active/.show (dropdown open) explicitly repeated below, with
   !important - these elements carry Bootstrap's base .btn class, and
   Bootstrap's own :active/.show rule (.btn:active, .btn.active, .btn.show)
   was still winning in practice (pressing/opening one on mobile showed a
   plain black background - Bootstrap's own default, with the newly-navy
   offcanvas showing through). !important removes any doubt about which
   rule wins. Active/pressed/open state is also given a gold ring on every
   header button below (search "gold active ring") so it reads as a clear,
   on-brand highlight instead of an accidental black flash. */
.btn-cta-t5:hover, .btn-cta-t5:focus, .btn-cta-t5:active, .btn-cta-t5.show{
  filter: brightness(1.08) !important; transform: translateY(-1px); color: #241800 !important;
  background: linear-gradient(180deg, var(--tc-gold-300), var(--tc-gold-500)) !important;
  box-shadow: none !important;
}
.btn-cta-t5:active, .btn-cta-t5.show{
  box-shadow: 0 0 0 3px rgba(255,179,0,.4) !important;
}

/* Solid-ish "glass" background (not a near-transparent tint) + a visible
   border/shadow so these buttons read clearly against any backdrop,
   animated or not - previously too washed-out/low-contrast against the
   hero (user feedback: "çok opak kalıyor, göze dikkat çekmiyor"). */
.store-btn{
  display: inline-flex; align-items: center; gap: .75rem; padding: .65rem 1.3rem;
  background: rgba(10,18,48,.72); border: 1px solid rgba(255,255,255,.3);
  color: var(--tc-text); clip-path: var(--tc-clip-store);
  box-shadow: 0 10px 26px rgba(4,10,30,.5), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.store-btn-icon{ font-size: 1.5rem; font-style: normal; color: var(--tc-gold-300); line-height: 1; }
.store-btn span{ display: flex; flex-direction: column; line-height: 1.15; }
.store-btn small{ font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tc-text-muted); }
.store-btn strong{ font-size: 1.02rem; }
.store-btn:hover{ border-color: var(--tc-gold-300); background: rgba(255,179,0,.22); color: var(--tc-text); transform: translateY(-2px); box-shadow: 0 16px 34px rgba(255,179,0,.3), inset 0 1px 0 rgba(255,255,255,.12); }
.store-btn-alt{ border-color: rgba(31,209,201,.4); }
.store-btn-alt .store-btn-icon{ color: var(--tc-turquoise); }
.store-btn-alt:hover{ border-color: var(--tc-turquoise); background: rgba(31,209,201,.2); box-shadow: 0 16px 34px rgba(31,209,201,.28), inset 0 1px 0 rgba(255,255,255,.12); }
.store-buttons-sm .store-btn{ padding: .5rem 1rem; }

/* ---------- Header ---------- */
/* .site-navbar is the SHARED class assets/js/main.js queries to toggle
   ".shadow" on scroll - this is how the fixed header goes from
   transparent to a darker, blurred bar without any new JS. */
.site-navbar{
  position: fixed; inset: 0 0 auto 0; z-index: 1030;
  transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}
.site-navbar .navbar{ padding: .9rem 0; }
.site-navbar.shadow{
  background: rgba(6,11,26,.93);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.35);
}

.nav-links .nav-link{
  font-weight: 600; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tc-text); padding: .5rem 1rem !important; position: relative;
}
.nav-links .nav-link::after{
  content: ""; position: absolute; left: 1rem; right: 1rem; bottom: .2rem; height: 2px;
  background: var(--tc-gold-300); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.nav-links .nav-link:hover::after,
.nav-links .nav-link.active::after{ transform: scaleX(1); }
.nav-links .nav-link.active, .nav-links .nav-link:hover{ color: var(--tc-gold-300); }

.social-chip{
  display: inline-grid; place-items: center; width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,.14); color: var(--tc-text-muted); font-size: 1.05rem;
  text-decoration: none; transition: color .2s ease, border-color .2s ease;
}
.social-chip:hover{ color: var(--tc-gold-300); border-color: var(--tc-gold-300); }

.lang-switcher-toggle{
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  color: var(--tc-text); border-radius: 999px; padding: .35rem .75rem; font-weight: 700; font-size: .8rem; line-height: 1;
}
.lang-switcher-toggle:hover, .lang-switcher-toggle:focus, .lang-switcher-toggle:active, .lang-switcher-toggle.show{
  background: rgba(255,255,255,.12) !important; color: #fff !important;
}
/* Gold active ring: clear "this is open/pressed" cue, on-brand instead of
   a black flash from Bootstrap's un-styled :active/.show default. */
.lang-switcher-toggle:active, .lang-switcher-toggle.show{
  background: rgba(255,179,0,.22) !important; border-color: var(--tc-gold-300) !important;
  box-shadow: 0 0 0 3px rgba(255,179,0,.4) !important;
}
.lang-switcher-toggle .lang-flag{ font-size: 1rem; line-height: 1; }
.lang-switcher-toggle::after{ margin-left: .15rem; }
.lang-switcher-menu{
  background: var(--tc-navy-800); border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: .4rem; min-width: 180px; box-shadow: var(--tc-shadow-card);
}
.lang-switcher-item{ display: flex; align-items: center; gap: .6rem; border-radius: 8px; padding: .5rem .65rem; color: var(--tc-text); font-weight: 600; font-size: .9rem; }
.lang-switcher-item .lang-flag{ font-size: 1.15rem; }
.lang-switcher-item .lang-name{ flex: 1 1 auto; }
.lang-switcher-item .lang-check{ color: var(--tc-turquoise); font-weight: 800; }
.lang-switcher-item:hover, .lang-switcher-item:focus{ background: rgba(255,255,255,.08); color: #fff; }
.lang-switcher-item.active{ background: rgba(31,209,201,.14); color: #fff; }

/* Generic Bootstrap .dropdown-menu (the "Hesabım"/account menu - the only
   dropdown here that doesn't already have its own theme class like
   .lang-switcher-menu above) - otherwise defaults to Bootstrap's plain
   white/light box, which clashes hard with this template's dark theme. */
.dropdown-menu{
  background: var(--tc-navy-800); border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: .4rem; box-shadow: var(--tc-shadow-card);
  color: var(--tc-text) !important;
}
.dropdown-item{ color: var(--tc-text) !important; border-radius: 8px; padding: .5rem .75rem; }
.dropdown-item:hover, .dropdown-item:focus{ background: rgba(255,179,0,.14); color: #fff !important; }
/* Plain <li> rows inside the menu (company name / ID - not .dropdown-item
   links) only inherited color from .dropdown-menu before; Bootstrap's own
   --bs-dropdown-color variable was winning that inheritance and rendering
   them near-black on our dark background. */
.dropdown-menu li{ color: inherit; }
.dropdown-menu .text-muted{ color: var(--tc-text-muted) !important; }
.dropdown-item.text-danger:hover, .dropdown-item.text-danger:focus{ background: rgba(220,53,69,.16); color: #ff8a93; }
.dropdown-divider{ border-color: rgba(255,255,255,.12); }

/* Mirrors .btn-login's pill/gradient shape - green instead of blue/turquoise,
   since it's the logged-in ("Hesabım") counterpart shown in its place. Shared
   by both the template5 header (_navRight.php) and pay/index.php's own
   account dropdown, so this single rule covers both. */
.btn-account{
  display: inline-flex; align-items: center; gap: .4rem;
  background: linear-gradient(135deg, var(--tc-green-400), var(--tc-green-500));
  color: #fff; font-weight: 700; font-size: .85rem; line-height: 1;
  border: none; border-radius: 999px; padding: .5rem 1.1rem; box-shadow: 0 8px 18px rgba(23,166,115,.35);
}
.btn-account:hover, .btn-account:focus, .btn-account:active, .btn-account.show{
  filter: brightness(1.08); color: #fff !important;
  background: linear-gradient(135deg, var(--tc-green-400), var(--tc-green-500)) !important;
}
.btn-account:active, .btn-account.show{
  box-shadow: 0 0 0 3px rgba(255,179,0,.4) !important;
}
.btn-login{
  display: inline-flex; align-items: center; gap: .4rem;
  background: linear-gradient(135deg, var(--tc-turquoise), var(--tc-blue-500));
  color: #fff; font-weight: 700; font-size: .85rem; line-height: 1;
  border: none; border-radius: 999px; padding: .5rem 1.1rem; box-shadow: 0 8px 18px rgba(47,107,255,.35);
}
.btn-login:hover, .btn-login:focus, .btn-login:active{
  filter: brightness(1.08); color: #fff !important;
  background: linear-gradient(135deg, var(--tc-turquoise), var(--tc-blue-500)) !important;
}
.btn-login:active{
  box-shadow: 0 0 0 3px rgba(255,179,0,.4) !important;
}

.header-bonus-tip{
  position: absolute; top: 100%; left: 50%; margin-top: 10px; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--tc-gold-300), var(--tc-gold-500));
  color: var(--tc-navy-950); font-weight: 800; font-size: .68rem; letter-spacing: .02em;
  padding: .3rem .6rem; border-radius: 8px; white-space: nowrap; box-shadow: 0 8px 18px rgba(255,179,0,.4);
  pointer-events: none; z-index: 5; animation: t5BonusTipPulse 1.8s ease-in-out infinite;
}
.header-bonus-tip::before{
  content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 7px solid var(--tc-gold-300);
}
@keyframes t5BonusTipPulse{ 0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; } 50% { transform: translateX(-50%) translateY(5px); opacity: .85; } }
@media (prefers-reduced-motion: reduce){ .header-bonus-tip{ animation: none; } }

/* ---------- Mobile menu (offcanvas) - bigger, easier-to-tap layout -----------
   Previously just inherited the desktop's small single-row nav-link/button
   sizing, which read as cramped on a phone (user feedback: "mobil menü çok
   küçük kalmış"). Below: full-width, larger tap targets for links + the
   Store/login/lang-switcher/social row, all stacked in one column. This
   only targets .offcanvas-body's own descendants, so the desktop header
   (same _navLinks.php/_navRight.php markup, reused via templateView()) is
   untouched. */
:root{ --bs-offcanvas-width: min(380px, 88vw); }
@media (max-width: 991.98px){
  .offcanvas-header{ padding: 1.1rem 1.25rem; }
  .offcanvas-body{ padding: .5rem 1.25rem 1.75rem; }

  .offcanvas-body .nav-links{
    flex-direction: column; align-items: stretch; width: 100%; gap: .2rem !important;
  }
  .offcanvas-body .nav-links .nav-item{ width: 100%; }
  .offcanvas-body .nav-links .nav-link{
    display: block; width: 100%; font-size: 1.02rem; letter-spacing: .04em;
    padding: .95rem 1rem !important; border-radius: 10px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    border-left: 3px solid transparent;
  }
  .offcanvas-body .nav-links .nav-link::after{ display: none; }
  /* Clear gold highlight for hover/active/pressed - previously a near-
     invisible 10% tint that read as "black" against the dark panel. */
  .offcanvas-body .nav-links .nav-link:hover,
  .offcanvas-body .nav-links .nav-link:active,
  .offcanvas-body .nav-links .nav-link.active{
    background: rgba(255,179,0,.16) !important;
    border-left-color: var(--tc-gold-300) !important;
    color: var(--tc-gold-300) !important;
  }

  .offcanvas-body .nav-right{
    flex-direction: column; align-items: stretch; width: 100%; gap: .65rem !important; margin-top: .5rem;
  }
  .offcanvas-body .nav-right > *{ width: 100%; }
  .offcanvas-body .social-chips{
    display: flex !important; justify-content: center; gap: .6rem !important; order: 4;
  }
  .offcanvas-body .social-chip{ width: 44px; height: 44px; font-size: 1.2rem; }
  .offcanvas-body .lang-switcher{ order: 3; }
  .offcanvas-body .lang-switcher-toggle{
    width: 100%; justify-content: center; padding: .8rem 1rem; font-size: 1rem;
  }
  .offcanvas-body .header-bonus-wrap{ order: 1; display: inline-flex !important; width: 100%; }
  .offcanvas-body .header-bonus-wrap a.btn{ width: 100%; }
  .offcanvas-body .btn-cta-t5{
    width: 100%; justify-content: center; padding: .9rem 1rem; font-size: .95rem;
  }
  .offcanvas-body .header-bonus-tip{ left: auto; right: 8px; transform: none; margin-top: 6px; }
  .offcanvas-body .btn-login,
  .offcanvas-body .btn-account{
    order: 2; width: 100%; justify-content: center; padding: .85rem 1rem; font-size: .95rem;
  }
  .offcanvas-body .dropdown{ width: 100%; order: 2; }
  .offcanvas-body .dropdown .dropdown-menu{ width: 100%; }
}

/* ---------- Floating side badges (template1's _floatingBadges.php fallback) ---------- */
.side-badges{ position: fixed; right: 12px; top: 50%; transform: translateY(-50%); z-index: 900; display: flex; flex-direction: column; gap: .7rem; }
.side-badge{
  display: flex; align-items: center; gap: .5rem;
  background: linear-gradient(135deg, var(--tc-navy-800), var(--tc-navy-700));
  border: 1px solid rgba(255,255,255,.15); color: var(--tc-text); font-weight: 700; font-size: .82rem;
  padding: .65rem 1rem; border-radius: 999px; box-shadow: var(--tc-shadow-card);
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.side-badge:hover{ transform: translateX(-4px) scale(1.03); color: #fff; background: linear-gradient(135deg, var(--tc-blue-500), var(--tc-turquoise)); }
.side-badge .side-badge-icon{ font-size: 1.15rem; line-height: 1; }
@media (max-width: 767.98px){
  .side-badges{ right: 10px; gap: .55rem; }
  .side-badge{ padding: .6rem; border-radius: 50%; width: 46px; height: 46px; justify-content: center; }
  .side-badge .side-badge-label{ display: none; }
}

/* =========================================================
   HERO - real background image (header_bg_1.webp) + several small CSS-only
   animation layers on top for a livelier feel (user feedback: hero still
   felt static), replacing the old autoplaying YouTube background video +
   right-side "play fullscreen" popup (see pages/home.php's header
   comment). Zero network weight, nothing competing with the visitor for a
   click/tap. Layers, back to front:
     1. .hero-bg-image-t5  - the photo, slow "Ken Burns" zoom
     2. .hero-anim-bg-t5   - drifting multi-colour gradient tint + particles
     3. .hero-glow-orb-t5  - two large pulsing blurred colour orbs (depth)
     4. .hero-shine-t5     - a soft diagonal light beam sweeping through
     5. .hero-text-scrim-t5 - static darkening so copy stays legible
     6. .hero-grid-overlay - faint tech grid, now slowly drifting too
   ========================================================= */
.hero-t5{ position: relative; overflow: hidden; }

/* Real artwork behind everything else (replaces the flat navy backdrop the
   CSS-only version used when there was no photo/art to show). Slow "Ken
   Burns" zoom added (user feedback: hero felt too static) - .hero-t5's
   overflow:hidden clips the extra scale so nothing overflows the section. */
.hero-bg-image-t5{
  position: absolute; inset: 0;
  /* Mobile-first: smaller portrait crop by default, matches the preload
     hint's (max-width: 767.98px) in layoutHeader.php's <head>. */
  background-image: url('/assets/img/placeholders/header_1_mobile.webp');
  background-size: cover; background-position: center;
  background-color: var(--tc-navy-950); /* shows briefly while the image loads */
}
@media (min-width: 768px){
  .hero-bg-image-t5{ background-image: url('/assets/img/placeholders/header_bg_1.webp'); }
}
@media (prefers-reduced-motion: no-preference){
  .hero-bg-image-t5{ animation: t5HeroZoom 26s ease-in-out infinite alternate; }
}
@keyframes t5HeroZoom{
  0% { transform: scale(1); }
  100% { transform: scale(1.09); }
}

/* Drifting colour glow, now a semi-transparent TINT over the photo rather
   than an opaque backdrop - keeps the "alive" animated feel without hiding
   the artwork underneath. */
.hero-anim-bg-t5{
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(1100px 700px at 15% 20%, rgba(47,107,255,.38), transparent 55%),
    radial-gradient(900px 650px at 85% 78%, rgba(31,209,201,.3), transparent 55%),
    radial-gradient(700px 500px at 68% 12%, rgba(255,179,0,.16), transparent 60%);
  background-size: 180% 180%, 180% 180%, 160% 160%;
}
@media (prefers-reduced-motion: no-preference){
  .hero-anim-bg-t5{ animation: t5HeroFlow 18s ease-in-out infinite; }
}
@keyframes t5HeroFlow{
  0%, 100% { background-position: 0% 20%, 100% 80%, 60% 10%; }
  33%      { background-position: 30% 50%, 70% 40%, 40% 30%; }
  66%      { background-position: 60% 15%, 30% 60%, 80% 20%; }
}

/* Small glowing dots drifting up through the hero, deterministic
   left/delay/duration set inline per-particle by pages/home.php. */
.hero-particle-t5{
  position: absolute; bottom: -20px; border-radius: 50%; opacity: 0;
  animation-name: t5ParticleRise; animation-timing-function: ease-in; animation-iteration-count: infinite;
}
.hero-particle-t5-gold{ background: var(--tc-gold-300); box-shadow: 0 0 8px 2px rgba(255,179,0,.55); }
.hero-particle-t5-turquoise{ background: var(--tc-turquoise); box-shadow: 0 0 8px 2px rgba(31,209,201,.55); }
.hero-particle-t5-blue{ background: var(--tc-blue-400); box-shadow: 0 0 8px 2px rgba(79,139,255,.55); }
@keyframes t5ParticleRise{
  0%   { transform: translate(0, 0) scale(.6); opacity: 0; }
  12%  { opacity: .9; }
  45%  { transform: translate(14px, -32vh) scale(1); }
  70%  { transform: translate(-10px, -50vh) scale(1); }
  88%  { opacity: .45; }
  100% { transform: translate(6px, -70vh) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){ .hero-particle-t5{ display: none; } }

/* Two large, slowly pulsing blurred glow orbs - extra depth/movement on
   top of the drifting tint + particles (user feedback: hero still felt
   too static/flat). Positioned loosely so they don't sit directly behind
   the hero copy on the left. */
.hero-glow-orb-t5{
  position: absolute; border-radius: 50%; filter: blur(50px); pointer-events: none;
}
.hero-glow-orb-t5-1{
  width: 280px; height: 280px; left: 6%; top: 12%;
  background: radial-gradient(circle, rgba(255,179,0,.32), transparent 70%);
}
.hero-glow-orb-t5-2{
  width: 340px; height: 340px; right: 4%; bottom: 8%;
  background: radial-gradient(circle, rgba(31,209,201,.28), transparent 70%);
}
@media (prefers-reduced-motion: no-preference){
  .hero-glow-orb-t5-1{ animation: t5OrbPulse 9s ease-in-out infinite; }
  .hero-glow-orb-t5-2{ animation: t5OrbPulse 9s ease-in-out infinite 3.2s; }
}
@keyframes t5OrbPulse{
  0%, 100% { transform: scale(1); opacity: .55; }
  50%      { transform: scale(1.28); opacity: .95; }
}

/* Soft diagonal light beam that sweeps across the hero every ~7s, mostly
   hidden in between sweeps - a subtle "premium mobile game store" shine
   effect rather than a constant distraction. Sweep is driven by `transform:
   translateX()` (compositor-only, GPU) instead of animating `left` (a
   layout-triggering property that also repeatedly moves the element's real
   box position - Lighthouse flagged this as a non-composited animation, and
   an infinite loop of it kept accumulating Cumulative Layout Shift for as
   long as the page stayed open). Base `left: -60%` is now a static resting
   position, not part of the animation. */
.hero-shine-t5{ position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-shine-t5::before{
  content: ""; position: absolute; top: -60%; left: -60%; width: 55%; height: 220%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.1) 45%, rgba(255,255,255,.2) 50%, rgba(255,255,255,.1) 55%, transparent 100%);
  transform: translateX(0) rotate(8deg);
}
@media (prefers-reduced-motion: no-preference){
  .hero-shine-t5::before{ animation: t5ShineSweep 7s ease-in-out infinite; }
}
@keyframes t5ShineSweep{
  /* 190vw ≈ the original left:-60% -> left:130% sweep distance (190% of
     the hero section's width, approximated as viewport width since the hero
     is full-bleed) - see comment above for why transform replaces left. */
  0%, 82%, 100% { transform: translateX(0) rotate(8deg); opacity: 0; }
  6%            { opacity: .8; }
  40%           { transform: translateX(190vw) rotate(8deg); opacity: .8; }
  50%           { opacity: 0; }
}

/* Static left-to-right darkening so hero copy stays legible regardless of
   where the animated gradient/particles currently are. */
.hero-text-scrim-t5{
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6,11,26,.85) 0%, rgba(6,11,26,.55) 45%, rgba(6,11,26,.15) 100%),
              linear-gradient(180deg, rgba(6,11,26,.35) 0%, transparent 30%, transparent 70%, var(--tc-navy-900) 100%);
}
/* Drift is driven by `transform: translate()` on an oversized inner ::before
   layer (compositor-only, GPU) instead of animating `background-position`
   directly on this element (a paint-triggering property - Lighthouse
   flagged this as a non-composited animation, and being an infinite loop it
   kept accumulating Cumulative Layout Shift for as long as the page stayed
   open). The outer element keeps its exact original box (so the mask's
   "60% 40%" center point isn't affected) and just clips the inner layer,
   which is inset by -56px (one grid tile) on every side so translating it
   up to (56px, 56px) never reveals an empty edge. */
.hero-grid-overlay{
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  mask-image: radial-gradient(70% 70% at 60% 40%, #000 30%, transparent 100%);
}
.hero-grid-overlay::before{
  content: ""; position: absolute; inset: -56px;
  background-image: linear-gradient(rgba(234,240,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(234,240,255,.04) 1px, transparent 1px);
  background-size: 56px 56px;
}
@media (prefers-reduced-motion: no-preference){
  .hero-grid-overlay::before{ animation: t5GridDrift 34s linear infinite; }
}
@keyframes t5GridDrift{
  0%   { transform: translate(0, 0); }
  100% { transform: translate(56px, 56px); }
}

/* ---------- Trailer, moved down into the Media section (template1's
   inline muted-autoplay-loop + sound-toggle concept, restyled) ---------- */
.t5-trailer-frame{
  border-radius: var(--tc-radius-lg); overflow: hidden; box-shadow: var(--tc-shadow-card);
  border: 1px solid rgba(255,255,255,.12);
}
.t5-trailer-frame iframe{ border: 0; pointer-events: none; }
.t5-trailer-toggle{
  position: absolute; right: 14px; bottom: 14px; z-index: 5;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28); background: rgba(6,11,26,.7);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; font-size: 1.2rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
.t5-trailer-toggle:hover{ background: rgba(6,11,26,.9); border-color: var(--tc-gold-300); transform: scale(1.06); }

.hero-title-t5{
  font-weight: 800; font-size: clamp(2.6rem, 7.5vw, 5.6rem); line-height: .96; letter-spacing: .01em;
  text-transform: uppercase; text-shadow: 0 8px 32px rgba(0,0,0,.6);
}
.hero-title-t5 span{ color: var(--tc-gold-300); }
.hero-sub-t5{ max-width: 540px; font-size: 1.08rem; color: #c9d3f0; margin-top: .8rem; text-shadow: 0 2px 10px rgba(0,0,0,.5); }

.hero-stats-t5 strong{ font-family: var(--tc-font-display); font-size: 2.1rem; font-weight: 800; color: var(--tc-gold-300); display: block; line-height: 1; }
.hero-stats-t5 span{ font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: #c9d3f0; }

.scroll-hint-t5{
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 3;
  color: var(--tc-text-muted); font-size: 1.6rem; line-height: 1; animation: t5Bounce 2s infinite;
}
.scroll-hint-t5:hover{ color: var(--tc-gold-300); }
@keyframes t5Bounce{ 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }
@media (prefers-reduced-motion: reduce){ .scroll-hint-t5{ animation: none; } }

/* ---------- Features ---------- */
.feature-card-t5{
  padding: 1.75rem; background: var(--tc-navy-800); border: 1px solid rgba(255,255,255,.08);
  border-top: 3px solid var(--tc-turquoise); transition: transform .25s ease, border-color .25s ease;
}
.feature-card-t5:hover{ transform: translateY(-6px); border-top-color: var(--tc-gold-300); }
.feature-icon-t5{
  display: inline-grid; place-items: center; width: 72px; height: 72px; font-size: 2.1rem;
  color: var(--tc-gold-300); background: radial-gradient(circle at 35% 30%, rgba(255,179,0,.28), rgba(255,179,0,.06));
  border: 1px solid rgba(255,179,0,.4); box-shadow: 0 0 0 1px rgba(255,179,0,.12), 0 10px 24px rgba(255,179,0,.18), inset 0 1px 0 rgba(255,255,255,.15);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); margin-bottom: 1.1rem;
  transition: transform .25s ease, box-shadow .25s ease;
}
.feature-card-t5:hover .feature-icon-t5{ transform: scale(1.08) rotate(-2deg); box-shadow: 0 0 0 1px rgba(255,179,0,.2), 0 14px 30px rgba(255,179,0,.3), inset 0 1px 0 rgba(255,255,255,.2); }
.feature-card-t5 h3{ font-size: 1.25rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.feature-card-t5 p{ color: var(--tc-text-muted); margin: 0; font-size: .92rem; }

/* ---------- Sectors (replaces the reference's hero/character cards) ----------
   Plain bordered rectangle + top accent, same treatment as .feature-card-t5 -
   the reference doesn't clip-path its cards, only buttons/badges/icons. */
.sector-card-t5{
  text-align: center; padding: 1.5rem 1rem; height: 100%;
  background: var(--tc-navy-800); border: 1px solid rgba(255,255,255,.08);
  border-top: 3px solid var(--tc-blue-500); transition: transform .25s ease, border-color .25s ease;
}
.sector-card-t5:hover{ transform: translateY(-6px); border-top-color: var(--tc-gold-300); }
.sector-card-t5-icon{
  width: 52px; height: 52px; margin: 0 auto .9rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--tc-blue-500), var(--tc-turquoise));
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.sector-card-t5 h3{ font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; margin-bottom: .35rem; }
.sector-card-t5-tag{ font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--tc-gold-300); font-weight: 700; }

/* ---------- Media slider ---------- */
.media-slider-t5{ position: relative; margin-top: 2rem; }
.slider-track-wrap-t5{ overflow: hidden; }
.slider-track-t5{ display: flex; gap: 1rem; transition: transform .45s cubic-bezier(.22,.8,.3,1); will-change: transform; }
.slide-t5{ position: relative; flex: 0 0 calc((100% - 2rem) / 3); aspect-ratio: 16/9; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.1); }
.slide-t5-trigger{ display: block; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; background: none; cursor: pointer; }
.slide-t5-trigger img{ width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.slide-t5:hover .slide-t5-trigger img{ transform: scale(1.05); }
.slide-t5::after{ content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 60%, rgba(6,11,26,.85) 100%); }

/* Screenshot lightbox (#t5ImageModal) - shared by every slide above. */
.image-lightbox-t5 .modal-content{ background: transparent; }
.image-lightbox-t5-img{ max-width: 100%; max-height: 85vh; margin: 0 auto; display: block; border-radius: var(--tc-radius-md); box-shadow: var(--tc-shadow-card); }
@media (max-width: 991.98px){ .slide-t5{ flex-basis: calc((100% - 1rem) / 2); } }
@media (max-width: 575.98px){ .slide-t5{ flex-basis: 100%; } }
.media-label-t5{ position: absolute; bottom: 10px; left: 12px; z-index: 2; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tc-text); font-weight: 700; }
.slider-arrow-t5{
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 44px; height: 44px;
  display: grid; place-items: center; background: rgba(6,11,26,.85); border: 1px solid rgba(255,255,255,.14);
  color: var(--tc-text); font-size: 1.3rem; transition: border-color .2s ease, color .2s ease;
}
.slider-arrow-t5:hover{ border-color: var(--tc-gold-300); color: var(--tc-gold-300); }
.slider-prev-t5{ left: -12px; } .slider-next-t5{ right: -12px; }
@media (max-width: 575.98px){ .slider-prev-t5{ left: 4px; } .slider-next-t5{ right: 4px; } }
.slider-dots-t5{ display: flex; justify-content: center; gap: .5rem; margin-top: 1.25rem; }
.slider-dots-t5 button{ width: 26px; height: 4px; border: none; background: rgba(255,255,255,.15); padding: 0; transition: background .2s ease; }
.slider-dots-t5 button.active{ background: var(--tc-gold-300); }

/* ---------- News ---------- */
.news-card-t5{ background: var(--tc-navy-800); border: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; overflow: hidden; cursor: pointer; transition: transform .25s ease, border-color .25s ease; }
.news-card-t5:hover, .news-card-t5:focus-visible{ transform: translateY(-6px); border-color: rgba(255,179,0,.4); outline: none; }
.news-thumb-t5{ aspect-ratio: 16/8; overflow: hidden; background: linear-gradient(135deg, var(--tc-navy-700), var(--tc-navy-800)); background-size: cover; background-position: center; }
.news-thumb-t5.is-placeholder{ display: flex; align-items: center; justify-content: center; }
.news-thumb-t5.is-placeholder img{ width: 25%; max-width: 64px; opacity: .5; object-fit: contain; filter: grayscale(1) brightness(2); }
.news-thumb-t5:not(.is-placeholder){ }
.news-body-t5{ padding: 1.4rem 1.5rem 1.5rem; display: flex; flex-direction: column; flex-grow: 1; }
.news-date-t5{ font-size: .8rem; color: var(--tc-text-muted); margin-bottom: .5rem; display: block; }
.news-card-t5 h3{ font-size: 1.1rem; font-weight: 700; color: var(--tc-text); }
.news-card-t5 p{ color: var(--tc-text-muted); font-size: .92rem; flex-grow: 1; }
.news-more-t5{ display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tc-gold-300); }
.news-more-t5 i{ transition: transform .2s ease; }
.news-card-t5:hover .news-more-t5 i{ transform: translateX(4px); }

.news-read-modal .modal-content{ background: linear-gradient(180deg, var(--tc-navy-800), var(--tc-navy-900)); color: var(--tc-text); border-radius: var(--tc-radius-lg); border: 1px solid rgba(255,255,255,.12); }
.news-read-modal .modal-header, .news-read-modal .modal-footer{ border-color: rgba(255,255,255,.12); }
.news-modal-image{ width: 100%; max-height: 280px; object-fit: cover; border-radius: var(--tc-radius-md); margin-bottom: 1rem; }
.news-modal-date{ margin-bottom: .75rem; }
.news-modal-body p{ margin-bottom: 1rem; }
.news-modal-body ul, .news-modal-body ol{ margin-bottom: 1rem; padding-left: 1.25rem; }
.news-modal-body img{ max-width: 100%; }

/* ---------- Final CTA band ---------- */
.cta-band-t5{
  position: relative; padding: 100px 0;
  background: linear-gradient(180deg, var(--tc-navy-900), var(--tc-navy-950));
  border-top: 1px solid rgba(255,255,255,.08);
}
.cta-title-t5{ font-weight: 800; font-size: clamp(1.9rem, 4.6vw, 3.2rem); letter-spacing: .03em; text-transform: uppercase; }
.cta-sub-t5{ color: #c9d3f0; font-size: 1.03rem; }

/* ---------- Footer ---------- */
.site-footer-t5{ background: var(--tc-navy-950); border-top: 1px solid rgba(255,255,255,.08); padding: 70px 0 0; }
.footer-desc{ color: var(--tc-text-muted); font-size: .95rem; max-width: 340px; }
.footer-title{ font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .92rem; margin-bottom: 1rem; color: var(--tc-gold-300); }
.footer-links{ list-style: none; padding: 0; margin: 0; }
.footer-links a{ display: inline-block; padding: .25rem 0; color: var(--tc-text-muted); text-decoration: none; font-size: .92rem; transition: color .2s ease; }
.footer-links a:hover{ color: var(--tc-gold-300); }
.footer-bottom{ margin-top: 3rem; padding: 1.25rem 0; border-top: 1px solid rgba(255,255,255,.08); font-size: .82rem; color: var(--tc-text-muted); }
.footer-bottom a{ color: var(--tc-text-muted); text-decoration: none; }
.footer-bottom a:hover{ color: var(--tc-gold-300); }

/* ---------- Back to top ---------- */
.back-to-top{
  position: fixed; right: 22px; bottom: 22px; z-index: 900; width: 46px; height: 46px;
  display: grid; place-items: center; background: linear-gradient(180deg, var(--tc-gold-300), var(--tc-gold-500));
  color: #241800; border: none; font-size: 1.2rem; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease;
}
.back-to-top.visible{ opacity: 1; pointer-events: auto; transform: translateY(0); }

/* ---------- Fixed, template-agnostic classes ----------
   pay/index.php, pay/login.php, gift-center/benefits/point-store and
   legal/*.php hardcode these class names directly (they don't go through
   templateView() for their body markup, or they predate this template),
   so every template's main.css needs to define them regardless of
   whether this template's OWN views use different naming (.btn-cta-t5,
   .store-btn, etc. above). See template3/template4's main.css for the
   same note. */
.btn-gold{
  background: linear-gradient(180deg, var(--tc-gold-300), var(--tc-gold-500));
  color: #241800; font-weight: 800; border: none; border-radius: 14px;
  padding: .85rem 1.75rem; box-shadow: 0 10px 25px rgba(255,179,0,.35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-gold:hover{ transform: translateY(-2px); box-shadow: 0 16px 32px rgba(255,179,0,.45); color: #241800; }
.btn-outline-brand{
  border: 2px solid rgba(255,255,255,.35); color: var(--tc-text); border-radius: 14px;
  padding: .8rem 1.6rem; font-weight: 700; background: rgba(255,255,255,.04);
}
.btn-outline-brand:hover{ border-color: var(--tc-turquoise); color: var(--tc-turquoise); }
.btn-cta-download{
  background: linear-gradient(135deg, var(--tc-blue-500), var(--tc-turquoise));
  color: #fff; font-weight: 700; border: none; border-radius: 999px; padding: .45rem 1.1rem;
}
.btn-cta-download:hover{ filter: brightness(1.1); color: #fff; }
.tc-card{
  background: linear-gradient(180deg, var(--tc-navy-800), var(--tc-navy-900));
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--tc-radius-md);
  box-shadow: var(--tc-shadow-card); padding: 1.6rem; height: 100%;
}
.tc-card h3{ font-size: 1.1rem; font-weight: 800; margin-bottom: .5rem; }
.tc-card p{ color: var(--tc-text-muted); font-size: .92rem; }

/* Login card (used by /pay/login.php) */
.auth-shell{
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem;
  background:
    radial-gradient(circle at 20% 20%, rgba(47,107,255,.35), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(31,209,201,.25), transparent 45%),
    var(--tc-navy-900);
}
.auth-card{
  width: min(480px, 100%); background: var(--tc-navy-800); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--tc-radius-lg); box-shadow: var(--tc-shadow-card); padding: 2rem;
}
.skeleton{ position: relative; overflow: hidden; background: rgba(255,255,255,.06); border-radius: 10px; }
.skeleton::after{
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  animation: t5SkeletonShine 1.4s infinite;
}
@keyframes t5SkeletonShine{ 100% { transform: translateX(100%); } }
.tc-spinner{ width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 3px solid rgba(255,255,255,.2); border-top-color: var(--tc-turquoise); animation: t5Spin .8s linear infinite; }
@keyframes t5Spin{ to { transform: rotate(360deg); } }

/* utility */
.text-gold{ color: var(--tc-gold-300) !important; }
.text-turquoise{ color: var(--tc-turquoise) !important; }
.bg-navy-800{ background: var(--tc-navy-800) !important; }

@media (max-width: 991.98px){
  /* .offcanvas (not just .offcanvas-body) so the header row - where the
     logo sits - is the same navy as the rest of the panel instead of
     Bootstrap's default near-black (see layoutHeader.php's note on why
     "text-bg-dark" was removed from the markup). */
  .navbar-collapse, .offcanvas{ background: var(--tc-navy-900); color: var(--tc-text); }
}
@media (max-width: 576px){
  .section{ padding: 3.5rem 0; }
}