/* ================================================================
   InvoiceKu.id — Premium Invoice Generator
   Aesthetic: Editorial / Warm Minimal — cream, charcoal, terracotta
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&family=DM+Mono:wght@400;500&display=swap');

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  --cream      : #faf7f2;
  --cream-dark : #f0ebe0;
  --parchment  : #e8dfc8;
  --charcoal   : #1c1c1e;
  --charcoal-70: rgba(28,28,30,.7);
  --charcoal-30: rgba(28,28,30,.3);
  --charcoal-10: rgba(28,28,30,.08);
  --terra      : #c0622a;
  --terra-muda : #f4e6dc;
  --terra-pale : #fdf3ee;
  --sage       : #4a6741;
  --sage-muda  : #eaf0e8;
  --ink        : #2d2d35;
  --border     : rgba(28,28,30,.12);
  --shadow-sm  : 0 1px 4px rgba(28,28,30,.06);
  --shadow-md  : 0 4px 24px rgba(28,28,30,.09);
  --shadow-lg  : 0 12px 48px rgba(28,28,30,.13);
  --radius     : 16px;
  --radius-sm  : 10px;
  --radius-xs  : 6px;
}

/* ── Reset ──────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%;}
body{font-family:'DM Sans',system-ui,sans-serif;background:var(--cream);color:var(--charcoal);line-height:1.6;min-height:100vh;}
a{color:var(--terra);text-underline-offset:3px;}
a:hover{opacity:.75;}
img{max-width:100%;height:auto;display:block;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;}

/* ── Type ───────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:'DM Serif Display',Georgia,serif;line-height:1.2;color:var(--charcoal);}
h1{font-size:clamp(2.2rem,6vw,3.8rem);}
h2{font-size:clamp(1.5rem,3.5vw,2.2rem);}
h3{font-size:clamp(1.1rem,2.5vw,1.4rem);}
p{margin-bottom:.75rem;color:var(--charcoal-70);}
p:last-child{margin-bottom:0;}

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

/* ── Header ─────────────────────────────────────────────────── */
.site-header{
  background:var(--charcoal);
  padding:56px 24px 60px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.site-header::before{
  content:'';
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 80% at 20% 50%, rgba(192,98,42,.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 70% at 80% 40%, rgba(74,103,65,.15) 0%, transparent 60%);
}
.header-inner{position:relative;z-index:1;}
.header-label{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(250,247,242,.08);border:1px solid rgba(250,247,242,.15);
  color:rgba(250,247,242,.7);font-size:.75rem;letter-spacing:3px;
  text-transform:uppercase;padding:6px 18px;border-radius:999px;margin-bottom:20px;
}
.header-title{color:var(--cream);margin-bottom:14px;}
.header-title em{font-style:italic;color:var(--terra);font-family:'DM Serif Display',serif;}
.header-sub{color:rgba(250,247,242,.6);font-size:clamp(1rem,2.5vw,1.15rem);max-width:480px;margin:0 auto 24px;}
.header-chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.chip{
  background:rgba(250,247,242,.07);border:1px solid rgba(250,247,242,.12);
  color:rgba(250,247,242,.75);font-size:.8rem;padding:5px 14px;border-radius:999px;
}

/* ── Nav ────────────────────────────────────────────────────── */
.site-nav{
  background:var(--cream-dark);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:100;
}
.nav-inner{
  max-width:900px;margin:0 auto;
  display:flex;align-items:center;gap:4px;
  padding:10px 24px;overflow-x:auto;scrollbar-width:none;
}
.nav-inner::-webkit-scrollbar{display:none;}
.site-nav a{
  white-space:nowrap;padding:7px 14px;color:var(--charcoal-70);
  text-decoration:none;font-size:.88rem;font-weight:500;
  border-radius:var(--radius-xs);transition:all .2s;
}
.site-nav a:hover{background:var(--charcoal-10);color:var(--charcoal);}
.site-nav a[aria-current="page"]{background:var(--charcoal);color:var(--cream);}

/* ── Breadcrumb ─────────────────────────────────────────────── */
.breadcrumb{padding:14px 24px;max-width:900px;margin:0 auto;font-size:.82rem;color:var(--charcoal-30);}
.breadcrumb a{color:var(--charcoal-30);text-decoration:none;}
.breadcrumb a:hover{color:var(--charcoal);}
.breadcrumb span{margin:0 6px;}

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

/* ── Card ───────────────────────────────────────────────────── */
.card{
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius);padding:clamp(24px,5vw,44px);
  box-shadow:var(--shadow-sm);
}

