/* =========================================
   SORBIL.NET — Ortak Stil Dosyası
   ========================================= */

   @import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Nunito:wght@400;500;600;700;800&display=swap');

   /* ── DEĞİŞKENLER ── */
   :root {
     --bg:        #070b14;
     --surface:   #0d1220;
     --surface2:  #111827;
     --border:    rgba(255,255,255,0.07);
     --border2:   rgba(255,255,255,0.13);
   
     --fen:       #38bdf8;
     --fen-g:     rgba(56,189,248,0.15);
     --mat:       #fb923c;
     --mat-g:     rgba(251,146,60,0.15);
   
     --c5:        #a78bfa;
     --c6:        #34d399;
     --c7:        #fb923c;
     --c8:        #f472b6;
   
     --text:      #e2e8f6;
     --muted:     rgba(226,232,246,0.45);
     --white:     #ffffff;
   
     --success:   #4ade80;
     --error:     #f87171;
   }
   
   /* ── SIFIRLA ── */
   *, *::before, *::after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   
   html { scroll-behavior: smooth; }
   
   body {
     background: var(--bg);
     color: var(--text);
     font-family: 'Nunito', sans-serif;
     min-height: 100vh;
     overflow-x: hidden;
   }
   
   /* ── ARKA PLAN CANVAS ── */
   #bg-canvas {
     position: fixed;
     inset: 0;
     z-index: 0;
     pointer-events: none;
   }
   
   /* ── LAYOUT ── */
   .wrap {
     position: relative;
     z-index: 1;
     max-width: 1100px;
     margin: 0 auto;
     padding: 0 20px;
   }
   
   /* ── NAV ── */

   nav {
     position: sticky;
     top: 0;
     z-index: 50;
     background: rgba(7,11,20,0.88);
     backdrop-filter: blur(16px);
     border-bottom: 1px solid var(--border);
   }
   
   .nav-inner {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 14px 20px;
     max-width: 1100px;
     margin: 0 auto;
   }
   
   .logo {
     font-family: 'Baloo 2', cursive;
     font-weight: 800;
     font-size: 1.6rem;
     text-decoration: none;
     background: linear-gradient(120deg, var(--fen), #818cf8, var(--mat));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     flex-shrink: 0;
     display: flex;
     align-items: center;
     gap: 8px;
   }
   
   .nav-links {
     display: flex;
     gap: 6px;
     margin-left: auto;
     flex-wrap: wrap;
   }
   
   .nav-pill {
     font-size: 0.78rem;
     font-weight: 700;
     padding: 5px 14px;
     border-radius: 50px;
     border: 1px solid var(--border2);
     background: transparent;
     color: var(--muted);
     cursor: pointer;
     text-decoration: none;
     transition: all 0.2s;
     white-space: nowrap;
   }
   
   .nav-pill:hover { color: var(--white); border-color: rgba(255,255,255,0.3); }
   .nav-pill.active { background: rgba(56,189,248,0.12); color: var(--fen); border-color: rgba(56,189,248,0.35); }
   
   /* ── BREADCRUMB ── */
   .breadcrumb {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 0.8rem;
     color: var(--muted);
     margin-left: 8px;
   }
   
   .breadcrumb a { color: var(--muted); text-decoration: none; transition: color 0.2s; }
   .breadcrumb a:hover { color: var(--text); }
   .breadcrumb .bc-sep { opacity: 0.4; }
   
   /* ── BÖLÜM BAŞLIĞI ── */
   .section-title {
     font-family: 'Baloo 2', cursive;
     font-weight: 800;
     font-size: 1.4rem;
     margin-bottom: 4px;
   }
   
   .section-sub {
     color: var(--muted);
     font-size: 0.85rem;
     margin-bottom: 24px;
   }
   
   /* ── DERS ETİKETİ ── */
   .ders-tag {
     font-size: 0.68rem;
     font-weight: 800;
     padding: 3px 10px;
     border-radius: 50px;
     text-transform: uppercase;
     letter-spacing: 0.06em;
   }
   
   .ders-tag.fen { background: var(--fen-g); color: var(--fen); }
   .ders-tag.mat { background: var(--mat-g); color: var(--mat); }
   
   /* ── BADGE ── */
   .badge {
     font-size: 0.65rem;
     font-weight: 800;
     padding: 2px 8px;
     border-radius: 50px;
     text-transform: uppercase;
     letter-spacing: 0.06em;
   }
   
   .badge-fen { background: rgba(56,189,248,0.15);  color: var(--fen); }
   .badge-mat { background: rgba(251,146,60,0.15);  color: var(--mat); }
   .badge-5   { background: rgba(167,139,250,0.15); color: var(--c5); }
   .badge-6   { background: rgba(52,211,153,0.15);  color: var(--c6); }
   .badge-7   { background: rgba(251,146,60,0.15);  color: var(--c7); }
   .badge-8   { background: rgba(244,114,182,0.15); color: var(--c8); }
   
   /* ── BUTONLAR ── */
   .btn {
     font-family: 'Nunito', sans-serif;
     font-weight: 700;
     font-size: 0.9rem;
     padding: 12px 28px;
     border-radius: 50px;
     border: none;
     cursor: pointer;
     transition: all 0.2s;
     letter-spacing: 0.05em;
     text-decoration: none;
     display: inline-block;
   }
   
   .btn-primary {
     background: linear-gradient(135deg, var(--fen), #818cf8);
     color: white;
     box-shadow: 0 4px 20px rgba(56,189,248,0.25);
   }
   .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(56,189,248,0.35); }
   
   .btn-secondary {
     background: rgba(255,255,255,0.07);
     color: var(--text);
     border: 1px solid var(--border2);
   }
   .btn-secondary:hover { background: rgba(255,255,255,0.12); transform: translateY(-2px); }
   
   /* ── AYIRıCı ── */
   .divider {
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--border2), transparent);
     margin: 0 0 48px;
   }
   
   /* ── FOOTER ── */
   footer {
     border-top: 1px solid var(--border);
     padding: 36px 20px;
     text-align: center;
     color: var(--muted);
     font-size: 0.82rem;
     position: relative;
     z-index: 1;
   }
   
   .footer-logo {
     font-family: 'Baloo 2', cursive;
     font-weight: 800;
     font-size: 1.3rem;
     background: linear-gradient(120deg, var(--fen), #818cf8, var(--mat));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     margin-bottom: 8px;
     display: block;
   }
   
   /* ── RESPONSIVE ── */
   @media (max-width: 768px) {
     .nav-links { display: none; }
     .wrap { padding: 0 14px; }
   }