.section {
  padding: var(--gn-section-py) var(--gn-gutter);
}
.section-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gn-purple);
  margin-bottom: 20px;
}
.section-label::before {
  content: '';
  display: block;
  width: 32px; height: 2px;
  background: var(--gn-purple);
}
.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  font-weight: 900; line-height: 1.15;
  color: rgba(16,10,34,.92);
  margin-bottom: 20px;
}
.section-title em { color: var(--gn-purple); font-style: italic; }

.about-grid {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: 80px; align-items: center;
}
.about-desc {
  font-size: 1.05rem; line-height: 1.8;
  color: #4A5568;
  margin-bottom: 40px;
}
.about-cards {
  display: flex; flex-direction: column; gap: 20px;
}
.about-card {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 24px;
  background: white;
  border-radius: 20px;
  border: 1px solid rgba(124,58,237,.10);
  box-shadow: var(--gn-shadow-sm);
  transition: transform 0.25s, box-shadow 0.25s;
}
.about-card:hover { transform: translateY(-3px); box-shadow: var(--gn-shadow-md); }
.card-num {
  font-family: 'Playfair Display', serif;
  font-size: 2rem; font-weight: 900;
  color: var(--gn-purple);
  min-width: 40px; line-height: 1;
}
.card-content h4 {
  font-size: 1rem; font-weight: 700; color: #0f0a1a;
  margin-bottom: 6px;
}
.card-content p { font-size: 0.875rem; color: #4A5568; line-height: 1.6; }

.about-right {
  position: relative;
}
.about-visual-youtube {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.about-visual-mp4 {
  width: 100%;
  aspect-ratio: 1/2;
  border-radius: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.about-video{
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 600px;
  max-height: 400px;
  padding: 0;
  z-index: 1;
  overflow: hidden;
}
/* untuk video mp4 */
.about-video video {
  width: 100%;
  height: 100%;
  max-height: 400px;
  border-radius: 24px;
  display: block;
  object-fit: cover;
  box-shadow: var(--gn-shadow-sm);
}
/* untuk video youtube */
.about-video iframe{
  width: 100%;
  height: 100%;
  max-height: 400px;
  border-radius: 24px;
  display:block;
  border:0;
  box-shadow: var(--gn-shadow-sm);
}
.about-visual-inner {
  text-align: center;
  z-index: 0;
  position: absolute;
  inset: auto 0 0;
}
.about-visual {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.about-video video {
  width: 100%;
  height: 100%;
  max-height: 400px;
  border-radius: 24px;
  display: block;
  border: 0;
  box-shadow: var(--gn-shadow-sm);
}
.arabic-big {
  font-size: 5rem;
  color: rgba(167,139,250,0.34);
  line-height: 1.4;
  direction: rtl;
  margin-bottom: 20px;
}
.about-visual-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 70%, rgba(124,58,237,0.35), transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(167,139,250,0.18), transparent 40%);
}
.about-floater {
  position: absolute;
  background: white;
  border-radius: 16px;
  padding: 14px 20px;
  box-shadow: var(--gn-shadow-md);
  display: flex; gap: 12px; align-items: center;
  z-index: 3;
}
.about-floater.f1 { bottom: -20px; left: -30px; }
.about-floater.f2 { top: 60px; right: -30px; }
.floater-icon { font-size: 1.5rem; }
.floater-text { display: flex; flex-direction: column; }
.floater-text strong { font-size: 0.9rem; color: #0f0a1a; }
.floater-text span { font-size: 0.75rem; color: #8A9BA8; }

@media (max-width: 1024px){
  .section{
    padding: var(--gn-section-py) var(--gn-gutter);
  }
  .about-grid{
    grid-template-columns:1fr;
    gap:40px;
  }
  .about-right{
    display:none;
  }
}