/* ==========================================================
   TPQ NURUL ISLAM — PREMIUM EMERALD / LUXURY CSS
   ========================================================== */

:root {
    --tpq-950:#012d20;
    --tpq-900:#045c3d;
    --tpq-800:#067b52;
    --tpq-700:#08a66b;
    --tpq-600:#0bc981;
    --tpq-500:#20e69a;
    --tpq-300:#8dffd0;
    --tpq-100:#e8fff5;
    --tpq-gold:#d7bb72;
    --tpq-gold-light:#f1dfad;
    --tpq-ink:#102d25;
    --tpq-text:#53665f;
    --tpq-muted:#7a8b85;
    --tpq-white:#fff;
    --tpq-bg:#f7faf8;
    --tpq-border:rgba(7,93,66,.11);
    --tpq-shadow:0 18px 55px rgba(4,54,39,.10);
    --tpq-shadow-lg:0 28px 80px rgba(3,44,32,.16);
}

.tpq-hero,.tpq-about,.attanzil-section,.schedule-section,.level-section,
.graduate-section,.activity-section,.daily-section,.faq-section,.tpq-cta {
    position:relative;
    isolation:isolate;
}

.tpq-hero {
    min-height:510px;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:
        linear-gradient(110deg,rgba(1,45,32,.96),rgba(4,92,61,.82) 55%,rgba(6,123,82,.52)),
        url("../images/tpq/hero.jpg") center/cover no-repeat;
    box-shadow:inset 0 -1px 0 rgba(141,255,208,.35);
}

.tpq-overlay {
    position:absolute;
    inset:0;
    z-index:-1;
    background:
        radial-gradient(circle at 78% 25%,rgba(32,230,154,.30),transparent 22%),
        radial-gradient(circle at 20% 100%,rgba(215,187,114,.11),transparent 30%);
}

.tpq-hero::after {
    content:"";
    position:absolute;
    right:-150px;
    top:-210px;
    width:520px;
    height:520px;
    border:1px solid rgba(141,255,208,.17);
    border-radius:50%;
    box-shadow:0 0 0 40px rgba(141,255,208,.025),0 0 0 80px rgba(141,255,208,.015);
    pointer-events:none;
}

.tpq-hero-content {
    max-width:780px;
    padding:78px 0;
    animation:tpqIn .75s ease both;
}

.hero-badge,.section-subtitle {
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-size:10px;
    font-weight:900;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.hero-badge {
    padding:9px 14px;
    color:#d9ffed!important;
    border:1px solid rgba(174,244,216,.32);
    border-radius:999px;
    background:rgba(255,255,255,.07);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.17),0 0 22px rgba(32,230,154,.12);
    backdrop-filter:blur(10px);
}

.hero-badge::before {
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:#8dffd0;
    box-shadow:0 0 8px #8dffd0,0 0 18px rgba(32,230,154,.75);
}

.tpq-hero h1 {
    margin:18px 0 5px;
    color:#fff!important;
    font-family:"Playfair Display",Georgia,serif!important;
    font-size:clamp(48px,7vw,82px)!important;
    line-height:.98!important;
    letter-spacing:-.04em;
    text-shadow:0 12px 35px rgba(0,0,0,.22),0 0 28px rgba(32,230,154,.08);
}

.tpq-hero h3 {
    margin:0 0 17px;
    color:#9dffd3!important;
    font-family:"Playfair Display",Georgia,serif;
    font-size:clamp(20px,3vw,31px);
    font-weight:600;
}

.tpq-hero p {
    max-width:680px;
    margin:0;
    color:rgba(255,255,255,.80)!important;
    font-size:14px;
    line-height:1.9;
}

.hero-info {
    display:flex;
    flex-wrap:wrap;
    gap:0;
    margin-top:30px;
    width:max-content;
    max-width:100%;
    border:1px solid rgba(141,255,208,.16);
    border-radius:16px;
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(12px);
    box-shadow:0 15px 35px rgba(0,0,0,.10);
}

.hero-info > div {
    min-width:120px;
    padding:13px 18px;
    border-right:1px solid rgba(141,255,208,.13);
    color:rgba(255,255,255,.72);
    font-size:10px;
}

