.elementor-6760 .elementor-element.elementor-element-1ea60a4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6760 .elementor-element.elementor-element-7242251{width:var( --container-widget-width, 100vw );max-width:100vw;margin:77px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--container-widget-width:100vw;--container-widget-flex-grow:0;}.elementor-6760 .elementor-element.elementor-element-2f07382{--display:flex;}.elementor-6760 .elementor-element.elementor-element-40f2636{width:var( --container-widget-width, 72% );max-width:72%;--container-widget-width:72%;--container-widget-flex-grow:0;}.elementor-6760 .elementor-element.elementor-element-40f2636.elementor-element{--align-self:center;}.elementor-6760 .elementor-element.elementor-element-7ace835{width:var( --container-widget-width, 69% );max-width:69%;--container-widget-width:69%;--container-widget-flex-grow:0;}.elementor-6760 .elementor-element.elementor-element-7ace835.elementor-element{--align-self:center;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-7242251 */@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap');

:root{
--brand:#032854;
--ink:#0f172a;
--muted:#475569;
--border:#e8edf3;
--soft:#f6f8fb;
--max:1200px;
--sticky-top:96px;
}

/* ================== BASE ================== */
.sm-welcome{
font-family: 'Libre Baskerville', serif;
color:var(--ink);
width:min(var(--max), 92%);
margin:40px auto 80px;
}

.container-wide {
max-width: 3400px;
margin: 0 auto;
padding: 0;
}

/* ================== GRID ================== */
.sm-grid{
display:grid;
grid-template-columns: 56% 44%;
gap: clamp(28px, 5vw, 64px);
align-items:start;
}

/* ================== LEFT ================== */
.sm-title{
font-size: clamp(44px, 2vw, 86px);
line-height:1.05;
font-weight:400;
color:var(--brand);
margin: 0 0 32px;
}

.sm-content{
padding-right: clamp(12px, 2vw, 28px);
}

.sm-content p{
font-size: clamp(16px, 1.1vw, 18px);
font-family: 'Work Sans', sans-serif;
line-height:1.9;
margin: 0 0 16px;
}

/* ================== HERO IMAGE ================== */
.hero-img{
margin:0 0 10px 0;
height: clamp(420px, 64vh, 720px);
border:1px solid var(--border);
overflow:hidden;
}

.hero-img img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

/* ================== QUOTE SECTION ================== */
.sm-quote{
margin: 28px 0 56px;
}

.sm-quote-intro{
display: grid;
grid-template-columns: 1fr 240px;
gap: clamp(18px, 3vw, 28px);
align-items: start;
}

.sm-quote-intro > *{
align-self: start;
}

.intro-copy{
font-family: "Libre Baskerville", serif;
font-size: clamp(24px, 2.8vw, 36px);
line-height: 1.32;
margin: 0;
}

/* ✅ FIX FOTO FINAL (NO BUG) */
.teacher-photo {
  margin: 0;
  width: 240px;
  flex-shrink: 0; /* 🔥 biar gak ketekan */
  border-radius: 20px;
  overflow: hidden;
}

.teacher-photo img {
  width: 100%;
  height: auto; /* 🔥 balik ke natural */
  display: block;
}

/* ================== DIVIDER ================== */
.quote-divider{
margin: clamp(10px, 3vw, 28px) 0;
border:0;
border-top:1px solid var(--border);
}

/* ================== QUOTE CARD ================== */
.sm-quote-card{
position: relative;
padding: 8px 4px 0 56px;
}

.sm-quote-card .quote-mark{
position:absolute;
left:0;
top:-4px;
font-size: clamp(46px, 5vw, 64px);
color: rgba(3,40,84,.22);
}

.sm-quote-card blockquote{
margin:0 0 14px;
font-style: italic;
font-size: clamp(18px, 1vw, 22px);
line-height:1.8;
color:#4b5563;
}

.sm-quote-card figcaption{
font-family: "Work Sans", sans-serif;
font-size:15.5px;
color:var(--muted);
}

/* ================== SIDEBAR ================== */
.about-col--right{
position: sticky;
top: var(--sticky-top);
}

.explore-card{
max-height: calc(100vh - 120px);
overflow:auto;
background:#fff;
border:1px solid var(--border);
border-radius:10px;
box-shadow:0 10px 24px rgba(2,8,23,.06);
padding:18px 16px;
}

.explore-card h3{
margin:0 0 8px;
font-weight:600;
color:var(--brand);
}

.explore-list{
list-style:none;
margin:0;
padding:0;
background:var(--soft);
border:1px solid #eef1f5;
border-radius:8px;
overflow:hidden;
}

.explore-list li{ border-top:1px solid #eef1f5; }
.explore-list li:first-child{ border-top:0; }

.explore-list a{
display:block;
padding:16px 18px;
color:var(--ink);
text-decoration:none;
font-weight:500;
transition:.18s;
}

.explore-list a:hover{
background:#eef3f8;
color:var(--brand);
padding-left:22px;
}

/* ================== RESPONSIVE ================== */
@media (max-width:1024px){
.sm-grid{
grid-template-columns:1fr;
}

.sm-quote-intro{
grid-template-columns:1fr;
}

.teacher-photo{
width:180px;
justify-self:start;
}



.about-col--right{
position:static;
}
}

@media (max-width:768px){
.about-hero{
padding:40px 24px;
}
}

/* ===== BREADCRUMB FIX ===== */
.sm-breadcrumbs {
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  margin-bottom: 20px;
}

.sm-breadcrumbs a {
  color: #4b5563; /* abu-abu tua elegant */
  text-decoration: none;
}

.sm-breadcrumbs a:hover {
  color: var(--brand); /* balik ke biru brand */
}

.sm-breadcrumbs span {
  color: #9ca3af; /* separator lebih soft */
}

.sm-breadcrumbs .current {
  color: #1f2937; /* current page lebih tegas */
  font-weight: 500;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-40f2636 */@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap');

:root{
  /* Warna pita judul (ganti sesuai kebutuhan) */
  --band: #032854;               /* Stella Mundi Blue */
  /* Kalau mau seperti contoh merah: #b90f3f */
  --gap: clamp(16px, 3vw, 28px);
}

.sm-hero-cards{
  font-family: 'Work Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.sm-hero-cards__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

/* Kartu */
.sm-hero-card{
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  transition: transform .18s ease, box-shadow .18s ease;
}
.sm-hero-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(2,8,23,.12);
}

/* Media */
.sm-hero-card__media{
  margin: 0;
  aspect-ratio: 4 / 3;          /* tinggi proporsional seperti contoh */
  overflow: hidden;
}
.sm-hero-card__media img{
  width: 100%; height: 100%; object-fit: cover; display:block;
  transform: scale(1);
  transition: transform .45s ease, filter .2s ease;
}
.sm-hero-card:hover .sm-hero-card__media img{
  transform: scale(1.05);       /* zoom halus saat hover */
}

/* Pita judul di bawah gambar */
.sm-hero-card__band{
  background: var(--band);
  color: #fff;
  padding: clamp(14px, 2vw, 22px);
}
.sm-hero-card__title{
  margin: 0;
  font-weight: 600;
  font-size: clamp(18px, 2.2vw, 28px);
  letter-spacing: -.01em;
}

/* Responsif */
@media (max-width: 1100px){
  .sm-hero-cards__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px){
  .sm-hero-cards__grid{ grid-template-columns: 1fr; }
  .sm-hero-card__media{ aspect-ratio: 16 / 10; } /* sedikit lebih lebar di mobile */
}

/* Tambahkan jarak antar kartu */
.sm-hero-cards__grid {
  gap: clamp(24px, 3vw, 40px); /* sekarang ada ruang antar card */
  padding: 0 clamp(10px, 2vw, 30px); /* beri napas dari kiri-kanan container */
}

/* Opsional: bikin pita tidak terlalu menempel pas ke ujung */
.sm-hero-card__band {
  padding: clamp(14px, 2vw, 22px) clamp(18px, 2.5vw, 28px);
}

/* Opsional: tambahkan border-radius agar lebih soft */
.sm-hero-card {
  border-radius: 10px;
}

/* Pastikan gambar ikut rounding */
.sm-hero-card__media img {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

/* Card jadi kolom fleksibel setinggi 100% */
.sm-hero-card{
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 0;           /* sudut tajam (sesuai request) */
  overflow: hidden;
}

/* Media fleksibel mengisi ruang atas card */
.sm-hero-card__media{
  flex: 1 1 auto;             /* ambil sisa ruang */
  min-height: 260px;          /* jaga tinggi saat gambar belum load */
  margin: 0;
  overflow: hidden;
}
.sm-hero-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Pita selalu nempel bawah */
.sm-hero-card__band{
  margin-top: auto;           /* dorong ke bawah */
  background: #032854;        /* ganti kalau perlu */
  color: #fff;
  padding: clamp(16px, 2vw, 26px) clamp(20px, 2.5vw, 32px);
  border-radius: 0;
}

/* Judul */
.sm-hero-card__title{
  margin: 0;
  font-weight: 600;
  font-size: clamp(18px, 1vw, 28px);
  font-family: 'Libre Baskerville', serif;

}

.sm-hero-cards__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: stretch;       /* penting */
  grid-auto-rows: 1fr;        /* samakan tinggi baris */
}

/* 5. Opsional: jika gambar masih terlalu tinggi/kurang tinggi, tinggal adjust aspect ratio *//* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-7ace835 *//* Compact Version */
.sm-cards__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.8vw, 20px); /* lebih kecil */
}

.sm-card{
  display: grid;
  grid-template-columns: 40% 1fr; /* gambar lebih kecil */
  align-items: center;
  gap: clamp(10px, 1.5vw, 14px);
  padding: clamp(10px, 1.5vw, 16px);
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  transition: transform .15s ease, box-shadow .15s ease;
}

/* Gambar dibuat kotak */
.sm-card__media{
  aspect-ratio: 1 / 1; /* Kotak */
  border-radius: 6px;
  overflow: hidden;
}

.sm-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* agar gambar tetap proporsional */
  display: block;
  transform: scale(1.02);
  transition: transform .35s ease;
}

