/* =========================================
   PREMIUM UI ENHANCEMENT (Deskripsi asli tetap dipertahankan)
========================================= */

html,
body{
    overflow-x:hidden;
}

body{
    min-height:100vh;
    background:
        radial-gradient(circle at top left, rgba(5,150,105,.04), transparent 30%),
        radial-gradient(circle at bottom right, rgba(15,118,110,.04), transparent 30%),
        var(--bg);
}

/* =========================================
   CONTAINER
========================================= */
.container-app{
    width:100%;
    max-width:1280px;
    margin-inline:auto;
    padding-inline:1.25rem;
}

/* =========================================
   PREMIUM NAVBAR
========================================= */
.navbar-blur{
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    background: rgba(255,255,255,.82);

    border-bottom:1px solid rgba(226,232,240,.7);

    box-shadow:
        0 8px 32px rgba(15,23,42,.04);
}

.nav-search{
    width:100%;

    background:#F8FAFC;

    border:1px solid #E2E8F0;

    border-radius:1.25rem;

    padding:14px 18px;

    transition:all .3s ease;
}

.nav-search:focus{
    border-color:#10B981;

    background:white;

    box-shadow:
        0 0 0 5px rgba(16,185,129,.12);
}

.nav-icon-btn{
    width:46px;
    height:46px;

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

    border-radius:1rem;

    background:#F8FAFC;

    border:1px solid #E2E8F0;

    transition:all .25s ease;
}

.nav-icon-btn:hover{
    background:#ECFDF5;
    border-color:#A7F3D0;
    color:#047857;
    transform:translateY(-2px);
}

/* =========================================
   MOBILE DRAWER
========================================= */
.mobile-drawer{
    position:fixed;
    inset:0;

    z-index:70;

    background:rgba(15,23,42,.45);

    opacity:0;
    visibility:hidden;

    transition:all .3s ease;
}

.mobile-drawer.active{
    opacity:1;
    visibility:visible;
}

.mobile-drawer-content{
    position:absolute;
    top:0;
    left:0;

    width:88%;
    max-width:360px;
    height:100%;

    background:white;

    padding:1.5rem;

    overflow-y:auto;

    transform:translateX(-100%);

    transition:all .35s ease;

    border-top-right-radius:2rem;
    border-bottom-right-radius:2rem;

    box-shadow:
        0 20px 60px rgba(0,0,0,.15);
}

.mobile-drawer.active .mobile-drawer-content{
    transform:translateX(0);
}
box-shadow:
0 0 80px rgba(16,185,129,.25);
/* =========================================
   PREMIUM CARD
========================================= */
.card-premium{
    background:white;

    border:1px solid rgba(226,232,240,.8);

    border-radius:2rem;

    overflow:hidden;

    transition:all .35s ease;

    box-shadow:
        0 10px 30px rgba(15,23,42,.05);
}

.card-premium:hover{
    transform:translateY(-5px);

    border-color:#A7F3D0;

    box-shadow:
        0 18px 45px rgba(5,150,105,.12);
}

.card-premium-image{
    position:relative;
    overflow:hidden;
}

.card-premium-image img{
    transition:transform .5s ease;
}

.card-premium:hover .card-premium-image img{
    transform:scale(1.05);
}

/* =========================================
   GLASS CARD
========================================= */
.glass-card{
    background:rgba(255,255,255,.72);

    border:1px solid rgba(255,255,255,.5);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    box-shadow:
        0 20px 50px rgba(15,23,42,.08);
}

/* =========================================
   SECTION TITLE
========================================= */
.section-title{
    font-size:clamp(2rem,4vw,3.5rem);

    line-height:1.1;

    font-weight:800;

    letter-spacing:-0.04em;
}

.section-subtitle{
    color:#64748B;

    font-size:1.05rem;

    line-height:1.9;

    max-width:720px;
}

/* =========================================
   PREMIUM BUTTON
========================================= */
.btn-premium{
    position:relative;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        #059669,
        #047857
    );

    color:white;

    border:none;

    padding:16px 28px;

    border-radius:1.25rem;

    font-weight:700;

    box-shadow:
        0 10px 25px rgba(5,150,105,.25);

    transition:all .3s ease;
}

.btn-premium:hover{
    transform:translateY(-2px);

    box-shadow:
        0 15px 35px rgba(5,150,105,.3);
}

.btn-premium::before{
    content:'';

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,.25),
            transparent
        );

    transform:translateX(-100%);

    transition:all .6s ease;
}

.btn-premium:hover::before{
    transform:translateX(100%);
}

