/* =========================================================
   IRIGASIC3.NET — STYLE (Bootstrap 5.3 compatible)
   Simple • Modern • Mobile-first • Non-intrusive overrides
   ========================================================= */

/* 1) Theme tokens (CSS variables) */
:root{
  --ig-primary:       #1e88e5;
  --ig-primary-600:   #1565c0;
  --ig-accent:        #ff7a18;
  --ig-bg:            #ffffff;
  --ig-text:          #1f2937;
  --ig-muted:         #6b7280;
  --ig-border:        #e5e7eb;

  --ig-radius:        14px;
  --ig-radius-sm:     10px;

  --ig-shadow-sm:     0 2px 6px rgba(0,0,0,.06);
  --ig-shadow-md:     0 8px 20px rgba(0,0,0,.10);
  --ig-shadow-lg:     0 16px 40px rgba(0,0,0,.14);

  --ig-container:     1200px;
  --ig-ease:          cubic-bezier(.22,.8,.36,1);

  --ig-hero-grad1:    rgba(30,136,229,.12);
  --ig-hero-grad2:    rgba(255,122,24,.10);
}

/* 2) Base & typography */
html{ scroll-behavior:smooth; }
body{
  color:var(--ig-text);
  background:var(--ig-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Sticky footer yang benar */
html, body { height: 100%; margin: 0; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.bg-color1{background-color:#2d286b!important;}

/* Elemen inilah yang mendorong footer ke bawah */
.page {
  flex: 1;
  display: block; /* jaga2 kalau dipakai pada <div> atau <main> */
}

/* header */
header {
    border-color:#ffc928;
    font-size: 15px;
    color: #ffc928;
}

.header-main{border:none;border-bottom:5px solid;}

/* footer */
footer {
    border-color:#ffc928;
    font-size: 15px;
    color: #ffc928;
    padding-top: 2rem;
}

footer h5 {
  font-size: 16px;
  font-weight: bold;
  color: #ffc928;
  line-height: 1.2;
}

footer ul {
  padding-left: 0;
  list-style: none;
}

footer a {
  color: #dbdbdb;
}
footer a:hover {
  color: #ffc928;
  text-decoration: none;
}

.footer-main, .head-footer{border-color:#ffc928;}
.footer-main{position:relative;overflow:hidden;width:100%;float:left;padding:20px 0;border:none;border-top:4px solid;}
.footer-main p{padding:0;font-size:100%;margin:0;line-height:1.2;color:#dbdbdb;}

/* Navbar*/
.bg-pu-primary{background-color: #374774!important;}

/* Navbar mirip FEMA */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #2d286b;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar-brand {
  font-size: 1.1rem;
  line-height: 1.1;
  margin-right: 4rem;
}

.navbar-dark .nav-link {
  font-weight: 500;
  color: #ffc928;
}

.navbar-dark .nav-link:hover {
  color: #ffc928;
}

img,svg{ max-width:100%; height:auto; display:block; }
a{ color:var(--ig-primary); text-decoration:none; }
a:hover{ color:var(--ig-primary-600); text-decoration:underline; }

h1,h2,h3,h4,h5,h6{
  font-weight:700; line-height:1.25; margin-bottom:.5rem;
}
h1{ font-size:clamp(1.6rem,2.4vw+1.2rem,2.25rem); }
h2{ font-size:clamp(1.35rem,1.8vw+1rem,1.75rem); }
h3{ font-size:clamp(1.15rem,1.2vw+.9rem,1.35rem); }
.muted{ color:var(--ig-muted)!important; }

/* 3) Containers (tanpa menimpa .container Bootstrap) */
.container-custom{ max-width:var(--ig-container); margin-inline:auto; padding-inline:16px; }
.section{ padding-block:clamp(16px,3vw,32px); }

/* 4) Navbar modern (tambahan class .ig-navbar pada .navbar) */
.ig-navbar{
  background:linear-gradient(90deg,var(--ig-primary),var(--ig-primary-600));
  box-shadow:var(--ig-shadow-sm);
}
.ig-navbar .navbar-brand{ font-weight:800; letter-spacing:.2px; }
.ig-navbar .nav-link{
  color:rgba(255,255,255,.92)!important;
  border-radius:10px;
}
.ig-navbar .nav-link:hover{ background:rgba(255,255,255,.12); color:#fff!important; }

/* 5) Buttons (helper; tidak menimpa .btn-primary Bootstrap) */
.btn-ig{
  --bs-btn-padding-y:.6rem;
  --bs-btn-padding-x:1rem;
  --bs-btn-font-weight:600;
  border-radius:var(--ig-radius-sm);
  box-shadow:var(--ig-shadow-sm);
  transition:transform .08s var(--ig-ease), box-shadow .2s var(--ig-ease);
}
.btn-ig:active{ transform:translateY(1px); }
.btn-ig-primary{ color:#fff; background:var(--ig-primary); border-color:var(--ig-primary); }
.btn-ig-primary:hover{ background:var(--ig-primary-600); border-color:var(--ig-primary-600); }
.btn-ig-accent{ color:#111827; background:var(--ig-accent); border-color:var(--ig-accent); }
.btn-ig-outline{ color:var(--ig-primary); background:transparent; border-color:var(--ig-primary); }

/* 6) Cards (polish kecil) */
.card{
  border:1px solid var(--ig-border);
  border-radius:var(--ig-radius);
  box-shadow:var(--ig-shadow-sm);
}
.card-header{ border-bottom:1px solid var(--ig-border); font-weight:700; }
.card-footer{ background:#fafafa; border-top:1px solid var(--ig-border); }

/* 7) Forms (fokus yang nyaman) */
.form-control:focus,
.form-select:focus,
.form-check-input:focus{
  box-shadow:0 0 0 .25rem rgba(30,136,229,.15);
  border-color:var(--ig-primary);
}

/* 8) Tables (pakai .table Bootstrap + gaya ringan) */
.table thead th{
  background:#f8fafc; color:#334155; font-weight:700;
  border-bottom:1px solid var(--ig-border);
}
.table tbody td{ vertical-align:middle; }
.table-hover tbody tr:hover{ background:#fafafa; }

/* 9) Badges (kelas tambahan) */
.badge-ig{ border-radius:999px; font-weight:700; padding:.35rem .6rem; }
.badge-ig-success{ background:#dcfce7; color:#166534; }
.badge-ig-warning{ background:#fef9c3; color:#854d0e; }
.badge-ig-danger { background:#fee2e2; color:#991b1b; }
.badge-ig-info   { background:#e0f2fe; color:#075985; }
.badge-ig-neutral{ background:#e5e7eb; color:#374151; }

/* 10) Alerts (border kiri berwarna) */
.alert-ig{
  border:1px solid var(--ig-border);
  border-left:4px solid var(--ig-primary);
  box-shadow:var(--ig-shadow-sm);
}
.alert-ig.success{ border-left-color:#16a34a; }
.alert-ig.warning{ border-left-color:#f59e0b; }
.alert-ig.danger { border-left-color:#dc2626; }

/* 11) Hero section */
.hero{
  padding-block:clamp(24px,6vw,64px);
  background:
    radial-gradient(1200px 500px at 10% -10%, var(--ig-hero-grad1), transparent 60%),
    radial-gradient(800px 400px  at 90% 0%,  var(--ig-hero-grad2), transparent 60%);
}
.hero .lead{ color:var(--ig-muted); font-size:1.05rem; }

/* 12) Auth/Login panel */
.auth-panel{
  max-width:460px; margin-inline:auto; margin-top:2rem;
  background:#fff; border:1px solid var(--ig-border);
  border-radius:var(--ig-radius); box-shadow:var(--ig-shadow-md);
  padding:1.25rem;
}
.auth-title{ margin-bottom:.25rem; }
.auth-subtitle{ color:var(--ig-muted); margin-bottom:1rem; }

/* 13) Footer sederhana */
.site-footer{
  margin-top:48px; padding:16px 0;
  border-top:1px solid var(--ig-border);
  color:var(--ig-muted);
  background:#fafafa;
}

/* 14) Hover lift untuk kartu/cta */
.hover-lift{ transition:transform .18s var(--ig-ease), box-shadow .18s var(--ig-ease); }
.hover-lift:hover{ transform:translateY(-2px); box-shadow:var(--ig-shadow-md); }

/* 15) Utilities kecil (tanpa bentrok utilities Bootstrap) */
.ig-shadow-sm{ box-shadow:var(--ig-shadow-sm)!important; }
.ig-shadow-md{ box-shadow:var(--ig-shadow-md)!important; }
.ig-shadow-lg{ box-shadow:var(--ig-shadow-lg)!important; }

.ig-rounded    { border-radius:var(--ig-radius)!important; }
.ig-rounded-sm { border-radius:var(--ig-radius-sm)!important; }
.ig-rounded-full{ border-radius:999px!important; }

.ig-grid       { display:grid; gap:1rem; }
.ig-grid-2     { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ig-grid-3     { grid-template-columns:repeat(3,minmax(0,1fr)); }
.ig-grid-4     { grid-template-columns:repeat(4,minmax(0,1fr)); }

@media (max-width: 992px){
  .ig-grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 576px){
  .ig-grid-3, .ig-grid-4{ grid-template-columns:1fr; }
}

/* 16) Chips / status kecil */
.ig-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .6rem; border-radius:999px;
  background:#f3f4f6; color:#111827; font-weight:600; font-size:.9rem;
}
.ig-chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--ig-accent); }

/* 17) Stats card (dashboard) */
.ig-stat{
  background:#fff; border:1px solid var(--ig-border);
  border-radius:var(--ig-radius); padding:1rem; box-shadow:var(--ig-shadow-sm);
}
.ig-stat .label{ font-size:.85rem; color:var(--ig-muted); }
.ig-stat .value{ font-weight:800; font-size:clamp(1.2rem,2.4vw,1.75rem); }

/* 18) Dark mode otomatis */
@media (prefers-color-scheme: dark){
  :root{
    --ig-bg:#0b1220;
    --ig-text:#e5e7eb;
    --ig-muted:#9aa3b2;
    --ig-border:#1f2937;

    --ig-shadow-sm: 0 2px 8px rgba(0,0,0,.35);
    --ig-shadow-md: 0 8px 24px rgba(0,0,0,.4);
    --ig-shadow-lg: 0 16px 36px rgba(0,0,0,.5);
  }
  body{ background:var(--ig-bg); color:var(--ig-text); }
  .card,
  .auth-panel,
  .alert-ig{ background:#111827; border-color:var(--ig-border); }
  .card-header,
  .card-footer,
  .table thead th{ background:#0f172a; border-color:var(--ig-border); color:#e5e7eb; }
  .form-control,
  .form-select,
  .form-check-input{ background:#0b1220; color:var(--ig-text); border-color:var(--ig-border); }
  .site-footer{ background:#0b1220; border-top-color:var(--ig-border); }
}

/* 19) Print */
@media print{
  .ig-navbar, .site-footer{ display:none!important; }
  .card{ box-shadow:none!important; border-color:#ccc; }
}