/* ══════════════════════════════════════════════════════════════════════
   wwwroot/css/regulasi-sop.css
   Styles khusus halaman publik "Regulasi & SOP PPID"
   (Views/Home/RegulasiSop.cshtml) — diimport hanya di halaman tersebut.
   Design tokens disinkronkan dengan home.css / laporan.css.
   ══════════════════════════════════════════════════════════════════════ */

:root {
    --rs-ijo        : #009d66;
    --rs-ijo-dark   : #006b3c;
    --rs-ijo-mid    : #00874c;
    --rs-ijo-light  : #e8f5ee;
    --rs-navy       : #0D1F3C;
    --rs-oren       : #f59e0b;
    --rs-oren-hover : #d97706;
    --rs-bg         : #f8fafc;
    --rs-muted      : #6b7280;
    --rs-border     : #e5e7eb;
    --rs-radius-card: 16px;
    --rs-shadow-sm  : 0 2px 8px rgba(0,0,0,.06);
}

body { font-family:'Plus Jakarta Sans', sans-serif; background:var(--rs-bg); }

/* ── Hero / breadcrumb bar ───────────────────────────────────────────── */
.rs-hero {
    background: linear-gradient(135deg, var(--rs-ijo-dark) 0%, var(--rs-ijo-mid) 100%);
    padding: 52px 0 44px;
    position: relative;
    overflow: hidden;
}
.rs-hero::before {
    content:'';
    position:absolute; inset:0;
    background: url("data:image/svg+xml,%3csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cg fill='%23ffffff' fill-opacity='0.03'%3e%3cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e") repeat;
}
.rs-hero-inner {
    max-width:1200px; margin:0 auto; padding:0 1.5rem;
    position: relative; z-index:1;
}
.rs-breadcrumb {
    display:flex; align-items:center; gap:6px;
    font-size:12px; color:rgba(255,255,255,.5);
    margin-bottom:16px;
}
.rs-breadcrumb a { color:rgba(255,255,255,.5); text-decoration:none; transition:color .15s; }
.rs-breadcrumb a:hover { color:rgba(255,255,255,.85); }
.rs-breadcrumb svg { width:12px; height:12px; }
.rs-hero h1 {
    font-size:clamp(1.75rem, 3vw, 2.25rem);
    font-weight:800; color:white; margin:0 0 8px;
    letter-spacing:-.02em;
}
.rs-hero p {
    font-size:14.5px; color:rgba(255,255,255,.6); margin:0;
    max-width:560px; line-height:1.7;
}

/* ── Section wrapper ─────────────────────────────────────────────────── */
.rs-section {
    max-width:1200px; margin:0 auto; padding:52px 1.5rem 80px;
}

