/* ============================ TEMEL ============================ */
@font-face{
  font-family:'Fenomen Slab';
  src:url('../Fenomen%20Slab%20SCN%20Light.otf') format('opentype');
  font-display:swap;
}
:root{
  --bg:#0b0807;
  --panel:#171110;
  --panel2:#201814;
  --line:#3a2c22;
  --line2:#59432e;
  --gold:#e8b34b;
  --gold2:#f6d98d;
  --gold-dim:#a97e35;
  --ember:#e0704e;
  --txt:#ece0cb;
  --txt-dim:#a8947c;
  --txt-faint:#6f604f;
  --green:#8fce6a;
  --radius:14px;
  --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
/* hidden niteliği her zaman kazanmalı (display:flex/grid kuralları ezmesin) */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size:16px;line-height:1.65;
  overflow-x:clip;
  max-width:100vw;
}
h1,h2,h3,h4{font-family:'Fenomen Slab','Trajan Pro',Georgia,serif;letter-spacing:.5px;line-height:1.15}
a{color:var(--gold);text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;cursor:pointer;color:inherit;background:none;border:none}
::selection{background:rgba(232,179,75,.3)}

/* ============================ ÜST NAV ============================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  width:100%;max-width:100vw;box-sizing:border-box;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 20px;
  transition:background .3s, box-shadow .3s, padding .3s;
}
.nav.solid{
  background:linear-gradient(180deg, rgba(13,9,7,.97), rgba(13,9,7,.9));
  box-shadow:0 4px 30px rgba(0,0,0,.55);
  backdrop-filter:blur(10px);
  padding:8px 20px;
  border-bottom:1px solid var(--line);
}
.nav .logo{display:flex;align-items:center;flex-shrink:0}
.nav .logo img{height:42px;width:auto;transition:height .3s;filter:drop-shadow(0 2px 10px rgba(0,0,0,.7))}
.nav.solid .logo img{height:36px}
.nav .links{display:flex;gap:2px;align-items:center;justify-content:center;flex:1 1 auto;margin:0 4px;flex-wrap:nowrap;min-width:0}
.nav .links a{
  font-size:11.5px;letter-spacing:0.5px;text-transform:uppercase;color:var(--txt-dim);
  padding:6px 8px;border-radius:6px;transition:color .2s, background .2s;font-weight:600;
  white-space:nowrap;flex-shrink:0;
}
.nav .links a:hover{color:var(--gold2);background:rgba(232,179,75,.08)}
.nav .burger{display:none;font-size:20px;color:var(--gold);padding:6px 10px;border-radius:6px;background:rgba(32,24,20,.8);border:1px solid rgba(229,182,107,.3);cursor:pointer;flex-shrink:0}
.nav .burger:hover{background:rgba(45,34,28,.95);border-color:#f5d77f}
.d-drawer-only{display:none}

/* ============================ HERO ============================ */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:center;
  padding:120px 20px 90px;
  overflow:clip;
  background:#0b0807 url('../bg.jpg') center 30% / cover no-repeat;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(1100px 620px at 62% 42%, rgba(232,120,50,.16), transparent 62%),
    linear-gradient(180deg, rgba(11,8,7,.80), rgba(11,8,7,.58) 45%, var(--bg) 97%);
}
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 50%, transparent 45%, rgba(6,4,3,.55) 100%);
}
.hero-grid{
  position:relative;z-index:2;
  width:100%;max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(20px,4vw,54px);align-items:center;
}
.hero-copy{min-width:0}
.hero .hlogo{
  width:min(390px,68vw);margin-bottom:14px;
  filter:drop-shadow(0 10px 40px rgba(0,0,0,.85)) drop-shadow(0 0 50px rgba(232,140,50,.28));
  animation:heroIn 1s ease both;
}
.hero .date-badge{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid rgba(232,179,75,.45);border-radius:30px;
  background:rgba(20,13,9,.72);backdrop-filter:blur(6px);
  padding:8px 20px;margin:0 0 16px;
  font-size:13px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold2);font-weight:700;
  animation:heroIn 1s .15s ease both;
}
.hero .date-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--ember);box-shadow:0 0 10px var(--ember);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.hero h1{
  font-size:clamp(27px,3.5vw,49px);color:var(--gold2);
  text-shadow:0 4px 30px rgba(0,0,0,.95), 0 0 60px rgba(232,179,75,.22);
  animation:heroIn 1s .25s ease both;
}
.hero .tagline{
  margin-top:15px;font-family:'Fenomen Slab',Georgia,serif;
  font-size:clamp(16px,1.85vw,23px);line-height:1.35;color:var(--txt);
  animation:heroIn 1s .34s ease both;
}
.hero .tagline b{
  color:var(--gold);
  text-shadow:0 0 26px rgba(232,179,75,.45);
}
.hero .sub{
  margin-top:9px;font-size:clamp(14.5px,1.5vw,17px);color:var(--txt-dim);
  animation:heroIn 1s .42s ease both;
}
.hero .sub b{color:var(--txt)}
/* hero açıklama metni */
.hero-text{
  margin-top:20px;padding-left:16px;border-left:2px solid rgba(232,179,75,.3);
  display:flex;flex-direction:column;gap:10px;
  font-size:clamp(13.5px,1.35vw,15.5px);color:var(--txt-dim);max-width:640px;
  animation:heroIn 1s .58s ease both;
}
.hero-text b{color:var(--txt)}
.hero .ctas{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap;animation:heroIn 1s .66s ease both}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 32px;border-radius:11px;
  font-size:14.5px;letter-spacing:2px;text-transform:uppercase;font-weight:700;
  transition:transform .15s, box-shadow .25s, border-color .2s;
}
.btn.gold{
  color:#241708;background:linear-gradient(180deg,#f4ca6c,#c08a2b);
  box-shadow:0 6px 28px rgba(232,179,75,.4), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn.gold:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(232,179,75,.55), inset 0 1px 0 rgba(255,255,255,.45)}
.btn.ghost{
  color:var(--gold2);border:1px solid rgba(232,179,75,.4);background:rgba(18,12,9,.55);backdrop-filter:blur(4px);
}
.btn.ghost:hover{border-color:var(--gold);box-shadow:0 0 24px rgba(232,179,75,.25);transform:translateY(-2px)}
/* geri sayım */
.count{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap;animation:heroIn 1s .74s ease both}
.count .cell{
  min-width:86px;padding:14px 10px 10px;border-radius:12px;
  background:linear-gradient(180deg, rgba(38,26,18,.85), rgba(22,15,11,.85));
  border:1px solid var(--line2);backdrop-filter:blur(6px);
  box-shadow:0 8px 30px rgba(0,0,0,.45);
}
.count .n{font-size:32px;font-family:'Fenomen Slab',Georgia,serif;color:var(--gold2);font-variant-numeric:tabular-nums;line-height:1}
.count .l{font-size:10.5px;letter-spacing:2.5px;text-transform:uppercase;color:var(--txt-faint);margin-top:6px}
.count.opened .cell{display:none}
.count .open-msg{display:none;font-size:26px;color:var(--green);font-family:'Fenomen Slab',Georgia,serif;letter-spacing:2px}
.count.opened .open-msg{display:block}
.hero .scroll-cue{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  color:var(--txt-faint);font-size:12px;letter-spacing:3px;text-transform:uppercase;
  animation:bob 2s infinite ease-in-out;
}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}
@keyframes heroIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ============================ HERO GÖRSELİ (MOBİL DUYURU) ============================ */
.hero-art{
  position:relative;min-width:0;
  display:flex;align-items:center;justify-content:center;
  animation:heroIn 1.2s .3s ease both;
}
.hero-art .art-img{
  position:relative;z-index:2;
  width:100%;max-width:min(620px,46vw);height:auto;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.75)) drop-shadow(0 0 70px rgba(232,120,40,.18));
  will-change:transform;
}
/* nefes alma — çok yumuşak yükselip inme */
@keyframes artBreathe{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-17px) scale(1.012)}
}
.hero-art .art-glow{
  position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(660px,52vw);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%, rgba(232,140,50,.30), transparent 58%),
    radial-gradient(circle at 45% 65%, rgba(200,70,30,.20), transparent 62%);
  filter:blur(28px);
}
@keyframes glowBreathe{0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.07)}}

/* dönen dairesel "Metin2 Mobile!" rozeti */
.mobil-badge{
  position:absolute;z-index:3;left:-6px;top:2%;
  width:clamp(112px,12vw,166px);aspect-ratio:1;
  display:grid;place-items:center;
  filter:drop-shadow(0 8px 26px rgba(0,0,0,.7)) drop-shadow(0 0 30px rgba(232,140,40,.35));
}
.mobil-badge svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mobil-badge .mb-ring{
  fill:rgba(14,9,7,.82);stroke:rgba(232,179,75,.55);stroke-width:1.6;
}
.mobil-badge .mb-ring2{
  fill:none;stroke:rgba(232,179,75,.22);stroke-width:1;stroke-dasharray:4 6;
}
.mobil-badge .mb-spin{transform-origin:100px 100px}
@keyframes badgeSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.mobil-badge .mb-text{
  fill:var(--gold2);font-family:'Fenomen Slab',Georgia,serif;
  font-size:19px;letter-spacing:2.4px;font-weight:700;
}
.mobil-badge .mb-core{
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:1px;
  font-size:clamp(20px,2.3vw,30px);line-height:1;
}
.mobil-badge .mb-core small{
  font-family:'Fenomen Slab',Georgia,serif;
  font-size:clamp(8.5px,.85vw,11px);letter-spacing:2.6px;color:var(--gold);
  text-shadow:0 0 14px rgba(232,179,75,.6);
}
@media (prefers-reduced-motion: no-preference){
  .hero-art .art-img{animation:artBreathe 6.5s ease-in-out infinite}
  .hero-art .art-glow{animation:glowBreathe 6.5s ease-in-out infinite}
  .mobil-badge .mb-spin{animation:badgeSpin 20s linear infinite}
}

/* ============================ GENEL BÖLÜM ============================ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
section.blok{padding:74px 0 30px;scroll-margin-top:70px}
.sec-head{margin-bottom:34px}
.sec-head .no{
  font-size:13px;letter-spacing:4px;color:var(--ember);text-transform:uppercase;font-weight:700;
  display:flex;align-items:center;gap:14px;margin-bottom:10px;
}
.sec-head .no::after{content:'';width:70px;height:1px;background:linear-gradient(90deg,var(--ember),transparent)}
.sec-head h2{font-size:clamp(26px,3.4vw,40px);color:var(--gold2)}
.sec-head .lead{margin-top:12px;font-size:16.5px;color:var(--txt-dim);max-width:820px}
.sec-head .lead b{color:var(--txt)}

/* iki kolonlu bölüm (metin + medya) */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.split.rev{grid-template-columns:.95fr 1.05fr}
.split.rev .media{order:-1}
/* gelecek görseller için yer tutucu */
.media-slot{
  aspect-ratio:16/10;border-radius:var(--radius);
  border:2px dashed rgba(232,179,75,.28);
  background:
    radial-gradient(320px 180px at 50% 45%, rgba(232,140,50,.08), transparent 70%),
    linear-gradient(165deg, #191210, #120d0b);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:var(--txt-faint);
}
.media-slot .mi{font-size:34px;opacity:.6}
.media-slot .mt{font-size:12px;letter-spacing:3px;text-transform:uppercase}

/* kart & liste stilleri */
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.fcard{
  background:linear-gradient(168deg,#1e1613,#151010);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 22px 20px;position:relative;overflow:hidden;
  transition:transform .2s, border-color .25s, box-shadow .3s;
}
.fcard:hover{transform:translateY(-4px);border-color:var(--line2);box-shadow:0 14px 40px rgba(0,0,0,.5)}
.fcard::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(232,179,75,.55),transparent)}
.fcard .fi{font-size:26px;margin-bottom:10px}
.fcard h3{font-size:17px;color:var(--gold2);margin-bottom:8px}
.fcard p{font-size:14px;color:var(--txt-dim)}
.fcard p b{color:var(--txt)}

/* ---- görselli özellik kartları ---- */
.feat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1024px){ .feat-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .feat-grid{grid-template-columns:minmax(0,1fr)} }
.feat{
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(168deg,#1e1613,#141010);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:transform .25s, border-color .25s, box-shadow .3s;
}
.feat:hover{
  transform:translateY(-6px);border-color:var(--line2);
  box-shadow:0 22px 55px rgba(0,0,0,.6), 0 0 26px rgba(232,179,75,.1);
}
.feat .fimg{
  position:relative;aspect-ratio:1/1;overflow:hidden;
  display:flex;align-items:flex-end;
}
.feat .fimg img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);transition:transform .55s cubic-bezier(.2,.7,.3,1), filter .35s;
  filter:saturate(.95) contrast(1.02);
}
.feat:hover .fimg img{transform:scale(1.09);filter:saturate(1.08) contrast(1.05)}
.feat .fimg::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(11,8,7,.05) 30%, rgba(11,8,7,.72) 72%, rgba(20,16,16,.97));
}
/* hover'da soldan sağa geçen ışık süpürmesi */
.feat .fimg::before{
  content:'';position:absolute;z-index:4;top:-10%;bottom:-10%;left:0;width:48%;
  pointer-events:none;
  background:linear-gradient(100deg,
    transparent,
    rgba(255,241,208,.07) 38%,
    rgba(255,247,222,.20) 50%,
    rgba(255,241,208,.07) 62%,
    transparent);
  transform:translateX(-170%) skewX(-16deg);
}
@keyframes featSweep{
  from{transform:translateX(-170%) skewX(-16deg)}
  to{transform:translateX(330%) skewX(-16deg)}
}
.feat:hover .fimg::before{animation:featSweep .9s cubic-bezier(.3,.7,.4,1) 1}
.feat .fno{
  position:absolute;z-index:2;top:11px;left:12px;
  font-family:'Fenomen Slab',Georgia,serif;font-size:12px;letter-spacing:1.8px;
  color:var(--gold);padding:3px 10px;border-radius:999px;
  background:rgba(12,8,6,.72);border:1px solid rgba(232,179,75,.4);
  backdrop-filter:blur(4px);
}
.feat .fimg h3{
  position:relative;z-index:2;margin:0;padding:0 15px 12px;width:100%;
  font-size:clamp(15px,1.2vw,17.5px);line-height:1.25;color:var(--gold2);
  text-shadow:0 2px 12px rgba(0,0,0,.95);
}
.feat > p{padding:13px 15px 16px;font-size:13.2px;color:var(--txt-dim);margin:0}
.feat > p b{color:var(--txt)}

/* ============================ ÖRNEK BONUSLAR (İKİ KILIÇ + TOOLTIP) ============================ */
.ob{
  position:relative;
  padding:20px 18px 22px;border-radius:var(--radius);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(232,140,50,.07), transparent 60%),
    linear-gradient(168deg,#1e1613,#141010);
  border:1px solid var(--line);
}
.ob-kicker{
  text-align:center;font-family:'Fenomen Slab',Georgia,serif;
  font-size:13px;letter-spacing:4px;text-transform:uppercase;color:var(--gold);
  text-shadow:0 0 22px rgba(232,179,75,.35);
}
.ob-kicker::after{
  content:'';display:block;width:60px;height:1px;margin:9px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold-dim),transparent);
}
.ob-not{
  margin-top:11px;text-align:center;font-size:12.5px;line-height:1.5;color:var(--txt-dim);
}
.ob-not b{color:var(--gold2)}

