/* ============================================================
   pages/inner.css — Styles untuk halaman dalam (non-landing)
   Tentang Kami · Program · Tes · Blog
   ============================================================ */

/* === CONTENT SECTION SPACING === */
.content-section { padding: 5rem 0; }
.content-section--gray { background: var(--gray-50); }
.content-section--primary { background: var(--primary); }
.content-section--white { background: #fff; }

/* === HALAMAN PROGRAM — Detail Layout === */
.program-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}
@media (min-width: 1024px) {
    .program-layout { grid-template-columns: 1fr 340px; }
}

/* Main content */
.program-content h2 {
    font-family: 'Montserrat',sans-serif;
    font-size: 1.5rem; font-weight: 900; color: var(--primary);
    margin-bottom: 1rem; margin-top: 2rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--gray-100);
}
.program-content h2:first-child { margin-top: 0; }
.program-content p {
    color: var(--gray-600); line-height: 1.85; margin-bottom: 1rem; font-size: .95rem;
}
.program-content ul, .program-content ol {
    padding-left: 1.5rem; color: var(--gray-600); font-size: .95rem; line-height: 1.85;
    margin-bottom: 1rem; display: flex; flex-direction: column; gap: .4rem;
}
.program-content li { list-style: disc; }
.program-content ol li { list-style: decimal; }
.program-content strong { color: var(--primary); font-weight: 700; }

/* Highlight box */
.highlight-box {
    background: var(--blue-50);
    border: 1px solid var(--blue-200);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
}
.highlight-box p { margin: 0; color: var(--primary); font-weight: 500; font-size: .9rem; }

.warning-box {
    background: rgba(220,38,38,0.06);
    border: 1px solid rgba(220,38,38,0.2);
    border-left: 4px solid var(--promo);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
}
.warning-box p { margin: 0; color: var(--promo); font-weight: 500; font-size: .9rem; }

.success-box {
    background: rgba(5,150,105,0.06);
    border: 1px solid rgba(5,150,105,0.2);
    border-left: 4px solid var(--success);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
}
.success-box p { margin: 0; color: var(--success); font-weight: 500; font-size: .9rem; }

/* Checklist */
.checklist { list-style: none !important; padding-left: 0 !important; }
.checklist li {
    display: flex !important;
    align-items: flex-start;
    gap: .75rem;
    list-style: none !important;
    color: var(--gray-600);
}
.checklist li::before {
    content: '';
    width: 1.25rem; height: 1.25rem;
    background: rgba(5,150,105,0.15);
    border: 2px solid var(--success);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: .15rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23059669'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
}

/* Steps */
.steps { list-style: none !important; padding-left: 0 !important; counter-reset: steps; }
.steps li {
    display: flex !important;
    align-items: flex-start;
    gap: 1rem;
    list-style: none !important;
    margin-bottom: 1.25rem;
    counter-increment: steps;
}
.steps li::before {
    content: counter(steps);
    width: 2rem; height: 2rem;
    background: var(--primary); color: var(--secondary);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Montserrat',sans-serif; font-weight: 900; font-size: .8rem;
    flex-shrink: 0; margin-top: .1rem;
}

/* === SIDEBAR === */
.program-sidebar { display: flex; flex-direction: column; gap: 1.5rem; }

.sidebar-box {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}
.sidebar-box--primary {
    background: var(--primary);
    border-color: transparent;
}
.sidebar-box__title {
    font-family: 'Montserrat',sans-serif;
    font-size: 1rem; font-weight: 900;
    color: var(--primary);
    margin-bottom: 1rem;
    padding-bottom: .75rem;
    border-bottom: 2px solid var(--gray-100);
}
.sidebar-box--primary .sidebar-box__title { color: #fff; border-bottom-color: rgba(255,255,255,0.15); }

.sidebar-price {
    text-align: center;
    margin-bottom: 1rem;
}
.sidebar-price__label { font-size: .75rem; color: var(--gray-400); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; display: block; margin-bottom: .25rem; }
.sidebar-price__strikethrough { font-size: .9rem; color: var(--gray-400); text-decoration: line-through; }
.sidebar-price__main { font-family: 'Montserrat',sans-serif; font-size: 2.25rem; font-weight: 900; color: var(--promo); line-height: 1; display: block; }
.sidebar-price--primary .sidebar-price__label { color: rgba(255,255,255,0.6); }
.sidebar-price--primary .sidebar-price__main  { color: var(--secondary); }

.sidebar-features { list-style: none; display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.25rem; font-size: .875rem; }
.sidebar-features li { display: flex; align-items: flex-start; gap: .6rem; color: var(--gray-600); line-height: 1.5; }
.sidebar-features li i { color: var(--success); margin-top: .15rem; flex-shrink: 0; }
.sidebar-box--primary .sidebar-features li { color: rgba(255,255,255,0.8); }
.sidebar-box--primary .sidebar-features li i { color: var(--secondary); }

.sidebar-cta { width: 100%; display: block; text-align: center; }

/* === TENTANG KAMI === */
.tentang-intro {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}
@media (min-width: 1024px) { .tentang-intro { grid-template-columns: 1fr 1fr; } }
.tentang-intro__img { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-xl); }
.tentang-intro__img img { width: 100%; height: auto; display: block; }