/* =========================================
   EVENT APP STYLE
========================================= */
.event-card-mobile{
    scroll-snap-align:start;

    min-width:85%;

    border-radius:2rem;

    overflow:hidden;

    background:white;

    border:1px solid rgba(226,232,240,.8);

    box-shadow:
        0 12px 35px rgba(15,23,42,.08);
}

.event-scroll{
    display:flex;
    gap:1rem;

    overflow-x:auto;

    scroll-snap-type:x mandatory;

    padding-bottom:.5rem;
}

.event-scroll::-webkit-scrollbar{
    display:none;
}

/* =========================================
   BADGE PREMIUM
========================================= */
.badge-glow{
    display:inline-flex;
    align-items:center;
    gap:.5rem;

    background:rgba(16,185,129,.1);

    color:#047857;

    border:1px solid rgba(16,185,129,.15);

    padding:.6rem 1rem;

    border-radius:999px;

    font-size:.8rem;

    font-weight:700;

    backdrop-filter:blur(10px);
}

/* =========================================
   PREMIUM FOOTER
========================================= */
.footer-premium{
    position:relative;

    overflow:hidden;
}

.footer-premium::before{
    content:'';

    position:absolute;
    top:-120px;
    right:-120px;

    width:320px;
    height:320px;

    background:rgba(16,185,129,.08);

    border-radius:999px;

    filter:blur(80px);
}

/* =========================================
   MOBILE STICKY BOTTOM NAV
========================================= */

.mobile-bottom-nav{

    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 9999;

    display: flex;

    align-items: center;
    justify-content: space-around;

    gap: .35rem;

    padding:
        .7rem
        .8rem
        calc(.7rem + env(safe-area-inset-bottom));

    background: rgba(255,255,255,.94);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    border-top: 1px solid rgba(226,232,240,.9);

    box-shadow:
        0 -8px 30px rgba(15,23,42,.08);
}

/* ITEM */
.bottom-nav-item{

    flex: 1;

    min-width: 0;

    display: flex;

    flex-direction: column;

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

    gap: .28rem;

    padding: .65rem .35rem;

    border-radius: 1rem;

    color: #64748B;

    font-size: .68rem;

    font-weight: 700;

    line-height: 1.1;

    transition: all .25s ease;
}

/* ICON */
.bottom-nav-item i{

    font-size: 1.1rem;

    line-height: 1;
}

/* ACTIVE */
.bottom-nav-item.active-bottom-nav{

    background: #ECFDF5;

    color: #047857;

    box-shadow:
        inset 0 0 0 1px rgba(16,185,129,.12);
}

/* HOVER */
.bottom-nav-item:hover{

    background: #F8FAFC;

    color: #047857;
}

