/* =====================================================================
   ROBOT & VPS RENTAL — Design System (App-Like & Professional UI)
   Tema: Trading Terminal (Navy-Ink + Gold Accent + Mono Data)
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
   --ink:#070b14;
   --panel:#0d1424;
   --panel-2:#131c31;
   --panel-3:#1a2744;
   --line:rgba(255,255,255,.06);
   --line-strong:rgba(255,255,255,.12);
   --gold:#f3b24e;
   --gold-soft:rgba(243,178,78,.12);
   --gold-dark:#1c1404;
   --teal:#2bd6ae;
   --teal-soft:rgba(43,214,174,.12);
   --red:#f2596f;
   --red-soft:rgba(242,89,111,.12);
   --blue:#5b8def;
   --blue-soft:rgba(91,141,239,.12);
   --text:#f1f5f9;
   --muted:#94a3b8;
   --muted-2:#64748b;
   --radius:16px;
   --radius-sm:10px;
   --shadow:0 12px 32px -10px rgba(0,0,0,.6);
   --shadow-sm:0 4px 16px -4px rgba(0,0,0,.4);
   
   /* Alias kompatibilitas tema */
   --bg-main: #070b14;
   --bg-card: #0d1424;
   --text-main: #f1f5f9;
   --text-muted: #94a3b8;
   --border-color: rgba(255,255,255,.08);
   --table-hover: rgba(255,255,255,.025);
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
   background-color:var(--bg-main) !important;
   color:var(--text-main) !important;
   font-family:'Inter',sans-serif;
   font-size:.93rem;
   -webkit-font-smoothing:antialiased;
   -webkit-tap-highlight-color: transparent;
}

h1,h2,h3,h4,h5,h6,.brand{
   font-family:'Space Grotesk',sans-serif;
   letter-spacing:-0.02em;
   color:var(--text-main);
}

a{color:var(--gold); text-decoration:none; transition:color .15s ease;}
a:hover{color:#f8c773;}

.mono, code, .table td.mono{font-family:'JetBrains Mono',monospace;}

::selection{background:var(--gold-soft); color:var(--text-main);}

/* Scrollbar Modern */
::-webkit-scrollbar{width:6px; height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--panel-3); border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:var(--muted-2);}

