:root{
    --void:#0b0704;
    --panel:#160d07;
    --panel2:#20140a;
    --panel3:#2b1a0d;
    --line: rgba(255,148,51,0.16);
    --line-strong: rgba(255,148,51,0.35);
    --orange:#ff8a2b;
    --orange-bright:#ffb347;
    --orange-deep:#c9510a;
    --ember:#ffcf7a;
    --text-main:#f4e8da;
    --text-dim:#b99b7d;
    --text-faint:#8a6f57;
    --shadow: 0 20px 60px rgba(0,0,0,0.55);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:
      radial-gradient(ellipse 900px 500px at 15% -10%, rgba(255,138,43,0.10), transparent 60%),
      radial-gradient(ellipse 700px 500px at 100% 10%, rgba(201,81,10,0.08), transparent 55%),
      var(--void);
    color:var(--text-main);
    font-family:'Inter', sans-serif;
    min-height:100vh;
    overflow-x:hidden;
    position:relative;
  }

  /* ---------- Ember particles ---------- */
  #embers{position:fixed; inset:0; pointer-events:none; z-index:1; overflow:hidden;}
  .ember-particle{
    position:absolute; bottom:-20px; border-radius:50%;
    background:radial-gradient(circle, var(--ember), var(--orange-deep) 70%, transparent);
    opacity:0; filter:blur(0.3px);
    animation:rise linear infinite;
  }
  @keyframes rise{
    0%{transform:translateY(0) translateX(0); opacity:0;}
    8%{opacity:0.85;}
    90%{opacity:0.3;}
    100%{transform:translateY(-115vh) translateX(var(--drift, 30px)); opacity:0;}
  }

  /* ---------- Top bar / menu button ---------- */
  .topbar{
    position:fixed; top:0; left:0; right:0; z-index:60;
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 24px;
    pointer-events:none;
  }
  .topbar-left{
    pointer-events:all;
    display:flex; align-items:center; gap:14px;
  }
  .corner-logo{
    height:56px; width:auto;
    filter:drop-shadow(0 0 10px rgba(255,138,43,0.35));
    user-select:none; -webkit-user-drag:none;
  }
  .menu-btn{
    pointer-events:all;
    width:52px; height:52px;
    background:rgba(22,13,7,0.75);
    border:1px solid var(--line-strong);
    border-radius:10px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:5px;
    cursor:pointer;
    backdrop-filter:blur(6px);
    transition:border-color .25s ease, background .25s ease, transform .2s ease;
    flex-shrink:0;
  }
  .menu-btn:hover{border-color:var(--orange); background:rgba(43,26,13,0.85); transform:translateY(-1px);}
  .menu-btn span{
    width:22px; height:2px; background:var(--orange-bright);
    transition:transform .3s ease, opacity .3s ease;
    display:block;
  }
  .menu-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .menu-btn.open span:nth-child(2){opacity:0;}
  .menu-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .topbar-right{
    pointer-events:all;
    display:flex; align-items:center; gap:14px;
    font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.12em;
    color:var(--text-faint); text-transform:uppercase;
  }
  .status-dot{width:7px; height:7px; border-radius:50%; background:var(--orange); box-shadow:0 0 8px var(--orange);}

  /* ---------- Music button ---------- */
  .music-btn{
    width:52px; height:52px;
    background:rgba(22,13,7,0.75);
    border:1px solid var(--line-strong);
    border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    backdrop-filter:blur(6px);
    transition:border-color .25s ease, background .25s ease, transform .2s ease;
    position:relative; flex-shrink:0;
  }
  .music-btn:hover{border-color:var(--orange); background:rgba(43,26,13,0.85); transform:translateY(-1px);}
  .music-btn svg{width:22px; height:22px; color:var(--orange-bright);}
  .music-btn .icon-muted{display:none;}
  .music-btn.muted .icon-playing{display:none;}
  .music-btn.muted .icon-muted{display:block;}
  .music-bars{display:flex; align-items:flex-end; gap:2px; height:16px;}
  .music-bars span{
    width:3px; background:var(--orange-bright); border-radius:2px;
    animation:bar-bounce 1s ease-in-out infinite;
  }
  .music-btn.muted .music-bars span{animation-play-state:paused; height:4px !important;}
  .music-bars span:nth-child(1){animation-delay:-0.6s;}
  .music-bars span:nth-child(2){animation-delay:-0.3s;}
  .music-bars span:nth-child(3){animation-delay:-0.9s;}
  .music-bars span:nth-child(4){animation-delay:0s;}
  @keyframes bar-bounce{
    0%,100%{height:4px;}
    50%{height:16px;}
  }
  .music-label{
    position:absolute; top:60px; right:0;
    font-family:'JetBrains Mono', monospace; font-size:9.5px; letter-spacing:0.1em;
    color:var(--text-faint); white-space:nowrap; text-transform:uppercase;
    opacity:0; transition:opacity .25s ease; pointer-events:none;
  }
  .music-btn:hover .music-label{opacity:1;}

  /* ---------- Sidebar panel ---------- */
  .overlay{
    position:fixed; inset:0; background:rgba(6,3,1,0.6);
    backdrop-filter:blur(2px);
    z-index:50; opacity:0; pointer-events:none;
    transition:opacity .35s ease;
  }
  .overlay.show{opacity:1; pointer-events:all;}

  .sidebar{
    position:fixed; top:0; left:0; height:100%; width:min(320px, 84vw);
    background:linear-gradient(180deg, var(--panel2), var(--panel) 60%, var(--void));
    border-right:1px solid var(--line-strong);
    z-index:55;
    transform:translateX(-102%);
    transition:transform .4s cubic-bezier(.65,0,.35,1);
    display:flex; flex-direction:column;
    box-shadow:var(--shadow);
  }
  .sidebar.open{transform:translateX(0);}

  .sidebar-head{
    padding:34px 24px 20px;
    border-bottom:1px solid var(--line);
    display:flex; flex-direction:column; align-items:center; gap:10px;
  }
  .sidebar-logo{width:120px; height:auto; filter:drop-shadow(0 0 14px rgba(255,138,43,0.35));}
  .sidebar-brand{
    font-family:'Anton', sans-serif; letter-spacing:0.04em;
    font-size:20px; color:var(--orange-bright);
    text-transform:uppercase;
  }
  .sidebar-brand span{color:var(--text-main);}

  .sidebar-nav{padding:20px 14px; display:flex; flex-direction:column; gap:6px; flex:1;}
  .nav-item{
    display:flex; align-items:center; gap:14px;
    padding:14px 16px; border-radius:10px;
    color:var(--text-dim); text-decoration:none;
    font-weight:600; font-size:14.5px; letter-spacing:0.01em;
    cursor:pointer; border:1px solid transparent;
    transition:all .2s ease;
    background:transparent;
  }
  .nav-item .num{
    font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--text-faint);
    width:22px;
  }
  .nav-item:hover{background:var(--panel3); color:var(--text-main); border-color:var(--line);}
  .nav-item.active{background:linear-gradient(90deg, rgba(255,138,43,0.16), rgba(255,138,43,0.02)); color:var(--orange-bright); border-color:var(--line-strong);}
  .nav-item.active .num{color:var(--orange);}

  .sidebar-foot{
    padding:20px 24px 26px; border-top:1px solid var(--line);
    font-family:'JetBrains Mono', monospace; font-size:10.5px; color:var(--text-faint);
    letter-spacing:0.08em; text-transform:uppercase; text-align:center;
  }

  /* ---------- Page wrapper ---------- */
  .page{position:relative; z-index:5; display:none;}
  .page.active{display:block;}

  .container{max-width:1080px; margin:0 auto; padding:0 28px;}

  /* ---------- Hero ---------- */
  .hero{
    min-height:100vh;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:120px 24px 80px;
    position:relative;
  }
  .hero-glow{
    position:absolute; top:8%; left:50%; transform:translateX(-50%);
    width:640px; height:640px;
    background:radial-gradient(circle, rgba(255,148,51,0.20), transparent 65%);
    filter:blur(10px); pointer-events:none;
  }
  .hero-logo{
    width:min(420px, 70vw); height:auto; position:relative; z-index:2;
    filter:drop-shadow(0 0 40px rgba(255,138,43,0.30));
    animation:float 6s ease-in-out infinite;
  }
  @keyframes float{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-10px);}
  }
  .hero-eyebrow{
    font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.35em;
    color:var(--orange); text-transform:uppercase; margin-top:26px;
    position:relative; z-index:2;
  }
  .hero-tag{
    font-family:'Anton', sans-serif; font-size:clamp(28px, 5vw, 46px);
    letter-spacing:0.03em; text-transform:uppercase;
    margin-top:14px; color:var(--text-main); position:relative; z-index:2;
    background:linear-gradient(90deg, var(--orange-bright), var(--ember) 40%, var(--orange-bright));
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
  .hero-sub{
    max-width:620px; margin:20px auto 0; color:var(--text-dim);
    font-size:16px; line-height:1.7; position:relative; z-index:2;
  }
  .hero-ctas{display:flex; gap:14px; margin-top:34px; position:relative; z-index:2; flex-wrap:wrap; justify-content:center;}
  .scroll-hint{
    margin-top:70px; display:flex; flex-direction:column; align-items:center; gap:8px;
    color:var(--text-faint); font-family:'JetBrains Mono', monospace; font-size:10.5px;
    letter-spacing:0.2em; text-transform:uppercase; position:relative; z-index:2;
  }
  .scroll-line{width:1px; height:36px; background:linear-gradient(var(--orange), transparent); animation:pulse-line 2s ease-in-out infinite;}
  @keyframes pulse-line{0%,100%{opacity:0.3;} 50%{opacity:1;}}

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 26px; border-radius:10px;
    font-weight:700; font-size:14.5px; letter-spacing:0.02em;
    text-decoration:none; cursor:pointer; border:1px solid transparent;
    transition:all .22s ease;
  }
  .btn svg{width:19px; height:19px; flex-shrink:0;}
  .btn-primary{
    background:linear-gradient(135deg, var(--orange-bright), var(--orange-deep));
    color:#1a0d02; box-shadow:0 8px 24px rgba(255,138,43,0.28);
  }
  .btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(255,138,43,0.4);}
  .btn-outline{
    background:rgba(255,255,255,0.02); color:var(--text-main);
    border-color:var(--line-strong);
  }
  .btn-outline:hover{border-color:var(--orange); color:var(--orange-bright); transform:translateY(-2px);}

  /* ---------- Section shell ---------- */
  section.block{padding:90px 0; position:relative; border-top:1px solid var(--line);}
  .eyebrow{
    font-family:'JetBrains Mono', monospace; font-size:11.5px; letter-spacing:0.3em;
    color:var(--orange); text-transform:uppercase; display:flex; align-items:center; gap:12px;
  }
  .eyebrow::before{content:''; width:26px; height:1px; background:var(--orange);}
  h2.title{
    font-family:'Anton', sans-serif; font-size:clamp(26px, 4vw, 40px);
    text-transform:uppercase; letter-spacing:0.02em; margin-top:14px; color:var(--text-main);
  }
  .lead{max-width:680px; color:var(--text-dim); font-size:15.5px; line-height:1.8; margin-top:18px;}

  /* ---------- About ---------- */
  .about-grid{margin-top:44px; display:grid; grid-template-columns:1.1fr 0.9fr; gap:50px; align-items:start;}
  .about-copy p{color:var(--text-dim); line-height:1.85; font-size:15px; margin-bottom:16px;}
  .about-copy strong{color:var(--orange-bright); font-weight:700;}
  .stat-card{
    background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:26px;
    display:flex; flex-direction:column; gap:18px;
  }
  .stat-row{display:flex; justify-content:space-between; align-items:baseline; padding:12px 0; border-bottom:1px dashed var(--line);}
  .stat-row:last-child{border-bottom:none;}
  .stat-label{font-size:13px; color:var(--text-faint); letter-spacing:0.03em;}
  .stat-val{font-family:'Anton', sans-serif; font-size:20px; color:var(--orange-bright); letter-spacing:0.02em;}

  /* ---------- Features ---------- */
  .feat-grid{margin-top:46px; display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}
  .feat-card{
    background:linear-gradient(160deg, var(--panel), var(--panel2));
    border:1px solid var(--line); border-radius:14px; padding:26px;
    transition:transform .25s ease, border-color .25s ease;
    position:relative; overflow:hidden;
  }
  .feat-card:hover{transform:translateY(-4px); border-color:var(--line-strong);}
  .feat-num{
    font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--text-faint);
    letter-spacing:0.1em;
  }
  .feat-icon{
    width:38px; height:38px; margin:14px 0 16px; color:var(--orange);
  }
  .feat-card h3{font-size:16.5px; margin-bottom:10px; color:var(--text-main); font-weight:700;}
  .feat-card p{font-size:13.8px; color:var(--text-dim); line-height:1.7;}

  /* ---------- CTA / socials ---------- */
  .cta-block{
    padding:80px 0 100px; text-align:center;
  }
  .cta-panel{
    background:linear-gradient(160deg, var(--panel2), var(--panel));
    border:1px solid var(--line-strong); border-radius:22px;
    padding:60px 30px; position:relative; overflow:hidden;
  }
  .cta-panel::before{
    content:''; position:absolute; top:-40%; left:50%; transform:translateX(-50%);
    width:600px; height:400px;
    background:radial-gradient(circle, rgba(255,148,51,0.16), transparent 65%);
  }
  .cta-panel h2{font-family:'Anton', sans-serif; font-size:clamp(24px,3.6vw,34px); text-transform:uppercase; position:relative; z-index:2;}
  .cta-panel p{color:var(--text-dim); max-width:520px; margin:14px auto 30px; font-size:15px; line-height:1.7; position:relative; z-index:2;}
  .cta-buttons{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; position:relative; z-index:2;}

  footer{
    padding:34px 0; text-align:center; color:var(--text-faint);
    font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.1em;
    border-top:1px solid var(--line);
  }
  footer .made-by{
    display:block; margin-top:8px; text-align:center;
    color:var(--text-faint); font-size:10.5px; letter-spacing:0.08em; opacity:0.7;
  }

  /* ---------- Lore sayfası ---------- */
  .lore-doc{ max-width:760px; }
  .lore-text p{
    color:var(--text-dim); font-size:14.8px; line-height:1.95; margin-top:18px;
  }
  .lore-text p:first-child{ margin-top:0; }
  .lore-text strong{ color:var(--orange-bright); font-weight:700; }
  .lore-text em{ color:var(--text-main); font-style:italic; }
  .lore-gif{
    width:100%; height:auto; border-radius:14px; margin:32px 0;
    border:1px solid var(--line-strong); box-shadow:var(--shadow); display:block;
  }

  /* ---------- Rules page ---------- */
  .rules-hero{padding:130px 0 40px; text-align:center;}
  .rules-hero .eyebrow{justify-content:center;}
  .rules-hero .eyebrow::before{display:none;}
  .back-link{
    display:inline-flex; align-items:center; gap:8px; margin-top:26px;
    color:var(--text-dim); text-decoration:none; font-size:13.5px; font-weight:600;
    padding:10px 18px; border:1px solid var(--line); border-radius:8px; cursor:pointer;
    transition:all .2s ease;
  }
  .back-link:hover{color:var(--orange-bright); border-color:var(--orange);}

  .rules-doc{
    max-width:820px; margin:0 auto; padding:0 24px 120px;
  }
  .rules-major{
    margin-top:64px; padding-bottom:14px; border-bottom:1px solid var(--line-strong);
    display:flex; align-items:baseline; gap:16px;
  }
  .rules-major:first-child{margin-top:20px;}
  .rules-major .maj-num{
    font-family:'Anton', sans-serif; font-size:34px; color:var(--orange-deep); opacity:0.7;
    -webkit-text-stroke: 1px var(--orange);
    color:transparent;
  }
  .rules-major h2{
    font-family:'Anton', sans-serif; font-size:clamp(20px, 3vw, 28px); letter-spacing:0.02em;
    text-transform:uppercase; color:var(--text-main);
  }
  .rule-item{
    margin-top:26px; padding-left:20px; border-left:2px solid var(--line);
    transition:border-color .2s ease;
  }
  .rule-item:hover{border-color:var(--orange);}
  .rule-item .r-head{
    display:flex; align-items:baseline; gap:10px; margin-bottom:8px;
  }
  .rule-item .r-num{
    font-family:'JetBrains Mono', monospace; color:var(--orange-bright); font-size:13px; font-weight:700;
  }
  .rule-item h3{font-size:15.5px; color:var(--text-main); font-weight:700;}
  .rule-item p{color:var(--text-dim); font-size:14.3px; line-height:1.8;}
  .rule-item p + p{margin-top:6px;}

  /* ---------- Responsive ---------- */
  @media (max-width: 860px){
    .about-grid{grid-template-columns:1fr;}
    .feat-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width: 560px){
    .feat-grid{grid-template-columns:1fr;}
    .hero{padding-top:110px;}
  }

  ::selection{background:var(--orange-deep); color:#fff;}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001s !important; animation-iteration-count:1 !important; transition-duration:0.001s !important;}
  }

  a:focus-visible, button:focus-visible, .nav-item:focus-visible{
    outline:2px solid var(--orange-bright); outline-offset:2px;
  }