/* TEXT */
.bottom-nav-item span{

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    max-width: 100%;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* BODY SAFE AREA */
body{

    padding-bottom: 95px;
}

/* TABLET */
@media(max-width:768px){

    .mobile-bottom-nav{

        padding-left: .5rem;
        padding-right: .5rem;
    }

    .bottom-nav-item{

        font-size: .62rem;

        padding: .6rem .2rem;
    }

    .bottom-nav-item i{

        font-size: 1rem;
    }
}

/* VERY SMALL DEVICE */
@media(max-width:380px){

    .bottom-nav-item{

        font-size: .58rem;
    }

    .bottom-nav-item i{

        font-size: .95rem;
    }
}

/* =========================================
   MOBILE BOTTOM NAV VISIBILITY
========================================= */

.mobile-bottom-nav{

    display: none;
}

/* HANYA MOBILE */
@media (max-width: 767px){

    .mobile-bottom-nav{

        display: flex;
    }

    .mobile-safe-space{

        display: block;
    }
}

/* TABLET & DESKTOP */
@media (min-width: 768px){

    .mobile-bottom-nav{

        display: none !important;
    }

    .mobile-safe-space{

        display: none !important;
    }

    body{

        padding-bottom: 0 !important;
    }
}

@media (max-width: 767px){

    body{
        padding-bottom: 95px;
    }

}

/* =========================================
   MOBILE BOTTOM NAV
========================================= */

.mobile-bottom-nav{
    display:block;
}

/*
|--------------------------------------------------------------------------
| HIDE DI TABLET & DESKTOP
|--------------------------------------------------------------------------
| Banyak Android tablet/foldable tetap kena mobile layout.
| Maka gunakan width + orientation.
*/

@media (min-width: 900px){

    .mobile-bottom-nav{
        display:none !important;
    }

}

/*
|--------------------------------------------------------------------------
| LANDSCAPE TABLET
|--------------------------------------------------------------------------
*/

@media (min-width: 768px) and (orientation: landscape){

    .mobile-bottom-nav{
        display:none !important;
    }

}

/*
|--------------------------------------------------------------------------
| TABLET PORTRAIT BESAR
|--------------------------------------------------------------------------
*/

@media (min-width: 768px) and (min-height: 1000px){

    .mobile-bottom-nav{
        display:none !important;
    }

}

/* ============================================================
   SUPER APP PREMIUM - MOBILE FIRST ENHANCEMENTS
   ============================================================ */

/* Semua gaya berikut hanya aktif di perlekatan kecil (max-width: 767px)
   Menghadirkan nuansa super app premium tanpa mengubah desktop */
@media (max-width: 767px) {

    /* ----- GLOBAL TOUCH & TAP TARGET ----- */
    button,
    a,
    .bottom-nav-item,
    .hover-card,
    [class*="cursor-pointer"] {
        -webkit-tap-highlight-color: transparent;
    }

    button:active,
    .bottom-nav-item:active,
    .hover-card:active {
        transform: scale(0.97);
        transition: transform 0.08s ease;
    }

    /* ----- TYPOGRAPHY & SPACING PREMIUM ----- */
    h1, h2, .section-title {
        letter-spacing: -0.02em;
    }

    .hero-content {
        padding-block: 2rem !important;
    }

    /* ----- HERO SECTION SUPER APP ----- */
    .hero-content .flex-wrap {
        flex-direction: row;
        gap: 0.75rem;
    }

    .hero-content .flex-wrap a {
        flex: 1;
        text-align: center;
        padding: 0.9rem 0.5rem;
        font-size: 0.9rem;
        border-radius: 1.75rem;
        backdrop-filter: blur(4px);
    }

    .hero-content .glass {
        margin-top: 1.5rem;
        border-radius: 2rem;
    }

    /* ----- CARD PREMIUM (Kitab Pilihan, Quick Access) ----- */
    .hover-card {
        border-radius: 1.75rem !important;
        transition: all 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1);
        border: 1px solid rgba(226, 232, 240, 0.9);
    }

    .hover-card:active {
        transform: scale(0.97);
        background: #f9fafb;
        border-color: #10b98180;
    }

    /* Quick Access grid items */
    .grid.grid-cols-2.md\:grid-cols-4.lg\:grid-cols-8 {
        gap: 0.75rem;
    }

    .grid > div.hover-card {
        padding: 1rem 0.5rem;
        border-radius: 1.5rem;
        background: white;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.03);
    }

    .grid > div.hover-card .text-3xl {
        font-size: 1.8rem;
        margin-bottom: 0.5rem;
    }

    /* ----- FEATURED BOOKS (super app card style) ----- */
    #featured-books .hover-card,
    .grid.md\:grid-cols-2.lg\:grid-cols-4 > .hover-card {
        border-radius: 1.75rem;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
        transition: all 0.25s ease;
    }

    .hover-card .h-60 {
        height: 170px;
    }

    .hover-card .p-6 {
        padding: 1rem;
    }

    .hover-card h3 {
        font-size: 1.25rem;
        margin-bottom: 0.25rem;
    }

    .hover-card .flex.gap-3 a,
    .hover-card .flex.gap-3 button {
        padding-block: 0.75rem;
        font-weight: 600;
        border-radius: 1.25rem;
    }

    /* ----- AI SECTION: super app rounded & input group ----- */
    .gradient-bg {
        border-radius: 2rem !important;
        padding: 1.5rem !important;
    }

    .gradient-bg .flex.flex-col.md\:flex-row {
        flex-direction: column;
    }

    .gradient-bg input {
        padding: 1rem 1.25rem;
        border-radius: 1.5rem;
        font-size: 0.9rem;
    }

    .gradient-bg button {
        border-radius: 1.5rem;
        padding: 1rem;
        width: 100%;
        margin-top: 0.5rem;
    }

    /* ----- BOTTOM NAVIGATION SUPER APP PREMIUM ----- */
    .mobile-bottom-nav {
        backdrop-filter: blur(28px);
        background: rgba(255, 255, 255, 0.96);
        border-top: 1px solid rgba(16, 185, 129, 0.15);
        padding-top: 0.65rem;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05), 0 -1px 0 rgba(0, 0, 0, 0.02);
    }

    .bottom-nav-item {
        border-radius: 1.25rem;
        padding: 0.55rem 0.2rem;
        font-weight: 600;
        transition: all 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    }

    .bottom-nav-item i {
        font-size: 1.35rem;
        margin-bottom: 0.15rem;
    }

    .bottom-nav-item span {
        font-size: 0.7rem;
        font-weight: 500;
        letter-spacing: -0.2px;
    }

    .bottom-nav-item:active {
        transform: scale(0.94);
        background: #e6f7ef;
    }

    .bottom-nav-item.active-bottom-nav {
        background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
        color: #065f46;
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
        border: 0.5px solid rgba(16, 185, 129, 0.2);
    }

    /* ----- GLASS CARD & HERO WIDGET ----- */
    .glass-card {
        backdrop-filter: blur(20px);
        background: rgba(255, 255, 255, 0.8);
        border-radius: 2rem;
    }

    /* ----- SECTION HEADER (lihat semua link) ----- */
    .flex.items-center.justify-between.mb-8 a {
        font-size: 0.85rem;
        background: #f1f5f9;
        padding: 0.5rem 1rem;
        border-radius: 2rem;
        transition: all 0.2s;
    }

    .flex.items-center.justify-between.mb-8 a:active {
        background: #e2e8f0;
        transform: scale(0.96);
    }

    /* ----- EXTRA SAFE AREA & SCROLL BEHAVIOR ----- */
    body {
        padding-bottom: 85px;
        scroll-behavior: smooth;
    }

    /* Snap for any horizontal scroller (event carousel) */
    .event-scroll {
        scroll-snap-type: x mandatory;
        scroll-padding: 0 1rem;
        gap: 1rem;
        padding-bottom: 0.75rem;
    }

    .event-card-mobile {
        scroll-snap-align: start;
        border-radius: 1.75rem;
    }
}

