/* ===================================================================
   LAST WAR: SEZON 3 — REHBER SİTESİ
   Tasarım: koyu çöl gecesi zemini + altın kurdele başlıklar (PDF'ten)
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800;900&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600;700&display=swap');

:root{
  --bg:            #14110d;
  --bg-soft:       #1b1712;
  --panel:         #211c15;
  --panel-2:       #262019;
  --border:        #3a3122;
  --border-soft:   #2c2519;

  --gold:          #f0c14b;
  --gold-2:        #d99a2b;
  --gold-deep:     #8a5a12;
  --sand:          #e7d3a1;
  --ink:           #241a08;

  --teal:          #35c9b8;
  --teal-deep:     #1a7d72;
  --red:           #e2483a;
  --green:         #4caf6d;
  --blue:          #4a90d9;
  --gray:          #7c766c;

  --text:          #f3ecdd;
  --text-dim:      #c9bfa9;
  --text-mute:     #8f8672;

  --radius-sm:     10px;
  --radius-md:     16px;
  --radius-lg:     26px;

  --shadow-1:      0 10px 30px -12px rgba(0,0,0,.55);
  --shadow-2:      0 20px 50px -18px rgba(0,0,0,.65);

  --maxw:          1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:
    radial-gradient(1100px 620px at 12% -10%, rgba(240,193,75,.07), transparent 60%),
    radial-gradient(900px 700px at 100% 0%, rgba(53,201,184,.06), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:'Manrope', sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font-family:inherit; }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 20px; }

h1,h2,h3,h4{ font-family:'Cinzel', serif; margin:0; color:var(--sand); letter-spacing:.02em; }

::selection{ background:var(--gold); color:var(--ink); }

/* focus visibility */
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid var(--teal); outline-offset:3px; border-radius:6px;
}
/*
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
*/
/* ===================== TOP BAR ===================== */
.topbar{
  position:sticky; top:0; z-index:60;
  background:linear-gradient(180deg, rgba(20,17,13,.97), rgba(20,17,13,.93));
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
}
.topbar-inner{
  max-width:var(--maxw); margin:0 auto; padding:12px 20px;
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:18px;
}
.brand{ display:flex; align-items:center; gap:10px; cursor:pointer; background:none; border:none; color:inherit; padding:0; }
.brand-badge{
  width:38px; height:38px; border-radius:9px; flex:none;
  background:conic-gradient(from 220deg, var(--gold), var(--gold-2), #b97a1f, var(--gold));
  display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.35), var(--shadow-1);
  font-family:'Cinzel',serif; font-weight:800; color:var(--ink); font-size:16px;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.1; text-align:left; }
.brand-text b{ font-family:'Cinzel',serif; font-size:15px; letter-spacing:.04em; color:var(--gold); }
.brand-text span{ font-size:10.5px; color:var(--text-mute); letter-spacing:.14em; text-transform:uppercase; }

.nav{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; gap:4px; }
.navside{ display:flex; align-items:center; gap:10px; }
/* =========================
   LANGUAGE DROPDOWN
   ========================= */

.lang-dropdown {
  position: relative;
  z-index: 1000;
}

/* Selected language button */

.lang-selected {
  display: flex;
  align-items: center;
  gap: 7px;

  min-width: 78px;
  height: 38px;

  padding: 0 11px;

  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 9px;

  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;

  cursor: pointer;

  transition:
    border-color .2s ease,
    background .2s ease;
}

.lang-selected:hover {
  border-color: var(--gold);
}

.lang-icon {
  font-size: 14px;
  line-height: 1;
}

.lang-arrow {
  margin-left: auto;
  font-size: 13px;
  transition: transform .2s ease;
}

/* Arrow rotation */

.lang-dropdown.open .lang-arrow {
  transform: rotate(180deg);
}

/* Dropdown menu */

.lang-menu {
  position: absolute;

  top: calc(100% + 8px);
  right: 0;

  width: 190px;

  padding: 6px;

  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;

  box-shadow: 0 12px 35px rgba(0, 0, 0, .35);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);

  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility .18s ease;
}

/* Open state */

.lang-dropdown.open .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Language option */

.lang-option {
  width: 100%;

  display: flex;
  align-items: center;

  gap: 10px;

  padding: 9px 10px;

  border: 0;
  border-radius: 8px;

  background: transparent;

  color: var(--text-mute);

  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;

  cursor: pointer;

  text-align: left;

  transition:
    background .15s ease,
    color .15s ease;
}

.lang-option > span:first-child {
  font-size: 15px;
  width: 20px;
}

.lang-option > span:nth-child(2) {
  flex: 1;
}

.lang-option strong {
  font-size: 10px;
  opacity: .55;
}

/* Hover */

.lang-option:hover {
  background: var(--panel-2);
  color: var(--text);
}

/* Active language */

.lang-option.active {
  background: var(--gold);
  color: var(--ink);
}

.lang-option.active strong {
  opacity: .8;
}

.nav-link{
  background:none; border:none; color:var(--text-dim); cursor:pointer;
  font-size:13px; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  padding:10px 9px; border-radius:8px; position:relative; white-space:nowrap;
}
.nav-link:hover{ color:var(--gold); background:rgba(240,193,75,.08); }
.nav-link.active{ color:var(--ink); background:var(--gold); }

.nav-dropdown{ position:relative; }
.nav-dropdown > .nav-link::after{ content:'▾'; margin-left:6px; font-size:10px; opacity:.8; }
.dropdown-panel{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(-6px);
  min-width:250px; max-height:0; overflow:hidden; opacity:0; pointer-events:none;
  background:var(--panel-2); border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-2); padding:0; transition:opacity .18s ease, transform .18s ease, max-height .22s ease;
  z-index:70;
}
.nav-dropdown.open .dropdown-panel{
  max-height:70vh; opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);
  overflow-y:auto; padding:8px;
}
.dropdown-item{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:none; border:none; color:var(--text-dim); padding:10px 12px; border-radius:9px;
  cursor:pointer; font-size:13.5px; font-weight:600; font-family:'Manrope',sans-serif;
}
.dropdown-item:hover{ background:rgba(240,193,75,.1); color:var(--gold); }
.dropdown-item.active{ background:var(--gold); color:var(--ink); }
.dropdown-item .dnum{
  font-family:'JetBrains Mono',monospace; font-size:11px; width:26px; height:26px; border-radius:7px;
  background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; flex:none;
}
.dropdown-item.active .dnum{ background:rgba(0,0,0,.18); }
.dropdown-sep{ height:1px; background:var(--border); margin:6px 4px; }

