/* ============================================================
   Maarif Nedir? — SEO bilgi sayfası stilleri
   Tüm kurallar .okt-maarif-nedir altına scope'lu (token'lar global).
   @keyframes global (scope'lanamaz). Token yeniden tanımlanmaz.
   ============================================================ */

/* ---- motion (global keyframes) ---- */
@keyframes mn-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes mn-orbit{to{transform:rotate(360deg)}}
@keyframes mn-twinkle{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

/* ---- reveal ---- */
.okt-maarif-nedir .reveal{opacity:0;transform:translateY(16px);transition:opacity 600ms var(--ease-out),transform 600ms var(--ease-out)}
.okt-maarif-nedir .reveal.in{opacity:1;transform:none}

/* ============================================================
   HERO
   ============================================================ */
.okt-maarif-nedir .mn-hero{position:relative;overflow:hidden;padding:64px 24px 44px;background:radial-gradient(60% 60% at 50% 6%,rgba(229,154,31,.10),transparent 64%),linear-gradient(#FDF8EF,#fff);border-bottom:1px solid var(--border)}
.okt-maarif-nedir .mn-hero .container{position:relative;z-index:3}

/* dekoratif orbit halkaları */
.okt-maarif-nedir .mn-orbit{position:absolute;top:-180px;right:-120px;width:520px;height:520px;pointer-events:none;z-index:1}
.okt-maarif-nedir .mn-orbit .ring{position:absolute;border-radius:50%;border:1px dashed rgba(229,154,31,.20);inset:0;animation:mn-orbit 90s linear infinite}
.okt-maarif-nedir .mn-orbit .r2{inset:70px;border-color:rgba(229,154,31,.14);animation-duration:120s;animation-direction:reverse}
.okt-maarif-nedir .mn-orbit .r3{inset:150px;border-color:rgba(59,91,255,.12);animation-duration:150s}

/* yüzen çipler */
.okt-maarif-nedir .mn-chip{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:7px;padding:8px 13px;background:#fff;border:1px solid var(--border);border-radius:999px;font-size:12.5px;font-weight:700;color:var(--ink-900);box-shadow:0 8px 24px rgba(15,23,42,.08);animation:mn-float 8s ease-in-out infinite}
.okt-maarif-nedir .mn-chip .tw{width:8px;height:8px;border-radius:50%;animation:mn-twinkle 2.6s ease-in-out infinite}

.okt-maarif-nedir .mn-crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--fg-muted);margin:0 0 16px}
.okt-maarif-nedir .mn-crumbs a{color:var(--fg-muted);text-decoration:none}
.okt-maarif-nedir .mn-crumbs a:hover{color:#E59A1F}

.okt-maarif-nedir .mn-pill{display:inline-block;padding:6px 14px;background:#FDF4E2;color:#A36C11;border-radius:999px;font-size:12.5px;font-weight:700;letter-spacing:.02em}
.okt-maarif-nedir .mn-h1{margin:14px 0 12px;font-size:clamp(34px,6vw,56px);font-weight:800;line-height:1.04;letter-spacing:-0.03em;color:var(--ink-900);max-width:780px}
.okt-maarif-nedir .mn-lead{max-width:660px;margin:0;font-size:clamp(15.5px,2vw,18px);line-height:1.6;color:var(--ink-700)}

/* ============================================================
   İÇERİK + SIDEBAR — .dt-grid
   ============================================================ */
.okt-maarif-nedir .mn-content{padding:40px 24px 80px;background:#fff}
.okt-maarif-nedir .dt-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:36px;align-items:start}
.okt-maarif-nedir .dt-side{position:sticky;top:88px}

/* gövde tipografisi */
.okt-maarif-nedir .dt-body h2{color:var(--ink-900);font-size:24px;font-weight:800;letter-spacing:-0.01em;margin:36px 0 12px}
.okt-maarif-nedir .dt-body h2:first-child{margin-top:0}
.okt-maarif-nedir .dt-body p{font-size:15.5px;color:var(--ink-700);line-height:1.78;margin:0 0 14px}
.okt-maarif-nedir .dt-body ul{padding-left:18px;font-size:15px;color:var(--ink-700);line-height:1.85;margin:0 0 16px}
.okt-maarif-nedir .dt-body strong{color:var(--ink-900)}
.okt-maarif-nedir .dt-body a{color:#E59A1F;text-decoration:underline;font-weight:600}
.okt-maarif-nedir .dt-body a:hover{color:#C07F12}

/* cevap kutusu */
.okt-maarif-nedir .dt-answer{padding:20px 22px;background:#FDF4E2;border-left:3px solid #E59A1F;border-radius:10px;margin:0 0 14px}
.okt-maarif-nedir .dt-answer p{margin:0;font-size:16px;color:var(--ink-900);line-height:1.75}

/* SSS */
.okt-maarif-nedir .dt-faq details{border-bottom:1px solid var(--border);padding:15px 0}
.okt-maarif-nedir .dt-faq summary{font-size:15.5px;font-weight:700;color:var(--ink-900);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
.okt-maarif-nedir .dt-faq summary::-webkit-details-marker{display:none}
.okt-maarif-nedir .dt-faq summary::after{content:'+';font-size:23px;font-weight:300;color:var(--fg-muted);flex:none}
.okt-maarif-nedir .dt-faq details[open] summary::after{content:'−'}
.okt-maarif-nedir .dt-faq details p{margin:11px 0 0;font-size:14.5px;line-height:1.75;color:var(--ink-700)}
.okt-maarif-nedir .dt-faq details a{color:#E59A1F;font-weight:600;text-decoration:underline}

/* sidebar kartları */
.okt-maarif-nedir .dt-side-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:14px}
.okt-maarif-nedir .dt-side-card h3{font-size:15px;color:var(--ink-900);margin:0 0 8px;font-weight:800}
.okt-maarif-nedir .dt-side-card .mn-links{margin:0;font-size:13.5px;line-height:1.8}
.okt-maarif-nedir .dt-side-card .mn-links a{color:#E59A1F;font-weight:600;text-decoration:none}
.okt-maarif-nedir .dt-side-card .mn-links a:hover{text-decoration:underline}
.okt-maarif-nedir .dt-side-card.dark{background:#0B0F1A;color:#fff;border:0}
.okt-maarif-nedir .dt-side-card.dark h3{color:#fff}
.okt-maarif-nedir .dt-side-card.dark p{color:rgba(255,255,255,.78);font-size:13.5px;line-height:1.65;margin:0}
.okt-maarif-nedir .dt-side-card .btn{margin-top:12px}
.okt-maarif-nedir .dt-side-card .btn-accent{display:inline-block;padding:9px 14px;background:#C6F25A;color:#0B0F1A;border-radius:8px;font-size:13px;font-weight:700;text-decoration:none}
.okt-maarif-nedir .dt-side-card .btn-accent:hover{filter:brightness(.96)}

/* ============================================================
   MOBİL — önce mobil; geniş ekranda iki sütun
   ============================================================ */
@media (max-width:960px){
  .okt-maarif-nedir .dt-grid{grid-template-columns:1fr}
  .okt-maarif-nedir .dt-side{position:relative;top:0}
  .okt-maarif-nedir .hide-sm{display:none}
}

@media (prefers-reduced-motion:reduce){
  .okt-maarif-nedir .mn-chip,
  .okt-maarif-nedir .mn-orbit .ring,
  .okt-maarif-nedir .mn-chip .tw{animation:none}
}