/*
Theme Name: Online Koçunuz
Theme URI: https://onlinekocunuz.com
Author: Online Koçunuz
Author URI: https://onlinekocunuz.com
Description: Online Koçunuz YKS/LGS/KPSS birebir online koçluk platformunun resmî FSE blok teması. Tasarım sistemi (Plus Jakarta Sans + JetBrains Mono, Orbit Mavi + Ateşleme Lime) ve hareket katmanı dahildir. Tüm iş mantığı "Online Koçunuz Core" eklentisinde yaşar; bu tema yalnız sunum yapar.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: onlinekocunuz
Tags: full-site-editing, blocks, education, custom-colors, custom-menu
*/

/* =========================================================================
   1. Tasarım sistemi token'ları (kaynak: _ok-shell.css)
   Custom bileşen CSS'i bu değişkenleri kullanır. theme.json preset'leri
   editör/blok tarafı içindir; buradaki :root ise design-system kaynağıdır.
   ========================================================================= */
:root {
  --primary-50:#EEF1FF; --primary-100:#DCE2FF; --primary-200:#B6C1FF; --primary-300:#8898FF;
  --primary-400:#5A72FF; --primary-500:#3B5BFF; --primary-600:#2C49E6; --primary-700:#1E3AE2;
  --primary-800:#1830B2; --primary-900:#122485;
  --accent-100:#F5FCDC; --accent-300:#DDF690; --accent-500:#C6F25A; --accent-700:#7FA61A; --accent-900:#3F5208;
  --ink-900:#0B0F1A; --ink-800:#131826; --ink-700:#1A1F2E; --ink-600:#2A3142; --ink-500:#4B5468;
  --ink-400:#6B7488; --ink-300:#8E97AB; --ink-200:#B7BECC; --ink-100:#CDD2DF; --ink-50:#E6E8EF;
  --ink-25:#F0F1F6; --ink-10:#F6F7FB; --ink-0:#FFFFFF;
  --success-500:#1F9D55; --warning-500:#E59A1F; --danger-500:#D43A4F;
  --subj-mat:#3B5BFF; --subj-fiz:#7C4DFF; --subj-kim:#00A39A; --subj-biy:#1F9D55;
  --subj-tur:#D43A4F; --subj-tar:#B8651B; --subj-cog:#6B7C2F; --subj-ing:#006EB6;

  --bg:var(--ink-10); --surface:var(--ink-0); --border:var(--ink-50); --border-strong:var(--ink-100);
  --fg:var(--ink-700); --fg-strong:var(--ink-900); --fg-muted:var(--ink-500); --fg-subtle:var(--ink-300);
  --link:var(--primary-600); --focus-ring:var(--primary-500);
  --bg-aurora:radial-gradient(120% 80% at 50% 0%, rgba(59,91,255,.10), transparent 60%);

  --font-sans:'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --fs-12:0.75rem; --fs-13:0.8125rem; --fs-14:0.875rem; --fs-15:0.9375rem; --fs-16:1rem;
  --fs-18:1.125rem; --fs-20:1.25rem; --fs-24:1.5rem; --fs-28:1.75rem; --fs-32:2rem;
  --fs-40:2.5rem; --fs-56:3.5rem; --fs-72:4.5rem; --fs-96:6rem;
  --lh-tight:1.1; --lh-snug:1.25; --lh-base:1.5;
  --tracking-tight:-0.02em; --tracking-snug:-0.01em; --tracking-caps:0.08em;
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-full:999px;
  --shadow-soft:0 1px 2px rgba(11,15,26,.04), 0 6px 20px -8px rgba(30,58,226,.10);
  --shadow-lifted:0 12px 32px -8px rgba(11,15,26,.18);
  --shadow-glow:0 0 60px -10px rgba(91,114,255,.6);
  --ease-out:cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:360ms;
}

::selection { background:var(--primary-100); color:var(--primary-900); }

/* =========================================================================
   2. Tipografi yardımcıları (design-system sınıfları)
   ========================================================================= */