.tentang-values-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 640px)  { .tentang-values-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .tentang-values-grid { grid-template-columns: repeat(4,1fr); } }
.value-card {
    background: #fff;
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-xl);
    padding: 1.75rem 1.5rem;
    text-align: center;
    transition: box-shadow .3s, transform .3s;
}
.value-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.value-card__icon { width: 3.5rem; height: 3.5rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0 auto 1rem; color: #fff; }
.value-card h3 { font-family: 'Montserrat',sans-serif; font-size: .95rem; font-weight: 800; color: var(--primary); margin-bottom: .5rem; }
.value-card p  { font-size: .825rem; color: var(--gray-500); line-height: 1.7; }

/* Team grid */
.team-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; }
@media (min-width: 768px)  { .team-grid { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(4,1fr); } }
.team-card { text-align: center; }
.team-card__avatar { width: 5rem; height: 5rem; border-radius: 50%; background: var(--primary); color: var(--secondary); font-family: 'Montserrat',sans-serif; font-weight: 900; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; border: 3px solid var(--secondary); }
.team-card h4 { font-family: 'Montserrat',sans-serif; font-size: .9rem; font-weight: 800; color: var(--primary); margin-bottom: .25rem; }
.team-card p  { font-size: .775rem; color: var(--gray-400); }

/* === BLOG PAGE === */
.blog-hero { padding: 4rem 0; background: var(--primary); }
.blog-categories {
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin-bottom: 2.5rem;
}
.blog-cat-btn {
    padding: .5rem 1.25rem;
    border-radius: var(--radius-full);
    border: 2px solid var(--gray-200);
    background: #fff;
    color: var(--gray-600);
    font-weight: 600;
    font-size: .875rem;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    display: inline-block;
}
.blog-cat-btn:hover,
.blog-cat-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: .5rem; margin-top: 3rem; flex-wrap: wrap; }
.page-btn {
    width: 2.5rem; height: 2.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--gray-200);
    background: #fff;
    color: var(--gray-600);
    font-weight: 600;
    font-size: .875rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all var(--transition); text-decoration: none;
}
.page-btn:hover,
.page-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* === BLOG ARTIKEL SINGLE === */
.article-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start; /* wajib agar sticky sidebar bekerja di grid */
}
@media (min-width: 1024px) { .article-layout { grid-template-columns: 1fr 320px; } }

.article-body { max-width: 100%; }
.article-body h2 { font-family: 'Montserrat',sans-serif; font-size: 1.375rem; font-weight: 900; color: var(--primary); margin: 2rem 0 1rem; padding-bottom: .5rem; border-bottom: 2px solid var(--gray-100); }
.article-body h3 { font-family: 'Montserrat',sans-serif; font-size: 1.125rem; font-weight: 800; color: var(--primary); margin: 1.5rem 0 .75rem; }
.article-body p  { color: var(--gray-600); line-height: 1.9; margin-bottom: 1.25rem; font-size: .95rem; }
.article-body ul, .article-body ol { padding-left: 1.5rem; color: var(--gray-600); font-size: .95rem; line-height: 1.85; margin-bottom: 1.25rem; display: flex; flex-direction: column; gap: .35rem; }
.article-body li { list-style: disc; }
.article-body ol li { list-style: decimal; }
.article-body strong { color: var(--dark); font-weight: 700; }
.article-body blockquote {
    border-left: 4px solid var(--secondary);
    background: var(--blue-50);
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-style: italic;
    color: var(--primary);
}
.article-body img { width: 100%; border-radius: var(--radius-lg); margin: 1.5rem 0; }
.article-body table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .875rem; overflow: hidden; border-radius: var(--radius-md); }
.article-body th { background: var(--primary); color: #fff; padding: .75rem 1rem; text-align: left; font-weight: 700; }
.article-body td { padding: .75rem 1rem; border-bottom: 1px solid var(--gray-100); color: var(--gray-600); }
.article-body tr:nth-child(even) td { background: var(--gray-50); }

/* Article meta */
.article-meta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 2rem; font-size: .875rem; color: var(--gray-500); }
.article-meta i { color: var(--primary); margin-right: .25rem; }

