/* =========================================================
   BÖRÜ2 · 2008 Metin2 portal teması
   Koyu ahşap zemin, eskitilmiş altın çerçeve, parşömen kutular
   ========================================================= */
:root{
  --bg:#110a04; --wood:#1c1209; --wood-2:#26180b; --wood-3:#3a2510;
  --gold:#c9a45c; --gold-hi:#f0d590; --gold-lo:#7a5520; --gold-line:#6b4a1c;
  --parch:#e9dcbc; --parch-2:#dccaa0; --parch-3:#c8b080;
  --ink:#2a1a0a; --ink-soft:#5a4326; --blood:#8e1a12; --blood-hi:#c4382a;
  --text:#eadfc8; --muted:#a8957a;
  --wrap:1180px;
  --f-head:"Cinzel",Georgia,"Times New Roman",serif;
  --f-body:Tahoma,Verdana,"Segoe UI",Geneva,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--text); font-family:var(--f-body); font-size:15px; line-height:1.65;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
  background-color:var(--bg);
  background-image:
    radial-gradient(ellipse 120% 60% at 50% 0%, rgba(90,50,15,.25), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,220,160,.012) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 1px, transparent 1px 41px);
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
h1,h2,h3{font-family:var(--f-head); line-height:1.2; margin:0; font-weight:700}
ul{margin:0; padding:0; list-style:none}
p{margin:0 0 12px}
:focus-visible{outline:2px solid var(--gold-hi); outline-offset:3px}
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:16px}
.nowrap{white-space:nowrap}
.gold{color:var(--gold-hi)}

