/*
Theme Name: Asyl Baspasy Final
Theme URI: https://asylbaspasy.kz/
Author: Asyl Baspasy
Description: Approved cream/gold responsive publisher website with editable photos and book covers.
Version: 4.7.0
Text Domain: asyl-baspasy
*/

:root{
    --bg:#fbf8f2;
    --paper:#fffdfa;
    --ink:#17191c;
    --muted:#5d5a55;
    --gold:#b9812d;
    --rust:#a84e3b;
    --line:#e3d6c3;
    --shadow:0 7px 22px rgba(68,51,28,.08);
    --max:1180px;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:Arial,Helvetica,sans-serif;
    line-height:1.55;
    overflow-x:hidden;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}

.wrap{
    width:min(var(--max),calc(100% - 36px));
    margin:auto;
}

h1,h2{
    font-family:Georgia,'Times New Roman',serif;
    font-weight:500;
}


/* =====================================================
   HEADER
===================================================== */

.top{
    background:rgba(255,253,250,.97);
    position:sticky;
    top:0;
    z-index:100;
    border-bottom:1px solid #eee6db;
}

.nav{
    min-height:118px;
    display:flex;
    align-items:center;
    gap:24px;
}

.brand-shell{
    flex:0 0 330px;
    height:100px;
    display:flex;
    align-items:center;
    overflow:visible;
}

.custom-logo-link{
    display:flex;
    align-items:center;
    height:100%;
}

.custom-logo{
    width:310px!important;
    max-width:310px!important;
    height:auto!important;
    max-height:94px!important;
    object-fit:contain;
}

.brand-fallback strong{
    font:44px Georgia;
    color:#073b68;
}

.brand-fallback small{
    display:block;
    letter-spacing:.45em;
    color:var(--gold);
}


/* =====================================================
   MENU
===================================================== */

.menu{
    position:relative;
    display:flex;
    align-items:center;
    margin-left:auto;
    padding:7px 8px;
    gap:0;
}

.menu:before{
    content:"";
    position:absolute;
    inset:0;
    border:1px solid var(--gold);
    border-radius:12px;
    opacity:0;
    transform:scale(.985);
    transition:.25s;
    pointer-events:none;
}

.menu:hover:before{
    opacity:1;
    transform:scale(1);
}

.menu a{
    position:relative;
    display:flex;
    align-items:center;
    gap:7px;
    padding:11px 13px;
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
}

.menu a:not(:last-child):after{
    content:"";
    position:absolute;
    right:0;
    top:50%;
    height:32px;
    width:1px;
    background:#d9d1c7;
    transform:translateY(-50%);
}

.menu i{
    font-style:normal;
    color:var(--gold);
    font-size:18px;
}

.menu a:hover{
    color:var(--rust);
}

.menu svg{
    width:18px;
    height:18px;
    fill:none;
    stroke:var(--gold);
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex:0 0 18px;
}

.langs{
    display:flex;
    gap:7px;
    align-items:center;
    font-size:11px;
}

.langs button{
    border:0;
    background:none;
    font-weight:700;
    color:var(--rust);
    cursor:pointer;
}

.langs b{
    font-weight:400;
    color:#aaa;
}

.menu-toggle{
    display:none;
    background:none;
    border:0;
    width:40px;
}

.menu-toggle span{
    height:2px;
    background:#333;
    display:block;
    margin:6px;
}


/* =====================================================
   HERO
===================================================== */

.hero{
    padding:28px 0 0;
}

.hero-card{
    display:grid;
    grid-template-columns:minmax(0,48%) minmax(0,52%);
    min-height:365px;
    background:var(--paper);
    box-shadow:var(--shadow);
    overflow:hidden;
}

.hero-copy{
    min-width:0;
    padding:36px 26px 32px 38px;
    align-self:center;
}

.overline{
    font-family:Georgia;
    font-size:18px;
}

.hero h1{
    font-size:clamp(38px,3.15vw,48px);
    line-height:1.04;
    margin:8px 0 14px;
    width:100%;
    max-width:100%;
    white-space:normal;
    word-break:normal;
    overflow-wrap:normal;
}

.hero h1 em{
    font-style:normal;
    color:var(--rust);
}

.gold-rule{
    width:28px;
    height:2px;
    background:var(--gold);
    margin:10px 0 16px;
}

.hero p{
    max-width:480px;
    font-size:14px;
    margin:0 0 22px;
}

.hero-actions{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}

