/* Shared Strawberry Matcha theme for puterijauhari.com */
:root{
  --primary:#566b45!important;
  --primary-dark:#3f5135!important;
  --accent:#df8192!important;
  --accent-2:#91a875!important;
  --accent-soft:#fbe8ec!important;
  --bg:#fffaf3!important;
  --card:#fffdf9!important;
  --text:#394236!important;
  --muted:#6f786a!important;
  --border:#e5e8df!important;
  --shadow:0 18px 45px rgba(78,91,65,.11)!important;
  --shadow-lg:0 28px 70px rgba(78,91,65,.18)!important;
}
html{background:#fffaf3}
body{
  font-family:Arial,Helvetica,sans-serif!important;
  background:
    radial-gradient(circle at 5% 5%,rgba(223,129,146,.12),transparent 28%),
    radial-gradient(circle at 95% 8%,rgba(145,168,117,.14),transparent 28%),
    #fffaf3!important;
  color:#394236!important;
}
.topbar{background:rgba(255,253,249,.92)!important;border-bottom:1px solid #e5e8df!important;box-shadow:0 5px 20px rgba(78,91,65,.05)}
.nav{max-width:1180px!important}
.brand{color:#566b45!important;font-weight:900!important}
.brand::before{background:linear-gradient(135deg,#91a875,#df8192)!important;box-shadow:0 10px 24px rgba(223,129,146,.18)!important}
.nav-links{color:#6f786a!important}
.nav-links a,.dropbtn{font-weight:700!important}
.nav-links a:hover,.dropbtn:hover,.nav-links a.active{background:#fbe8ec!important;color:#b85f73!important}
.dropdown-content{background:#fffdf9!important;border-color:#e5e8df!important}
.dropdown-content a:hover{background:#eef3e8!important;color:#566b45!important}
.hero{
  background:
    radial-gradient(circle at 16% 20%,rgba(255,255,255,.22),transparent 24%),
    radial-gradient(circle at 83% 10%,rgba(255,255,255,.16),transparent 20%),
    linear-gradient(135deg,#647b52 0%,#91a875 48%,#df8192 100%)!important;
  color:#fff!important;
}
.hero::before{background:rgba(255,255,255,.08)!important}
.hero::after{background:rgba(255,255,255,.09)!important}
.eyebrow{background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.38)!important;color:#fff!important}
.hero p{color:rgba(255,255,255,.93)!important}
.btn-primary{background:#fffdf9!important;color:#566b45!important}
.btn-outline{border-color:rgba(255,255,255,.72)!important;color:#fff!important}
.btn:hover{box-shadow:0 12px 26px rgba(63,81,53,.16)!important}
.section-title,.profile-card h2,.quick-card h3,.link-card h3,.content-card h2,.content-card h3{color:#566b45!important}
.role,.tag{color:#b85f73!important}
.tag{background:#fbe8ec!important}
.card,.quick-card,.link-card,.content-card,.profile-card{background:#fffdf9!important;border-color:#e5e8df!important}
.quick-card,.link-card{box-shadow:0 8px 22px rgba(78,91,65,.06)!important}
.quick-card:hover,.link-card:hover{border-color:rgba(223,129,146,.48)!important;box-shadow:0 14px 30px rgba(78,91,65,.10)!important}
.profile-photo{border-color:#eef3e8!important;background:#f7f3eb!important}
.footer{background:#fffdf9!important;color:#7a8274!important;border-top-color:#e5e8df!important}
.note{background:#fff1f3!important;border-color:#f1cbd3!important;color:#8e4f5d!important}
/* Protected/login screens */
.login-screen,#loginScreen{
  background:
    radial-gradient(circle at 20% 20%,rgba(255,255,255,.18),transparent 28%),
    linear-gradient(135deg,#647b52,#91a875 48%,#df8192)!important;
}
.login-card{background:#fffdf9!important;border-color:rgba(255,255,255,.55)!important;box-shadow:0 24px 60px rgba(63,81,53,.22)!important}
.login-card h1{color:#566b45!important}
.login-card p{color:#6f786a!important}
.login-card input{background:#fff!important;border-color:#e5e8df!important;color:#394236!important}
.login-card input:focus{border-color:#df8192!important;box-shadow:0 0 0 4px #fbe8ec!important}
.login-card button{background:linear-gradient(135deg,#647b52,#91a875)!important;color:#fff!important}
.login-card button:hover{background:linear-gradient(135deg,#566b45,#df8192)!important}
.main-menu-link{display:inline-block;margin-top:18px;color:#b85f73!important;font-weight:700}
/* generic content polish */
table{background:#fffdf9!important;border-color:#e5e8df!important}
th{background:#eef3e8!important;color:#566b45!important}
td{border-color:#e5e8df!important}
hr{border-color:#e5e8df!important}
/* Mobile: same compact 4-column navigation language as homepage */
@media(max-width:760px){
  .nav{padding:11px 14px!important;display:block!important}
  .brand{font-size:14px!important}
  .brand::before{width:37px!important;height:37px!important;border-radius:12px!important}
  .nav-links{margin-top:10px!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;width:100%!important;align-items:stretch!important}
  .nav-links>a,.dropbtn{background:#fffdf9!important;border:1px solid #e5e8df!important;padding:9px 6px!important;text-align:center!important;font-size:11px!important;line-height:1.2!important;min-height:42px!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:12px!important}
  .dropdown{width:100%!important}
  .dropdown-content{left:0!important;right:auto!important;top:46px!important;min-width:170px!important;z-index:50!important}
  .hero{padding:54px 17px 84px!important}
  .hero h1{font-size:clamp(34px,11vw,44px)!important}
  .hero p{font-size:15px!important}
  .section{padding:42px 16px!important}
  .intro-grid,.quick-grid,.link-grid{grid-template-columns:1fr!important}
  .content-card{padding:24px 20px!important}
  .section-title{font-size:27px!important}
  .btn{min-height:44px!important}
}
@media(max-width:420px){
  .nav-links{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .nav-links>a,.dropbtn{font-size:10.5px!important}
}