/* ---------- Perbaikan tambahan untuk device lipat / ultra kecil ---------- */
@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 2.2rem !important;
    }

    .hover-card .h-60 {
        height: 150px;
    }

    .gradient-bg h2 {
        font-size: 1.8rem;
    }

    .bottom-nav-item i {
        font-size: 1.2rem;
    }
}


.profile-menu-item{
    @apply flex items-center gap-3 px-4 py-3 rounded-2xl text-slate-700 hover:bg-slate-50 hover:text-emerald-700 font-semibold transition;
}

/*
|--------------------------------------------------------------------------
| MOBILE MENU ITEM
|--------------------------------------------------------------------------
*/

.profile-menu-item{
    @apply flex items-center gap-3 px-4 py-3 rounded-2xl text-slate-700 hover:bg-slate-50 hover:text-emerald-700 font-semibold transition;
}

.mobile-nav-item{
    @apply flex items-center gap-4 w-full px-5 py-4 rounded-2xl border border-slate-200 bg-white text-slate-700 font-semibold text-[15px] transition duration-200;
}

.mobile-nav-item:hover{
    @apply bg-emerald-50 border-emerald-200 text-emerald-700 shadow-sm;
}

.mobile-nav-item.active{
    @apply bg-emerald-600 text-white border-emerald-600 shadow-lg;
}

/*
|--------------------------------------------------------------------------
| DROPDOWN
|--------------------------------------------------------------------------
*/

.dropdown-menu-item{
    @apply flex items-center gap-4 p-4 rounded-2xl hover:bg-slate-50 transition;
}

.dropdown-icon{
    @apply w-12 h-12 rounded-2xl flex items-center justify-center shrink-0;
}

.ayah-active {
    transform: scale(1.02);
    border-color: #22c55e !important;
    box-shadow: 0 0 25px rgba(34,197,94,0.4);
    transition: all .3s ease;
}

@keyframes popBounce {
    0% { transform: scale(0.3); opacity: 0; }
    60% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes shake {
    0%,100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-3px); }
}

.badge-popup {
    animation: popBounce .5s ease, shake .4s .5s ease;
}

@keyframes firePulse {
    0% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.2); filter: brightness(1.3); }
    100% { transform: scale(1); filter: brightness(1); }
}

.streak-fire {
    animation: fire 1s infinite alternate;
}

@keyframes fire {
    from { transform: scale(1); filter: brightness(1); }
    to { transform: scale(1.2); filter: brightness(1.5); }
}

.ayah-active{
    transform: scale(1.02);
    border-color: #ec4899 !important;
    box-shadow: 0 10px 30px rgba(236,72,153,.3);
    transition: all .3s ease;
}

.quran-word {

    position: relative;

    display: inline-block;

    line-height: inherit;
}

.quran-word {

    position: relative;

    display: inline-block;

    line-height: inherit;
}

.quran-reading {

    line-height: 2.2;
}