.ob-silahlar{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  margin-top:18px;
}
.ob-slot{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:14px 10px 12px;border-radius:13px;
  background:linear-gradient(175deg, rgba(38,27,20,.7), rgba(20,15,13,.7));
  border:1px solid var(--line);
  transition:border-color .25s, transform .2s, box-shadow .3s;
}
.ob-slot:hover,.ob-slot:focus-visible,.ob-slot.acik{
  transform:translateY(-3px);border-color:rgba(232,179,75,.5);
  box-shadow:0 14px 34px rgba(0,0,0,.55);
}
.ob-et{
  font-size:10.5px;letter-spacing:2px;text-transform:uppercase;font-weight:800;
  padding:4px 11px;border-radius:999px;white-space:nowrap;
}
.ob-et.dusuk{color:#9fd6a8;background:rgba(143,206,106,.1);border:1px solid rgba(143,206,106,.32)}
.ob-et.yuksek{
  color:#ffe6ae;background:linear-gradient(180deg, rgba(232,179,75,.26), rgba(232,179,75,.08));
  border:1px solid rgba(232,179,75,.6);
  box-shadow:0 0 16px rgba(232,160,60,.3);
}
.ob-gorsel{position:relative;display:grid;place-items:center;width:100%;padding:6px 0}
.ob-gorsel img{
  position:relative;z-index:2;
  height:clamp(150px,20vw,236px);width:auto;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.75));
  transition:filter .3s, transform .3s;
}
.ob-slot:hover .ob-gorsel img{transform:translateY(-3px)}
.ob-ad{font-size:12px;letter-spacing:.6px;color:var(--txt-dim)}

/* --- yüksek oran: yüksek seviye MMORPG parıltısı --- */
.ob-slot.parlak{
  background:linear-gradient(175deg, rgba(56,38,20,.78), rgba(24,17,13,.78));
  border-color:rgba(232,179,75,.34);
}
.ob-slot.parlak .ob-ad{color:var(--gold2)}
.ob-slot.parlak .ob-gorsel img{
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.75))
         drop-shadow(0 0 14px rgba(255,214,120,.55))
         drop-shadow(0 0 34px rgba(232,150,50,.35))
         saturate(1.1) brightness(1.06);
}
/* arkadaki nefes alan altın hale */
.ob-slot.parlak .ob-gorsel::before{
  content:'';position:absolute;z-index:1;left:50%;top:50%;
  width:150px;height:78%;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(255,196,90,.42), rgba(232,120,40,.16) 46%, transparent 70%);
  filter:blur(16px);
}
@keyframes obHale{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}}
/* kıvılcımlar */
.ob-slot.parlak .kv{
  position:absolute;z-index:4;width:5px;height:5px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, #fff8e2, rgba(255,214,120,.85) 45%, transparent 70%);
  box-shadow:0 0 10px rgba(255,214,120,.9);
  opacity:0;
}
.ob-slot.parlak .kv.k1{left:38%;top:16%}
.ob-slot.parlak .kv.k2{left:58%;top:34%}
.ob-slot.parlak .kv.k3{left:42%;top:58%}
.ob-slot.parlak .kv.k4{left:56%;top:76%}
@keyframes obKivilcim{
  0%,100%{opacity:0;transform:scale(.4)}
  45%{opacity:1;transform:scale(1.25)}
}

/* --- oyun içi tooltip --- */
.ob-tip{
  position:absolute;z-index:9;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:min(252px,94%);
  padding:16px 15px 14px;
  text-align:center;
  background:rgba(16,16,18,.9);
  backdrop-filter:blur(4px);
  border:2px solid rgba(96,88,70,.85);
  box-shadow:0 18px 44px rgba(0,0,0,.72), inset 0 0 0 1px rgba(255,255,255,.05);
  animation:obTipIn .18s ease both;
}
/* incelenen kılıç görünür kalsın: tooltip karşı tarafa yerleşir */
.ob-tip.sol{left:0;right:auto;transform:translateY(-50%)}
.ob-tip.sag{left:auto;right:0;transform:translateY(-50%)}
@keyframes obTipIn{from{opacity:0}to{opacity:1}}
/* köşe süsleri (oyundan birebir 10x10 parçalar) */
.ob-tip .ko{
  position:absolute;width:14px;height:14px;
  background-size:100% 100%;background-repeat:no-repeat;
  image-rendering:pixelated;pointer-events:none;
  /* köşe süsleri koyu pikseller — koyu zeminde görünsün diye altına çevrilip altın tonlanıyor */
  filter:invert(1) sepia(.55) saturate(2.4) hue-rotate(-8deg) brightness(1.02);
  opacity:.85;
}
.ob-tip .ko.su{left:2px;top:2px;background-image:url('../esya/kose_su.png')}
.ob-tip .ko.sa{right:2px;top:2px;background-image:url('../esya/kose_sa.png')}
.ob-tip .ko.au{left:2px;bottom:2px;background-image:url('../esya/kose_au.png')}
.ob-tip .ko.aa{right:2px;bottom:2px;background-image:url('../esya/kose_aa.png')}
.ob-tip .t-ad{
  font-weight:800;font-size:14.5px;color:#ffd21e;
  text-shadow:1px 1px 0 rgba(0,0,0,.55);margin-bottom:7px;
}
.ob-tip .t-ad b{color:#ffd21e}
.ob-tip .t-sat{
  font-size:12.5px;font-weight:700;color:#8fd07a;
  text-shadow:1px 1px 0 rgba(0,0,0,.5);padding:1.5px 0;
}
.ob-tip .t-ayrac{
  margin:8px 0 5px;font-size:10.5px;letter-spacing:2px;text-transform:uppercase;
  font-weight:800;color:#f3e6c8;text-shadow:1px 1px 0 rgba(0,0,0,.5);
  display:flex;align-items:center;gap:8px;
}
.ob-tip .t-ayrac::before,.ob-tip .t-ayrac::after{content:'';flex:1;height:1px;background:rgba(23,20,14,.45)}
.ob-tip .t-ilerleme{
  margin-top:7px;font-size:11px;color:#efe4c6;opacity:.9;
  text-shadow:1px 1px 0 rgba(0,0,0,.45);
}
.ob-tip .t-giy{margin-top:9px;font-size:12px;font-weight:700;color:#f5efdc;text-shadow:1px 1px 0 rgba(0,0,0,.5)}
.ob-tip .t-sinif{font-size:12.5px;font-weight:800;color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.55)}

@media (prefers-reduced-motion: no-preference){
  .ob-slot.parlak .ob-gorsel::before{animation:obHale 3.6s ease-in-out infinite}
  .ob-slot.parlak .kv.k1{animation:obKivilcim 2.2s ease-in-out infinite}
  .ob-slot.parlak .kv.k2{animation:obKivilcim 2.6s ease-in-out .5s infinite}
  .ob-slot.parlak .kv.k3{animation:obKivilcim 2.4s ease-in-out 1.1s infinite}
  .ob-slot.parlak .kv.k4{animation:obKivilcim 2.8s ease-in-out 1.7s infinite}
}
@media (max-width:520px){
  .ob-gorsel img{height:clamp(126px,36vw,180px)}
  .ob-tip{width:min(250px,98%);padding:14px 12px 12px}
  .ob-tip .t-sat{font-size:11.5px}
}

/* ============================ BİYOLOG — PORTRE + YÖRÜNGE ============================ */
.biy-split{grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr)}
.biy-split>*{min-width:0}
.biy{
  --r:clamp(126px,15vw,196px);            /* yörünge yarıçapı */
  /* dönen yörünge kutusunun köşeleri sayfayı taşırmasın (ikonlar içeride kalır) */
  overflow:hidden;
  position:relative;margin:0 auto;
  width:calc(var(--r) * 2 + 66px);
  aspect-ratio:1;
  display:grid;place-items:center;
}
/* arkadaki sıcak hale */
.biy-hale{
  position:absolute;inset:6%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 44%, rgba(232,150,60,.24), rgba(200,80,30,.1) 52%, transparent 72%);
  filter:blur(20px);
}
@keyframes biyHale{0%,100%{opacity:.7}50%{opacity:1}}
/* dairesel portre */
.biy-cerceve{
  position:relative;z-index:2;
  width:calc(var(--r) * 1.62);aspect-ratio:1;border-radius:50%;
  overflow:hidden;display:grid;place-items:center;
  border:2px solid rgba(232,179,75,.42);
  box-shadow:0 16px 40px rgba(0,0,0,.6), 0 0 30px rgba(232,140,40,.18), inset 0 0 34px rgba(0,0,0,.55);
}
.biy-cerceve img{
  width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  filter:saturate(1.02) contrast(1.03);
}
/* yörünge: ikon grubu döner, ikonlar dik kalır */
.biy-yorunge{position:absolute;z-index:3;inset:0;pointer-events:none}
.biy-yorunge i{
  position:absolute;left:50%;top:50%;
  width:40px;height:40px;margin:-20px 0 0 -20px;
  transform:rotate(var(--a)) translateY(calc(var(--r) * -1));
}
.biy-yorunge i span{
  display:grid;place-items:center;width:40px;height:40px;border-radius:10px;
  background:radial-gradient(circle at 50% 36%, rgba(58,42,28,.94), rgba(16,12,10,.94));
  border:1px solid rgba(232,179,75,.5);
  box-shadow:0 4px 14px rgba(0,0,0,.65), 0 0 14px rgba(255,206,110,.35);
  transform:rotate(calc(var(--a) * -1));
}
.biy-yorunge i img{
  width:auto;height:auto;max-width:26px;max-height:30px;
  image-rendering:pixelated;filter:drop-shadow(0 1px 3px rgba(0,0,0,.85));
}
@keyframes biyDon{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes biyDonTers{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}

/* tablodaki ikonlu hücreler */
.biy-tbl td .ico{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.biy-tbl td .ico img{
  flex:0 0 26px;width:26px;height:26px;padding:2px;border-radius:6px;
  image-rendering:pixelated;
  background:radial-gradient(circle at 50% 38%, #2c211a, #14100d);
  border:1px solid var(--line);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.7));
}

@media (prefers-reduced-motion: no-preference){
  .biy-hale{animation:biyHale 4.6s ease-in-out infinite}
  .biy-yorunge{animation:biyDon 34s linear infinite}
  .biy-yorunge i span{animation:biyDonTers 34s linear infinite}
}
@media (max-width:900px){
  .biy-split{grid-template-columns:minmax(0,1fr)}
  .biy{--r:clamp(112px,30vw,160px)}
}
@media (max-width:760px){
  .biy-tbl td .ico{white-space:normal}
}
@media (max-width:520px){
  .biy-yorunge i,.biy-yorunge i span{width:34px;height:34px}
  .biy-yorunge i{margin:-17px 0 0 -17px}
  .biy-yorunge i img{max-width:22px;max-height:26px}
  .biy-tbl td .ico img{flex-basis:22px;width:22px;height:22px}
}

/* ============================ GEAR SCORE HARİTA EŞİKLERİ + HESAPLAMA CTA ============================ */
/* --- harita Gear Score şartı paneli (sağ kolon) --- */
.gsp{
  display:flex;flex-direction:column;gap:6px;
  padding:14px;border-radius:var(--radius);
  background:linear-gradient(168deg,#1e1613,#141010);
  border:1px solid var(--line);
}
.gsp-bas{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding-bottom:10px;margin-bottom:2px;border-bottom:1px solid var(--line);
}
.gsp-bas span{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--txt-dim);font-weight:700}
.gsp-bas b{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold-dim)}
.gsp-satir{
  position:relative;display:flex;align-items:center;gap:11px;
  padding:7px 10px;border-radius:10px;overflow:hidden;
  background:linear-gradient(170deg,#241a14,#181110);
  border:1px solid var(--line);
  transition:border-color .2s, transform .16s;
}
.gsp-satir:hover{border-color:rgba(232,179,75,.45);transform:translateX(2px)}
.gsp-satir .gr{
  flex:0 0 62px;width:62px;height:34px;border-radius:7px;
  background-size:cover;background-position:center;
  border:1px solid var(--line2);
  box-shadow:inset 0 0 14px rgba(0,0,0,.6);
}
.gsp-satir .ad{
  flex:1;min-width:0;font-family:'Fenomen Slab',Georgia,serif;
  font-size:14px;color:var(--gold2);letter-spacing:.4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gsp-satir .gs{
  flex:0 0 auto;font-family:'Fenomen Slab',Georgia,serif;
  font-size:16px;color:var(--gold);letter-spacing:.5px;
  padding:2px 11px;border-radius:999px;
  background:rgba(10,7,5,.6);border:1px solid rgba(232,179,75,.4);
}
@media (max-width:520px){
  .gsp-satir .gr{flex-basis:50px;width:50px;height:30px}
  .gsp-satir .ad{font-size:13px}
  .gsp-satir .gs{font-size:14.5px}
}

/* --- geniş yatay hesaplama butonu --- */
.gs-cta{
  display:flex;align-items:center;gap:14px;width:100%;max-width:600px;
  margin-top:22px;padding:13px 18px;border-radius:12px;
  background:linear-gradient(100deg, #f4ca6c 0%, #e0ad4a 42%, #c8912f 100%);
  color:#2a1a06;
  box-shadow:0 8px 26px rgba(232,179,75,.3), inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .18s, box-shadow .28s;
  position:relative;overflow:hidden;
}
.gs-cta:hover{transform:translateY(-3px);box-shadow:0 16px 44px rgba(232,179,75,.48), inset 0 1px 0 rgba(255,255,255,.45)}
.gs-cta-ic{
  flex:0 0 40px;height:40px;border-radius:10px;
  display:grid;place-items:center;font-size:20px;
  background:rgba(42,26,6,.16);border:1px solid rgba(42,26,6,.2);
}
.gs-cta-tx{display:flex;flex-direction:column;min-width:0;gap:2px}
.gs-cta-tx b{
  font-family:'Fenomen Slab',Georgia,serif;
  font-size:clamp(14.5px,1.5vw,17.5px);letter-spacing:.8px;line-height:1.2;
}
.gs-cta-tx small{font-size:11.5px;opacity:.78;font-weight:600}
.gs-cta-ok{
  margin-left:auto;flex:0 0 auto;font-size:22px;font-weight:800;
  transition:transform .22s;
}
.gs-cta:hover .gs-cta-ok{transform:translateX(5px)}
/* üzerine gelince geçen ışık */
.gs-cta::after{
  content:'';position:absolute;top:0;bottom:0;left:0;width:38%;pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.35) 48%, transparent);
  transform:translateX(-160%) skewX(-16deg);
}
@keyframes gsCtaSweep{from{transform:translateX(-160%) skewX(-16deg)}to{transform:translateX(360%) skewX(-16deg)}}
.gs-cta:hover::after{animation:gsCtaSweep .9s ease}
@media (max-width:560px){
  .gs-cta{padding:14px 16px;gap:12px}
  .gs-cta-ic{flex-basis:38px;height:38px;font-size:19px}
  .gs-cta-tx small{font-size:11px}
  .gs-cta-ok{font-size:18px}
}

/* ============================ TİCARET DÖNGÜSÜ — TAKAS SAHNESİ ============================ */
.tc{
  position:relative;display:grid;place-items:center;
  min-height:clamp(240px,26vw,360px);
}
.tc-img{
  position:relative;z-index:2;width:min(100%,520px);height:auto;
  filter:drop-shadow(0 22px 38px rgba(0,0,0,.72)) drop-shadow(0 0 44px rgba(232,120,40,.14));
  pointer-events:none;user-select:none;
}
/* arkadaki sıcak hale */
.tc-hale{
  position:absolute;z-index:1;left:50%;top:52%;transform:translate(-50%,-50%);
  width:min(96%,560px);aspect-ratio:1/.72;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(232,140,50,.22), transparent 60%),
    radial-gradient(ellipse at 50% 66%, rgba(200,70,30,.14), transparent 64%);
  filter:blur(26px);
}
@keyframes tcHale{0%,100%{opacity:.72}50%{opacity:1}}
/* el değiştirme noktasındaki altın odak */
.tc-odak{
  position:absolute;z-index:3;left:51.5%;top:53%;transform:translate(-50%,-50%);
  width:78px;height:78px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(255,214,120,.5), rgba(255,180,60,.18) 42%, transparent 70%);
  filter:blur(6px);
}
@keyframes tcOdak{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(.9)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}}