/* ---------- Başvuru formu (SQL + Discord entegrasyon örneği) ---------- */
.basvuru-form{
  max-width:560px; margin:20px auto 0;
  display:flex; flex-direction:column; gap:18px;
}
.basvuru-form .form-row{ display:flex; flex-direction:column; gap:8px; }
.basvuru-form label{
  font-family:'JetBrains Mono', monospace; font-size:11.5px; letter-spacing:0.1em;
  color:var(--text-faint); text-transform:uppercase;
}
.basvuru-form input, .basvuru-form textarea{
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; color:var(--text-main); font-family:'Inter', sans-serif; font-size:14.5px;
  resize:vertical; outline:none; transition:border-color .2s ease;
}
.basvuru-form input:focus, .basvuru-form textarea:focus{ border-color:var(--orange); }
.basvuru-form button{ align-self:flex-start; }
.basvuru-form button:disabled{ opacity:0.6; cursor:not-allowed; transform:none !important; }
.form-feedback{ font-size:14px; min-height:20px; }
.form-feedback.ok{ color:#8bd17c; }
.form-feedback.err{ color:#ff6b6b; }

/* ---------- Market sayfası ---------- */
.market-doc{ max-width:900px; }
.market-banner{
  width:100%; height:auto; border-radius:16px; margin-top:6px;
  border:1px solid var(--line-strong); box-shadow:var(--shadow); display:block;
}
.btn-bynogame{
  margin:22px auto 0; width:fit-content; padding:14px 32px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, #ff5a1f, var(--orange-deep));
  color:#fff5ea; box-shadow:0 8px 24px rgba(255,90,31,0.3);
  font-size:15px; font-weight:700; border-radius:10px;
}
.btn-bynogame:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(255,90,31,0.42); }

.market-section{ margin-top:22px; }
.market-copy{ color:var(--text-dim); font-size:14.5px; line-height:1.85; }
.market-copy strong{ color:var(--orange-bright); font-weight:700; }
.market-preview{
  width:100%; height:auto; border-radius:14px; margin-top:24px;
  border:1px solid var(--line); box-shadow:var(--shadow); display:block;
}

.reroll-grid{ margin-top:26px; display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; }
.reroll-card{
  background:linear-gradient(160deg, var(--panel), var(--panel2));
  border:1px solid var(--line); border-radius:14px; padding:22px;
  transition:transform .25s ease, border-color .25s ease;
}
.reroll-card:hover{ transform:translateY(-3px); border-color:var(--line-strong); }
.reroll-icon{ font-size:26px; line-height:1; margin:0 0 12px; width:auto; height:auto; }
.reroll-card h3{ font-size:15.5px; margin-bottom:8px; color:var(--text-main); font-weight:700; }
.reroll-card p{ font-size:13.5px; color:var(--text-dim); line-height:1.7; }

.vip-grid{ margin-top:26px; display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; }
.vip-card{
  background:linear-gradient(160deg, var(--panel), var(--panel2));
  border:1px solid var(--line); border-radius:16px; padding:26px;
  position:relative;
}
.vip-card-highlight{ border-color:var(--line-strong); box-shadow:0 0 0 1px rgba(255,138,43,0.12) inset; }
.vip-badge{
  display:inline-block; font-family:'JetBrains Mono', monospace; font-size:11px;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--orange-deep);
  background:rgba(255,138,43,0.14); border:1px solid var(--line-strong);
  border-radius:20px; padding:4px 12px; margin-bottom:12px;
}
.vip-card h3{ font-family:'Anton', sans-serif; font-size:20px; letter-spacing:0.02em; color:var(--orange-bright); text-transform:uppercase; margin-bottom:16px; }
.vip-list{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.vip-list li{
  font-size:13.8px; color:var(--text-dim); line-height:1.6; padding-left:18px; position:relative;
}
.vip-list li::before{
  content:'✦'; position:absolute; left:0; top:0; color:var(--orange); font-size:11px;
}
.market-note{
  margin-top:22px; font-size:13.5px; color:var(--text-faint); line-height:1.7;
  border-left:2px solid var(--orange); padding-left:14px;
}
.market-note strong{ color:var(--orange-bright); }

/* ---------- Klanlar sayfası ---------- */
.klan-tabs{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.klan-tab{
  display:flex; align-items:center; gap:8px;
  background:linear-gradient(160deg, var(--panel), var(--panel2));
  border:1px solid var(--line); border-radius:10px; padding:9px 14px;
  cursor:pointer; transition:transform .2s ease, border-color .2s ease, background .2s ease;
  font-size:13.5px; font-weight:700; color:var(--text-main); letter-spacing:0.01em;
}
.klan-tab:hover{ transform:translateY(-2px); border-color:var(--line-strong); }
.klan-tab.active{
  border-color:var(--orange); background:linear-gradient(160deg, var(--panel2), var(--panel3));
  color:var(--orange-bright);
}
.klan-tab .klan-quota{
  font-family:'JetBrains Mono', monospace; font-size:11.5px; font-weight:700;
  color:var(--orange-bright); background:rgba(255,138,43,0.12);
  border:1px solid var(--line-strong); border-radius:7px; padding:2px 7px; flex-shrink:0;
}
.klan-tab .klan-quota.over{ color:#ff6b6b; background:rgba(255,107,107,0.1); border-color:rgba(255,107,107,0.35); }

.klan-panel{
  display:none;
  margin-top:18px; min-height:140px;
  background:linear-gradient(160deg, var(--panel), var(--panel2));
  border:1px solid var(--line-strong); border-radius:14px; padding:20px;
}
.klan-panel.open{ display:block; }
.klan-panel-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:14px; border-bottom:1px dashed var(--line); }
.klan-panel-head h3{ font-size:17px; color:var(--text-main); font-weight:700; letter-spacing:0.01em; }
.klan-panel-body{ min-height:90px; margin-top:14px; }
.klan-empty-note{ margin-top:30px; }

@media (max-width: 860px){
  .reroll-grid{ grid-template-columns:1fr; }
  .vip-grid{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  .klan-tabs{ gap:8px; }
  .klan-tab{ padding:8px 11px; font-size:12.5px; }
}

/* ---------- Karakterler sayfası ---------- */
.char-doc{ max-width:1100px; }

.char-toolbar{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
  margin-bottom:16px;
}
.char-status-filters{ display:flex; gap:8px; }
.char-filter-btn{
  background:linear-gradient(160deg, var(--panel), var(--panel2));
  border:1px solid var(--line); border-radius:10px; padding:9px 16px;
  font-size:13px; font-weight:700; color:var(--text-main); cursor:pointer;
  transition:border-color .2s, transform .2s, background .2s;
}
.char-filter-btn:hover{ transform:translateY(-1px); border-color:var(--line-strong); }
.char-filter-btn.active{
  border-color:var(--orange); color:var(--orange-bright);
  background:linear-gradient(160deg, var(--panel2), var(--panel3));
}

.char-search-wrap{ flex:1; min-width:180px; max-width:280px; }
.char-search{
  width:100%; background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:10px 14px; color:var(--text-main); font-size:14px; outline:none;
  transition:border-color .2s;
}
.char-search:focus{ border-color:var(--orange); }

.char-village-filters, .char-clan-tags{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px;
}
.char-chip{
  background:linear-gradient(160deg, var(--panel), var(--panel2));
  border:1px solid var(--line); border-radius:20px; padding:6px 12px;
  font-size:12.5px; font-weight:600; color:var(--text-dim); cursor:pointer;
  transition:border-color .2s, color .2s, background .2s;
}
.char-chip:hover, .char-chip.active{
  border-color:var(--orange); color:var(--orange-bright);
}
.char-chip .count{
  font-family:'JetBrains Mono', monospace; font-size:11px; margin-left:4px;
  color:var(--orange-bright); opacity:0.85;
}

.char-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:16px; margin-top:10px;
}
.char-card{
  background:linear-gradient(160deg, var(--panel), var(--panel2));
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  cursor:pointer; transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.char-card:hover{
  transform:translateY(-4px); border-color:var(--line-strong);
  box-shadow:0 12px 28px rgba(0,0,0,0.35);
}
.char-card-img{
  width:100%; aspect-ratio:1; object-fit:cover; display:block;
  background:var(--panel3);
}
.char-card-img-placeholder{
  width:100%; aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, var(--panel2), var(--panel3));
  color:var(--text-faint); font-size:36px; font-weight:700;
}
.char-card-body{ padding:12px 14px 14px; }
.char-card-name{ font-size:14px; font-weight:700; color:var(--text-main); margin-bottom:4px; }
.char-card-meta{ font-size:12px; color:var(--text-dim); line-height:1.45; }
.char-card-rank{ color:var(--orange-bright); font-weight:600; }

/* Detay görünümü */
.char-detail-view{ padding-bottom:20px; }
.char-detail-hero{ padding:110px 0 20px; }
.char-back-btn{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:8px 14px; font-size:13px; font-weight:600; color:var(--text-dim);
  cursor:pointer; margin-bottom:18px; transition:border-color .2s, color .2s;
}
.char-back-btn:hover{ border-color:var(--orange); color:var(--orange-bright); }
.char-detail-name{
  font-family:'Anton', sans-serif; font-size:clamp(32px, 6vw, 52px);
  letter-spacing:0.02em; text-transform:uppercase; color:var(--text-main);
  line-height:1.1;
}

.char-detail-body{
  display:grid; grid-template-columns:1.4fr 0.9fr; gap:24px;
  padding-bottom:40px; align-items:start;
}
.char-info-card{
  background:linear-gradient(160deg, var(--panel), var(--panel2));
  border:1px solid var(--line); border-radius:14px; padding:20px 22px;
  margin-bottom:18px;
}
.char-info-title{
  display:flex; align-items:center; gap:10px;
  font-size:15.5px; font-weight:700; color:var(--text-main); margin-bottom:12px;
}
.char-info-bar{
  width:3px; height:18px; background:var(--orange); border-radius:2px; flex-shrink:0;
}
.char-info-text{ color:var(--text-dim); font-size:14.3px; line-height:1.8; white-space:pre-wrap; }
.char-muted{ color:var(--text-faint); font-size:13.5px; }

.char-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.char-tab{
  background:var(--panel3); border:1px solid var(--line); border-radius:20px;
  padding:7px 14px; font-size:12.5px; font-weight:600; color:var(--text-dim);
  cursor:pointer; transition:border-color .2s, color .2s, background .2s;
}
.char-tab:hover{ border-color:var(--line-strong); }
.char-tab.active{
  background:rgba(255,138,43,0.12); border-color:var(--orange); color:var(--orange-bright);
}
.char-tab-panel{ display:none; }
.char-tab-panel.open{ display:block; }

.char-jutsu-empty{ min-height:60px; }

.char-portrait-card{
  background:linear-gradient(160deg, var(--panel), var(--panel2));
  border:1px solid var(--line-strong); border-radius:16px; padding:16px;
  position:sticky; top:90px;
}
.char-portrait{
  width:100%; aspect-ratio:3/4; border-radius:12px; overflow:hidden;
  background:var(--panel3); display:flex; align-items:center; justify-content:center;
  margin-bottom:14px;
}
.char-portrait img{ width:100%; height:100%; object-fit:cover; display:block; }
.char-portrait-placeholder{ font-size:48px; color:var(--text-faint); font-weight:700; }

.char-badges{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.char-badge{
  font-family:'JetBrains Mono', monospace; font-size:11px; font-weight:700;
  letter-spacing:0.04em; text-transform:uppercase;
  background:rgba(255,138,43,0.12); border:1px solid var(--line-strong);
  color:var(--orange-bright); border-radius:8px; padding:5px 10px;
}

.char-meta-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.char-meta-item{
  background:var(--panel3); border:1px solid var(--line); border-radius:10px;
  padding:10px 12px;
}
.char-meta-label{
  font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--text-faint); margin-bottom:4px;
}
.char-meta-val{ font-size:13.5px; font-weight:600; color:var(--text-main); }

@media (max-width: 860px){
  .char-detail-body{ grid-template-columns:1fr; }
  .char-portrait-card{ position:static; max-width:360px; margin:0 auto; }
}
@media (max-width: 560px){
  .char-grid{ grid-template-columns:repeat(2, 1fr); gap:12px; }
  .char-toolbar{ flex-direction:column; align-items:stretch; }
  .char-search-wrap{ max-width:none; }
}

/* ============================================================
   ENTEGRASYON EKLERİ (web_server.js sürümü)
   — üst bar oturum kutusu, klan kadro paneli, başvuru formu
   ============================================================ */

/* Üst bar: Discord oturumu */
.nav-auth { display: inline-flex; align-items: center; }
.nav-login,
.nav-user {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: color 0.2s, border-color 0.2s;
}
.nav-login:hover,
.nav-user:hover { color: var(--text-main); border-color: var(--line-strong); }
.nav-user { text-transform: none; letter-spacing: 0.02em; }
.nav-user img { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); }

/* Klan paneli: kadro sütunları */
.klan-kek { color: var(--orange); font-size: 0.9rem; margin-bottom: 1rem; }
.klan-roster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.2rem;
}
.klan-rcol h4 {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.4rem;
  margin-bottom: 0.6rem;
}
.klan-rcol ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.klan-rcol li { font-size: 0.9rem; color: var(--text-main); }
.klan-rcol li.klan-empty { color: var(--text-faint); font-style: italic; font-size: 0.82rem; }

