/* ================================================================
   SlipGaji.id — Stylesheet (Professional Navy Theme)
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Source+Sans+3:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --navy      : #0f2545;
  --navy-mid  : #1a3a6b;
  --navy-light: #2c5282;
  --biru      : #3b82f6;
  --biru-muda : #dbeafe;
  --emas      : #f59e0b;
  --emas-muda : #fef3c7;
  --hijau     : #059669;
  --hijau-muda: #d1fae5;
  --merah     : #dc2626;
  --abu       : #6b7280;
  --abu-muda  : #f3f4f6;
  --putih     : #ffffff;
  --teks      : #111827;
  --border    : #e5e7eb;
  --shadow-sm : 0 1px 3px rgba(0,0,0,.08);
  --shadow-md : 0 4px 16px rgba(0,0,0,.1);
  --shadow-lg : 0 8px 32px rgba(0,0,0,.12);
  --radius    : 12px;
  --radius-sm : 8px;
}

/* ── Reset ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:16px;}
body{font-family:'Source Sans 3',system-ui,sans-serif;background:var(--abu-muda);color:var(--teks);line-height:1.6;min-height:100vh;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--navy-mid);text-decoration:underline;text-underline-offset:3px;}
a:hover{color:var(--biru);}

/* ── Typography ────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:'Libre Baskerville',Georgia,serif;line-height:1.25;color:var(--navy);}
h1{font-size:clamp(1.9rem,5vw,3rem);}
h2{font-size:clamp(1.4rem,3.5vw,2rem);}
h3{font-size:clamp(1.1rem,2.5vw,1.4rem);}
h4{font-size:1rem;}

/* ── Layout ────────────────────────────────────────────────── */
.container{max-width:860px;margin:0 auto;padding:0 20px;}