/* ---------------------------------------------------------------------
   Cards (Glassmorphism & Clean App Surface)
--------------------------------------------------------------------- */
.card{
   background-color:var(--bg-card) !important;
   border:1px solid var(--border-color) !important;
   border-radius:var(--radius);
   color:var(--text-main);
   box-shadow:var(--shadow-sm);
   transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{
   border-color:rgba(243,178,78,.25) !important;
   box-shadow:var(--shadow);
}
.card-header{
   background-color:transparent !important;
   border-bottom:1px solid var(--border-color) !important;
   font-weight:600;
   color:var(--text-main);
   padding:18px 22px;
}
.card-body{padding:22px;}
.card-footer{background-color:transparent !important; border-top:1px solid var(--border-color) !important; padding:16px 22px;}
.card-title{color:var(--text-main); font-weight:600;}
.card-text{color:var(--text-muted);}
.text-muted{color:var(--text-muted) !important;}

/* ---------------------------------------------------------------------
   Buttons (Interactive Touch-Friendly)
--------------------------------------------------------------------- */
.btn{
   border-radius:var(--radius-sm);
   font-weight:600;
   font-size:.87rem;
   padding:10px 18px;
   transition:transform .12s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .12s ease, background .15s ease, border-color .15s ease;
   border:1px solid transparent;
   display:inline-flex;
   align-items:center;
   justify-content:center;
   gap:8px;
}
.btn:active{transform:scale(0.97) !important;}
.btn-sm{padding:6px 14px; font-size:.78rem; border-radius:8px;}

.btn-primary, .btn-dark{
   background:var(--gold);
   border-color:var(--gold);
   color:var(--gold-dark);
}
.btn-primary:hover, .btn-dark:hover, .btn-primary:focus, .btn-dark:focus{
   background:#f8c773; border-color:#f8c773; color:var(--gold-dark);
   box-shadow:0 6px 20px -6px rgba(243,178,78,.5);
}
.btn-outline-primary{
   color:var(--gold); border-color:rgba(243,178,78,.35); background:transparent;
}
.btn-outline-primary:hover{background:var(--gold-soft); color:var(--gold); border-color:var(--gold);}

.btn-secondary, .btn-outline-secondary{
   background:var(--panel-2); border-color:var(--border-color); color:var(--text-main);
}
.btn-secondary:hover, .btn-outline-secondary:hover{
   background:var(--panel-3); color:var(--text-main); border-color:var(--line-strong);
}

.btn-success{background:var(--teal); border-color:var(--teal); color:#03221b;}
.btn-success:hover{background:#3fe6bd; border-color:#3fe6bd; color:#03221b;}
.btn-outline-success{color:var(--teal); border-color:rgba(43,214,174,.35); background:transparent;}
.btn-outline-success:hover{background:var(--teal-soft); color:var(--teal); border-color:var(--teal);}

.btn-danger{background:var(--red); border-color:var(--red); color:#220308;}
.btn-danger:hover{background:#f5748a; border-color:#f5748a; color:#220308;}
.btn-outline-danger{color:var(--red); border-color:rgba(242,89,111,.35); background:transparent;}
.btn-outline-danger:hover{background:var(--red-soft); color:var(--red); border-color:var(--red);}

/* ---------------------------------------------------------------------
   Forms & Inputs (Mobile App Style Focus States)
--------------------------------------------------------------------- */
.form-control, .form-select{
   background-color:var(--panel-2) !important;
   border:1px solid var(--border-color) !important;
   color:var(--text-main) !important;
   border-radius:var(--radius-sm);
   padding:12px 16px;
   font-size:.92rem;
   transition:border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus{
   background-color:var(--panel-2) !important;
   border-color:var(--gold) !important;
   color:var(--text-main) !important;
   box-shadow:0 0 0 4px rgba(243,178,78,.15);
}
.form-control::placeholder{color:var(--muted-2);}
.form-control[type=file]{padding:10px 14px;}
.form-label{color:var(--text-main); font-weight:500; font-size:.85rem; margin-bottom:8px;}
.form-text{color:var(--text-muted); font-size:.78rem; margin-top:6px;}

.form-check-input{
   background-color:var(--panel-2); border:1px solid var(--border-color);
   width:1.2em; height:1.2em; margin-top:0.15em; cursor:pointer;
}
.form-check-input:checked{background-color:var(--gold); border-color:var(--gold);}
.form-check-label{color:var(--text-main); cursor:pointer;}
select.form-select option{background:var(--panel-2); color:var(--text-main);}

/* ---------------------------------------------------------------------
   Tables (Card-like mobile layout ready)
--------------------------------------------------------------------- */
.table{
   color:var(--text-main) !important;
   margin-bottom:0;
   border-color:var(--border-color) !important;
   --bs-table-bg:transparent;
}
.table > :not(caption) > * > *{
   background:transparent;
   border-bottom-color:var(--border-color);
   color:var(--text-main);
   padding:16px 18px;
   vertical-align:middle;
}
.table thead tr th{
   background-color:var(--panel-2) !important;
   color:var(--text-muted);
   font-family:'JetBrains Mono',monospace;
   font-size:.72rem;
   letter-spacing:.08em;
   text-transform:uppercase;
   font-weight:600;
   border-bottom:1px solid var(--border-color);
}
.table-hover > tbody > tr:hover > *{
   background-color:var(--table-hover) !important;
}
.table-responsive{border-radius:var(--radius); overflow:hidden;}

/* ---------------------------------------------------------------------
   Badges (Modern Status Chips)
--------------------------------------------------------------------- */
.badge{
   font-family:'JetBrains Mono',monospace;
   font-weight:600;
   font-size:.7rem;
   letter-spacing:.04em;
   padding:6px 10px;
   border-radius:999px;
   text-transform:uppercase;
}
.bg-success{background-color:var(--teal-soft) !important; color:var(--teal) !important; border:1px solid rgba(43,214,174,.3);}
.bg-warning{background-color:var(--gold-soft) !important; color:var(--gold) !important; border:1px solid rgba(243,178,78,.3);}
.bg-danger{background-color:var(--red-soft) !important; color:var(--red) !important; border:1px solid rgba(242,89,111,.3);}
.bg-secondary{background-color:rgba(255,255,255,.06) !important; color:var(--text-muted) !important; border:1px solid var(--border-color);}
.bg-primary, .bg-info{background-color:var(--blue-soft) !important; color:var(--blue) !important; border:1px solid rgba(91,141,239,.3);}

/* ---------------------------------------------------------------------
   Modals (App Bottom-Sheet / Center Popups)
--------------------------------------------------------------------- */
.modal-content{
   background-color:var(--bg-card) !important;
   color:var(--text-main) !important;
   border:1px solid var(--border-color) !important;
   border-radius:20px;
   box-shadow:0 25px 50px -12px rgba(0,0,0,.7);
}
.modal-header, .modal-footer{
   border-color:var(--border-color) !important;
   padding:20px 24px;
}
.modal-body{padding:24px;}
.modal-backdrop.show{opacity:.7; backdrop-filter: blur(4px);}

/* ---------------------------------------------------------------------
   Alerts
--------------------------------------------------------------------- */
.alert{border-radius:var(--radius-sm); border:1px solid; font-size:.9rem; padding:14px 18px;}
.alert-success{background:var(--teal-soft); border-color:rgba(43,214,174,.3); color:var(--teal);}
.alert-danger{background:var(--red-soft); border-color:rgba(242,89,111,.3); color:var(--red);}
.alert-warning{background:var(--gold-soft); border-color:rgba(243,178,78,.3); color:var(--gold);}
.alert-info{background:var(--blue-soft); border-color:rgba(91,141,239,.3); color:var(--blue);}

/* ---------------------------------------------------------------------
   ADMIN LAYOUT — Sidebar & Responsive Mobile Drawer
--------------------------------------------------------------------- */
.admin-shell{min-height:100vh;}
.sidebar{
   width:260px;
   background-color:#050811;
   border-right:1px solid var(--border-color);
   padding:24px 16px;
   position:fixed;
   top:0; left:0; bottom:0;
   z-index:1040;
   transition:transform .3s cubic-bezier(0.4, 0, 0.2, 1);
   overflow-y:auto;
}
.sidebar .brand{
   font-size:1.1rem; font-weight:700; color:var(--text-main);
   display:flex; align-items:center; gap:10px; margin-bottom:32px; padding:0 8px;
}
.sidebar .brand .dot{color:var(--gold);}
.sidebar .nav-link{
   color:var(--text-muted);
   font-size:.88rem;
   font-weight:500;
   padding:11px 14px;
   border-radius:12px;
   display:flex; align-items:center; gap:12px;
   margin-bottom:4px;
   transition:all .15s ease;
}
.sidebar .nav-link i{font-size:1.1rem; width:22px; text-align:center;}
.sidebar .nav-link:hover{background:rgba(255,255,255,.04); color:var(--text-main);}
.sidebar .nav-link.active{background:var(--gold-soft); color:var(--gold); border:1px solid rgba(243,178,78,.25);}
.sidebar .nav-divider{height:1px; background:var(--border-color); margin:16px 8px;}

.admin-main{
   margin-left:260px;
   min-height:100vh;
   background-color:var(--bg-main);
   padding:32px 36px 60px;
}
.admin-topbar{
   display:flex; justify-content:space-between; align-items:center;
   margin-bottom:28px; flex-wrap:wrap; gap:12px;
}
.admin-topbar h4{font-size:1.35rem; margin:0; font-weight:700;}
.admin-topbar .date{color:var(--text-muted); font-family:'JetBrains Mono',monospace; font-size:.82rem;}

.sidebar-toggle{
   display:none;
   background:var(--panel);
   border:1px solid var(--border-color);
   color:var(--text-main);
   width:42px; height:42px;
   border-radius:12px;
   align-items:center; justify-content:center;
   font-size:1.2rem;
}
.sidebar-backdrop{
   display:none;
   position:fixed; inset:0;
   background:rgba(0,0,0,.65);
   backdrop-filter: blur(3px);
   z-index:1035;
}

@media (max-width:991px){
   .sidebar{transform:translateX(-100%);}
   .sidebar.show{transform:translateX(0);}
   .admin-main{margin-left:0; padding:20px 16px 50px;}
   .sidebar-toggle{display:inline-flex;}
   .sidebar-backdrop.show{display:block;}
}

/* Dashboard stat tiles */
.stat-card{
   background:var(--bg-card);
   border:1px solid var(--border-color);
   border-radius:var(--radius);
   padding:22px 24px;
   display:flex; align-items:flex-start; justify-content:space-between;
   height:100%;
}
.stat-card .label{color:var(--text-muted); font-size:.82rem; margin-bottom:6px; font-weight:500;}
.stat-card .value{
   font-family:'JetBrains Mono',monospace;
   font-size:1.75rem; font-weight:600; color:var(--text-main);
}
.stat-card .icon{
   width:46px; height:46px; border-radius:14px;
   display:flex; align-items:center; justify-content:center;
   font-size:1.25rem; flex-shrink:0;
}
.stat-card--gold .icon{background:var(--gold-soft); color:var(--gold);}
.stat-card--teal .icon{background:var(--teal-soft); color:var(--teal);}
.stat-card--blue .icon{background:var(--blue-soft); color:var(--blue);}
.stat-card--red .icon{background:var(--red-soft); color:var(--red);}

/* ---------------------------------------------------------------------
   USER LAYOUT — Navbar App Bar
--------------------------------------------------------------------- */
.rv-navbar{
   background-color:#050811 !important;
   border-bottom:1px solid var(--border-color);
   padding:14px 0;
   backdrop-filter: blur(10px);
}
.rv-navbar .navbar-brand{
   font-family:'Space Grotesk',sans-serif;
   font-weight:700;
   color:var(--text-main) !important;
   display:flex; align-items:center; gap:10px;
   font-size:1.15rem;
}
.rv-navbar .navbar-brand .dot{color:var(--gold);}
.rv-navbar .nav-link{
   color:var(--text-muted) !important;
   font-weight:500;
   font-size:.9rem;
   padding:9px 16px !important;
   border-radius:10px;
   transition:all .15s ease;
}
.rv-navbar .nav-link:hover{color:var(--text-main) !important; background:rgba(255,255,255,.04);}
.rv-navbar .nav-link.active{color:var(--gold) !important; background:var(--gold-soft);}
.rv-navbar .navbar-toggler{border-color:var(--border-color); padding:8px 12px; border-radius:10px;}
.rv-navbar .navbar-toggler:focus{box-shadow:0 0 0 4px rgba(243,178,78,.15);}
.rv-navbar .navbar-toggler-icon{
   background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(241,245,249,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.user-wrap{background-color:var(--bg-main); min-height:100vh;}
footer{
   border-top:1px solid var(--border-color);
   color:var(--muted-2);
   font-size:.84rem;
   padding:24px 0;
}

/* ---------------------------------------------------------------------
   AUTH PAGES (Login / Register App Wrapper)
--------------------------------------------------------------------- */
.auth-shell{
   min-height:100vh;
   background:radial-gradient(circle at 10% 10%, rgba(243,178,78,.08), transparent 45%),
              radial-gradient(circle at 90% 90%, rgba(43,214,174,.06), transparent 45%),
              var(--bg-main);
   display:flex; align-items:center; justify-content:center;
   padding:30px 16px;
}
.auth-card{
   background-color:var(--bg-card);
   border:1px solid var(--border-color);
   border-radius:22px;
   box-shadow:var(--shadow);
   padding:40px 36px;
   width:100%;
   max-width:440px;
}
.auth-brand{
   display:flex; align-items:center; justify-content:center; gap:8px;
   font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.25rem;
   margin-bottom:8px; color:var(--text-main);
}
.auth-brand .dot{color:var(--gold);}
.auth-sub{color:var(--text-muted); text-align:center; font-size:.87rem; margin-bottom:28px;}

/* ---------------------------------------------------------------------
   Component Utilities
--------------------------------------------------------------------- */
.prod-type{
   font-family:'JetBrains Mono',monospace;
   font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
   color:var(--gold); background:var(--gold-soft);
   border:1px solid rgba(243,178,78,.3);
   padding:5px 12px; border-radius:999px;
}
.countdown-badge{font-size:.78rem;}
.section-tag{
   font-family:'JetBrains Mono',monospace; color:var(--gold);
   font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
}
hr{border-color:var(--border-color); opacity:1;}

/* Mobile Optimization Breakpoints */
@media (max-width:575px){
   .auth-card{padding:30px 20px;}
   .card-body{padding:18px;}
   .table > :not(caption) > * > *{padding:12px 14px; font-size:.85rem;}
   .admin-topbar h4{font-size:1.15rem;}
}
/* ---------- CTA ---------- */
.cta-band{
  background:linear-gradient(135deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);
  border-radius:20px;
  padding:52px 40px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cta-band::after{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(circle at 80% 20%, rgba(232,163,61,.12), transparent 55%);
  pointer-events: none; /* <-- Tambahan agar tidak menghalangi klik tombol */
}
.cta-band h2{position:relative; font-size:1.9rem; margin-bottom:10px;}
.cta-band p{position:relative; color:var(--muted); margin-bottom:26px;}
.cta-band .rel{position:relative; z-index:2;} /* <-- Tambahan z-index agar berada di atas */