/* ── Shinobi detay ekleri: rozetler, elementler, XP barı ── */
.char-badge-lead { border-color: var(--orange); color: var(--orange-bright); }
.char-badge-on { border-color: rgba(120, 200, 120, 0.5); color: #8fce8f; }
.char-badge-off { border-color: var(--line); color: var(--text-faint); }

.char-elements { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; }
.char-element {
  font-size: 0.78rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 138, 43, 0.07);
  color: var(--text-main);
}

.char-xp { margin-top: 0.9rem; }
.char-xp-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 0.35rem;
}
.char-xp-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
  overflow: hidden;
}
.char-xp-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--orange-deep), var(--orange-bright));
  border-radius: 999px;
  transition: width 0.8s ease;
}

/* ── UI pürüzsüzleştirme paketi ── */

/* Skeleton yükleme (parıldayan iskeletler) */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 148, 51, 0.08), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
.char-card-skeleton { min-height: 300px; }
.klan-tab-skeleton { display: inline-block; width: 130px; height: 42px; margin: 0 0.4rem 0.6rem 0; }

/* Scroll-reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.8, 0.3, 1); }
.reveal.revealed { opacity: 1; transform: none; }

/* Kart hover: turuncu kenar ışıması + portrede hafif zoom */
.char-card { position: relative; transition: transform 0.25s cubic-bezier(0.22, 0.8, 0.3, 1), border-color 0.25s, box-shadow 0.25s; }
.char-card:hover {
  transform: translateY(-4px);
  border-color: var(--orange);
  box-shadow: 0 14px 40px -18px rgba(255, 138, 43, 0.45);
}
.char-card .char-card-img { transition: transform 0.45s cubic-bezier(0.22, 0.8, 0.3, 1); }
.char-card:hover .char-card-img { transform: scale(1.05); }
.char-card { overflow: hidden; }