.btn{
    padding:13px 22px;
    border-radius:2px;
    font-size:11px;
    font-weight:700;
}

.primary{
    background:var(--rust);
    color:white;
}

.outline{
    border:1px solid var(--rust);
    background:#fff;
}


/* HERO PHOTO — СУРЕТТІ ҚИМАЙ ТОЛЫҚ КӨРСЕТЕДІ */

.hero-photo{
    min-width:0;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:#fffdfa;
}

.hero-photo img{
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
}


/* =====================================================
   ABOUT
===================================================== */

.about{
    display:grid;
    grid-template-columns:45% 55%;
    background:var(--paper);
    min-height:260px;
}

.about-copy{
    padding:30px 38px;
}

.about h2,
.section-title,
.dual h2{
    font-size:25px;
    margin:0;
}

.about p{
    font-size:13px;
    margin:12px 0;
}

.about-photo{
    height:260px;
    overflow:hidden;
}

.about-photo img{
    width:100%!important;
    height:260px!important;
    object-fit:cover!important;
    object-position:center!important;
}


/* =====================================================
   SECTIONS
===================================================== */

.section{
    padding:30px 0 8px;
}

.section-title{
    text-align:center;
}

.section-title.left{
    text-align:left;
}

.title-mark{
    text-align:center;
    color:var(--gold);
    font-size:10px;
    margin:4px 0 18px;
}

.cards{
    display:grid;
    gap:12px;
}

.services{
    grid-template-columns:repeat(5,1fr);
}

.service-card,
.adv-card{
    background:var(--paper);
    border:1px solid #eee6dc;
    border-radius:7px;
    box-shadow:0 5px 14px rgba(60,45,25,.07);
    padding:20px 15px;
    text-align:center;
}

.card-icon{
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    color:var(--gold);
}

.card-icon svg{
    width:38px;
    height:38px;
    fill:none;
    stroke:var(--gold);
    stroke-width:1.55;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.service-card h3,
.adv-card h3{
    font-size:14px;
    line-height:1.35;
    margin:8px 0 4px;
}

.service-card small{
    font-size:11.5px;
    line-height:1.35;
    display:block;
    font-weight:700;
}

.service-card p,
.adv-card p{
    font-size:12.5px;
    line-height:1.55;
    color:#393735;
    margin:10px 0 0;
}

.advantages-grid{
    grid-template-columns:repeat(5,1fr);
}

.round-icon{
    width:42px;
    height:42px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#b98235;
    color:#fff;
    margin:0 auto 8px;
    font-size:19px;
}

.round-icon svg{
    width:22px;
    height:22px;
    fill:none;
    stroke:#fff;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}


/* =====================================================
   BOOKS
===================================================== */

.book-stage{
    position:relative;
    padding:0 46px;
}

.books-viewport{
    overflow:hidden;
    padding:12px 0;
}

.books{
    display:flex;
    gap:20px;
    transition:transform .35s;
}

.book-card{
    flex:0 0 180px;
    background:transparent;
}

.book-card img{
    width:100%;
    height:245px;
    object-fit:contain;
    filter:drop-shadow(0 7px 7px rgba(0,0,0,.16));
}

.books-arrow{
    position:absolute;
    top:45%;
    transform:translateY(-50%);
    z-index:2;
    width:34px;
    height:34px;
    border-radius:50%;
    border:1px solid #d9c6a9;
    background:white;
    color:#444;
    font-size:22px;
}

.books-prev{
    left:2px;
}

.books-next{
    right:2px;
}

.carousel-status{
    text-align:center;
    font-size:10px;
    color:#999;
}

.book-open{
    display:block;
    width:100%;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
}

.book-open img{
    transition:transform .2s ease,filter .2s ease;
}

.book-open:hover img{
    transform:translateY(-5px);
    filter:drop-shadow(0 11px 10px rgba(0,0,0,.20));
}


/* =====================================================
   NEWS + PREVIEW
===================================================== */

.dual{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    padding:12px 0 28px;
}

.soon-box,
.preview-box{
    border:1px solid #d9bd91;
    border-radius:6px;
    background:#fffaf2;
    padding:20px 22px;
    min-height:180px;
}

.news-line{
    display:flex;
    justify-content:space-between;
    font-size:11px;
    margin:9px 0;
}

.news-line time{
    color:var(--rust);
}

.mini-btn{
    display:inline-block;
    margin-top:12px;
    border:1px solid var(--rust);
    padding:9px 14px;
    color:var(--rust);
    font-size:9px;
    font-weight:700;
}

.mini-btn.solid{
    background:#7c4c28;
    color:white;
    border-color:#7c4c28;
}

.preview-box{
    display:grid;
    grid-template-columns:1fr 45%;
    align-items:center;
}

.preview-box p{
    font-size:11px;
}

.preview-box img{
    width:100%;
    height:135px;
    object-fit:contain;
}


/* =====================================================
   FOOTER
===================================================== */

footer{
    background:#f8f2e8;
    border-top:1px solid #e7d9c4;
    padding:26px 0 12px;
}

.footer-grid{
    display:grid;
    grid-template-columns:1.25fr .65fr 1fr 1.3fr;
    gap:38px;
}

.footer-logo .custom-logo{
    width:210px!important;
    max-width:210px!important;
}

.footer-grid h4{
    font-size:10px;
    margin:0 0 8px;
}

.footer-grid a,
.footer-grid span{
    display:block;
    font-size:10px;
    margin:4px 0;
    color:#383532;
}

.socials{
    display:flex;
    gap:10px;
    margin-top:12px;
}

.socials b{
    width:30px;
    height:30px;
    border:1px solid #cda66c;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:var(--rust);
}

.copyright{
    border-top:1px solid #e5d7c4;
    margin-top:20px;
    padding-top:12px;
    font-size:9px;
    display:flex;
    justify-content:space-between;
}

.copyright span{
    float:right;
}


/* =====================================================
   PDF BOOK READER
===================================================== */

.book-modal{
    position:fixed;
    inset:0;
    z-index:10000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:10px;
}

.book-modal.is-open{
    display:flex;
}

.book-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(10,14,18,.84);
    backdrop-filter:blur(3px);
}

.book-reader{
    position:relative;
    z-index:1;
    width:min(1500px,99vw);
    height:min(97vh,1080px);
    display:flex;
    flex-direction:column;
    background:transparent;
    overflow:visible;
}

.book-close{
    position:absolute;
    right:8px;
    top:3px;
    z-index:40;
    width:46px;
    height:46px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.97);
    color:#222;
    font-size:31px;
    line-height:1;
    cursor:pointer;
    box-shadow:0 5px 20px rgba(0,0,0,.25);
}

