/*
Theme Name: Smart Student Theme
Theme URI: https://nusantaraweb.com/
Author: nusantaraweb
Author URI: https://nusantaraweb.com/
Description: Theme WordPress ringan dan minimal khusus pendamping Smart Student Card. Fokus mobile-first, clean, dan tidak mengganggu standalone app shell.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: smart-student-theme
*/

:root{
  --sst-primary:#0f8d70;
  --sst-primary-dark:#0a705b;
  --sst-ink:#16263d;
  --sst-muted:#718096;
  --sst-line:#e8edef;
  --sst-bg:#f5f8f7;
  --sst-white:#ffffff;
  --sst-radius:18px;
  --sst-shadow:0 14px 34px rgba(25,54,45,.07);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--sst-bg);
  color:var(--sst-ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.6;
}
a{color:var(--sst-primary);text-decoration:none}
img{max-width:100%;height:auto}
button,input,textarea,select{font:inherit}

.sst-site{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.sst-header{
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(232,237,239,.85);
}
.sst-header-inner{
  max-width:1120px;
  margin:0 auto;
  min-height:72px;
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.sst-brand{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
}
.sst-logo{
  width:42px;
  height:42px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--sst-primary),#38b69b);
  color:#fff;
  font-weight:900;
  box-shadow:0 8px 18px rgba(15,141,112,.18);
}
.sst-brand-text{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.sst-brand-text strong{
  font-size:15px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sst-brand-text span{
  margin-top:2px;
  font-size:11px;
  color:var(--sst-muted);
}
.sst-nav{
  display:flex;
  align-items:center;
  gap:8px;
}
.sst-nav a{
  color:var(--sst-ink);
  font-size:13px;
  font-weight:700;
  padding:9px 12px;
  border-radius:11px;
}
.sst-nav a:hover{background:#eef7f4;color:var(--sst-primary)}
.sst-nav .sst-app-link{
  background:var(--sst-primary);
  color:#fff;
  box-shadow:0 8px 18px rgba(15,141,112,.16);
}
.sst-nav .sst-app-link:hover{
  background:var(--sst-primary-dark);
  color:#fff;
}
.sst-menu-btn{
  display:none;
  width:42px;
  height:42px;
  border:1px solid var(--sst-line);
  background:#fff;
  border-radius:12px;
}

.sst-main{
  width:min(1120px,calc(100% - 32px));
  margin:0 auto;
  flex:1;
  padding:44px 0 56px;
}
.sst-hero{
  background:linear-gradient(135deg,#0f8d70 0%,#28ab8e 52%,#c9efe5 100%);
  border-radius:28px;
  min-height:330px;
  color:#fff;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  overflow:hidden;
  box-shadow:0 24px 58px rgba(15,118,96,.13);
}
.sst-hero-copy{
  padding:54px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.sst-kicker{
  display:inline-flex;
  width:max-content;
  font-size:11px;
  font-weight:800;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.15);
  margin-bottom:15px;
}
.sst-hero h1{
  font-size:clamp(34px,5vw,56px);
  line-height:1.04;
  letter-spacing:-.045em;
  margin:0;
}
.sst-hero p{
  margin:18px 0 0;
  max-width:600px;
  color:rgba(255,255,255,.9);
}
.sst-hero-actions{
  margin-top:25px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.sst-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 17px;
  border-radius:13px;
  font-weight:800;
  font-size:13px;
}
.sst-btn.white{background:#fff;color:var(--sst-primary)}
.sst-btn.ghost{border:1px solid rgba(255,255,255,.4);color:#fff}
.sst-hero-art{
  position:relative;
  min-height:330px;
}
.sst-hero-art:before{
  content:"";
  position:absolute;
  width:270px;
  height:270px;
  right:10%;
  top:10%;
  border-radius:50%;
  background:rgba(255,255,255,.16);
}
.sst-school{
  position:absolute;
  left:50%;
  bottom:35px;
  transform:translateX(-50%);
  width:250px;
  height:150px;
}
.sst-school .body{
  position:absolute;
  left:25px;
  bottom:0;
  width:200px;
  height:95px;
  background:#fff9e9;
  border-radius:5px;
  box-shadow:0 20px 30px rgba(25,76,62,.12);
}
.sst-school .roof{
  position:absolute;
  left:9px;
  top:30px;
  width:232px;
  height:54px;
  background:#167863;
  clip-path:polygon(9% 100%,22% 17%,78% 17%,91% 100%);
}
.sst-school .tower{
  position:absolute;
  left:90px;
  top:7px;
  width:70px;
  height:120px;
  z-index:2;
  background:#fff9e9;
  clip-path:polygon(50% 0,100% 25%,100% 100%,0 100%,0 25%);
}
.sst-school .door{
  position:absolute;
  left:109px;
  bottom:0;
  width:32px;
  height:45px;
  background:#176d5f;
  border-radius:5px 5px 0 0;
  z-index:3;
}
.sst-school .flag{
  position:absolute;
  left:125px;
  top:-7px;
  width:2px;
  height:27px;
  background:#755f48;
  z-index:4;
}
.sst-school .flag:after{
  content:"";
  position:absolute;
  top:0;
  left:2px;
  width:31px;
  height:15px;
  background:#ff9f1c;
  clip-path:polygon(0 0,100% 22%,74% 100%,0 72%);
}

.sst-section{margin-top:28px}
.sst-section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:14px;
}
.sst-section-head h2{
  margin:0;
  font-size:25px;
  letter-spacing:-.03em;
}
.sst-section-head p{
  margin:3px 0 0;
  color:var(--sst-muted);
  font-size:13px;
}
.sst-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.sst-card{
  background:#fff;
  border:1px solid var(--sst-line);
  border-radius:var(--sst-radius);
  padding:22px;
  box-shadow:var(--sst-shadow);
}
.sst-card-icon{
  width:44px;
  height:44px;
  border-radius:14px;
  background:#eaf7f3;
  color:var(--sst-primary);
  display:grid;
  place-items:center;
  margin-bottom:15px;
  font-size:20px;
}
.sst-card h3{
  margin:0 0 6px;
  font-size:15px;
}
.sst-card p{
  margin:0;
  font-size:12px;
  color:var(--sst-muted);
}
.sst-content{
  background:#fff;
  border:1px solid var(--sst-line);
  border-radius:22px;
  padding:30px;
  box-shadow:var(--sst-shadow);
}
.sst-content h1,.sst-content h2,.sst-content h3{line-height:1.2}
.sst-content > :first-child{margin-top:0}
.sst-content > :last-child{margin-bottom:0}

.sst-footer{
  margin-top:auto;
  padding:26px 20px;
  border-top:1px solid var(--sst-line);
  background:#fff;
}
.sst-footer-inner{
  max-width:1120px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  gap:18px;
  color:var(--sst-muted);
  font-size:11px;
}

/* Standalone Smart Student Card page:
   remove theme chrome and spacing completely */
body:has(.ssc-app) .sst-header,
body:has(.ssc-app) .sst-footer,
body:has(.ssc-login-shell) .sst-header,
body:has(.ssc-login-shell) .sst-footer{
  display:none!important;
}
body:has(.ssc-app) .sst-main,
body:has(.ssc-login-shell) .sst-main{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}
body:has(.ssc-app) .sst-site,
body:has(.ssc-login-shell) .sst-site{
  min-height:100dvh!important;
}
body:has(.ssc-app),
body:has(.ssc-login-shell){
  margin:0!important;
  padding:0!important;
}

@media(max-width:840px){
  .sst-main{padding-top:24px}
  .sst-nav{
    position:absolute;
    top:64px;
    left:16px;
    right:16px;
    background:#fff;
    border:1px solid var(--sst-line);
    border-radius:16px;
    padding:10px;
    box-shadow:var(--sst-shadow);
    display:none;
    flex-direction:column;
    align-items:stretch;
  }
  .sst-nav.open{display:flex}
  .sst-nav a{width:100%}
  .sst-menu-btn{display:grid;place-items:center}
  .sst-hero{grid-template-columns:1fr}
  .sst-hero-copy{padding:34px 26px}
  .sst-hero-art{min-height:245px}
  .sst-grid{grid-template-columns:1fr}
}