/* ── 3. ANA BÖLÜMLER & İKİLİ KARTLAR ── */
.oi-main { background: var(--bg); }
.oi-section { padding: 100px 0; }
.oi-section--dark { background: var(--text); }
.oi-section--cream { background: var(--bg2); }
.oi-section-inner { max-width: 1280px; margin: 0 auto; padding: 0 5vw; }

.oi-section-header { text-align: center; max-width: 680px; margin: 0 auto 70px; }
.oi-section-header h2 {
  font-family: 'Playfair Display', serif; font-size: clamp(2.4rem, 4vw, 3.5rem);
  font-weight: 300; color: var(--text); margin: 12px 0 20px; line-height: 1.15;
}
.oi-section-header h2 em { color: var(--teal); font-style: italic; }
.oi-sec-sub { font-family: 'DM Sans', sans-serif; font-size: 1.05rem; color: var(--text-2); line-height: 1.8; font-weight: 300; }

/* Kart Duo (Sol Resim - Sağ Metin veya Tam Tersi) */
.oi-card-duo { display: flex; align-items: center; gap: 70px; margin-bottom: 80px; }
.oi-card-duo--reverse { flex-direction: row-reverse; }
.oi-card-duo:last-child { margin-bottom: 0; }
.oi-card-visual {
  flex: 1; position: relative; height: 480px; border-radius: 24px;
  overflow: hidden; box-shadow: var(--shadow-md);
}
.oi-card-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
.oi-card-visual:hover img { transform: scale(1.05); }
.oi-card-badge {
  position: absolute; bottom: 20px; left: 20px; background: var(--teal); color: #fff;
  font-family: 'Space Mono', monospace; font-size: 0.68rem; letter-spacing: 0.1em;
  padding: 8px 16px; border-radius: 30px; text-transform: uppercase; backdrop-filter: blur(8px);
}
.oi-card-text { flex: 1; }
.oi-card-text h3 {
  font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 300; color: var(--text); margin: 12px 0 22px; line-height: 1.2;
}
.oi-card-text h3 em { color: var(--teal); font-style: italic; }
.oi-card-text p {
  font-family: 'DM Sans', sans-serif; font-size: 1.02rem; color: var(--text-2);
  line-height: 1.85; font-weight: 300; margin-bottom: 28px;
}

/* Sınav Grid (EJU/JLPT kutucukları) */
.oi-exam-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0 30px; }
.oi-exam-item {
  display: flex; align-items: flex-start; gap: 14px; background: var(--surface);
  padding: 18px 16px; border-radius: 14px; border: 1px solid var(--border);
  transition: border-color 0.3s, transform 0.3s;
}
.oi-exam-item:hover { border-color: var(--teal); transform: translateY(-3px); }
.oi-exam-icon { font-size: 1.6rem; flex-shrink: 0; line-height: 1; margin-top: 2px; }
.oi-exam-item strong {
  font-family: 'Space Mono', monospace; font-size: 0.72rem; letter-spacing: 0.08em;
  color: var(--text); text-transform: uppercase; display: block; margin-bottom: 4px;
}
.oi-exam-item p { font-size: 0.88rem !important; color: var(--muted) !important; line-height: 1.5 !important; margin: 0 !important; }