/* uçan eşyalar */
.tc-ucus{position:absolute;z-index:4;inset:0;pointer-events:none}
.tc-ucan{
  position:absolute;left:0;top:0;
  width:34px;height:34px;display:grid;place-items:center;
  border-radius:9px;
  background:radial-gradient(circle at 50% 38%, rgba(58,42,28,.92), rgba(16,12,10,.92));
  border:1px solid rgba(232,179,75,.55);
  box-shadow:0 4px 14px rgba(0,0,0,.6), 0 0 16px rgba(255,206,110,.5);
  will-change:transform,opacity;
}
.tc-ucan img{
  width:auto;height:auto;max-width:24px;max-height:30px;
  image-rendering:pixelated;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.85));
}

@media (prefers-reduced-motion: no-preference){
  .tc-hale{animation:tcHale 4.4s ease-in-out infinite}
  .tc-odak{animation:tcOdak 2.6s ease-in-out infinite}
}
@media (max-width:900px){
  .tc{min-height:0}
  .tc-img{width:min(96%,420px)}
  .tc-ucan{width:28px;height:28px}
  .tc-ucan img{max-width:20px;max-height:24px}
}

/* ============================ FARM & PVP — NİNJA PARALAKS ============================ */
.nj{
  position:relative;display:grid;place-items:center;
  min-height:clamp(300px,34vw,470px);
  perspective:900px;
}
.nj-img{
  position:relative;z-index:3;
  width:min(100%,470px);height:auto;
  transform:translate3d(0,0,0);
  will-change:transform;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.72)) drop-shadow(0 0 46px rgba(232,120,40,.16));
  pointer-events:none;user-select:none;
}
/* arkadaki nefes alan sıcak hale */
.nj-hale{
  position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(94%,520px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle at 50% 46%, rgba(232,140,50,.26), transparent 58%),
    radial-gradient(circle at 42% 62%, rgba(200,70,30,.16), transparent 62%);
  filter:blur(26px);
}
@keyframes njHale{0%,100%{opacity:.72;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.07)}}

/* --- etraftaki parıltılar --- */
.nj-parilti{position:absolute;z-index:2;inset:0;pointer-events:none}
.nj-parilti i{
  position:absolute;border-radius:50%;opacity:0;
  background:radial-gradient(circle, #fff9e8, rgba(255,214,120,.9) 42%, transparent 70%);
  box-shadow:0 0 12px rgba(255,206,110,.95);
}
.nj-parilti .p1{left:14%;top:18%;width:7px;height:7px}
.nj-parilti .p2{left:82%;top:24%;width:5px;height:5px}
.nj-parilti .p3{left:8%;top:52%;width:6px;height:6px}
.nj-parilti .p4{left:88%;top:58%;width:8px;height:8px}
.nj-parilti .p5{left:24%;top:78%;width:5px;height:5px}
.nj-parilti .p6{left:70%;top:84%;width:6px;height:6px}
.nj-parilti .p7{left:48%;top:8%;width:5px;height:5px}
.nj-parilti .p8{left:60%;top:44%;width:4px;height:4px}
@keyframes njParilti{
  0%,100%{opacity:0;transform:translateY(0) scale(.4)}
  40%{opacity:1;transform:translateY(-8px) scale(1.2)}
  70%{opacity:.35;transform:translateY(-14px) scale(.9)}
}

@media (prefers-reduced-motion: no-preference){
  .nj-hale{animation:njHale 4.2s ease-in-out infinite}
  .nj-parilti .p1{animation:njParilti 3.1s ease-in-out infinite}
  .nj-parilti .p2{animation:njParilti 3.6s ease-in-out .4s infinite}
  .nj-parilti .p3{animation:njParilti 3.3s ease-in-out .9s infinite}
  .nj-parilti .p4{animation:njParilti 3.9s ease-in-out 1.3s infinite}
  .nj-parilti .p5{animation:njParilti 3.4s ease-in-out 1.7s infinite}
  .nj-parilti .p6{animation:njParilti 3.7s ease-in-out 2.1s infinite}
  .nj-parilti .p7{animation:njParilti 3.2s ease-in-out 2.5s infinite}
  .nj-parilti .p8{animation:njParilti 2.9s ease-in-out 2.9s infinite}
}
@media (max-width:900px){
  .nj{min-height:0}
  .nj-img{width:min(78%,360px)}
}

/* ============================ ARTI BASMA + EFSUN DEĞİŞTİRME ============================ */
.ab{
  position:relative;padding:18px 16px 18px;border-radius:var(--radius);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(232,140,50,.07), transparent 60%),
    linear-gradient(168deg,#1e1613,#141010);
  border:1px solid var(--line);
}
.ab-kicker{
  text-align:center;font-family:'Fenomen Slab',Georgia,serif;
  font-size:12.5px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);
  text-shadow:0 0 22px rgba(232,179,75,.35);
}
.ab-kicker::after{
  content:'';display:block;width:56px;height:1px;margin:9px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold-dim),transparent);
}
/* eşya seçici şeridi */
/* uyarı rozeti */
.ab-uyari{
  display:block;width:fit-content;max-width:100%;margin:11px auto 0;
  padding:6px 14px;border-radius:999px;text-align:center;
  font-size:10.5px;letter-spacing:.9px;line-height:1.45;font-weight:700;
  color:var(--txt-dim);
  background:rgba(224,112,78,.09);border:1px solid rgba(224,112,78,.34);
}
.ab-secici{
  display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;justify-items:center;
  margin-top:13px;padding-bottom:13px;border-bottom:1px solid var(--line);
}
.ab-esya{
  position:relative;width:42px;height:42px;padding:3px;border-radius:9px;
  display:grid;place-items:center;
  background:radial-gradient(circle at 50% 36%, #2a1f18, #14100d);
  border:1px solid var(--line);
  transition:border-color .2s, transform .16s, box-shadow .22s;
}
.ab-esya img{width:auto;height:auto;max-width:30px;max-height:36px;image-rendering:pixelated}
.ab-esya:hover{transform:translateY(-2px);border-color:var(--gold-dim)}
.ab-esya.on{
  border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(232,179,75,.3), 0 0 16px rgba(232,160,60,.35);
  background:radial-gradient(circle at 50% 36%, #3a2a19, #17120e);
}
/* oyun içi tooltip görünümü */
.ab-tip{
  position:relative;margin-top:13px;padding:13px 14px 12px;
  background:rgba(16,16,18,.9);border:2px solid rgba(96,88,70,.85);
  box-shadow:0 14px 34px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.05);
}
.ab-tip .ko{
  position:absolute;width:14px;height:14px;
  background-size:100% 100%;background-repeat:no-repeat;
  image-rendering:pixelated;pointer-events:none;
  filter:invert(1) sepia(.55) saturate(2.4) hue-rotate(-8deg) brightness(1.02);
  opacity:.85;
}
.ab-tip .ko.su{left:2px;top:2px;background-image:url('../esya/kose_su.png')}
.ab-tip .ko.sa{right:2px;top:2px;background-image:url('../esya/kose_sa.png')}
.ab-tip .ko.au{left:2px;bottom:2px;background-image:url('../esya/kose_au.png')}
.ab-tip .ko.aa{right:2px;bottom:2px;background-image:url('../esya/kose_aa.png')}
/* basma anındaki altın flaş */
@keyframes abFlas{0%{box-shadow:0 0 0 0 rgba(255,214,120,.65), 0 14px 34px rgba(0,0,0,.6)}100%{box-shadow:0 0 0 16px rgba(255,214,120,0), 0 14px 34px rgba(0,0,0,.6)}}
.ab-tip.flas{animation:abFlas .7s ease-out}

.ab-bas{display:flex;align-items:center;gap:10px;padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.07)}
.ab-ikon{
  flex:0 0 40px;width:40px;height:40px;padding:3px;border-radius:8px;
  display:grid;place-items:center;
  background:radial-gradient(circle at 50% 36%, #2a1f18, #14100d);
  border:1px solid rgba(96,88,70,.7);
}
.ab-ikon img{width:auto;height:auto;max-width:30px;max-height:34px;image-rendering:pixelated}
.ab-adblok{display:flex;flex-direction:column;min-width:0}
.ab-adblok b{font-size:14px;color:#ffd21e;text-shadow:1px 1px 0 rgba(0,0,0,.55)}
.ab-adblok b span{color:#ffd21e}
.ab-adblok small{font-size:11px;color:#cfc4a8}
.ab-dal{
  margin-left:auto;flex:0 0 auto;
  font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;font-weight:800;
  padding:3px 9px;border-radius:999px;white-space:nowrap;
}
.ab-dal.yuksek{color:#ffe6ae;background:rgba(232,179,75,.18);border:1px solid rgba(232,179,75,.6)}
.ab-dal.dusuk{color:#9fd6a8;background:rgba(143,206,106,.12);border:1px solid rgba(143,206,106,.4)}

.ab-govde{padding-top:8px}
.ab-bos{font-size:12px;color:#a89e88;text-align:center;padding:10px 8px 4px}
.ab-bos b{color:#cfc4a8}
.ab-sat.onizleme{color:#8d8574;font-weight:600;font-size:11.5px}
.ab-sat.onizleme b{color:#b9ad92}
.ab-ayrac{
  display:flex;align-items:center;gap:8px;margin:8px 0 5px;
  font-size:9.5px;letter-spacing:2px;text-transform:uppercase;font-weight:800;color:#f3e6c8;
}
.ab-ayrac small{letter-spacing:1px;color:#b4a88c;font-weight:700}
.ab-ayrac::before,.ab-ayrac::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.1)}
.ab-sat{
  font-size:12.5px;font-weight:700;padding:2px 0;
  text-shadow:1px 1px 0 rgba(0,0,0,.5);
  display:flex;align-items:center;gap:7px;
}
.ab-sat.sabit{color:#ffca6a}
.ab-sat.efsun{color:#8fd07a;animation:abSatIn .32s ease both}
@keyframes abSatIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.ab-sat .lv{
  flex:0 0 auto;font-size:9px;letter-spacing:.8px;font-weight:800;
  color:#d9cba6;padding:1px 5px;border-radius:4px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
}
/* butonlar */
.ab-butonlar{display:flex;gap:9px;margin-top:14px}
.ab-btn{
  flex:1;padding:11px 12px;border-radius:10px;
  font-size:12px;letter-spacing:1.6px;text-transform:uppercase;font-weight:800;
  transition:transform .15s, box-shadow .25s, border-color .2s, opacity .2s;
}
.ab-btn.bas{
  color:#241708;background:linear-gradient(180deg,#f0c264,#c8912f);border:none;
  box-shadow:0 3px 16px rgba(232,179,75,.35), inset 0 1px 0 rgba(255,255,255,.35);
}
.ab-btn.bas:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 26px rgba(232,179,75,.5), inset 0 1px 0 rgba(255,255,255,.35)}
.ab-btn.efsun{
  color:var(--gold2);background:rgba(24,16,11,.85);
  border:1px solid rgba(232,179,75,.45);
}
.ab-btn.efsun:hover:not(:disabled){transform:translateY(-2px);border-color:var(--gold);box-shadow:0 0 18px rgba(232,179,75,.28)}
.ab-btn:disabled{opacity:.4;cursor:not-allowed}
.ab-not{margin-top:11px;text-align:center;font-size:11.5px;color:var(--txt-dim);line-height:1.5}
.ab-not b{color:var(--gold2)}

@media (max-width:520px){
  .ab-secici{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
  .ab-esya{width:38px;height:38px}
  .ab-esya img{max-width:26px;max-height:32px}
  .ab-sat{font-size:11.5px}
  .ab-butonlar{flex-direction:column}
}

/* ============================ EŞYA KIRDIRMA ============================ */
/* sol taraftaki ödül listesi */
.kr-liste{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.kr-satir{
  display:flex;align-items:center;gap:12px;
  padding:11px 13px;border-radius:11px;
  background:linear-gradient(170deg,#241a14,#181110);
  border:1px solid var(--line);
  transition:border-color .22s, transform .18s;
}
.kr-satir:hover{border-color:var(--gold-dim);transform:translateY(-2px)}
.kr-satir .ic{
  flex:0 0 42px;width:42px;height:42px;padding:4px;
  display:grid;place-items:center;border-radius:9px;
  background:radial-gradient(circle at 50% 36%, #2e2219, #14100d);
  border:1px solid var(--line2);
}
.kr-satir .ic img{width:28px;height:28px;image-rendering:pixelated;filter:drop-shadow(0 2px 3px rgba(0,0,0,.85))}
.kr-satir .tx{display:flex;flex-direction:column;min-width:0}
.kr-satir .tx b{font-size:13.5px;color:var(--gold2)}
.kr-satir .tx small{font-size:11.5px;color:var(--txt-faint);line-height:1.4}

/* ---- sol kolon: ara başlık, örnekler ---- */
.kr-satir .ic svg{width:28px;height:28px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.85))}
.pc-alt{
  display:flex;align-items:center;gap:10px;
  font-family:'Fenomen Slab',Georgia,serif;font-size:15px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--gold2);margin:17px 0 10px;
}
.pc-alt::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent)}
.pc-ornekler{display:grid;gap:9px}
.pc-o{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;
  padding:11px 13px;border-radius:11px;
  background:linear-gradient(100deg, rgba(36,25,18,.85), rgba(20,15,12,.7));
  border:1px solid var(--line);
}
.pc-o.y{border-color:rgba(232,179,75,.4);background:linear-gradient(100deg, rgba(58,40,17,.7), rgba(22,16,12,.7))}
.pc-o-ust{font-size:13px;color:var(--txt);min-width:0}
.pc-o-ust b{color:var(--gold2)}
.pc-o-orta{font-size:11.5px;color:var(--txt-faint);white-space:nowrap}
.pc-o-orta b{color:var(--txt-dim)}
.pc-o-orta em{
  font-style:normal;font-weight:800;font-size:11px;margin-left:3px;
  padding:2px 6px;border-radius:5px;color:#ffe6ae;
  background:rgba(232,179,75,.14);border:1px solid rgba(232,179,75,.32);
}
.pc-o-gg{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  font-size:12.5px;font-weight:800;color:var(--gold);
}
.pc-o-gg img{width:19px;height:19px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.8))}
.pc-o.y .pc-o-gg{color:#ffd98a;text-shadow:0 0 12px rgba(232,160,60,.5)}
.pc-mini{font-size:12.5px;color:var(--txt-faint);margin-top:10px;line-height:1.55}
.pc-mini b{color:var(--txt-dim)}
#kirdirma .note{margin-top:16px;padding:12px 15px;font-size:13.5px}
@media (max-width:560px){
  .pc-o{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  .pc-o-orta{grid-column:1;justify-self:start}
}

/* ============================ PARÇALAMA PANELİ ============================ */
.pc-baslik{
  display:flex;align-items:center;gap:10px;
  font-family:'Fenomen Slab',Georgia,serif;font-size:15.5px;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--gold2);line-height:1.3;
  padding-bottom:13px;margin-bottom:15px;border-bottom:1px solid var(--line);
}
.pc-baslik::before{
  content:'';flex:0 0 3px;align-self:stretch;border-radius:2px;
  background:linear-gradient(180deg,var(--gold),rgba(232,179,75,.15));
}
.pc{
  position:relative;padding:16px 17px 15px;border-radius:var(--radius);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(232,140,50,.08), transparent 62%),
    linear-gradient(168deg,#1e1613,#141010);
  border:1px solid var(--line);
}

/* --- GG kasası --- */
/* panel sol kolonla aynı yüksekliğe uzar; artan boşluğu sahne yutar */
#kirdirma .split{align-items:stretch}
#kirdirma .media{display:flex}
#kirdirma .pc{flex:1;display:flex;flex-direction:column}
.pc-kasa{display:flex;align-items:center;gap:11px}
.pc-kasa-ic{
  position:relative;flex:0 0 44px;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 50% 35%, #3a2a16, #17110d);
  border:1px solid rgba(232,179,75,.42);
  box-shadow:inset 0 0 12px rgba(0,0,0,.6);
}
.pc-kasa-ic img{width:32px;height:32px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.8))}
.pc.artti .pc-kasa-ic{animation:pcKasaPop .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes pcKasaPop{0%,100%{transform:scale(1)}45%{transform:scale(1.14)}}
.pc-kasa-tx{display:flex;flex-direction:column;justify-content:center;min-width:0;flex:1}
.pc-kasa-tx small{font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--txt-faint)}
.pc-kasa-tx strong{
  font-family:'Fenomen Slab',Georgia,serif;font-size:28px;line-height:1.15;color:var(--gold);
  font-variant-numeric:tabular-nums;text-shadow:0 0 20px rgba(232,160,60,.32);
}
.pc-kasa-tx strong i{font-style:normal;font-size:13px;color:var(--gold-dim);margin-left:3px}
.pc-hedef{
  display:flex;flex-direction:column;align-items:flex-end;gap:1px;text-align:right;
  font-size:10px;letter-spacing:1.3px;text-transform:uppercase;color:var(--txt-faint);white-space:nowrap;
}
.pc-hedef b{font-size:14px;letter-spacing:0;color:var(--txt-dim);font-variant-numeric:tabular-nums}
.pc-bar{
  position:relative;height:7px;margin:11px 0 4px;border-radius:999px;overflow:hidden;
  background:rgba(0,0,0,.5);border:1px solid var(--line);
}
.pc-bar i{
  display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,#8a5a18,#e8b34b 60%,#ffe6ae);
  box-shadow:0 0 14px rgba(232,160,60,.55);
  transition:width .75s cubic-bezier(.25,.8,.3,1);
}
.pc.dolu .pc-bar i{animation:pcBarNabiz 1.5s ease-in-out infinite}
@keyframes pcBarNabiz{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}

/* --- parçalama sahnesi --- */
.pc-sahne{
  position:relative;flex:1;display:grid;place-items:center;min-height:352px;padding:10px 0 6px;
  transition:min-height .45s ease;
}
.pc-ipucu{
  position:absolute;top:2px;left:50%;transform:translateX(-50%);z-index:6;
  font-size:12px;text-align:center;color:var(--txt-dim);white-space:nowrap;
  transition:opacity .3s;
}
.pc-ipucu b{color:var(--gold2)}
.pc-esya{
  position:relative;z-index:2;margin-top:16px;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:9px 14px;border-radius:13px;
  background:linear-gradient(175deg, rgba(56,38,20,.6), rgba(24,17,13,.6));
  border:1px solid rgba(232,179,75,.3);
  transition:border-color .25s, transform .2s, box-shadow .3s, opacity .3s;
}
.pc-esya:hover:not(:disabled),.pc-esya:focus-visible{
  transform:translateY(-3px);border-color:rgba(232,179,75,.62);
  box-shadow:0 14px 34px rgba(0,0,0,.55), 0 0 26px rgba(232,160,60,.16);
}
.pc-esya:disabled{opacity:.4;filter:grayscale(.5)}
/* bekleyen eşya hafifçe nabız atarak tıklamaya davet eder */
@keyframes pcDavet{0%,100%{box-shadow:0 0 0 rgba(232,160,60,0)}50%{box-shadow:0 0 24px rgba(232,160,60,.24)}}
.pc:not(.kiriliyor):not(.kirildi):not(.bitti) .pc-esya:not(:disabled):not(:hover){animation:pcDavet 2.9s ease-in-out infinite}
/* sıra bittiğinde eşya alanı kapanır, yerini dükkân alır */
.pc.bitti .pc-esya{opacity:0;transform:scale(.92);pointer-events:none;transition:opacity .38s, transform .38s}
.pc.bitti .pc-sahne{min-height:76px}
.pc.bitti .pc-ipucu{position:static;transform:none;padding:12px 0 4px}
.pc-et{
  font-size:10.5px;letter-spacing:2px;text-transform:uppercase;font-weight:800;
  padding:4px 11px;border-radius:999px;white-space:nowrap;
  color:#ffe6ae;background:linear-gradient(180deg, rgba(232,179,75,.26), rgba(232,179,75,.08));
  border:1px solid rgba(232,179,75,.6);box-shadow:0 0 16px rgba(232,160,60,.3);
}
.pc-et.dusuk{
  color:#cfd8e4;background:linear-gradient(180deg, rgba(150,168,190,.2), rgba(150,168,190,.05));
  border-color:rgba(160,178,200,.5);box-shadow:0 0 14px rgba(120,150,190,.2);
}
.pc-gorsel{position:relative;display:grid;place-items:center;padding:2px 0}
.pc-gorsel img{
  position:relative;z-index:2;
  height:clamp(210px,26vw,296px);width:auto;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.75))
         drop-shadow(0 0 14px rgba(255,214,120,.5))
         drop-shadow(0 0 32px rgba(232,150,50,.3))
         saturate(1.08) brightness(1.05);
  transition:opacity .25s, transform .25s, filter .25s;
}
.pc-gorsel::before{
  content:'';position:absolute;z-index:1;left:50%;top:50%;
  width:112px;height:80%;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(255,196,90,.4), rgba(232,120,40,.15) 46%, transparent 70%);
  filter:blur(16px);
}
.pc.dusuk-tur .pc-gorsel img{
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.75)) drop-shadow(0 0 10px rgba(170,190,215,.3)) saturate(.85);
}
.pc.dusuk-tur .pc-gorsel::before{
  background:radial-gradient(circle, rgba(150,180,215,.24), rgba(90,120,160,.1) 46%, transparent 70%);
}
@keyframes pcHale{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}}
.pc-gorsel .kv{
  position:absolute;z-index:3;width:5px;height:5px;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle, #fff8e2, rgba(255,214,120,.85) 45%, transparent 70%);
  box-shadow:0 0 10px rgba(255,214,120,.9);
}
.pc-gorsel .kv.k1{left:42%;top:18%}
.pc-gorsel .kv.k2{left:56%;top:44%}
.pc-gorsel .kv.k3{left:45%;top:70%}
@keyframes pcKivilcim{0%,100%{opacity:0;transform:scale(.4)}45%{opacity:1;transform:scale(1.25)}}
.pc-ad{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12.5px;letter-spacing:.6px;color:var(--gold2)}
.pc-ad em{font-style:normal;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--txt-faint)}

