/* Efsane Online — Rehber Merkezi V12 */
.eo-guide-hub-v2{
    --hub-line:rgba(255,255,255,.09);
    --hub-soft:rgba(255,255,255,.70);
    --hub-card:rgba(255,255,255,.035);
    --hub-card-strong:rgba(255,255,255,.055);
}

.eo-hub-hero{
    display:grid;
    grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr);
    gap:24px;
    align-items:center;
    padding:30px;
    margin-bottom:24px;
    border:1px solid var(--hub-line);
    border-radius:16px;
    background:
        radial-gradient(circle at 88% 14%,rgba(226,161,77,.15),transparent 27%),
        radial-gradient(circle at 12% 100%,rgba(79,128,181,.11),transparent 28%),
        rgba(255,255,255,.018);
    overflow:hidden;
}

.eo-hub-hero h1{
    max-width:720px;
    margin:7px 0 10px !important;
    font-size:clamp(1.8rem,3vw,2.65rem);
    line-height:1.08;
}

.eo-hub-hero p{
    max-width:720px;
    margin:0 0 18px !important;
    font-size:1.02em;
    line-height:1.7;
    color:var(--hub-soft);
}

.eo-hub-hero-visual{
    min-height:205px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:18px;
    border:1px solid var(--hub-line);
    border-radius:14px;
    background:rgba(0,0,0,.18);
}

.eo-hub-item-cluster{
    position:relative;
    width:156px;
    height:104px;
    margin-bottom:13px;
}

.eo-hub-item-cluster span{
    position:absolute;
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border:1px solid rgba(226,161,77,.20);
    border-radius:11px;
    background:rgba(10,11,14,.88);
    box-shadow:0 9px 25px rgba(0,0,0,.28);
}

.eo-hub-item-cluster span:nth-child(1){left:0;top:24px;transform:rotate(-7deg)}
.eo-hub-item-cluster span:nth-child(2){left:48px;top:0;z-index:2}
.eo-hub-item-cluster span:nth-child(3){right:0;top:24px;transform:rotate(7deg)}
.eo-hub-item-cluster span:nth-child(4){left:49px;bottom:0;z-index:3}

.eo-hub-item-cluster img{
    width:34px;
    height:34px;
    object-fit:contain;
}

.eo-hub-hero-visual strong{
    display:block;
    margin-bottom:3px;
    color:#fff;
}

.eo-hub-hero-visual small{color:var(--hub-soft)}

.eo-hub-section{padding:8px 0 22px}

.eo-hub-section + .eo-hub-section{
    border-top:1px solid var(--hub-line);
    padding-top:26px;
}

.eo-hub-section-head{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:15px;
}

.eo-hub-section-head h2{
    margin:4px 0 0 !important;
    font-size:1.35rem;
}

.eo-hub-section-head > p{
    max-width:490px;
    margin:0 !important;
    color:var(--hub-soft);
    font-size:.93em;
    text-align:right;
}

.eo-hub-primary-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:13px;
}

.eo-hub-feature-card{
    position:relative;
    min-height:245px;
    display:flex;
    flex-direction:column;
    text-decoration:none !important;
    padding:19px;
    overflow:hidden;
    border:1px solid var(--hub-line);
    border-radius:14px;
    background:linear-gradient(145deg,var(--hub-card-strong),rgba(255,255,255,.018));
    transition:transform .16s ease,border-color .16s ease,background .16s ease;
}

.eo-hub-feature-card:hover{
    transform:translateY(-2px);
    border-color:rgba(226,161,77,.35);
    background:linear-gradient(145deg,rgba(226,161,77,.075),rgba(255,255,255,.025));
}

.eo-hub-feature-card.progression{
    border-color:rgba(226,161,77,.28);
    background:
        radial-gradient(circle at 100% 0,rgba(226,161,77,.12),transparent 34%),
        linear-gradient(145deg,var(--hub-card-strong),rgba(255,255,255,.018));
}

.eo-hub-feature-icon{
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    margin-bottom:16px;
    border:1px solid rgba(226,161,77,.20);
    border-radius:12px;
    background:rgba(0,0,0,.18);
}

.eo-hub-feature-icon svg,
.eo-hub-tool-icon svg,
.eo-hub-mini-icon svg{
    width:29px;
    height:29px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.65;
    stroke-linecap:round;
    stroke-linejoin:round;
    color:#e0b561;
}

.eo-hub-feature-item-icons{
    grid-template-columns:repeat(2,1fr);
    padding:6px;
    gap:3px;
}

.eo-hub-feature-item-icons img{
    width:23px;
    height:23px;
    object-fit:contain;
}

.eo-hub-feature-copy{
    display:flex;
    flex:1;
    flex-direction:column;
}

