/* =============================================
   PUBLIC PAGES STYLES
   Government-grade: clean, elegant, professional
   Border radius max 0.5rem
   ============================================= */

:root {
    --pub-radius: 0.5rem;
    --pub-radius-sm: 0.375rem;
    --pub-border: #e5ddd2;
    --pub-border-soft: #f0ebe3;
    --pub-sand-50: #FBF8F4;
    --pub-sand-100: #F5EFE6;
    --pub-brand-50: #FEF6F1;
    --pub-brand-100: #FDEAE0;
    --pub-brand-500: #F18052;
    --pub-brand-600: #E06838;
    --pub-brand-700: #BA522A;
    --pub-slate-700: #334155;
    --pub-slate-500: #64748b;
    --pub-slate-400: #94a3b8;
}

/* ---------- PAGE LAYOUT ---------- */
.pub-page {
    padding-top: 2rem;
    padding-bottom: 4rem;
}

.pub-container {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
@media (min-width: 640px) {
    .pub-container { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
    .pub-container { padding-left: 2rem; padding-right: 2rem; }
}

/* ---------- PAGE HERO (small) ---------- */
.pub-hero {
    background: white;
    border-bottom: 1px solid var(--pub-border-soft);
    padding: 2.5rem 0 2rem;
}
.pub-hero h1 {
    font-size: 1.875rem;
    font-weight: 800;
    color: #1e293b;
    letter-spacing: -0.025em;
    line-height: 1.2;
}
@media (min-width: 768px) {
    .pub-hero h1 { font-size: 2.25rem; }
}
.pub-hero p {
    color: var(--pub-slate-500);
    margin-top: 0.5rem;
    font-size: 1rem;
    max-width: 42rem;
}
.pub-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    background: white;
    border: 1px solid var(--pub-brand-100);
    border-radius: var(--pub-radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pub-brand-700);
    margin-bottom: 0.875rem;
}

/* ---------- FILTER PANEL ---------- */
.pub-filter-panel {
    background: white;
    border: 1px solid var(--pub-border-soft);
    border-radius: var(--pub-radius);
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
}
@media (min-width: 768px) {
    .pub-filter-panel { padding: 1.5rem; }
}
.pub-filter-grid {
    display: grid;
    gap: 0.875rem;
    grid-template-columns: 1fr;
}

.pub-filter-group label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--pub-slate-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.375rem;
}
.pub-filter-group input,
.pub-filter-group select {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius-sm);
    font-size: 0.875rem;
    color: #1e293b;
    background: white;
    transition: border-color 0.15s, box-shadow 0.15s;
    appearance: none;
    -webkit-appearance: none;
}
.pub-filter-group input:focus,
.pub-filter-group select:focus {
    outline: none;
    border-color: var(--pub-brand-500);
    box-shadow: 0 0 0 3px rgba(241,128,82,0.12);
}
.pub-filter-actions {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-top: 0.75rem;
}

/* Katalog layout: sidebar + content */
.pub-katalog-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
}
@media (min-width: 1024px) {
    .pub-katalog-layout { grid-template-columns: 18rem 1fr; gap: 2rem; }
}
.pub-katalog-sidebar {
    position: relative;
}
@media (min-width: 1024px) {
    .pub-katalog-sidebar { position: sticky; top: 5rem; align-self: start; max-height: calc(100vh - 6rem); overflow-y: auto; }
}
.pub-katalog-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.pub-katalog-sidebar-head h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.pub-katalog-sidebar-head h3 svg { width: 1.125rem; height: 1.125rem; color: var(--pub-brand-500); }
.pub-katalog-mobile-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: white;
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--pub-slate-700);
    cursor: pointer;
    margin-bottom: 1rem;
    width: 100%;
    justify-content: center;
}
@media (min-width: 1024px) { .pub-katalog-mobile-toggle { display: none; } }
.pub-katalog-mobile-toggle svg { width: 1rem; height: 1rem; }
.pub-katalog-sidebar-content {
    display: block;
}
@media (max-width: 1023px) {
    .pub-katalog-sidebar-content.collapsed { display: none; }
}

