/* ============================================================
   Lost & Found Kampus — app.css  (Complete Version)
   Theme: Engineering Navy · Glassmorphism · Fluid Animations
   ============================================================ */

/* ── Variables ──────────────────────────────────────────────── */
:root {
    --blue-950:     #09090b;
    --blue-900:     #18181b;
    --blue-800:     #27272a;
    --blue-700:     #3f3f46;
    --blue-600:     #52525b;
    --primary:      #52525b;
    --primary-light:#71717a;
    --primary-pale: #f4f4f5;
    --accent:       #b07a45;   /* bronze redup, selaras dengan nuansa abu-abu */
    --accent-light: #c29363;
    --accent-dark:  #8f5f33;
    --accent-glow:  rgba(176,122,69,.28);
    --found:        #52736d;   /* hijau sage redup untuk "ditemukan" */
    --found-light:  #66867f;
    --found-glow:   rgba(82,115,109,.28);
    --success:      #16a34a;
    --danger:       #dc2626;
    --bg:           #f4f4f5;
    --surface:      #ffffff;
    --glass:        rgba(255,255,255,0.7);
    --glass-border: rgba(255,255,255,0.5);
    --border:       #e4e4e7;
    --text:         #18181b;
    --text-muted:   #71717a;
    --radius:       16px;
    --radius-sm:    10px;
    --shadow:       0 4px 24px rgba(15,23,42,.08);
    --shadow-blue:  0 8px 32px rgba(63,63,70,.18);
    --shadow-lg:    0 24px 64px rgba(15,23,42,.16);
    --font:         'Plus Jakarta Sans', sans-serif;
    --font-display: 'Syne', sans-serif;
    --transition:   all .25s cubic-bezier(.4,0,.2,1);
    --auth-card-bg: rgba(255,255,255,.96);
}

/* ── Base ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* ── Animations ─────────────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33%       { transform: translateY(-12px) rotate(2deg); }
    66%       { transform: translateY(-6px) rotate(-1deg); }
}
@keyframes orb {
    0%, 100% { transform: translate(0,0) scale(1); }
    33%       { transform: translate(30px,-20px) scale(1.1); }
    66%       { transform: translate(-20px,15px) scale(0.95); }
}
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(40px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

main { animation: fadeUp .45s cubic-bezier(.4,0,.2,1) both; padding-top: 88px; }
.flash-wrap {
    position: fixed;
    top: 96px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1070;
    width: 100%;
    max-width: 640px;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    pointer-events: none;
}
.flash-wrap .alert {
    pointer-events: auto;
    border-radius: var(--radius);
    border: none;
    margin-bottom: 0;
}
.flash-fade-enter-active { transition: all .35s cubic-bezier(.34,1.56,.64,1); }
.flash-fade-leave-active { transition: all .3s ease; }
.flash-fade-enter-from { opacity: 0; transform: translateY(-16px) scale(.97); }
.flash-fade-leave-to { opacity: 0; transform: translateY(-10px) scale(.97); }

/* ── Utilities ───────────────────────────────────────────────── */
.text-accent { color: var(--accent) !important; }

/* ── Navbar (floating pill, Campus Finder style) ────────────────── */
.navbar-float-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    padding: 1rem 1.25rem 0;
    background: transparent;
}
#mainNav {
    max-width: 1200px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 100px;
    padding: .55rem .6rem .55rem 1.1rem;
    box-shadow: 0 8px 30px rgba(15,23,42,.10);
    border: 1px solid rgba(15,23,42,.04);
    transition: var(--transition);
}
.navbar-brand {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text) !important;
    letter-spacing: -0.3px;
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    margin-right: 1rem;
}
.brand-badge {
    position: relative;
    width: 40px; height: 40px;
    border-radius: 14px;
    background: var(--blue-900);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.brand-badge-pin {
    position: absolute;
    bottom: -3px; right: -3px;
    width: 17px; height: 17px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .58rem;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.brand-badge-sm { width: 30px; height: 30px; border-radius: 10px; font-size: .9rem; }
.brand-badge-sm .brand-badge-pin { width: 13px; height: 13px; font-size: .46rem; border-width: 1.5px; }
.brand-badge-logo { background: #fff; padding: 3px; }
.brand-logo-img { width: 100%; height: 100%; object-fit: contain; }
.brand-text-stack { display: flex; flex-direction: column; line-height: 1.1; }
.brand-line-1 { font-family: var(--font-display); font-weight: 800; font-size: .92rem; color: var(--blue-900); letter-spacing: .5px; text-transform: uppercase; }
.brand-line-2 { font-family: var(--font-display); font-weight: 700; font-size: .72rem; color: var(--accent-dark); letter-spacing: 1.5px; text-transform: uppercase; }
.navbar-nav .nav-link {
    font-weight: 600;
    font-size: .88rem;
    color: var(--text);
    padding: .5rem 1rem;
    border-radius: 100px;
    transition: var(--transition);
    position: relative;
    white-space: nowrap;
}
.navbar-nav .nav-link:hover { color: var(--primary); background: var(--primary-pale); }
.navbar-nav .nav-link.active { color: var(--primary); background: var(--primary-pale); font-weight: 700; }
#mainNav:has(.navbar-collapse.show),
#mainNav:has(.navbar-collapse.collapsing) { border-radius: 24px; }

/* ── Navbar compact-on-scroll ────────────────────────────────── */
#mainNav.nav-compact { box-shadow: 0 10px 34px rgba(15,23,42,.14); }
.nav-links-group { transition: var(--transition); }
.compact-search-wrap {
    flex: 1 1 auto;
    align-items: center;
    gap: .6rem;
    margin: 0 1.25rem;
    animation: fadeUp .3s ease both;
}
.compact-search-form { flex: 1 1 auto; max-width: 380px; }
.compact-search-form .input-group-text { background: var(--primary-pale); border-color: var(--border); color: var(--primary); border-radius: 100px 0 0 100px !important; border-right: none; }
.compact-search-form .form-control { border-color: var(--border); border-radius: 0 100px 100px 0 !important; font-size: .85rem; border-left: none; }
.compact-search-form .form-control:focus { box-shadow: none; border-color: var(--border); }
.compact-search-form .input-group:focus-within .input-group-text { border-color: var(--primary); }
.compact-search-form .input-group:focus-within .form-control { border-color: var(--primary); }

/* Compact filter button + dropdown */
.compact-filter-btn {
    position: relative;
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--surface);
    border: 1.5px solid var(--border);
    color: var(--text);
    font-weight: 600; font-size: .84rem;
    padding: .5rem 1rem;
    border-radius: 100px;
    white-space: nowrap;
    transition: var(--transition);
}
.compact-filter-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-pale); }
.filter-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 2px #fff;
}
.filter-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 250px;
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    padding: 1rem;
    z-index: 1050;
    animation: fadeUp .2s ease;
}
.active-search-chip {
    display: inline-flex; align-items: center;
    background: var(--primary-pale); color: var(--primary);
    padding: .5rem 1rem; border-radius: 100px;
    font-size: .85rem; font-weight: 600;
}
.avatar-sm {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .78rem;
    box-shadow: 0 2px 8px rgba(82,82,91,.3);
    flex-shrink: 0;
}
.dropdown-menu {
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(20px);
    background: rgba(255,255,255,0.95);
    padding: .5rem;
    animation: fadeUp .2s ease;
}
.dropdown-item {
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: .9rem;
    padding: .55rem .9rem;
    transition: var(--transition);
}
.dropdown-item:hover { background: var(--primary-pale); color: var(--primary); }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn { font-weight: 600; border-radius: var(--radius-sm); transition: var(--transition); letter-spacing: .1px; }
.btn-accent {
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    color: #fff; border: none;
    box-shadow: 0 4px 14px var(--accent-glow);
    position: relative; overflow: hidden;
}
.btn-accent::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
    transform: translateX(-100%); transition: transform .5s;
}
.btn-accent:hover {
    background: linear-gradient(135deg, var(--accent-dark), var(--accent));
    color: #fff; transform: translateY(-2px);
    box-shadow: 0 8px 20px var(--accent-glow);
}
.btn-accent:hover::before { transform: translateX(100%); }
.btn-accent:active { transform: translateY(0); }
.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    border: none; box-shadow: var(--shadow-blue);
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--blue-600), var(--primary));
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(82,82,91,.3); border: none;
}
.btn-primary:active { transform: translateY(0); }
.btn-primary:focus { border: none; }
.btn-outline-primary { border-color: var(--primary); color: var(--primary); border-width: 2px; }
.btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); transform: translateY(-1px); }