.burger{ display:none; background:none; border:1px solid var(--border); color:var(--gold); width:40px; height:40px; border-radius:9px; font-size:18px; cursor:pointer; }

/* ===================== RIBBON HEADERS ===================== */
.page-hero-band{
  position:relative; margin:-52px 0 34px; padding:60px 20px 40px; overflow:hidden; isolation:isolate;
}
.page-hero-band::before{
  content:''; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(560px 220px at 50% 6%, rgba(240,193,75,.16), transparent 70%),
    radial-gradient(420px 200px at 15% 40%, rgba(53,201,184,.06), transparent 70%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.015) 0 2px, transparent 2px 26px);
}
.page-hero-band::after{
  content:''; position:absolute; left:50%; bottom:6px; width:min(70%,520px); height:1px; transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, rgba(240,193,75,.55), transparent);
}
.page-hero-band .ornament{
  position:absolute; top:64px; font-size:20px; color:rgba(240,193,75,.35); letter-spacing:0;
}
.page-hero-band .ornament.left{ left:calc(50% - 210px); }
.page-hero-band .ornament.right{ right:calc(50% - 210px); }
.ribbon-wrap{
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin:0; position:relative; z-index:1;
}
.ribbon-wrap::before,.ribbon-wrap::after{
  content:''; flex:none; width:8px; height:8px; transform:rotate(45deg);
  background:linear-gradient(135deg, var(--gold), var(--gold-2));
  box-shadow:0 0 0 1px rgba(138,90,18,.6), 0 0 12px rgba(240,193,75,.4);
}
.ribbon{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:16px 58px;
  color:var(--ink); font-family:'Cinzel', serif; font-weight:800; font-size:clamp(18px,3vw,28px);
  letter-spacing:.07em; text-transform:uppercase;
  clip-path:polygon(26px 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 26px 100%, 0 50%);
  background:
    linear-gradient(160deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 32%),
    linear-gradient(180deg, #ffe497 0%, var(--gold) 42%, var(--gold-2) 78%, #a9701c 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.45),
    inset 0 -18px 22px -12px rgba(0,0,0,.4),
    inset 0 0 0 1px rgba(138,90,18,.55);
  filter:
    drop-shadow(0 16px 26px rgba(0,0,0,.55))
    drop-shadow(0 0 22px rgba(240,193,75,.2));
}
.ribbon::before{
  content:''; position:absolute; inset:0; left:-30%; width:34%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent);
  mix-blend-mode:overlay;
  animation:ribbon-sheen 1.5s ease-out .3s 1 both;
}
@keyframes ribbon-sheen{
  from{ transform:translateX(0); }
  to{ transform:translateX(420%); }
}
@media (prefers-reduced-motion: reduce){
  .ribbon::before{ animation:none; }
}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace;
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal);
  background:rgba(53,201,184,.1); border:1px solid rgba(53,201,184,.3);
  padding:6px 12px; border-radius:999px; margin-bottom:14px;
}
.eyebrow.gold{ color:var(--gold); background:rgba(240,193,75,.1); border-color:rgba(240,193,75,.35); }

/* ===================== HERO ===================== */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--border-soft); }
.hero-media{ position:relative; width:100%; aspect-ratio:16/8.4; max-height:560px; overflow:hidden; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 35%; }
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,17,13,.15) 0%, rgba(20,17,13,.55) 55%, var(--bg) 100%);
}
.hero-content{
  position:relative; margin-top:-190px; z-index:2;
  max-width:var(--maxw); margin-inline:auto; padding:0 20px 10px;
}
.hero-title{
  font-size:clamp(30px, 5.4vw, 58px); line-height:1.05; color:var(--gold);
  text-shadow:0 4px 22px rgba(0,0,0,.7);
}
.hero-title small{ display:block; font-size:.36em; color:var(--sand); letter-spacing:.32em; margin-bottom:10px; }
.hero-desc{
  max-width:760px; margin-top:18px; color:var(--text-dim); font-size:15.5px;
}
.hero-credits{
  margin-top:22px; display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  font-family:'JetBrains Mono',monospace; font-size:12px;
}
.hero-credits .lbl{ color:var(--text-mute); letter-spacing:.1em; text-transform:uppercase; margin-right:2px; }
.credit-chip{
  padding:6px 12px; border-radius:999px; background:rgba(240,193,75,.08);
  border:1px solid rgba(240,193,75,.32); color:var(--gold); font-weight:700; letter-spacing:.03em;
}

/* class toggle buttons */
.class-picks{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:34px 0 0; }
.class-btn{
  cursor:pointer; border:1px solid var(--border); background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border-radius:var(--radius-md); padding:18px 20px; display:flex; align-items:center; gap:14px;
  text-align:left; transition:border-color .15s ease, transform .15s ease, background .15s ease;
  color:var(--text);
}
.class-btn:hover{ border-color:var(--gold-2); transform:translateY(-2px); }
.class-btn.active{ border-color:var(--gold); background:linear-gradient(180deg, rgba(240,193,75,.14), var(--panel)); }
.class-btn .cicon{
  width:46px; height:46px; border-radius:11px; flex:none; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 30% 30%, #3a3122, #201a10); font-size:22px;
  border:1px solid var(--border);
}
.class-btn .clabel{ display:flex; flex-direction:column; gap:2px; }
.class-btn .clabel b{ font-family:'Cinzel',serif; font-size:16px; letter-spacing:.02em; color:var(--sand); }
.class-btn .clabel span{ font-size:12px; color:var(--text-mute); }
.class-btn .chev{ margin-left:auto; color:var(--text-mute); transition:transform .2s ease; }
.class-btn.active .chev{ transform:rotate(180deg); color:var(--gold); }

.class-panel{
  max-height:0; overflow:hidden; opacity:0; transition:max-height .38s ease, opacity .3s ease, margin .3s ease;
  border-radius:var(--radius-md); border:1px solid transparent;
}
.class-panel.open{
  max-height:4200px; opacity:1; margin-top:16px; border-color:var(--border);
  background:var(--panel);
}
.class-panel-inner{ padding:14px; }
.class-panel-scroll{
  max-height:74vh; overflow:auto; border-radius:12px; border:1px solid var(--border-soft);
  background:#0e0c09; cursor:zoom-in;
}
.class-panel-hint{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px;
  font-size:12px; color:var(--text-mute);
}
.class-panel-hint .close-x{
  border:1px solid var(--border); background:var(--panel-2); color:var(--text-dim); border-radius:8px;
  padding:6px 12px; cursor:pointer; font-size:12px; font-weight:700;
}