.reader-head{
    min-height:50px;
    padding:6px 190px 6px 64px;
    display:flex;
    gap:14px;
    justify-content:center;
    align-items:center;
    color:#fff;
    text-shadow:0 1px 2px rgba(0,0,0,.5);
    font-family:Georgia,'Times New Roman',serif;
}

.reader-head strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:68%;
    font-size:18px;
}

.reader-head span{
    font-family:Arial,sans-serif;
    font-size:12px;
    opacity:.9;
    white-space:nowrap;
}

.reader-tools{
    position:absolute;
    right:66px;
    top:6px;
    z-index:35;
    display:flex;
    gap:7px;
    align-items:center;
}

.reader-tool{
    height:38px;
    min-width:38px;
    padding:0 11px;
    border:1px solid rgba(255,255,255,.28);
    border-radius:19px;
    background:rgba(255,255,255,.95);
    color:#222;
    font:700 14px/1 Arial,sans-serif;
    cursor:pointer;
    box-shadow:0 3px 14px rgba(0,0,0,.18);
}

.reader-tool:hover{
    background:#fff;
}

.reader-tool:disabled{
    opacity:.38;
    cursor:default;
}

.reader-zoom-value{
    min-width:50px;
    text-align:center;
    color:#fff;
    font:600 11px Arial,sans-serif;
    text-shadow:0 1px 2px rgba(0,0,0,.45);
}

.reader-page{
    position:relative;
    min-height:0;
    flex:1;
    display:grid;
    grid-template-columns:58px minmax(0,1fr) 58px;
    align-items:center;
}

.reader-stage{
    position:relative;
    height:100%;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:auto;
    overscroll-behavior:contain;
    padding:6px 14px 12px;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.5) transparent;
}

.reader-canvas-wrap{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:min-content;
    min-height:min-content;
    margin:auto;
}

.reader-canvas-wrap canvas{
    display:block;
    background:#fff;
    box-shadow:0 18px 38px rgba(0,0,0,.34);
    max-width:none;
    max-height:none;
}

.reader-arrow{
    width:46px;
    height:46px;
    margin:auto;
    border:1px solid rgba(211,190,160,.85);
    background:rgba(255,255,255,.97);
    border-radius:50%;
    font-size:30px;
    cursor:pointer;
    z-index:18;
    box-shadow:0 4px 15px rgba(0,0,0,.18);
}