.pub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.125rem;
    border-radius: var(--pub-radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid transparent;
    line-height: 1.25rem;
    white-space: nowrap;
}
.pub-btn-primary {
    background: var(--pub-brand-500);
    color: white;
}
.pub-btn-primary:hover { background: var(--pub-brand-600); }
.pub-btn-ghost {
    background: white;
    color: var(--pub-slate-700);
    border-color: var(--pub-border);
}
.pub-btn-ghost:hover { background: var(--pub-sand-50); border-color: var(--pub-brand-300); }

/* Active filter chips */
.pub-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--pub-border-soft);
}
.pub-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: var(--pub-brand-50);
    border: 1px solid var(--pub-brand-100);
    border-radius: var(--pub-radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pub-brand-700);
}
.pub-chip button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--pub-brand-600);
    opacity: 0.7;
    display: flex;
    align-items: center;
}
.pub-chip button:hover { opacity: 1; }

/* ---------- RESULT COUNT BAR ---------- */
.pub-result-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.pub-result-count {
    font-size: 0.875rem;
    color: var(--pub-slate-500);
}
.pub-result-count strong { color: #1e293b; font-weight: 700; }

.pub-sort-select {
    background: transparent;
    border: none;
    padding: 0.125rem 1rem 0.125rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: color 0.15s;
}
.pub-sort-select:hover { color: var(--pub-brand-600); }
.pub-sort-select:focus { color: var(--pub-brand-600); }

/* ---------- KATALOG CARD GRID ---------- */
.pub-card-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) { .pub-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pub-card-grid { grid-template-columns: repeat(3, 1fr); } }

.pub-card {
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid var(--pub-border-soft);
    border-radius: var(--pub-radius);
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
    position: relative;
}
.pub-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--pub-brand-500), var(--pub-brand-600));
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 3;
}
.pub-card:hover {
    box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.12), 0 4px 10px -4px rgba(15, 23, 42, 0.06);
    transform: translateY(-2px);
    border-color: var(--pub-brand-200);
}
.pub-card:hover::before { opacity: 1; }
.pub-card-img {
    position: relative;
    width: 100%;
    height: 11rem;
    overflow: hidden;
    background: var(--pub-sand-100);
}
.pub-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.pub-card:hover .pub-card-img img { transform: scale(1.04); }
.pub-card-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pub-slate-400);
    background: linear-gradient(135deg, var(--pub-brand-50), var(--pub-sand-50));
    position: relative;
    overflow: hidden;
}
.pub-card-img-placeholder::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2740%27 height=%2740%27%3E%3Cpath d=%27M0 0h40v40H0z%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271%27/%3E%3C/svg%3E");
}
.pub-card-img-placeholder i {
    position: relative;
    z-index: 1;
    transition: transform 0.3s;
}
a:hover .pub-card-img-placeholder i {
    transform: scale(1.1);
}
.pub-card-badges {
    position: absolute;
    top: 0.625rem;
    left: 0.625rem;
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}
.pub-card-badge {
    padding: 0.25rem 0.5rem;
    border-radius: var(--pub-radius-sm);
    font-size: 0.65rem;
    font-weight: 700;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.pub-card-badge-bangun { background: rgba(241,128,82,0.92); color: white; }
.pub-card-badge-bangun-selesai { background: rgba(34,197,94,0.92); color: white; }
.pub-card-badge-bangun-proses { background: rgba(59,130,246,0.92); color: white; }
.pub-card-badge-psu { background: rgba(255,255,255,0.9); color: #334155; }
.pub-card-badge-rating {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--pub-radius-sm);
    font-size: 0.65rem;
    font-weight: 700;
    background: rgba(255,255,255,0.9);
    color: #d97706;
    backdrop-filter: blur(4px);
}


.pub-card-body {
    padding: 1.125rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.pub-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.35;
    margin-bottom: 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pub-card-pengembang {
    font-size: 0.75rem;
    color: var(--pub-brand-600);
    font-weight: 600;
    margin-bottom: 0.625rem;
}
.pub-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--pub-slate-500);
    margin-top: auto;
    padding-top: 0.625rem;
    border-top: 1px solid var(--pub-border-soft);
}
.pub-card-meta-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.pub-card-meta-row svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }

/* ---------- EMPTY STATE ---------- */
.pub-empty {
    text-align: center;
    padding: 4rem 1.5rem;
    background: white;
    border: 1px solid var(--pub-border-soft);
    border-radius: var(--pub-radius);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
}
.pub-empty-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    background: var(--pub-sand-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pub-slate-400);
}
.pub-empty h3 { font-size: 1.125rem; font-weight: 700; color: #1e293b; margin-bottom: 0.375rem; }
.pub-empty p { font-size: 0.875rem; color: var(--pub-slate-500); max-width: 24rem; margin: 0 auto; }

/* ---------- PAGINATION ---------- */
.pub-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.375rem;
    margin-top: 2.5rem;
}
.pub-pagination a,
.pub-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.625rem;
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--pub-slate-700);
    background: white;
    text-decoration: none;
    transition: all 0.15s;
}
.pub-pagination a:hover { border-color: var(--pub-brand-500); color: var(--pub-brand-600); }
.pub-pagination .active {
    background: var(--pub-brand-500);
    border-color: var(--pub-brand-500);
    color: white;
}
.pub-pagination .disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* ---------- DETAIL PERUMAHAN ---------- */
.pub-detail-section {
    background: white;
    border: 1px solid var(--pub-border-soft);
    border-radius: var(--pub-radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
}
@media (min-width: 768px) { .pub-detail-section { padding: 2rem; } }
.pub-detail-section h2 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--pub-border-soft);
}
.pub-detail-section h2 svg { width: 1.25rem; height: 1.25rem; color: var(--pub-brand-500); }

.pub-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 768px) { .pub-info-grid { grid-template-columns: repeat(2, 1fr); } }