.sm-card:hover .sm-card__media img{
  transform: scale(1.06);
}


.sm-card__title{
  font-size: clamp(16px, 1.4vw, 20px); /* sebelumnya lebih besar */
  font-weight: 600;
  margin-bottom: 4px; /* lebih rapat */
}

.sm-card__text{
  font-size: clamp(14px, 1.2vw, 15px);
  line-height: 1.5;
  max-width: 38ch; /* buat teks rapi & nyaman dibaca */
}

/* Responsive breakpoints */
@media (max-width: 1100px){
  .sm-cards__grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px){
  .sm-cards__grid{ grid-template-columns: 1fr; }
  .sm-card{ grid-template-columns: 1fr; text-align: center; }
  .sm-card__media{ aspect-ratio: 16/9; }
}

/* === HOVER EFFECTS: card panel color + image zoom === */
:root{
  --brand: #032854;         /* Stella Mundi Blue */
  --hover-bg: var(--brand); /* warna panel saat hover */
}

/* Jika card jadi terlalu tinggi, kamu bisa ubah grid col sedikit */
.sm-card{
  grid-template-columns: 38% 1fr; /* lebih kecil lagi bagian foto */
  padding: clamp(8px, 1.2vw, 14px); /* lebih compact */
}

.sm-card__media{
  border-radius: 6px;
  overflow: hidden;
}
.sm-card__media img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1);                          /* base */
  transition: transform .45s ease;              /* zoom halus */
}

