/*
 * ruangcoding.id - Lapisan responsive untuk tema.
 * Dimuat paling akhir supaya bisa menimpa style bawaan.
 * Breakpoint: 991px (tablet), 767px (ponsel besar), 480px (ponsel kecil)
 */

/* ---- Dasar: gambar & media tidak boleh melebihi layar ---------------- */
img, video, iframe, embed, object { max-width: 100%; }
img { height: auto; }
table { max-width: 100%; }

/* ---- Iklan popup ------------------------------------------------------ */
.popup-iklan { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, .65); display: flex; align-items: center; justify-content: center; padding: 16px; }
.popup-iklan[hidden] { display: none; }
.popup-iklan-isi { position: relative; max-width: 640px; width: 100%; background: #fff; border-radius: 6px; box-shadow: 0 10px 40px rgba(0, 0, 0, .4); }
.popup-iklan-isi img { display: block; width: 100%; border-radius: 6px; }
.popup-iklan-tutup { position: absolute; top: -14px; right: -14px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #9A0002; color: #fff; font-size: 20px; line-height: 32px; cursor: pointer; }

/* ---- Pita mode demo --------------------------------------------------- */
.demo-banner-publik { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998; padding: 8px 12px; background: #222; color: #fff; text-align: center; font-size: 13px; }
.demo-banner-publik b { color: #ffd54f; }

/* ======================================================================
 * Slider utama beranda
 * Desktop (>=992px): efek buku (bookblock). Di bawah itu: carousel geser (scroll-snap)
 * ==================================================================== */
.bb-custom-wrapper { max-width: 100%; }
@media (max-width: 991px) {
    .main-slider, .bb-custom-wrapper, .bb-bookblock { width: 100% !important; height: auto !important; box-sizing: border-box; }
    .bb-custom-wrapper { overflow: hidden; border: 0; }
    .bb-bookblock { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; position: relative; }
    .bb-item { position: relative !important; display: block !important; flex: 0 0 100%; width: 100% !important; scroll-snap-align: start; height: auto !important; }
    .bb-custom-content { height: auto; background-size: cover; }
    .slide-inner { padding: 20px 16px 24px; text-align: left; }
    .slide-inner [class*="span"] { float: none !important; width: 100% !important; margin: 0 0 12px !important; display: block; }
    .book-holder { text-align: center; margin-bottom: 12px !important; }
    .book-holder img { max-width: 60%; height: auto; }
    .book-detail table { width: 100%; }
    .cap-holder a { display: inline-block; }
    nav.bb-custom-nav, .slider-bottom { display: none; }
}

/* ======================================================================
 * Tata letak umum untuk tablet & ponsel
 * ==================================================================== */
@media (max-width: 991px) {
    .container, .container-fluid { max-width: 100%; box-sizing: border-box; }
    #content-holder.container { width: auto !important; margin-left: 16px !important; margin-right: 16px !important; }
}

@media (max-width: 767px) {
    body { overflow-x: hidden; }
    .container, .container-fluid, .container-fluid.container { width: auto !important; }
    #content-holder.container, section.container { margin-left: 12px !important; margin-right: 12px !important; }

    /* Kolom Bootstrap 2: selalu bertumpuk */
    [class*="span"], .row-fluid [class*="span"] { float: none !important; display: block; width: 100% !important; margin-left: 0 !important; box-sizing: border-box; }

    /* Tabel di dalam konten boleh digeser mendatar, tidak merusak layout */
    #content-holder table, .checkout-holder table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Formulir */
    #content-holder input[type="text"], #content-holder input[type="password"], #content-holder input[type="email"],
    #content-holder input[type="tel"], #content-holder input[type="number"], #content-holder select, #content-holder textarea {
        width: 100% !important; max-width: 100%; box-sizing: border-box;
    }
    .control-group .controls, .control-group .control-label { float: none; width: 100%; margin-left: 0; text-align: left; }

    /* Header */
    #main-header .container-fluid { padding: 0; }
    .top-nav-bar .top-nav li { float: none; display: inline-block; }
    .search-bar { width: 100%; }
    .search-bar input[type="text"] { width: 68%; box-sizing: border-box; }
    #demo-header, .e-commerce-list { width: 100%; }

    /* Teks konten yang panjang tidak boleh melebar */
    h1, h2, h3, h4, p, td, li, a { overflow-wrap: break-word; }
    pre, code { white-space: pre-wrap; }
}

/* Iklan samping (slider8) di ponsel: tidak dipakai slider, tampil bertumpuk */
@media (max-width: 767px) {
    .slider8 .iklan { margin: 0 auto 12px; max-width: 100%; }
}

/* Tautan chat WhatsApp di footer */
a.wa-chat { color: #fff; font-weight: bold; text-decoration: underline; }

/* Tombol WhatsApp (footer) */
a.wa-btn { display: inline-flex; align-items: center; gap: 8px; background: #25D366; color: #fff !important; padding: 6px 14px 6px 10px; border-radius: 4px; font-weight: bold; font-size: 13px; text-decoration: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
a.wa-btn:hover { background: #1ebe5b; text-decoration: none; }

/* ======================================================================
 * Ponsel: slider beranda terbaca jelas & daftar produk 2 kolom
 * ==================================================================== */
@media (max-width: 991px) {
    /* Latar atas bermotif (asli); pita hijau hanya membungkus deskripsi di bawah tombol beli */
    .bb-custom-content { background: #fff url(../images/flower-bg.jpg) no-repeat center top !important; background-size: cover !important; }
    .bb-custom-wrapper { background: #fff !important; }
    .slide-inner, .slide-inner p, .slide-inner td, .book-detail .title, .book-detail .title a, .book-detail h2, .book-holder .price { color: #222 !important; }
    .book-detail h2 { font-size: 24px; line-height: 1.25; }
    .book-detail .title a { color: #7a9a14 !important; }
    .book-holder .price, .book-holder .detailharga { font-weight: bold; }
    .slide-inner { padding-bottom: 0; }
    .cap-holder { background: #98b827; margin: 18px -16px 0; padding: 16px 16px 22px; border-top: 0; }
    .cap-holder p, .cap-holder a { color: #fff !important; }
}

@media (max-width: 767px) {
    /* Kartu produk: dua kolom */
    .row-fluid section.features-books2 { display: flex; flex-wrap: wrap; justify-content: space-between; }
    .row-fluid section.features-books2 figure.slide2 {
        display: inline-block !important; vertical-align: top; float: none !important;
        width: calc(50% - 5px) !important; margin: 0 0 10px !important; height: auto !important;
        padding: 10px 8px 12px !important; box-sizing: border-box; text-align: center; position: relative;
        background: #fff; border: 1px solid #e5e5e5; border-radius: 4px;
    }
    .row-fluid section.features-books2 figure.slide2 img { width: 100% !important; max-width: 140px; height: auto !important; margin: 0 auto 6px; }
    .row-fluid section.features-books2 figure.slide2 .title {
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        height: 2.8em !important; line-height: 1.4em !important; margin: 4px 0 8px !important; font-size: 13px;
    }
    .row-fluid section.features-books2 figure.slide2 .cart-price { display: flex; flex-direction: column-reverse; align-items: center; gap: 6px; }
    .row-fluid section.features-books2 figure.slide2 .cart-price a { display: block; width: 100%; text-align: center; box-sizing: border-box; }
    .row-fluid section.features-books2 figure.slide2 .detailharga, .row-fluid section.features-books2 figure.slide2 .cart-price > div { font-size: 14px; font-weight: bold; }
    .row-fluid section.features-books2 figure.slide2 #diskon6 { position: absolute; top: 6px; right: 6px; margin: 0 !important; float: none !important; }
}

@media (max-width: 767px) {
    /* Tooltip hover tidak berguna di layar sentuh dan membuat halaman bisa digeser ke samping */
    [data-tooltip]:before, [data-tooltip]:after { display: none !important; }
    .row-fluid section.features-books2 figure.slide2 .price { float: none; border-left: 0; padding-left: 0; margin-top: 0; font-size: 15px; font-weight: bold; }
    .row-fluid section.features-books2 figure.slide2 .cart-price { overflow: visible; }
}

@media (max-width: 767px) {
    .row-fluid section.features-books2 figure.slide2 .price3 { float: none; display: block; border-left: 0 !important; padding: 0 !important; margin: 0 !important; font-size: 15px; font-weight: bold; text-align: center; }
}

@media (max-width: 991px) {
    .book-holder .price, .book-holder .detailharga, .book-holder > span { float: none !important; display: block; text-align: center; margin: 8px 0 0 !important; padding: 0 !important; border: 0 !important; }
}

/* ======================================================================
 * Menu atas di ponsel: tombol "Menu" yang membuka daftar menu
 * ==================================================================== */
.nav-toggle { display: none; }
@media (max-width: 767px) {
    .nav-toggle {
        display: block; width: 100%; text-align: left; background: #222; color: #fff; border: 0;
        padding: 12px 16px; font-size: 16px; cursor: pointer;
    }
    .top-nav-bar { padding: 0; }
    .top-nav-bar ul.top-nav { display: none; margin: 0; padding: 0; background: #2b2b2b; }
    .top-nav-bar ul.top-nav.open { display: block; }
    .top-nav-bar ul.top-nav li { display: block; float: none; border-top: 1px solid #3a3a3a; }
    .top-nav-bar ul.top-nav li a { display: block; padding: 11px 16px; }
    /* Keranjang: baris ringkas selebar layar */
    .top-nav-bar .e-commerce-list { padding: 8px 12px; }
    .top-nav-bar .c-btn { text-align: center; }
    #demo-header { width: 100%; }
    #cart-link { display: block; text-align: center; }
}

/* Halaman konten (cara pembelian, profil, blog): gambar tidak melayang di samping teks */
@media (max-width: 767px) {
    .b-post img[style*="float"], .b-post img[align], #content-holder article img[style*="float"], #content-holder article img[align] {
        float: none !important; display: block; margin: 0 auto 14px !important; max-width: 100%; height: auto !important;
    }
    .b-post ul, .b-post ol, #content-holder article ul, #content-holder article ol { padding-left: 22px; }
    .b-post table, #content-holder article table { display: block; overflow-x: auto; }
}

@media (max-width: 767px) {
    /* Gambar ilustrasi di halaman konten: di atas teks, tidak melayang di sampingnya */
    img.zalimage, img.zalimage1, img.zalimage2, img.zalimagetesti { float: none !important; display: block; margin: 0 auto 14px !important; max-width: 100%; height: auto; }
    img.zalimagetesti { margin: 0 0 8px !important; }
    /* Menu atas: butir menu selebar layar */
    .top-nav-bar ul.top-nav, .top-nav-bar ul.top-nav li, .top-nav-bar ul.top-nav li a { width: 100% !important; box-sizing: border-box; }
}

@media (max-width: 767px) {
    .image2, .image1, .image3 { float: none !important; width: auto !important; margin: 0 0 12px !important; text-align: center; }
}