/* season comparison (overview page, collapsible, real 2-column table) */
.compare-wrap{ margin-top:22px; }
.compare-intro{ margin:0 0 18px; color:var(--text-dim); font-size:14px; }

.compare-table{
  display:grid; grid-template-columns:minmax(160px,1fr) minmax(160px,1fr) minmax(220px,1.6fr);
  position:relative; border:1px solid var(--border-soft); overflow:hidden;
  clip-path:polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
}
.compare-table::after{
  content:''; position:absolute; inset:0; opacity:.04; mix-blend-mode:overlay; pointer-events:none; z-index:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.7) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 1px, transparent 1px 2px);
  background-size:3px 3px;
}
.ct-head{ display:contents; }
.ct-head > div{
  position:relative; z-index:1; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold); padding:12px 16px; border-bottom:1px solid rgba(240,193,75,.35);
  background:linear-gradient(180deg, rgba(240,193,75,.14), rgba(240,193,75,.04));
}
.compare-row{ display:contents; }
.compare-row > .ct-cell{
  position:relative; z-index:1; padding:14px 16px; border-bottom:1px solid var(--border-soft);
  display:flex; align-items:center; gap:8px; font-size:13.5px; background:var(--panel);
}
.compare-row:nth-child(even) > .ct-cell{ background:var(--panel-2); }
.compare-row:last-child > .ct-cell{ border-bottom:none; }
.ct-s2 b{ color:var(--text-dim); font-family:'Cinzel',serif; font-size:14px; font-weight:700; }
.ct-s3 b{ color:var(--gold); font-family:'Cinzel',serif; font-size:14px; font-weight:700; }
.ct-note{ color:var(--text-mute); line-height:1.5; }
.cbadge{
  width:26px; height:26px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  font-size:13px; background:radial-gradient(circle at 30% 30%, #3a3122, #201a10); border:1px solid var(--border);
}
.cbadge.gold{ border-color:var(--gold-2); }

/* mobile: collapse the 3-col table into stacked dossier cards, same markup */
@media (max-width:720px){
  .compare-table{ display:block; border:none; clip-path:none; }
  .ct-head{ display:none; }
  .compare-row{
    display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; position:relative;
    background:var(--panel-2); border:1px solid var(--border-soft); border-left:3px solid var(--gold-2);
    padding:14px 16px; margin-bottom:10px; clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  }
  .compare-row:nth-child(even){ border-left-color:var(--teal); }
  .compare-row > .ct-cell{ padding:0; border:none; background:none; }
  .ct-s2::after{ content:'→'; margin-left:8px; color:var(--gold-2); }
  .ct-note{ flex-basis:100%; margin-top:4px; font-size:13px; }
}
[dir="rtl"] .compare-table{ direction:rtl; }
[dir="rtl"] .compare-row{ border-left:none; border-right:3px solid var(--gold-2); }
[dir="rtl"] .compare-row:nth-child(even){ border-right-color:var(--teal); }

/* ===================== SECTIONS / PAGES ===================== */
main{ padding:52px 0 90px; }
.page{ display:none; animation:fadein .35s ease; }
.page.active{ display:block; }
@keyframes fadein{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }

.section-intro{
  max-width:800px; margin:0 auto 40px; text-align:center; color:var(--text-dim); font-size:15.5px;
}
.section-intro b{ color:var(--sand); }

/* overview grid */
.grid-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.ocard{
  background:var(--panel); border:1px solid var(--border-soft); border-radius:var(--radius-md);
  overflow:hidden; box-shadow:var(--shadow-1);
}
.ocard-media{ aspect-ratio:16/10; overflow:hidden; background:#0e0c09; }
.ocard-media img{ width:100%; height:100%; object-fit:cover; }
.ocard-body{ padding:18px 20px 22px; }
.ocard-body h3{ font-size:16.5px; color:var(--gold); margin-bottom:9px; line-height:1.3; }
.ocard-body p{ margin:0; color:var(--text-dim); font-size:14px; }

/* week header block */
.week-head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px;
  margin-bottom:8px;
}
.week-head h2{ font-size:clamp(22px,3.4vw,32px); color:var(--gold); }
.week-range{
  font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--teal);
  background:rgba(53,201,184,.1); border:1px solid rgba(53,201,184,.3); padding:6px 12px; border-radius:999px;
}
.week-lede{ color:var(--text-dim); margin:14px 0 36px; max-width:900px; font-size:15px; }