/* Body card sedikit lebih kecil paddingnya */
.sm-card__body{
  padding-right: clamp(4px, 0.5vw, 8px);
}

/* Title & text transition warna */
.sm-card__title, .sm-card__text{
  transition: color .22s ease;
}

/* Terapkan hanya untuk device yang support hover */
@media (hover:hover){
  .sm-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(2,8,23,.08);
    border-color: rgba(2,8,23,.12);
  }
  .sm-card:hover .sm-card__media img{
    transform: scale(1.06);                     /* zoom-in foto */
  }
  /* Panel teks berubah ke warna brand, teks jadi putih */
  .sm-card:hover .sm-card__body{
    background: var(--hover-bg);
  }
  .sm-card:hover .sm-card__title,
  .sm-card:hover .sm-card__text{
    color: #fff;
  }
}

/* Fokus keyboard = efek sama seperti hover (aksesibilitas) */
.sm-card:focus-visible{
  outline: 3px solid color-mix(in lab, var(--brand) 70%, white);
  outline-offset: 3px;
}
.sm-card:focus-visible .sm-card__media img{ transform: scale(1.06); }
.sm-card:focus-visible .sm-card__body{ background: var(--hover-bg); }
.sm-card:focus-visible .sm-card__title,
.sm-card:focus-visible .sm-card__text{ color:#fff; }

/* (Opsional) jika ingin HANYA body yang berubah, bukan seluruh kartu */
.sm-card:hover{ background: #fff; } /* keep card background putih */

/* Tambahkan padding agar teks tidak mepet */
.sm-card__body {
  padding: clamp(14px, 2vw, 22px); /* bisa adjust 16–20 px kalau mau lebih / kurang */
  padding-left: clamp(16px, 2.2vw, 28px); /* fokus di kiri agar lebih lega */
}

/* Jika mau judul sedikit lebih turun dari top */
.sm-card__title {
  margin-top: 4px;
}

/* Warna default teks menggunakan Stella Mundi Blue */
.sm-card__title,
.sm-card__text {
  color: var(--brand);
}/* End custom CSS */