/* IkhlasTech — Modern Tech Theme (with SVG logo) */
:root{
  --bg: #0b1220;
  --surface: #0f1b2f;
  --card: #0e1726cc;
  --text: #e6f2ff;
  --muted: #9fb6d1;
  --primary: #0ea5ff;
  --accent: #ff7a18;
  --success: #3ddc97;
  --ring: #59d0ff55;
  --shadow: 0 10px 30px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(1000px 600px at 20% -10%,#163155 0%,transparent 60%),radial-gradient(800px 600px at 100% 0%,#11243e 0%,transparent 62%),var(--bg);color:var(--text);font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial, sans-serif}
img{max-width:100%;display:block}
a{color:var(--primary);text-decoration:none}
.container{width:min(1100px,92%);margin-inline:auto}
.muted{color:var(--muted)}
.small{font-size:.925rem}

/* Header */
.site-header{position:sticky;top:0;z-index:50;display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:1rem 1.2rem;background:linear-gradient(180deg,#0e1a2c 0%, #0b1220ea 70%, transparent 100%);backdrop-filter: blur(10px);border-bottom:1px solid #14233a}
.brand{display:flex;align-items:center;gap:.55rem;color:var(--text);font-weight:700;letter-spacing:.2px}
.brand .brand-text span{color:var(--primary)}
.brand.small .brand-logo{width:28px;height:28px}

/* Logo (SVG) */
.brand-logo{width:34px;height:34px;border-radius:10px;display:block;filter: drop-shadow(0 0 6px rgba(26,176,255,.25));}

.site-nav{display:flex;align-items:center;gap:1rem}
.site-nav a{padding:.55rem .8rem;border-radius:.6rem}
.site-nav a[aria-current="page"], body[data-page="home"] .site-nav a[href="index.html"]{background:#0e203a;color:#fff;box-shadow:inset 0 0 0 1px #133356}
.nav-toggle{display:none;background:transparent;border:1px solid #1b3356;color:#cbe6ff;border-radius:.5rem;padding:.4rem .6rem}

/* Buttons */
.btn{display:inline-block;padding:.8rem 1.1rem;border-radius:.8rem;border:1px solid #17365c;box-shadow:var(--shadow);transition:.2s ease;cursor:pointer}
.btn-primary{background:linear-gradient(180deg,#0ea5ff,#147ad6);color:#061424}
.btn-accent{background:linear-gradient(180deg,#ff9a3c,#ff7a18);color:#1a0e03}
.btn-ghost{background:transparent;color:#cfe9ff;border-color:#1b3356}
.btn:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(0,0,0,.45)}

/* Hero */
.hero{position:relative;isolation:isolate;padding:7rem 0 4rem;border-bottom:1px solid #14233a}
.hero .hero-content h1{font-size:clamp(2rem,4vw,3.2rem);line-height:1.2;margin:0 0 .6rem}
.hero .hero-content p{max-width:680px;color:var(--muted)}
.hero .actions{margin-top:1.1rem;display:flex;gap:.8rem;flex-wrap:wrap}
.gradient{background:linear-gradient(90deg,var(--primary),#6ee7ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-orbit{position:absolute;inset:0;pointer-events:none;opacity:.5;background:radial-gradient(400px 220px at 10% 30%,#0ea5ff33,transparent), radial-gradient(420px 240px at 90% 20%,#ff7a1833,transparent)}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin:3rem auto}
.card{background:linear-gradient(180deg,rgba(18,29,50,.9),rgba(12,22,38,.9));border:1px solid #132a4b;border-radius:1rem;padding:1.2rem;box-shadow:var(--shadow)}
.card .icon{font-size:1.6rem}
.card h3{margin:.4rem 0}
.card p{color:var(--muted)}
.card-link{display:inline-block;margin-top:.6rem}

/* Split */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;margin:3rem auto}
.split .panel{background:linear-gradient(180deg,#0f1d34,#0b1424);border:1px solid #122a4d;border-radius:1rem;padding:1.2rem}

.checklist{padding-left:1.2rem}
.checklist li{margin:.35rem 0}
.numbered{padding-left:1.2rem}

/* Grid / Tiles */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.tile{min-height:180px;padding:1rem;border-radius:1rem;border:1px solid #132a4b;background:radial-gradient(260px 180px at 20% 10%,#0ea5ff22,transparent), linear-gradient(180deg,rgba(18,29,50,.9),rgba(12,22,38,.9));box-shadow:var(--shadow)}
.tile .tag{display:inline-block;margin-top:.5rem;padding:.25rem .5rem;border-radius:.5rem;background:#0e2b4a;border:1px solid #164a75;color:#bfe6ff}

/* Sections */
.page-header{padding:2.2rem 0 1rem;border-bottom:1px solid #14233a;margin-bottom:1.2rem}
.page-header .lead{color:var(--muted);max-width:780px}
.service-section{margin:1.6rem 0;padding:1rem;border-left:3px solid #0ea5ff22;border-right:3px solid transparent;background:linear-gradient(90deg,#0ea5ff0f,transparent)}
.bullets{padding-left:1.2rem}

/* Forms */
.form label{display:block;margin:.6rem 0}
.form input,.form textarea,.form select{width:100%;padding:.85rem;border-radius:.6rem;border:1px solid #183457;background:#0b1627;color:var(--text);outline:none;box-shadow:inset 0 0 0 1px #0d2442}
.form input:focus,.form textarea:focus,.form select:focus{box-shadow:0 0 0 3px var(--ring)}
.form .grid.two{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.form .actions{margin-top:.8rem;display:flex;align-items:center;gap:1rem}

/* CTA */
.cta{margin:3rem auto 4rem;text-align:center}
.cta.inline{margin:2rem 0;text-align:center}

/* Footer */
.site-footer{border-top:1px solid #14233a;margin-top:2rem;padding:1.2rem 0;background:linear-gradient(0deg,#0a1322,transparent)}
.footer-grid{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.footer-nav{display:flex;gap:1rem;flex-wrap:wrap}
.legal{color:#7f97b1;text-align:center;margin:1rem 0 0}

/* Responsive */
@media (max-width: 860px){
  .split{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .nav-toggle{display:block}
  .site-nav{position:absolute;right:.8rem;top:60px;background:#0d1a2c;border:1px solid #17365c;border-radius:.8rem;padding:.6rem;display:none;flex-direction:column;align-items:stretch;min-width:200px}
  .site-nav.open{display:flex}
}