/* generic feature/event card */
.stack{ display:flex; flex-direction:column; gap:26px; }
.feature{
  background:var(--panel); border:1px solid var(--border-soft); border-radius:var(--radius-md);
  padding:24px; box-shadow:var(--shadow-1); position:relative; overflow:hidden;
}
.feature::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--gold-2); }
.feature.teal::before{ background:var(--teal); }
.feature.red::before{ background:var(--red); }
.feature.green::before{ background:var(--green); }
.feature-top{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.feature-num{
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:12px; color:var(--ink);
  background:var(--gold); width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex:none;
}
.feature h3{ font-size:18px; color:var(--sand); }
.feature p{ margin:0 0 10px; color:var(--text-dim); font-size:14.5px; }
.feature p:last-child{ margin-bottom:0; }
.feature-media{ margin-top:16px; display:grid; gap:12px; align-items:start; }
.feature-media.two{ grid-template-columns:1fr 1fr; }
.feature-media.three{ grid-template-columns:repeat(3,1fr); }
.feature-media.four{ grid-template-columns:repeat(4,1fr); }
.feature-media img{ border-radius:12px; border:1px solid var(--border-soft); width:100%; height:auto; max-height:460px; object-fit:contain; display:block; background:#0e0c09; margin:0 auto; }
.feature-media figcaption{ margin-top:6px; font-size:11.5px; color:var(--text-mute); text-align:center; }
.feature-media figure{ margin:0; }

/* two column layout with media */
.split{ display:grid; grid-template-columns:1.15fr .85fr; gap:22px; align-items:stretch; }
.split .feature-media{ margin-top:0; }
.split.reverse{ grid-template-columns:.85fr 1.15fr; }
.split.reverse .media-col{ order:-1; }
.media-col{ border-radius:12px; overflow:hidden; background:#0e0c09; display:flex; align-items:center; justify-content:center; }
.media-col img{ border-radius:12px; border:1px solid var(--border-soft); width:100%; height:100%; min-height:260px; max-height:400px; object-fit:contain; background:#0e0c09; }

/* callout boxes */
.callout{
  border-radius:12px; padding:16px 18px; font-size:14px; display:flex; gap:12px; align-items:flex-start;
  border:1px solid; margin-top:16px;
}
.callout .cico{ font-size:18px; line-height:1; flex:none; margin-top:1px; }
.callout p{ margin:0; }
.callout.warn{ background:rgba(240,193,75,.09); border-color:rgba(240,193,75,.35); color:var(--sand); }
.callout.info{ background:rgba(74,144,217,.1); border-color:rgba(74,144,217,.35); color:#cfe3f7; }
.callout.market{ background:rgba(53,201,184,.09); border-color:rgba(53,201,184,.32); color:#cdf3ec; }
.callout.danger{ background:rgba(226,72,58,.1); border-color:rgba(226,72,58,.35); color:#f6cfca; }

/* building grid (sezon binaları) */
.bgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:16px; }
.bcard{ background:var(--panel-2); border:1px solid var(--border-soft); border-radius:14px; padding:14px; text-align:center; }
.bcard img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:11px; margin-bottom:10px; background:#0e0c09; }
.bcard h4{ font-size:13.5px; color:var(--gold); margin-bottom:6px; line-height:1.3; }
.bcard p{ font-size:12.5px; color:var(--text-mute); margin:0; }

/* mini stat pills row (badges legend) */
.legend{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 30px; }
.legend span{
  font-size:12px; font-weight:700; padding:6px 12px; border-radius:999px; border:1px solid var(--border);
  color:var(--text-dim); display:inline-flex; align-items:center; gap:6px;
}
.dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.dot.g{ background:var(--green); } .dot.o{ background:var(--gold-2); } .dot.r{ background:var(--red); } .dot.b{ background:var(--blue); } .dot.gray{ background:var(--gray); }

/* week nav (prev/next) */
.week-pager{ display:flex; justify-content:space-between; gap:14px; margin-top:46px; }
.pager-btn{
  flex:1; display:flex; flex-direction:column; gap:4px; padding:14px 16px; border-radius:12px;
  border:1px solid var(--border); background:var(--panel); cursor:pointer; text-align:left; color:var(--text-dim);
}
.pager-btn:hover{ border-color:var(--gold-2); }
.pager-btn.next{ text-align:right; align-items:flex-end; }
.pager-btn .plbl{ font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-mute); }
.pager-btn .pname{ font-family:'Cinzel',serif; color:var(--gold); font-size:14.5px; }

/* özel silahlar page */
.weapon-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.wcard{ background:var(--panel); border:1px solid var(--border-soft); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-1); display:flex; flex-direction:column; }
.wcard img{ width:100%; aspect-ratio:16/8; object-fit:cover; }
.wcard-body{ padding:18px 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.wcard-tag{ align-self:flex-start; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; color:var(--ink); background:var(--gold); padding:4px 10px; border-radius:999px; font-weight:700; }
.wcard-body h3{ font-size:17px; color:var(--sand); }
.wcard-body p{ margin:0; font-size:13.5px; color:var(--text-dim); }

.rules-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:26px; }

/* first day strategy */
.chiplist{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.chip-card{ background:var(--panel-2); border:1px solid var(--border-soft); border-radius:12px; padding:16px; }
.chip-card .chead{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.chip-card .chead .ico{ width:30px; height:30px; border-radius:8px; background:rgba(240,193,75,.14); display:flex; align-items:center; justify-content:center; font-size:15px; }
.chip-card h4{ font-size:14px; color:var(--gold); }
.chip-card p{ margin:0; font-size:13px; color:var(--text-dim); }

.icon-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:16px; }
.icon-card{ text-align:center; }
.icon-card img{ border-radius:14px; border:1px solid var(--border-soft); aspect-ratio:1/1; object-fit:cover; margin-bottom:10px; background:#0e0c09; }
.icon-card h4{ font-size:13px; color:var(--gold); margin-bottom:4px; }
.icon-card p{ font-size:12px; color:var(--text-mute); margin:0; }

.tip-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
.tip-card{ background:var(--panel-2); border:1px solid var(--border-soft); border-radius:12px; padding:16px 18px; }
.tip-card h4{ font-size:14.5px; color:var(--sand); margin-bottom:8px; }
.tip-card ul{ margin:0; padding-left:18px; color:var(--text-dim); font-size:13.5px; }
.tip-card li{ margin-bottom:5px; }
.tip-card li:last-child{ margin-bottom:0; }
.tip-card p{ margin:0; font-size:13.5px; color:var(--text-dim); }
.tip-thumb{ width:100%; max-width:260px; border-radius:10px; margin-bottom:12px; border:1px solid var(--border-soft); }

.tip-card-horizontal {
  display: flex;
  align-items: center; /* Görsel ve metni dikeyde ortalar */
  gap: 1.5rem; /* Resim ile yazı arasındaki boşluk */
}

.tip-card-horizontal .tip-thumb {
  width: 180px; /* Resmin genişliğini sabitleyin (isteğe göre değiştirebilirsiniz) */
  height: auto;
  flex-shrink: 0; /* Resmin sıkışmasını önler */
  margin-bottom: 0; /* Eğer alt boşluk kaldıysa sıfırlar */
}

.tip-card-horizontal .tip-content {
  flex: 1; /* Yazı alanının kalan tüm genişliği kaplamasını sağlar */
}

.check-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:8px; }
.check-card{ background:var(--panel-2); border:1px solid var(--border-soft); border-radius:12px; padding:16px; }
.check-card b{ display:flex; align-items:center; gap:8px; color:var(--gold); font-size:13.5px; margin-bottom:6px; }
.check-card p{ margin:0; font-size:12.5px; color:var(--text-dim); }

/* prominent tip/note highlight block */
.tip-highlight{ background:linear-gradient(180deg, rgba(240,193,75,.13), rgba(240,193,75,.03)); border:1px solid rgba(240,193,75,.4); }
.tip-highlight::before{ background:var(--gold); width:5px; }
.tip-kicker{
  display:inline-flex; align-items:center; gap:6px; font-family:'JetBrains Mono',monospace; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink); background:var(--gold);
  padding:5px 12px; border-radius:999px; margin-bottom:12px; font-weight:700;
}

/* footer */
footer{ border-top:1px solid var(--border-soft); padding:30px 0 38px; background:var(--bg-soft); }
.footer-inner{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; }
.footer-note{ font-size:12.5px; color:var(--text-mute); max-width:520px; }
.footer-credits{ display:flex; gap:0; flex-wrap:wrap; align-items:baseline; }
.footer-credits .lbl{ font-size:11px; color:var(--text-mute); letter-spacing:.08em; text-transform:uppercase; margin-right:10px; }
.footer-credits .credit-name{
  position:relative; background:none; border:none; padding:0 12px; cursor:pointer;
  font-family:'Cinzel',serif; font-size:13px; letter-spacing:.05em; color:var(--sand);
  border-right:1px solid var(--border-soft); transition:color .15s ease;
}
.footer-credits .credit-name:last-child{ border-right:none; }
.footer-credits .credit-name:hover{ color:var(--gold); }
[dir="rtl"] .footer-credits .credit-name{ border-right:none; border-left:1px solid var(--border-soft); }
[dir="rtl"] .footer-credits .credit-name:last-child{ border-left:none; }

/* firework / spark burst click effect */
/* firework / spark burst click effect */


.overlord-banner {
  width: 100%;
  margin: 16px auto 0;
}

.overlord-banner img {
  width: 100%;
  height: 300px;
  display: block;
  object-fit: cover;
  border-radius: 12px;
  cursor: pointer;
}
.overlord-skill-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 1484 / 1060;
    object-fit: contain;
    display: block;
    border-radius: 12px;
}
/* =========================================
   OVERLORD GORILLA - YETENEKLER
   3 ÜSTTE + 2 ALTTA
   ========================================= */

#page-overlord .icon-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

#page-overlord .overlord-skill-card {
    grid-column: span 2;
    width: 100%;
}

#page-overlord .overlord-skill-card:nth-child(4) {
    grid-column: 2 / span 2;
}

#page-overlord .overlord-skill-card:nth-child(5) {
    grid-column: 4 / span 2;
}