.hero-info > div:last-child {border-right:0}
.hero-info strong {
    display:block;
    margin-bottom:4px;
    color:#8dffd0;
    font-size:9px;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.hero-button {
    display:flex;
    flex-wrap:wrap;
    gap:11px;
    margin-top:27px;
}

.hero-button .btn,.tpq-cta .btn {
    padding:12px 21px;
    border-radius:11px;
    font-size:11px;
    font-weight:800;
    transition:.25s ease;
}

.hero-button .btn-warning,.tpq-cta .btn-warning {
    color:#17382c!important;
    border:1px solid var(--tpq-gold-light)!important;
    background:linear-gradient(135deg,#f3e3b5,#d5b96f)!important;
    box-shadow:0 10px 28px rgba(0,0,0,.15),0 0 18px rgba(215,187,114,.10);
}

.hero-button .btn-outline-light,.tpq-cta .btn-outline-light {
    color:#fff!important;
    border-color:rgba(255,255,255,.42)!important;
    background:rgba(255,255,255,.05);
}

.hero-button .btn:hover,.tpq-cta .btn:hover {
    transform:translateY(-3px);
}

.tpq-about,.graduate-section {
    padding:105px 0;
    background:#fff;
}

.tpq-about::before,.graduate-section::before {
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    border:1px solid rgba(32,230,154,.07);
    border-radius:50%;
    right:-140px;
    top:30px;
}

.tpq-about img,.graduate-section img {
    width:100%;
    min-height:350px;
    object-fit:cover;
    border-radius:28px!important;
    box-shadow:var(--tpq-shadow-lg);
    border:7px solid #fff;
    outline:1px solid rgba(32,230,154,.16);
}

.section-subtitle {
    color:var(--tpq-700)!important;
    text-shadow:0 0 16px rgba(32,230,154,.15);
}

.section-subtitle::before {
    content:"";
    width:24px;
    height:2px;
    border-radius:20px;
    background:linear-gradient(90deg,var(--tpq-500),var(--tpq-gold));
    box-shadow:0 0 10px rgba(32,230,154,.3);
}

.section-title {
    margin-top:12px!important;
    color:var(--tpq-ink)!important;
    font-family:"Playfair Display",Georgia,serif!important;
    font-size:clamp(31px,4vw,48px)!important;
    line-height:1.15!important;
    letter-spacing:-.025em;
}

.section-title::after {
    content:"";
    display:block;
    width:48px;
    height:3px;
    margin-top:16px;
    border-radius:20px;
    background:linear-gradient(90deg,var(--tpq-500),var(--tpq-gold));
    box-shadow:0 0 8px rgba(32,230,154,.4);
}

.tpq-about p,.section-description {
    color:var(--tpq-text);
    font-size:13px;
    line-height:1.95;
}

.attanzil-section,.schedule-section,.level-section,.activity-section,.daily-section,.faq-section {
    padding:105px 0;
}

.attanzil-section,.level-section,.faq-section {
    background:#f7faf8;
}

.schedule-section,.activity-section,.daily-section {
    background:#fff;
}

.section-description {
    max-width:760px;
    margin:18px auto 0;
}

.program-card,.schedule-card,.activity-card,.level-card {
    height:100%;
    border:1px solid var(--tpq-border);
    border-radius:22px;
    background:#fff;
    box-shadow:0 9px 30px rgba(3,65,47,.055);
    transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}

.program-card {
    position:relative;
    padding:29px;
    overflow:hidden;
}

.program-card::after {
    content:"";
    position:absolute;
    width:110px;
    height:110px;
    right:-50px;
    bottom:-50px;
    border-radius:50%;
    background:rgba(32,230,154,.055);
}

.program-card:hover,.schedule-card:hover,.activity-card:hover,.level-card:hover {
    transform:translateY(-7px);
    border-color:rgba(32,230,154,.28);
    box-shadow:var(--tpq-shadow);
}

.program-card.highlight {
    background:linear-gradient(145deg,#fff,#effff8);
    border-color:rgba(32,230,154,.27);
}

.program-icon,.mission-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    width:55px;
    height:55px;
    margin-bottom:20px;
    color:#d9ffed;
    border-radius:16px;
    background:linear-gradient(145deg,var(--tpq-600),var(--tpq-900));
    box-shadow:0 12px 27px rgba(5,114,78,.20),0 0 24px rgba(32,230,154,.13);
}

.program-card h4,.activity-card h4 {
    margin:0 0 9px;
    color:var(--tpq-ink);
    font-family:"Playfair Display",Georgia,serif;
    font-size:21px;
}

.program-card p,.activity-card p {
    margin:0;
    color:var(--tpq-text);
    font-size:12px;
    line-height:1.8;
}

.schedule-card {
    overflow:hidden;
}

.schedule-header {
    display:flex;
    align-items:center;
    gap:13px;
    padding:24px 28px;
    color:#fff;
    background:linear-gradient(135deg,var(--tpq-950),var(--tpq-800));
}

.schedule-header i {
    color:#9dffd3;
    font-size:23px;
    text-shadow:0 0 15px rgba(141,255,208,.5);
}

.schedule-header h3 {
    margin:0;
    font-family:"Playfair Display",Georgia,serif;
    font-size:23px;
}

.schedule-card.night .schedule-header {
    background:linear-gradient(135deg,#073f31,#075d42);
}

.schedule-time {
    padding:15px 28px;
    color:var(--tpq-700);
    font-size:10px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
    background:var(--tpq-100);
    border-bottom:1px solid rgba(32,230,154,.12);
}

.schedule-list {
    list-style:none;
    margin:0;
    padding:8px 28px 20px;
}

.schedule-list li {
    display:flex;
    gap:18px;
    padding:17px 0;
    color:var(--tpq-text);
    font-size:12px;
    line-height:1.7;
    border-bottom:1px solid rgba(7,93,66,.07);
}

.schedule-list li:last-child {border-bottom:0}

.schedule-list span {
    flex:0 0 105px;
    color:var(--tpq-700);
    font-weight:800;
}

.level-card {
    padding:25px 10px;
    text-align:center;
}

.level-number {
    display:flex;
    align-items:center;
    justify-content:center;
    width:58px;
    height:58px;
    margin:0 auto 15px;
    color:#fff;
    font-family:"Playfair Display",Georgia,serif;
    font-size:24px;
    border-radius:50%;
    background:linear-gradient(145deg,var(--tpq-500),var(--tpq-900));
    box-shadow:0 10px 25px rgba(5,114,78,.20),0 0 20px rgba(32,230,154,.12);
}

.level-card h5 {
    margin:0;
    color:var(--tpq-ink);
    font-size:12px;
    font-weight:800;
}

.graduate-list {
    list-style:none;
    padding:0;
    margin:25px 0 0;
}

.graduate-list li {
    position:relative;
    padding:12px 15px 12px 35px;
    color:var(--tpq-text);
    font-size:12px;
    border-bottom:1px solid rgba(7,93,66,.07);
}

.graduate-list li::before {
    content:"✓";
    position:absolute;
    left:0;
    top:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:21px;
    height:21px;
    color:#fff;
    font-size:10px;
    font-weight:900;
    border-radius:50%;
    background:var(--tpq-600);
    box-shadow:0 0 12px rgba(32,230,154,.25);
}

.activity-card {
    padding:34px 28px;
    text-align:center;
}

.activity-card > i {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:58px;
    height:58px;
    margin-bottom:20px;
    color:#d9ffed;
    font-size:22px;
    border-radius:17px;
    background:linear-gradient(145deg,var(--tpq-500),var(--tpq-900));
    box-shadow:0 12px 25px rgba(5,114,78,.20);
}

.daily-flow {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
}

.flow-item {
    width:130px;
    min-height:125px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:16px 8px;
    text-align:center;
    border:1px solid var(--tpq-border);
    border-radius:20px;
    background:#fff;
    box-shadow:0 9px 30px rgba(3,65,47,.055);
    transition:.3s ease;
}

.flow-item:hover {
    transform:translateY(-6px);
    border-color:rgba(32,230,154,.30);
    box-shadow:var(--tpq-shadow);
}

.flow-item h5 {
    margin:11px 0 0;
    color:var(--tpq-ink);
    font-size:11px;
    line-height:1.45;
}

.flow-arrow {
    color:var(--tpq-600);
    font-size:22px;
    text-shadow:0 0 12px rgba(32,230,154,.35);
}

.faq-section .accordion {
    max-width:850px;
    margin:auto;
}

.faq-section .accordion-item {
    margin-bottom:12px;
    overflow:hidden;
    border:1px solid var(--tpq-border)!important;
    border-radius:15px!important;
    background:#fff;
    box-shadow:0 7px 22px rgba(3,65,47,.045);
}

.faq-section .accordion-button {
    padding:19px 22px;
    color:var(--tpq-ink);
    font-size:12px;
    font-weight:800;
    background:#fff;
    box-shadow:none!important;
}

.faq-section .accordion-button:not(.collapsed) {
    color:var(--tpq-700);
    background:var(--tpq-100);
}

.faq-section .accordion-button::after {
    filter:none;
}

.faq-section .accordion-body {
    color:var(--tpq-text);
    font-size:12px;
    line-height:1.8;
}

.tpq-cta {
    padding:0 0 105px;
    background:#fff;
}

.tpq-cta .cta-box {
    position:relative;
    overflow:hidden;
    padding:75px clamp(25px,7vw,90px);
    text-align:center;
    border:1px solid rgba(141,255,208,.30);
    border-radius:34px;
    background:
        radial-gradient(circle at 50% 0%,rgba(141,255,208,.18),transparent 35%),
        linear-gradient(135deg,var(--tpq-950),var(--tpq-800));
    box-shadow:var(--tpq-shadow-lg),0 0 35px rgba(32,230,154,.08);
}

.tpq-cta .cta-box::before {
    content:"";
    position:absolute;
    inset:18px;
    border:1px solid rgba(211,255,237,.10);
    border-radius:25px;
    pointer-events:none;
}

.tpq-cta .cta-box > span {
    color:#9decc9;
    font-size:9px;
    font-weight:900;
    letter-spacing:.2em;
}

.tpq-cta h2 {
    position:relative;
    max-width:800px;
    margin:15px auto 12px;
    color:#fff;
    font-family:"Playfair Display",Georgia,serif;
    font-size:clamp(32px,5vw,56px);
    line-height:1.15;
}

.tpq-cta p {
    max-width:680px;
    margin:auto;
    color:rgba(255,255,255,.70);
    font-size:12px;
    line-height:1.85;
}

.tpq-cta .cta-button {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:11px;
    margin-top:28px;
}

@keyframes tpqIn {
    from {opacity:0;transform:translateY(18px)}
    to {opacity:1;transform:translateY(0)}
}

@media (max-width:991.98px) {
    .tpq-hero {min-height:450px}
    .tpq-hero-content {padding:65px 0}
    .attanzil-section,.schedule-section,.level-section,.activity-section,.daily-section,.faq-section,
    .tpq-about,.graduate-section {padding:78px 0}
    .tpq-about img,.graduate-section img {min-height:300px}
    .flow-item {width:115px}
}

@media (max-width:767.98px) {
    .tpq-hero {
        min-height:520px;
        background-position:60% center;
    }
    .tpq-hero-content {padding:55px 0}
    .tpq-hero h1 {font-size:46px!important}
    .tpq-hero h3 {font-size:22px}
    .tpq-hero p {font-size:12px}
    .hero-info {width:100%;display:grid;grid-template-columns:repeat(3,1fr)}
    .hero-info > div {min-width:0;padding:12px 8px;text-align:center;border-right:1px solid rgba(141,255,208,.13)}
    .hero-info strong {font-size:8px}
    .hero-info > div {font-size:9px}
    .hero-button .btn {width:100%}
    .section-title {font-size:31px!important}
    .tpq-about,.graduate-section {padding:65px 0}
    .tpq-about img,.graduate-section img {min-height:240px}
    .attanzil-section,.schedule-section,.level-section,.activity-section,.daily-section,.faq-section {padding:65px 0}
    .program-card {padding:25px}
    .schedule-list {padding-left:20px;padding-right:20px}
    .schedule-list li {display:block}
    .schedule-list span {display:block;margin-bottom:5px}
    .daily-flow {display:grid;grid-template-columns:1fr 1fr;max-width:360px;margin:auto}
    .flow-arrow {display:none}
    .flow-item {width:100%}
    .tpq-cta {padding:0 12px 70px}
    .tpq-cta .cta-box {padding:52px 20px;border-radius:25px}
    .tpq-cta .cta-box::before {inset:10px;border-radius:19px}
    .tpq-cta h2 {font-size:31px}
    .tpq-cta .btn {width:min(100%,260px)}
    .tpq-cta .cta-button {flex-direction:column;align-items:center}
}
@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after {animation-duration:.01ms!important;transition-duration:.01ms!important}
}