@import url("header.css");
@import url("hero.css");
@import url("cards.css");
@import url("modal.css");
@import url("footer.css");

:root{
    --gold:#e2b857;
    --gold-2:#f0cf78;
    --bronze:#9f7b32;
    --bronze-deep:#3a2d18;
    --steel:#8fb6c7;
    --bg:#050505;
    --panel:rgba(13,16,21,.88);
    --panel-2:rgba(18,22,30,.96);
    --text:#f7f3ea;
    --muted:#b0a995;
    --border:rgba(226,184,87,.22);
    --shadow:0 18px 45px rgba(0,0,0,.42);
}


*{box-sizing:border-box}

body{
margin:0;
min-height:100vh;

overflow-x:hidden;

padding-top:0px;


    color:var(--text);
    background:var(--bg);
    font-family:"Noto Kufi Arabic","Segoe UI",Tahoma,sans-serif;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-4;
    background:var(--bg);
}

body::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:-3;
    pointer-events:none;
    background:var(--bg);
}

#loader{
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:#050609;
    transition:opacity .5s ease;
}

#loader::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,transparent,rgba(226,184,87,.12),transparent);
    animation:speedLines .85s linear infinite;
}

.steel-ball-container{
    position:relative;
    width:150px;
    height:150px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.steel-ball-container::after{
    content:"";
    position:absolute;
    inset:7px;
    border-radius:50%;
    border:1px solid rgba(226,184,87,.55);
    box-shadow:0 0 38px rgba(226,184,87,.48);
    animation:glowPulse 1.2s ease-in-out infinite alternate;
}

.spin-ball-img{
    width:100%;
    height:100%;
    object-fit:contain;
    z-index:2;
    filter:drop-shadow(0 0 16px rgba(226,184,87,.5));
    animation:goldenSpin .9s linear infinite;
}

.section-heading{
    width:100%;
    margin:40px 0 20px;
    padding-right:50px;
    display:flex;
    justify-content:flex-start;
}

.section-heading h2{
    margin:0;
    font-size:36px;
    font-weight:900;
    line-height:1.2;
    color:#fff;
    letter-spacing:-0.5px;
}

.section-heading .underline{
    flex:1;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--gold),var(--bronze));
}

.section-label{
    color:var(--gold);
    font-family:"Cinzel Decorative",serif;
    font-size:12px;
    font-weight:900;
    letter-spacing:1px;
    direction:ltr;
}

.slider-wrapper{position:relative;width:100%;overflow:hidden;z-index:10}
.container{width:min(1160px,100%);margin:0 auto;padding:18px clamp(16px,4vw,30px)}

#latest-chapters-container{
    width:100%;
    margin:0 auto;
}

#all-manga-container{
    display:grid;
    grid-template-columns:repeat(4,260px);
    gap:22px;
    justify-content:start;
    align-items:start;
    width:100%;
}

.catalog-grid .card{
    width:260px;
    max-width:260px;
    min-width:260px;
}

.catalog-grid .card-info{
    min-height:118px;
}

.catalog-grid .manga-title{
    min-height:46px;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
}

.catalog-grid .catalog-card-bottom{
    margin-top:auto;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
}

.catalog-grid .catalog-card-bottom .chapter-num{
    margin:0;
    min-height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.catalog-grid .catalog-type{
    min-height:32px;
    display:flex;
    align-items:center;
    padding:0 10px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:7px;
    color:var(--muted);
    background:rgba(255,255,255,.03);
    font-size:10px;
    font-weight:900;
}

.catalog-grid .card:hover{
    transform:translateY(-7px) scale(1.008);
}

.catalog-grid .card:active{
    transform:translateY(-2px) scale(.992);
}

@media(max-width:1199px) and (min-width:901px){
    #all-manga-container{grid-template-columns:repeat(3,260px)}
}
@media(max-width:900px) and (min-width:651px){
    #all-manga-container{grid-template-columns:repeat(2,260px);justify-content:start}
}
@media(max-width:650px){
    #all-manga-container{grid-template-columns:260px;justify-content:center;gap:18px}
    .catalog-grid .card{width:260px;min-width:260px}
}



@media(max-width:768px){
    .header{min-height:59px;padding:10px 12px}
    .right-side,.left-side{gap:8px}
    .brand-mark{display:none}
    .icon-btn,.x-icon,.user-circle{width:38px;height:38px}
    .search-menu{
        top:59px;
        padding:12px;
    }
    .search-panel-title{
        margin-bottom:8px;
        font-size:11px;
    }
    .hero-slider{
    width:100%;
    min-height:430px;
    margin-top:0;
}
    .hero-slide{
        display:block;
    }
    .hero-slide::before{
        background:
            linear-gradient(180deg,rgba(7,8,11,.36),rgba(7,8,11,.96) 72%),
            linear-gradient(90deg,rgba(7,8,11,.72),rgba(7,8,11,.12));
    }
    .hero-content{
        position:absolute;
        right:0;
        left:0;
        bottom:48px;
        max-width:none;
        padding:20px;
    }
    .hero-title{
        margin:12px 0 8px;
        font-size:34px;
    }
    .hero-desc{
        margin-bottom:14px;
        font-size:13px;
        line-height:1.8;
    }
    .hero-poster{
        display:none;
    }
    .hero-control{
        width:34px;
        height:34px;
    }
    .hero-prev{right:10px}
    .hero-next{left:10px}
    .hero-dots{
        right:20px;
        bottom:16px;
    }
    .hero-dot{
        width:22px;
    }
    .search-section{padding-top:34px}
    .search-shell{min-height:56px;padding:7px 12px}
    #search-bar{font-size:14px}
    .filters{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px;scrollbar-width:none}
    .filters::-webkit-scrollbar{display:none}
    .filter-btn{flex:0 0 auto}
    #latest-chapters-container{padding-inline:0}
    #all-manga-container{grid-template-columns:repeat(2,260px);gap:14px;padding-inline:14px;justify-content:start}
    .container{padding-inline:0}
.card-info{min-height:88px;padding:11px}
.manga-title{font-size:14px}
.preview-box{padding:12px}
.preview-text{font-size:11px}
.nav-arrow{display:flex;width:34px;height:34px}
.modal-content{padding:26px 18px 22px}
}
#loader.is-hidden{opacity:0;pointer-events:none}
body.page-loading{overflow:hidden}

/* Fixed header clearance */
main.page-content{padding-top:72px;}
@media(max-width:700px){main.page-content{padding-top:62px;}}