/* Article sidebar */
/*
 * FIX: align-self: flex-start wajib ada agar sticky berjalan benar.
 * Tanpa ini, sidebar stretch ke tinggi penuh grid → sticky TOC
 * tidak punya scroll container yang benar dan malah overlap elemen lain.
 */
.article-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-self: flex-start;       /* ← kunci utama: sidebar setinggi kontennya */
    position: sticky;             /* ← sidebar keseluruhan yang sticky, bukan hanya TOC */
    top: 5.5rem;                  /* tepat di bawah navbar (80px) + sedikit margin */
    max-height: calc(100vh - 6.5rem);  /* tidak melebihi viewport */
    overflow-y: auto;             /* scroll internal jika sidebar lebih tinggi dari viewport */
    overflow-x: hidden;
    /* Scrollbar tipis agar tidak mengganggu desain */
    scrollbar-width: thin;
    scrollbar-color: var(--gray-200) transparent;
    z-index: 1;                   /* pastikan di bawah navbar (z-index: 50) */
}
.article-sidebar::-webkit-scrollbar { width: 4px; }
.article-sidebar::-webkit-scrollbar-track { background: transparent; }
.article-sidebar::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 9999px; }

/* TOC tidak perlu sticky lagi — sidebar-nya yang sticky */
.toc-box {
    background: var(--blue-50);
    border: 1px solid var(--blue-200);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    /* sticky dihapus dari sini — sudah ditangani .article-sidebar */
}
.toc-box h4 { font-family: 'Montserrat',sans-serif; font-size: .9rem; font-weight: 900; color: var(--primary); margin-bottom: 1rem; }
.toc-list { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.toc-list a {
    font-size: .825rem;
    color: var(--gray-600);
    text-decoration: none;
    display: block;
    padding: .25rem 0 .25rem .75rem;
    border-left: 2px solid transparent;
    transition: color var(--transition), border-color var(--transition);
}
.toc-list a:hover { color: var(--primary); border-left-color: var(--primary); }

/* Article CTA box */
.article-cta {
    background: var(--primary);
    border-radius: var(--radius-xl);
    padding: 2rem;
    text-align: center;
    color: #fff;
    margin: 2.5rem 0;
}
.article-cta h3 { font-family: 'Montserrat',sans-serif; font-weight: 900; font-size: 1.2rem; margin-bottom: .625rem; }
.article-cta p  { color: rgba(255,255,255,0.75); font-size: .875rem; margin-bottom: 1.25rem; line-height: 1.7; }

/* Author box */
.author-box { display: flex; gap: 1rem; align-items: flex-start; background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: var(--radius-xl); padding: 1.5rem; margin-top: 2.5rem; }
.author-avatar { width: 4rem; height: 4rem; border-radius: 50%; background: var(--primary); color: var(--secondary); font-family: 'Montserrat',sans-serif; font-weight: 900; font-size: 1rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 3px solid var(--secondary); }
.author-info h4 { font-family: 'Montserrat',sans-serif; font-size: .95rem; font-weight: 800; color: var(--primary); margin-bottom: .25rem; }
.author-info p  { font-size: .825rem; color: var(--gray-500); line-height: 1.6; }

/* Related posts */
.related-posts { margin-top: 3rem; }
.related-posts h3 { font-family: 'Montserrat',sans-serif; font-size: 1.25rem; font-weight: 900; color: var(--primary); margin-bottom: 1.5rem; padding-bottom: .75rem; border-bottom: 2px solid var(--gray-100); }