.reader-arrow:disabled{
    opacity:.25;
    cursor:default;
}

.reader-loading,
.reader-empty{
    position:absolute;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:30px;
    color:#fff;
    text-shadow:0 1px 2px rgba(0,0,0,.5);
    z-index:30;
}

.reader-loading.show,
.reader-empty.show{
    display:flex;
}

body.book-reader-open{
    overflow:hidden;
}

.reader-cover{
    display:none;
    max-width:calc(100vw - 180px);
    max-height:calc(100dvh - 88px);
    width:auto;
    height:auto;
    object-fit:contain;
    background:#fff;
    box-shadow:0 18px 42px rgba(0,0,0,.38);
    border-radius:2px;
}


/* =====================================================
   COST CALCULATION FORM
===================================================== */

.cost-open{
    border:0;
    cursor:pointer;
    font-family:inherit;
}

.cost-modal{
    position:fixed;
    inset:0;
    z-index:1200;
    display:none;
}

.cost-modal.open{
    display:block;
}

.cost-backdrop{
    position:absolute;
    inset:0;
    background:rgba(15,18,21,.68);
    backdrop-filter:blur(3px);
}

.cost-dialog{
    position:relative;
    width:min(900px,calc(100% - 34px));
    max-height:calc(100dvh - 40px);
    overflow:auto;
    margin:20px auto;
    background:#fffdfa;
    border:1px solid #e5d5bd;
    border-radius:12px;
    box-shadow:0 24px 70px rgba(0,0,0,.28);
    padding:34px 38px 38px;
}

.cost-close{
    position:sticky;
    float:right;
    top:0;
    z-index:2;
    width:38px;
    height:38px;
    border:1px solid #ddc9ac;
    border-radius:50%;
    background:#fffdfa;
    color:#6e4b2d;
    font-size:25px;
    line-height:1;
    cursor:pointer;
}

.cost-head{
    padding-right:48px;
}

.cost-kicker{
    font-size:10px;
    letter-spacing:.18em;
    font-weight:800;
    color:var(--gold);
}

.cost-head h2{
    font-size:31px;
    margin:5px 0 10px;
    color:#1d2024;
}

.cost-head>p{
    font-size:13px;
    max-width:760px;
    color:#4e4a45;
    margin:0 0 15px;
}

.cost-note{
    display:flex;
    gap:12px;
    padding:14px 16px;
    background:#faf3e7;
    border-left:3px solid var(--gold);
    border-radius:5px;
}

.cost-note>span{
    flex:0 0 24px;
    width:24px;
    height:24px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--gold);
    color:#fff;
    font-family:Georgia;
    font-weight:700;
}

.cost-note p{
    font-size:11.5px;
    line-height:1.6;
    margin:0;
    color:#514a42;
}

.cost-form{
    margin-top:22px;
}

.cost-section{
    padding:19px 0;
    border-top:1px solid #eadfce;
}

.cost-section h3{
    font:600 17px Georgia,'Times New Roman',serif;
    margin:0 0 13px;
    color:#292621;
}

.cost-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:13px 16px;
}

.field,
.choice-grid label{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.field.wide{
    grid-column:1/-1;
}

.field>span,
.choice-grid label>span{
    font-size:11px;
    font-weight:700;
    color:#403c37;
}

.cost-form input,
.cost-form textarea,
.cost-form select{
    width:100%;
    border:1px solid #dcd2c5;
    border-radius:6px;
    background:#fff;
    padding:11px 12px;
    font:13px Arial,Helvetica,sans-serif;
    color:#242424;
    outline:none;
    transition:.18s;
}

.cost-form textarea{
    resize:vertical;
    min-height:78px;
}

.cost-form input:focus,
.cost-form textarea:focus,
.cost-form select:focus{
    border-color:#b9812d;
    box-shadow:0 0 0 3px rgba(185,129,45,.11);
}

.choice-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:13px 16px;
}

.cost-privacy{
    font-size:10px;
    color:#777069;
    margin:2px 0 13px;
}

.cost-submit{
    display:block;
    width:100%;
    border:0;
    border-radius:5px;
    background:var(--rust);
    color:#fff;
    padding:15px 20px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.05em;
    cursor:pointer;
    transition:.18s;
}

.cost-submit:hover{
    filter:brightness(.94);
    transform:translateY(-1px);
}

body.cost-lock{
    overflow:hidden;
}


/* =====================================================
   RESPONSIVE — TABLET
===================================================== */