#page-overlord .overlord-skill-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 1484 / 1060;
    object-fit: contain;
    display: block;
    border-radius: 12px;
}

#page-overlord .overlord-skill-card h4 {
    margin-top: 10px;
    text-align: center;
}
@media (max-width: 768px) {
    #page-overlord .icon-row {
        grid-template-columns: 1fr;
    }

    #page-overlord .overlord-skill-card,
    #page-overlord .overlord-skill-card:nth-child(4),
    #page-overlord .overlord-skill-card:nth-child(5) {
        grid-column: 1;
    }
}
.spark-burst{
  position:fixed;
  width:0;
  height:0;
  pointer-events:none;
  z-index:99999;
}

.spark-burst i{
  position:absolute;
  left:0;
  top:0;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--dot-color, var(--gold));
  box-shadow:0 0 8px var(--dot-color, var(--gold));
  animation:spark-fly .8s cubic-bezier(.15,.6,.4,1) forwards;
}

@keyframes spark-fly{
  0%{
    transform:translate(-50%,-50%) scale(1.2);
    opacity:1;
  }

  70%{
    opacity:1;
  }

  100%{
    transform:translate(var(--dx),var(--dy)) scale(0);
    opacity:0;
  }
}

.rocket-effect {
    position: fixed;
    z-index: 99999;
    font-size: 32px;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: rocketLaunch 1.2s ease-out forwards;
}

@keyframes rocketLaunch {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    20% {
        transform: translate(-50%, -70%) scale(1.15);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -420px) scale(0.55);
    }
}
.magic-burst {
    position: fixed;
    width: 1px;
    height: 1px;
    z-index: 99999;
    pointer-events: none;
}

.magic-burst i {
    position: absolute;
    left: 0;
    top: 0;

    font-style: normal;
    font-size: 18px;

    animation: magicStar 1.1s ease-out forwards;
}

@keyframes magicStar {

    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }

    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.3);
    }

    100% {
        opacity: 0;
        transform:
            translate(
                calc(-50% + var(--dx)),
                calc(-50% + var(--dy))
            )
            scale(0.2);
    }
}
/* =========================================================
   SEASON 3 ULTIMATE BURST
   ========================================================= */


/* =========================
   COMMON
   ========================= */

.ultimate-rocket,
.firework-rocket,
.firework-explosion,
.ghost-effect,
.ultimate-particles {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
}


/* =========================
   ADELDR
   ROCKET
   ========================= */

.ultimate-rocket {
  transform: translate(-50%, -50%);
  animation: ultimateRocketLaunch 1.25s ease-in forwards;
}

.rocket-body {
  font-size: 34px;
  filter:
    drop-shadow(0 0 5px rgba(240,193,75,.7))
    drop-shadow(0 0 12px rgba(240,193,75,.35));

  transform: rotate(-45deg);
}


.rocket-flame {
  position: absolute;

  width: 9px;
  height: 25px;

  left: 14px;
  top: 31px;

  border-radius: 50%;

  background:
    linear-gradient(
      to bottom,
      #f0c14b,
      #e2483a,
      transparent
    );

  filter: blur(1px);

  animation:
    rocketFlame 100ms infinite alternate;
}


@keyframes ultimateRocketLaunch {

  0% {
    opacity: 0;
    transform:
      translate(-50%, 20px)
      scale(.7);
  }

  15% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform:
      translate(-50%, -150px)
      scale(1.05);
  }

}


@keyframes rocketFlame {

  from {
    transform: scaleY(.7);
    opacity: .6;
  }

  to {
    transform: scaleY(1.3);
    opacity: 1;
  }

}



/* =========================
   KHOLIO01
   FIREWORK ROCKET
   ========================= */

.firework-rocket {

  width: 5px;
  height: 18px;

  border-radius: 50%;

  background: #f0c14b;

  box-shadow:
    0 0 6px #f0c14b,
    0 0 15px rgba(240,193,75,.8);

  transform: translate(-50%, 0);

  animation:
    fireworkRocketUp .55s ease-out forwards;

}


@keyframes fireworkRocketUp {

  from {
    opacity: 1;
    transform:
      translate(-50%, 0)
      scale(1);
  }

  to {
    opacity: 1;
    transform:
      translate(-50%, -130px)
      scale(.6);
  }

}
/* =========================
   ADELDR
   ROCKET BURST
   ========================= */

.ultimate-rocket {
  position: fixed;
  z-index: 9999;

  pointer-events: none;

  transform:
    translate(-50%, -50%);

  animation:
    rocketLaunch 1.3s cubic-bezier(.2,.8,.25,1)
    forwards;
}


.rocket-body {

  position: relative;

  z-index: 2;

  font-size: 38px;

  filter:
    drop-shadow(0 0 8px rgba(240,193,75,.8))
    drop-shadow(0 0 18px rgba(226,72,58,.6));

}


.rocket-flame {

  position: absolute;

  left: 50%;
  top: 27px;

  width: 14px;
  height: 45px;

  transform:
    translateX(-50%);

  border-radius:
    50% 50% 80% 80%;

  background:
    linear-gradient(
      to bottom,
      rgba(255,235,120,1),
      rgba(255,130,30,.9),
      rgba(226,72,58,0)
    );

  filter:
    blur(3px);

  animation:
    flameFlicker .15s infinite alternate;

}