.eo-hub-feature-copy > span,
.eo-hub-tool-card small{
    display:block;
    margin-bottom:5px;
    color:#d5aa59;
    font-size:.72em;
    font-weight:800;
    letter-spacing:.08em;
}

.eo-hub-feature-copy h3,
.eo-hub-tool-card h3,
.eo-hub-mini-card h3{
    margin:0 0 7px !important;
    color:#fff;
}

.eo-hub-feature-copy p,
.eo-hub-tool-card p,
.eo-hub-mini-card p{color:var(--hub-soft)}

.eo-hub-feature-copy p{
    margin:0 0 14px !important;
    line-height:1.58;
}

.eo-hub-feature-copy b{
    margin-top:auto;
    color:#e7bd6d;
    font-size:.9em;
}

.eo-hub-feature-copy em{
    font-style:normal;
    display:inline-block;
    margin-left:4px;
    transition:transform .16s ease;
}

.eo-hub-feature-card:hover em{transform:translateX(3px)}

.eo-hub-secondary-grid{
    display:grid;
    grid-template-columns:1.2fr 1fr 1fr;
    gap:12px;
}

.eo-hub-tool-card{
    display:grid;
    grid-template-columns:50px minmax(0,1fr);
    gap:12px;
    align-items:start;
    min-height:175px;
    padding:16px;
    text-decoration:none !important;
    border:1px solid var(--hub-line);
    border-radius:12px;
    background:var(--hub-card);
    transition:border-color .16s ease,transform .16s ease;
}

.eo-hub-tool-card:hover{
    transform:translateY(-2px);
    border-color:rgba(226,161,77,.32);
}

.eo-hub-tool-card.featured{
    background:
        radial-gradient(circle at 100% 0,rgba(84,139,188,.12),transparent 34%),
        var(--hub-card);
}

.eo-hub-tool-icon{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:10px;
    border:1px solid var(--hub-line);
    background:rgba(0,0,0,.15);
}

.eo-hub-tool-card p{
    margin:0 !important;
    line-height:1.5;
    font-size:.91em;
}

.eo-hub-tool-card > b{
    grid-column:2;
    align-self:end;
    color:#e1b561;
    font-size:.83em;
}

.eo-hub-mini-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}

.eo-hub-mini-card{
    display:grid;
    grid-template-columns:45px minmax(0,1fr);
    gap:11px;
    align-items:center;
    min-height:92px;
    padding:14px;
    text-decoration:none !important;
    border:1px solid var(--hub-line);
    border-radius:11px;
    background:rgba(255,255,255,.025);
    transition:border-color .16s ease,background .16s ease;
}

.eo-hub-mini-card:hover{
    border-color:rgba(226,161,77,.30);
    background:rgba(255,255,255,.045);
}

.eo-hub-mini-card.support{border-color:rgba(226,161,77,.21)}

.eo-hub-mini-icon{
    width:43px;
    height:43px;
    display:grid;
    place-items:center;
    border:1px solid var(--hub-line);
    border-radius:9px;
    background:rgba(0,0,0,.14);
}

.eo-hub-mini-icon svg{width:24px;height:24px}

.eo-hub-mini-card h3{
    font-size:.98em;
    margin-bottom:3px !important;
}

.eo-hub-mini-card p{
    margin:0 !important;
    font-size:.84em;
}

.eo-hub-cta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin-top:7px;
    padding:21px 23px;
    border:1px solid rgba(226,161,77,.25);
    border-radius:13px;
    background:linear-gradient(120deg,rgba(226,161,77,.075),rgba(255,255,255,.018));
}

.eo-hub-cta h2{
    margin:4px 0 5px !important;
    font-size:1.2rem;
}

.eo-hub-cta p{
    margin:0 !important;
    color:var(--hub-soft);
}

@media (max-width:980px){
    .eo-hub-hero{grid-template-columns:1fr}
    .eo-hub-hero-visual{min-height:165px}
    .eo-hub-primary-grid{grid-template-columns:1fr}
    .eo-hub-feature-card{min-height:0}
    .eo-hub-secondary-grid{grid-template-columns:1fr}
}

@media (max-width:720px){
    .eo-hub-hero{padding:22px}
    .eo-hub-section-head{display:block}
    .eo-hub-section-head > p{margin-top:8px !important;text-align:left}
    .eo-hub-mini-grid{grid-template-columns:1fr}
    .eo-hub-cta{display:block}
    .eo-hub-cta .eo-button{margin-top:15px}
}

@media (max-width:480px){
    .eo-hub-hero{padding:18px}
    .eo-hub-feature-card{padding:16px}
    .eo-hub-tool-card{grid-template-columns:44px minmax(0,1fr)}
    .eo-hub-tool-icon{width:42px;height:42px}
}