@media(max-width:1050px){

    .brand-shell{
        flex-basis:260px;
    }

    .custom-logo{
        width:245px!important;
        max-width:245px!important;
    }

    .menu a{
        padding:10px 9px;
        font-size:11px;
    }

    .menu i{
        font-size:15px;
    }

    .services,
    .advantages-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .service-card p,
    .adv-card p{
        font-size:12px;
    }

    .service-card h3,
    .adv-card h3{
        font-size:13.5px;
    }
}


/* =====================================================
   RESPONSIVE — MOBILE / TABLET
===================================================== */

@media(max-width:860px){

    .nav{
        min-height:78px;
    }

    .brand-shell{
        height:68px;
        flex:1;
    }

    .custom-logo{
        width:205px!important;
        max-width:205px!important;
        max-height:64px!important;
    }

    .menu-toggle{
        display:block;
        order:2;
    }

    .langs{
        order:3;
    }

    .menu{
        display:none;
        position:absolute;
        top:78px;
        left:0;
        right:0;
        background:#fffaf4;
        padding:12px 20px;
        box-shadow:var(--shadow);
        flex-direction:column;
        align-items:stretch;
    }

    .menu.open{
        display:flex;
    }

    .menu:before{
        display:none;
    }

    .menu a{
        padding:12px;
    }

    .menu a:not(:last-child):after{
        height:1px;
        width:auto;
        left:10px;
        right:10px;
        top:auto;
        bottom:0;
    }

    .hero-card,
    .about{
        grid-template-columns:1fr;
    }

    .hero-copy{
        order:2;
        padding:28px 24px;
    }

    .hero-photo{
        height:auto;
        min-height:0;
    }

    .hero-photo img{
        width:100%!important;
        height:auto!important;
        max-height:none!important;
        object-fit:contain!important;
    }

    .hero h1{
        font-size:45px;
    }

    .about-photo{
        height:260px;
    }

    .about-photo img{
        height:260px!important;
    }

    .services,
    .advantages-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .footer-grid{
        grid-template-columns:1fr 1fr;
    }
}


/* =====================================================
   PDF READER MOBILE
===================================================== */

@media(max-width:700px){

    .book-modal{
        padding:0;
    }

    .book-reader{
        width:100vw;
        height:100dvh;
        max-height:none;
    }

    .book-close{
        right:8px;
        top:6px;
        width:42px;
        height:42px;
    }

    .reader-head{
        min-height:52px;
        padding:7px 54px 7px 10px;
        justify-content:flex-start;
    }

    .reader-head strong{
        max-width:62%;
        font-size:14px;
    }

    .reader-head span{
        font-size:10px;
    }

    .reader-tools{
        right:52px;
        top:7px;
        gap:4px;
    }

    .reader-tool{
        height:34px;
        min-width:34px;
        padding:0 8px;
        font-size:13px;
    }

    .reader-tool.reader-fit{
        display:none;
    }

    .reader-zoom-value{
        display:none;
    }

    .reader-page{
        grid-template-columns:40px minmax(0,1fr) 40px;
    }

    .reader-stage{
        padding:4px 2px 8px;
    }

    .reader-arrow{
        width:34px;
        height:34px;
        font-size:23px;
    }

    .book-open:hover img{
        transform:none;
    }

    .reader-cover{
        max-width:calc(100vw - 86px);
        max-height:calc(100dvh - 68px);
    }

    .cost-dialog{
        width:calc(100% - 16px);
        max-height:calc(100dvh - 16px);
        margin:8px auto;
        padding:22px 17px 24px;
        border-radius:10px;
    }

    .cost-head{
        padding-right:34px;
    }

    .cost-head h2{
        font-size:25px;
        line-height:1.1;
    }

    .cost-head>p{
        font-size:12px;
    }

    .cost-note{
        padding:12px;
        gap:9px;
    }

    .cost-note p{
        font-size:11px;
    }

    .cost-grid,
    .choice-grid{
        grid-template-columns:1fr;
    }

    .field.wide{
        grid-column:auto;
    }

    .cost-section{
        padding:16px 0;
    }

    .cost-form input,
    .cost-form textarea,
    .cost-form select{
        font-size:16px;
    }

    .cost-close{
        width:34px;
        height:34px;
        font-size:22px;
    }

    .cost-submit{
        font-size:12px;
        padding:15px;
    }
}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media(max-width:600px){

    .wrap{
        width:calc(100% - 22px);
    }

    .nav{
        gap:5px;
    }

    .brand-shell{
        max-width:180px;
    }

    .custom-logo{
        width:175px!important;
        max-width:175px!important;
    }

    .langs{
        gap:2px;
    }

    .langs button{
        font-size:9px;
        padding:3px;
    }

    .hero{
        padding-top:12px;
    }

    .hero-copy{
        padding:25px 20px;
    }

    .overline{
        font-size:15px;
    }

    .hero h1{
        font-size:36px;
        line-height:1.03;
    }

    .hero p{
        font-size:12px;
    }

    .btn{
        width:100%;
        text-align:center;
    }

    .about-copy{
        padding:24px 20px;
    }

    .about-photo{
        height:210px;
    }

    .about-photo img{
        height:210px!important;
    }

    .services,
    .advantages-grid{
        grid-template-columns:1fr;
    }

    .service-card,
    .adv-card{
        padding:17px;
    }

    .service-card p,
    .adv-card p{
        font-size:13px;
    }

    .service-card h3,
    .adv-card h3{
        font-size:14.5px;
    }

    .service-card small{
        font-size:12px;
    }

    .section{
        padding-top:24px;
    }

    .book-stage{
        padding:0 35px;
    }

    .book-card img{
        height:280px;
    }

    .dual{
        grid-template-columns:1fr;
    }

    .preview-box{
        grid-template-columns:1fr;
    }

    .preview-box img{
        margin-top:10px;
    }

    .footer-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .footer-logo .custom-logo{
        width:180px!important;
        max-width:180px!important;
    }

    .copyright{
        display:block;
        line-height:1.8;
    }

    .copyright span{
        display:block;
        float:none;
    }

    .news-line{
        gap:10px;
    }

    .section-title,
    .about h2,
    .dual h2{
        font-size:22px;
    }
}