@keyframes rocketLaunch {

  0% {

    opacity: 0;

    transform:
      translate(-50%, 20px)
      scale(.65);

  }

  15% {

    opacity: 1;

  }

  75% {

    opacity: 1;

    transform:
      translate(-50%, -120px)
      scale(1);

  }

  100% {

    opacity: 0;

    transform:
      translate(-50%, -190px)
      scale(.9);

  }

}


@keyframes flameFlicker {

  from {

    transform:
      translateX(-50%)
      scaleY(.8);

  }

  to {

    transform:
      translateX(-50%)
      scaleY(1.25);

  }

}




/* =========================
   KHOLIO01
   FIREWORK ROCKET
   ========================= */

.firework-rocket {

  position: fixed;

  z-index: 9999;

  width: 5px;
  height: 22px;

  border-radius: 50%;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      #fff,
      #f0c14b,
      #e2483a
    );

  box-shadow:
    0 0 8px #fff,
    0 0 16px #f0c14b,
    0 0 28px #e2483a;

  transform:
    translate(-50%, -50%);

  animation:
    fireworkLaunch .55s ease-out forwards;

}


.firework-rocket::after {

  content: "";

  position: absolute;

  left: 50%;
  top: 18px;

  width: 3px;
  height: 35px;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      to bottom,
      rgba(240,193,75,.8),
      rgba(226,72,58,0)
    );

  filter:
    blur(1px);

}


@keyframes fireworkLaunch {

  0% {

    opacity: 1;

    transform:
      translate(-50%, -50%)
      scale(.7);

  }

  100% {

    opacity: 0;

    transform:
      translate(-50%, calc(-50% - 130px))
      scale(1);

  }

}

/* =========================
   FIREWORK EXPLOSION
   ========================= */

.firework-explosion {

  position: fixed;

  z-index: 10000;

  width: 1px;
  height: 1px;

  pointer-events: none;

}


.firework-explosion i {

  position: absolute;

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--spark-color);

  box-shadow:
    0 0 6px var(--spark-color),
    0 0 14px var(--spark-color);

  transform:
    translate(-50%, -50%);

  animation:
    fireworkSpark 1s cubic-bezier(.15,.75,.25,1)
    forwards;

}


@keyframes fireworkSpark {

  0% {

    opacity: 1;

    transform:
      translate(-50%, -50%)
      translate(0,0)
      scale(.5);

  }

  60% {

    opacity: 1;

  }

  100% {

    opacity: 0;

    transform:
      translate(-50%, -50%)
      translate(var(--dx),var(--dy))
      scale(0);

  }

}


/* =========================
   DARK PASSENGER
   GHOST
   ========================= */

.ghost-effect {

  position: fixed;

  z-index: 10000;

  pointer-events: none;

  transform:
    translate(-50%, -50%);

  animation:
    ghostRise 1.8s ease-out forwards;

}

.ghost-body {

  position: relative;

  width: 72px;
  height: 82px;

  border-radius:
    40px 40px 20px 20px;

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(255,255,255,.95),
      rgba(210,225,225,.9) 45%,
      rgba(150,180,180,.75)
    );

  box-shadow:
    0 0 10px rgba(255,255,255,.8),
    0 0 30px rgba(53,201,184,.5);

}


.ghost-body::after {

  content: "";

  position: absolute;

  left: 0;
  bottom: -12px;

  width: 100%;
  height: 25px;

  background:
    radial-gradient(
      circle at 20% 0,
      transparent 14px,
      rgba(180,205,205,.8) 15px
    ),
    radial-gradient(
      circle at 50% 0,
      transparent 14px,
      rgba(180,205,205,.8) 15px
    ),
    radial-gradient(
      circle at 80% 0,
      transparent 14px,
      rgba(180,205,205,.8) 15px
    );

}


.ghost-eyes {

  position: absolute;

  top: 28px;
  left: 17px;

  display: flex;

  gap: 18px;

}


.ghost-eyes span {

  width: 11px;
  height: 15px;

  background: #26383a;

  border-radius: 50%;

  box-shadow:
    0 0 5px rgba(0,0,0,.4);

}


.ghost-mouth {

  position: absolute;

  width: 13px;
  height: 18px;

  left: 30px;
  top: 51px;

  border-radius: 50%;

  background: #26383a;

}


@keyframes ghostRise {

  0% {

    opacity: 0;

    transform:
      translate(-50%, 20px)
      scale(.5)
      rotate(-5deg);

  }

  20% {

    opacity: 1;

  }

  45% {

    transform:
      translate(
        calc(-50% + 12px),
        -35px
      )
      scale(1)
      rotate(4deg);

  }

  70% {

    transform:
      translate(
        calc(-50% - 10px),
        -70px
      )
      scale(1.05)
      rotate(-3deg);

  }

  100% {

    opacity: 0;

    transform:
      translate(
        calc(-50% + 5px),
        -130px
      )
      scale(.75)
      rotate(5deg);

  }

}


/* =========================
   COMMON PARTICLES
   ========================= */

.ultimate-particles {

  position: fixed;

  z-index: 9999;

  width: 1px;
  height: 1px;

  pointer-events: none;

}





/* =========================
   MOBILE
   ========================= */

@media (max-width: 600px) {

  .rocket-body {
    font-size: 28px;
  }



  .ghost-body {
    width: 58px;
    height: 68px;
  }

}

/* =========================
   1909 SERVER
   RISING ULTIMATE COMBO
   ========================= */

.server-1909-combo {

  position: fixed;

  z-index: 20000;

  width: 1px;
  height: 1px;

  pointer-events: none;

}


/* =========================
   MAIN CONTENT
   ========================= */

.server-combo-content {

  position: absolute;

  left: 50%;
  top: 50%;

  display: flex;
  flex-direction: column;

  align-items: center;

  white-space: nowrap;

  transform:
    translate(-50%, -50%);

  animation:
    serverRiseToCenter
    2.6s cubic-bezier(.15,.85,.2,1)
    forwards;

}


/* =========================
   1909
   ========================= */

.server-combo-number {

  font-size:
    clamp(60px, 10vw, 140px);

  font-weight: 900;

  line-height: .8;

  letter-spacing: .04em;

  color: #f0c14b;

  text-shadow:

    0 0 5px rgba(255,255,255,.8),

    0 0 15px rgba(240,193,75,.9),

    0 0 35px rgba(240,193,75,.8),

    0 0 70px rgba(226,72,58,.7);

}


/* =========================
   DIVIDER
   ========================= */