/* --- parçalanma --- */
@keyframes pcSarsinti{
  0%,100%{transform:translateX(0) rotate(0)}
  15%{transform:translateX(-5px) rotate(-1.6deg)}
  30%{transform:translateX(5px) rotate(1.6deg)}
  45%{transform:translateX(-4px) rotate(-1.2deg)}
  60%{transform:translateX(4px) rotate(1.2deg)}
  80%{transform:translateX(-2px) rotate(-.6deg)}
}
.pc.kiriliyor .pc-esya{animation:pcSarsinti .42s ease}
@keyframes pcDagil{
  0%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.12);filter:blur(3px) brightness(2)}
}
.pc.kirildi .pc-gorsel img{animation:pcDagil .38s ease-out forwards}
.pc.kirildi .pc-gorsel::before,.pc.kirildi .pc-gorsel .kv{opacity:0!important;animation:none!important}
@keyframes pcGeriGel{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.pc.yenilendi .pc-gorsel img{animation:pcGeriGel .45s ease both}
.pc-gorsel .sr{
  position:absolute;z-index:4;left:50%;top:50%;
  width:9px;height:15px;border-radius:2px;pointer-events:none;opacity:0;
  background:linear-gradient(160deg,#d8c9a4,#6b5a3c 55%,#2b241a);
  box-shadow:0 0 8px rgba(255,214,120,.45);
}
@keyframes pcParca{
  0%{opacity:1;transform:translate(-50%,-50%) rotate(0) scale(1)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(.5)}
}
.pc-gorsel .sr.s1{--dx:-88px;--dy:-66px;--rot:-160deg}
.pc-gorsel .sr.s2{--dx: 84px;--dy:-54px;--rot:190deg}
.pc-gorsel .sr.s3{--dx:-70px;--dy: 46px;--rot:-120deg}
.pc-gorsel .sr.s4{--dx: 76px;--dy: 58px;--rot:150deg}
.pc-gorsel .sr.s5{--dx:-22px;--dy:-98px;--rot:-90deg}
.pc-gorsel .sr.s6{--dx: 28px;--dy: 90px;--rot:110deg}
.pc.kirildi .pc-gorsel .sr{animation:pcParca .7s cubic-bezier(.2,.7,.35,1) forwards}

.pc-flas{
  position:absolute;z-index:3;left:50%;top:52%;transform:translate(-50%,-50%);
  width:220px;height:220px;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle, rgba(255,244,214,.85), rgba(255,196,90,.35) 42%, transparent 70%);
}
@keyframes pcFlas{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
.pc-flas.oyna{animation:pcFlas .55s ease-out}
.pc-halka{
  position:absolute;z-index:3;left:50%;top:52%;transform:translate(-50%,-50%) scale(.2);
  width:190px;height:190px;border-radius:50%;pointer-events:none;opacity:0;
  border:2px solid rgba(255,214,120,.9);
  box-shadow:0 0 26px rgba(232,160,60,.6), inset 0 0 20px rgba(255,214,120,.3);
}
@keyframes pcHalka{
  0%{opacity:.95;transform:translate(-50%,-50%) scale(.18)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}
}
.pc-halka.oyna{animation:pcHalka .8s cubic-bezier(.2,.7,.3,1)}

/* --- kasaya uçan GG --- */
.pc-ucan{
  position:absolute;z-index:7;left:50%;top:46%;
  display:inline-flex;align-items:center;gap:6px;pointer-events:none;opacity:0;
  padding:5px 11px 5px 6px;border-radius:999px;white-space:nowrap;
  background:rgba(10,7,5,.86);border:1px solid rgba(232,179,75,.55);
  box-shadow:0 6px 22px rgba(0,0,0,.6), 0 0 22px rgba(232,160,60,.3);
}
.pc-ucan img{width:24px;height:24px;filter:drop-shadow(0 0 8px rgba(255,214,120,.8))}
.pc-ucan b{font-size:14.5px;color:var(--gold);font-variant-numeric:tabular-nums}
@keyframes pcUc{
  0%{opacity:0;transform:translate(-50%,10px) scale(.6)}
  20%{opacity:1;transform:translate(-50%,-6px) scale(1.06)}
  55%{opacity:1;transform:translate(-50%,-90px) scale(1)}
  100%{opacity:0;transform:translate(-50%,-190px) scale(.72)}
}
.pc-ucan.oyna{animation:pcUc 1.25s cubic-bezier(.3,.7,.35,1)}

/* --- mağaza --- */
.pc-magaza{
  margin-top:2px;padding:13px;border-radius:13px;
  background:linear-gradient(168deg, rgba(46,32,16,.9), rgba(20,15,12,.85));
  border:1px solid rgba(232,179,75,.42);
  box-shadow:0 -6px 26px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,224,160,.1);
  transition:border-color .4s, box-shadow .4s, opacity .4s;
}
/* kasa dolana kadar kilitli durur */
.pc-magaza.kilit{opacity:.72;border-color:var(--line2);box-shadow:none}
.pc-magaza.kilit .pc-urun{opacity:.4;pointer-events:none}
.pc-magaza.kilit .pc-mg-ust small{
  color:var(--txt-faint);background:rgba(255,255,255,.05);border-color:var(--line2);
}
.pc-magaza:not(.kilit){animation:pcMagazaAcildi .9s cubic-bezier(.2,.9,.3,1)}
@keyframes pcMagazaAcildi{
  0%{box-shadow:0 0 0 rgba(232,160,60,0)}
  35%{box-shadow:0 0 34px rgba(232,160,60,.5), inset 0 0 26px rgba(232,160,60,.14)}
  100%{box-shadow:0 -6px 26px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,224,160,.1)}
}
.pc-mg-ust{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;
  font-family:'Fenomen Slab',Georgia,serif;font-size:14.5px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--gold2);
  padding-bottom:10px;margin-bottom:11px;border-bottom:1px solid var(--line2);
}
.pc-mg-ust small{
  font-family:inherit;font-size:10px;letter-spacing:1.2px;color:#8ee08a;
  padding:3px 8px;border-radius:999px;
  background:rgba(120,220,120,.1);border:1px solid rgba(120,220,120,.32);
}
.pc-mg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pc-urun{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:12px 9px;border-radius:11px;text-align:center;
  background:radial-gradient(110% 80% at 50% 0%, rgba(232,179,75,.1), transparent 65%), rgba(14,10,8,.7);
  border:1px solid var(--line2);
  transition:transform .2s, border-color .25s, box-shadow .3s;
}
.pc-urun:not(.kilitli){cursor:pointer}
.pc-urun:not(.kilitli):hover,.pc-urun:not(.kilitli):focus-visible{
  transform:translateY(-3px);border-color:rgba(232,179,75,.65);
  box-shadow:0 12px 26px rgba(0,0,0,.5), 0 0 22px rgba(232,160,60,.2);
}
.pc-urun.kilitli{opacity:.5}
.pc-u-ic{
  display:grid;place-items:center;width:46px;height:46px;border-radius:10px;
  background:radial-gradient(circle at 50% 32%, #33241a, #15100d);
  border:1px solid var(--line2);
}
.pc-u-ic img{width:30px;height:30px;image-rendering:pixelated;filter:drop-shadow(0 2px 4px rgba(0,0,0,.8))}
.pc-u-ic svg{width:28px;height:28px}
.pc-u-ad{font-size:12.5px;color:var(--txt)}
.pc-u-fi{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11.5px;font-weight:800;color:var(--gold);white-space:nowrap;
}
.pc-u-fi img{width:16px;height:16px}
.pc-urun.kilitli .pc-u-fi{color:var(--txt-faint);font-weight:700;letter-spacing:.6px}
.pc-mg-not{margin-top:11px;text-align:center;font-size:11.5px;color:var(--txt-faint)}
.pc-mg-not b{color:var(--gold2)}
.pc-mg-not.basarili{color:#8ee08a}
.pc-mg-not.basarili b{color:#b9f0b4}
@keyframes pcSatinAl{
  0%{opacity:1;transform:scale(1)}
  40%{opacity:1;transform:scale(1.1)}
  100%{opacity:0;transform:scale(.7) translateY(-26px)}
}
.pc-urun.alindi .pc-u-ic img{animation:pcSatinAl .8s ease-out both}

.pc-uyari{
  margin-top:11px;text-align:center;font-size:10.5px;letter-spacing:.4px;
  color:var(--txt-faint);opacity:.75;
}

@media (prefers-reduced-motion: no-preference){
  .pc-gorsel::before{animation:pcHale 3.6s ease-in-out infinite}
  .pc-gorsel .kv.k1{animation:pcKivilcim 2.3s ease-in-out infinite}
  .pc-gorsel .kv.k2{animation:pcKivilcim 2.7s ease-in-out .6s infinite}
  .pc-gorsel .kv.k3{animation:pcKivilcim 2.5s ease-in-out 1.2s infinite}
}
@media (max-width:520px){
  .pc-sahne{min-height:278px}
  .pc-gorsel img{height:clamp(168px,46vw,215px)}
  .pc-ipucu{font-size:11px;white-space:normal;width:94%}
  .pc-kasa-tx strong{font-size:21px}
}

/* ============================ GİYDİRME OYUNU ============================ */
.giy{
  display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:16px;align-items:stretch;
}
/* --- sol: envanter --- */
.giy-env{
  display:flex;flex-direction:column;gap:8px;
  padding:16px;border-radius:var(--radius);
  background:linear-gradient(168deg,#1e1613,#141010);
  border:1px solid var(--line);
}
.giy-env-bas{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding-bottom:10px;margin-bottom:2px;border-bottom:1px solid var(--line);
}
.giy-env-bas span{font-size:11.5px;letter-spacing:2.2px;text-transform:uppercase;color:var(--txt-dim);font-weight:700}
.giy-env-bas b{font-family:'Fenomen Slab',Georgia,serif;font-size:16px;color:var(--gold)}
.giy-esya{
  position:relative;display:flex;align-items:center;gap:11px;width:100%;
  padding:10px 12px;border-radius:11px;text-align:left;
  background:linear-gradient(170deg,#241a14,#181110);
  border:1px solid var(--line);
  transition:border-color .22s, transform .18s, box-shadow .25s, opacity .3s;
}
.giy-esya .ic{
  position:relative;flex:0 0 44px;width:44px;min-height:44px;padding:4px;
  display:grid;place-items:center;border-radius:9px;
  background:radial-gradient(circle at 50% 36%, #2e2219, #14100d);
  border:1px solid var(--line2);
}
.giy-esya .ic img{
  width:auto;height:auto;max-width:30px;max-height:52px;
  image-rendering:pixelated;filter:drop-shadow(0 2px 3px rgba(0,0,0,.85));
}
.giy-esya .tx{display:flex;flex-direction:column;min-width:0}
.giy-esya .tx b{font-size:13.5px;color:var(--gold2);line-height:1.25}
.giy-esya .tx small{font-size:11px;color:var(--txt-faint)}
.giy-esya .dr{flex:0 0 auto;margin-left:auto;width:20px;text-align:center;font-size:13px;color:var(--txt-faint)}
/* sıradaki eşya: davetkâr */
.giy-esya.sira{
  border-color:rgba(232,179,75,.55);
  box-shadow:0 0 0 1px rgba(232,179,75,.14), 0 8px 24px rgba(0,0,0,.45);
  cursor:pointer;
}
.giy-esya.sira .dr::before{content:'⟶';color:var(--gold)}
@keyframes giyNabiz{
  0%,100%{box-shadow:0 0 0 1px rgba(232,179,75,.14), 0 8px 24px rgba(0,0,0,.45)}
  50%{box-shadow:0 0 0 1px rgba(232,179,75,.34), 0 8px 30px rgba(0,0,0,.5), 0 0 22px rgba(232,140,40,.3)}
}
.giy-esya.sira:hover{transform:translateY(-2px);border-color:var(--gold)}
/* kilitli eşya */
.giy-esya.kilit{opacity:.42;cursor:not-allowed}
.giy-esya.kilit .dr::before{content:'\1F512';font-size:11px;filter:grayscale(1)}
@keyframes giySars{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}40%{transform:translateX(5px)}
  60%{transform:translateX(-3px)}80%{transform:translateX(2px)}
}
.giy-esya.sars{animation:giySars .42s ease;border-color:rgba(224,112,78,.7)}
/* giyilmiş eşya */
.giy-esya.giyildi{
  opacity:1;border-color:rgba(143,206,106,.42);
  background:linear-gradient(170deg,#1d2418,#141a12);
}
.giy-esya.giyildi .dr::before{content:'✓';color:var(--green);font-weight:800}
.giy-esya.giyildi .ic{border-color:rgba(143,206,106,.45)}
.giy-ayrac{
  display:flex;align-items:center;gap:10px;margin:8px 0 2px;
  font-size:10.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--txt-faint);
}
.giy-ayrac::before,.giy-ayrac::after{content:'';flex:1;height:1px;background:var(--line)}
.giy-esya.bonus{opacity:.5;cursor:default}
.giy-esya.bonus .dr::before{content:'•';color:var(--txt-faint)}
.giy-reset{
  margin-top:auto;padding:9px 12px;border-radius:9px;
  font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;color:var(--gold2);
  border:1px solid rgba(232,179,75,.42);background:rgba(24,16,11,.8);
  transition:border-color .2s, box-shadow .2s;
}
.giy-reset:hover{border-color:var(--gold);box-shadow:0 0 16px rgba(232,179,75,.3)}

/* --- sağ: sahne --- */
.giy-sahne{
  position:relative;overflow:hidden;min-height:520px;
  border:1px solid var(--line2);border-radius:var(--radius);
  background:#0c0908;box-shadow:0 24px 65px rgba(0,0,0,.62);
}
.giy-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.72) brightness(.52) contrast(1.05);
}
.giy-sahne::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(62% 52% at 50% 74%, rgba(232,140,50,.20), transparent 64%),
    linear-gradient(180deg, rgba(9,6,5,.5), transparent 34%, rgba(9,6,5,.3) 68%, rgba(9,6,5,.9)),
    radial-gradient(128% 100% at 50% 50%, transparent 45%, rgba(6,4,3,.7));
}
/* karakterin ayağının altındaki ışık */
.giy-zemin{
  position:absolute;z-index:2;left:50%;bottom:5%;transform:translateX(-50%);
  width:min(360px,58%);height:52px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, rgba(232,150,60,.34), transparent 68%);
  filter:blur(11px);
}
.giy-kat{position:absolute;z-index:3;inset:0}
.giy-kat .kk{
  /* mutlak konum: yüzde yükseklik sahnenin yüksekliğine göre güvenilir çözülsün */
  position:absolute;left:50%;bottom:4%;
  height:90%;width:auto;max-width:none;
  opacity:0;transform:translateX(-50%) scale(.985);
  transform-origin:50% 100%;
  transition:opacity .55s ease, transform .55s ease;
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.7));
  pointer-events:none;user-select:none;
}
.giy-kat .kk.on{opacity:1;transform:translateX(-50%) scale(1)}
/* giydirme anında altın flaş */
.giy-flas{
  position:absolute;z-index:4;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(52% 48% at 50% 62%, rgba(255,231,170,.55), rgba(255,190,90,.18) 45%, transparent 70%);
}
@keyframes giyFlas{0%{opacity:0}22%{opacity:1}100%{opacity:0}}
.giy-flas.oyna{animation:giyFlas .75s ease-out}
/* yayılan altın halka */
.giy-halka{
  position:absolute;z-index:4;left:50%;bottom:7%;transform:translate(-50%,0) scale(.2);
  width:min(340px,54%);aspect-ratio:1/.34;border-radius:50%;
  border:2px solid rgba(255,214,120,.85);pointer-events:none;opacity:0;
  box-shadow:0 0 26px rgba(232,160,60,.6), inset 0 0 20px rgba(255,214,120,.35);
}
@keyframes giyHalka{
  0%{opacity:.95;transform:translate(-50%,0) scale(.18)}
  100%{opacity:0;transform:translate(-50%,-14px) scale(1.5)}
}
.giy-halka.oyna{animation:giyHalka .85s cubic-bezier(.2,.7,.3,1)}
.giy-ipucu{
  position:absolute;z-index:5;bottom:16px;left:50%;transform:translateX(-50%);
  font-size:12.5px;color:var(--txt-dim);text-align:center;white-space:nowrap;
  padding:8px 18px;border-radius:999px;
  background:rgba(10,7,5,.74);border:1px solid var(--line);backdrop-filter:blur(6px);
  transition:opacity .4s;
}
.giy-ipucu b{color:var(--gold2)}
.giy-ipucu.gizle{opacity:0}
/* final */
.giy-son{
  position:absolute;z-index:6;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:14px;
  padding:24px 24px 30px;text-align:center;
  /* atlı karakter görünür kalsın: yalnızca alt bant koyulaşır */
  background:linear-gradient(180deg, transparent 34%, rgba(9,6,5,.72) 62%, rgba(6,4,3,.94));
  animation:giySonIn .55s ease both;
}
@keyframes giySonIn{from{opacity:0}to{opacity:1}}
.giy-son .si{
  font-size:42px;filter:drop-shadow(0 0 28px rgba(232,179,75,.75));
  animation:giySonPop .65s cubic-bezier(.2,1.5,.4,1) both;
}
@keyframes giySonPop{from{transform:scale(.35) rotate(-20deg)}to{transform:none}}
.giy-son b{
  font-family:'Fenomen Slab',Georgia,serif;
  font-size:clamp(19px,2.4vw,31px);line-height:1.35;color:var(--gold2);letter-spacing:1.4px;
  text-shadow:0 2px 18px rgba(0,0,0,.92), 0 0 46px rgba(232,179,75,.42);
}
.giy-son .btn{padding:12px 26px;font-size:13px}