/* ── Section Title ──────────────────────────────────────────── */
.section-label{
  font-size:.7rem;letter-spacing:3px;text-transform:uppercase;
  color:var(--charcoal-30);font-weight:600;margin-bottom:14px;
  padding-bottom:10px;border-bottom:1px solid var(--border);
}

/* ── Form ───────────────────────────────────────────────────── */
.form-section{margin-bottom:32px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
@media(max-width:600px){.form-grid,.form-grid-3{grid-template-columns:1fr;}}
.form-group{display:flex;flex-direction:column;gap:5px;}
label{font-size:.82rem;font-weight:600;color:var(--charcoal);letter-spacing:.2px;}
.hint{font-size:.76rem;color:var(--charcoal-30);margin-top:3px;}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
select,textarea{
  padding:10px 14px;
  border:1.5px solid var(--border);
  border-radius:var(--radius-xs);
  font-size:.93rem;color:var(--charcoal);
  background:#fff;outline:none;
  transition:border-color .18s,box-shadow .18s;width:100%;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--charcoal);
  box-shadow:0 0 0 3px rgba(28,28,30,.07);
}
textarea{resize:vertical;min-height:72px;}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231c1c1e' opacity='.4' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;}

/* ── Item rows ──────────────────────────────────────────────── */
.items-table-header{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr 40px;
  gap:8px;padding:8px 12px;
  background:var(--cream-dark);border-radius:var(--radius-xs);
  font-size:.72rem;letter-spacing:2px;text-transform:uppercase;
  color:var(--charcoal-30);font-weight:600;margin-bottom:8px;
}
.item-row{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr 40px;
  gap:8px;align-items:center;
  padding:6px 0;border-bottom:1px solid var(--border);
  animation:fadeRowIn .2s ease both;
}
@keyframes fadeRowIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.item-row input{padding:8px 10px;font-size:.9rem;}
.item-total{
  font-family:'DM Mono',monospace;font-size:.88rem;
  color:var(--charcoal);text-align:right;padding-right:4px;
  font-weight:500;min-width:80px;
}
.btn-del{
  width:32px;height:32px;border-radius:50%;border:none;
  background:rgba(192,98,42,.1);color:var(--terra);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;transition:all .2s;flex-shrink:0;
}
.btn-del:hover{background:var(--terra);color:#fff;}

@media(max-width:600px){
  .items-table-header{display:none;}
  .item-row{grid-template-columns:1fr 1fr;gap:8px;padding:12px 0;}
  .item-row input:first-child{grid-column:1/-1;}
  .item-total{text-align:left;}
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn-primary{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 28px;background:var(--charcoal);color:var(--cream);
  border:none;border-radius:var(--radius-xs);
  font-size:.93rem;font-weight:600;letter-spacing:.2px;
  transition:opacity .18s,transform .1s;text-decoration:none;
}
.btn-primary:hover{opacity:.85;color:var(--cream);}
.btn-primary:active{transform:scale(.98);}

.btn-terra{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 28px;background:var(--terra);color:#fff;
  border:none;border-radius:var(--radius-xs);
  font-size:.93rem;font-weight:600;transition:opacity .18s;
}
.btn-terra:hover{opacity:.85;}

.btn-ghost{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 24px;background:transparent;
  color:var(--charcoal);border:1.5px solid var(--border);
  border-radius:var(--radius-xs);font-size:.88rem;font-weight:600;
  transition:all .18s;
}
.btn-ghost:hover{border-color:var(--charcoal);background:var(--charcoal-10);}

.btn-add{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;background:var(--terra-pale);
  color:var(--terra);border:1.5px dashed var(--terra);
  border-radius:var(--radius-xs);font-size:.85rem;font-weight:600;
  transition:all .18s;margin-top:12px;
}
.btn-add:hover{background:var(--terra);color:#fff;border-style:solid;}

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

/* ── Summary panel ──────────────────────────────────────────── */
.summary-panel{
  background:var(--cream);border:1px solid var(--border);
  border-radius:var(--radius-sm);overflow:hidden;margin-top:24px;
}
.summary-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:11px 18px;border-bottom:1px solid var(--border);
  font-size:.9rem;
}
.summary-row:last-child{border-bottom:none;}
.summary-row.total{
  background:var(--charcoal);color:#fff;
  padding:14px 18px;
}
.summary-label{color:var(--charcoal-70);}
.summary-label.total-label{color:rgba(255,255,255,.7);font-size:.8rem;letter-spacing:2px;text-transform:uppercase;}
.summary-val{font-family:'DM Mono',monospace;font-weight:500;font-size:.93rem;}
.summary-val.total-val{font-size:1.3rem;font-weight:700;color:#fff;}

/* ── INVOICE PREVIEW ────────────────────────────────────────── */
#preview-area{display:none;margin-top:36px;}
.preview-label{
  text-align:center;margin-bottom:16px;
}
.preview-label h3{font-size:1rem;margin-bottom:4px;}
.preview-label p{font-size:.85rem;color:var(--charcoal-30);}

.invoice-doc{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  max-width:720px;
  margin:0 auto;
  box-shadow:var(--shadow-lg);
  font-family:'DM Sans',sans-serif;
}

/* Invoice top bar */
.inv-topbar{
  height:6px;
  background:linear-gradient(to right, var(--terra), #e8845a, var(--sage));
}

.inv-head{
  padding:36px 40px 28px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:start;
}
.inv-brand-name{
  font-family:'DM Serif Display',serif;
  font-size:1.5rem;color:var(--charcoal);
  margin-bottom:4px;
}
.inv-brand-addr{
  font-size:.8rem;color:var(--charcoal-30);
  line-height:1.7;max-width:220px;
}
.inv-meta{text-align:right;}
.inv-title{
  font-family:'DM Serif Display',serif;
  font-size:2rem;color:var(--charcoal);
  letter-spacing:-1px;margin-bottom:8px;
}
.inv-number{font-size:.78rem;color:var(--charcoal-30);letter-spacing:2px;text-transform:uppercase;}
.inv-number strong{color:var(--charcoal);font-weight:600;}

.inv-divider{height:1px;background:var(--border);margin:0 40px;}

/* Billing section */
.inv-billing{
  padding:24px 40px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
}
.inv-billing-label{
  font-size:.68rem;letter-spacing:3px;text-transform:uppercase;
  color:var(--charcoal-30);font-weight:600;margin-bottom:8px;
}
.inv-billing-name{font-size:1rem;font-weight:600;color:var(--charcoal);margin-bottom:4px;}
.inv-billing-detail{font-size:.82rem;color:var(--charcoal-70);line-height:1.7;}
.inv-dates{display:flex;flex-direction:column;gap:8px;align-items:flex-end;}
.inv-date-row{display:flex;gap:12px;align-items:center;}
.inv-date-lbl{font-size:.72rem;letter-spacing:1px;text-transform:uppercase;color:var(--charcoal-30);text-align:right;min-width:80px;}
.inv-date-val{font-size:.85rem;font-weight:600;color:var(--charcoal);}

.inv-divider2{height:1px;background:var(--border);margin:0 40px;}

/* Items table */
.inv-items{padding:24px 40px 0;}
.inv-items-head{
  display:grid;
  grid-template-columns:3fr 1fr 1fr 1.2fr;
  gap:8px;padding:8px 0;
  border-bottom:2px solid var(--charcoal);
  font-size:.7rem;letter-spacing:2px;text-transform:uppercase;
  color:var(--charcoal-30);font-weight:600;
}
.inv-items-head span:not(:first-child){text-align:right;}
.inv-item-row{
  display:grid;grid-template-columns:3fr 1fr 1fr 1.2fr;
  gap:8px;padding:12px 0;border-bottom:1px solid var(--border);
  align-items:start;
}
.inv-item-name{font-weight:500;font-size:.9rem;color:var(--charcoal);}
.inv-item-desc{font-size:.78rem;color:var(--charcoal-30);margin-top:2px;}
.inv-item-num{
  font-family:'DM Mono',monospace;font-size:.85rem;
  color:var(--charcoal-70);text-align:right;padding-top:2px;
}
.inv-item-total{
  font-family:'DM Mono',monospace;font-size:.88rem;
  font-weight:600;color:var(--charcoal);text-align:right;padding-top:2px;
}

/* Totals */
.inv-totals{
  display:flex;justify-content:flex-end;
  padding:20px 40px 0;
}
.inv-totals-box{width:260px;}
.inv-total-row{
  display:flex;justify-content:space-between;
  padding:7px 0;border-bottom:1px solid var(--border);
  font-size:.85rem;
}
.inv-total-row:last-child{border-bottom:none;}
.inv-total-lbl{color:var(--charcoal-70);}
.inv-total-val{font-family:'DM Mono',monospace;font-weight:500;}
.inv-grand-total{
  background:var(--charcoal);border-radius:var(--radius-xs);
  padding:14px 16px;margin-top:12px;
  display:flex;justify-content:space-between;align-items:center;
}
.inv-grand-lbl{font-size:.68rem;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.6);}
.inv-grand-val{font-family:'DM Mono',monospace;font-size:1.3rem;font-weight:700;color:#fff;}

/* Terbilang */
.inv-terbilang{
  margin:0 40px;padding:12px 16px;
  background:var(--cream);border-radius:var(--radius-xs);border:1px solid var(--border);
  font-size:.78rem;color:var(--charcoal-70);font-style:italic;margin-top:12px;
}

/* Notes & payment */
.inv-footer-section{
  display:grid;grid-template-columns:1fr 1fr;
  gap:24px;padding:24px 40px 32px;margin-top:16px;
}
.inv-notes-label{font-size:.68rem;letter-spacing:2px;text-transform:uppercase;color:var(--charcoal-30);margin-bottom:8px;}
.inv-notes-text{font-size:.82rem;color:var(--charcoal-70);line-height:1.7;}
.inv-payment-box{
  background:var(--sage-muda);border-radius:var(--radius-xs);
  padding:14px;border:1px solid rgba(74,103,65,.2);
}
.inv-payment-label{font-size:.68rem;letter-spacing:2px;text-transform:uppercase;color:var(--sage);margin-bottom:8px;}
.inv-payment-detail{font-size:.82rem;color:var(--charcoal);line-height:1.8;font-weight:500;}

/* Bottom watermark bar */
.inv-bottombar{
  background:var(--charcoal);padding:12px 40px;
  display:flex;justify-content:space-between;align-items:center;
}
.inv-bottombar-brand{font-size:.75rem;color:rgba(255,255,255,.4);}
.inv-status-badge{
  background:rgba(74,103,65,.3);color:var(--sage-muda);
  font-size:.68rem;letter-spacing:2px;text-transform:uppercase;
  padding:4px 12px;border-radius:999px;border:1px solid rgba(74,103,65,.4);
}

/* ── Ad Slot ────────────────────────────────────────────────── */
.ad-slot{
  background:#fff;border:1px dashed var(--border);border-radius:var(--radius-xs);
  padding:16px;text-align:center;color:var(--charcoal-30);
  font-size:.82rem;min-height:90px;display:flex;align-items:center;
  justify-content:center;margin:24px 0;
}

/* ── Article / SEO ──────────────────────────────────────────── */
.article-section{margin-top:48px;}
.article-section h2{margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--cream-dark);}
.article-section h3{font-size:1.1rem;margin:22px 0 8px;color:var(--terra);}
.article-section p{font-size:1rem;line-height:1.85;margin-bottom:.75rem;}
.article-section ul{padding-left:22px;margin-bottom:14px;}
.article-section li{font-size:1rem;line-height:1.8;margin-bottom:5px;color:var(--charcoal-70);}

/* ── FAQ ────────────────────────────────────────────────────── */
.faq-section{margin-top:48px;}
.faq-item{border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:8px;overflow:hidden;background:#fff;}
.faq-q{width:100%;padding:15px 20px;background:transparent;border:none;text-align:left;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:.95rem;font-weight:600;color:var(--charcoal);display:flex;justify-content:space-between;align-items:center;gap:12px;transition:background .18s;}
.faq-q:hover{background:var(--cream);}
.faq-q::after{content:'＋';color:var(--terra);font-size:1rem;flex-shrink:0;transition:transform .2s;}
.faq-q.open::after{transform:rotate(45deg);}
.faq-a{display:none;padding:0 20px 16px;font-size:.92rem;color:var(--charcoal-70);border-top:1px solid var(--border);line-height:1.8;}
.faq-a.open{display:block;}
.faq-a p{margin-top:12px;color:var(--charcoal-70);}

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

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer{background:var(--charcoal);color:rgba(250,247,242,.5);padding:44px 24px 32px;}
.footer-inner{max-width:900px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:32px;}
.footer-brand h2{color:var(--cream);font-size:1.3rem;margin-bottom:8px;font-family:'DM Serif Display',serif;}
.footer-brand p{font-size:.88rem;line-height:1.75;opacity:.7;}
.footer-links h3{color:var(--terra);font-size:.68rem;letter-spacing:3px;text-transform:uppercase;font-family:'DM Sans',sans-serif;margin-bottom:12px;}
.footer-links ul{list-style:none;}
.footer-links li{margin-bottom:8px;}
.footer-links a{color:rgba(250,247,242,.5);text-decoration:none;font-size:.88rem;transition:color .18s;}
.footer-links a:hover{color:var(--cream);opacity:1;}
.footer-bottom{max-width:900px;margin:32px auto 0;padding-top:20px;border-top:1px solid rgba(250,247,242,.08);text-align:center;font-size:.8rem;opacity:.4;}

/* ── Print ──────────────────────────────────────────────────── */
@media print{
  body *{visibility:hidden !important;}
  #inv-container,#inv-container *{visibility:visible !important;}
  #inv-container{
    position:fixed !important;top:0;left:0;width:100%;
    padding:0;margin:0;
  }
  .invoice-doc{box-shadow:none !important;border:none !important;max-width:100% !important;}
  body{background:white !important;margin:0 !important;}
}

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

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:var(--cream-dark);}
::-webkit-scrollbar-thumb{background:var(--parchment);border-radius:3px;}
::selection{background:var(--terra-muda);color:var(--terra);}

@media(max-width:640px){
  .site-header{padding:40px 20px 48px;}
  .card{padding:20px;}
  .inv-head{grid-template-columns:1fr;gap:16px;}
  .inv-meta{text-align:left;}
  .inv-billing{grid-template-columns:1fr;gap:16px;}
  .inv-dates{align-items:flex-start;}
  .inv-items-head{display:none;}
  .inv-item-row{grid-template-columns:1fr 1fr;gap:6px;}
  .inv-item-row>*:first-child{grid-column:1/-1;}
  .inv-totals{padding:20px 20px 0;}
  .inv-totals-box{width:100%;}
  .inv-footer-section{grid-template-columns:1fr;}
  .inv-head,.inv-billing,.inv-items,.inv-totals,.inv-terbilang,.inv-footer-section,.inv-bottombar{padding-left:20px;padding-right:20px;}
  .inv-divider,.inv-divider2{margin:0 20px;}
  .inv-terbilang{margin:12px 20px 0;}
}