/**
 * InvitKeun - Main Stylesheet
 * Production-safe CSS beyond Tailwind utilities
 */
:root {
    /* Brand cream (publik) + aksen hijau */
    --brand-cream: #e8dcc8;
    --brand-cream-light: #f4ede4;
    --brand-cream-soft: #faf6f1;
    --brand-cream-dark: #d9c9b0;
    --brand-ink: #342c24;
    --brand-ink-muted: #6b5f52;
    --brand-accent: #4a6741;
    --brand-accent-dark: #3a5234;
    --invitkeun: #4a6741;
    --invitkeun-light: #5a7a50;
    --invitkeun-dark: #3a5234;
    --gold: #c9a96e;
    --ink: #342c24;
    --muted: #6b5f52;
    --soft: #f4ede4;
    /* Lebar konten situs (landing, auth, pricing, dll.) — selaras navbar/footer */
    --site-max: 72rem;
    --site-pad: 1rem;
    --site-pad-sm: 1.5rem;
    /* Tier lebar konten publik */
    --public-content: 42rem;
    --public-card: 28rem;
    --public-cta: 40rem;
}

/* Kontainer lebar seragam untuk semua halaman publik */
.page-container {
    width: 100%;
    max-width: var(--site-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--site-pad);
    padding-right: var(--site-pad);
}
@media (min-width: 640px) {
    .page-container {
        padding-left: var(--site-pad-sm);
        padding-right: var(--site-pad-sm);
    }
}
.page-inner-narrow,
.page-inner-content {
    width: 100%;
    max-width: var(--public-content);
    margin-left: auto;
    margin-right: auto;
}
.page-inner-tight,
.page-inner-card {
    width: 100%;
    max-width: var(--public-card);
    margin-left: auto;
    margin-right: auto;
}
.page-inner-cta {
    width: 100%;
    max-width: var(--public-cta);
    margin-left: auto;
    margin-right: auto;
}