@media (prefers-reduced-motion: no-preference){
  .giy-esya.sira{animation:giyNabiz 2.4s ease-in-out infinite}
}
@media (max-width:900px){
  .giy{grid-template-columns:minmax(0,1fr)}
  .giy-env{order:2}
  .giy-sahne{order:1;min-height:0;aspect-ratio:4/5}
  .giy-kat .kk{height:84%}
  .giy-ipucu{font-size:11px;white-space:normal;width:88%;padding:7px 14px}
}
/* ---- bölüm görseli çerçevesi (media-slot yerine) ---- */
.shot{
  position:relative;margin:0;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line2);
  box-shadow:0 20px 55px rgba(0,0,0,.6);
  background:#120d0b;
}
.shot img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:16/11;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.shot:hover img{transform:scale(1.045)}
.shot::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg, transparent 55%, rgba(11,8,7,.5)),
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(6,4,3,.45));
}
.shot::before{
  content:'';position:absolute;z-index:2;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(232,179,75,.6),transparent);
}

ul.tick{list-style:none}
ul.tick li{
  padding:9px 0 9px 30px;position:relative;font-size:15px;color:var(--txt);
  border-bottom:1px dashed rgba(58,44,34,.5);
}
ul.tick li:last-child{border-bottom:none}
ul.tick li::before{
  content:'✦';position:absolute;left:4px;top:9px;color:var(--gold);font-size:13px;
}
ul.tick li b{color:var(--gold2)}
.chipgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:9px;margin-top:22px}
.chip{
  font-size:13px;color:var(--txt);padding:10px 14px;border-radius:9px;
  background:linear-gradient(170deg,#241a14,#181110);
  border:1px solid var(--line);
  display:flex;align-items:center;gap:9px;
  transition:border-color .2s, transform .15s;
}
.chip:hover{border-color:var(--gold-dim);transform:translateY(-2px)}
.chip::before{content:'⟡';color:var(--gold-dim);font-size:12px}
.note{
  display:flex;gap:12px;align-items:flex-start;
  background:linear-gradient(90deg, rgba(224,112,78,.1), rgba(224,112,78,.02));
  border:1px solid rgba(224,112,78,.35);border-radius:var(--radius);
  padding:14px 17px;margin-top:20px;font-size:14px;color:var(--txt-dim);
}
.note.gold{background:linear-gradient(90deg, rgba(232,179,75,.09), rgba(232,179,75,.02));border-color:rgba(232,179,75,.3)}
.note .i{
  flex:0 0 23px;height:23px;border-radius:50%;background:var(--ember);color:#2b0f08;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;
}
.note.gold .i{background:var(--gold);color:#241708}
.note b{color:var(--gold2)}
.slogan{
  text-align:center;font-family:'Fenomen Slab',Georgia,serif;
  font-size:clamp(19px,2.6vw,28px);color:var(--gold2);letter-spacing:2px;
  padding:26px 20px;margin-top:30px;
  background:
    radial-gradient(400px 90px at 50% 50%, rgba(232,179,75,.1), transparent 75%);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  text-transform:uppercase;
}
.wiki-btn{
  display:inline-flex;align-items:center;gap:10px;margin-top:22px;
  padding:13px 30px;border-radius:11px;
  background:linear-gradient(180deg,#a8332a,#6d1d16);
  border:1px solid #c8513f;color:#ffd9c9;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;font-size:13.5px;
  box-shadow:0 6px 24px rgba(168,51,42,.35), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .15s, box-shadow .25s;
}
.wiki-btn:hover{transform:translateY(-2px);box-shadow:0 10px 34px rgba(168,51,42,.5), inset 0 1px 0 rgba(255,255,255,.18)}

/* ============================ SINIFLAR (VİDEOLU) ============================ */
.classes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.class-card{
  position:relative;border-radius:16px;overflow:hidden;
  border:1px solid var(--line2);aspect-ratio:3/4;
  display:flex;align-items:flex-end;background:#0e0a09;
  transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .35s, border-color .3s;
}
.class-card .cvid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 42%;
  transform:scale(1.02);transition:transform .6s cubic-bezier(.2,.7,.3,1), filter .35s;
  filter:saturate(.92) contrast(1.04) brightness(.94);
}
.class-card:hover{
  transform:translateY(-7px);border-color:rgba(232,179,75,.55);
  box-shadow:0 24px 60px rgba(0,0,0,.68), 0 0 34px rgba(232,179,75,.16);
}
.class-card:hover .cvid{transform:scale(1.07);filter:saturate(1.1) contrast(1.06) brightness(1.02)}
/* okunabilirlik perdesi */
.class-card::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg, rgba(9,6,5,.95) 4%, rgba(9,6,5,.55) 30%, transparent 62%);
  transition:background .35s;
}
.class-card:hover::before{background:linear-gradient(0deg, rgba(9,6,5,.92) 2%, rgba(9,6,5,.35) 32%, transparent 68%)}
/* üst köz çizgisi */
.class-card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(232,179,75,.65),transparent);
  opacity:.5;transition:opacity .3s;
}
.class-card:hover::after{opacity:1}
.class-card .ci{
  position:relative;z-index:2;width:100%;
  padding:20px 18px;display:flex;flex-direction:column;align-items:center;
}
.class-card h3{
  font-size:clamp(19px,2vw,26px);color:var(--gold2);letter-spacing:3px;
  text-shadow:0 2px 16px rgba(0,0,0,.95), 0 0 30px rgba(232,179,75,.28);
  transition:color .3s, text-shadow .3s;
}
.class-card:hover h3{color:#fff3d6;text-shadow:0 2px 16px rgba(0,0,0,.95), 0 0 38px rgba(232,179,75,.55)}
/* isim altı altın vurgu çizgisi */
.class-card h3::after{
  content:'';display:block;height:2px;width:26px;margin:9px auto 0;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform:scaleX(.6);opacity:.6;transition:transform .3s, opacity .3s;
}
.class-card:hover h3::after{transform:scaleX(1.9);opacity:1}
@media (max-width:1024px){ .classes{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ============================ YAYINCILAR ============================ */
.partners{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:13px}
.partner{
  background:linear-gradient(170deg,#1f1712,#151010);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 14px 14px;text-align:center;
  transition:transform .2s, border-color .25s;
}
.partner:hover{transform:translateY(-4px);border-color:var(--gold-dim)}
.partner .ava{
  position:relative;overflow:hidden;
  width:68px;height:68px;margin:0 auto 10px;border-radius:50%;
  background:radial-gradient(circle at 50% 38%, #34251b, #171110);
  border:2px solid var(--line2);
  display:flex;align-items:center;justify-content:center;
  font-family:'Fenomen Slab',Georgia,serif;font-size:25px;color:var(--gold);
  box-shadow:0 6px 18px rgba(0,0,0,.5), inset 0 0 12px rgba(0,0,0,.4);
  transition:border-color .25s, box-shadow .3s;
}
.partner .ava img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.partner .ava.bos{
  color:var(--gold-dim);
  background:radial-gradient(circle at 50% 38%, #2a1f17, #14100d);
}
.partner:hover .ava{
  border-color:rgba(232,179,75,.6);
  box-shadow:0 8px 22px rgba(0,0,0,.55), 0 0 18px rgba(232,160,60,.28), inset 0 0 12px rgba(0,0,0,.4);
}
.partner .pn{font-size:14.5px;font-weight:700;color:var(--txt)}
.partner .plats{display:flex;gap:4px;justify-content:center;margin-top:8px;flex-wrap:wrap}
.plat{
  display:inline-flex;align-items:center;gap:3px;
  font-size:9.5px;letter-spacing:.4px;text-transform:uppercase;font-weight:800;
  padding:3px 6px;border-radius:5px;white-space:nowrap;
}
.plat svg{width:10px;height:10px;flex:0 0 10px;fill:currentColor}
.plat.kick{background:rgba(83,252,24,.12);color:#7ef05a;border:1px solid rgba(83,252,24,.3)}
.plat.yt{background:rgba(255,58,58,.12);color:#ff7a6e;border:1px solid rgba(255,58,58,.3)}
.plat.tw{background:rgba(158,101,255,.14);color:#c39dff;border:1px solid rgba(158,101,255,.32)}

/* ============================ EFSUN ÖRNEK KARTLARI ============================ */
.itemcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:26px}
.icard{
  background:linear-gradient(168deg,#211812,#151010);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
.icard .ih{
  display:flex;align-items:center;gap:12px;padding:13px 16px;
  border-bottom:1px solid rgba(58,44,34,.6);
  background:linear-gradient(180deg, rgba(232,179,75,.06), transparent);
}
.icard .ih img{width:40px;height:40px;image-rendering:pixelated;filter:drop-shadow(0 2px 4px rgba(0,0,0,.8))}
.icard .ih .t{font-size:15px;color:var(--gold2);font-weight:700;line-height:1.3}
.icard .ih .m{font-size:11.5px;color:var(--txt-faint)}
.icard .ib{padding:10px 16px 14px}
.icard .ln{
  font-size:13px;color:var(--txt);padding:4.5px 0;
  border-bottom:1px dashed rgba(58,44,34,.4);
  display:flex;justify-content:space-between;gap:10px;
}
.icard .ln:last-child{border-bottom:none}
.icard .ln .pr{color:var(--txt-faint);font-size:12px;white-space:nowrap}
.icard .ln.fx{color:#6db3e8;font-size:12.5px}

/* ============================ TABLOLAR ============================ */
.tbl{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:22px}
.tbl .twrap{overflow-x:auto}
.tbl table{width:100%;border-collapse:collapse;font-size:14px;background:#141010}
.tbl th{
  text-align:left;padding:11px 16px;font-size:11.5px;letter-spacing:2px;text-transform:uppercase;
  color:var(--gold);background:#1d1512;border-bottom:1px solid var(--line2);white-space:nowrap;
}
.tbl td{padding:9px 16px;border-bottom:1px solid rgba(58,44,34,.4);color:var(--txt)}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:rgba(232,179,75,.045)}

/* ============================ METIN2 MOBILE (BETA) ============================ */
.sec-head .no .beta{
  margin-left:8px;padding:2px 8px;border-radius:999px;
  font-size:9.5px;letter-spacing:1.6px;font-weight:800;
  color:#9fd6a8;background:rgba(143,206,106,.12);
  border:1px solid rgba(143,206,106,.4);
  text-transform:uppercase;
}
.mb-metin{
  display:flex;flex-direction:column;gap:12px;
  font-size:14.5px;line-height:1.68;color:var(--txt-dim);max-width:640px;
}
.mb-metin b{color:var(--txt)}
.mb-metin i{color:var(--gold2);font-style:italic}
/* sağdaki görsel: yumuşak yukarı-aşağı süzülme */
.mb-art{
  position:relative;display:grid;place-items:center;
  min-height:clamp(300px,32vw,440px);
}
.mb-art img{
  position:relative;z-index:2;
  width:100%;max-width:min(430px,44vw);height:auto;
  filter:drop-shadow(0 26px 46px rgba(0,0,0,.74)) drop-shadow(0 0 48px rgba(232,120,40,.16));
  will-change:transform;
}
@keyframes mbSuzul{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-16px)}
}
.mb-hale{
  position:absolute;z-index:1;left:50%;top:52%;transform:translate(-50%,-50%);
  width:min(88%,470px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle at 50% 46%, rgba(232,140,50,.24), transparent 58%),
    radial-gradient(circle at 46% 64%, rgba(200,70,30,.14), transparent 62%);
  filter:blur(26px);
}
@keyframes mbHale{0%,100%{opacity:.74;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
@media (prefers-reduced-motion: no-preference){
  .mb-art img{animation:mbSuzul 6s ease-in-out infinite}
  .mb-hale{animation:mbHale 6s ease-in-out infinite}
}
@media (max-width:900px){
  .mb-art{min-height:0}
  .mb-art img{max-width:min(320px,72vw)}
  .mb-metin{font-size:13.5px}
}

/* ============================ LONCA TOPLANTI AKIŞI ============================ */
/* iki kolon: solda metin (satır 1) + 3. adım (satır 2), sağda 1-2. adım */
.lcx{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:10px 30px;align-items:start;
}
.lcx-metin{grid-column:1;grid-row:1}
.lcx-sag{
  grid-column:2;grid-row:1 / span 2;
  display:flex;flex-direction:column;align-items:center;gap:2px;
}
.lcx-sol{
  grid-column:1;grid-row:2;
  display:flex;align-items:center;gap:6px;
}
.lcx-sol .lc-adim{flex:1 1 auto;min-width:0}
.lcx-sag .lc-adim,.lcx-sag .lc-ok{width:100%;max-width:360px}

.lc-adim{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  opacity:0;transform:translateY(16px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.3,1);
}
.lc-adim.gor{opacity:1;transform:none}
.lc-etiket{
  font-size:10px;letter-spacing:2.2px;text-transform:uppercase;font-weight:800;
  color:var(--gold2);padding:5px 13px;border-radius:999px;white-space:nowrap;
  background:linear-gradient(180deg, rgba(232,179,75,.18), rgba(232,179,75,.05));
  border:1px solid rgba(232,179,75,.45);
  box-shadow:0 0 16px rgba(232,160,60,.2);
}
/* panel çerçevesi */
.lc-cerceve{
  position:relative;width:100%;padding:7px;border-radius:12px;
  background:linear-gradient(158deg, #38291b 0%, #241a13 32%, #171110 100%);
  box-shadow:
    0 18px 40px rgba(0,0,0,.62),
    0 0 0 1px rgba(232,179,75,.24),
    inset 0 1px 0 rgba(255,236,196,.12);
}
.lc-cerceve img{
  display:block;width:100%;height:auto;border-radius:8px;
  box-shadow:0 0 0 1px rgba(240,203,124,.4), inset 0 0 20px rgba(0,0,0,.5);
}
.lc-not{
  font-size:11.5px;color:var(--txt-dim);text-align:center;max-width:100%;line-height:1.45;
}
.lc-not b{color:var(--gold2)}
/* oklar */
.lc-ok{
  display:grid;place-items:center;height:30px;
  opacity:0;transform:translateY(-8px);
  transition:opacity .4s ease, transform .4s ease;
}
.lc-ok.gor{opacity:1;transform:none}
.lc-ok svg{width:54px;height:24px;overflow:visible}
.lc-ok svg path{
  fill:none;stroke:rgba(240,203,124,.92);
  stroke-width:7;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 8px rgba(232,160,60,.6));
}
/* sola bakan ok (2. adımdan 3. adıma) */
.lc-ok.sola{
  flex:0 0 46px;height:auto;transform:translateX(8px);
}
.lc-ok.sola.gor{transform:none}
.lc-ok.sola svg{width:40px;height:54px;transform:rotate(90deg)}
@keyframes lcOkPuls{0%,100%{transform:translateY(0);opacity:.85}50%{transform:translateY(5px);opacity:1}}
@keyframes lcOkPulsSol{0%,100%{transform:rotate(90deg) translateY(0);opacity:.85}50%{transform:rotate(90deg) translateY(5px);opacity:1}}
@media (prefers-reduced-motion: no-preference){
  .lcx-sag .lc-ok.gor svg{animation:lcOkPuls 1.5s ease-in-out infinite}
  .lc-ok.sola.gor svg{animation:lcOkPulsSol 1.5s ease-in-out infinite}
}
@media (max-width:900px){
  .lcx{grid-template-columns:minmax(0,1fr);gap:16px}
  .lcx-metin,.lcx-sag,.lcx-sol{grid-column:1;grid-row:auto}
  .lcx-sag{max-width:420px;margin:0 auto}
  .lcx-sol{flex-direction:column;max-width:420px;margin:0 auto;gap:2px}
  .lcx-sol .lc-ok.sola{order:-1;flex:none;transform:translateY(-8px)}
  .lcx-sol .lc-ok.sola.gor{transform:none}
  .lcx-sol .lc-ok.sola svg{width:54px;height:24px;transform:none}
  @keyframes lcOkPulsSol{0%,100%{transform:translateY(0);opacity:.85}50%{transform:translateY(5px);opacity:1}}
}
@media (max-width:520px){
  .lc-not{font-size:11px}
  .lc-cerceve{padding:6px;border-radius:10px}
}

/* ============================ SEVİYE GÖREVİ PANELİ ============================ */
.gv{
  position:relative;overflow:hidden;
  padding:18px 18px 20px;border-radius:var(--radius);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(232,140,50,.08), transparent 60%),
    linear-gradient(168deg,#1f1713,#141010);
  border:1px solid var(--line);
  box-shadow:0 18px 46px rgba(0,0,0,.55);
}
.gv-baslik{
  text-align:center;font-family:'Fenomen Slab',Georgia,serif;
  font-size:14px;letter-spacing:2.6px;text-transform:uppercase;color:var(--gold);
  padding-bottom:12px;border-bottom:1px solid var(--line);
  text-shadow:0 0 20px rgba(232,179,75,.3);
}
/* canavar görseli */
.gv-gorsel{
  position:relative;display:flex;align-items:center;justify-content:center;
  height:132px;margin:6px 0 12px;
}
.gv-gorsel img{
  position:relative;z-index:1;
  width:auto;height:auto;max-width:88%;max-height:132px;object-fit:contain;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.8));
}
.gv-isik{
  position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);
  width:210px;height:96px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, rgba(232,150,60,.26), transparent 66%);
  filter:blur(14px);
}
@keyframes gvIsik{0%,100%{opacity:.7}50%{opacity:1}}
/* görev satırları */
.gv-satir{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:13px;color:var(--txt-dim);padding:5px 0;
  border-bottom:1px dashed rgba(58,44,34,.5);
}
.gv-satir b{color:var(--gold2);font-size:13.5px}
/* ilerleme barı */
.gv-bar{
  position:relative;height:26px;margin:14px 0 4px;border-radius:999px;overflow:hidden;
  background:linear-gradient(180deg,#120d0b,#1c1410);
  border:1px solid var(--line2);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.7);
}
.gv-bar-ic{
  position:absolute;inset:0 auto 0 0;width:0%;
  background:linear-gradient(180deg,#f2c765,#d29a34 52%,#a9741f);
  box-shadow:0 0 16px rgba(232,179,75,.5), inset 0 1px 0 rgba(255,255,255,.35);
  transition:width .32s cubic-bezier(.3,.7,.4,1);
}
/* bar üzerinde akan parlaklık */
.gv-bar-ic::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.28) 45%, transparent 70%);
  opacity:.7;
}
.gv-bar-yazi{
  position:absolute;z-index:2;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;letter-spacing:1.4px;color:#fff6e2;
  text-shadow:0 1px 3px rgba(0,0,0,.9);
}
/* ödül listesi */
.gv-oduller{display:flex;flex-direction:column;gap:7px;margin-top:14px}
.gv-odul{
  display:flex;align-items:center;gap:10px;
  padding:8px 11px;border-radius:10px;
  background:linear-gradient(170deg,#241a14,#181110);
  border:1px solid var(--line);
}
.gv-odul .ic{
  flex:0 0 32px;width:32px;height:32px;padding:3px;border-radius:8px;
  display:grid;place-items:center;
  background:radial-gradient(circle at 50% 36%, #2e2219, #14100d);
  border:1px solid var(--line2);
}
.gv-odul .ic img{
  width:auto;height:auto;max-width:24px;max-height:28px;
  image-rendering:pixelated;filter:drop-shadow(0 1px 3px rgba(0,0,0,.8));
}
.gv-odul .tx{font-size:12.5px;color:var(--txt-dim)}
.gv-odul .tx b{color:var(--gold2)}
/* tamamlandı ekranı */
.gv-tamam{
  position:absolute;z-index:5;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:22px;text-align:center;
  background:radial-gradient(70% 66% at 50% 46%, rgba(28,19,12,.93), rgba(9,6,5,.96));
  backdrop-filter:blur(3px);
  animation:gvTamamIn .4s ease both;
}
@keyframes gvTamamIn{from{opacity:0}to{opacity:1}}
.gv-tik{
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;font-size:28px;font-weight:900;color:#0f1a0c;
  background:linear-gradient(180deg,#b8e88c,#78c455);
  box-shadow:0 0 0 5px rgba(143,206,106,.16), 0 8px 22px rgba(0,0,0,.6), 0 0 30px rgba(143,206,106,.4);
  animation:gvTikPop .55s cubic-bezier(.2,1.5,.4,1) both;
}
@keyframes gvTikPop{from{transform:scale(.3) rotate(-25deg)}to{transform:none}}
.gv-tamam>b{
  font-family:'Fenomen Slab',Georgia,serif;
  font-size:clamp(16px,1.9vw,21px);color:var(--gold2);letter-spacing:1.2px;
  text-shadow:0 2px 14px rgba(0,0,0,.9), 0 0 34px rgba(232,179,75,.35);
}
.gv-kazanim{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.gv-kazanim .kz{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:11px 12px;border-radius:11px;min-width:88px;
  background:linear-gradient(170deg,#2a1f16,#181110);
  border:1px solid rgba(232,179,75,.42);
  box-shadow:0 6px 18px rgba(0,0,0,.55), 0 0 16px rgba(232,160,60,.18);
  animation:gvKzIn .5s cubic-bezier(.2,1.4,.4,1) both;
}
.gv-kazanim .kz.k1{animation-delay:.12s}
.gv-kazanim .kz.k2{animation-delay:.26s}
.gv-kazanim .kz.k3{animation-delay:.4s}
@keyframes gvKzIn{from{opacity:0;transform:translateY(14px) scale(.8)}to{opacity:1;transform:none}}
.gv-kazanim .kz img{
  width:auto;height:auto;max-width:30px;max-height:34px;
  image-rendering:pixelated;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.8)) drop-shadow(0 0 12px rgba(255,214,120,.6));
}
.gv-kazanim .kz small{font-size:10.5px;letter-spacing:.5px;color:var(--gold2);text-align:center;line-height:1.25}

@media (prefers-reduced-motion: no-preference){
  .gv-isik{animation:gvIsik 4s ease-in-out infinite}
}
@media (max-width:520px){
  .gv-gorsel{height:104px}
  .gv-gorsel img{max-height:104px}
  .gv-satir{font-size:12px}
  .gv-kazanim .kz{min-width:76px;padding:9px 10px}
}

/* ============================ ROYAL PASS ============================ */
/* klavye tuşu rozeti */
.tus{
  display:inline-block;font-family:'Segoe UI',system-ui,sans-serif;
  font-size:11.5px;font-weight:800;letter-spacing:.6px;line-height:1;
  color:var(--gold2);padding:4px 8px;margin:0 1px;border-radius:6px;
  background:linear-gradient(180deg,#33261a,#1b1310);
  border:1px solid rgba(232,179,75,.5);
  box-shadow:0 2px 0 rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12);
}
.tus.buyuk{
  font-family:'Fenomen Slab',Georgia,serif;
  font-size:34px;letter-spacing:2px;padding:14px 26px;border-radius:12px;
  box-shadow:0 4px 0 rgba(0,0,0,.65), 0 10px 26px rgba(0,0,0,.5),
             inset 0 1px 0 rgba(255,255,255,.14), 0 0 26px rgba(232,140,40,.22);
}

/* sağdaki kısayol özeti */
.rp-ozet{
  padding:20px 18px;border-radius:var(--radius);text-align:center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(232,140,50,.09), transparent 62%),
    linear-gradient(168deg,#1e1613,#141010);
  border:1px solid var(--line);
}
.rp-ozet-bas{
  font-size:11px;letter-spacing:2.6px;text-transform:uppercase;color:var(--txt-dim);font-weight:700;
}
.rp-tus{margin:16px 0 14px}
.rp-ozet-not{font-size:12.5px;color:var(--txt-dim);line-height:1.55;max-width:280px;margin:0 auto}
.rp-ozet-not b{color:var(--gold2)}
.rp-ozet-alt{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
}
.rp-bonus{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:700;color:var(--gold2);
  padding:5px 12px;border-radius:999px;
  background:rgba(232,179,75,.09);border:1px solid rgba(232,179,75,.35);
}
.rp-bonus b{color:var(--green);font-size:13px}

/* metin görevleri ızgarası */
.rp-wrap{margin-top:24px}
.rp-wrap>h4{
  color:var(--gold2);font-size:15px;margin-bottom:13px;
  display:flex;align-items:center;gap:12px;
}
.rp-wrap>h4::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent)}
.rp-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.rp-kart{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:14px 10px 12px;border-radius:12px;
  background:linear-gradient(170deg,#241a14,#181110);
  border:1px solid var(--line);
  transition:border-color .22s, transform .18s, box-shadow .28s;
}
.rp-kart:hover{
  transform:translateY(-4px);border-color:rgba(232,179,75,.5);
  box-shadow:0 12px 30px rgba(0,0,0,.55), 0 0 20px rgba(232,140,40,.14);
}
.rp-gorsel{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;height:96px;
}
/* taşın arkasındaki karanlık ışıma */
.rp-gorsel::before{
  content:'';position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);
  width:76px;height:76px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(190,80,232,.28), rgba(120,40,180,.12) 46%, transparent 70%);
  filter:blur(11px);
}
.rp-gorsel img{
  position:relative;z-index:1;
  width:auto;height:auto;max-width:100%;max-height:96px;object-fit:contain;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.8));
  transition:transform .3s;
}
.rp-kart:hover .rp-gorsel img{transform:translateY(-3px) scale(1.05)}
.rp-kart b{
  font-size:12px;color:var(--gold2);text-align:center;line-height:1.3;
  letter-spacing:.3px;
}
@media (prefers-reduced-motion: no-preference){
  @keyframes rpIsima{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}}
  .rp-gorsel::before{animation:rpIsima 4.2s ease-in-out infinite}
  .rp-kart:nth-child(2n) .rp-gorsel::before{animation-delay:.9s}
  .rp-kart:nth-child(3n) .rp-gorsel::before{animation-delay:1.8s}
}
@media (max-width:900px){
  .rp-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:640px){
  .rp-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
  .rp-gorsel{height:76px}
  .rp-gorsel img{max-height:76px}
  .rp-kart b{font-size:11px}
  .tus.buyuk{font-size:28px;padding:12px 22px}
}

/* ============================ OTOMATİK AV VİDEOSU — ÇERÇEVE ============================ */
.oav{
  position:relative;padding:12px;border-radius:18px;
  background:linear-gradient(158deg, #3f2f1f 0%, #271c14 30%, #191210 66%, #120d0b 100%);
  box-shadow:
    0 32px 74px rgba(0,0,0,.72),
    0 0 40px rgba(232,140,40,.1),
    0 0 0 1px rgba(232,179,75,.26),
    inset 0 1px 0 rgba(255,236,196,.14),
    inset 0 -1px 0 rgba(0,0,0,.66);
}
/* bizel üzerinde yumuşak ışık geçişi */
.oav::before{
  content:'';position:absolute;z-index:1;inset:0;border-radius:18px;pointer-events:none;
  background:linear-gradient(158deg, rgba(255,236,196,.12), transparent 30%, transparent 74%, rgba(0,0,0,.3));
}
/* iç pencere: TEK altın hairline, çakışan halka yok */
.oav-ic{
  position:relative;z-index:2;overflow:hidden;border-radius:10px;background:#0b0908;
  box-shadow:
    0 0 0 1px rgba(240,203,124,.55),
    0 6px 20px rgba(0,0,0,.55),
    inset 0 0 30px rgba(0,0,0,.6);
}
.oav-vid{
  display:block;width:100%;height:auto;
  filter:saturate(1.02) contrast(1.03);
}
/* görüntü kenarlarını yumuşatan vinyet */
.oav-ic::after{
  content:'';position:absolute;z-index:2;inset:0;pointer-events:none;
  background:radial-gradient(126% 104% at 50% 50%, transparent 60%, rgba(6,4,3,.5));
}
@media (max-width:520px){
  .oav{padding:9px;border-radius:14px}
  .oav::before{border-radius:14px}
}

/* ============================ SCROLL REVEAL ============================ */
.rv{opacity:0;transform:translateY(30px);transition:opacity .7s ease, transform .7s ease}
.rv.in{opacity:1;transform:none}

/* ============================ FOOTER ============================ */
footer{
  margin-top:80px;border-top:1px solid var(--line);
  background:linear-gradient(180deg, transparent, rgba(20,13,9,.7));
  padding:46px 20px 40px;text-align:center;
}
footer img.footer-logo{height:64px;width:auto;margin:0 auto 14px;opacity:.92;display:block}
footer .fl{display:flex;gap:22px;justify-content:center;margin-bottom:16px;flex-wrap:wrap}
footer .fl a{font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--txt-dim)}
footer .fl a:hover{color:var(--gold2)}
footer .cp{font-size:12.5px;color:var(--txt-faint)}

/* ============================ SÖZLEŞMELER ============================ */
.footer-legal{max-width:var(--maxw);margin:30px auto 26px;text-align:left}
.footer-legal h3{font-size:15px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);text-align:center;margin-bottom:5px}
.footer-legal>p{font-size:12.5px;color:var(--txt-faint);text-align:center;margin-bottom:16px}
.footer-legal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.footer-legal-grid a{display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--txt-dim);font-size:13px;line-height:1.4;transition:border-color .2s, color .2s, background .2s, transform .2s}
.footer-legal-grid a:hover{border-color:var(--line2);background:var(--panel2);color:var(--gold2);transform:translateY(-1px)}
.footer-legal-grid svg{flex:0 0 auto;width:16px;height:16px;color:var(--gold)}