.server-combo-line {

  width: 80%;

  height: 2px;

  margin: 12px 0;

  background:
    linear-gradient(
      to right,
      transparent,
      #35c9b8,
      #f0c14b,
      #35c9b8,
      transparent
    );

  box-shadow:
    0 0 10px #35c9b8,
    0 0 25px #f0c14b;

}


/* =========================
   SERVER
   ========================= */

.server-combo-server {

  font-size:
    clamp(24px, 4vw, 52px);

  font-weight: 900;

  letter-spacing: .42em;

  padding-left: .42em;

  color: #e7d3a1;

  text-shadow:

    0 0 8px rgba(231,211,161,.8),

    0 0 25px rgba(53,201,184,.7);

}


/* =========================
   SUBTEXT
   ========================= */

.server-combo-subtext {

  margin-top: 16px;

  font-size:
    clamp(9px, 1.2vw, 15px);

  font-weight: 700;

  letter-spacing: .35em;

  padding-left: .35em;

  color: rgba(231,211,161,.8);

}


/* =========================
   ENERGY RINGS
   ========================= */

.server-combo-ring {

  position: absolute;

  left: 50%;
  top: 50%;

  border-radius: 50%;

  border:
    2px solid rgba(240,193,75,.8);

  transform:
    translate(-50%, -50%);

  animation:
    comboRingExpand
    1.4s ease-out
    forwards;

}


.ring-1 {

  width: 80px;
  height: 80px;

}


.ring-2 {

  width: 40px;
  height: 40px;

  border-color:
    rgba(53,201,184,.9);

  animation-delay:
    .12s;

}


/* =========================
   FLASH
   ========================= */

.server-combo-flash {

  position: absolute;

  left: 50%;
  top: 50%;

  width: 20px;
  height: 20px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,1),
      rgba(240,193,75,.8),
      rgba(53,201,184,.3),
      transparent
    );

  transform:
    translate(-50%, -50%);

  animation:
    comboFlash
    .8s ease-out
    forwards;

}


/* =========================
   RISE ANIMATION
   ========================= */

@keyframes serverRiseToCenter {

  0% {

    opacity: 0;

    transform:
      translate(-50%, 20px)
      scale(.25);

    filter:
      blur(8px);

  }


  15% {

    opacity: 1;

  }


  55% {

    opacity: 1;

    transform:
      translate(
        calc(-50% + 5vw),
        calc(-50% - 45vh)
      )
      scale(1.05);

    filter:
      blur(0);

  }


  70% {

    transform:
      translate(
        calc(-50% - 1vw),
        calc(-50% - 48vh)
      )
      scale(1);

  }


  85% {

    opacity: 1;

    transform:
      translate(
        calc(-50%),
        calc(-50% - 48vh)
      )
      scale(1.03);

  }


  100% {

    opacity: 0;

    transform:
      translate(
        calc(-50%),
        calc(-50% - 52vh)
      )
      scale(1.12);

  }

}


/* =========================
   RING ANIMATION
   ========================= */

@keyframes comboRingExpand {

  0% {

    opacity: 1;

    transform:
      translate(-50%, -50%)
      scale(.2);

  }


  100% {

    opacity: 0;

    transform:
      translate(-50%, -50%)
      scale(5);

  }

}


/* =========================
   FLASH ANIMATION
   ========================= */

@keyframes comboFlash {

  0% {

    opacity: 1;

    transform:
      translate(-50%, -50%)
      scale(.2);

  }


  45% {

    opacity: 1;

    transform:
      translate(-50%, -50%)
      scale(8);

  }


  100% {

    opacity: 0;

    transform:
      translate(-50%, -50%)
      scale(14);

  }

}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 600px) {

  .server-combo-number {

    font-size: 64px;

  }


  .server-combo-server {

    font-size: 24px;

  }


  .server-combo-subtext {

    font-size: 8px;

    letter-spacing: .22em;

    padding-left: .22em;

  }

}


/* lightbox */
.lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(10,8,6,.92); display:none;
  align-items:flex-start; justify-content:center; padding:26px 16px; overflow:auto;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:min(900px,94vw); border-radius:10px; box-shadow:var(--shadow-2); }
.lightbox-close{
  position:fixed; top:18px; right:20px; width:42px; height:42px; border-radius:50%;
  background:var(--panel-2); border:1px solid var(--border); color:var(--text); font-size:18px; cursor:pointer; z-index:201;
}

/* ============== RESPONSIVE ============== */
@media (max-width:980px){
  .grid-cards{ grid-template-columns:repeat(2,1fr); }
  .bgrid{ grid-template-columns:repeat(2,1fr); }
  .weapon-grid{ grid-template-columns:1fr; }
  .split, .split.reverse{ grid-template-columns:1fr; }
  .split.reverse .media-col{ order:0; }
  .rules-grid{ grid-template-columns:1fr; }
  .chiplist{ grid-template-columns:1fr; }
  .icon-row{ grid-template-columns:repeat(2,1fr); }
  .tip-grid{ grid-template-columns:1fr; }
  .check-row{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .nav{ display:none; position:fixed; top:64px; left:0; right:0; transform:none; background:var(--panel-2); border-bottom:1px solid var(--border);
        flex-direction:column; align-items:stretch; padding:10px; gap:2px; max-height:80vh; overflow-y:auto; z-index:65; }
  .nav.open{ display:flex; }
  .nav-link{ width:100%; text-align:left; }
  .nav-dropdown{ width:100%; }
  .dropdown-panel{ position:static; transform:none !important; min-width:0; width:100%; background:transparent; border:none; box-shadow:none; padding:0 0 0 8px; }
  .nav-dropdown.open .dropdown-panel{ padding:4px 0 4px 8px; }
  .burger{ display:block; }
  .lang-switch{ transform:scale(.92); }
  .class-picks{ grid-template-columns:1fr; }
  .grid-cards{ grid-template-columns:1fr; }
  .feature-media.two, .feature-media.three, .feature-media.four{ grid-template-columns:1fr 1fr; }
  .hero-content{ margin-top:-130px; }
  .week-pager{ flex-direction:column; }
}
@media (max-width:480px){
  .feature-media.two, .feature-media.three, .feature-media.four{ grid-template-columns:1fr; }
  .ribbon{
    padding:12px 34px;
    clip-path:polygon(18px 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 18px 100%, 0 50%);
  }
  .ribbon-wrap::before,.ribbon-wrap::after{ display:none; }
  .hero-media{ aspect-ratio:16/12; }
}

/* ===================== RTL (Arabic) ===================== */
[dir="rtl"]{ direction:rtl; }
[dir="rtl"] .feature::before{ left:auto; right:0; }
[dir="rtl"] .brand-text{ text-align:right; }
[dir="rtl"] .dropdown-item{ text-align:right; }
[dir="rtl"] .check-card b, [dir="rtl"] .callout{ direction:rtl; }
[dir="rtl"] .pager-btn.next{ text-align:left; align-items:flex-start; }
[dir="rtl"] .pager-btn:not(.next){ text-align:right; align-items:flex-end; }
[dir="rtl"] .navside{ justify-self:start; }
[dir="rtl"] .class-btn .chev{ margin-left:0; margin-right:auto; }
[dir="rtl"] .wcard-tag, [dir="rtl"] .dnum{ direction:ltr; }
[dir="rtl"] .week-range{ direction:ltr; }
[dir="rtl"] .footer-credits .lbl{ margin-right:0; margin-left:10px; }
[dir="rtl"] .hero-credits .lbl{ margin-right:0; margin-left:2px; }
[dir="rtl"] .pager-arrow{ display:inline-block; transform:scaleX(-1); }

/* ===================== IMAGE PLACEHOLDER (no real asset yet) ===================== */
.img-placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  border:1.5px dashed var(--border); border-radius:12px; background:rgba(255,255,255,.02);
  padding:22px 12px; min-height:96px; text-align:center; width:100%;
}
.img-placeholder .ph-icon{ font-size:22px; opacity:.5; }
.img-placeholder .ph-name{ font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--teal); letter-spacing:.02em; word-break:break-all; }
.img-placeholder .ph-desc{ font-size:11px; color:var(--text-mute); line-height:1.4; }
.bcard .img-placeholder, .icon-card .img-placeholder{ aspect-ratio:1/1; margin-bottom:10px; }