/* ---------- Üst bar ---------- */
.topbar{position:sticky; top:0; z-index:40; background:linear-gradient(180deg,#2c1c0c,#1a1007); border-bottom:1px solid var(--gold-lo); box-shadow:0 1px 0 #000, 0 4px 14px rgba(0,0,0,.6)}
.topbar::after{content:""; position:absolute; left:0; right:0; bottom:-4px; height:3px; background:linear-gradient(90deg,transparent,var(--gold-lo) 20%,var(--gold) 50%,var(--gold-lo) 80%,transparent); opacity:.6}
.topbar-in{display:flex; align-items:center; gap:14px; height:60px}
.brand{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.brand img{width:40px; height:43px}
.brand b{font-family:var(--f-head); font-weight:900; font-size:1.3rem; letter-spacing:.08em; color:var(--gold-hi); text-shadow:0 2px 0 #000}
.brand b i{font-style:normal; color:var(--blood-hi)}
.main-nav{display:flex; align-items:center; margin-inline:auto}
.main-nav a{font-family:var(--f-head); font-weight:700; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:#d9c8a4; padding:8px 14px; border-left:1px solid rgba(201,164,92,.18); transition:color .15s}
.main-nav a:first-child{border-left:0}
.main-nav a:hover,.main-nav a.active{color:var(--gold-hi); text-shadow:0 0 10px rgba(240,213,144,.35)}
.nav-toggle{display:none; width:44px; height:40px; margin-left:auto; border:1px solid var(--gold-lo); background:var(--wood-2); flex-direction:column; gap:5px; align-items:center; justify-content:center; cursor:pointer}
.nav-toggle i{width:20px; height:2px; background:var(--gold-hi)}

/* ---------- Butonlar (2008 kabartma) ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--f-head); font-weight:700; font-size:.92rem; letter-spacing:.08em; text-transform:uppercase; padding:13px 24px; border:1px solid var(--gold-hi); border-radius:3px; cursor:pointer; text-align:center; line-height:1.2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(0,0,0,.35), 0 0 0 2px #0c0702, 0 4px 12px rgba(0,0,0,.6); transition:filter .15s, transform .15s}
.btn:hover{filter:brightness(1.12)}
.btn:active{transform:translateY(1px)}
.btn-red{background:linear-gradient(180deg,#c4382a 0%,#9a1f15 50%,#6a100a 100%); color:#fff3d6; text-shadow:0 1px 0 rgba(0,0,0,.6)}
.btn-gold{background:linear-gradient(180deg,#fbe8ae 0%,#d6b062 48%,#a77a30 52%,#8a6224 100%); color:#2a1606; border-color:#fff1c4; text-shadow:0 1px 0 rgba(255,240,200,.5)}
.btn-dark{background:linear-gradient(180deg,#3a2612,#1e1309); color:var(--gold-hi); border-color:#8a6224}
.btn-sm{padding:9px 14px; font-size:.76rem}
.btn-block{display:flex; width:100%}

/* ---------- Çerçeveli kutu ---------- */
.box{position:relative; background:linear-gradient(180deg,#22160a,#170e06); border:1px solid var(--gold-line);
  box-shadow:inset 0 0 0 1px #000, inset 0 0 0 2px rgba(240,213,144,.1), 0 0 0 1px #000, 0 8px 20px rgba(0,0,0,.55)}
.box + .box{margin-top:18px}
.box-h{display:flex; align-items:center; gap:12px; padding:10px 14px; background:linear-gradient(180deg,#3d2711,#24160a); border-bottom:1px solid var(--gold-line);
  font-family:var(--f-head); font-weight:700; font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-hi); text-shadow:0 1px 0 #000}
.box-h::before,.box-h::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--gold))}
.box-h::after{background:linear-gradient(90deg,var(--gold),transparent)}
.box-h span{position:relative; padding-inline:14px}
.box-h span::before,.box-h span::after{content:""; position:absolute; top:50%; width:6px; height:6px; background:var(--gold); transform:translateY(-50%) rotate(45deg)}
.box-h span::before{left:0} .box-h span::after{right:0}
.box-b{padding:16px}
.box-b.parch{background:radial-gradient(ellipse at 50% 40%, #f1e6c8 0%, #e6d6b0 60%, #d2bc8c 100%); color:var(--ink); box-shadow:inset 0 0 24px rgba(90,60,20,.35)}
.parch h2,.parch h3{color:#5a1a0e}
.parch strong{color:#3a1a06}
.parch p{color:#3a2a14}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; text-align:center; padding:34px 0 44px; isolation:isolate; border-bottom:1px solid var(--gold-lo)}
.hero-media{position:absolute; inset:0; z-index:-2; background:#0c0702 url("img/poster.jpg") center/cover}
.hero-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:sepia(.45) saturate(.9) brightness(.62) contrast(1.05)}
.hero-veil{position:absolute; inset:0; z-index:-1; background:
  radial-gradient(ellipse 70% 65% at 50% 42%, transparent 25%, rgba(10,6,2,.75) 100%),
  linear-gradient(180deg, rgba(17,10,4,.35) 0%, rgba(17,10,4,.15) 40%, rgba(17,10,4,.85) 88%, var(--bg) 100%)}
.hero-logo{width:min(500px,84vw); height:auto; margin:0 auto; filter:drop-shadow(0 10px 30px rgba(0,0,0,.8))}
.eyebrow{display:inline-flex; align-items:center; gap:12px; font-family:var(--f-head); font-weight:700; font-size:.78rem; letter-spacing:.24em; color:var(--gold-hi); margin:10px 0 8px; text-shadow:0 1px 6px #000}
.eyebrow::before,.eyebrow::after{content:""; width:40px; height:1px; background:linear-gradient(90deg,transparent,var(--gold))}
.eyebrow::after{transform:scaleX(-1)}
h1.hero-title{font-size:clamp(1.45rem,3.6vw,2.3rem); font-weight:900; color:#fbf0d4; letter-spacing:.03em; text-shadow:0 2px 0 #000, 0 4px 18px rgba(0,0,0,.9)}
.hero-title small{display:block; font-family:var(--f-body); font-weight:700; font-size:.48em; letter-spacing:.16em; color:var(--gold); margin-top:6px; text-transform:uppercase}
.hero-copy{max-width:60ch; margin:14px auto 0; color:#efe4cc; font-size:1rem; text-shadow:0 1px 8px #000}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:22px}

/* Geri sayım */
.cd-box{max-width:640px; margin:28px auto 0; text-align:center}
.cd-box .box-b{padding:18px 14px}
.cd{display:flex; justify-content:center; gap:10px}
.cd div{flex:1; max-width:110px; padding:10px 4px 8px; background:linear-gradient(180deg,#0e0803,#1c1208); border:1px solid var(--gold-line); box-shadow:inset 0 2px 8px rgba(0,0,0,.8)}
.cd b{display:block; font-family:var(--f-head); font-weight:900; font-size:2.3rem; line-height:1; color:var(--gold-hi); font-variant-numeric:tabular-nums; text-shadow:0 2px 0 #000}
.cd span{display:block; margin-top:6px; color:var(--muted); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase}
.cd-note{margin:14px 0 0; color:#dcccaa; font-size:.92rem}
.cd-open{display:none; font-family:var(--f-head); font-weight:900; font-size:1.8rem; color:var(--gold-hi)}

/* ---------- Portal düzeni ---------- */
.portal{display:grid; grid-template-columns:260px minmax(0,1fr) 300px; gap:20px; padding:30px 0 10px; grid-template-areas:"left main right"}
.col-left{grid-area:left} .col-main{grid-area:main} .col-right{grid-area:right}

.info-list li{display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px dashed rgba(201,164,92,.22); font-size:.88rem}
.info-list li:last-child{border-bottom:0}
.info-list span{color:var(--muted)}
.info-list b{color:var(--gold-hi); text-align:right; font-weight:700}
.stack{display:grid; gap:10px}

/* Duyurular */
.news li{display:grid; grid-template-columns:auto 1fr; gap:14px; padding:12px 0; border-bottom:1px solid rgba(90,60,20,.25)}
.news li:first-child{padding-top:0}
.news li:last-child{border-bottom:0; padding-bottom:0}
.news time{font-family:var(--f-head); font-weight:700; font-size:.78rem; color:#fff3d6; background:linear-gradient(180deg,#9a1f15,#6a100a); padding:6px 8px; text-align:center; line-height:1.2; border:1px solid #c9a45c; min-width:64px}
.news time small{display:block; font-size:.66rem; opacity:.85}
.news h3{font-size:1rem; margin-bottom:4px}
.news p{margin:0; font-size:.9rem}

.lead-text h2{font-size:1.35rem; margin-bottom:10px}
.lead-text p{font-size:.95rem}

/* Ödül havuzu */
.pool{text-align:center; padding:6px 0 14px; border-bottom:1px solid rgba(201,164,92,.25); margin-bottom:10px}
.pool small{display:block; color:var(--muted); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase}
.pool strong{display:block; font-family:var(--f-head); font-weight:900; font-size:2.2rem; line-height:1.1; color:var(--gold-hi); text-shadow:0 2px 0 #000, 0 0 18px rgba(240,213,144,.25)}
.prize-list li{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 0; border-bottom:1px dashed rgba(201,164,92,.22); font-size:.88rem}
.prize-list li:last-child{border-bottom:0}
.prize-list b{font-family:var(--f-head); font-weight:900; color:var(--gold-hi); white-space:nowrap; font-size:1rem}
.prize-list li.hl b{color:#ff9a7a}
.weekly{margin-top:12px; padding:12px; text-align:center; background:linear-gradient(180deg,#3a120c,#22090a); border:1px solid #8e1a12}
.weekly b{display:block; font-family:var(--f-head); font-weight:900; font-size:1.5rem; color:var(--gold-hi)}
.weekly span{display:block; font-size:.82rem; color:#e3cfb0}

/* ---------- Bölümler ---------- */
.section{padding:22px 0}
.sec-title{text-align:center; margin-bottom:18px}
.sec-title h2{font-size:clamp(1.3rem,2.8vw,1.8rem); color:var(--gold-hi); text-shadow:0 2px 0 #000}
.sec-title p{color:var(--muted); margin:6px auto 0; max-width:60ch}
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.feat-grid .box + .box{margin-top:0}
.feat .box-b{height:100%}
.feat h3{font-size:1rem; margin-bottom:8px; color:#5a1a0e}
.feat p{margin:0; font-size:.9rem}
.feat-icon{width:34px; height:34px; margin:4px 0 14px 3px; display:grid; place-items:center; background:linear-gradient(180deg,#9a1f15,#6a100a); border:1px solid var(--gold); color:var(--gold-hi); font-family:var(--f-head); font-weight:900; transform:rotate(45deg)}
.feat-icon i{transform:rotate(-45deg); font-style:normal; font-size:.95rem}

.faq details{border-bottom:1px solid rgba(90,60,20,.3); padding:12px 0}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer; list-style:none; font-weight:700; color:#3a1a06; font-size:.98rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+"; display:inline-block; width:22px; color:#8e1a12; font-family:var(--f-head); font-weight:900}
.faq details[open] summary::before{content:"−"}
.faq details p{margin:8px 0 0 22px; font-size:.92rem}

.tail{text-align:center; margin:22px 0 40px}
.tail .box-b{padding:30px 18px}
.tail h2{font-size:clamp(1.3rem,3vw,1.9rem); color:var(--gold-hi); margin-bottom:8px}
.tail p{color:#d6c6a4; max-width:56ch; margin:0 auto 18px}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--gold-lo); background:linear-gradient(180deg,#1a1007,#0c0702); padding:30px 0 22px; margin-top:10px}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:24px}
.foot-brand p{color:var(--muted); margin-top:10px; max-width:44ch; font-size:.86rem}
.foot-col strong{display:block; font-family:var(--f-head); color:var(--gold); letter-spacing:.14em; font-size:.78rem; margin-bottom:8px}
.foot-col a{display:block; color:#cbb994; padding:4px 0; font-size:.88rem}
.foot-col a:hover{color:var(--gold-hi)}
.foot-bottom{margin-top:24px; padding-top:14px; border-top:1px solid rgba(201,164,92,.2); color:var(--muted); font-size:.8rem; display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between}
.gokturk{text-align:left; font-family:"Noto Sans Old Turkic",serif; color:var(--gold); letter-spacing:.2em}

/* ---------- Tanıtım sayfası ---------- */
.page-head{position:relative; text-align:center; padding:34px 0 30px; border-bottom:1px solid var(--gold-lo); isolation:isolate; overflow:hidden}
.page-head::before{content:""; position:absolute; inset:0; z-index:-2; background:url("img/poster.jpg") center/cover; filter:sepia(.5) brightness(.45)}
.page-head::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(17,10,4,.2), rgba(17,10,4,.9) 95%)}
.page-head img{width:min(320px,70vw); height:auto; margin:0 auto 6px; filter:drop-shadow(0 8px 24px rgba(0,0,0,.8))}
.page-head h1{font-size:clamp(1.4rem,3.4vw,2.1rem); color:#fbf0d4; text-shadow:0 2px 0 #000}
.page-head p{color:#e3d4b4; max-width:60ch; margin:8px auto 0}
.guide{display:grid; grid-template-columns:250px minmax(0,1fr); gap:20px; padding:28px 0 10px}
.guide-nav{position:sticky; top:76px; align-self:start}
.guide-nav a{display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid rgba(201,164,92,.15); font-family:var(--f-head); font-weight:700; font-size:.82rem; letter-spacing:.06em; color:#d9c8a4}
.guide-nav a:last-child{border-bottom:0}
.guide-nav a::before{content:""; width:6px; height:6px; background:var(--gold-lo); transform:rotate(45deg); flex:0 0 auto}
.guide-nav a:hover,.guide-nav a.on{color:var(--gold-hi); background:rgba(201,164,92,.07)}
.guide-nav a.on::before{background:var(--gold-hi)}
.chapter{scroll-margin-top:80px}
.chapter + .chapter{margin-top:20px}
.chapter .box-b{padding:22px}
.chapter h2{font-size:1.3rem; margin-bottom:12px}
.chapter h3{font-size:1.02rem; margin:16px 0 6px}
.chapter p,.chapter li{font-size:.94rem}
.dot-list li{position:relative; padding-left:20px; margin-bottom:8px; color:#3a2a14}
.dot-list li::before{content:""; position:absolute; left:2px; top:.55em; width:7px; height:7px; background:#8e1a12; transform:rotate(45deg)}
.spec{width:100%; border-collapse:collapse; font-size:.92rem; margin:6px 0 4px}
.spec th,.spec td{text-align:left; padding:9px 10px; border-bottom:1px solid rgba(90,60,20,.25); vertical-align:top}
.spec th{width:42%; color:#5a1a0e; font-family:var(--f-head); font-size:.86rem}
.spec td{color:#2a1a0a; font-weight:700}
.stage{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; padding:12px 0; border-bottom:1px solid rgba(90,60,20,.22)}
.stage:last-child{border-bottom:0}
.stage b{display:grid; place-items:center; width:40px; height:40px; background:linear-gradient(180deg,#9a1f15,#6a100a); color:var(--gold-hi); border:1px solid var(--gold); font-family:var(--f-head); font-weight:900}
.stage h3{margin:2px 0 4px}
.stage p{margin:0}
.note{font-size:.84rem; color:#6a5030; font-style:italic}
.shot{width:100%; height:auto; aspect-ratio:16/7; object-fit:cover; border:1px solid var(--gold-line); box-shadow:0 0 0 1px #000, 0 6px 16px rgba(0,0,0,.4); margin:6px 0 14px; filter:sepia(.25)}

/* ---------- Duyarlı ---------- */
@media (max-width:1100px){
  .portal{grid-template-columns:240px minmax(0,1fr); grid-template-areas:"left main" "right main"}
  .portal .col-right{align-self:start}
}
@media (max-width:980px){
  .main-nav{display:none}
  .topbar .btn{margin-left:auto}
  .nav-toggle{display:flex; margin-left:0}
  .main-nav.open{display:flex; position:absolute; top:60px; left:0; right:0; flex-direction:column; align-items:stretch; background:#1a1007; border-bottom:1px solid var(--gold-lo); padding:6px 16px}
  .main-nav.open a{border-left:0; border-bottom:1px solid rgba(201,164,92,.15); padding:13px 4px}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .guide{grid-template-columns:1fr}
  .guide-nav{position:static}
  .guide-nav .box-b{display:flex; flex-wrap:wrap; padding:6px}
  .guide-nav a{border:0; padding:8px 10px}
}
@media (max-width:760px){
  .portal{grid-template-columns:1fr; grid-template-areas:"main" "right" "left"}
  .feat-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .hero{padding:24px 0 30px}
  .hero-actions .btn{width:100%}
  .cd b{font-size:1.7rem}
  .cd span{font-size:.62rem}
  .topbar .btn{padding:9px 10px; font-size:.7rem}
  .brand b{font-size:1.1rem}
  .brand img{width:34px; height:37px}
  .spec th{width:46%}
}
@media (prefers-reduced-motion:reduce){ *{scroll-behavior:auto!important; transition:none!important} }