.display-lg { font-size:var(--fs-72); line-height:var(--lh-tight); letter-spacing:var(--tracking-tight); font-weight:800; }
.display-md { font-size:var(--fs-56); line-height:var(--lh-tight); letter-spacing:var(--tracking-tight); font-weight:800; }
.display-sm { font-size:var(--fs-40); line-height:var(--lh-tight); letter-spacing:var(--tracking-tight); font-weight:700; }
.lead { font-size:var(--fs-18); line-height:var(--lh-base); color:var(--fg-muted); }
.eyebrow { font-size:var(--fs-12); font-weight:600; text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--primary-700); }
.eyebrow-light { font-size:var(--fs-12); font-weight:600; text-transform:uppercase; letter-spacing:var(--tracking-caps); color:#C6F25A; }
.num { font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
.font-mono { font-family:var(--font-mono); }

/* =========================================================================
   3. Butonlar (design-system; native wp-block-button ile birlikte kullanılır)
   ========================================================================= */
.btn { display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px;
       border-radius:10px; font-family:var(--font-sans); font-size:15px; font-weight:600;
       border:1px solid transparent; cursor:pointer; line-height:1; text-decoration:none;
       transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:var(--primary-500); color:#fff; }
.btn-primary:hover { background:var(--primary-600); }
.btn-secondary { background:#fff; color:var(--ink-700); border-color:var(--ink-100); }
.btn-secondary:hover { background:var(--ink-10); }
.btn-accent { background:var(--accent-500); color:var(--ink-900); }
.btn-accent:hover { background:var(--accent-300); }
.btn-dark { background:var(--ink-900); color:#fff; }
.btn-ghost-dark { background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.16); }
.btn-ghost-dark:hover { background:rgba(255,255,255,.14); }
.btn-lg { height:52px; padding:0 24px; font-size:16px; border-radius:12px; }
.btn-sm { height:32px; padding:0 12px; font-size:14px; border-radius:8px; }

/* =========================================================================
   4. Konteynerler (theme.json layout ile uyumlu yardımcı genişlikler)
   ========================================================================= */
.container { max-width:1200px; margin:0 auto; padding:0 24px; }
.container-wide { max-width:1320px; margin:0 auto; padding:0 24px; }
.container-narrow { max-width:840px; margin:0 auto; padding:0 24px; }

/* =========================================================================
   5. Hareket / görsel yardımcılar (kaynak: _ok-shell.css)
   ========================================================================= */
@keyframes orbit-rotate { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes orbit-rotate-rev { from{transform:rotate(360deg)} to{transform:rotate(0deg)} }
@keyframes twinkle { 0%,100%{opacity:.2} 50%{opacity:1} }
@keyframes float-up { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes float-up-sm { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes rotate-360 { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes pulse-glow { 0%,100%{opacity:.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.05)} }
@keyframes fade-in-up { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

@property --angle { syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes border-spin { to { --angle:360deg; } }

/* Açık hero (SEO sayfaları için ortak) */
.page-hero {
  position:relative;
  padding:72px 24px 56px;
  background:linear-gradient(180deg, #F6F8FF 0%, #fff 100%);
  border-bottom:1px solid var(--border);
  overflow:hidden;
}
.page-hero::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 50% at 50% 0%, rgba(59,91,255,.08), transparent 70%);
}
.page-hero .container, .page-hero .container-narrow, .page-hero .container-wide { position:relative; z-index:1; }

/* Koyu hero (geri sayım sayfaları) */
.dark-hero { position:relative; background:linear-gradient(160deg,#0B0F1A 0%,#131826 100%); color:#fff; overflow:hidden; }
.dark-hero h1, .dark-hero h2, .dark-hero h3 { color:#fff; }

/* Scroll reveal (IntersectionObserver "in"/"is-visible" sınıfını ekler) */
.reveal, .animate-on-scroll { opacity:0; transform:translateY(16px); transition:opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.reveal.in, .reveal.is-visible, .animate-on-scroll.is-visible { opacity:1; transform:none; }

.grad-text { background:linear-gradient(90deg,#3B5BFF,#7C4DFF,#3B5BFF); background-size:200% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:shimmer 7s linear infinite; }

.hero-orbit { position:absolute; top:-40px; left:50%; transform:translateX(-50%); width:640px; height:640px; max-width:140vw; display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:0; }
.hero-orbit .ring { position:absolute; border-radius:50%; }
.hero-orbit .o1 { width:620px; height:620px; border:1px solid rgba(91,123,255,.10); animation:orbit-rotate 80s linear infinite; }
.hero-orbit .o2 { width:440px; height:440px; border:1px solid rgba(91,123,255,.16); animation:orbit-rotate-rev 55s linear infinite; }
.hero-orbit .o3 { width:280px; height:280px; border:1px solid rgba(91,123,255,.22); animation:orbit-rotate 38s linear infinite; }

.float-chip { position:absolute; z-index:3; display:flex; align-items:center; gap:9px; padding:11px 15px; background:#fff; border:1px solid var(--border); border-radius:13px; box-shadow:0 16px 36px -16px rgba(11,15,26,.24); font-size:12.5px; font-weight:700; color:var(--ink-900); }
.float-chip .tw { width:8px; height:8px; border-radius:50%; animation:twinkle 1.5s ease-in-out infinite; }
@media (max-width:1180px){ .float-chip{ display:none; } }

.glow-card { position:relative; background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; transition:transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), border-color 200ms; }
.glow-card::before { content:""; position:absolute; inset:0; border-radius:16px; opacity:0; transition:opacity 240ms var(--ease-out); background:radial-gradient(130% 70% at 50% -10%, var(--glow,transparent), transparent 62%); pointer-events:none; z-index:0; }
.glow-card:hover { transform:translateY(-4px); box-shadow:0 22px 46px -24px rgba(11,15,26,.2); border-color:transparent; }
.glow-card:hover::before { opacity:1; }
.glow-card > * { position:relative; z-index:1; }

.glow-border { position:relative; border-radius:20px; padding:2px; background:conic-gradient(from var(--angle,0deg), #3B5BFF, #C6F25A, #7C4DFF, #3B5BFF); animation:border-spin 9s linear infinite; }
@supports not (background:conic-gradient(from 0deg, red, blue)) { .glow-border { background:linear-gradient(135deg,#3B5BFF,#C6F25A,#7C4DFF); } }

.hover-lift { transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.hover-lift:hover { transform:translateY(-4px); box-shadow:var(--shadow-lifted); }

/* Breadcrumb */
.crumbs { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--fg-muted); margin-bottom:14px; }
.crumbs a { color:var(--fg-muted); }
.crumbs a:hover { color:var(--primary-700); }
.crumbs .sep { opacity:.4; }
.crumbs .current { color:var(--ink-900); font-weight:600; }

/* Kart */
.card { background:#fff; border:1px solid var(--border); border-radius:14px; padding:24px; transition:box-shadow 200ms var(--ease-out), transform 200ms var(--ease-out); }
.card:hover { box-shadow:var(--shadow-lifted); transform:translateY(-4px); }

/* SSS akordeon (native <details>) */
.faq-item { border-bottom:1px solid var(--border); }
.faq-item summary { padding:18px 0; cursor:pointer; font-size:16px; font-weight:600; color:var(--ink-900); display:flex; align-items:center; justify-content:space-between; gap:14px; list-style:none; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; font-size:22px; color:var(--primary-500); font-weight:300; transition:transform 200ms; }
.faq-item[open] summary::after { content:"−"; }
.faq-item .faq-body { padding:0 0 18px; color:var(--fg-muted); font-size:14px; line-height:1.65; }

/* =========================================================================
   6. FSE düzeltmeleri ve eşit kartlar
   ========================================================================= */
.wp-site-blocks > footer { margin-block-start:0; }

.equal-cards > .wp-block-column { display:flex; flex-direction:column; flex-grow:0; }
.equal-cards > .wp-block-column > .wp-block-group { display:flex; flex-direction:column; flex-grow:1; }
.equal-cards .cta-bottom { margin-top:auto; justify-content:center; }

/* =========================================================================
   7. Erişilebilirlik: hareket azaltma tercihi (zorunlu)
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}