/* ============================ KÖZLER ============================ */
#embers{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.75}
/* DİKKAT: .nav bu listeden ÇIKARILDI — position:relative onu fixed olmaktan
   çıkarıp z-index:100'ü 1'e düşürüyordu: bar kaydırınca kayboluyor, mobil menü
   main'in (z-index:1) altında kalıyordu. Közlerin üstüne çıkmak için .nav'ın
   kendi z-index değeri zaten yeterli. */
.hero>*,main,footer{position:relative;z-index:1}
.nav{z-index:200}
.nav .links{z-index:201}

/* ============================ MOBİL ============================ */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:8px;text-align:center;justify-items:center}
  .hero-copy{display:flex;flex-direction:column;align-items:center}
  .hero-art{order:-1;width:100%}
  .hero-art .art-img{max-width:min(430px,76vw)}
  .hero-art .art-glow{width:min(460px,84vw)}
  .hero .ctas,.hero .count{justify-content:center}
  .hero-text{border-left:none;border-top:2px solid rgba(232,179,75,.3);padding:14px 0 0;text-align:center}
  /* rozeti karakterlerin yüzünden uzak tut */
  .mobil-badge{left:1%;top:auto;bottom:3%}
}
@media (max-width:560px){
  .hero{padding-top:96px}
  .hero .date-badge{letter-spacing:1.6px;font-size:12px;padding:8px 16px}
  .hero .hlogo{width:min(300px,62vw)}
}
@media (max-width:900px){
  .split,.split.rev{grid-template-columns:1fr;gap:26px}
  .split.rev .media{order:0}
  .classes{grid-template-columns:1fr}
  /* Mobile nav handled by mobile drawer breakpoint */
  .count .cell{min-width:70px}
  section.blok{padding:54px 0 20px}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}