/* Detay sayfasına yumuşak giriş */
#karakterDetailView:not([hidden]),
#karakterListView:not([hidden]) { animation: pageIn 0.4s cubic-bezier(0.22, 0.8, 0.3, 1) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Arama vurgusu */
mark.hl { background: rgba(255, 138, 43, 0.3); color: var(--orange-bright); border-radius: 2px; padding: 0 2px; }

/* KARAKTERİM rozeti */
.char-mine-badge {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 0.25rem 0.55rem;
  border-radius: 3px;
  background: var(--orange);
  color: var(--void);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.char-card-mine { border-color: var(--orange); }

/* Liderlik tablosu */
.lb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.4rem; }
.lb-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 1.4rem 1.5rem; }
.lb-title { font-size: 1.05rem; margin-bottom: 1rem; color: var(--text-main); letter-spacing: 0.04em; }
.lb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lb-row { display: flex; align-items: center; gap: 0.9rem; padding: 0.6rem 0.4rem; border-top: 1px solid var(--line); }
.lb-row:first-child { border-top: none; }
.lb-rank {
  flex: 0 0 1.9rem;
  height: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  font-size: 0.8rem;
  color: var(--text-dim);
}
.lb-top .lb-rank { background: rgba(255, 138, 43, 0.15); border-color: var(--orange); color: var(--orange-bright); font-weight: 700; }
.lb-name { flex: 1; color: var(--text-main); font-weight: 600; display: flex; flex-direction: column; line-height: 1.25; }
.lb-name small { color: var(--text-faint); font-weight: 400; font-size: 0.74rem; }
.lb-val { color: var(--orange-bright); font-size: 0.86rem; white-space: nowrap; }
.lb-loading { color: var(--text-faint); font-style: italic; padding: 0.6rem 0.4rem; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .char-card, .char-card .char-card-img { transition: none; transform: none; opacity: 1; }
  #karakterDetailView:not([hidden]), #karakterListView:not([hidden]) { animation: none; }
  .skeleton::after { animation: none; }
}