/* ── Header ────────────────────────────────────────────────── */
.site-header{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 60%,var(--navy-light) 100%);
  padding:48px 24px 52px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.site-header::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(to right,transparent,var(--emas),#fcd34d,var(--emas),transparent);
}
.header-badge{
  display:inline-block;
  background:rgba(245,158,11,.15);
  border:1px solid rgba(245,158,11,.4);
  color:var(--emas-muda);
  font-size:.75rem;letter-spacing:3px;text-transform:uppercase;
  padding:5px 16px;border-radius:999px;margin-bottom:16px;
  font-family:'Source Sans 3',sans-serif;
}
.header-title{color:var(--putih);margin-bottom:12px;text-shadow:0 2px 20px rgba(0,0,0,.3);}
.header-sub{color:#93c5fd;font-size:clamp(.95rem,2.5vw,1.15rem);max-width:520px;margin:0 auto;}

/* ── Nav ───────────────────────────────────────────────────── */
.site-nav{background:var(--navy);border-bottom:2px solid var(--emas);}
.site-nav ul{display:flex;list-style:none;gap:4px;justify-content:center;padding:8px 20px;max-width:860px;margin:0 auto;flex-wrap:wrap;}
.site-nav a{display:block;padding:8px 14px;color:#cbd5e1;text-decoration:none;font-size:.9rem;border-radius:var(--radius-sm);transition:all .2s;}
.site-nav a:hover,.site-nav a[aria-current="page"]{background:rgba(245,158,11,.2);color:var(--emas-muda);}

/* ── Breadcrumb ────────────────────────────────────────────── */
.breadcrumb{padding:12px 20px;max-width:860px;margin:0 auto;font-size:.85rem;color:var(--abu);}
.breadcrumb a{color:var(--abu);text-decoration:none;}
.breadcrumb a:hover{color:var(--navy-mid);}
.breadcrumb span{margin:0 6px;opacity:.5;}

/* ── Main ──────────────────────────────────────────────────── */
.site-main{padding:32px 0 80px;}

/* ── Card ──────────────────────────────────────────────────── */
.card{background:var(--putih);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(20px,4vw,36px);box-shadow:var(--shadow-sm);}

/* ── Form ──────────────────────────────────────────────────── */
.form-section{margin-bottom:28px;}
.form-section-title{
  font-size:.75rem;letter-spacing:2px;text-transform:uppercase;color:var(--abu);
  margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--border);
  font-family:'Source Sans 3',sans-serif;font-weight:600;
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
@media(max-width:580px){.form-grid,.form-grid-3{grid-template-columns:1fr;}}

.form-group{display:flex;flex-direction:column;gap:5px;}
label{font-size:.85rem;font-weight:600;color:var(--navy);letter-spacing:.2px;}

input[type="text"],input[type="number"],input[type="date"],input[type="email"],select,textarea{
  padding:9px 12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  font-family:'Source Sans 3',sans-serif;font-size:.95rem;color:var(--teks);
  background:var(--putih);outline:none;transition:border-color .2s,box-shadow .2s;width:100%;
}
input:focus,select:focus,textarea:focus{border-color:var(--navy-mid);box-shadow:0 0 0 3px rgba(59,130,246,.15);}
textarea{resize:vertical;min-height:80px;}
.input-hint{font-size:.78rem;color:var(--abu);margin-top:2px;}

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 28px;background:linear-gradient(135deg,var(--navy),var(--navy-mid));
  color:var(--putih);border:none;border-radius:var(--radius-sm);cursor:pointer;
  font-family:'Source Sans 3',sans-serif;font-size:.95rem;font-weight:600;
  transition:opacity .2s,transform .1s;text-decoration:none;letter-spacing:.2px;
}
.btn-primary:hover{opacity:.88;color:var(--putih);}
.btn-primary:active{transform:scale(.98);}

.btn-success{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 28px;background:linear-gradient(135deg,var(--hijau),#047857);
  color:var(--putih);border:none;border-radius:var(--radius-sm);cursor:pointer;
  font-family:'Source Sans 3',sans-serif;font-size:.95rem;font-weight:600;
  transition:opacity .2s;
}
.btn-success:hover{opacity:.88;}

.btn-outline{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 24px;background:transparent;
  color:var(--navy);border:1.5px solid var(--navy);border-radius:var(--radius-sm);cursor:pointer;
  font-family:'Source Sans 3',sans-serif;font-size:.95rem;font-weight:600;
  transition:all .2s;
}
.btn-outline:hover{background:var(--navy);color:var(--putih);}

.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:24px;}

/* ── Preview Slip ──────────────────────────────────────────── */
#preview-area{display:none;margin-top:32px;}

.slip-preview{
  background:var(--putih);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-md);max-width:680px;margin:0 auto;
}
.slip-header{
  background:linear-gradient(135deg,var(--navy),var(--navy-mid));
  color:var(--putih);padding:24px 32px;
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  flex-wrap:wrap;
}
.slip-company-name{font-size:1.2rem;font-weight:700;font-family:'Libre Baskerville',serif;margin-bottom:4px;}
.slip-company-addr{font-size:.8rem;opacity:.8;line-height:1.5;max-width:260px;}
.slip-badge{
  background:rgba(245,158,11,.2);border:1px solid rgba(245,158,11,.5);
  color:var(--emas-muda);padding:6px 16px;border-radius:999px;
  font-size:.75rem;letter-spacing:1px;text-transform:uppercase;white-space:nowrap;
  align-self:flex-start;
}
.slip-title{
  background:var(--abu-muda);border-bottom:1px solid var(--border);
  padding:14px 32px;text-align:center;
  font-family:'Libre Baskerville',serif;font-size:1rem;font-weight:700;
  color:var(--navy);letter-spacing:2px;text-transform:uppercase;
}
.slip-body{padding:24px 32px;}
.slip-employee{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  background:var(--biru-muda);border-radius:var(--radius-sm);padding:16px;
  margin-bottom:24px;font-size:.9rem;
}
.slip-employee-item{display:flex;gap:8px;}
.sei{color:var(--navy);font-weight:600;min-width:110px;}
.sev{color:var(--teks);}

.slip-table{width:100%;border-collapse:collapse;font-size:.9rem;margin-bottom:16px;}
.slip-table th{background:var(--navy);color:var(--putih);padding:10px 14px;text-align:left;font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.5px;text-transform:uppercase;}
.slip-table td{padding:9px 14px;border-bottom:1px solid var(--border);}
.slip-table tr:last-child td{border-bottom:none;}
.slip-table tr:nth-child(even) td{background:var(--abu-muda);}
.slip-table .num{text-align:right;font-family:'DM Mono',monospace;font-size:.88rem;}
.slip-table .plus{color:var(--hijau);}
.slip-table .minus{color:var(--merah);}

.slip-total{
  background:var(--navy);color:var(--putih);
  padding:14px 20px;border-radius:var(--radius-sm);
  display:flex;justify-content:space-between;align-items:center;
  margin-top:8px;
}
.slip-total-label{font-weight:700;font-size:.9rem;letter-spacing:1px;text-transform:uppercase;}
.slip-total-amount{font-family:'DM Mono',monospace;font-size:1.3rem;font-weight:700;color:var(--emas-muda);}

.slip-footer-note{
  margin-top:20px;padding-top:16px;border-top:1px dashed var(--border);
  font-size:.78rem;color:var(--abu);text-align:center;line-height:1.7;
}
.slip-signature{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px;
}
.sig-box{text-align:center;padding:16px;}
.sig-line{border-bottom:1px solid var(--border);height:52px;margin-bottom:8px;}
.sig-label{font-size:.8rem;color:var(--abu);}