/* ==========================================================================
   METIN2 MOBILE NETWORK (.ORG) — LUXURY HEADER & NAVIGATION ENHANCEMENTS
   Rule #3: 2026 Core Web Vitals & Ergonomics
   Rule #4: English Technical Naming
   Rule #5: Official Rohan Golden Check Badge (.rohan-mirror-check)
   ========================================================================== */

/* Official Rohan Mirror Check Badge (Rule #5) */
.rohan-mirror-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe5a3, #d49a3d 60%, #996515 100%);
  border: 1px solid #e5b66b;
  box-shadow: 0 0 8px rgba(229, 182, 107, 0.45);
  color: #1a1005;
  font-size: 11px;
  margin-right: 6px;
  flex-shrink: 0;
  vertical-align: middle;
}
.rohan-mirror-check i {
  color: #1a1005;
  font-weight: 900;
}

/* Upgraded Frosted Glass Nav */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 28px;
  background: linear-gradient(180deg, rgba(13, 9, 7, 0.92) 0%, rgba(13, 9, 7, 0.75) 100%);
  border-bottom: 1px solid rgba(229, 182, 107, 0.2);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav.solid {
  background: linear-gradient(180deg, rgba(11, 8, 7, 0.98) 0%, rgba(15, 11, 9, 0.94) 100%);
  padding: 8px 28px;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.65), 0 1px 0 rgba(229, 182, 107, 0.25);
}

.nav .logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.nav .logo img {
  height: 44px;
  width: auto;
  transition: transform 0.3s ease, height 0.3s ease;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8));
}

.nav .logo:hover img {
  transform: scale(1.03);
}

.nav.solid .logo img {
  height: 38px;
}

/* Nav Links */
.nav .links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 auto 0 20px;
  flex-wrap: nowrap;
}

.nav .links a {
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #c9bbae;
  padding: 7px 11px;
  border-radius: 6px;
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.2s ease;
  position: relative;
}

.nav .links a::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #d49a3d, #f5d77f);
  transition: all 0.25s ease;
  transform: translateX(-50%);
  border-radius: 2px;
}

.nav .links a:hover {
  color: #f7dfa3;
  background: rgba(229, 182, 107, 0.08);
}

.nav .links a:hover::after {
  width: 60%;
}

/* Right Actions Container */
.nav-right-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Live Online Counter Pill */
.live-counter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  color: #34d399;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.pulse-emerald {
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 10px #10b981;
  animation: pulseGlow 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
  flex-shrink: 0;
}

@keyframes pulseGlow {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 8px #10b981;
  }
  50% {
    opacity: 0.5;
    transform: scale(0.85);
    box-shadow: 0 0 2px #10b981;
  }
}

/* 17-Language Dropdown */
.lang-dropdown {
  position: relative;
  display: inline-block;
}

.lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  background: rgba(32, 24, 20, 0.85);
  border: 1px solid rgba(229, 182, 107, 0.3);
  border-radius: 8px;
  color: #f5efe6;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.lang-trigger:hover, .lang-dropdown.open .lang-trigger {
  background: rgba(45, 34, 28, 0.95);
  border-color: #f5d77f;
  color: #f5d77f;
}

.lang-flag {
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  object-fit: cover;
}

.chevron-icon {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  transition: transform 0.25s ease;
}

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

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 220px;
  max-height: 380px;
  overflow-y: auto;
  background: rgba(18, 14, 12, 0.98);
  border: 1px solid rgba(229, 182, 107, 0.35);
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.85);
  padding: 6px;
  z-index: 2000;
  display: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(229, 182, 107, 0.4) transparent;
}

.lang-dropdown.open .lang-menu {
  display: block;
  animation: dropdownFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  color: #c9bbae;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.lang-option:hover {
  background: rgba(229, 182, 107, 0.12);
  color: #f5d77f;
  transform: translateX(2px);
}

.lang-option.active {
  background: rgba(229, 182, 107, 0.2);
  color: #f7dfa3;
  font-weight: 700;
}

/* Royal Gold CTA Button */
.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  background: linear-gradient(180deg, #f5d77f 0%, #d49a3d 50%, #b37b25 100%);
  color: #1a1005 !important;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 8px;
  border: 1px solid #ffd87a;
  box-shadow: 0 4px 18px rgba(212, 154, 61, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(212, 154, 61, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  color: #0d0803 !important;
}

/* Burger Toggle Button */
.nav .burger {
  display: none;
  background: rgba(32, 24, 20, 0.8);
  border: 1px solid rgba(229, 182, 107, 0.3);
  color: #f5d77f;
  font-size: 20px;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.nav .burger:hover {
  background: rgba(45, 34, 28, 0.95);
  border-color: #f5d77f;
}

/* Mobile Drawer & Responsive Breakpoints */
@media (max-width: 1260px) {
  .nav .links {
    display: none;
  }

  .nav .burger {
    display: block;
  }

  .nav.open .links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    background: rgba(14, 10, 8, 0.98);
    border-bottom: 2px solid rgba(229, 182, 107, 0.35);
    padding: 16px 20px;
    gap: 6px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(16px);
    max-height: calc(100vh - 65px);
    overflow-y: auto;
    z-index: 999;
  }

  .nav.open .links a {
    width: 100%;
    padding: 10px 14px;
    font-size: 13.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    box-sizing: border-box;
  }

  .nav.open .d-drawer-only {
    display: inline;
  }
}

@media (max-width: 768px) {
  .nav {
    padding: 8px 12px;
    gap: 8px;
  }
  .live-counter-pill {
    display: none;
  }
  .nav .logo img {
    height: 32px;
  }
  .nav-cta {
    padding: 6px 12px;
    font-size: 12px;
  }
}

@media (max-width: 420px) {
  .nav {
    padding: 6px 8px;
    gap: 6px;
  }
  .nav-right-actions {
    gap: 6px;
  }
  .nav .logo img {
    height: 28px;
    max-width: 110px;
  }
  .lang-name {
    display: none;
  }
  .lang-trigger {
    padding: 5px 7px;
  }
  .nav-cta {
    padding: 5px 9px;
    font-size: 11px;
  }
  .nav .burger {
    padding: 4px 8px;
    font-size: 17px;
  }
}

/* Floating Back to Top Button */
.back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(180deg, #2a201a 0%, #17110e 100%);
  border: 1px solid rgba(229, 182, 107, 0.4);
  color: #f5d77f;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: linear-gradient(180deg, #f5d77f 0%, #d49a3d 100%);
  color: #1a1005;
  border-color: #ffd87a;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(212, 154, 61, 0.5);
}

/* Footer Multilingual Section */
.footer-multilingual {
  max-width: 1080px;
  margin: 34px auto 26px;
  text-align: center;
  padding: 0 16px;
}

.footer-subheading {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 5px;
  text-align: center;
}

.footer-subheading-desc {
  font-size: 12.5px;
  color: var(--txt-faint);
  margin-bottom: 16px;
  text-align: center;
}

.footer-lang-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  justify-content: center;
  align-items: center;
}

.footer-lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(24, 18, 14, 0.9);
  border: 1px solid rgba(229, 182, 107, 0.25);
  border-radius: 9999px;
  color: #c9bbae;
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
}

.footer-lang-pill img,
.footer-lang-flag {
  width: 20px !important;
  height: 14px !important;
  object-fit: cover !important;
  border-radius: 2px !important;
  margin: 0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

.footer-lang-pill span {
  white-space: nowrap;
}

.footer-lang-pill:hover {
  background: rgba(45, 33, 25, 0.95);
  border-color: #f5d77f;
  color: #f5d77f;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(229, 182, 107, 0.3);
}

.footer-lang-pill.active {
  background: linear-gradient(180deg, rgba(229, 182, 107, 0.22) 0%, rgba(180, 130, 60, 0.16) 100%);
  border-color: #f5d77f;
  color: #ffe5a3;
  font-weight: 700;
  box-shadow: 0 0 16px rgba(229, 182, 107, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.footer-lang-pill.active::after {
  content: '';
  width: 6px;
  height: 6px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 6px #10b981;
  margin-left: 2px;
}


/* ==========================================================================
   METIN2 MOBILE NETWORK (.ORG) — 2026 SEO STRATEGY & REALM/SETUP MODULES
   1. Active Realm Matrix (#realms)
   2. Download & Installation Guide (#download-guide)
   3. System Requirements Table
   4. FAQ Accordion (#faq)
   Rule #3: 2026 SEO, Core Web Vitals, Responsive Zero-Clipping
   Rule #4: English Technical Naming
   Rule #5: Official Rohan Golden Check Badge Standard (.rohan-mirror-check)
   ========================================================================== */

/* Section Sub-headings and Title Wraps */
.seo-sec-head {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 42px;
}
.seo-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  background: rgba(232, 179, 75, 0.1);
  border: 1px solid rgba(232, 179, 75, 0.3);
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold2);
  margin-bottom: 14px;
}
.seo-sec-title {
  font-size: clamp(26px, 3.5vw, 42px);
  color: var(--txt);
  line-height: 1.2;
  margin-bottom: 12px;
}
.seo-sec-desc {
  font-size: 15px;
  color: var(--txt-dim);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   1. Active Realm Matrix (#realms)
   -------------------------------------------------------------------------- */
.realm-matrix-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.realm-card {
  background: linear-gradient(180deg, rgba(28, 20, 16, 0.95) 0%, rgba(18, 13, 10, 0.98) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.realm-card:hover {
  transform: translateY(-5px);
  border-color: var(--gold);
  box-shadow: 0 16px 45px rgba(232, 179, 75, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.realm-card.featured {
  border-color: rgba(232, 179, 75, 0.6);
  background: linear-gradient(180deg, rgba(34, 24, 18, 0.98) 0%, rgba(20, 14, 11, 0.98) 100%);
}
.realm-card.featured::before {
  content: 'EN POPÜLER SUNUCU';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #b37b25, #f5d77f, #b37b25);
  color: #1a1005;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 3px 14px;
  border-radius: 9999px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}
.realm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.realm-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #34d399;
}
.realm-status-indicator .pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
}
.realm-online-count {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gold2);
  background: rgba(232, 179, 75, 0.12);
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid rgba(232, 179, 75, 0.25);
}
.realm-title {
  font-size: 24px;
  color: var(--txt);
  margin-bottom: 4px;
}
.realm-type-badge {
  font-size: 13px;
  color: var(--gold-dim);
  font-weight: 600;
  margin-bottom: 18px;
  letter-spacing: 0.5px;
}
.realm-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}
.realm-features li {
  font-size: 13.5px;
  color: var(--txt-dim);
  display: flex;
  align-items: center;
  line-height: 1.4;
}
.realm-features li strong {
  color: var(--txt);
  margin-right: 4px;
}
.realm-platforms {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12px;
  color: var(--txt-faint);
}
.realm-platforms span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--txt-dim);
}
.realm-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 18px;
  margin-top: 16px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #1a1005;
  background: linear-gradient(180deg, #f5d77f 0%, #d49a3d 50%, #b37b25 100%);
  border: 1px solid #ffd87a;
  box-shadow: 0 4px 18px rgba(212, 154, 61, 0.35);
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.realm-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(212, 154, 61, 0.55);
  color: #0b0704;
}

/* --------------------------------------------------------------------------
   2. Download & Installation Guide (#download-guide)
   -------------------------------------------------------------------------- */
.download-platforms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--maxw);
  margin: 0 auto 36px;
}
.platform-guide-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.platform-guide-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6);
}
.platform-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.platform-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(232, 179, 75, 0.12);
  border: 1px solid rgba(232, 179, 75, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold2);
  flex-shrink: 0;
}
.platform-icon-wrap svg {
  width: 26px;
  height: 26px;
}
.platform-title-wrap h3 {
  font-size: 20px;
  color: var(--txt);
  margin-bottom: 3px;
}
.platform-title-wrap span {
  font-size: 12px;
  color: var(--gold-dim);
  font-weight: 600;
}
.platform-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-grow: 1;
}
.platform-steps li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--txt-dim);
  line-height: 1.5;
}
.step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(232, 179, 75, 0.15);
  border: 1px solid var(--gold);
  color: var(--gold2);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.platform-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: #1a1005;
  background: linear-gradient(180deg, #f5d77f 0%, #d49a3d 100%);
  border: 1px solid #ffd87a;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(212, 154, 61, 0.3);
  transition: all 0.2s ease;
  margin-top: auto;
}
.platform-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(212, 154, 61, 0.5);
  color: #0b0704;
}

/* System Requirements Table */
.sys-req-wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  overflow-x: auto;
}
.sys-req-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  text-align: left;
}
.sys-req-table th {
  color: var(--gold);
  font-family: 'Fenomen Slab', Georgia, serif;
  font-size: 15px;
  letter-spacing: 0.5px;
  padding: 12px 16px;
  border-bottom: 2px solid var(--line2);
  background: rgba(0, 0, 0, 0.2);
}
.sys-req-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--txt-dim);
}
.sys-req-table tr:hover td {
  background: rgba(232, 179, 75, 0.04);
  color: var(--txt);
}
.sys-req-table tr:last-child td {
  border-bottom: none;
}

/* --------------------------------------------------------------------------
   3. FAQ Accordion (#faq)
   -------------------------------------------------------------------------- */
.faq-accordion-wrap {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.25s ease;
}
.faq-item:hover, .faq-item.active {
  border-color: var(--gold);
}
.faq-question-btn {
  width: 100%;
  text-align: left;
  padding: 18px 22px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  color: var(--txt);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.4;
  transition: color 0.2s ease;
}
.faq-question-btn:hover {
  color: var(--gold2);
}
.faq-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--gold);
  transition: transform 0.25s ease;
}
.faq-item.active .faq-chevron {
  transform: rotate(180deg);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s ease;
  padding: 0 22px;
  color: var(--txt-dim);
  font-size: 14.5px;
  line-height: 1.65;
}
.faq-item.active .faq-answer {
  max-height: 300px;
  padding: 0 22px 20px;
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
  .realm-matrix-grid, .download-platforms-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}


/* ==========================================================================
   DEEP RESEARCH 2026 SEO EXTENSIONS (ARCHITECTURE, AUTOMATION & TROUBLESHOOTING)
   ========================================================================== */

/* Modern Responsive Architecture Table */
.arch-table-wrap {
  width: 100%;
  max-width: 1160px;
  margin: 36px auto 0;
  background: rgba(18, 14, 11, 0.75);
  border: 1px solid rgba(229, 182, 107, 0.25);
  border-radius: 12px;
  padding: 24px;
  overflow-x: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
}

.arch-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 14.5px;
}

.arch-table th {
  background: rgba(229, 182, 107, 0.12);
  color: var(--gold2);
  font-weight: 700;
  padding: 14px 18px;
  border-bottom: 2px solid rgba(229, 182, 107, 0.35);
  letter-spacing: 0.5px;
}

.arch-table td {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--txt);
  vertical-align: top;
  line-height: 1.5;
}

.arch-table tr:hover td {
  background: rgba(229, 182, 107, 0.04);
}

.arch-param-title {
  font-weight: 700;
  color: var(--gold);
  display: block;
}

.arch-mobile-highlight {
  color: #38ef7d !important;
  font-weight: 600;
}

/* Automation 6-Grid */
.automation-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1160px;
  margin: 32px auto 0;
}

.automation-card {
  background: rgba(18, 14, 11, 0.8);
  border: 1px solid rgba(229, 182, 107, 0.22);
  border-radius: 10px;
  padding: 22px;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.automation-card:hover {
  transform: translateY(-3px);
  border-color: rgba(229, 182, 107, 0.5);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
}

.automation-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: rgba(229, 182, 107, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold2);
  margin-bottom: 14px;
}

.automation-card h4 {
  font-size: 17px;
  color: #fff;
  margin-bottom: 8px;
  font-family: var(--primary-font, inherit);
}

.automation-card p {
  font-size: 13.5px;
  color: var(--txt-dim);
  line-height: 1.55;
  margin: 0;
}

/* Troubleshooting Grid */
.troubleshoot-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 1160px;
  margin: 36px auto 0;
}

.troubleshoot-card {
  background: rgba(18, 14, 11, 0.85);
  border: 1px solid rgba(229, 182, 107, 0.25);
  border-radius: 12px;
  padding: 26px;
  position: relative;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6);
  transition: all 0.25s ease;
}

.troubleshoot-card:hover {
  border-color: rgba(229, 182, 107, 0.6);
  box-shadow: 0 12px 32px rgba(229, 182, 107, 0.15);
}

.troubleshoot-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.badge-amber {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.badge-emerald {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.badge-cyan {
  background: rgba(6, 182, 212, 0.15);
  color: #22d3ee;
  border: 1px solid rgba(6, 182, 212, 0.35);
}

.badge-crimson {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.troubleshoot-title {
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

.troubleshoot-desc {
  font-size: 14px;
  color: var(--txt-dim);
  line-height: 1.6;
  margin-bottom: 16px;
}

.troubleshoot-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.troubleshoot-steps li {
  font-size: 13.5px;
  color: #e2e8f0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}

.troubleshoot-steps code {
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--gold2);
  font-family: Consolas, monospace;
  font-size: 12.5px;
}

/* Server Capacity Scale Table */
.scale-table-wrap {
  width: 100%;
  max-width: 1160px;
  margin: 30px auto 0;
  background: rgba(18, 14, 11, 0.7);
  border: 1px solid rgba(229, 182, 107, 0.22);
  border-radius: 12px;
  padding: 20px;
  overflow-x: auto;
}

.scale-badge-online {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.35);
  font-weight: 700;
  font-size: 12.5px;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .automation-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .troubleshoot-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .automation-grid {
    grid-template-columns: 1fr;
  }
}



.automation-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: radial-gradient(circle at 50% 50%, rgba(229, 182, 107, 0.2), rgba(18, 14, 11, 0.9));
  border: 1px solid rgba(229, 182, 107, 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(229, 182, 107, 0.3);
}

.automation-card-icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8));
}