/* ── Hero Section ────────────────────────────────────────────── */
.hero-section {
    background: linear-gradient(135deg, rgba(9,9,11,0.85) 0%, rgba(39,39,42,0.78) 50%, rgba(82,82,91,0.70) 100%), url(/images/hero-bg.png);
    background-size: cover;
    background-position: center;
    padding: 5.5rem 0 4.5rem;
    color: #fff;
    position: relative; overflow: hidden; isolation: isolate;
}
.hero-section::before, .hero-section::after {
    content: ''; position: absolute; border-radius: 50%;
    filter: blur(80px); pointer-events: none; opacity: .5;
}
.hero-section::before {
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(113,113,122,.6) 0%, transparent 70%);
    top: -100px; right: -100px;
    animation: orb 8s ease-in-out infinite;
}
.hero-section::after {
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(176,122,69,.22) 0%, transparent 70%);
    bottom: -100px; left: -80px;
    animation: orb 10s ease-in-out infinite reverse;
}
.hero-section > .container { position: relative; z-index: 1; }
.hero-title {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.8vw, 2rem);
    font-weight: 800; line-height: 1.25; letter-spacing: -0.5px;
    margin-bottom: 1.25rem;
    text-shadow: 0 2px 20px rgba(0,0,0,.2);
}
.hero-subtitle { font-size: 1.05rem; opacity: .88; margin-bottom: 2rem; max-width: 580px; line-height: 1.85; }
.hero-illustration {
    font-size: 10rem; line-height: 1; color: #fff; opacity: .45;
    animation: float 6s ease-in-out infinite;
    filter: drop-shadow(0 0 40px rgba(113,113,122,.4));
}

