/* =========================================================
   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,
   autoplaying hero video, 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.

   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-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;
}
.btn-cta-t5:hover{ filter: brightness(1.08); transform: translateY(-1px); color: #241800; }

.store-btn{
  display: inline-flex; align-items: center; gap: .75rem; padding: .6rem 1.2rem;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14);
  color: var(--tc-text); clip-path: var(--tc-clip-store);
  transition: border-color .2s ease, background .2s ease, transform .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,.1); color: var(--tc-text); transform: translateY(-2px); }
.store-btn-alt .store-btn-icon{ color: var(--tc-turquoise); }
.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{ background: rgba(255,255,255,.12); color: #fff; }
.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; }

.btn-account{ background: rgba(255,255,255,.08); color: var(--tc-text); border: 1px solid rgba(255,255,255,.15); }
.btn-account:hover{ background: rgba(255,255,255,.16); color: #fff; }
.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{ filter: brightness(1.08); color: #fff; }

.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; } }

@media (max-width: 991.98px){
  .offcanvas .nav-links{ flex-direction: column; }
}

/* ---------- 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 - autoplaying muted background video (16:9 "cover" trick, no JS
   needed for the sizing) + a right-side play button that opens a
   sound-on popup (see #t5VideoModal + template5Home.js).
   ========================================================= */
.hero-t5{ position: relative; overflow: hidden; }

.hero-video-bg{ position: absolute; inset: 0; overflow: hidden; background: var(--tc-navy-950); }
.hero-video-bg iframe{
  position: absolute; top: 50%; left: 50%;
  width: 100vw; height: 100vh; min-width: 100%; min-height: 100%;
  transform: translate(-50%, -50%); border: 0; pointer-events: none;
}
@media (min-aspect-ratio: 16/9){ .hero-video-bg iframe{ height: 56.25vw; } }
@media (max-aspect-ratio: 16/9){ .hero-video-bg iframe{ width: 177.78vh; } }

.hero-video-overlay{
  position: absolute; inset: 0;
  background:
    radial-gradient(1100px 600px at 78% 30%, rgba(255,179,0,.1), transparent 60%),
    linear-gradient(90deg, rgba(6,11,26,.94) 0%, rgba(6,11,26,.8) 45%, rgba(6,11,26,.4) 100%),
    linear-gradient(180deg, rgba(6,11,26,.5) 0%, transparent 30%, transparent 70%, var(--tc-navy-900) 100%);
}
.hero-grid-overlay{
  position: absolute; inset: 0; pointer-events: none;
  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;
  mask-image: radial-gradient(70% 70% at 60% 40%, #000 30%, transparent 100%);
}

.hero-play-side{
  position: absolute; top: 50%; right: clamp(160px, 34vw, 480px); transform: translateY(-50%); z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  background: none; border: none; color: var(--tc-text); cursor: pointer;
}
.hero-play-side-icon{
  position: relative; width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--tc-gold-300), var(--tc-gold-500)); color: #241800; font-size: 1.5rem;
  box-shadow: 0 12px 28px rgba(255,179,0,.5); transition: transform .15s ease;
}
.hero-play-side-icon::before{
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--tc-gold-300);
  animation: t5PlayPulse 2.2s ease-out infinite; z-index: -1;
}
.hero-play-side:hover .hero-play-side-icon{ transform: scale(1.08); }
.hero-play-side-label{ font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--tc-text-muted); max-width: 90px; text-align: center; }
@keyframes t5PlayPulse{
  0% { transform: scale(1); opacity: .55; }
  100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){ .hero-play-side-icon::before{ animation: none; } }
@media (max-width: 767.98px){
  .hero-play-side{ right: 12px; top: 20%; transform: none; }
  .hero-play-side-icon{ width: 58px; height: 58px; font-size: 1.2rem; }
  .hero-play-side-label{ display: none; }
}
.hero-video-modal.modal-fullscreen .modal-content{ display: flex; align-items: center; justify-content: center; }
.hero-video-modal-frame{ width: min(92vw, 92vh * 16 / 9); margin: 0 auto; }

.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-950);
}
.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){
  .navbar-collapse, .offcanvas-body{ background: var(--tc-navy-900); }
}
@media (max-width: 576px){
  .section{ padding: 3.5rem 0; }
  .hero-play-side-label{ display: none; }
}