@media(max-width:430px){

    .reader-head strong{
        max-width:48%;
        font-size:13px;
    }

    .reader-tools{
        right:50px;
    }

    .reader-tool{
        height:32px;
        min-width:32px;
        padding:0 7px;
    }

    .reader-page{
        grid-template-columns:34px minmax(0,1fr) 34px;
    }

    .reader-arrow{
        width:30px;
        height:30px;
        font-size:21px;
    }

    .reader-cover{
        max-width:calc(100vw - 72px);
    }
}

/* HERO және БІЗ ТУРАЛЫ — БІРДЕЙ БЛОК */
@media (min-width:861px){

    .hero-card,
    .about{
        grid-template-columns:48% 52% !important;
        min-height:365px !important;
    }

    .hero-photo,
    .about-photo{
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        overflow:hidden !important;
    }

    .hero-photo img,
    .about-photo img{
        width:100% !important;
        height:100% !important;
        display:block !important;
    }

    .hero-photo img{
        object-fit:contain !important;
    }

    .about-photo img{
        object-fit:cover !important;
    }
}/* ЕКІ ФОТО БЕТТЕ АВТОМАТТЫ ТҮРДЕ БІРДЕЙ ӨЛШЕМДЕ */
@media (min-width:861px){

    /* Екі бөлімнің бөлінуі бірдей */
    .hero-card,
    .about{
        grid-template-columns:48% 52% !important;
    }

    /* Екі фотоға бірдей терезе */
    .hero-photo,
    .about-photo{
        width:100% !important;
        height:auto !important;
        aspect-ratio:3 / 2 !important;
        overflow:hidden !important;
        align-self:center !important;
    }

    /* Фото қандай размерде жүктелсе де,
       бетте бірдей блокты толтырады */
    .hero-photo img,
    .about-photo img{
        width:100% !important;
        height:100% !important;
        max-width:none !important;
        max-height:none !important;
        display:block !important;
        object-fit:cover !important;
        object-position:center !important;
    }
}
/* =====================================================
   v4.7 — ЖУЫРДА + ПІКІРЛЕР
   Соңғы v4.6 стилінің үстіне қосылған блоктар
===================================================== */
.dual{align-items:stretch}
.soon-box,.reviews-box{border:1px solid #d9bd91;border-radius:6px;background:#fffaf2;padding:20px 22px;min-height:230px}
.soon-box{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:24px;align-items:center}
.soon-copy{min-width:0;align-self:start}
.soon-book-title{font:500 22px/1.22 Georgia,'Times New Roman',serif;color:#1c2430;margin:4px 0 8px;max-width:100%;overflow-wrap:anywhere}
.soon-book-author{font-size:11.5px;color:#6b6258;margin:0;min-height:1.2em}
.soon-cover{height:190px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.soon-cover img{width:100%;height:100%;object-fit:contain;object-position:center;filter:drop-shadow(0 7px 7px rgba(0,0,0,.14))}
.reviews-box{display:flex;flex-direction:column;position:relative;overflow:hidden}
.review-stage{position:relative;flex:1;min-height:145px;padding:2px 18px 2px 30px;display:flex;flex-direction:column;justify-content:center}
.review-quote{position:absolute;left:0;top:-8px;font:56px/1 Georgia,'Times New Roman',serif;color:rgba(185,129,45,.32)}
.review-typing{font:400 15px/1.68 Georgia,'Times New Roman',serif;color:#242321;margin:0;min-height:76px}
.review-author{font-size:11px;font-weight:700;color:var(--rust);margin:9px 0 0;min-height:17px;opacity:0;transform:translateY(3px);transition:opacity .25s ease,transform .25s ease}
.review-author.show{opacity:1;transform:none}
.review-caret{position:absolute;right:10px;bottom:15px;width:2px;height:16px;background:var(--gold);animation:asylCaret .8s steps(1,end) infinite}
@keyframes asylCaret{50%{opacity:0}}
@media(max-width:860px){.soon-box{grid-template-columns:minmax(0,1fr) 150px}.soon-cover{height:175px}.soon-box,.reviews-box{min-height:220px}}
@media(max-width:600px){.soon-box,.reviews-box{padding:20px;min-height:0}.soon-box{grid-template-columns:minmax(0,1fr) 118px;gap:14px}.soon-cover{height:155px}.soon-book-title{font-size:19px}.review-stage{min-height:170px;padding-left:26px}.review-typing{font-size:14px;min-height:100px}.review-quote{font-size:48px}}


/* =====================================================
   v4.8 — ЖУЫРДА + ПІКІРЛЕР: ЕКІ БЛОК БІРДЕЙ РАМКАДА
===================================================== */
#soon.dual{
    align-items:stretch;
}
#soon > .soon-box,
#soon > .reviews-box{
    width:100%;
    height:100%;
    border:1px solid #d9bd91;
    border-radius:6px;
    background:#fffaf2;
    padding:20px 22px;
    min-height:230px;
    box-sizing:border-box;
}
#soon > .soon-box{
    display:grid;
    grid-template-columns:minmax(0,1fr) 170px;
    gap:24px;
    align-items:center;
}
#soon > .reviews-box{
    display:flex;
    flex-direction:column;
}
@media(max-width:860px){
    #soon > .soon-box{grid-template-columns:minmax(0,1fr) 150px}
}
@media(max-width:600px){
    #soon > .soon-box,
    #soon > .reviews-box{min-height:0;padding:20px}
    #soon > .soon-box{grid-template-columns:minmax(0,1fr) 118px;gap:14px}
}/* =====================================================
   ЖУЫРДА — КІТАП АҚПАРАТЫ + МҰҚАБА
===================================================== */

#soon > .soon-box{
    display:grid;
    grid-template-columns:minmax(0,1fr) 220px;
    gap:36px;
    align-items:stretch;
}