/* ── Type Hero (Barang Hilang / Barang Ditemukan pages) ─────────── */
.type-hero { padding: 2.75rem 0 2.25rem; }
.type-hero-lost  { background: linear-gradient(135deg, #f4f4f5, #f3eee8); }
.type-hero-found { background: linear-gradient(135deg, #f4f4f5, #eaf0ee); }
.type-hero-icon {
    width: 60px; height: 60px; flex-shrink: 0;
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; color: #fff;
}
.type-hero-lost .type-hero-icon  { background: linear-gradient(135deg, var(--accent), var(--accent-light)); box-shadow: 0 8px 20px var(--accent-glow); }
.type-hero-found .type-hero-icon { background: linear-gradient(135deg, var(--found), var(--found-light)); box-shadow: 0 8px 20px var(--found-glow); }
.type-hero-title { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; letter-spacing: -0.5px; margin-bottom: .25rem; color: var(--text); }
.type-hero-subtitle { color: var(--text-muted); font-size: .95rem; max-width: 560px; }
.about-list { list-style: none; padding: 0; }
.about-list li { padding: .6rem 0; border-bottom: 1px solid var(--border); font-size: .95rem; color: var(--text); }
.about-list li:last-child { border-bottom: none; }

/* ── Hero v2 (foto lebih hidup, teks tengah, ikon dekoratif) ─────── */
.hero-v2 {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(ellipse 65% 90% at 50% 42%, rgba(255,255,255,.75) 0%, rgba(255,255,255,.6) 40%, rgba(255,255,255,.4) 65%, rgba(255,255,255,.05) 85%),
        url(/images/universitas_sam_ratulangi.jpg);
    background-size: cover;
    background-position: center, center 30%;
    margin-top: -88px;
    padding: 4.5rem 0;
    text-align: center;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
}
.hero-v2-inner { max-width: 720px; margin: 0 auto; position: relative; z-index: 2; }
.hero-v2-title {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -1px;
    color: var(--text);
    margin-bottom: 1rem;
}
.hero-v2-title .accent-line { color: var(--primary); }
.hero-v2-subtitle {
    font-size: 1.02rem;
    color: var(--text);
    opacity: .82;
    max-width: 560px;
    margin: 0 auto 2.25rem;
    line-height: 1.75;
}
.hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Ikon dekoratif melayang di atas foto */
.hero-decor {
    position: absolute;
    z-index: 1;
    color: rgba(255,255,255,.92);
    filter: drop-shadow(0 8px 18px rgba(15,23,42,.18));
    pointer-events: none;
}
.hero-decor-backpack { left: 6%; bottom: 12%; font-size: 5.5rem; transform: rotate(-8deg); }
.hero-decor-wallet { right: 6%; top: 22%; font-size: 4.5rem; transform: rotate(6deg); }
.hero-decor-spark {
    position: absolute; top: -4px; right: -10px;
    font-size: .95rem; color: var(--accent);
    filter: none;
}
@media (max-width: 991px) {
    .hero-decor-backpack, .hero-decor-wallet { display: none; }
}
.btn-cta {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .9rem 1.9rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .2px;
    color: #fff !important;
    text-decoration: none;
    border: none;
    box-shadow: var(--shadow);
    transition: var(--transition);
}
.btn-cta:hover { transform: translateY(-3px); }
.btn-cta-lost {
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    box-shadow: 0 8px 24px var(--accent-glow);
}
.btn-cta-lost:hover { box-shadow: 0 12px 30px var(--accent-glow); }
.btn-cta-found {
    background: linear-gradient(135deg, var(--found), var(--found-light));
    box-shadow: 0 8px 24px var(--found-glow);
}
.btn-cta-found:hover { box-shadow: 0 12px 30px var(--found-glow); }

/* ── Recently Found Items (horizontal cards) ─────────────────────── */
.recent-section { padding: 3.5rem 0 1rem; }
.recent-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    height: 100%;
    box-shadow: var(--shadow);
    transition: var(--transition);
    position: relative;
}
.recent-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-blue); border-color: rgba(82,82,91,.2); }
.recent-card-img { aspect-ratio: 1; max-height: 200px; background: linear-gradient(135deg,#f1f5f9,#e2e8f0); overflow: hidden; }
.recent-card-img img { width: 100%; height: 100%; object-fit: cover; }
.recent-card-img .card-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; color: #cbd5e1; }
.recent-card-body { padding: .9rem 1rem 1.1rem; }
.recent-card-title { font-weight: 700; font-size: .92rem; margin-bottom: .3rem; color: var(--text); }
.recent-card-meta { font-size: .74rem; color: var(--text-muted); line-height: 1.5; }
.recent-card-badge {
    position: absolute; bottom: .9rem; right: 1rem;
    font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    padding: .25rem .6rem; border-radius: 20px;
    background: rgba(220,252,231,.95); color: #15803d;
}
.recent-empty { padding: 2.5rem 1rem; text-align: center; color: var(--text-muted); }

/* ── How It Works ─────────────────────────────────────────────── */
.how-section { padding: 3.5rem 0 4rem; }
.how-step { text-align: center; padding: 1.5rem 1rem; }
.how-num {
    width: 56px; height: 56px; margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 800; font-size: 1.3rem;
    color: #fff;
}
.how-num-1 { background: linear-gradient(135deg, var(--accent), var(--accent-light)); box-shadow: 0 8px 20px var(--accent-glow); }
.how-num-2 { background: linear-gradient(135deg, var(--found), var(--found-light)); box-shadow: 0 8px 20px var(--found-glow); }
.how-num-3 { background: linear-gradient(135deg, var(--primary), var(--primary-light)); box-shadow: var(--shadow-blue); }
.how-step-title { font-weight: 700; font-size: 1.02rem; margin-bottom: .4rem; color: var(--text); }
.how-step-text { font-size: .85rem; color: var(--text-muted); line-height: 1.6; max-width: 240px; margin: 0 auto; }

/* ── Stats Bar ───────────────────────────────────────────────── */
.stats-bar {
    background: var(--surface); border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 20px rgba(15,23,42,.04);
}
.stat-number {
    display: block; font-family: var(--font-display); font-size: 1.75rem; font-weight: 800;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    line-height: 1.1;
}
.stat-label {
    display: block; font-size: .7rem; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .8px; font-weight: 700; margin-top: .2rem;
}

/* ── Search bar ──────────────────────────────────────────────── */
.search-bar-form {
    background: var(--surface); padding: 1.5rem;
    border-radius: var(--radius); border: 1px solid var(--border);
    box-shadow: var(--shadow); transition: box-shadow .3s;
}
.search-bar-form:focus-within { box-shadow: var(--shadow-blue); }
.search-bar-form .input-group-text { background: var(--primary-pale); border-color: var(--border); color: var(--primary); font-size: 1rem; }
.search-bar-form .form-control, .search-bar-form .form-select { border-color: var(--border); border-radius: var(--radius-sm) !important; font-size: .9rem; }
.search-bar-form .form-control:focus, .search-bar-form .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(82,82,91,.12); }

/* ── Section title ───────────────────────────────────────────── */
.section-title { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; letter-spacing: -1px; color: var(--text); }

/* ── Item Cards ──────────────────────────────────────────────── */
.item-card {
    border: 1px solid var(--border); border-radius: var(--radius) !important; overflow: hidden;
    transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1), border-color .3s;
    position: relative; background: var(--surface);
    animation: fadeUp .5s both;
}
.row.g-4 > :nth-child(1) .item-card  { animation-delay: .05s; }
.row.g-4 > :nth-child(2) .item-card  { animation-delay: .12s; }
.row.g-4 > :nth-child(3) .item-card  { animation-delay: .18s; }
.row.g-4 > :nth-child(4) .item-card  { animation-delay: .24s; }
.row.g-4 > :nth-child(5) .item-card  { animation-delay: .30s; }
.row.g-4 > :nth-child(6) .item-card  { animation-delay: .36s; }
.row.g-4 > :nth-child(7) .item-card  { animation-delay: .40s; }
.row.g-4 > :nth-child(8) .item-card  { animation-delay: .44s; }
.row.g-4 > :nth-child(9) .item-card  { animation-delay: .48s; }
.item-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-blue), 0 0 0 1px rgba(82,82,91,.08); border-color: rgba(82,82,91,.2); }
.item-card::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.2) 50%, transparent 70%);
    transform: translateX(-100%) skewX(-15deg); transition: transform .6s;
    z-index: 1; pointer-events: none;
}
.item-card:hover::after { transform: translateX(200%) skewX(-15deg); }
.card-type-badge {
    position: absolute; top: .85rem; left: .85rem; z-index: 3;
    font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
    padding: .3rem .75rem; border-radius: 20px; backdrop-filter: blur(8px);
}
.badge-lost  { background: rgba(254,226,226,.92); color: #b91c1c; box-shadow: 0 2px 8px rgba(220,38,38,.15); }
.badge-found { background: rgba(220,252,231,.92); color: #15803d; box-shadow: 0 2px 8px rgba(22,163,74,.15); }
.card-img-wrapper { aspect-ratio: 1; overflow: hidden; background: linear-gradient(135deg, #f1f5f9, #e2e8f0); position: relative; }
.card-img-wrapper .card-img-top { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.item-card:hover .card-img-top { transform: scale(1.07); }
.card-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3.5rem; color: #cbd5e1; background: linear-gradient(135deg, #f8fafc, #f1f5f9); }
.card-resolved-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(15,23,42,.75), rgba(30,58,95,.8));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .9rem; backdrop-filter: blur(2px);
}
.card-meta { display: flex; flex-direction: column; gap: .35rem; }
.meta-item { font-size: .78rem; color: var(--text-muted); display: flex; align-items: center; gap: .4rem; }

/* ── Detail page ─────────────────────────────────────────────── */
.detail-card { border-radius: var(--radius) !important; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow); animation: fadeUp .5s both; }
.detail-title { font-family: var(--font-display); font-size: 2rem; font-weight: 800; margin-bottom: 1.5rem; letter-spacing: -1px; line-height: 1.2; }
.detail-meta .meta-block { display: flex; flex-direction: column; gap: .25rem; }
.meta-label { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; font-weight: 700; letter-spacing: .6px; }
.meta-value { font-weight: 600; font-size: .95rem; }
.detail-photo img { border-radius: var(--radius-sm) !important; box-shadow: var(--shadow); }
.detail-comments { border-radius: var(--radius) !important; animation: fadeUp .5s .15s both; }

/* ── Form pages ──────────────────────────────────────────────── */
.form-card { border-radius: var(--radius) !important; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow); animation: fadeUp .5s both; }
.form-card .card-header { background: linear-gradient(135deg, #f9f9fa, var(--surface)); border-bottom: 1px solid var(--border); padding: 1.5rem 1.75rem; }
.form-control, .form-select { border-radius: var(--radius-sm) !important; border-color: var(--border); font-size: .92rem; transition: var(--transition); }
.form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3.5px rgba(82,82,91,.12); }
.type-selector .type-option { cursor: pointer; }
.type-selector input[type="radio"] { display: none; }
.type-box { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1.4rem; border-radius: var(--radius); border: 2px solid var(--border); text-align: center; transition: var(--transition); background: #f8fafc; cursor: pointer; }
.type-box i { font-size: 2rem; }
.type-box strong { font-weight: 700; }
.type-box small { font-size: .75rem; color: var(--text-muted); }
.type-option:hover .type-box { border-color: #94a3b8; background: #f1f5f9; transform: translateY(-2px); }
.type-option input:checked + .type-lost { border-color: var(--danger); background: #fef2f2; box-shadow: 0 0 0 4px rgba(220,38,38,.1); }
.type-option input:checked + .type-found { border-color: var(--success); background: #f0fdf4; box-shadow: 0 0 0 4px rgba(22,163,74,.1); }
.type-lost  i { color: var(--danger); }
.type-found i { color: var(--success); }
.photo-upload-area { border: 2px dashed var(--border); border-radius: var(--radius); cursor: pointer; position: relative; overflow: hidden; transition: var(--transition); min-height: 150px; background: #f8fafc; }
.verification-box { background: #faf6f1; border: 1px solid #e6d5bf; border-radius: var(--radius); padding: 1rem; }
.verification-prompt { background: #faf6f1; border: 1px solid #e6d5bf; border-radius: var(--radius); padding: .85rem 1rem; }

/* Halaman "Kenapa Cocok" */
.verdict-box { background: var(--primary-pale); border: 1px solid rgba(82,82,91,.2); border-radius: var(--radius); padding: 1.25rem 1.5rem; }
.compare-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; height: 100%; }
.compare-photo { aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: linear-gradient(135deg,#f1f5f9,#e2e8f0); }
.compare-photo img { width: 100%; height: 100%; object-fit: cover; }
.vs-circle {
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--text); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .85rem; letter-spacing: .5px;
    flex-shrink: 0;
}
@media (max-width: 767px) {
    .vs-circle { margin: .5rem auto; }
}

/* ── Toast notifikasi ─────────────────────────────────────────── */
.toast-stack {
    position: fixed;
    top: 90px;
    right: 1.25rem;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    width: 320px;
    max-width: calc(100vw - 2rem);
    pointer-events: none;
}
.toast-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: .85rem 1rem;
    pointer-events: auto;
    border-left: 3px solid var(--primary);
}
.toast-fade-enter-active { transition: all .35s cubic-bezier(.34,1.56,.64,1); }
.toast-fade-leave-active { transition: all .25s ease; position: absolute; }
.toast-fade-enter-from { opacity: 0; transform: translateX(40px); }
.toast-fade-leave-to { opacity: 0; transform: translateX(40px); }
.toast-fade-move { transition: transform .25s ease; }
@media (max-width: 576px) {
    .toast-stack { top: 76px; right: .75rem; left: .75rem; width: auto; }
}

/* ── Skeleton loading (foto) ─────────────────────────────────────── */
.photo-skeleton-wrap { position: relative; width: 100%; overflow: hidden; background: #f1f5f9; }
.photo-skeleton-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .3s ease; position: relative; z-index: 1; }
.photo-skeleton-wrap .card-img-placeholder { position: absolute; inset: 0; }
.img-skeleton {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, #eef1f5 25%, #e2e8f0 37%, #eef1f5 63%);
    background-size: 400% 100%;
    animation: skeletonShimmer 1.4s ease infinite;
}
@keyframes skeletonShimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ── Animasi muncul pas di-scroll (v-reveal) ────────────────────── */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1);
    will-change: opacity, transform;
}
.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll { opacity: 1; transform: none; transition: none; }
}

/* ── QR Code Serah Terima ─────────────────────────────────────── */
.qr-canvas { border-radius: var(--radius-sm); border: 1px solid var(--border); max-width: 100%; height: auto; }
.qr-box { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; text-align: center; }

/* ── Peta Lokasi ──────────────────────────────────────────────── */
.location-picker-map { height: 280px; width: 100%; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); z-index: 0; }
.location-display-map { height: 220px; width: 100%; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); z-index: 0; }
.leaflet-popup-content { font-family: var(--font); font-size: .85rem; }
.photo-upload-area:hover { border-color: var(--primary); background: var(--primary-pale); }
.photo-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 2; width: 100%; height: 100%; }
.photo-upload-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; color: var(--text-muted); gap: .6rem; min-height: 150px; pointer-events: none; }
.photo-upload-placeholder i { font-size: 3rem; color: #94a3b8; transition: var(--transition); }
.photo-upload-area:hover .photo-upload-placeholder i { color: var(--primary); transform: translateY(-3px); }
.photo-upload-placeholder p { margin: 0; font-weight: 600; }
.photo-upload-placeholder small { font-size: .75rem; }
.photo-preview { width: 100%; max-height: 300px; object-fit: cover; display: block; }

/* ── Auth pages ──────────────────────────────────────────────── */
.auth-body {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 2rem 1rem; position: relative;
    background: linear-gradient(135deg, var(--blue-900) 0%, var(--blue-700) 100%);
    background-image: url('/images/bg_unsrat.jpg');
    background-size: cover; background-position: center; background-attachment: fixed;
    overflow-x: hidden;
}
.auth-body::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(9,9,11,0.55) 0%, rgba(39,39,42,0.45) 100%);
    backdrop-filter: blur(1px); z-index: 0;
}
.auth-body::after {
    content: ''; position: absolute; width: 600px; height: 600px; border-radius: 50%;
    background: radial-gradient(circle, rgba(82,82,91,.25) 0%, transparent 65%);
    top: -200px; right: -200px; animation: orb 9s ease-in-out infinite; z-index: 0;
}
.auth-wrapper { width: 100%; max-width: 460px; position: relative; z-index: 1; animation: slideUp .55s cubic-bezier(.34,1.56,.64,1) both; }
.auth-brand { color: #fff; text-align: center; }
.brand-icon { font-size: 2.8rem; display: block; margin-bottom: .25rem; }
.brand-text { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: #fff; letter-spacing: -1px; }
.brand-sub { font-size: .75rem; opacity: .7; color: #fff; letter-spacing: 3px; text-transform: uppercase; display: block; margin-top: .1rem; }
.auth-card {
    border: none !important; border-radius: var(--radius) !important;
    background: rgba(255,255,255,0.96) !important;
    backdrop-filter: blur(30px) saturate(200%);
    -webkit-backdrop-filter: blur(30px) saturate(200%);
    box-shadow: 0 32px 80px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.15), inset 0 1px 0 rgba(255,255,255,.8);
}
.auth-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -.5px; }

/* ── Password toggle & Google ────────────────────────────────── */
input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear { display: none; }
.toggle-password { border-color: var(--border); color: var(--text-muted); transition: var(--transition); }
.toggle-password:hover { color: var(--primary); background: var(--primary-pale); }
.auth-divider { display: flex; align-items: center; color: var(--text-muted); font-size: .82rem; margin: 1.25rem 0; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; border-top: 1px solid var(--border); }
.auth-divider span { padding: 0 .85rem; }
.btn-google { display: flex; align-items: center; justify-content: center; gap: .65rem; background: var(--surface); color: var(--text); border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-weight: 600; padding: .65rem 1rem; transition: var(--transition); }
.btn-google:hover { background: #fafafa; border-color: #d4d4d8; box-shadow: 0 4px 14px rgba(82,82,91,.1); color: var(--text); transform: translateY(-1px); }
.btn-google svg { flex: 0 0 auto; }

/* ── Flash alerts ────────────────────────────────────────────── */
.alert-float { position: fixed; top: 5rem; right: 1.5rem; z-index: 9999; min-width: 300px; max-width: 420px; animation: slideInRight .35s cubic-bezier(.34,1.56,.64,1); border-radius: var(--radius); box-shadow: var(--shadow-lg); border: none; }
.alert-success { background: linear-gradient(135deg, #f0fdf4, #dcfce7); border-left: 4px solid var(--success) !important; color: #14532d; border-radius: var(--radius) !important; }
.alert-danger  { background: linear-gradient(135deg, #fef2f2, #fee2e2); border-left: 4px solid var(--danger)  !important; color: #7f1d1d; border-radius: var(--radius) !important; }

/* ── Footer ──────────────────────────────────────────────────── */
.site-footer { background: linear-gradient(135deg, #f9f9fa, var(--surface)); border-top: 1px solid var(--border); box-shadow: 0 -4px 20px rgba(15,23,42,.04); }
.footer-brand { display: inline-flex; align-items: center; }
.footer-brand-text { display: inline-flex; align-items: baseline; gap: .35rem; }
.footer-badge { font-size: .58rem; background: linear-gradient(135deg, var(--primary), var(--primary-light)); color: white; padding: 2px 7px; border-radius: 4px; font-family: var(--font); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }

/* ── Empty state ─────────────────────────────────────────────── */
.empty-state { padding: 5rem 2rem; animation: fadeIn .5s both; }

/* ── Breadcrumb ──────────────────────────────────────────────── */
.breadcrumb { font-size: .85rem; gap: .25rem; }
.breadcrumb-item a { color: var(--primary); text-decoration: none; font-weight: 500; }
.breadcrumb-item a:hover { text-decoration: underline; }

/* ── Tables ──────────────────────────────────────────────────── */
.table { border-radius: var(--radius); overflow: hidden; }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .6px; font-weight: 700; color: var(--text-muted); border-bottom-width: 1px; }
.table-hover > tbody > tr:hover > * { background-color: var(--primary-pale); }

/* ── Badge ───────────────────────────────────────────────────── */
.badge { font-weight: 700; letter-spacing: .3px; border-radius: 6px; }

/* ── Admin Panel ────────────────────────────────────────────── */
.admin-wrapper { display: flex; min-height: 100vh; background: #f4f4f5; }
.admin-sidebar {
    width: 260px; flex-shrink: 0;
    background: linear-gradient(180deg, var(--blue-900) 0%, #0d1f3c 100%);
    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; bottom: 0;
    z-index: 1040; transition: transform .3s ease; overflow-y: auto;
}
.sidebar-brand { padding: 1.5rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-brand-title { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: #fff; letter-spacing: -0.5px; }
.sidebar-brand-sub { font-size: .65rem; color: rgba(255,255,255,.5); letter-spacing: 2px; text-transform: uppercase; }
.sidebar-nav { flex: 1; padding: 1rem .75rem; display: flex; flex-direction: column; gap: .25rem; }
.sidebar-link { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; border-radius: var(--radius-sm); color: rgba(255,255,255,.65); text-decoration: none; font-weight: 500; font-size: .9rem; transition: var(--transition); cursor: pointer; }
.sidebar-link i { font-size: 1.1rem; flex-shrink: 0; }
.sidebar-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-link.active { background: var(--primary); color: #fff; box-shadow: 0 4px 14px rgba(82,82,91,.4); }
.sidebar-footer { padding: .75rem; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: .25rem; }
.admin-content { flex: 1; margin-left: 260px; display: flex; flex-direction: column; min-width: 0; }
.admin-topbar { background: #fff; border-bottom: 1px solid var(--border); padding: 1rem 1.5rem; display: flex; align-items: center; position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 10px rgba(15,23,42,.05); }
.admin-main { padding: 1.5rem; }

/* Admin stat cards */
.admin-stat-card { background: #fff; border-radius: var(--radius); padding: 1.5rem; display: flex; align-items: center; gap: 1.25rem; box-shadow: var(--shadow); border: 1px solid var(--border); transition: var(--transition); }
.admin-stat-card:hover { box-shadow: var(--shadow-blue); transform: translateY(-2px); }
.stat-icon { width: 52px; height: 52px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; }
.bg-primary-soft { background: rgba(82,82,91,.1); }
.bg-info-soft    { background: rgba(6,182,212,.1); }
.bg-danger-soft  { background: rgba(220,38,38,.1); }
.bg-success-soft { background: rgba(22,163,74,.1); }
.bg-warning-soft { background: rgba(176,122,69,.12); }
/* Warna "warning" Bootstrap diredupkan supaya selaras dengan tema */
.bg-warning { background-color: var(--accent) !important; color: #fff !important; }
.text-warning { color: var(--accent) !important; }
.badge.bg-warning { color: #fff !important; }
.stat-num { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; line-height: 1; color: var(--text); }
.stat-lbl { font-size: .78rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-top: .25rem; }

/* Mobile sidebar */
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1039; }

/* ── Custom Modal ───────────────────────────────────────────── */
.modal-backdrop-custom { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 1rem; animation: fadeIn .2s ease; }
.modal-card { background: #fff; border-radius: var(--radius); padding: 2rem; width: 100%; max-width: 500px; box-shadow: var(--shadow-lg); animation: slideUp .25s cubic-bezier(.34,1.56,.64,1); }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 991px) {
    .admin-sidebar { transform: translateX(-100%); }
    .admin-sidebar.sidebar-open { transform: translateX(0); }
    .sidebar-overlay { display: block; }
    .admin-content { margin-left: 0; }
}
@media (max-width: 768px) {
    .hero-section  { padding: 3.5rem 0 3rem; }
    .hero-title    { font-size: 1.7rem; }
    .detail-title  { font-size: 1.5rem; }
    .alert-float   { left: 1rem; right: 1rem; max-width: none; }
    .auth-body     { background-attachment: scroll; }
}

/* ── Container ───────────────────────────────────────────────── */
.container { max-width: 1200px; }

/* ── Notification Bell ──────────────────────────────────────── */
.notif-btn {
    width: 36px; height: 36px;
    border-radius: 50% !important;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--border) !important;
    background: var(--surface) !important;
    color: var(--text-muted);
    transition: var(--transition);
    padding: 0;
}
.notif-btn:hover { background: var(--primary-pale) !important; color: var(--primary); border-color: var(--primary) !important; }

.notif-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 320px;
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    z-index: 1050;
    animation: fadeUp .2s ease;
    max-height: 420px;
    overflow-y: auto;
}
.notif-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; background: #fff; z-index: 1;
}
.notif-empty { padding: 2rem 1rem; text-align: center; }
.notif-item {
    padding: .85rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    transition: background .2s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: #f8fafc; }
.notif-unread { background: #f4f4f5; border-left: 3px solid var(--primary); }

/* ── Mobile Responsive ──────────────────────────────────────── */
@media (max-width: 576px) {
    /* Navbar */
    .navbar-float-wrap { padding: .75rem .75rem 0; }
    #mainNav { padding: .45rem .5rem .45rem .85rem; }
    .brand-badge { width: 34px; height: 34px; font-size: 1rem; }
    .brand-line-1 { font-size: .85rem; }
    .brand-line-2 { font-size: .6rem; letter-spacing: 1px; }
    main { padding-top: 64px; }
    .flash-wrap { top: 76px; padding: 0 .75rem; }

    /* Hero */
    .hero-section { padding: 2.5rem 0 2rem; }
    .hero-title { font-size: 1.35rem; letter-spacing: -.3px; }
    .hero-subtitle { font-size: .88rem; line-height: 1.7; }

    /* Hero v2 */
    .hero-v2 {
        margin-top: -64px;
        padding: calc(2.75rem + 64px) 0 2.25rem;
        min-height: auto;
        background:
            linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.9) 100%),
            url(/images/universitas_sam_ratulangi.jpg);
        background-size: cover;
        background-position: center 30%;
    }
    .hero-v2-inner { max-width: 100%; }
    .hero-v2-title { font-size: 1.55rem; }
    .hero-v2-subtitle { font-size: .88rem; }
    .btn-cta { width: 100%; }
    .btn-cta { justify-content: center; }
    .hero-cta { flex-direction: column; align-items: stretch; }

    /* Type hero */
    .type-hero { padding: 1.75rem 0 1.5rem; }
    .type-hero-icon { width: 48px; height: 48px; font-size: 1.3rem; }
    .type-hero-title { font-size: 1.35rem; }
    .type-hero-subtitle { font-size: .85rem; }

    /* Stats */
    .stat-number { font-size: 1.4rem; }
    .stat-label { font-size: .62rem; }

    /* Search bar */
    .search-bar-form { padding: 1rem; }

    /* Item cards */
    .item-card .card-body { padding: .85rem; }
    .card-type-badge { font-size: .62rem; padding: .2rem .6rem; }

    /* Section title */
    .section-title { font-size: 1.25rem; }

    /* Detail page */
    .detail-title { font-size: 1.35rem; }
    .detail-card .card-body { padding: 1.25rem !important; }

    /* Forms */
    .form-card .card-header { padding: 1.1rem 1.25rem; }
    .form-card .card-body { padding: 1.25rem !important; }
    .type-box { padding: .9rem .5rem; }
    .type-box i { font-size: 1.5rem; }
    .type-box strong { font-size: .85rem; }
    .type-box small { font-size: .68rem; }

    /* Buttons */
    .btn-lg { font-size: .88rem; padding: .55rem .85rem; }
    .d-flex.gap-2 .btn-lg { flex: 1; }

    /* Auth */
    .auth-body { padding: 1.25rem .75rem; }
    .auth-card .card-body, .auth-card { padding: 1.25rem !important; }
    .brand-text { font-size: 1.6rem; }
    .brand-icon { font-size: 2.2rem; }

    /* Admin */
    .admin-main { padding: 1rem; }
    .admin-topbar { padding: .75rem 1rem; }
    .admin-stat-card { padding: 1rem; gap: .85rem; }
    .stat-num { font-size: 1.4rem; }

    /* Notification dropdown */
    .notif-dropdown { width: calc(100vw - 2rem); right: -1rem; }

    /* Comments */
    .detail-comments .card-body { padding: 1rem; }

    /* Tables */
    .table { font-size: .82rem; }
}

@media (max-width: 768px) {
    /* Hero illustration smaller */
    .hero-illustration { font-size: 7rem; opacity: .35; }

    /* Meta grid stack */
    .detail-meta .col-sm-6 { margin-bottom: .5rem; }

    /* Pagination smaller */
    .page-link { padding: .3rem .55rem; font-size: .82rem; }

    /* Admin sidebar full width when open */
    .admin-sidebar.sidebar-open { width: 240px; }

    /* Claim form */
    .d-flex.gap-2.flex-wrap .btn { font-size: .85rem; }
}

/* ══════════════════════════════════════════════════════════════
   DARK MODE
   Diaktifkan lewat atribut [data-theme="dark"] di <html>.
   Karena hampir semua warna di file ini pakai CSS variable,
   cukup override variabelnya di sini buat ganti seluruh tema.
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    --blue-950:     #050505;
    --blue-900:     #101012;
    --blue-800:     #1c1c1f;
    --blue-700:     #2a2a2e;
    --blue-600:     #52525b;
    --primary:      #a1a1aa;
    --primary-light:#d4d4d8;
    --primary-pale: rgba(161,161,170,.16);
    --accent:       #d1a56e;
    --accent-light: #dcb887;
    --accent-dark:  #b98a52;
    --accent-glow:  rgba(209,165,110,.22);
    --found:        #6f958e;
    --found-light:  #86aaa3;
    --found-glow:   rgba(111,149,142,.25);
    --success:      #22c55e;
    --danger:       #f87171;
    --bg:           #0f0f10;
    --surface:      #1c1c1f;
    --glass:        rgba(28,28,31,.75);
    --glass-border: rgba(255,255,255,.08);
    --border:       #2e2e33;
    --text:         #f0f0f1;
    --text-muted:   #a1a1aa;
    --shadow:       0 4px 24px rgba(0,0,0,.4);
    --shadow-blue:  0 8px 32px rgba(0,0,0,.35);
    --shadow-lg:    0 24px 64px rgba(0,0,0,.55);
    --auth-card-bg: rgba(24,24,27,.92);
}

/* Base */
[data-theme="dark"] body { background: var(--bg); color: var(--text); }
[data-theme="dark"] hr { border-color: var(--border); opacity: 1; }

/* Bootstrap-native components dipakai langsung di banyak halaman */
[data-theme="dark"] .card,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .toast-card,
[data-theme="dark"] .verdict-box,
[data-theme="dark"] .compare-card,
[data-theme="dark"] .qr-box,
[data-theme="dark"] .admin-stat-card,
[data-theme="dark"] .admin-topbar,
[data-theme="dark"] .modal-card,
[data-theme="dark"] .notif-dropdown {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}
[data-theme="dark"] .card-header { background: rgba(255,255,255,.03); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background: var(--blue-800);
    color: var(--text);
    border-color: var(--border);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus { background: var(--blue-800); color: var(--text); border-color: var(--primary); }
[data-theme="dark"] .form-control::placeholder { color: var(--text-muted); opacity: 1; }
[data-theme="dark"] .form-label { color: var(--text); }
[data-theme="dark"] .text-muted { color: var(--text-muted) !important; }
[data-theme="dark"] .text-dark { color: var(--text) !important; }
[data-theme="dark"] .btn-outline-secondary { color: var(--text); border-color: var(--border); }
[data-theme="dark"] .btn-outline-secondary:hover { background: var(--blue-800); color: var(--text); }
[data-theme="dark"] .btn-outline-primary { color: var(--primary-light); border-color: var(--primary-light); }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
[data-theme="dark"] .table { color: var(--text); }
[data-theme="dark"] .breadcrumb-item.active { color: var(--text-muted); }
[data-theme="dark"] .breadcrumb-item a { color: var(--primary-light); }
[data-theme="dark"] .alert-success { background: rgba(34,197,94,.12); color: #86efac; border-color: rgba(34,197,94,.25); }
[data-theme="dark"] .alert-danger { background: rgba(248,113,113,.12); color: #fca5a5; border-color: rgba(248,113,113,.25); }
[data-theme="dark"] .alert-warning { background: rgba(209,165,110,.12); color: #e8cfa8; border-color: rgba(209,165,110,.25); }
[data-theme="dark"] .bg-light { background: var(--blue-800) !important; }
[data-theme="dark"] .border { border-color: var(--border) !important; }

/* Navbar & footer */
[data-theme="dark"] #mainNav { background: var(--surface); }
[data-theme="dark"] .site-footer { background: var(--blue-900); border-color: var(--border); }
[data-theme="dark"] .compact-filter-btn,
[data-theme="dark"] .filter-dropdown { background: var(--surface); border-color: var(--border); color: var(--text); }

/* Hero: overlay putih diganti gelap biar foto tetap kebaca */
[data-theme="dark"] .hero-v2 {
    background:
        radial-gradient(ellipse 65% 90% at 50% 42%, rgba(10,15,30,.93) 0%, rgba(10,15,30,.8) 40%, rgba(10,15,30,.35) 65%, rgba(10,15,30,.05) 85%),
        url(/images/hero-bg-2.jpg);
    background-size: cover;
    background-position: center, center 30%;
}
[data-theme="dark"] .hero-v2-title { color: var(--text); }
[data-theme="dark"] .hero-v2-subtitle { color: var(--text); }

/* Kartu foto & placeholder */
[data-theme="dark"] .recent-card-img,
[data-theme="dark"] .card-img-wrapper,
[data-theme="dark"] .compare-photo,
[data-theme="dark"] .photo-skeleton-wrap { background: linear-gradient(135deg, var(--blue-800), var(--blue-900)); }
[data-theme="dark"] .card-img-placeholder { background: linear-gradient(135deg, var(--blue-800), var(--blue-900)); color: var(--text-muted); }
[data-theme="dark"] .img-skeleton { background: linear-gradient(90deg, var(--blue-800) 25%, var(--blue-700) 37%, var(--blue-800) 63%); background-size: 400% 100%; }

/* Kotak verifikasi & notifikasi unread */
[data-theme="dark"] .verification-box,
[data-theme="dark"] .verification-prompt { background: rgba(209,165,110,.1); border-color: rgba(209,165,110,.3); color: var(--text); }
[data-theme="dark"] .notif-item:hover { background: var(--blue-800); }
[data-theme="dark"] .notif-unread { background: rgba(161,161,170,.1); }
[data-theme="dark"] .notif-item { border-color: var(--border); }

/* Form pilihan tipe (lost/found) di form posting */
[data-theme="dark"] .type-box { background: var(--blue-800); border-color: var(--border); }
[data-theme="dark"] .type-option:hover .type-box { background: var(--blue-700); border-color: var(--text-muted); }
[data-theme="dark"] .photo-upload-area { background: var(--blue-800); }
[data-theme="dark"] .btn-google { background: var(--surface); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .btn-google:hover { background: var(--blue-800); }

/* Admin */
[data-theme="dark"] .admin-wrapper { background: var(--bg); }
[data-theme="dark"] .admin-sidebar { background: var(--blue-900); }

/* Perbaikan kontras teks brand "Lost&Found" — warnanya kebetulan sama kayak bg gelap */
[data-theme="dark"] .brand-line-1 { color: var(--text); }

/* Perbaikan dropdown Bootstrap (profil) — teks defaultnya gelap, invisible di dropdown gelap */
[data-theme="dark"] .dropdown-item { color: var(--text); }
[data-theme="dark"] .dropdown-item:hover { background: var(--blue-800); color: var(--text); }
[data-theme="dark"] .dropdown-item-text { color: var(--text-muted); }
[data-theme="dark"] .dropdown-divider { border-color: var(--border); }

/* Perbaikan header dropdown notifikasi — background-nya masih hardcode putih */
[data-theme="dark"] .notif-header { background: var(--surface); }
[data-theme="dark"] .notif-item { border-color: var(--border); }

/* Perbaikan hero halaman Tentang / Barang Hilang / Barang Ditemukan
   (background pastel terang bikin judul yang sekarang terang jadi invisible) */
[data-theme="dark"] .type-hero-lost  { background: linear-gradient(135deg, rgba(209,165,110,.14), rgba(209,165,110,.05)); }
[data-theme="dark"] .type-hero-found { background: linear-gradient(135deg, rgba(111,149,142,.14), rgba(111,149,142,.05)); }

/* Perbaikan kotak pilih tipe (lost/found) di form posting — background pastel
   terang bikin teks putih jadi invisible saat kepilih */
[data-theme="dark"] .type-option input:checked + .type-lost { background: rgba(220,38,38,.15); }
[data-theme="dark"] .type-option input:checked + .type-found { background: rgba(22,163,74,.15); }

/* Perbaikan teks deskripsi (class Bootstrap text-body ga ikut tema kita) */
[data-theme="dark"] .text-body { color: var(--text) !important; }
[data-theme="dark"] .text-secondary { color: var(--text-muted) !important; }

/* Perbaikan lingkaran "VS" di halaman Kenapa Cocok — bg & teks kebetulan
   sama-sama terang di dark mode, jadi invisible */
[data-theme="dark"] .vs-circle { background: var(--text); color: var(--blue-900); }

/* Perbaikan card-header/section yang maksa bg-white (dipakai di banyak
   halaman: Compare, Show, Admin, Claims/Verify) */
[data-theme="dark"] .bg-white { background: var(--surface) !important; }

/* Perbaikan tabel Bootstrap (dipakai di Postingan Saya, Admin) —
   override variabel CSS internal Bootstrap buat tabel */
[data-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border);
    --bs-table-striped-bg: rgba(255,255,255,.03);
    --bs-table-striped-color: var(--text);
    --bs-table-hover-bg: rgba(255,255,255,.06);
    --bs-table-hover-color: var(--text);
    color: var(--text);
}
[data-theme="dark"] .table-light,
[data-theme="dark"] .table-light > * {
    --bs-table-bg: var(--blue-800);
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border);
    background-color: var(--blue-800);
    color: var(--text);
}

/* Toggle dark mode */
.theme-toggle-btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: none;
    background: var(--primary-pale);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: var(--transition);
    flex-shrink: 0;
}
.theme-toggle-btn:hover { background: var(--accent-glow); color: var(--accent-dark); }

[data-theme="dark"] .bg-warning, [data-theme="dark"] .badge.bg-warning { color: #1c1917 !important; }

/* ── Background kontur halaman penuh (ScrollBackdrop di layout) ──────── */
.page-main {
    position: relative;
    overflow: clip;   /* tidak bikin scroll container, jadi sticky/modal tetap aman */
    background: linear-gradient(180deg, var(--bg) 0%, #e8eaed 18%, #e3e6e9 65%, var(--bg) 100%);
}
[data-theme="dark"] .page-main {
    background: linear-gradient(180deg, var(--bg) 0%, #151517 20%, #121214 70%, var(--bg) 100%);
}
/* tanpa z-index supaya tidak membuat stacking context baru (modal Bootstrap tetap di atas) */
.page-main-content { position: relative; }
.admin-main.page-main { flex: 1; }
/* Jarak ke footer ada DI DALAM main (bukan margin footer), supaya background kontur menyambung sampai footer */
main.page-main:not(.admin-main) { padding-bottom: 3rem; flex: 1 0 auto; }
/* Footer selalu menempel di dasar layar, walau isi halaman pendek (mis. Postingan Saya) */
#app { min-height: 100vh; display: flex; flex-direction: column; }
#app > .site-footer { flex-shrink: 0; }

/* ── Responsif HP: footer & anti-overflow ───────────────────── */
html, body { max-width: 100%; overflow-x: clip; }
.footer-brand-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem .75rem; }
@media (min-width: 768px) { .footer-brand-row { justify-content: flex-start; } }
.footer-tagline { min-width: 0; }
@media (max-width: 575.98px) {
    .card-img-wrapper { aspect-ratio: 16 / 10; }
    .card-img-wrapper .photo-skeleton-wrap { aspect-ratio: auto !important; height: 100%; }
}
@media (max-width: 767.98px) {
    .how-step-about { display: grid; grid-template-columns: 56px 1fr; column-gap: 1rem; align-items: start; padding: .25rem 0; }
    .how-step-about .how-num { grid-row: 1 / span 2; margin: 0; }
    .how-step-about .how-step-title { align-self: end; margin-bottom: .15rem; }
    .how-step-about .how-step-text { max-width: none; margin: 0; }
}

/* ── Tabel → kartu di layar HP ─────────────────────────────── */
@media (max-width: 767.98px) {
    .table-stack, .table-stack tbody { display: block; width: 100%; }
    .table-stack thead { display: none; }
    .table-stack tr { display: block; margin: 0 0 .75rem; padding: .75rem .9rem; background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 14px; }
    .table-stack td { display: block; width: 100%; padding: .35rem 0 !important; border: 0 !important; background: transparent !important; max-width: none !important; text-align: left !important; overflow-wrap: anywhere; }
    .table-stack td::before { content: attr(data-label); display: block; margin-bottom: .1rem; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
    .table-stack td[data-cell="main"] { display: block; padding-bottom: .55rem !important; margin-bottom: .25rem; border-bottom: 1px solid var(--border) !important; }
    .table-stack td[data-cell="main"]::before, .table-stack td[data-cell="hide"] { display: none; }
    .table-stack td[colspan] { display: block; text-align: center !important; }
    .table-stack td[colspan]::before { display: none; }
    .table-stack td[data-label="Aksi"] .d-flex { justify-content: flex-start !important; }
    .table-responsive:has(> .table-stack) { overflow: visible; }
}
@media (max-width: 767.98px) {
    .table-stack td > .btn { justify-self: start; }
    .pagination { flex-wrap: wrap; justify-content: center; row-gap: .35rem; }
    .pagination .page-link { white-space: nowrap; padding: .4rem .65rem; }
}
.admin-topbar h5 { min-width: 0; }
@media (max-width: 575.98px) {
    .detail-photo img { max-height: 320px; object-fit: cover; }
    .compare-photo { aspect-ratio: 16 / 10; }
    .compare-photo .photo-skeleton-wrap { aspect-ratio: auto !important; height: 100%; }
}
@media (max-width: 991.98px) {
    #navMenu .navbar-nav.align-items-lg-center { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .25rem .5rem .6rem; }
    #navMenu .navbar-nav.align-items-lg-center > li:has(> a.btn, > .btn-primary) { flex: 1 1 100%; order: 5; }
    #navMenu .navbar-nav.align-items-lg-center > li > .btn-primary,
    #navMenu .navbar-nav.align-items-lg-center > li > .btn-outline-primary { width: 100%; justify-content: center; }
    #navMenu .navbar-nav.align-items-lg-center > li.dropdown { flex: 1 1 auto; order: 3; }
}
@media (max-width: 991.98px) {
    .notif-dropdown { position: fixed !important; top: 84px !important; left: 12px !important; right: 12px !important; width: auto !important; max-height: calc(100vh - 110px); overflow-y: auto; }
}

/* ═══ Penyelarasan Bootstrap ke palet app (terang + gelap) ═══ */
:root {
    --bs-primary: #52525b; --bs-primary-rgb: 82, 82, 91;
    --bs-link-color: #52525b; --bs-link-color-rgb: 82, 82, 91;
    --bs-link-hover-color: #18181b; --bs-link-hover-color-rgb: 24, 24, 27;
    --bs-primary-bg-subtle: #ececee; --bs-primary-text-emphasis: #3f3f46; --bs-primary-border-subtle: #d4d4d8;
    --bs-info: #52736d; --bs-info-rgb: 82, 115, 109;
    --bs-warning: #b07a45; --bs-warning-rgb: 176, 122, 69;
}
:root[data-theme="dark"], :root[data-bs-theme="dark"] {
    --bs-body-bg: var(--bg); --bs-body-color: var(--text);
    --bs-secondary-color: var(--text-muted); --bs-tertiary-color: var(--text-muted);
    --bs-border-color: var(--border); --bs-emphasis-color: #fff;
    --bs-secondary-bg: var(--blue-800); --bs-tertiary-bg: var(--blue-800);
    --bs-primary: #d4d4d8; --bs-primary-rgb: 212, 212, 216;
    --bs-link-color: #d4d4d8; --bs-link-color-rgb: 212, 212, 216;
    --bs-link-hover-color: #fff; --bs-link-hover-color-rgb: 255, 255, 255;
    --bs-primary-bg-subtle: rgba(212,212,216,.14); --bs-primary-text-emphasis: #e4e4e7; --bs-primary-border-subtle: #52525b;
    --bs-info: #86aaa3; --bs-info-rgb: 134, 170, 163;
    --bs-warning: #d1a56e; --bs-warning-rgb: 209, 165, 110;
    color-scheme: dark;
}
.bg-primary { color: #fff; }
.bg-primary-subtle.text-primary, .text-primary.bg-primary-subtle { color: var(--bs-primary-text-emphasis) !important; }
[data-theme="dark"] .bg-primary { color: #18181b; }
[data-theme="dark"] .btn-light { background: var(--blue-800); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .btn-light:hover { background: var(--blue-700); color: #fff; }
[data-theme="dark"] .bg-light, [data-theme="dark"] .table-light { background-color: var(--blue-800) !important; color: var(--text) !important; }
[data-theme="dark"] .bg-white { background-color: var(--surface) !important; }
[data-theme="dark"] .text-dark { color: var(--text) !important; }
[data-theme="dark"] .badge.bg-light { color: var(--text) !important; }
[data-theme="dark"] .badge.text-dark { color: #18181b !important; }
[data-theme="dark"] .form-text, [data-theme="dark"] small.text-muted, [data-theme="dark"] .form-label small { color: var(--text-muted) !important; }
[data-theme="dark"] .input-group-text { background: var(--blue-800); border-color: var(--border); color: var(--text-muted); }
[data-theme="dark"] .toggle-password { background: var(--blue-800); border-color: var(--border); color: var(--text-muted); }
[data-theme="dark"] .toggle-password:hover { background: var(--blue-700); color: #fff; }
[data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background: var(--blue-800); color: var(--text); border-color: var(--accent); box-shadow: 0 0 0 .2rem var(--accent-glow); }
[data-theme="dark"] .form-control[type="file"]::file-selector-button { background: var(--blue-700); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .form-check-input { background-color: var(--blue-800); border-color: var(--blue-600); }
[data-theme="dark"] .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
[data-theme="dark"] .breadcrumb { --bs-breadcrumb-divider-color: var(--text-muted); }
[data-theme="dark"] .navbar-toggler { border-color: var(--border); }
[data-theme="dark"] .page-link { background: var(--surface); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .page-link:hover { background: var(--blue-700); color: #fff; }
[data-theme="dark"] .page-item.active .page-link { background: var(--accent); border-color: var(--accent); color: #18181b; }
[data-theme="dark"] .page-item.disabled .page-link { background: var(--blue-800); color: var(--blue-600); border-color: var(--border); }
[data-theme="dark"] .list-group-item { background: transparent; color: var(--text); border-color: var(--border); }
[data-theme="dark"] .modal-content { background: var(--surface); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: var(--border); }
[data-theme="dark"] .alert-success { background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.35); color: #86efac; }
[data-theme="dark"] .alert-danger  { background: rgba(248,113,113,.14); border-color: rgba(248,113,113,.35); color: #fca5a5; }
[data-theme="dark"] .alert-warning { background: rgba(209,165,110,.14); border-color: rgba(209,165,110,.35); color: #e8c99b; }
[data-theme="dark"] .alert-info    { background: rgba(134,170,163,.14); border-color: rgba(134,170,163,.35); color: #b5d1cb; }
[data-theme="dark"] hr { border-color: var(--border); opacity: 1; }
[data-theme="dark"] .dropdown-menu { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .dropdown-item { color: var(--text); }
[data-theme="dark"] .dropdown-item:hover { background: var(--blue-700); color: #fff; }
[data-theme="dark"] .login-hint { background: rgba(255,255,255,.04); }
[data-theme="dark"] .auth-title { color: var(--text); }
.auth-body #app { width: 100%; min-height: 0; align-items: center; justify-content: center; }
.auth-body { overflow: hidden auto; }
.auth-body::after { display: none; }
[data-theme="dark"] .btn-primary { background: linear-gradient(135deg, #63636b, #4a4a51); color: #fff; }
[data-theme="dark"] .btn-primary:hover { background: linear-gradient(135deg, #71717a, #52525b); color: #fff; }
[data-theme="dark"] .btn-primary:disabled, [data-theme="dark"] .btn-primary.disabled { background: #3f3f46; color: #a1a1aa; opacity: 1; }
[data-theme="dark"] .bg-primary { background-color: #3f3f46 !important; color: #fff !important; }
[data-theme="dark"] .bg-primary .text-white, [data-theme="dark"] .bg-primary * { color: #fff; }
[data-theme="dark"] .border-primary { border-color: #63636b !important; }

/* ── Background halaman login: animasi, tanpa foto ── */
:root {
    --auth-bg-base: linear-gradient(135deg, #f4f1ec 0%, #e7e5e1 55%, #dfe4e2 100%);
    --auth-blob-o: .5; --auth-blob-c: #a1a1aa;
    --auth-ring: rgba(82,82,91,.16); --auth-vignette: rgba(24,24,27,.10);
}
:root[data-theme="dark"] {
    --auth-bg-base: linear-gradient(135deg, #0c0c0d 0%, #131315 55%, #0e1110 100%);
    --auth-blob-o: .26; --auth-blob-c: #52525b;
    --auth-ring: rgba(255,255,255,.07); --auth-vignette: rgba(0,0,0,.55);
}
.auth-body { background: var(--bg) !important; background-image: none !important; }
.auth-body::before { display: none !important; }
.auth-theme-btn { border-color: var(--border) !important; background: var(--surface) !important; color: var(--text) !important; }