/* ── Ad slot ───────────────────────────────────────────────── */
.ad-slot{
  background:var(--putih);border:1px dashed var(--border);border-radius:var(--radius-sm);
  padding:16px;text-align:center;color:var(--abu);font-size:.85rem;
  min-height:90px;display:flex;align-items:center;justify-content:center;
  margin:24px 0;
}

/* ── Article / SEO ─────────────────────────────────────────── */
.article-section{margin-top:40px;}
.article-section h2{margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--biru-muda);}
.article-section h3{font-size:1.1rem;margin:22px 0 8px;color:var(--navy-mid);}
.article-section p{font-size:1rem;color:#374151;line-height:1.8;margin-bottom:.75rem;}
.article-section ul,.article-section ol{padding-left:22px;margin-bottom:14px;}
.article-section li{font-size:1rem;color:#374151;line-height:1.8;margin-bottom:4px;}

/* ── FAQ ───────────────────────────────────────────────────── */
.faq-section{margin-top:40px;}
.faq-item{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px;overflow:hidden;background:var(--putih);}
.faq-question{width:100%;padding:15px 20px;background:transparent;border:none;text-align:left;cursor:pointer;font-family:'Source Sans 3',sans-serif;font-size:1rem;font-weight:600;color:var(--navy);display:flex;justify-content:space-between;align-items:center;gap:12px;transition:background .2s;}
.faq-question:hover{background:var(--biru-muda);}
.faq-question::after{content:'＋';color:var(--navy-mid);font-size:1rem;flex-shrink:0;transition:transform .2s;}
.faq-question.open::after{transform:rotate(45deg);}
.faq-answer{display:none;padding:0 20px 16px;font-size:.95rem;color:#374151;border-top:1px solid var(--border);line-height:1.8;}
.faq-answer.open{display:block;}
.faq-answer p{margin-top:12px;}

/* ── Category grid ─────────────────────────────────────────── */
.kat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:16px;}
.kat-card{background:var(--putih);border:1.5px solid var(--border);border-radius:var(--radius);padding:18px 14px;text-align:center;text-decoration:none;color:var(--navy);transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:8px;}
.kat-card:hover{background:var(--navy);color:var(--putih);border-color:var(--navy);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.kat-card-icon{font-size:1.8rem;}
.kat-card-label{font-size:.88rem;font-weight:600;line-height:1.3;}

/* ── Feature chips ─────────────────────────────────────────── */
.feature-row{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0;}
.feature-chip{display:inline-flex;align-items:center;gap:6px;background:var(--biru-muda);color:var(--navy-mid);border-radius:999px;padding:5px 14px;font-size:.85rem;font-weight:500;}

/* ── Footer ────────────────────────────────────────────────── */
.site-footer{background:var(--navy);color:#94a3b8;padding:40px 24px 28px;}
.footer-inner{max-width:860px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:28px;}
.footer-brand h2{color:var(--putih);font-size:1.3rem;margin-bottom:8px;}
.footer-brand p{font-size:.88rem;line-height:1.7;opacity:.8;}
.footer-links h3{color:var(--emas-muda);font-size:.7rem;letter-spacing:3px;text-transform:uppercase;font-family:'Source Sans 3',sans-serif;margin-bottom:10px;}
.footer-links ul{list-style:none;}
.footer-links li{margin-bottom:6px;}
.footer-links a{color:#94a3b8;text-decoration:none;font-size:.9rem;transition:color .2s;}
.footer-links a:hover{color:var(--putih);}
.footer-bottom{max-width:860px;margin:28px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);text-align:center;font-size:.82rem;opacity:.5;}

/* ── Print styles for PDF ──────────────────────────────────── */
@media print {
  /* Strategi: sembunyikan SEMUA child body dulu,
     lalu munculkan hanya #slip-container dengan position:fixed */
  body * {
    visibility: hidden !important;
  }

  #slip-container,
  #slip-container * {
    visibility: visible !important;
  }

  #slip-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .slip-preview {
    box-shadow: none !important;
    border: 1px solid #e5e7eb !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  body {
    background: white !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ── Animations ────────────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
.fade-up{animation:fadeUp .4s ease both;}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:var(--abu-muda);}
::-webkit-scrollbar-thumb{background:var(--navy-light);border-radius:3px;}
::selection{background:var(--biru-muda);color:var(--navy);}

@media(max-width:600px){
  .site-header{padding:36px 20px 40px;}
  .card{padding:20px 16px;}
  .slip-header{flex-direction:column;}
  .slip-employee{grid-template-columns:1fr;}
  .slip-signature{grid-template-columns:1fr;}
  .form-section{margin-bottom:20px;}
}