/* ── Results bar ─────────────────────────────────────────────────────── */
.rs-meta {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:32px; flex-wrap:wrap; gap:12px;
}
.rs-count { font-size:13px; font-weight:600; color:var(--rs-muted); }
.rs-count strong { color:#111827; }

/* ── Grid ───────────────────────────────────────────────────────────── */
.rs-grid {
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:28px;
}
@media(max-width:1100px) { .rs-grid { grid-template-columns:repeat(3,1fr); } }
@media(max-width:768px)  { .rs-grid { grid-template-columns:repeat(2,1fr); gap:16px; } }
@media(max-width:480px)  { .rs-grid { grid-template-columns:1fr; } }

/* ── Card ───────────────────────────────────────────────────────────── */
.rs-card {
    background:#ffffff;
    border-radius:var(--rs-radius-card);
    overflow:hidden;
    box-shadow:var(--rs-shadow-sm);
    border:1px solid var(--rs-border);
    transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
    display:flex; flex-direction:column;
}
.rs-card:hover {
    transform:translateY(-6px);
    box-shadow:0 16px 48px rgba(0,107,60,.18);
    border-color:transparent;
}

/* ── Cover area ─────────────────────────────────────────────────────── */
.rs-cover {
    position:relative;
    aspect-ratio:3/4;
    overflow:hidden;
    background:var(--rs-navy);
}
/* Sampul dari halaman pertama dokumen (rasio A4) — ditampilkan utuh,
   tidak dipotong, dengan latar lembut di sekelilingnya. */
.rs-cover > img {
    width:100%; height:100%;
    object-fit:contain;
    background:#eef2f4;
    padding:8px;
    box-sizing:border-box;
    transition:transform .4s ease;
}
.rs-card:hover .rs-cover > img { transform:scale(1.02); }

/* Placeholder bergaya dokumen SK */
.rs-cover-placeholder {
    width:100%; height:100%;
    background: linear-gradient(145deg, var(--rs-ijo-dark) 0%, var(--rs-ijo-mid) 60%, var(--rs-ijo) 100%);
    display:flex; flex-direction:column;
    align-items:flex-start; padding:18px;
    position:relative; overflow:hidden;
}
.rs-cover-placeholder::before {
    content:'';
    position:absolute; top:-40px; right:-40px;
    width:160px; height:160px;
    background:rgba(255,255,255,.06); border-radius:50%;
}
.rs-cover-placeholder::after {
    content:'';
    position:absolute; bottom:-60px; left:-30px;
    width:200px; height:200px;
    background:rgba(255,255,255,.04); border-radius:50%;
}
.rs-ph-top { display:flex; align-items:center; gap:8px; z-index:1; position:relative; }
.rs-ph-logo {
    width:32px; height:32px; background:white; border-radius:6px;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.rs-ph-logo img { width:24px; height:24px; object-fit:contain; }
.rs-ph-brand { display:flex; flex-direction:column; }
.rs-ph-brand span:first-child { font-size:9px; font-weight:900; color:white; letter-spacing:.05em; line-height:1.1; }
.rs-ph-brand span:last-child  { font-size:7px; color:rgba(255,255,255,.6); line-height:1.2; }
.rs-ph-kategori {
    position:relative; z-index:1;
    display:inline-block; margin-top:12px;
    font-size:8.5px; font-weight:800; color:var(--rs-ijo-dark);
    background:white; padding:3px 8px; border-radius:20px;
    text-transform:uppercase; letter-spacing:.05em;
}
.rs-ph-dinas {
    position:relative; z-index:1;
    font-size:7.5px; font-weight:700; color:rgba(255,255,255,.6);
    text-transform:uppercase; letter-spacing:.06em;
    margin-top:auto;
}
.rs-ph-title {
    position:relative; z-index:1;
    font-size:12.5px; font-weight:800; color:white; line-height:1.35;
    margin-top:6px;
}
.rs-ph-year {
    position:relative; z-index:1;
    display:inline-block; margin-top:6px;
    font-size:22px; font-weight:900; color:var(--rs-oren);
    letter-spacing:-.02em; line-height:1;
}
.rs-ph-bar {
    position:absolute; bottom:0; left:0; right:0;
    height:4px; background:var(--rs-oren);
}

/* ── Hover overlay (Lihat & Unduh) ──────────────────────────────────── */
.rs-cover-overlay {
    position:absolute; inset:0; z-index:3;
    background: rgba(0,107,60,.78);
    display:flex; align-items:center; justify-content:center; gap:10px;
    opacity:0; pointer-events:none; transition:opacity .22s ease;
}
.rs-card:hover .rs-cover-overlay { opacity:1; pointer-events:auto; }
@media (hover: none) {
    .rs-cover-overlay { opacity:1; pointer-events:auto; }
}
.rs-cover-btn {
    display:inline-flex; align-items:center; gap:5px;
    font-size:11px; font-weight:700; padding:8px 14px;
    border-radius:8px; text-decoration:none; transition:all .15s;
    white-space:nowrap;
}
.rs-cover-btn-view { background:white; color:var(--rs-ijo-dark); }
.rs-cover-btn-view:hover { background:#f1f5f9; }
.rs-cover-btn-dl { background:var(--rs-oren); color:white; }
.rs-cover-btn-dl:hover { background:var(--rs-oren-hover); }
.rs-cover-btn svg { width:13px; height:13px; flex-shrink:0; }

/* ── Card body ──────────────────────────────────────────────────────── */
.rs-card-body {
    padding:16px 18px 18px;
    display:flex; flex-direction:column; gap:6px; flex:1;
}
.rs-card-title {
    font-size:13.5px; font-weight:700; color:#111827;
    line-height:1.35; margin:0;
}
.rs-card-sub { font-size:11.5px; color:var(--rs-muted); margin:0; line-height:1.5; }
.rs-card-footer {
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    margin-top:10px; padding-top:10px;
    border-top:1px solid #f3f4f6;
}
.rs-card-year {
    font-size:11px; font-weight:800; color:var(--rs-ijo-dark);
    background:var(--rs-ijo-light); border-radius:6px; padding:3px 8px;
    flex-shrink:0;
}
.rs-card-actions { display:flex; align-items:center; gap:12px; }
.rs-card-link {
    display:inline-flex; align-items:center; gap:4px;
    font-size:11px; font-weight:700; color:var(--rs-ijo-dark);
    text-decoration:none; transition:color .15s;
}
.rs-card-link:hover { color:var(--rs-oren); }
.rs-card-link svg { width:12px; height:12px; }

/* ── Empty state ────────────────────────────────────────────────────── */
.rs-empty { text-align:center; padding:80px 20px; color:var(--rs-muted); }
.rs-empty svg { width:48px; height:48px; margin:0 auto 16px; color:#d1d5db; }
.rs-empty p { font-size:14px; font-weight:600; color:#374151; margin-bottom:4px; }
.rs-empty span { font-size:13px; color:var(--rs-muted); }