.pub-info-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--pub-sand-50);
    border-radius: var(--pub-radius-sm);
    border: 1px solid var(--pub-border-soft);
}
.pub-info-item .icon-wrap {
    width: 2rem;
    height: 2rem;
    background: var(--pub-brand-50);
    border-radius: var(--pub-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pub-info-item .icon-wrap svg { width: 1rem; height: 1rem; color: var(--pub-brand-600); }
.pub-info-item .label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--pub-slate-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pub-info-item .value { font-size: 0.875rem; font-weight: 600; color: #1e293b; margin-top: 0.125rem; word-break: break-word; }

/* Badge status publik */
.pub-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3rem 0.625rem;
    border-radius: var(--pub-radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid transparent;
}
.pub-status-badge .dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; }
.pub-status-belum { background: #FEF3F2; color: #B42318; border-color: #FECDCA; }
.pub-status-belum .dot { background: #F04438; }
.pub-status-proses { background: #EFF8FF; color: #175CD3; border-color: #B2DDFF; }
.pub-status-proses .dot { background: #2E90FA; }
.pub-status-selesai { background: #ECFDF3; color: #067647; border-color: #ABEFC6; }
.pub-status-selesai .dot { background: #12B76A; }
.pub-status-psu-sudah { background: #ECFDF3; color: #067647; border-color: #ABEFC6; }
.pub-status-psu-belum { background: #FEF3F2; color: #B42318; border-color: #FECDCA; }

/* Tipe rumah table */
.pub-table {
    width: 100%;
    border-collapse: collapse;
}
.pub-table th {
    text-align: left;
    padding: 0.625rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--pub-slate-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--pub-border);
    background: var(--pub-sand-50);
}
.pub-table td {
    padding: 0.75rem;
    font-size: 0.875rem;
    color: #334155;
    border-bottom: 1px solid var(--pub-border-soft);
}
.pub-table tr:last-child td { border-bottom: none; }

/* PSU card grid */
.pub-psu-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) { .pub-psu-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pub-psu-grid { grid-template-columns: repeat(3, 1fr); } }

.pub-psu-card {
    border: 1px solid var(--pub-border-soft);
    border-radius: var(--pub-radius);
    overflow: hidden;
    background: white;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
    transition: box-shadow 0.2s, transform 0.2s;
}
.pub-psu-card:hover {
    box-shadow: 0 8px 20px -6px rgba(15, 23, 42, 0.10);
    transform: translateY(-2px);
}
.pub-psu-card img {
    width: 100%;
    height: 8rem;
    object-fit: cover;
    background: var(--pub-sand-100);
}
.pub-psu-card-body { padding: 0.875rem 1rem; }
.pub-psu-card-body h4 { font-size: 0.875rem; font-weight: 700; color: #1e293b; margin-bottom: 0.25rem; }
.pub-psu-card-body .meta { font-size: 0.75rem; color: var(--pub-slate-500); display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 0.375rem; }

/* ---------- PENGEMBANG CARD ---------- */
.pub-pengembang-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) { .pub-pengembang-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pub-pengembang-grid { grid-template-columns: repeat(3, 1fr); } }

.pub-pengembang-card {
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid var(--pub-border-soft);
    border-radius: var(--pub-radius);
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
    position: relative;
    overflow: hidden;
}
.pub-pengembang-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--pub-brand-500), var(--pub-brand-600));
    opacity: 0;
    transition: opacity 0.2s;
}
.pub-pengembang-card:hover {
    box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.10), 0 4px 10px -4px rgba(15, 23, 42, 0.06);
    transform: translateY(-2px);
    border-color: var(--pub-brand-200);
}
.pub-pengembang-card:hover::before { opacity: 1; }
.pub-pengembang-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: var(--pub-radius-sm);
    background: linear-gradient(135deg, var(--pub-brand-500), var(--pub-brand-700));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.875rem;
}
.pub-pengembang-name { font-size: 1.0625rem; font-weight: 700; color: #1e293b; margin-bottom: 0.125rem; line-height: 1.3; }
.pub-pengembang-pj { font-size: 0.8125rem; color: var(--pub-slate-500); margin-bottom: 0.75rem; }
.pub-pengembang-meta {
    margin-top: auto;
    padding-top: 0.875rem;
    border-top: 1px solid var(--pub-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--pub-slate-500);
}
.pub-pengembang-count {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 700;
    color: var(--pub-brand-600);
}
.pub-pengembang-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--pub-brand-600);
    font-weight: 600;
}

/* ---------- FASILITASI ---------- */
.pub-fasilitasi-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) { .pub-fasilitasi-grid { grid-template-columns: repeat(3, 1fr); } }

.pub-fasilitasi-card {
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid var(--pub-border-soft);
    border-radius: var(--pub-radius);
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
}
.pub-fasilitasi-card:hover {
    box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.10), 0 4px 10px -4px rgba(15, 23, 42, 0.06);
    transform: translateY(-2px);
}
.pub-fasilitasi-banner {
    height: 0.375rem;
    background: linear-gradient(90deg, var(--pub-brand-500), var(--pub-brand-700));
}
.pub-fasilitasi-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.pub-fasilitasi-icon {
    width: 3rem;
    height: 3rem;
    background: var(--pub-brand-50);
    border-radius: var(--pub-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pub-brand-600);
    margin-bottom: 1rem;
}
.pub-fasilitasi-title { font-size: 1.125rem; font-weight: 700; color: #1e293b; margin-bottom: 0.5rem; line-height: 1.3; }
.pub-fasilitasi-desc { font-size: 0.875rem; color: var(--pub-slate-500); line-height: 1.55; margin-bottom: 1.25rem; }
.pub-fasilitasi-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    font-size: 0.8125rem;
    color: var(--pub-slate-700);
}
.pub-fasilitasi-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.25rem 0;
}
.pub-fasilitasi-list li svg { width: 1rem; height: 1rem; color: var(--pub-brand-500); flex-shrink: 0; margin-top: 0.125rem; }
.pub-fasilitasi-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.125rem;
    background: var(--pub-brand-500);
    color: white;
    border-radius: var(--pub-radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}
.pub-fasilitasi-cta:hover { background: var(--pub-brand-600); }

/* ---------- ADUAN ---------- */
.pub-aduan-layout { } /* legacy, no longer used */

/* Form wrap — full width */
.pub-aduan-form-wrap {
    margin: 0 auto;
}

