/* Efsane Online /guide/ — okunabilir, renk kodlu ve açılır rehber arayüzü */
.eo-long-guide{
    --eo-line:rgba(255,255,255,.105);
    --eo-soft:rgba(255,255,255,.045);
    --eo-gold:#d8b15a;
    --eo-blue:#62b8df;
    --eo-green:#68bd83;
    --eo-orange:#e2a14d;
    --eo-purple:#a989dc;
    --eo-red:#d36b65;
    --eo-teal:#55c2bd;
    --eo-text-soft:#c9d0db;
    --eo-panel:#11161e;
    color:inherit;
}
.eo-long-guide *{box-sizing:border-box}
.eo-long-guide p,.eo-long-guide li{line-height:1.72}
.eo-long-guide p{margin:0 0 14px}
.eo-long-guide ul,.eo-long-guide ol{margin-top:10px;margin-bottom:18px}
.eo-long-guide h2,.eo-long-guide h3,.eo-long-guide h4{line-height:1.28}

/* İçindekiler */
.eo-long-guide .eo-guide-toc{
    margin:24px 0 28px;
    padding:20px;
    border:1px solid rgba(216,177,90,.25);
    background:linear-gradient(180deg,rgba(216,177,90,.06),rgba(255,255,255,.025));
    border-radius:14px;
    box-shadow:0 12px 36px rgba(0,0,0,.12);
}
.eo-long-guide .eo-guide-toc h2{margin:0 0 14px;font-size:1.35em}
.eo-long-guide .eo-guide-toc nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.eo-long-guide .eo-guide-toc a{
    display:flex;align-items:center;min-height:42px;padding:9px 11px;
    border:1px solid rgba(255,255,255,.07);border-radius:9px;
    background:rgba(0,0,0,.12);color:inherit;text-decoration:none;
    transition:.18s ease;
}
.eo-long-guide .eo-guide-toc a:hover{border-color:rgba(98,184,223,.42);background:rgba(98,184,223,.08);transform:translateY(-1px)}

/* Ana accordion bölümleri */
.eo-long-guide .eo-guide-section{
    --section-accent:var(--eo-blue);
    margin:12px 0;
    padding:0;
    border:1px solid var(--eo-line);
    border-left:4px solid var(--section-accent);
    background:linear-gradient(135deg,color-mix(in srgb,var(--section-accent) 7%,transparent),rgba(255,255,255,.018) 52%);
    border-radius:12px;
    overflow:hidden;
    scroll-margin-top:94px;
    box-shadow:0 8px 28px rgba(0,0,0,.08);
}
.eo-long-guide .eo-guide-section>header{margin:0;padding:0}
.eo-long-guide .eo-section-toggle{
    width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
    padding:17px 18px;border:0;background:transparent;color:inherit;text-align:left;
    font:inherit;cursor:pointer;
}
.eo-long-guide .eo-toggle-heading{display:block;min-width:0}
.eo-long-guide .eo-toggle-heading .eo-kicker{display:block;margin-bottom:3px;color:var(--section-accent)}
.eo-long-guide .eo-toggle-heading h2{margin:0;font-size:clamp(1.12rem,2.1vw,1.52rem)}
.eo-long-guide .eo-toggle-heading p{margin:7px 0 0;max-width:980px;color:var(--eo-text-soft);font-size:.96em}
.eo-long-guide .eo-toggle-icon{
    flex:0 0 34px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
    border:1px solid color-mix(in srgb,var(--section-accent) 55%,transparent);
    color:var(--section-accent);background:color-mix(in srgb,var(--section-accent) 9%,transparent);
    font-size:1.35rem;font-weight:500;line-height:1;
}
.eo-long-guide .eo-guide-section.is-open{border-color:color-mix(in srgb,var(--section-accent) 45%,var(--eo-line));box-shadow:0 12px 34px rgba(0,0,0,.13)}
.eo-long-guide .eo-guide-section.is-open>.eo-section-content{border-top:1px solid var(--eo-line)}
.eo-long-guide .eo-section-content{padding:20px 20px 24px;background:rgba(0,0,0,.10)}
.eo-long-guide .eo-section-content.is-visible{animation:eoGuideFade .18s ease-out}
@keyframes eoGuideFade{from{opacity:.45;transform:translateY(-3px)}to{opacity:1;transform:none}}

/* Bölüm renkleri */
.eo-long-guide #shaiya,.eo-long-guide #hikaye,.eo-long-guide #taraflar,.eo-long-guide #stat-okuma,.eo-long-guide #sinif-yapilari,.eo-long-guide #ilk-dogus,.eo-long-guide #baslangic-esyasi,.eo-long-guide #canta,.eo-long-guide #kontroller,.eo-long-guide #komutlar,.eo-long-guide #yetenekler,.eo-long-guide #harita{--section-accent:var(--eo-blue)}
.eo-long-guide #farm,.eo-long-guide #sans-kutusu,.eo-long-guide #farm-bolgeleri,.eo-long-guide #bosslar{--section-accent:var(--eo-green)}
.eo-long-guide #drop-ekipman,.eo-long-guide #turuncu{--section-accent:var(--eo-orange)}
.eo-long-guide #lapis,.eo-long-guide #lapisya,.eo-long-guide #element,.eo-long-guide #takas-bagli,.eo-long-guide #gorev-bless{--section-accent:var(--eo-purple)}
.eo-long-guide #grup-birlik,.eo-long-guide #pvp,.eo-long-guide #rvr,.eo-long-guide #odul-avi{--section-accent:var(--eo-red)}
.eo-long-guide #online-ep,.eo-long-guide #yapay-zeka,.eo-long-guide #gelisim-rotasi,.eo-long-guide #sozluk{--section-accent:var(--eo-gold)}
.eo-onboarding-page .eo-guide-section{--section-accent:var(--eo-blue)}

