/*
Theme Name: PTNku - Bimbel SNBT Terpercaya
Theme URI: https://ptnku.com/
Author: PTNku Team
Author URI: https://ptnku.com/
Description: Premium one-page theme untuk PTNku. Privat Intensif SNBT dengan Tailwind CSS dan animasi AOS.js. Responsive dan dioptimasi untuk SEO serta konversi tinggi.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bimbelptn
Domain Path: /languages
Tags: education, responsive-layout, accessibility-ready, animated, seo-ready, conversion-optimized
*/

:root{
  --brand-orange: #FF8C00;
  --brand-blue: #003366;
  --brand-white: #FFFFFF;
}

/* Base */
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background-color: #fff;
  color: #1f2937;
}

/* Glass header */
.glass-nav{
  background: rgba(255,255,255,0.60);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

/* Buttons */
.btn-primary{ background: var(--brand-orange); color: white; padding: .6rem 1rem; border-radius: 8px; display:inline-block; }
.btn-primary.pulse{ animation: pulse 2.2s infinite; }
.btn-outline{ border: 2px solid var(--brand-orange); color: var(--brand-orange); padding: .5rem .9rem; border-radius:8px; }

@keyframes pulse{ 0%{ transform: scale(1); box-shadow:0 0 0 0 rgba(255,140,0,0.15);} 70%{ transform: scale(1.03); box-shadow:0 0 30px 8px rgba(255,140,0,0.08);} 100%{ transform: scale(1); box-shadow:0 0 0 0 rgba(255,140,0,0);} }

/* Cards */
.card-glow{ background: rgba(255,255,255,0.9); box-shadow: 0 10px 30px rgba(0,0,0,0.08); border-radius: 14px; padding: 1rem; }
.card-glow:hover{ transform: translateY(-6px) scale(1.02); box-shadow: 0 20px 50px rgba(0,0,0,0.12); transition: transform .24s ease, box-shadow .24s ease; }

/* Image card: remove inner padding so image can edge-to-edge */
.image-card{ padding: 0; }
.image-card img{ display:block; width:100%; height:100%; object-fit:cover; }

/* Accordion */
.faq-content{ max-height:0; overflow:hidden; transition: max-height .36s ease, padding .28s ease; }
.faq-item[aria-expanded="true"] .faq-content{ max-height: 420px; padding-top: .75rem; }
.faq-toggle{ transition: transform .28s ease; display:inline-block; }
.faq-item[aria-expanded="true"] .faq-toggle{ transform: rotate(45deg); }

/* Gradient text shimmer */
.gradient-text{ background: linear-gradient(90deg,var(--brand-orange),var(--brand-blue)); -webkit-background-clip: text; color: transparent; background-size:200% 100%; animation: shimmer 6s linear infinite; }
@keyframes shimmer{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }

/* Floating decorative shapes */
.floating{ position:absolute; pointer-events:none; will-change:transform; }
.float-anim{ animation: floaty 6s ease-in-out infinite; }
@keyframes floaty{ 0%{ transform: translateY(0) rotate(0deg);} 50%{ transform: translateY(-18px) rotate(6deg);} 100%{ transform: translateY(0) rotate(0deg);} }

/* Hero shapes (inside hero image) */
.hero-shapes{ position:absolute; inset:0; pointer-events:none; z-index:10; }
.hero-shapes .shape{ position:absolute; border-radius:14px; filter: blur(6px); transform-origin:center; mix-blend-mode:screen; }
.hero-shapes .shape--circle{ border-radius:999px; }
.hero-shapes .shape--rounded{ border-radius:18px; }
.hero-shapes .shape--soft{ border-radius:20px; }
.hero-shapes .shape--overlay{ filter: blur(14px); opacity:0.12; }

/* Slightly different float animations to create natural movement */
.hero-shapes .float-anim{ animation-name: floaty, subtle-tilt; animation-duration: 8s, 10s; animation-timing-function: ease-in-out, ease-in-out; animation-iteration-count: infinite, infinite; }
@keyframes subtle-tilt{ 0%{ transform: rotate(0deg);} 50%{ transform: rotate(4deg);} 100%{ transform: rotate(0deg);} }

/* Responsive: hide decorative shapes on small screens to avoid clutter */
@media (max-width:767px){
  .hero-shapes .shape{ display:none; }
}

/* Bento grid for curriculum and tutors */
.bento-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; }
.bento-item{ background: rgba(255,255,255,0.65); backdrop-filter: blur(6px); padding:1rem; border-radius:12px; }

/* Icon circle */
.icon-circle{ width:48px; height:48px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:var(--brand-blue); color:white; font-weight:700; }

/* Hero image and badge */
.hero-image-wrap{ position:relative; overflow:visible; }
.hero-image-wrap img{ transition: transform .6s cubic-bezier(.2,.9,.2,1); transform-origin:center; }
.hero-image-wrap:hover img{ transform: perspective(800px) rotateY(-6deg) scale(1.02); }
.image-badge{ position:absolute; top:12px; right:12px; width:72px; height:72px; background:var(--brand-orange); border-radius:14px; display:flex; align-items:center; justify-content:center; color:white; font-weight:700; box-shadow:0 12px 30px rgba(0,0,0,0.14); }
.image-badge.floaty{ animation: badge-wobble 4.5s ease-in-out infinite; }
@keyframes badge-wobble{ 0%{ transform: translateY(0) rotate(0deg);} 25%{ transform: translateY(-6px) rotate(-4deg);} 50%{ transform: translateY(0) rotate(0deg);} 75%{ transform: translateY(-6px) rotate(4deg);} 100%{ transform: translateY(0) rotate(0deg);} }

/* Blob overlay */
.blob{ position:absolute; border-radius:48% 52% 60% 40% / 40% 60% 40% 60%; filter: blur(18px); opacity:0.14; mix-blend-mode:screen; animation: blob 12s infinite ease-in-out; }
@keyframes blob{ 0%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(-20px,-18px) scale(1.08); } 100%{ transform: translate(0,0) scale(1); } }

/* Background animated shapes container */
.bg-shapes{ position:fixed; inset:0; pointer-events:none; z-index:-1; }
.bg-shapes .shape{ position:absolute; width:180px; height:180px; background:linear-gradient(90deg, rgba(0,51,102,0.06), rgba(255,140,0,0.06)); border-radius:14px; animation: drift 28s linear infinite; filter: blur(6px); }
.bg-shapes .shape.s1{ left:5%; top:10%; }
.bg-shapes .shape.s2{ right:8%; top:30%; width:120px; height:120px; animation-duration:22s; }
.bg-shapes .shape.s3{ left:20%; bottom:5%; width:220px; height:220px; animation-duration:34s; }
@keyframes drift{ 0%{ transform: translateY(0) rotate(0deg);} 50%{ transform: translateY(-60px) rotate(12deg);} 100%{ transform: translateY(0) rotate(0deg);} }

/* Scroll progress bar */
#scroll-progress{ position:fixed; left:0; top:0; height:4px; background: linear-gradient(90deg,var(--brand-orange),var(--brand-blue)); width:0%; z-index:60; transition: width .12s linear; }

/* Responsive tweaks */
@media (min-width:768px){
  .hero-title{ font-size: 3rem; }
  .bento-grid{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width:767px){
  .bento-grid{ grid-template-columns: repeat(2,1fr); }
}