/* Liderlik: fotoğraflı kare avatar */
.lb-avatar {
  position: relative;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: linear-gradient(160deg, rgba(255, 138, 43, 0.12), var(--panel));
}
.lb-avatar i {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text-dim);
}
.lb-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lb-top .lb-avatar { border-color: var(--orange); }
.lb-row { padding: 0.55rem 0.4rem; }

/* ════════ BÜYÜK TASARIM PAKETİ ════════ */

/* İnce turuncu scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: var(--orange-deep); border-radius: 999px; border: 2px solid var(--void); }
::-webkit-scrollbar-thumb:hover { background: var(--orange); }
html { scrollbar-width: thin; scrollbar-color: var(--orange-deep) var(--void); }

/* İmleç ışıması (masaüstü, çok hafif) */
.cursor-glow {
  position: fixed;
  top: -300px;
  left: -300px;
  width: 600px;
  height: 600px;
  margin: -300px 0 0 -300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 138, 43, 0.05), transparent 65%);
  pointer-events: none;
  z-index: 3;
}

/* Sayaç şeridi */
.stats-strip { border-bottom: 1px solid var(--line); background: rgba(255, 138, 43, 0.03); }
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; padding: 1.6rem 1rem; }
.stat-box { text-align: center; }
.stat-box b {
  display: block;
  font-family: "Anton", sans-serif;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  color: var(--orange-bright);
  letter-spacing: 0.03em;
}
.stat-box span {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Kanji su işaretleri */
.rules-hero { position: relative; overflow: hidden; }
.kanji-mark {
  position: absolute;
  top: 50%;
  right: -2%;
  transform: translateY(-50%);
  font-size: clamp(9rem, 24vw, 17rem);
  line-height: 1;
  color: var(--text-main);
  opacity: 0.04;
  pointer-events: none;
  user-select: none;
  font-family: Georgia, serif;
}

/* Kurallar: içindekiler */
.rules-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
  position: sticky;
  top: 70px;
  z-index: 5;
  background: rgba(11, 7, 4, 0.92);
  backdrop-filter: blur(8px);
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.rules-toc a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.82rem;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.rules-toc a:hover { color: var(--text-main); border-color: var(--orange); background: rgba(255, 138, 43, 0.08); }
.rules-toc .toc-num { color: var(--orange); font-size: 0.72rem; }

/* Kural numarası: tıklanınca link kopyalanır */
.r-num-link { cursor: pointer; transition: background 0.2s, color 0.2s; }
.r-num-link:hover { background: var(--orange); color: var(--void); }
.r-num-link.copied { background: #6fbf73; color: var(--void); }
.r-num-link.copied::after { content: " ✓"; }
.rule-item { scroll-margin-top: 130px; }
.rules-major { scroll-margin-top: 130px; }

/* Sıralama podyumu */
.lb-podium {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 1rem;
  align-items: end;
  max-width: 720px;
  margin: 0 auto 2rem;
}
.pod-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 1.4rem 1rem 1.1rem;
  position: relative;
  text-align: center;
}
.pod-1 { border-color: var(--orange); background: linear-gradient(180deg, rgba(255, 138, 43, 0.12), var(--panel)); padding-top: 1.9rem; }
.pod-rank {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  color: var(--text-dim);
}
.pod-1 .pod-rank { background: var(--orange); border-color: var(--orange); color: var(--void); }
.pod-avatar { width: 72px; height: 72px; flex: 0 0 72px; border-radius: 12px; }
.pod-1 .pod-avatar { width: 92px; height: 92px; flex: 0 0 92px; border-color: var(--orange); }
.pod-name { font-weight: 700; color: var(--text-main); line-height: 1.2; }
.pod-klan { color: var(--text-faint); font-size: 0.74rem; }
.pod-val { color: var(--orange-bright); font-size: 0.9rem; margin-top: 0.2rem; }
@media (max-width: 520px) { .lb-podium { gap: 0.5rem; } .pod-avatar { width: 56px; height: 56px; flex-basis: 56px; } .pod-1 .pod-avatar { width: 72px; height: 72px; flex-basis: 72px; } }

/* Lore zaman çizelgesi */
.timeline { position: relative; padding-left: 2rem; }
.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--orange), var(--line));
}
.tl-item { position: relative; padding-bottom: 2.2rem; }
.tl-dot {
  position: absolute;
  left: -2rem;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--void);
  border: 3px solid var(--orange);
  box-shadow: 0 0 12px rgba(255, 138, 43, 0.5);
}
.tl-title {
  font-family: "Anton", sans-serif;
  letter-spacing: 0.04em;
  color: var(--orange-bright);
  font-size: 1.25rem;
  margin-bottom: 0.7rem;
}
.tl-body p { margin-bottom: 0.9rem; }