/* Kartu seragam — halaman publik */
.site-card {
    background: #fff;
    border: 1px solid var(--brand-border, rgba(52, 44, 36, 0.1));
    border-radius: 1.25rem;
    box-shadow: 0 12px 40px rgba(52, 44, 36, 0.08);
}
.site-card--accent {
    border-width: 2px;
    border-color: rgba(74, 103, 65, 0.28);
    box-shadow: 0 16px 48px rgba(52, 44, 36, 0.1);
}
.site-card--center {
    text-align: center;
}
.site-card__body {
    padding: clamp(1.25rem, 3vw, 1.75rem);
}
@media (min-width: 640px) {
    .site-card__body--lg {
        padding: clamp(1.5rem, 3.5vw, 2rem);
    }
}
.site-card--media {
    overflow: hidden;
}
.site-card--interactive {
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.site-card--interactive:hover {
    box-shadow: 0 18px 48px rgba(52, 44, 36, 0.12);
    border-color: rgba(74, 103, 65, 0.2);
}

/* Grid kartu publik */
.site-grid {
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.5rem);
}
.site-grid--2 {
    grid-template-columns: 1fr;
}
.site-grid--3 {
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .site-grid--2 { grid-template-columns: repeat(2, 1fr); }
    .site-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .site-grid--3 { grid-template-columns: repeat(3, 1fr); }
}
.site-grid--4 {
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .site-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .site-grid--4 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
    .site-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Katalog template — kartu kompak, banyak kolom (bukan 2 kolom lebar) */
.templates-catalog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.65rem, 1.8vw, 1rem);
}
@media (min-width: 480px) {
    .templates-catalog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (min-width: 768px) {
    .templates-catalog-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: clamp(0.75rem, 1.5vw, 1.1rem);
    }
}
@media (min-width: 1024px) {
    .templates-catalog-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.template-catalog-card {
    min-width: 0;
}
.template-catalog-card__inner {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(52, 44, 36, 0.1);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(52, 44, 36, 0.06);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.template-catalog-card:hover .template-catalog-card__inner {
    transform: translateY(-3px);
    border-color: rgba(74, 103, 65, 0.22);
    box-shadow: 0 14px 36px rgba(52, 44, 36, 0.1);
}
.template-catalog-card__thumb {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #f1f5f3;
}
.template-catalog-card__body {
    padding: 0.5rem 0.55rem 0.65rem;
    text-align: center;
}
.template-catalog-card__cat {
    display: block;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-accent, #4a6741);
    line-height: 1.2;
}
.template-catalog-card__name {
    margin: 0.15rem 0 0;
    font-family: 'Playfair Display', serif;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--brand-ink, #342c24);
}
.template-catalog-card__desc {
    margin: 0.2rem 0 0;
    font-size: 0.6875rem;
    line-height: 1.45;
    color: var(--brand-ink-muted, #6b5f52);
}
.template-catalog-card .template-listing-actions {
    margin-top: 0.45rem;
}
.template-catalog-card .template-listing-actions__btn {
    min-height: 2rem;
    font-size: 0.6875rem;
    padding: 0.3rem 0.5rem;
}
.template-catalog-card__thumb > .absolute.left-3.top-3 {
    display: none;
}
.template-catalog-card .template-actions-overlay {
    padding: 0.45rem;
}
.template-catalog-card .template-action-btn {
    padding: 0.45rem 0.5rem;
    font-size: 0.6875rem;
    margin-bottom: 0.35rem;
    border: 1px solid rgba(255, 255, 255, 0.82);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
    color: var(--brand-ink, #1f2937);
    background: rgba(255, 255, 255, 0.96);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.template-catalog-card .template-action-btn:last-child {
    margin-bottom: 0;
}
.template-catalog-card .template-action-btn:hover,
.template-catalog-card .template-action-btn:focus-visible {
    color: #fff !important;
    background: var(--invitkeun-dark, #3a5234) !important;
    border-color: var(--invitkeun-dark, #3a5234);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.26);
    transform: translateY(-1px);
}
.template-catalog-card .template-action-btn.bg-invitkeun {
    color: #fff;
    background: var(--invitkeun, #4a6741);
    border-color: var(--invitkeun, #4a6741);
}
.template-catalog-card .template-action-btn.bg-invitkeun:hover,
.template-catalog-card .template-action-btn.bg-invitkeun:focus-visible {
    background: var(--invitkeun-dark, #3a5234) !important;
    border-color: var(--invitkeun-dark, #3a5234);
}
/* Jangan gandakan shadow dari .template-card legacy */
.templates-catalog-grid .template-catalog-card {
    background: transparent;
    border: none;
    box-shadow: none;
}
.templates-catalog-grid .template-catalog-card:hover {
    transform: none;
    box-shadow: none;
}

.template-thumb-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: top center;
}
.landing-template-card__thumb .template-thumb-img,
.template-catalog-card__thumb .template-thumb-img,
.template-picker-phone .template-thumb-img {
    min-height: 100%;
}

/* Halaman auth — lebar luar sama, kartu form di tengah */
.site-page--auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7rem var(--site-pad) 3rem;
    background: linear-gradient(180deg, var(--brand-cream-light) 0%, var(--brand-cream-soft) 45%, #fff 100%);
}
.auth-panel {
    width: 100%;
    max-width: 26rem;
    margin-left: auto;
    margin-right: auto;
}
.auth-panel-card {
    background: #fff;
    border-radius: 1.25rem;
    border: 1px solid #f1f5f9;
    box-shadow: 0 24px 60px rgba(61, 107, 79, 0.08);
    padding: 1.5rem;
}
@media (min-width: 640px) {
    .auth-panel-card { padding: 2rem; }
}

/* Legacy panel shell (bukan layout site-panel baru — lihat dashboard-user.css / admin-panel.css) */
body:not(.site-panel) .dashboard-shell,
body:not(.site-panel) .admin-shell {
    width: 100%;
    max-width: var(--site-max);
    margin-left: auto;
    margin-right: auto;
    padding: 1.25rem var(--site-pad) 2rem;
    min-height: calc(100vh - 3.5rem);
}
@media (min-width: 1024px) {
    body:not(.site-panel) .dashboard-shell,
    body:not(.site-panel) .admin-shell {
        padding: 1.75rem var(--site-pad-sm) 2.5rem;
    }
}
.dashboard-page-header h1 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
}
.dashboard-page-header p {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.25rem;
}
.dashboard-empty {
    width: 100%;
    max-width: 28rem;
    margin: 2rem auto 0;
    padding: 2.5rem 1.75rem;
    text-align: center;
    background: #fff;
    border: 1px solid #eef2f0;
    border-radius: 1.25rem;
    box-shadow: 0 12px 40px rgba(61, 107, 79, 0.06);
}
.dashboard-empty-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    border-radius: 1rem;
    background: rgba(61, 107, 79, 0.1);
    color: var(--invitkeun);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}
.dashboard-card {
    background: #fff;
    border: 1px solid #eef2f0;
    border-radius: 1rem;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.04);
}

/* Pemilih template — indikator jelas (tanpa peer Tailwind) */
.template-picker-card {
    border: 2px solid #e5e7eb;
    border-radius: 1rem;
    padding: 0.5rem;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    position: relative;
}
.template-picker-card:hover {
    border-color: rgba(61, 107, 79, 0.45);
    transform: translateY(-2px);
}
.template-picker-card.is-selected {
    border-color: var(--invitkeun);
    box-shadow: 0 0 0 3px rgba(61, 107, 79, 0.22);
}
.template-picker-phone {
    position: relative;
    aspect-ratio: 9 / 16;
    border-radius: 0.75rem;
    overflow: hidden;
    background: #111827;
}
.template-picker-phone img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.template-picker-badge {
    position: absolute;
    top: 0.35rem;
    left: 0.35rem;
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.15rem 0.4rem;
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
}
.template-picker-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: #374151;
    margin-top: 0.5rem;
    text-align: center;
    line-height: 1.2;
}
.template-picker-selected-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    width: 100%;
    margin-top: 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--invitkeun);
}

/* Kartu fitur landing — grid rapi 3 kolom */
.feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 640px) {
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .feature-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}
.feature-card {
    text-align: center;
    padding: 1.75rem 1.25rem;
    border-radius: 1.25rem;
    border: 1px solid #eef2f0;
    background: #fff;
    box-shadow: 0 8px 30px rgba(61, 107, 79, 0.04);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.feature-card p {
    flex: 1;
    max-width: 18rem;
    margin-left: auto;
    margin-right: auto;
}

* { box-sizing: border-box; }
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    max-width: 100%;
}
body {
    min-height: 100vh;
    overflow-x: hidden;
    max-width: 100%;
    color: #1f2937;
    background: linear-gradient(180deg, #fbfdfb 0%, #ffffff 38%, #f8fafc 100%);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body.site-panel,
body.site-panel.dash-root,
body.site-panel.panel-root {
    margin: 0;
    padding: 0;
    min-height: 0;
    background: var(--brand-cream-soft, #faf6f1) !important;
}

html.dash-html {
    margin: 0;
    padding: 0;
    background: var(--brand-cream-soft, #faf6f1);
}
a { text-underline-offset: 3px; }
img, video { max-width: 100%; height: auto; }
img { background: #eef4ef; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: var(--invitkeun); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--invitkeun-dark); }
::selection { background: var(--invitkeun); color: white; }

.line-clamp-2,
.line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-2 { -webkit-line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; }

.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: 999px;
    padding: .7rem 1.35rem;
    font-weight: 600;
    font-size: .9rem;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-primary { background: var(--invitkeun); color: #fff; box-shadow: 0 12px 28px rgba(61,107,79,.18); }
.btn-primary:hover { background: var(--invitkeun-dark); transform: translateY(-1px); box-shadow: 0 16px 34px rgba(61,107,79,.24); }
.btn-primary i,
.btn-primary .fas,
.btn-primary .far,
.btn-primary .fab {
    color: inherit;
}
.btn-secondary { background: #fff; color: var(--invitkeun); border: 1px solid rgba(61,107,79,.16); }
.btn-secondary:hover { background: var(--soft); transform: translateY(-1px); }

.form-input,
.form-select,
.form-textarea,
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="date"], select, textarea {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: .9rem;
    background: #fff;
    padding: .72rem 1rem;
    font-size: .92rem;
    line-height: 1.45;
    color: #111827;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus,
input:focus, select:focus, textarea:focus {
    border-color: var(--invitkeun);
    box-shadow: 0 0 0 4px rgba(61,107,79,.12);
}
textarea { min-height: 110px; resize: vertical; }

/* Input dengan ikon kiri/kanan — hindari tabrakan teks & ikon */
.input-icon-wrap {
    position: relative;
    display: block;
    width: 100%;
}
.input-icon-wrap > .input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
    color: #9ca3af;
    width: 1.125rem;
    text-align: center;
    line-height: 1;
    font-size: 0.95rem;
}
.input-icon-wrap > .input-icon-btn {
    position: absolute;
    right: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    padding: 0.35rem;
    color: #9ca3af;
    background: transparent;
    border: none;
    cursor: pointer;
    line-height: 1;
}
.input-icon-wrap > .input-icon-btn:hover { color: #4b5563; }
.input-icon-wrap .form-input,
.input-icon-wrap input[type="text"],
.input-icon-wrap input[type="email"],
.input-icon-wrap input[type="password"],
.input-icon-wrap input[type="tel"] {
    padding-left: 2.75rem !important;
    padding-right: 1rem !important;
}
.input-icon-wrap.input-icon-wrap--toggle .form-input,
.input-icon-wrap.input-icon-wrap--toggle input[type="password"] {
    padding-right: 2.75rem !important;
}

.auth-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 0.25rem;
    min-height: 3rem;
}

.template-card,
.dashboard-card,
.admin-card,
.stat-card {
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(226,232,240,.9);
    border-radius: 1.25rem;
    box-shadow: 0 16px 38px rgba(15,23,42,.06);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.template-card:hover,
.dashboard-card:hover,
.admin-card:hover,
.stat-card:hover {
    transform: translateY(-4px);
    border-color: rgba(61,107,79,.22);
    box-shadow: 0 22px 48px rgba(15,23,42,.1);
}
.template-card img,
.card-image {
    width: 100%;
    object-fit: cover;
    display: block;
}

.template-listing-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.template-listing-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.template-listing-meta h3 {
    margin: 0;
}

.template-listing-actions {
    display: none;
    gap: 0.5rem;
    margin-top: 0.65rem;
    justify-content: center;
}

.template-listing-actions__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    flex: 1 1 0;
    min-height: 2.25rem;
    padding: 0.4rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.template-listing-actions__btn--demo {
    color: var(--invitkeun, #3d6b4f);
    background: #fff;
    border: 1px solid rgba(61, 107, 79, 0.35);
}

.template-listing-actions__btn--demo:hover {
    background: var(--invitkeun, #3d6b4f);
    color: #fff;
}

.template-listing-actions__btn--order {
    color: #fff;
    background: var(--invitkeun, #3d6b4f);
    border: 1px solid var(--invitkeun, #3d6b4f);
}

.template-listing-actions__btn--order:hover {
    background: #2f5539;
    border-color: #2f5539;
}

@media (hover: none), (max-width: 767px) {
    .template-listing-actions {
        display: flex;
    }
}

@media (min-width: 768px) {
    .template-card:hover .template-listing-actions {
        display: none;
    }
}

.page-shell { padding: 1.25rem; }
.page-header-card {
    background: linear-gradient(135deg, rgba(61,107,79,.10), rgba(201,169,110,.12));
    border: 1px solid rgba(61,107,79,.12);
    border-radius: 1.5rem;
    padding: 1.5rem;
}
.empty-state {
    border: 1px dashed rgba(61,107,79,.28);
    border-radius: 1.5rem;
    padding: 2rem;
    background: linear-gradient(135deg, #ffffff, #f5faf6);
    text-align: center;
}

.page-loader {
    position: fixed;
    inset: 0;
    background: white;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .5s ease, visibility .5s ease;
}
.page-loader.loaded { opacity: 0; visibility: hidden; }
.audio-player { position: fixed; bottom: 20px; right: 20px; z-index: 1000; }
.invitation-cover { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }

.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.9);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease;
}
.lightbox.active { opacity: 1; visibility: visible; }
.lightbox img { max-width: 90%; max-height: 90%; object-fit: contain; border-radius: .75rem; }

.countdown-item { text-align: center; }
.countdown-item .number { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--invitkeun); font-family: 'Playfair Display', serif; }
.countdown-item .label { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: .25rem; }
.guestbook-card { background: #fff; border-radius: 1rem; padding: 1rem; border: 1px solid #f1f5f9; box-shadow: 0 8px 24px rgba(15,23,42,.05); transition: .25s ease; }
.guestbook-card:hover { border-color: #b0d4ba; box-shadow: 0 14px 32px rgba(15,23,42,.08); }
.nav-pill { position: relative; }
.nav-pill::after { content: ''; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: var(--invitkeun); transition: width .3s ease; }
.nav-pill:hover::after, .nav-pill.active::after { width: 100%; }

/* Mobile nav — lihat brand-public.css (.site-navbar__mobile) */
.spinner { width: 40px; height: 40px; border: 3px solid #e5e7eb; border-top-color: var(--invitkeun); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.img-skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.glass { background: rgba(255,255,255,.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.24); }
.template-preview-frame { width: 100%; height: 100%; border: none; border-radius: .9rem; background: white; }

.admin-sidebar { width: 16rem; background: #0a150e; color: rgba(255,255,255,.8); position: fixed; left: 0; top: 0; bottom: 0; overflow-y: auto; z-index: 40; }
.admin-sidebar-link { display: flex; align-items: center; gap: .75rem; padding: .65rem 1rem; font-size: .9rem; border-radius: .75rem; transition: .2s ease; }
.admin-sidebar-link:hover, .admin-sidebar-link.active { background: rgba(255,255,255,.12); color: #fff; }

.prose { color: #374151; line-height: 1.8; }
.prose p { margin: 0 0 1rem; }
.prose h2, .prose h3 { color: #111827; font-weight: 700; margin: 1.5rem 0 .75rem; }




.templates-hero { display: flex; align-items: center; justify-content: center; isolation: isolate; background: radial-gradient(circle at 50% 12%, rgba(201,169,110,.28), transparent 28%), linear-gradient(135deg, #0f2b1b 0%, #163f29 48%, #2f6144 100%) !important; min-height: clamp(460px, 42vw, 540px); }
.templates-hero > .relative { position: relative; z-index: 2; }
.templates-hero h1, .templates-hero h2, .templates-hero p, .templates-hero span { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.22); }
.templates-hero p { color: rgba(255,255,255,.86) !important; }
.public-hero-safe { padding-top: 10rem; }
@media (max-width: 640px) { .templates-hero { min-height: 430px; } .templates-hero h1 { font-size: 3.05rem; line-height: .95; } .templates-hero h2 { font-size: 1.45rem; } .templates-hero p { font-size: .95rem; } }

/* Premium template listing */
.templates-hero::after { content: none; }
.templates-hero-grid { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.25) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.25) 1px, transparent 1px); background-size: 56px 56px; transform: perspective(900px) rotateX(62deg) translateY(34%); transform-origin: bottom; }
.templates-hero-orb { position: absolute; width: min(36vw, 420px); aspect-ratio: 1; border-radius: 999px; filter: blur(8px); opacity: .45; }
.templates-hero-orb-1 { left: 8%; top: 22%; background: radial-gradient(circle, rgba(201,169,110,.38), transparent 68%); }
.templates-hero-orb-2 { right: 8%; top: 12%; background: radial-gradient(circle, rgba(255,255,255,.20), transparent 70%); }
.templates-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; max-width: 100%; padding-inline: .25rem; }
.templates-tabs a { flex: 0 0 auto; box-shadow: 0 10px 26px rgba(15,23,42,.05); }
.template-card-3d { perspective: 1200px; background: transparent; border: 0; box-shadow: none; }
.template-card-3d > div { transform-style: preserve-3d; box-shadow: 0 22px 50px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.75); }
.template-card-3d:hover > div { transform: translateY(-8px) rotateX(4deg) rotateY(-4deg); box-shadow: 0 34px 70px rgba(15,23,42,.16); }
.template-card-shine { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: linear-gradient(115deg, transparent 15%, rgba(255,255,255,.42) 42%, transparent 62%); transform: translateX(-65%); transition: opacity .35s ease, transform .7s ease; }
.template-card-3d:hover .template-card-shine { opacity: 1; transform: translateX(65%); }
.template-showcase { --mockup-a: #d9e8de; --mockup-b: #89a993; --mockup-c: #fff7ed; background: radial-gradient(circle at 18% 28%, rgba(255,255,255,.55), transparent 24%), linear-gradient(135deg, var(--mockup-a), var(--mockup-b)); isolation: isolate; }
.template-showcase::before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.34) 0 18%, transparent 18% 100%); opacity: .75; }
.template-light-beam { position: absolute; inset: -20% -10% auto auto; width: 80%; height: 70%; background: linear-gradient(135deg, rgba(255,255,255,.40), transparent 60%); filter: blur(2px); transform: rotate(-18deg); }
.template-phone-mockup, .template-mini-card { position: absolute; overflow: hidden; background: #fff; box-shadow: 0 24px 52px rgba(15,23,42,.24); transition: transform .45s ease, box-shadow .45s ease; }
.template-phone-mockup img, .template-mini-card img { width: 100%; height: 100%; object-fit: cover; }
.template-phone-mockup { left: 9%; bottom: 13%; width: 31%; height: 69%; z-index: 3; border: 7px solid #141414; border-radius: 1.4rem; transform: rotate(-3deg) translateZ(38px); }
.template-phone-notch { position: absolute; left: 50%; top: 0; z-index: 4; width: 44%; height: 12px; border-radius: 0 0 12px 12px; background: #141414; transform: translateX(-50%); }
.template-mini-card { z-index: 2; border-radius: 1.15rem; border: 1px solid rgba(255,255,255,.55); }
.template-mini-card-front { right: 12%; bottom: 14%; width: 35%; height: 66%; transform: rotate(10deg) translateZ(24px); }
.template-mini-card-back { right: 28%; top: 16%; width: 36%; height: 58%; transform: rotate(-8deg) translateZ(16px); filter: saturate(.96); }
.template-card-3d:hover .template-phone-mockup { transform: rotate(-5deg) translateY(-8px) translateZ(48px); box-shadow: 0 32px 68px rgba(15,23,42,.30); }
.template-card-3d:hover .template-mini-card-front { transform: rotate(13deg) translate(7px,-10px) translateZ(34px); }
.template-card-3d:hover .template-mini-card-back { transform: rotate(-11deg) translate(-6px,-7px) translateZ(24px); }
.template-actions-overlay {
    transform: translateZ(80px);
    pointer-events: none;
    z-index: 30;
}
.template-card:hover .template-actions-overlay,
.template-card-3d:hover .template-actions-overlay,
.template-actions-overlay:focus-within {
    pointer-events: auto;
}
.template-actions-overlay a {
    position: relative;
    z-index: 2;
    pointer-events: auto;
    box-shadow: 0 14px 30px rgba(15,23,42,.22);
}
/* Touch / mobile: tombol overlay selalu bisa diklik */
@media (hover: none), (max-width: 767px) {
    .template-card .template-actions-overlay {
        opacity: 1 !important;
        pointer-events: auto;
        background: linear-gradient(to top, rgba(15, 23, 42, 0.82) 0%, rgba(15, 23, 42, 0.35) 42%, transparent 72%) !important;
    }
}
.template-mockup-1 .template-showcase { --mockup-a: #dfe9dd; --mockup-b: #88a58d; --mockup-c: #f8f4e9; }
.template-mockup-2 .template-showcase { --mockup-a: #f2d5da; --mockup-b: #c98791; --mockup-c: #fff7f8; }
.template-mockup-3 .template-showcase { --mockup-a: #cfd8df; --mockup-b: #947458; --mockup-c: #f8f1e9; }
.template-mockup-4 .template-showcase { --mockup-a: #d5d7d8; --mockup-b: #6f7276; --mockup-c: #f7f7f7; }
.template-mockup-5 .template-showcase { --mockup-a: #eed4d5; --mockup-b: #8b2438; --mockup-c: #fff4f5; }
.template-mockup-6 .template-showcase { --mockup-a: #cfe1d2; --mockup-b: #315f4b; --mockup-c: #f2f8f3; }

@media (max-width: 640px) {
    .templates-hero-grid { transform: perspective(700px) rotateX(64deg) translateY(45%); }
    .template-card-3d:hover > div { transform: translateY(-5px); }
}

@media (max-width: 640px) {
    body { background: #fff; }
    .page-shell { padding: 1rem; }
    .template-card, .dashboard-card, .admin-card, .stat-card { border-radius: 1rem; }
}
@media print {
    .no-print { display: none !important; }
    body { background: white !important; }
}


/* Responsive safety audit fixes */
html, body { max-width: 100%; overflow-x: hidden; }

/* Panel dashboard/admin: scroll dikelola panel-shell.css */
@media (min-width: 1024px) {
    html.panel-html,
    html.dash-html {
        overflow: hidden;
        height: 100dvh;
        min-height: 100dvh;
        max-height: 100dvh;
    }
    body.site-panel.dash-root,
    body.site-panel.panel-root {
        overflow: hidden;
        height: 100dvh;
        min-height: 100dvh;
        max-height: 100dvh;
    }
}
main { min-width: 0; }
img, video, iframe { max-width: 100%; }
.prose, .page-shell, .dashboard-card, .admin-card, .template-card { overflow-wrap: anywhere; }
.page-shell { width: 100%; max-width: 100vw; }

@media (max-width: 768px) {
    h1 { line-height: 1.12; }
    h2, h3 { line-height: 1.2; }
    .page-header-card { padding: 1.1rem; border-radius: 1.15rem; }
    .page-header-card h1, .page-header-card h2 { font-size: clamp(1.35rem, 7vw, 2rem); }
    table { display: block; width: 100%; max-width: calc(100vw - 2rem); overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
    th, td { padding-left: .85rem !important; padding-right: .85rem !important; }
    .form-input, .form-select, .form-textarea, input, select, textarea { font-size: 16px; }
    .rounded-2xl { border-radius: 1rem; }
}

@media (max-width: 640px) { .templates-tabs { flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto; padding-inline: 1rem; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .templates-tabs::-webkit-scrollbar { display: none; } .templates-tabs a { flex: 0 0 auto !important; max-width: none !important; justify-content: center; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; scroll-snap-align: start; } }