#soon .soon-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

#soon .soon-label{
    margin:4px 0 8px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
    color:var(--rust);
}

#soon .soon-book-title{
    font:500 23px/1.25 Georgia,'Times New Roman',serif;
    color:#1c2430;
    margin:0 0 15px;
}

#soon .soon-meta{
    display:flex;
    flex-direction:column;
    gap:5px;
}

#soon .soon-meta p{
    margin:0;
    font-size:12px;
    color:#4d4842;
}

#soon .soon-meta strong{
    color:#242321;
}

#soon .soon-cover{
    width:100%;
    height:100%;
    min-height:240px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:18px;
    box-sizing:border-box;
    overflow:hidden;
}

#soon .soon-cover img{
    display:block;

    width:auto !important;
    height:auto !important;

    max-width:100% !important;
    max-height:220px !important;

    object-fit:contain !important;
    object-position:center !important;

    margin:auto;

    filter:drop-shadow(0 8px 10px rgba(0,0,0,.16));
}

@media(max-width:860px){
    #soon > .soon-box{
        grid-template-columns:minmax(0,1fr) 180px;
        gap:22px;
    }

    #soon .soon-cover{
        min-height:210px;
        padding:14px;
    }

    #soon .soon-cover img{
        max-height:190px !important;
    }
}

