/* ==================================================================
   CAI Core CSS — PT Aplikasi Cerdas Indonesia
   Minimal replacement for Bootstrap 4 (191KB → ~6KB)
   Only classes actually used in index.html
   Generated: 2025-07-14
   ================================================================== */

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; }
html { margin: 0; padding: 0; }
body { margin: 0; padding: 0; font-family: sans-serif; }
img, svg { display: block; max-width: 100%; }
p { margin: 0; }
h1,h2,h3,h4,h5,h6 { margin: 0; }
ul,ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }

/* === CONTAINER (auto-container) === */
.auto-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 15px; }
@media(min-width:576px){ .auto-container{ max-width:540px; } }
@media(min-width:768px){ .auto-container{ max-width:720px; } }
@media(min-width:992px){ .auto-container{ max-width:960px; } }
@media(min-width:1200px){ .auto-container{ max-width:1140px; } }

/* === ROW / COL (flexbox grid) === */
.row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.row > [class*="col-"] { padding: 0 15px; width: 100%; }

/* Bootstrap-like column classes */
.col { flex: 1 0 0%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-4 { flex: 0 0 33.333%; max-width: 33.333%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
@media(min-width:576px){
  .col-sm-12{ flex:0 0 100%; max-width:100%; }
  .col-sm-6{ flex:0 0 50%; max-width:50%; }
  .col-sm-4{ flex:0 0 33.333%; max-width:33.333%; }
}
@media(min-width:768px){
  .col-md-6{ flex:0 0 50%; max-width:50%; }
  .col-md-4{ flex:0 0 33.333%; max-width:33.333%; }
  .col-md-12{ flex:0 0 100%; max-width:100%; }
}
@media(min-width:992px){
  .col-lg-3{ flex:0 0 25%; max-width:25%; }
  .col-lg-4{ flex:0 0 33.333%; max-width:33.333%; }
  .col-lg-5{ flex:0 0 41.666%; max-width:41.666%; }
  .col-lg-6{ flex:0 0 50%; max-width:50%; }
  .col-lg-7{ flex:0 0 58.333%; max-width:58.333%; }
  .col-lg-8{ flex:0 0 66.666%; max-width:66.666%; }
  .col-lg-12{ flex:0 0 100%; max-width:100%; }
}
@media(max-width:991px){
  .col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8{ flex:0 0 100%; max-width:100%; }
}

/* === FLEX UTILITIES === */
.d-flex { display: flex; }
.d-flex > [class*="col-"] { /* override for flex children */ }
.flex-wrap { flex-wrap: wrap; }
.flex-column { flex-direction: column; }
.align-items-center { align-items: center; }
.align-items-start { align-items: flex-start; }
.justify-content-between { justify-content: space-between; }
.justify-content-center { justify-content: center; }
.justify-content-start { justify-content: flex-start; }
.gap-2 { gap: 0.75rem !important; }
.gap-3 { gap: 1rem !important; }

/* === TEXT UTILITIES === */
.text-center { text-align: center !important; }
.text-lg-left { text-align: left !important; }
@media(max-width:991px){ .text-lg-left { text-align: center !important; } }
.text-uppercase { text-transform: uppercase !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mt-lg-0 { margin-top: 0 !important; }
@media(max-width:991px){ .mt-lg-0 { margin-top: 0 !important; } }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.overflow-hidden { overflow: hidden !important; }
.btn-style-one-wrap,
.template-btn-wrap,
.contact-items {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* === TABLE === */
.table { width: 100%; border-collapse: collapse; }
.table thead th { border-bottom: 2px solid #dee2e6; }
.table td, .table th { padding: .75rem; vertical-align: top; border-top: 1px solid #dee2e6; }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0,0,0,.03); }

/* === CLEARFIX === */
.clearfix::after { display: block; clear: both; content: ""; }

/* === LIST CHECKMARK === */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { position: relative; padding-left: 28px; margin-bottom: 8px; }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #1fb6a6; font-weight: 700; }

/* === MEDIA OBJECT (for client logos) === */
.media { display: flex; align-items: center; gap: 15px; }
.media-body { flex: 1; }

/* === BOOTSTRAP DISPLAY/TEXT HELPERS (if needed) === */
.d-none { display: none !important; }
@media(min-width:768px){ .d-md-block { display: block !important; } }
@media(min-width:992px){ .d-lg-flex { display: flex !important; } }
@media(min-width:992px){ .d-lg-block { display: block !important; } }

/* === BOOTSTRAP BUTTON (minimal) === */
.btn { display: inline-block; font-weight: 600; text-align: center; white-space: nowrap; vertical-align: middle; user-select: none; border: 1px solid transparent; padding: .375rem .75rem; font-size: 1rem; line-height: 1.5; border-radius: 8px; transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease; cursor: pointer; text-decoration: none; }
.btn:focus { outline: 0; box-shadow: 0 0 0 .2rem rgba(127, 86, 217, .25); }