/* Alt başlıklar / paneller */
.eo-long-guide .eo-guide-subsection{margin:25px 0}
.eo-long-guide .eo-guide-subsection h3{margin:0 0 9px;color:#fff}
.eo-long-guide .eo-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0}
.eo-long-guide .eo-guide-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.eo-long-guide .eo-guide-panel{
    min-width:0;padding:17px;border:1px solid var(--eo-line);
    background:linear-gradient(180deg,rgba(255,255,255,.048),rgba(255,255,255,.026));
    border-radius:10px;
}
.eo-long-guide .eo-guide-panel h3,.eo-long-guide .eo-guide-panel h4{margin:0 0 8px;color:#fff}

/* Bilgi kutuları */
.eo-long-guide .eo-guide-callout{
    margin:18px 0;padding:15px 17px;border:1px solid rgba(98,184,223,.20);border-left:4px solid var(--eo-blue);
    background:rgba(98,184,223,.075);border-radius:8px;line-height:1.65
}
.eo-long-guide .eo-guide-callout.warning{border-color:rgba(226,161,77,.22);border-left-color:var(--eo-orange);background:rgba(226,161,77,.085)}
.eo-long-guide .eo-guide-callout.good{border-color:rgba(104,189,131,.22);border-left-color:var(--eo-green);background:rgba(104,189,131,.075)}
.eo-long-guide .eo-guide-callout.tip{border-color:rgba(85,194,189,.22);border-left-color:var(--eo-teal);background:rgba(85,194,189,.075)}
.eo-long-guide .eo-guide-callout strong{color:#fff}

/* Akış ve tablolar */
.eo-long-guide .eo-guide-flow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:18px 0}
.eo-long-guide .eo-guide-flow span{padding:8px 11px;border:1px solid var(--eo-line);background:rgba(255,255,255,.04);border-radius:7px;font-weight:600}
.eo-long-guide .eo-guide-flow i{font-style:normal;color:var(--eo-gold)}
.eo-long-guide .eo-guide-table-wrap{overflow-x:auto;margin:17px 0;border-radius:9px}
.eo-long-guide table.eo-guide-table{width:100%;border-collapse:separate;border-spacing:0;min-width:640px;background:rgba(0,0,0,.10)}
.eo-long-guide .eo-guide-table th,.eo-long-guide .eo-guide-table td{padding:11px 12px;border-right:1px solid var(--eo-line);border-bottom:1px solid var(--eo-line);vertical-align:top;text-align:left;line-height:1.55}
.eo-long-guide .eo-guide-table th{background:rgba(255,255,255,.065);color:#fff}
.eo-long-guide .eo-guide-table tr>*:first-child{border-left:1px solid var(--eo-line)}
.eo-long-guide .eo-guide-table thead tr:first-child>*{border-top:1px solid var(--eo-line)}

/* Görseller / video */
.eo-long-guide .eo-guide-visual{
    position:relative;margin:20px 0;padding:12px;border:1px solid var(--eo-line);
    background:rgba(0,0,0,.21);border-radius:11px;text-align:center;overflow:hidden
}
.eo-long-guide .eo-guide-visual img,.eo-long-guide .eo-guide-visual video{display:block;max-width:100%;width:auto;height:auto;margin:0 auto;border-radius:7px}
.eo-long-guide .eo-guide-visual video{width:100%;background:#07090d;max-height:720px}
.eo-long-guide .eo-guide-visual .eo-guide-missing{display:block;padding:30px 15px;color:var(--eo-text-soft)}
.eo-long-guide .eo-guide-visual.has-image .eo-guide-missing{display:none}
.eo-long-guide .eo-guide-visual figcaption{margin-top:10px;color:var(--eo-text-soft);font-size:.93em;line-height:1.5}
.eo-long-guide .eo-guide-visual code{word-break:break-word}
.eo-long-guide .eo-guide-visual-wide{width:100%}
.eo-long-guide .eo-guide-visual-wide img{width:100%;max-height:720px;object-fit:contain}
.eo-long-guide .eo-story-visual{padding:14px;background:#080b10}
.eo-long-guide .eo-story-visual img{
    display:block!important;
    width:auto!important;
    height:auto!important;
    max-width:350px!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center center!important;
    margin:0 auto!important;
    border-radius:8px;
    image-rendering:auto;
    transform:none!important;
    zoom:1!important;
}
.eo-long-guide .eo-story-visual figcaption{padding:0 4px 2px}


@media(max-width:390px){
    .eo-long-guide .eo-story-visual img{max-width:100%!important}
}
/* Sınıf alt accordionları */
.eo-long-guide .eo-class-pair{margin:12px 0;padding:0;border:1px solid var(--eo-line);background:rgba(255,255,255,.025);border-radius:10px;overflow:hidden;scroll-margin-top:90px}
.eo-long-guide .eo-class-pair>header{margin:0;padding:0}
.eo-long-guide .eo-class-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 15px;border:0;background:rgba(255,255,255,.025);color:inherit;text-align:left;font:inherit;cursor:pointer}
.eo-long-guide .eo-class-toggle .eo-toggle-heading>div{min-width:0}
.eo-long-guide .eo-class-toggle .eo-toggle-heading h3{margin:0}
.eo-long-guide .eo-class-pair.is-open>.eo-class-content{border-top:1px solid var(--eo-line)}
.eo-long-guide .eo-class-content{padding:17px}
.eo-long-guide .eo-class-tag{white-space:normal;display:inline-block;margin-top:5px;padding:4px 8px;border:1px solid var(--eo-line);border-radius:99px;font-size:.78em;color:var(--eo-text-soft)}

.eo-long-guide .eo-stat-equation{text-align:center;font-weight:700;font-size:1.08em;padding:13px;border:1px solid rgba(98,184,223,.25);background:rgba(98,184,223,.06);border-radius:8px;margin:15px 0}
.eo-long-guide .eo-command-list code{font-size:1.04em}
.eo-long-guide .eo-term{font-weight:700;color:#fff}
.eo-long-guide details.eo-guide-details{margin:10px 0;border:1px solid var(--eo-line);background:var(--eo-soft);border-radius:8px;padding:0 13px}
.eo-long-guide details.eo-guide-details summary{cursor:pointer;padding:12px 0;font-weight:700}
.eo-long-guide details.eo-guide-details>div{padding:0 0 14px}
.eo-long-guide .eo-placeholder-note{font-size:.88em;color:var(--eo-text-soft)}

/* İlk yapılacaklar / adım listeleri: daima yatay ve okunabilir */
.eo-long-guide .eo-step-list{counter-reset:eoStep;list-style:none!important;padding:0!important;margin:18px 0;display:grid!important;grid-template-columns:1fr!important;gap:10px;width:100%}
.eo-long-guide .eo-step-list>li{
    counter-increment:eoStep;position:relative!important;display:flex!important;align-items:flex-start!important;gap:12px;
    width:100%!important;min-width:0!important;margin:0!important;padding:12px 14px!important;
    border:1px solid var(--eo-line);border-radius:9px;background:rgba(255,255,255,.03);
    white-space:normal!important;word-break:normal!important;overflow-wrap:normal!important;writing-mode:horizontal-tb!important;
}
.eo-long-guide .eo-step-list>li:before{
    content:counter(eoStep,decimal-leading-zero);position:static!important;flex:0 0 34px;width:34px;height:34px;
    display:grid;place-items:center;border:1px solid rgba(216,177,90,.35);border-radius:50%;
    color:var(--eo-gold);font-weight:700;background:rgba(216,177,90,.06)
}

/* Ana rehber yardımı alt kutusu */
.eo-long-guide .eo-help-box{margin-top:28px}

@media(max-width:980px){
    .eo-long-guide .eo-guide-toc nav{grid-template-columns:repeat(2,minmax(0,1fr))}
    .eo-long-guide .eo-guide-grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
    .eo-long-guide .eo-guide-toc{padding:15px}
    .eo-long-guide .eo-guide-toc nav,.eo-long-guide .eo-guide-grid,.eo-long-guide .eo-guide-grid.cols-3{grid-template-columns:1fr}
    .eo-long-guide .eo-section-toggle{padding:14px 13px;gap:10px}
    .eo-long-guide .eo-section-content{padding:16px 13px 19px}
    .eo-long-guide .eo-toggle-icon{flex-basis:30px;width:30px;height:30px}
    .eo-long-guide .eo-guide-table-wrap{margin-left:-4px;margin-right:-4px}
}

@media(prefers-reduced-motion:reduce){
    .eo-long-guide *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}

/* Accordion başlıklarının site genelindeki <header> stillerinden etkilenmesini engelle. */
.eo-long-guide .eo-guide-section > header,
.eo-long-guide .eo-class-pair > header{
    position:static!important;
    inset:auto!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    transform:none!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
}
.eo-long-guide .eo-section-toggle{
    min-height:64px;
    overflow:visible;
}
.eo-long-guide .eo-toggle-heading{
    width:100%;
    overflow:visible;
    white-space:normal;
}
.eo-long-guide .eo-toggle-heading h2,
.eo-long-guide .eo-toggle-heading h3{
    display:block;
    max-width:100%;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word;
    overflow:visible!important;
}
.eo-long-guide .eo-toggle-heading p{display:none!important}
@media(min-width:681px){
    .eo-long-guide .eo-guide-section{margin:14px 0}
}