/* Karakter detayı: klan rengine bürünen vurgular */
.char-detail-view { --accent: var(--orange); }
.char-detail-view .char-info-bar { background: var(--accent); }
.char-detail-view .char-xp-bar i { background: linear-gradient(90deg, var(--accent), var(--orange-bright)); }
.char-detail-view .char-badge { border-color: var(--line); }
.char-detail-view .char-badge:first-child { border-color: var(--accent); color: var(--accent); }
.char-detail-view .tl-dot { border-color: var(--accent); }

/* Aynı klandan diğerleri */
.char-same-clan { padding-bottom: 3rem; }
.same-title { color: var(--text-main); margin-bottom: 1rem; font-size: 1.05rem; letter-spacing: 0.03em; }
.same-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.8rem; }
.same-card {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: border-color 0.2s, transform 0.2s;
}
.same-card:hover { border-color: var(--accent, var(--orange)); transform: translateY(-2px); }
.same-name { display: flex; flex-direction: column; line-height: 1.25; font-weight: 600; color: var(--text-main); }
.same-name small { color: var(--text-faint); font-weight: 400; font-size: 0.74rem; }

/* Mobil alt gezinme çubuğu */
.bottom-nav { display: none; }
@media (max-width: 720px) {
  .bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: rgba(11, 7, 4, 0.96);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    padding: 0.35rem 0.2rem calc(0.35rem + env(safe-area-inset-bottom));
  }
  .bnav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    color: var(--text-faint);
    text-decoration: none;
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: color 0.2s;
  }
  .bnav-item svg { width: 21px; height: 21px; }
  .bnav-item.active, .bnav-item:hover { color: var(--orange-bright); }
  body { padding-bottom: 64px; }
  .rules-toc { top: 60px; }
}