@media(max-width:600px){
    #soon > .soon-box{
        grid-template-columns:minmax(0,1fr) 125px;
        gap:14px;
    }

    #soon .soon-book-title{
        font-size:19px;
    }

    #soon .soon-cover{
        min-height:170px;
        padding:8px;
    }

    #soon .soon-cover img{
        max-height:155px !important;
    }
}
/* =====================================================
   ЖУЫРДА + ПІКІРЛЕР — FINAL
===================================================== */

/* ЕКІ БЛОК */
#soon.dual{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    align-items:stretch;
}

#soon > .soon-box,
#soon > .reviews-box{
    width:100%;
    min-width:0;
    min-height:278px;
    box-sizing:border-box;

    border:1px solid #d9bd91;
    border-radius:6px;
    background:#fffaf2;

    padding:20px 22px;
}


/* =====================================================
   СОЛ ЖАҚ — ЖУЫРДА
===================================================== */

#soon > .soon-box{
    display:grid;
    grid-template-columns:minmax(0,1fr) 190px;
    gap:24px;
    align-items:stretch;
}

#soon .soon-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
}

#soon .soon-copy h2{
    margin:0;
}

#soon .soon-label{
    margin:3px 0 8px;

    color:var(--rust);
    font-size:11px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:.10em;
}

#soon .soon-book-title{
    margin:0 0 15px;

    color:#18202a;
    font:500 21px/1.2 Georgia, "Times New Roman", serif;

    overflow-wrap:anywhere;
}

#soon .soon-meta{
    display:flex;
    flex-direction:column;
    gap:5px;
}

#soon .soon-meta p{
    margin:0;

    font-size:11px;
    line-height:1.4;
    color:#4d4842;
}

#soon .soon-meta strong{
    color:#24211e;
    font-weight:700;
    margin-right:4px;
}


/* =====================================================
   МҰҚАБА
===================================================== */

#soon .soon-cover{
    width:100%;
    height:100%;
    min-height:230px;

    box-sizing:border-box;
    padding:12px;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;
}

#soon .soon-cover img{
    display:block;

    width:auto !important;
    height:auto !important;

    max-width:100% !important;
    max-height:230px !important;

    object-fit:contain !important;
    object-position:center center !important;

    margin:auto;

    filter:drop-shadow(0 7px 9px rgba(0,0,0,.15));
}


/* =====================================================
   ОҢ ЖАҚ — ПІКІРЛЕР
===================================================== */

#soon > .reviews-box{
    display:flex;
    flex-direction:column;
}

#soon .reviews-box h2{
    margin:0;
}

#soon .review-stage{
    position:relative;
    flex:1;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:8px 26px 4px;
}

#soon .review-quote{
    position:absolute;
    top:2px;
    left:0;

    font:700 38px/1 Georgia, "Times New Roman", serif;
    color:#d9bd91;
}

#soon .review-typing{
    margin:0;

    font:400 14px/1.55 Georgia, "Times New Roman", serif;
    color:#24211e;
}

#soon .review-author{
    margin:12px 0 0;

    font-size:11px;
    font-weight:700;
    color:#8b6a3e;
}


/* =====================================================
   ПЛАНШЕТ
===================================================== */

@media(max-width:860px){

    #soon.dual{
        grid-template-columns:1fr;
        gap:14px;
    }

    #soon > .soon-box,
    #soon > .reviews-box{
        min-height:240px;
    }

    #soon > .soon-box{
        grid-template-columns:minmax(0,1fr) 180px;
        gap:20px;
    }

    #soon .soon-cover{
        min-height:210px;
        padding:10px;
    }

    #soon .soon-cover img{
        max-height:205px !important;
    }
}


/* =====================================================
   ТЕЛЕФОН
===================================================== */

@media(max-width:600px){

    #soon > .soon-box,
    #soon > .reviews-box{
        padding:18px;
        min-height:0;
    }

    #soon > .soon-box{
        grid-template-columns:minmax(0,1fr) 115px;
        gap:12px;
    }

    #soon .soon-book-title{
        font-size:18px;
        margin-bottom:12px;
    }

    #soon .soon-meta{
        gap:3px;
    }

    #soon .soon-meta p{
        font-size:10px;
    }

    #soon .soon-cover{
        min-height:175px;
        padding:6px;
    }

    #soon .soon-cover img{
        max-height:165px !important;
    }

    #soon .review-stage{
        min-height:150px;
        padding:8px 18px 4px 24px;
    }

    #soon .review-typing{
        font-size:13px;
    }
}