/* day-progress track for healing stages */
.day-track{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:16px; }
.day-card{ background:var(--panel-2); border:1px solid var(--border-soft); border-radius:14px; padding:14px; text-align:center; position:relative; }
.day-card .daynum{
  display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%;
  background:var(--gold); color:var(--ink); font-family:'JetBrains Mono',monospace; font-weight:700; font-size:12px; margin-bottom:8px;
}
.day-card h4{ font-size:13.5px; color:var(--gold); margin-bottom:4px; }
.day-card .dayprog{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--teal); margin-bottom:8px; }
.day-card p{ font-size:12px; color:var(--text-mute); margin:0; }

@media (max-width:980px){
  .day-track{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px){
  .day-track{ grid-template-columns:1fr; }
}

/* =====================================================================
   MODERNIZATION PASS — preloader, depth, motion, texture, bento home
   ===================================================================== */

/* ---------- preload / splash screen ---------- */
.preload-screen{
  position:fixed; inset:0; z-index:10000; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .5s ease, visibility .5s ease;
}
.preload-screen::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(600px 400px at 50% 40%, rgba(240,193,75,.10), transparent 70%);
}
.preload-inner{ position:relative; display:flex; flex-direction:column; align-items:center; gap:18px; }
.preload-badge{
  width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:conic-gradient(from 220deg, var(--gold), var(--gold-2), #b97a1f, var(--gold));
  font-family:'Cinzel',serif; font-weight:800; font-size:20px; color:var(--ink);
  box-shadow:0 0 0 2px rgba(0,0,0,.35) inset, 0 18px 40px -14px rgba(240,193,75,.5);
  animation:preload-pulse 1.4s ease-in-out infinite;
}
.preload-bar{ width:150px; height:3px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.preload-fill{
  display:block; width:40%; height:100%; border-radius:999px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  animation:preload-sweep 1.1s ease-in-out infinite;
}
@keyframes preload-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }
@keyframes preload-sweep{ 0%{ transform:translateX(-120%); } 100%{ transform:translateX(320%); } }
.preload-screen.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
@media (prefers-reduced-motion: reduce){
  .preload-badge, .preload-fill{ animation:none; }
}

/* ---------- subtle film-grain texture over the whole page ---------- */
body::after{
  content:''; position:fixed; inset:0; z-index:6; pointer-events:none; opacity:.03; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- custom scrollbar ---------- */
html{ scrollbar-color:var(--gold-2) var(--bg-soft); scrollbar-width:thin; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg-soft); }
::-webkit-scrollbar-thumb{ background:linear-gradient(180deg, var(--gold-2), var(--gold-deep)); border-radius:20px; border:2px solid var(--bg-soft); }
::-webkit-scrollbar-thumb:hover{ background:var(--gold); }

/* ---------- gentle breathing glow on section ribbons ---------- */
.ribbon{ animation:ribbon-glow 5s ease-in-out infinite; }
@keyframes ribbon-glow{
  0%,100%{ box-shadow:var(--shadow-1), 0 0 0 rgba(240,193,75,0); }
  50%{ box-shadow:var(--shadow-1), 0 0 30px rgba(240,193,75,.32); }
}
@media (prefers-reduced-motion: reduce){ .ribbon{ animation:none; } }

/* ---------- scroll-reveal entrance for content blocks ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .65s ease, transform .65s cubic-bezier(.2,.7,.25,1); }
.reveal.in-view{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- card depth: hover lift + glow across all card-like components ---------- */
.ocard, .feature, .tip-card, .bcard, .icon-card, .wcard, .day-card, .check-card, .chip-card{
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.ocard:hover, .wcard:hover{
  transform:translateY(-6px); border-color:rgba(240,193,75,.4) !important;
  box-shadow:0 22px 44px -18px rgba(0,0,0,.6), 0 0 0 1px rgba(240,193,75,.12) inset;
}
.feature:hover{ box-shadow:var(--shadow-1), 0 16px 34px -18px rgba(0,0,0,.55); }
.tip-card:hover, .bcard:hover, .icon-card:hover, .check-card:hover, .chip-card:hover, .day-card:hover{
  transform:translateY(-4px); border-color:rgba(240,193,75,.32); background:rgba(255,255,255,.035);
}
.ocard-media{ position:relative; }
.ocard-media img{ transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.ocard:hover .ocard-media img{ transform:scale(1.06); }
.ocard-media::after{
  content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.35));
  opacity:0; transition:opacity .3s ease;
}
.ocard:hover .ocard-media::after{ opacity:1; }

/* ---------- nav link underline sweep ---------- */
.nav-link{ position:relative; overflow:hidden; }
.nav-link::before{
  content:''; position:absolute; left:10px; right:10px; bottom:4px; height:2px; border-radius:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.nav-link:hover::before{ transform:scaleX(1); }
.nav-link.active::before{ display:none; }

/* ---------- hero parallax-ready media ---------- */
.hero-media{ will-change:transform; }