:root{--ink:#15202b;--muted:#64748b;--line:#e7eaf0;--bg:#f7f8fb;--card:#fff;--brand:#C68A3A;--brand2:#7c3aed;--ok:#15803d;--danger:#b91c1c}*{box-sizing:border-box}body{min-height:100vh;display:flex;flex-direction:column;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);line-height:1.55}a{color:var(--brand);text-decoration:none}.container{width:min(1180px,92%);margin:auto}.topbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}.nav{height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:9px;color:var(--ink);font-size:20px;font-weight:700}.brand b{color:var(--brand)}.brand-mark{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:#C68A3A;color:#fff}.nav nav{display:flex;align-items:center;gap:18px}.hero{background:#F7F6F4;padding:76px 0}.hero-inner{display:grid;grid-template-columns:1fr 330px;gap:60px;align-items:center}.eyebrow{font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--brand)}h1{font-size:clamp(34px,5vw,58px);line-height:1.05;margin:12px 0 18px;letter-spacing:-.04em}h2{font-size:30px;margin:8px 0}h3{font-size:18px;margin:7px 0}.hero p{max-width:650px;color:var(--muted);font-size:18px}.btn{display:inline-flex;justify-content:center;align-items:center;border:0;border-radius:12px;padding:12px 18px;background:#C68A3A;color:#fff;font-weight:700;cursor:pointer}.btn-sm{padding:8px 12px;border-radius:9px;font-size:13px}.wide{width:100%;margin-top:18px}.hero-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:0 20px 60px #4338ca18;display:grid;gap:8px}.hero-icon{font-size:50px;color:var(--brand)}.hero-card span{color:var(--muted)}main{flex:1;padding:54px 0}.section-head,.admin-head{display:flex;justify-content:space-between;align-items:end;gap:20px}.search{display:flex;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}.search input{border:0;padding:12px 14px;min-width:280px;outline:0}.search button{border:0;background:#fff;padding:0 14px}.filters{display:flex;gap:8px;overflow:auto;padding:22px 0}.filters a{background:#fff;border:1px solid var(--line);padding:8px 14px;border-radius:999px;white-space:nowrap;color:var(--muted)}.filters a.active{background:#F5E5D0;color:var(--brand);border-color:#c7d2fe}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.product{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}.file-badge{height:170px;background:#C68A3A;display:flex;align-items:center;justify-content:center;overflow:hidden}.file-badge .product-logo{width:130px !important;height:130px !important;min-width:130px !important;min-height:130px !important;max-width:130px !important;max-height:130px !important;object-fit:contain !important;object-position:center !important;border-radius:0 !important;background:transparent !important;padding:0 !important;box-sizing:border-box;display:block !important;flex:0 0 130px}.product-body{padding:18px}.course{font-size:12px;font-weight:800;color:var(--brand);text-transform:uppercase;letter-spacing:.06em}.product p{color:var(--muted);font-size:14px;min-height:44px}.product-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}.product-foot strong,.price{font-size:22px}.empty{grid-column:1/-1;padding:50px;text-align:center;background:#fff;border-radius:16px}.detail{max-width:1050px}.back{display:inline-block;margin-bottom:20px}.detail-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:34px;display:grid;grid-template-columns:330px 1fr;gap:45px}.preview{background:#C68A3A;border-radius:20px;min-height:330px;display:grid;place-items:center;text-align:center;color:var(--brand)}.file-large{font-size:58px;font-weight:900}.meta,small{color:var(--muted);display:block;margin-top:8px}.auth{min-height:100vh;display:grid;place-items:center;padding:20px}.auth-box,.checkout-box,.form-card{width:min(520px,100%);background:#fff;border:1px solid var(--line);border-radius:22px;padding:32px;box-shadow:0 20px 70px #0f172a10}.auth-box h1,.checkout-box h1,.form-card h1{font-size:34px}.auth-box form,.form-card form{display:grid;gap:10px}label{font-weight:700;margin-top:10px}input,textarea,select{width:100%;padding:12px;border:1px solid #d9dee8;border-radius:10px;font:inherit;background:#fff}textarea{min-height:130px;resize:vertical}.alert,.success{padding:12px 14px;border-radius:10px;margin:14px 0;background:#fef2f2;color:var(--danger)}.success{background:#f0fdf4;color:var(--ok)}.checkout{display:grid;place-items:center;min-height:85vh}.summary{display:flex;justify-content:space-between;gap:20px;padding:18px;background:var(--bg);border-radius:12px}.pay-option{display:grid;grid-template-columns:auto 1fr;column-gap:10px;padding:16px;border:1px solid var(--line);border-radius:12px;margin:12px 0}.pay-option input{width:auto;grid-row:span 2}.pay-option small{grid-column:2}.center{text-align:center}.qris-placeholder{margin:20px auto;padding:50px 20px;background:#f1f5f9;border-radius:18px;font-size:40px;font-weight:900;max-width:300px}.bank{padding:20px;border:1px solid var(--line);border-radius:14px;text-align:left}.status{margin:18px 0}.page{min-height:80vh}.table-wrap{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:16px;margin:15px 0 40px}table{width:100%;border-collapse:collapse;min-width:780px}th,td{padding:13px 15px;border-bottom:1px solid var(--line);text-align:left}th{font-size:12px;text-transform:uppercase;color:var(--muted)}.inline{display:inline}.inline button{border:0;background:none;color:var(--brand);cursor:pointer}.status-pill{font-weight:700}.status-pill.paid{color:var(--ok)}.status-pill.cancelled,.status-pill.expired{color:var(--danger)}footer{margin-top:auto;background:#111827;color:#94a3b8;padding:14px 0;border-top:1px solid #1f2937}.footer{display:flex;justify-content:center;align-items:center;gap:8px;min-height:24px;text-align:center;font-size:11px}.footer b{color:#cbd5e1;font-weight:700}.footer span{display:none}@media(max-width:850px){.hero-inner,.detail-card{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,1fr)}.section-head{align-items:stretch;flex-direction:column}.search input{min-width:0;width:100%}.nav{height:auto;padding:14px 0}.nav nav{gap:10px;flex-wrap:wrap;justify-content:flex-end}.nav nav a:not(.btn){display:none}}@media(max-width:560px){.hero{padding:50px 0}.grid{grid-template-columns:1fr}.hero-card{display:none}.detail-card,.auth-box,.checkout-box,.form-card{padding:22px}.footer{display:grid}.product-foot{align-items:stretch;flex-direction:column}.product-foot .btn{width:100%}}

.wa-float{position:fixed;right:24px;bottom:24px;width:58px;height:58px;border-radius:50%;background:#25d366;color:#fff!important;display:grid;place-items:center;text-decoration:none;z-index:999;box-shadow:0 10px 28px rgba(37,211,102,.35);font-size:26px}
.wa-float:hover{transform:translateY(-2px)}
.course-filters{margin-top:-8px}
.muted{color:#7c8798;font-size:12px}
@media(max-width:600px){.wa-float{right:16px;bottom:16px;width:54px;height:54px}}

/* WhatsApp floating contact button */
.wa-float{
 position:fixed!important;right:24px!important;bottom:24px!important;
 width:60px!important;height:60px!important;border-radius:50%!important;
 background:#25D366!important;color:#fff!important;display:flex!important;
 align-items:center!important;justify-content:center!important;text-decoration:none!important;
 z-index:99999!important;box-shadow:0 10px 28px rgba(37,211,102,.35)!important;
 transition:transform .2s ease,box-shadow .2s ease!important;
}
.wa-float svg{width:34px;height:34px;fill:#fff;display:block}
.wa-float:hover{transform:translateY(-3px)!important;box-shadow:0 14px 34px rgba(37,211,102,.45)!important}
.wa-tooltip{position:absolute;right:70px;white-space:nowrap;background:#1f1724;color:#fff;padding:8px 11px;border-radius:8px;font-size:12px;font-weight:700;opacity:0;pointer-events:none;transform:translateX(5px);transition:.2s ease}
.wa-float:hover .wa-tooltip{opacity:1;transform:translateX(0)}
@media(max-width:600px){.wa-float{right:16px!important;bottom:16px!important;width:56px!important;height:56px!important}.wa-float svg{width:31px;height:31px}.wa-tooltip{display:none}}

/* === TUTONUT GLOBAL BRAND LOGO === */
.brand-logo{
  width:42px;
  height:42px;
  object-fit:contain;
  display:block;
  flex:0 0 42px;
}
.auth-box>.brand{
  justify-content:center;
  text-align:center;
}
.auth-box>h1,
.auth-box>p{
  text-align:center;
}
@media(max-width:560px){
  .brand-logo{width:38px;height:38px;flex-basis:38px}
}

/* FINAL GLOBAL LOGO SIZE FIX */
.topbar .brand,
header .brand,
.brand{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
}
.topbar .brand .brand-logo,
header .brand .brand-logo,
.brand .brand-logo{
  width:32px!important;
  height:32px!important;
  max-width:32px!important;
  max-height:32px!important;
  object-fit:contain!important;
  flex:0 0 32px!important;
}
@media(max-width:700px){
  .topbar .brand .brand-logo,
  header .brand .brand-logo,
  .brand .brand-logo{
    width:30px!important;
    height:30px!important;
    max-width:30px!important;
    max-height:30px!important;
    flex-basis:30px!important;
  }
}

/* ==========================================================
   TutonUT-SiahliTugas — GLOBAL LOGO FINAL SIZE
   One consistent rule for the real logo image everywhere.
   ========================================================== */

/* Public header / brand */
.brand > img.brand-logo,
.topbar .brand > img.brand-logo,
header .brand > img.brand-logo,
img.brand-logo[src*="logo-jasa-tugas-kuliah"]{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  max-width:42px !important;
  max-height:42px !important;
  flex:0 0 42px !important;
  display:block !important;
  position:relative !important;
  inset:auto !important;
  margin:0 !important;
  padding:0 !important;
  object-fit:contain !important;
  object-position:center !important;
}

/* Auth pages */
.auth-box .auth-brand img.brand-logo,
.auth-box > .brand img.brand-logo{
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  min-height:44px !important;
  max-width:44px !important;
  max-height:44px !important;
  flex:0 0 44px !important;
  display:block !important;
  object-fit:contain !important;
  position:relative !important;
  inset:auto !important;
  margin:0 !important;
  padding:0 !important;
}

/* Never allow the source logo to behave like a full-size content image */
img[src*="logo-jasa-tugas-kuliah.png"]{
  object-fit:contain !important;
}

/* Mobile */
@media (max-width:700px){
  .brand > img.brand-logo,
  .topbar .brand > img.brand-logo,
  header .brand > img.brand-logo{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    max-width:38px !important;
    max-height:38px !important;
    flex-basis:38px !important;
  }
}

/* CUSTOMER PANEL — permanent admin-style sidebar */
.customer-sidebar-fixed{position:fixed;left:0;top:0;bottom:0;width:254px;background:#7A4A1F;color:#fff;z-index:100;padding:18px 14px 14px;overflow-y:auto;box-shadow:8px 0 28px rgba(55,35,15,.10)}
.customer-side-brand{display:flex;align-items:center;gap:10px;padding:6px 10px 18px;border-bottom:1px solid rgba(255,255,255,.14)}
.customer-side-brand img{width:48px;height:48px;border-radius:13px;object-fit:contain;background:#fff;padding:3px}
.customer-side-brand b{display:block;font-size:16px;line-height:1.15;color:#fff}.customer-side-brand b span{color:#fff}.customer-side-brand small{display:block;color:#E8C79A;font-size:11px;margin-top:4px}
.customer-side-label{font-size:10px;letter-spacing:.13em;font-weight:900;color:#fff;padding:20px 10px 8px}
.customer-side-nav{display:flex;flex-direction:column;gap:3px}.customer-side-nav a{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:11px;color:#fff!important;font-size:13px;font-weight:750;text-decoration:none;transition:.15s}.customer-side-nav a span{width:23px;text-align:center;color:#fff!important;font-size:15px}.customer-side-nav a:hover{background:rgba(255,255,255,.10);color:#fff!important}.customer-side-nav a.active{background:#C68A3A;color:#fff!important}.customer-side-nav a.active span{color:#fff!important}
.customer-side-bottom{position:absolute;left:14px;right:14px;bottom:12px;border-top:1px solid rgba(255,255,255,.14);padding-top:10px;background:#7A4A1F}.customer-profile{display:flex;align-items:center;gap:9px;padding:6px 7px 8px}.customer-avatar{width:38px;height:38px;border-radius:50%;background:#C68A3A;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900}.customer-profile strong{display:block;font-size:12px;color:#fff}.customer-profile small{display:block;color:#E8C79A;font-size:10px;margin-top:2px}.customer-logout{display:flex;align-items:center;gap:8px;padding:7px;color:#fff!important;font-size:12px;font-weight:750;text-decoration:none}
.customer-main-with-sidebar{margin-left:254px!important}.customer-topbar-with-sidebar{margin-left:254px!important}
@media(max-width:700px){.customer-sidebar-fixed{width:218px}.customer-main-with-sidebar{margin-left:218px!important}.customer-topbar-with-sidebar{margin-left:218px!important}.customer-side-brand b{font-size:13px}.customer-side-nav a{font-size:12px;padding:9px 8px}.customer-side-label{padding-top:15px}.customer-side-bottom{position:static;margin-top:16px}.customer-sidebar-fixed{min-height:100vh;height:auto}}
.customer-footer{position:relative;margin-top:0;padding:18px 28px;background:#fff;border-top:1px solid #E6E1DA;color:#6B6763;font-size:12px;text-align:center}

/* === FINAL CUSTOMER PANEL LAYOUT REPAIR 2026-08-28 === */
.customer-main-with-sidebar{margin-left:254px!important;width:auto!important}
.customer-topbar-with-sidebar{margin-left:254px!important}
.customer-page-with-sidebar{margin-left:254px!important;min-height:calc(100vh - 74px)!important}
@media(max-width:700px){
  .customer-main-with-sidebar,.customer-topbar-with-sidebar,.customer-page-with-sidebar{margin-left:218px!important}
}

/* FINAL CUSTOMER SIDEBAR TEXT COLOR */
.customer-sidebar-fixed .customer-side-nav a,
.customer-sidebar-fixed .customer-side-nav a:visited,
.customer-sidebar-fixed .customer-side-nav a:hover,
.customer-sidebar-fixed .customer-side-nav a:focus,
.customer-sidebar-fixed .customer-side-nav a.active,
.customer-sidebar-fixed .customer-side-nav a span,
.customer-sidebar-fixed .customer-side-nav a.active span{
  color:#fff!important;
}


/* ============================================================
   SIAHLITUGAS — MOBILE RESPONSIVE FINAL
   Desktop layout is preserved. Mobile <= 768px is optimized
   for touch, readable cards/tables, and no horizontal overflow.
   ============================================================ */
html{overflow-x:hidden}
body{max-width:100%;overflow-x:hidden}
img,video,iframe{max-width:100%;height:auto}
table{max-width:100%}
button,input,select,textarea{max-width:100%}

@media (max-width: 768px){
  html{font-size:15px}
  body{overflow-x:hidden}

  /* Customer/admin fixed sidebars: compact but always accessible */
  .customer-sidebar-fixed{
    width:210px!important;
    max-width:78vw!important;
    overflow-x:hidden!important;
  }
  .customer-side-brand{padding:6px 7px 14px!important;gap:8px!important}
  .customer-side-brand img{width:40px!important;height:40px!important;flex-basis:40px!important}
  .customer-side-brand b{font-size:12px!important}
  .customer-side-brand small{font-size:9px!important}
  .customer-side-label{font-size:9px!important;padding:14px 7px 6px!important}
  .customer-side-nav a{min-height:38px!important;padding:9px 7px!important;font-size:11px!important;gap:8px!important}
  .customer-side-nav a span{width:20px!important;min-width:20px!important;font-size:14px!important}

  .customer-main-with-sidebar,
  .customer-topbar-with-sidebar,
  .customer-footer{
    margin-left:210px!important;
  }

  /* Admin content follows the sidebar instead of overflowing */
  .admin-app .main,
  .admin-app main,
  .admin-main,
  .admin-content{
    max-width:calc(100vw - 210px)!important;
    box-sizing:border-box!important;
  }

  /* Shared containers */
  .container{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    padding-left:14px!important;
    padding-right:14px!important;
  }
  .section{padding-left:0!important;padding-right:0!important}

  /* Top navigation becomes horizontally scrollable instead of wrapping */
  .topbar .nav{
    gap:12px!important;
    overflow-x:auto!important;
    white-space:nowrap!important;
    scrollbar-width:none;
  }
  .topbar .nav::-webkit-scrollbar{display:none}
  .topbar nav{overflow-x:auto!important;white-space:nowrap!important}

  /* Hero and headings */
  h1{font-size:clamp(24px,6vw,34px)!important;line-height:1.15!important}
  h2{font-size:clamp(19px,5vw,26px)!important}
  h3{font-size:16px!important}
  .hero,.hero-section{min-height:auto!important}
  .hero-content{padding:28px 14px!important}

  /* Generic grids collapse cleanly */
  .grid,.cards-grid,.product-grid,.service-grid,.catalog-grid,
  .portal-grid,.stats-grid,.dashboard-grid{
    grid-template-columns:1fr!important;
  }
  .two-col,.two-columns,.content-grid{
    grid-template-columns:1fr!important;
  }

  /* Cards */
  .card,.product-card,.service-card,.portal-card{
    min-width:0!important;
    width:100%!important;
  }

  /* Buttons become comfortable touch targets */
  .btn,button,input[type=submit],input[type=button]{
    min-height:42px;
  }
  .btn-group,.actions,.form-actions{
    flex-wrap:wrap!important;
    gap:8px!important;
  }

  /* Forms */
  form .form-grid,.form-grid{
    grid-template-columns:1fr!important;
  }
  input,select,textarea{
    width:100%;
    box-sizing:border-box;
    font-size:16px!important; /* prevents iOS zoom */
  }

  /* Tables: preserve all data with horizontal scrolling */
  .table-responsive,.table-wrap,.admin-table-wrap{
    width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .table-responsive table,.table-wrap table,.admin-table-wrap table{
    min-width:680px;
  }
  table th,table td{white-space:nowrap}

  /* Product/catalog action rows */
  .product-actions,.card-actions{
    flex-wrap:wrap!important;
  }
  .product-actions .btn,
  .card-actions .btn{
    flex:1 1 130px!important;
  }

  /* Checkout/cart */
  .cart-main{
    margin-left:210px!important;
    width:calc(100% - 210px)!important;
    padding:25px 14px 55px!important;
  }
  .checkout-main{
    width:100%!important;
    max-width:100%!important;
    padding:24px 14px 55px!important;
    box-sizing:border-box!important;
  }
  .cart-item{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .cart-item .price{
    grid-column:auto!important;
    grid-row:auto!important;
  }
  .cart-actions{
    flex-direction:column!important;
  }
  .cart-actions .btn,.cart-actions form,.cart-actions form .btn{
    width:100%!important;
  }

  /* Modal/dialogs */
  .modal,.dialog,.modal-content{
    width:calc(100vw - 28px)!important;
    max-width:calc(100vw - 28px)!important;
    max-height:90vh!important;
    overflow:auto!important;
  }

  /* Images / promo / testimonial cards */
  .promo-grid,.testimonial-grid,.service-grid{
    grid-template-columns:1fr!important;
  }
  .promo-card img,.testimonial-card img,.service-card img{
    width:100%!important;
    object-fit:cover!important;
  }

  /* Prevent long codes/URLs from breaking the page */
  .order-code,.file-name,.slug,.url,code{
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
  }

  /* Footer */
  .customer-footer{
    padding:15px 12px!important;
    font-size:11px!important;
  }
}

/* Very small phones */
@media (max-width: 420px){
  .customer-sidebar-fixed{width:190px!important;max-width:72vw!important}
  .customer-main-with-sidebar,.customer-topbar-with-sidebar,
  .customer-footer,.cart-main{
    margin-left:190px!important;
  }
  .cart-main{width:calc(100% - 190px)!important;padding:20px 10px 45px!important}
  .customer-side-brand b{font-size:11px!important}
  .customer-side-nav a{font-size:10px!important;gap:6px!important}
  .customer-side-nav a span{width:18px!important;min-width:18px!important}
  .container{padding-left:10px!important;padding-right:10px!important}
}