/* Divider with label */
.pub-aduan-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2.5rem 0;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}
.pub-aduan-divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--pub-border), transparent);
}
.pub-aduan-divider-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 1rem;
    background: white;
    border: 1px solid var(--pub-border-soft);
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--pub-slate-500);
    white-space: nowrap;
}
.pub-aduan-divider-label svg {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--pub-brand-500);
}

/* List wrap */
.pub-aduan-list-wrap {
    margin: 0 auto;
}

.pub-aduan-form-card {
    background: white;
    border: 1px solid var(--pub-border-soft);
    border-radius: var(--pub-radius);
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
}
@media (min-width: 768px) { .pub-aduan-form-card { padding: 2rem; } }

.pub-form-group { margin-bottom: 1.125rem; }
.pub-form-group label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 0.375rem;
}
.pub-form-group label .req { color: #dc2626; }
.pub-form-group input,
.pub-form-group textarea,
.pub-form-group select {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius-sm);
    font-size: 0.875rem;
    color: #1e293b;
    background: white;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
}
.pub-form-group input:focus,
.pub-form-group textarea:focus,
.pub-form-group select:focus {
    outline: none;
    border-color: var(--pub-brand-500);
    box-shadow: 0 0 0 3px rgba(241,128,82,0.12);
}
.pub-form-group .hint { font-size: 0.75rem; color: var(--pub-slate-400); margin-top: 0.25rem; }
.pub-form-group .error-text { font-size: 0.75rem; color: #dc2626; margin-top: 0.25rem; }

.pub-file-drop {
    border: 1.5px dashed var(--pub-border);
    border-radius: var(--pub-radius-sm);
    padding: 1.25rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: var(--pub-sand-50);
}
.pub-file-drop:hover { border-color: var(--pub-brand-500); background: var(--pub-brand-50); }
.pub-file-drop svg { width: 1.75rem; height: 1.75rem; color: var(--pub-slate-400); margin: 0 auto 0.5rem; }
.pub-file-drop p { font-size: 0.8125rem; color: var(--pub-slate-500); }
.pub-file-drop input { display: none; }

/* Aduan list item */
.pub-aduan-item {
    background: white;
    border: 1px solid var(--pub-border-soft);
    border-radius: var(--pub-radius);
    padding: 1.25rem;
    margin-bottom: 0.875rem;
    transition: box-shadow 0.15s;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
}
.pub-aduan-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.pub-aduan-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.625rem;
    margin-bottom: 0.5rem;
}
.pub-aduan-item-nama { font-size: 0.9375rem; font-weight: 700; color: #1e293b; }
.pub-aduan-item-date { font-size: 0.7rem; color: var(--pub-slate-400); white-space: nowrap; }
.pub-aduan-item-body {
    font-size: 0.8125rem;
    color: var(--pub-slate-700);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pub-aduan-item-meta {
    margin-top: 0.625rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--pub-border-soft);
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.7rem;
    color: var(--pub-slate-500);
}

/* ---------- ALERTS ---------- */
.pub-alert {
    padding: 0.875rem 1rem;
    border-radius: var(--pub-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    border: 1px solid;
}
.pub-alert-success { background: #ECFDF3; color: #067647; border-color: #ABEFC6; }
.pub-alert-error { background: #FEF3F2; color: #B42318; border-color: #FECDCA; }
.pub-alert svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; margin-top: 0.0625rem; }

/* ---------- WHATSAPP CTA ---------- */
.pub-wa-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: #dff2e6;
    color: #25813e;
    border-radius: var(--pub-radius-sm);
    font-weight: 600;
    font-size: 0.8125rem;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    border: 1px solid #c8e6d5;
}
.pub-wa-cta:hover { background: #c8e6d5; color: #1c6630; }
.pub-wa-cta svg { width: 1rem; height: 1rem; }

.pub-wa-cta-footer {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    /* background: #dff2e6;
    color: #25813e; */
    border-radius: var(--pub-radius-sm);
    font-weight: 600;
    font-size: 0.82rem;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    border: 1px solid #c8e6d5;
}
.pub-wa-cta-footer:hover { background: #e3e3e3; color: #1f2220; }
.pub-wa-cta-footer svg { width: 1rem; height: 1rem; }

/* ---------- CTA SECTION ---------- */
.pub-cta-section {
    background: linear-gradient(135deg, var(--pub-brand-600) 0%, var(--pub-brand-700) 100%);
    color: white;
    border-radius: var(--pub-radius);
    padding: 2rem;
    text-align: center;
    margin-top: 2rem;
}
@media (min-width: 768px) { .pub-cta-section { padding: 3rem; } }
.pub-cta-section h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 0.625rem; }
@media (min-width: 768px) { .pub-cta-section h2 { font-size: 2rem; } }
.pub-cta-section p { font-size: 1rem; opacity: 0.9; max-width: 32rem; margin: 0 auto 1.5rem; }
.pub-cta-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.pub-cta-section .pub-btn-white {
    background: white;
    color: var(--pub-brand-700);
    padding: 0.75rem 1.5rem;
    border-radius: var(--pub-radius-sm);
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: transform 0.15s;
}
.pub-cta-section .pub-btn-white:hover { transform: translateY(-1px); }
.pub-cta-section .pub-btn-outline-white {
    background: rgba(255,255,255,0.1);
    color: white;
    border: 1px solid rgba(255,255,255,0.4);
    padding: 0.75rem 1.5rem;
    border-radius: var(--pub-radius-sm);
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
    backdrop-filter: blur(4px);
    transition: background 0.15s;
}
.pub-cta-section .pub-btn-outline-white:hover { background: rgba(255,255,255,0.2); }

/* =============================================
   MARKETPLACE DETAIL LAYOUT
   ============================================= */

/* Auto-slide gallery */
.pub-gallery-wrap {
    position: relative;
    border-radius: var(--pub-radius);
    overflow: hidden;
    background: var(--pub-sand-100);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.pub-gallery-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
.pub-gallery-slide {
    min-width: 100%;
    height: 24rem;
    position: relative;
}
@media (min-width: 768px) { .pub-gallery-slide { height: 30rem; } }
.pub-gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pub-gallery-slide-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pub-slate-400);
    flex-direction: column;
    gap: 0.5rem;
}
.pub-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1e293b;
    transition: background 0.15s, transform 0.15s;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.pub-gallery-nav:hover { background: white; transform: translateY(-50%) scale(1.08); }
.pub-gallery-nav.prev { left: 0.75rem; }
.pub-gallery-nav.next { right: 0.75rem; }
.pub-gallery-nav svg { width: 1.25rem; height: 1.25rem; }
.pub-gallery-dots {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.375rem;
    z-index: 2;
}
.pub-gallery-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    border: none;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
    padding: 0;
}
.pub-gallery-dot.active { background: white; transform: scale(1.3); }
.pub-gallery-counter {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: var(--pub-radius-sm);
    z-index: 2;
}

/* Detail marketplace layout: main + sidebar */
.pub-detail-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
}
@media (min-width: 1024px) {
    .pub-detail-layout { grid-template-columns: 1fr 20rem; gap: 2rem; align-items: start; }
}
.pub-detail-main { min-width: 0; }
.pub-detail-sidebar {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
@media (min-width: 1024px) {
    .pub-detail-sidebar { position: sticky; top: 5rem; }
}

/* Detail header */
.pub-detail-header {
    background: white;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.pub-detail-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1e293b;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin-bottom: 0.5rem;
}
@media (min-width: 768px) { .pub-detail-title { font-size: 1.875rem; } }
.pub-detail-pengembang {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--pub-brand-600);
    font-weight: 600;
    margin-bottom: 0.75rem;
}
.pub-detail-pengembang svg { width: 1rem; height: 1rem; }
.pub-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Contact card (sticky sidebar) */
.pub-contact-card {
    background: white;
    border: 1px solid var(--pub-border-soft);
    border-radius: var(--pub-radius);
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
}
.pub-contact-card h3 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--pub-slate-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.875rem;
}
.pub-contact-pengembang {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--pub-border-soft);
}
.pub-contact-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: var(--pub-radius-sm);
    background: linear-gradient(135deg, var(--pub-brand-500), var(--pub-brand-700));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.125rem;
    font-weight: 700;
    flex-shrink: 0;
}
.pub-contact-info { min-width: 0; flex: 1; }
.pub-contact-name { font-size: 0.9375rem; font-weight: 700; color: #1e293b; line-height: 1.3; }
.pub-contact-pj { font-size: 0.75rem; color: var(--pub-slate-500); margin-top: 0.125rem; }

.pub-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.5rem 0;
    font-size: 0.8125rem;
    color: var(--pub-slate-700);
}
.pub-contact-row svg { width: 1rem; height: 1rem; color: var(--pub-slate-400); flex-shrink: 0; margin-top: 0.125rem; }
.pub-contact-row .label { font-size: 0.65rem; font-weight: 700; color: var(--pub-slate-400); text-transform: uppercase; letter-spacing: 0.05em; }
.pub-contact-row .value { font-weight: 600; color: #1e293b; word-break: break-word; }

.pub-contact-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}
.pub-contact-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--pub-brand-500);
    color: white;
    border-radius: var(--pub-radius-sm);
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s, transform 0.15s;
}
.pub-contact-phone:hover { background: var(--pub-brand-600); transform: translateY(-1px); }
.pub-contact-phone svg { width: 1.125rem; height: 1.125rem; }
.pub-contact-wa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: #dff2e6;
    color: #25813e;
    border-radius: var(--pub-radius-sm);
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    border: 1px solid #c8e6d5;
}
.pub-contact-wa:hover { background: #c8e6d5; color: #1c6630; }
.pub-contact-wa svg { width: 1rem; height: 1rem; }

/* Quick info card (sidebar) */
.pub-quick-info-card {
    background: white;
    border: 1px solid var(--pub-border-soft);
    border-radius: var(--pub-radius);
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
}
.pub-quick-info-card h3 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--pub-slate-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.875rem;
}
.pub-quick-info-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.pub-quick-info-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--pub-border-soft);
    font-size: 0.8125rem;
}
.pub-quick-info-item:last-child { border-bottom: none; }
.pub-quick-info-item .ql-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--pub-slate-500);
}
.pub-quick-info-item .ql-label svg { width: 0.875rem; height: 0.875rem; color: var(--pub-slate-400); }
.pub-quick-info-item .ql-value { font-weight: 700; color: #1e293b; text-align: right; }

/* Related perumahan */
.pub-related-section {
    margin-top: 2.5rem;
}
.pub-related-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}
.pub-related-head h2 {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1e293b;
    letter-spacing: -0.02em;
}
.pub-related-head a {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--pub-brand-600);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.pub-related-head a:hover { color: var(--pub-brand-700); }
.pub-related-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) { .pub-related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pub-related-grid { grid-template-columns: repeat(4, 1fr); } }


/* ---------- FILE UPLOAD FEEDBACK ---------- */
.pub-file-selected {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: var(--pub-radius-sm);
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: #166534;
}
.pub-file-selected svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #22C55E;
    flex-shrink: 0;
    margin: 0;
}
.pub-file-selected .file-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.pub-file-selected .file-remove {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: #94A3B8;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: color 0.15s;
}
.pub-file-selected .file-remove:hover {
    color: #DC2626;
}
.pub-file-selected .file-remove svg {
    width: 1rem;
    height: 1rem;
}
.pub-file-drop.has-file {
    border-color: #86EFAC;
    background: #F0FDF4;
}
.pub-file-drop.has-file p {
    color: #4ADE80;
}

/* ===========================
   REVIEW & RATING SECTION
   =========================== */
.pub-review-section {
    margin-top: 3rem;
    border-top: 1px solid #e9e2d8;
    padding-top: 2rem;
}
.pub-review-inner {
    /* width matches above layout */
}
.pub-review-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.pub-review-header-left h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.5rem;
}
.pub-avg-rating {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.pub-avg-rating-value {
    font-size: 2rem;
    font-weight: 800;
    color: #b45309;
    line-height: 1;
}
.pub-avg-rating-stars {
    display: flex;
    gap: 2px;
}
.pub-avg-rating-count {
    font-size: 0.8rem;
    color: #94a3b8;
}
.pub-star.filled {
    stroke: #eab308;
    fill: #eab308;
}
.pub-star.empty {
    stroke: #d1d5db;
}
.pub-btn-review {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background: var(--pub-brand-50);
    border: 1px solid var(--pub-brand-200);
    border-radius: 0.5rem;
    color: var(--pub-brand-700);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.pub-btn-review:hover {
    background: var(--pub-brand-100);
    border-color: var(--pub-brand-300);
}

/* Review Form */
.pub-review-form {
    background: #fff;
    border: 1px solid #e9e2d8;
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
    transition: all 0.3s;
}
.pub-review-form h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1.25rem;
}
.pub-form-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.35rem;
}
.pub-form-input {
    width: 100%;
    padding: 0.65rem 0.9rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    color: #1e293b;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.pub-form-input:focus {
    outline: none;
    border-color: var(--pub-brand-400, #f18052);
    box-shadow: 0 0 0 3px rgba(241, 128, 82, 0.1);
}
.pub-form-textarea {
    resize: vertical;
    min-height: 100px;
}
.pub-form-hint {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 0.25rem;
}
.pub-form-error {
    font-size: 0.8rem;
    color: #e11d48;
    margin-top: 0.25rem;
}

/* Star Rating Input */
.pub-rating-input {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 0.25rem;
}
.pub-rating-radio {
    display: none;
}
.pub-rating-star {
    cursor: pointer;
    color: #d1d5db;
    transition: color 0.2s, transform 0.15s;
}
.pub-rating-star:hover,
.pub-rating-star:hover ~ .pub-rating-star,
.pub-rating-radio:checked ~ .pub-rating-star {
    color: #eab308;
}
.pub-rating-star:hover {
    transform: scale(1.2);
}
.pub-rating-star i {
    stroke: currentColor;
    fill: currentColor;
}
.pub-rating-label {
    font-size: 0.85rem;
    color: #64748b;
    margin-top: 0.5rem;
}
.pub-btn-submit-review {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.5rem;
    background: var(--pub-brand-500, #f18052);
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.pub-btn-submit-review:hover {
    background: var(--pub-brand-600, #e06030);
}

/* Review List */
.pub-review-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.pub-review-item {
    background: #fff;
    border: 1px solid #e9e2d8;
    border-radius: 0.75rem;
    padding: 1.25rem;
    transition: box-shadow 0.2s;
}
.pub-review-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.pub-review-item-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.pub-review-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, var(--pub-brand-200, #fce7d9), var(--pub-brand-300, #f9d0b8));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--pub-brand-700, #9a4a1a);
    flex-shrink: 0;
}
.pub-review-meta {
    flex: 1;
    min-width: 0;
}
.pub-review-name {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: #1e293b;
}
.pub-review-date {
    display: block;
    font-size: 0.75rem;
    color: #94a3b8;
}
.pub-review-stars {
    display: flex;
    gap: 1px;
    flex-shrink: 0;
}
.pub-review-stars .pub-star {
    width: 0.9rem;
    height: 0.9rem;
}
.pub-review-comment {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.6;
}

/* Empty State */
.pub-review-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    background: #f8f5f0;
    border-radius: 0.75rem;
    border: 1px dashed #d1c8bc;
    color: #94a3b8;
}
.pub-review-empty i {
    margin-bottom: 0.75rem;
    display: block;
    margin-left: auto;
    margin-right: auto;

    stroke: #cbd5e1;
}
.pub-review-empty p {
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}


/* =============================================
   MOBILE BOTTOM NAV (Landing Page Only)
   ============================================= */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    height: 64px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-top: 1px solid var(--pub-border-soft, #f0ebe3);
    box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.06);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Show only on mobile (< 768px) */
@media (max-width: 767px) {
    .mobile-bottom-nav {
        display: block;
    }
}

.mobile-bottom-nav a.active-nav {
    color: var(--pub-brand-500, #F18052);
}
.mobile-bottom-nav a.active-nav span {
    color: var(--pub-brand-500, #F18052);
}

/* ---------- HERO ILLUSTRATION ANIMATION ---------- */
@keyframes hero-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

@media (prefers-reduced-motion: reduce) {
    [style*="hero-float"] { animation: none !important; }
}