/* ============================================================================
   STYLES.CSS  —  ALPAGO TRADİNG EĞİTİM PANELİ
   Tüm görsel stiller burada tanımlanır. Bölümler halinde organize edilmiştir.
============================================================================ */

  :root {
    --bg: #0A0B0D;
    --card: #141619;
    --card2: #1A1D22;
    --border: #1F2226;
    --border2: #2A2F36;
    --accent: #00D68F;
    --accent-dim: rgba(0,214,143,0.12);
    --accent-dim2: rgba(0,214,143,0.06);
    --loss: #FF4D4D;
    --loss-dim: rgba(255,77,77,0.12);
    --gold: #E8B931;
    --gold-dim: rgba(232,185,49,0.12);
    --text: #EDEFF2;
    --text2: #8B919B;
    --text3: #5A6170;
    --radius: 12px;
    --radius-sm: 8px;
    --sidebar-w: 220px;
    --nav-h: 64px;
    --transition: 0.18s ease;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html { font-size: 15px; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
  }

  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: var(--bg); }
  ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--text3); }

  /* ─── GIRIŞ EKRANI & GALAKSİ EFEKTİ ─── */
  /* Giriş ekranı da PWA standalone modda status bar/çentiğin ARKASINA kadar
     uzanıyor (viewport-fit=cover) — panelin üst çubuğunda olduğu gibi burada
     da güvenli alan payı bırakılır. Normal Safari sekmesinde env(...) 0'a
     düşer, yani mevcut görünüm değişmez. */
  #giris-ekrani {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh;
    padding: calc(24px + env(safe-area-inset-top, 0px))
             calc(24px + env(safe-area-inset-right, 0px))
             calc(24px + env(safe-area-inset-bottom, 0px))
             calc(24px + env(safe-area-inset-left, 0px));
    background: radial-gradient(circle at 50% 50%, #0a1122 0%, #03050a 100%);
    position: relative;
    overflow: hidden;
  }
  
  #bg-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
  }

  .giris-kutu {
    background: rgba(20, 22, 25, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 48px 40px 32px;
    width: 100%;
    max-width: 420px;
    position: relative;
    z-index: 10;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
  }

  .giris-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
  .giris-logo-icon { width: 40px; height: 40px; background: transparent; border: none; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .giris-logo-icon img { width: 100%; height: 100%; display: block; object-fit: contain; }
  .giris-marka { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.3px; }
  .giris-slogan { font-size: 0.78rem; color: var(--text3); margin-bottom: 4px; }
  .giris-mentor { font-size: 0.78rem; color: var(--text3); margin-bottom: 32px; }

  .giris-baslik { font-size: 1.4rem; font-weight: 700; margin-bottom: 6px; }
  .giris-alt { font-size: 0.85rem; color: var(--text2); margin-bottom: 28px; }

  .form-grup { margin-bottom: 16px; }
  .form-etiket { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text2); margin-bottom: 6px; letter-spacing: 0.5px; text-transform: uppercase; }
  .form-input { width: 100%; background: var(--bg); border: 1px solid var(--border2); border-radius: var(--radius-sm); color: var(--text); font-size: 1.05rem; font-family: 'Courier New', monospace; font-weight: 600; padding: 13px 16px; outline: none; transition: border-color var(--transition), box-shadow var(--transition); letter-spacing: 1px; }
  .form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,214,143,0.12); }
  .form-input.hata { border-color: var(--loss); box-shadow: 0 0 0 3px rgba(255,77,77,0.12); animation: titreme 0.4s ease; }

  @keyframes titreme { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }

  .giris-btn { width: 100%; background: var(--accent); color: #051A10; border: none; border-radius: var(--radius-sm); padding: 14px; font-size: 0.95rem; font-weight: 700; cursor: pointer; letter-spacing: 0.3px; transition: opacity var(--transition), transform var(--transition); margin-top: 8px; }
  .giris-btn:hover { opacity: 0.88; transform: translateY(-1px); }
  .giris-btn:active { transform: translateY(0); }

  .hata-mesaj { background: var(--loss-dim); border: 1px solid rgba(255,77,77,0.3); border-radius: var(--radius-sm); color: var(--loss); font-size: 0.82rem; padding: 10px 14px; margin-top: 12px; display: none; }
  .hata-mesaj.goster { display: block; }

  .wa-btn-kucuk { display: inline-flex; align-items: center; gap: 6px; background: rgba(37,211,102,0.1); border: 1px solid rgba(37,211,102,0.3); color: #25D366; border-radius: var(--radius-sm); padding: 10px 14px; font-size: 0.85rem; font-weight: 600; cursor: pointer; text-decoration: none; margin-top: 10px; transition: background var(--transition); width: 100%; justify-content: center; }
  .wa-btn-kucuk:hover { background: rgba(37,211,102,0.18); }

  .yasal-uyari { font-size: clamp(0.65rem, 0.5rem + 0.3vw, 0.9rem); color: var(--text3); text-align: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--border); line-height: 1.5; width: 100%; }

  .pwa-kutu:empty { display: none; }
  .pwa-kart { margin-top: 16px; padding: 14px 14px 12px; background: var(--gold-dim); border: 1px solid rgba(232,185,49,0.28); border-radius: var(--radius-sm); text-align: left; }
  .pwa-kart-bas { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .pwa-kart-baslik { font-size: 0.86rem; font-weight: 700; color: var(--gold); line-height: 1.35; }
  .pwa-kart-alt { font-size: 0.78rem; color: var(--text2); margin-top: 8px; line-height: 1.55; }
  .pwa-kart-alt ol { margin: 6px 0 0 18px; padding: 0; }
  .pwa-kart-alt li { margin: 2px 0; }
  .pwa-kapat { background: transparent; border: none; color: var(--text3); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 2px; }
  .pwa-kapat:hover { color: var(--text); }
  .pwa-ekle-btn { margin-top: 10px; width: 100%; background: var(--gold); color: #111; border: none; border-radius: var(--radius-sm); padding: 9px 12px; font-size: 0.82rem; font-weight: 800; cursor: pointer; font-family: inherit; }

  /* ─── ANA PANEL ─── */

  /* ─── ANA PANEL ─── */
  #panel { display: none; min-height: 100vh; }
  #panel.aktif { display: flex; }

  .sidebar { width: var(--sidebar-w); min-height: 100vh; background: var(--card); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 100; transition: transform var(--transition); }
  .sidebar-logo { padding: 20px 20px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
  .sidebar-logo-icon { width: 32px; height: 32px; background: transparent; border: none; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .sidebar-logo-icon img { width: 100%; height: 100%; display: block; object-fit: contain; }
  .sidebar-marka { font-size: 0.88rem; font-weight: 700; letter-spacing: -0.2px; }

  .sidebar-kullanici { padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--accent-dim2); }
  .sidebar-kullanici-ad { font-size: 0.85rem; font-weight: 700; color: var(--text); margin-bottom: 2px; }
  .sidebar-kullanici-hafta { font-size: 0.72rem; color: var(--text3); }

  .sidebar-nav { flex: 1; padding: 10px 0; overflow-y: auto; }
  .nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: var(--text2); cursor: pointer; border-radius: 0; font-size: 0.88rem; font-weight: 500; transition: background var(--transition), color var(--transition); border-left: 3px solid transparent; user-select: none; position: relative; }
  .nav-item:hover { background: var(--card2); color: var(--text); }
  .nav-item.aktif { background: var(--accent-dim2); color: var(--accent); border-left-color: var(--accent); }
  .nav-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--gold); filter: drop-shadow(0 0 5px rgba(232,185,49,0.55)); }
  .nav-item:hover svg, .nav-item.aktif svg { color: var(--gold); }

  .sidebar-cikis { padding: 12px 16px; border-top: 1px solid var(--border); }
  .cikis-btn { width: 100%; background: transparent; border: 1px solid var(--border2); border-radius: var(--radius-sm); color: var(--text3); font-size: 0.8rem; padding: 8px 12px; cursor: pointer; transition: all var(--transition); display: flex; align-items: center; justify-content: center; gap: 6px; }
  .cikis-btn:hover { border-color: var(--loss); color: var(--loss); background: var(--loss-dim); }

  .icerik { margin-left: var(--sidebar-w); flex: 1; min-height: 100vh; width: calc(100% - var(--sidebar-w)); max-width: none; box-sizing: border-box; padding: 28px 32px 32px; display: flex; flex-direction: column; }
  .icerik-alani-ic { flex: 1; width: 100%; }
  .sayfa-baslik { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 4px; }
  .sayfa-alt { font-size: 0.83rem; color: var(--text2); margin-bottom: 28px; }

  .kart { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; transition: border-color var(--transition), transform var(--transition); }
  .kart:hover { border-color: var(--border2); }
  .kart-grid { display: grid; gap: 16px; }
  .kart-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .kart-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .kart-grid-4 { grid-template-columns: repeat(4, 1fr); }

  .stat-kart { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; }
  .stat-etiket { font-size: 0.72rem; color: var(--text3); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 6px; }
  .stat-deger { font-size: 1.5rem; font-weight: 800; letter-spacing: -1px; }
  .stat-alt { font-size: 0.75rem; color: var(--text3); margin-top: 4px; }
  .stat-deger.yesil { color: var(--accent); }
  .stat-deger.kirmizi { color: var(--loss); }
  .stat-deger.altin { color: var(--gold); }

  .ilerleme-cubugu { height: 6px; background: var(--border2); border-radius: 3px; overflow: hidden; }
  .ilerleme-dolgu { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.6s ease; }
  .ilerleme-dolgu.altin { background: var(--gold); }

  .bolum-baslik { font-size: 0.72rem; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; margin-top: 28px; }
  .bolum-baslik:first-child { margin-top: 0; }

  .rozet { display: inline-flex; align-items: center; font-size: 0.65rem; font-weight: 700; padding: 2px 7px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
  .rozet-yeni { background: var(--accent-dim); color: var(--accent); border: 1px solid rgba(0,214,143,0.25); }
  .rozet-tamamlandi { background: rgba(0,214,143,0.08); color: var(--accent); }
  .rozet-bekliyor { background: var(--gold-dim); color: var(--gold); }

  .video-satir { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); cursor: pointer; transition: background var(--transition); border-radius: var(--radius-sm); padding: 10px 12px; margin: 0 -12px; }
  .video-satir:last-child { border-bottom: none; }
  .video-satir:hover { background: var(--card2); }
  .video-satir.izlendi .video-baslik { color: var(--text2); }

  .video-thumb { width: 80px; height: 46px; background: var(--bg); border-radius: 6px; flex-shrink: 0; overflow: hidden; position: relative; border: 1px solid var(--border); }
  .video-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .video-thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1A1D22, #0F1114); }
  .video-thumb-placeholder svg { color: var(--text3); opacity: 0.6; }
  .video-play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.3); opacity: 0; transition: opacity var(--transition); }
  .video-satir:hover .video-play-overlay { opacity: 1; }

  .video-bilgi { flex: 1; min-width: 0; }
  .video-baslik { font-size: 0.85rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
  .video-meta { font-size: 0.72rem; color: var(--text3); display: flex; gap: 8px; align-items: center; }

  .izlendi-btn { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border2); background: transparent; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all var(--transition); color: transparent; }
  .izlendi-btn.izlendi { background: var(--accent); border-color: var(--accent); color: #051A10; }
  .izlendi-btn:hover { border-color: var(--accent); }

  .akordion-item { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; overflow: hidden; }
  .akordion-baslik { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; cursor: pointer; background: var(--card); transition: background var(--transition); user-select: none; }
  .akordion-baslik:hover { background: var(--card2); }
  .akordion-sol { display: flex; align-items: center; gap: 12px; }
  .akordion-no { width: 28px; height: 28px; background: var(--accent-dim); border: 1px solid rgba(0,214,143,0.2); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: var(--accent); flex-shrink: 0; }
  .akordion-adi { font-size: 0.9rem; font-weight: 600; margin-bottom: 2px; }
  .akordion-meta { font-size: 0.72rem; color: var(--text3); }
  .akordion-ok { transition: transform 0.25s ease; color: var(--text3); }
  .akordion-item.acik .akordion-ok { transform: rotate(180deg); }
  .akordion-icerik { display: none; background: var(--bg); border-top: 1px solid var(--border); padding: 12px 18px; }
  .akordion-item.acik .akordion-icerik { display: block; }

  .psi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
  .psi-kart { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; cursor: pointer; transition: all var(--transition); }
  .psi-kart:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0,214,143,0.08); }
  .psi-ikon { font-size: 1.4rem; margin-bottom: 8px; width: 36px; height: 36px; background: var(--accent-dim); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
  .psi-baslik { font-size: 0.85rem; font-weight: 700; margin-bottom: 4px; }
  .psi-alt { font-size: 0.75rem; color: var(--text3); }

  /* ─── MODAL & MENTÖR KARTI ─── */
  .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
  .modal-overlay.acik { opacity: 1; pointer-events: all; }
  .modal-kutu { background: var(--card); border: 1px solid var(--border2); border-radius: 16px; width: 100%; max-width: 900px; max-height: 90vh; overflow-y: auto; padding: 28px; transform: translateY(16px); transition: transform 0.2s ease; }
  .modal-overlay.acik .modal-kutu { transform: translateY(0); }
  .modal-baslik { font-size: 1.15rem; font-weight: 700; margin-bottom: 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; color: var(--text); }
  .modal-kapat { width: 28px; height: 28px; background: var(--border); border: none; border-radius: 6px; color: var(--text2); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--transition); }
  .modal-kapat:hover { background: var(--loss-dim); color: var(--loss); }
  
  .video-layout { display: flex; gap: 24px; }
  .video-main { flex: 1; min-width: 0; }
  .video-yok { width: 100%; aspect-ratio: 16/9; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text3); font-size: 0.85rem; margin-bottom: 16px; }

  .mentor-side { width: 260px; background: #000; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 20px; flex-shrink: 0; height: fit-content; }
  .mentor-side-ust { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
  .mentor-side img { width: 64px; height: 64px; border-radius: 50%; margin: 0; border: 2px solid var(--accent); object-fit: cover; flex-shrink: 0; }
  .mentor-name { font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: 2px; }
  .mentor-title { font-size: 0.75rem; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0; font-weight: 600; }
  .mentor-desc { font-size: 0.8rem; color: var(--text2); line-height: 1.6; }

  /* ─── TERMINAL BUTONLARI & FOREX FACTORY TARZI HABERLER ─── */
  .broker-kart { display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color var(--transition); }
  .broker-kart:hover { border-color: var(--accent); }

  .takvim-ay-baslik { font-size: 0.92rem; font-weight: 800; letter-spacing: 0.08em; color: var(--gold); margin: 22px 0 10px; text-transform: uppercase; }
  .takvim-ay-baslik:first-child { margin-top: 4px; }

  .haber-ay-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
  .haber-ay-select { width: auto; flex: 1; max-width: 280px; cursor: pointer; }
  .haber-ay-ok { width: 38px; height: 38px; flex-shrink: 0; background: var(--bg); border: 1px solid var(--border2); border-radius: var(--radius-sm); color: var(--text); font-size: 1.2rem; line-height: 1; cursor: pointer; }
  .haber-ay-ok:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
  .haber-ay-ok:disabled { opacity: 0.35; cursor: default; }

  .hafta-kapsayici { margin-bottom: 24px; }
  .hafta-baslik-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #181B20; border: 1px solid var(--border); border-radius: var(--radius-sm) var(--radius-sm) 0 0; font-size: 0.85rem; font-weight: 800; color: var(--text); }
  .hafta-haber-govde { background: var(--card); border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); padding: 8px 16px; }
  .ff-haber-satir { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
  .ff-haber-satir:last-child { border-bottom: none; }
  
  .ff-currency-box { width: 48px; height: 32px; border-radius: 6px; font-weight: 800; font-family: monospace; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; flex-shrink: 0; }
  .curr-USD { background: rgba(0, 214, 143, 0.12); color: var(--accent); border: 1px solid rgba(0, 214, 143, 0.3); }
  .curr-EUR { background: rgba(0, 140, 255, 0.12); color: #00A2FF; border: 1px solid rgba(0, 140, 255, 0.3); }
  .curr-GBP { background: rgba(232, 185, 49, 0.12); color: var(--gold); border: 1px solid rgba(232, 185, 49, 0.3); }

  .ff-impact-tag { font-size: 0.65rem; font-weight: 800; padding: 2px 6px; border-radius: 4px; background: var(--loss-dim); color: var(--loss); border: 1px solid rgba(255,77,77,0.3); text-transform: uppercase; letter-spacing: 0.5px; }
  .ff-pariteler-tag { font-size: 0.72rem; color: var(--text2); background: #0A0B0D; padding: 3px 8px; border-radius: 4px; border: 1px solid var(--border); font-family: monospace; }

  .haber-ff-sayilar { display: grid; grid-template-columns: auto 1fr 1fr 1fr; gap: 8px; margin: 8px 0 0; align-items: end; }
  .haber-ff-hucre { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .haber-ff-etiket { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text3); }
  .haber-ff-deger { font-family: monospace; font-weight: 700; font-size: 0.88rem; color: var(--text2); }
  .haber-ff-deger.haber-ff-dolu { color: var(--accent); }
  .haber-detay-btn { background: rgba(232,185,49,0.12); border: 1px solid rgba(232,185,49,0.35); color: var(--gold); border-radius: 4px; padding: 4px 10px; font-size: 0.72rem; font-weight: 800; cursor: pointer; font-family: inherit; }
  .haber-detay-btn.aktif, .haber-detay-btn:hover { background: rgba(232,185,49,0.22); }
  .haber-detay-govde { margin-top: 10px; font-size: 0.82rem; color: var(--text2); line-height: 1.5; padding: 10px 12px; background: #0A0B0D; border: 1px solid var(--border); border-radius: var(--radius-sm); }
  @media (max-width: 600px) {
    .haber-ff-sayilar { grid-template-columns: 1fr 1fr; }
  }

  .islem-kart { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 8px; display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 16px; align-items: center; cursor: pointer; transition: all var(--transition); }
  .islem-kart:hover { border-color: var(--border2); transform: translateX(3px); }
  .islem-tarih { font-size: 0.75rem; color: var(--text3); white-space: nowrap; }
  .islem-parite { font-size: 0.9rem; font-weight: 700; font-family: 'Courier New', monospace; }
  .islem-setup { font-size: 0.78rem; color: var(--text2); }
  .islem-yon { font-size: 0.72rem; font-weight: 700; padding: 2px 7px; border-radius: 4px; text-transform: uppercase; }
  .islem-yon.long { background: var(--accent-dim); color: var(--accent); }
  .islem-yon.short { background: var(--loss-dim); color: var(--loss); }
  .islem-sonuc { font-size: 1rem; font-weight: 800; font-family: 'Courier New', monospace; text-align: right; }
  .islem-sonuc.pozitif { color: var(--accent); }
  .islem-sonuc.negatif { color: var(--loss); }

  .form-kontrol { width: 100%; background: var(--bg); border: 1px solid var(--border2); border-radius: var(--radius-sm); color: var(--text); font-size: 0.88rem; padding: 9px 12px; outline: none; transition: border-color var(--transition); font-family: inherit; }
  .form-kontrol:focus { border-color: var(--accent); }

  .gonder-btn { background: var(--accent); color: #051A10; border: none; border-radius: var(--radius-sm); padding: 10px 22px; font-size: 0.88rem; font-weight: 700; cursor: pointer; transition: opacity var(--transition); text-align: center; }
  .gonder-btn:hover { opacity: 0.85; }

  .kod-uretici { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
  .uretilen-kod { font-family: 'Courier New', monospace; font-size: 1.2rem; font-weight: 700; color: var(--accent); background: var(--accent-dim2); border: 1px solid rgba(0,214,143,0.2); border-radius: var(--radius-sm); padding: 14px 18px; letter-spacing: 2px; margin: 12px 0; text-align: center; min-height: 50px; display: flex; align-items: center; justify-content: center; }
  .kopyala-btn { background: var(--accent-dim); border: 1px solid rgba(0,214,143,0.25); color: var(--accent); border-radius: var(--radius-sm); padding: 8px 16px; font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: all var(--transition); display: inline-flex; align-items: center; gap: 6px; }
  .kopyala-btn:hover { background: rgba(0,214,143,0.2); }
  .kopyala-btn.kopyalandi { background: var(--accent); color: #051A10; }
  .sil-btn { background: transparent; border: 1px solid var(--loss-dim); color: var(--loss); border-radius: var(--radius-sm); padding: 8px 16px; font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: all var(--transition); display: inline-flex; align-items: center; gap: 6px; }
  .sil-btn:hover { background: var(--loss-dim); }

  .uyari-kutusu { background: var(--gold-dim); border: 1px solid rgba(232,185,49,0.25); border-radius: var(--radius-sm); padding: 12px 16px; font-size: 0.82rem; color: var(--gold); margin-bottom: 16px; line-height: 1.6; }

  .hosgeldin-baslik { font-size: 1.8rem; font-weight: 900; letter-spacing: -1px; line-height: 1.2; margin-bottom: 4px; }
  .hosgeldin-baslik .isim { color: var(--accent); }
  .hafta-rozet { display: inline-flex; align-items: center; gap: 6px; background: var(--gold-dim); border: 1px solid rgba(232,185,49,0.2); color: var(--gold); border-radius: 20px; padding: 4px 12px; font-size: 0.78rem; font-weight: 700; margin-bottom: 20px; }

  .siradaki-kart { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; display: flex; align-items: center; gap: 16px; cursor: pointer; transition: all var(--transition); text-decoration: none; color: inherit; }
  .siradaki-kart:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0,214,143,0.1); }
  .siradaki-ikon { width: 44px; height: 44px; background: var(--accent-dim); border: 1px solid rgba(0,214,143,0.25); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .siradaki-bilgi { flex: 1; }
  .siradaki-etiket { font-size: 0.68rem; color: var(--text3); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 3px; }
  .siradaki-ad { font-size: 0.92rem; font-weight: 700; }
  .siradaki-modül { font-size: 0.75rem; color: var(--text2); margin-top: 2px; }

  .arama-kutusu { width: 100%; background: var(--bg); border: 1px solid var(--border2); border-radius: var(--radius-sm); color: var(--text); font-size: 0.88rem; padding: 10px 14px 10px 36px; outline: none; transition: border-color var(--transition); margin-bottom: 16px; position: relative; display: block; }
  .arama-kutusu:focus { border-color: var(--accent); }
  .arama-wrap { position: relative; }
  .arama-ikon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text3); pointer-events: none; }

  .bos-durum { text-align: center; padding: 40px 20px; color: var(--text3); }
  .bos-durum svg { margin-bottom: 12px; opacity: 0.4; }
  .bos-durum p { font-size: 0.85rem; }

  .toplanti-satir { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgba(232,185,49,0.2); background: rgba(232,185,49,0.05); border-radius: var(--radius-sm); margin-bottom: 8px; }
  .toplanti-satir:last-child { border-bottom: none; }
  .toplanti-baslik-text { font-size: 0.9rem; font-weight: 700; color: var(--gold); }
  .toplanti-zaman { font-size: 0.8rem; color: rgba(232,185,49,0.8); display: flex; align-items: center; gap: 6px; }
  
  .sayfa { display: none; animation: sayfa-gir 0.2s ease; }
  .sayfa.aktif { display: block; }
  @keyframes sayfa-gir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes rozet-yanip { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
  .rozet-yeni { animation: rozet-yanip 2s ease infinite; }

  /* ═══════════════════════════════════════════════════════════════
     MOBİL DÜZEN
     Masaüstünde sidebar hep açık + sabit (220px), içerik yanında akar.
     Telefonda bu tasarım sayfayı zorla masaüstü genişliğinde büyütüp
     tarayıcının uzaklaştırma yapmasına neden oluyordu. Bu blok, dar
     ekranlarda sidebar'ı gizli bir çekmeceye çevirip üstte hamburger
     menülü ince bir çubuk gösterir; içerik her zaman ekran genişliğine
     tam oturur, yatay taşma / zoom-out ihtiyacı kalmaz.
  ═══════════════════════════════════════════════════════════════ */

  .mobil-topbar { display: none; }
  .sidebar-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 150;
  }
  .mobil-sidebar-kapat-btn { display: none; }

  @media (max-width: 900px) {
    :root { --nav-h: 56px; }

    .mobil-topbar {
      display: flex;
      align-items: center;
      gap: 12px;
      position: fixed;
      top: 0; left: 0; right: 0;
      /* PWA standalone modda (ana ekrandan açılınca) iOS artık status bar/
         çentik/Dynamic Island için alan AYIRMIYOR — sayfa tam ekran arkasına
         kadar uzanıyor (viewport-fit=cover). env(safe-area-inset-top) normal
         Safari sekmesinde veya çentiksiz cihazlarda 0'a düşer, bu yüzden bu
         ek pay HER ZAMAN güvenle eklenebilir (mevcut düzeni bozmaz). */
      height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
      padding-top: env(safe-area-inset-top, 0px);
      padding-left: calc(14px + env(safe-area-inset-left, 0px));
      padding-right: calc(14px + env(safe-area-inset-right, 0px));
      background: var(--card);
      border-bottom: 1px solid var(--border);
      z-index: 120;
    }
    .mobil-menu-btn {
      width: 36px; height: 36px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border2);
      background: transparent;
      color: var(--text);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
    }
    .mobil-menu-btn:hover { background: var(--card2); }
    .mobil-topbar-marka { font-size: 0.9rem; font-weight: 700; letter-spacing: -0.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .sidebar {
      transform: translateX(-100%);
      width: min(280px, 82vw);
      box-shadow: 0 0 0 rgba(0,0,0,0);
      z-index: 160;
      padding-top: env(safe-area-inset-top, 0px);
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .sidebar.acik {
      transform: translateX(0);
      box-shadow: 8px 0 32px rgba(0,0,0,.5);
    }
    .sidebar-backdrop.acik { display: block; }
    .mobil-sidebar-kapat-btn {
      display: flex; align-items: center; justify-content: center;
      width: 28px; height: 28px;
      margin-left: auto;
      border-radius: 6px;
      border: 1px solid var(--border2);
      background: transparent;
      color: var(--text2);
      cursor: pointer;
      flex-shrink: 0;
    }

    .icerik {
      margin-left: 0;
      width: 100%;
      max-width: 100%;
      padding: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 16px) 14px 24px;
    }

    .kart-grid-2, .kart-grid-3, .kart-grid-4 { grid-template-columns: 1fr; }

    .modal-overlay { padding: 0; }
    /* Modal mobilde tam ekran açılıyor (height:100%) — bu yüzden kendi
       kenar boşlukları da PWA standalone modda status bar/çentik ve alt
       home-indicator alanıyla çakışmaması için env(safe-area-inset-*)
       ile artırılıyor (bkz. .mobil-topbar üstündeki not, aynı mantık). */
    .modal-kutu {
      max-width: 100%;
      max-height: 100dvh;
      height: 100%;
      border-radius: 0;
      padding: calc(16px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px));
    }

    .video-layout { flex-direction: column; gap: 16px; }
    .mentor-side { width: 100%; }

    .islem-kart { grid-template-columns: 1fr 1fr; row-gap: 6px; }
    .islem-sonuc { text-align: left; grid-column: span 2; }
    .islem-galeri { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  }

  @media (max-width: 480px) {
    .icerik { padding: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 12px) 10px 20px; }
    .kart, .stat-kart { padding: 14px 16px; }
    .hosgeldin-baslik { font-size: 1.4rem; }
  }

  .mentor-etiket { font-size: 0.68rem; font-weight: 700; color: var(--gold); background: var(--gold-dim); border: 1px solid rgba(232,185,49,0.2); border-radius: 4px; padding: 1px 7px; text-transform: uppercase; letter-spacing: 0.5px; margin-left: 8px; }
  .mesaj-kutu { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; font-size: 0.82rem; color: var(--text2); white-space: pre-wrap; line-height: 1.8; font-family: inherit; margin-bottom: 8px; }
  input[type="date"].form-kontrol::-webkit-calendar-picker-indicator, input[type="time"].form-kontrol::-webkit-calendar-picker-indicator { filter: invert(0.8); }


  /* ═══════════════════════════════════════════════════════════════
     ALPAGO VIDEO PLAYER
     Katman sırası (z-index), tümü .video-player-host içinde konumlanır:
       1  iframe (YouTube) — kırpılmadan, tam boy
       10 yt-kalkan (hover engeli)
       20 video-click-blocker (tıklama engeli + idle/buffering kapağı)
       25 video-watermark
       26 video-loading-msg
     video-custom-controls bu katmanların DIŞINDADIR (video-stage'in
     kardeşi), bu yüzden kontrol çubuğu asla bir maskeleme katmanının
     arkasında kalmaz.

     ÖNEMLİ — KÖK NEDEN NOTU: YouTube IFrame API, kendisine verilen id'li
     elementi TAMAMEN <iframe> ile DEĞİŞTİRİR (bkz. Google resmi dok:
     "the API replaces the element specified in the constructor").
     Bu yüzden #yt-video-host, .video-player-host'un KENDİSİ olamaz —
     içinde AYRI bir div olmalı. Aksi halde iframe .video-player-host
     sınıfını hiç taşımaz ve aşağıdaki TÜM maskeleme kuralları (116%
     büyütme, kenar yamaları, idle-cover) sessizce devre dışı kalır;
     YouTube'un kendi logosu / önerilen video ekranı / hover UI'ı
     doğrudan görünür hale gelir. HTML tarafında bu ayrım korunmalı:
       <div class="video-player-host"><div id="yt-video-host"></div>...</div>
  ═══════════════════════════════════════════════════════════════ */

  /* Kontrol çubuğunun üstünde kalan alan.
     Normal (satır içi) modda: sadece video kutusunu sarar.
     Tam ekranda: kalan tüm alanı kaplar ve içindeki 16:9 video kutusunu
     ortasında gösterir (bkz. aşağıdaki tam ekran kuralları). */
  /* Tüm video kutusu için genel güvenlik: -webkit-touch-callout, iOS'ta
     "basılı tut" ile açılan native paylaş/önizleme balonunu (bkz. aşağıdaki
     video-player-host notu) tüm alt öğelere miras yoluyla kapatır. */
  .video-guvenlik-wrap {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  .video-stage {
    position: relative;
    width: 100%;
  }

  /* Gerçek video kutusu — HER ZAMAN 16:9 oranını korur.
     Kenar yamalarının yüzdeleri bu sabit orana göre hesaplanmıştır;
     bu yüzden bu kutu asla farklı bir orana göre esnetilmemeli —
     esnetilirse YouTube kendi siyah bantlarını farklı yerde çizer ve
     yamalarımız yanlış hizaya kayar. */
  .video-player-host {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
    flex-shrink: 0;
    /* iOS'un native "basılı tut" (long-press) davranışı: parmak video/embed
       üzerinde bir an fazla kalırsa, iOS bunu bir LİNK/MEDYA öğesiymiş gibi
       algılayıp kendi sistem seviyesi "Paylaş" kartını (başlık + kanal adı +
       küçük resim + "YouTube" ibaresi) EKRANA GETİREBİLİYOR — bu, altındaki
       pointer-events:none / touch-action:none katmanlarımızdan TAMAMEN
       BAĞIMSIZ çalışan bir WebKit UI özelliğidir (JS ile durdurulamaz).
       -webkit-touch-callout:none bu native paylaşım/önizleme balonunu tümüyle
       kapatır — video alanına basılı tutmak artık hiçbir sistem menüsü
       açmaz. */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  /* iframe: kırpma/büyütme YOK — video içeriği %100 ve bozulmadan görünür.
     (Önceden %116 büyütüp kenarlara siyah "yama" koyan bir teknik vardı;
     bu, YouTube'un köşede bıraktığı küçük, tıklanamaz logoyu gizlemek
     içindi ama bazı videolarda köşelere yerleşen gerçek içeriği (örn.
     webcam görüntüsü, slayt) de örtüp videoyu bozuyordu. O teknik
     kaldırıldı — aşağıdaki iki katman zaten asıl riskleri tamamen
     kapatıyor, videoya hiç dokunmadan:
       1) pointer-events:none → YouTube iframe'i asla hover/tıklama
          alamaz, bu yüzden başlık/kanal/paylaş/öneri hover UI'ı hiç
          açılmaz (aşağıdaki .yt-kalkan + .video-click-blocker zaten
          fare/dokunuşu tamamen üstlerinde yakalar).
       2) video-idle-cover → duraklat/bitti anında YouTube'un kendi
          overlay'ini (öneri videoları dahil) tam opak kaplar.
     Köşede kalabilecek küçük, tıklanamaz YouTube filigranı kabul
     edilebilir bir bedel; video içeriğini bozmak değil. */
  /* !important + max-*: iOS Safari yatay PWA'da bu iframe, kendisine verilen
     %100 genişliği yok sayıp kutudan (video-player-host) daha GENİŞ
     yerleşebiliyor; YouTube videoyu bu geniş iframe'in ortasına çizdiği için
     video kutunun içinde sağa kayıyor ve overflow:hidden sağ kenarı kesiyordu.
     Bu bildirimler iframe'i her koşulda kutunun tam boyutuna sabitler. */
  .video-player-host > iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border: 0;
    pointer-events: none !important;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    /* VARSAYILAN GİZLİ: iframe sadece JS (videoOynaticiUIYenile) gerçekten
       güvenli/oynatılıyor durumda olduğuna karar verince opacity:1 yapılır
       (bkz. video-player.js). Böylece ilk oluşturulduğu an dahil, HİÇBİR
       zaman "güvenli" olmayan bir kare bile görünür olmaz — z-index yarışına
       hiç girmeden, iframe'in kendisi görsel olarak var olmaz. Geçiş
       (transition) YOK: opacity değişimi anlık olmalı, aksi halde solma
       sırasında YouTube'un kendi arayüzü bir an sızabilir. */
    opacity: 0;
  }

  /* Hover kalkanı: iframe'in tamamen üstünde, şeffaf, pointer-events:auto.
     Fare/parmak her zaman bu katmanı görür, iframe'e ulaşamaz. */
  .yt-kalkan {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: transparent;
    pointer-events: auto !important;
    touch-action: none;
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  /* Tıklama engeli: video kutusu üzerindeki tüm alanda tıklamayı yakalar.
     İçindeki idle/buffering kapağını barındırır. video-player-host'a
     göre konumlandığı için kontrol çubuğunu asla kapsamaz. */
  .video-click-blocker {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: transparent;
    pointer-events: auto !important;
    touch-action: none;
    user-select: none;
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
  }

  /* Oynatılmadığı HER an (başlamadı / duraklatıldı / bitti / arabelleğe
     alınıyor) gösterilen opak kapak. YouTube'un kendi idle/paused/ended
     overlay'ini (logo + önerilen videolar dahil) tamamen örtür. */
  .video-idle-cover {
    position: absolute;
    inset: 0;
    background-color: #0b0d10;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }
  .video-idle-cover.gizli { display: none; }

  /* İki iç durum: normal "oynat" daveti ve arabelleğe alma göstergesi.
     İkisi de aynı opak kapağın içinde, sadece biri görünür olur —
     böylece arabelleğe alma sırasında büyük oynat düğmesi yerine
     ince bir spinner görünür, kapak asla kapanmaz. */
  .video-idle-play-ui,
  .video-idle-buffer-ui {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .video-idle-play-ui.gizli,
  .video-idle-buffer-ui.gizli { display: none; }

  .video-idle-play-btn {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(0, 214, 143, .15);
    border: 2px solid var(--accent);
    color: var(--accent);
    font-size: 22px;
    cursor: pointer;
    pointer-events: auto;
    display: flex; align-items: center; justify-content: center;
  }
  .video-idle-cover span {
    color: rgba(255,255,255,.5);
    font-size: .72rem;
    pointer-events: none;
  }

  .video-spinner {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,.15);
    border-top-color: var(--accent);
    animation: video-spin .8s linear infinite;
  }
  @keyframes video-spin { to { transform: rotate(360deg); } }

  /* Watermark */
  .video-watermark {
    position: absolute;
    z-index: 25;
    pointer-events: none !important;
    user-select: none;
    color: rgba(255,255,255,.13);
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .35px;
    background: transparent;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    transition: top 1.7s ease, left 1.7s ease;
  }

  /* Yükleniyor mesajı (yalnızca oynatıcı ilk kurulurken görünür, onReady'de kaldırılır) */
  .video-loading-msg {
    position: absolute;
    z-index: 26;
    left: 50%; top: 50%;
    transform: translate(-50%,-50%);
    pointer-events: none;
    color: rgba(255,255,255,.72);
    background: rgba(0,0,0,.55);
    border: 1px solid rgba(255,255,255,.08);
    padding: 7px 14px;
    border-radius: 8px;
    font-size: .75rem;
    backdrop-filter: blur(5px);
  }

  /* ── Kontrol çubuğu ── */
  .video-custom-controls {
    position: relative;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    padding: 6px 10px;
    background: #0b0d10;
    border: 1px solid rgba(255,255,255,.08);
    border-top: 0;
    overflow: hidden;
  }
  .video-custom-controls button,
  .video-custom-controls select {
    height: 32px;
    border: 0;
    border-radius: 7px;
    background: rgba(255,255,255,.07);
    color: #fff;
    cursor: pointer;
    font-size: 12px;
  }
  .video-custom-controls button:hover,
  .video-custom-controls select:hover { background: rgba(255,255,255,.13); }
  .video-custom-controls button:focus-visible,
  .video-custom-controls select:focus-visible,
  .video-custom-controls input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

  .video-play-btn    { width: 36px; flex: 0 0 36px; }
  .video-sure        { color: rgba(255,255,255,.82); font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; flex-shrink: 0; min-width: 72px; text-align: center; }
  .video-seek        { flex: 1; min-width: 50px; accent-color: var(--accent); cursor: pointer; }
  .video-volume      { width: 80px; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }
  .video-hiz-select  { min-width: 56px; flex-shrink: 0; padding: 0 6px; outline: none; }
  .video-hiz-select option { background: #111; color: #fff; }
  .video-fullscreen-btn { width: 36px; flex: 0 0 36px; font-size: 16px; }

  /* ── Tam ekran (masaüstü/Android native + iPhone portal) ──
     .video-guvenlik-wrap dikey bir kutudur: [video-stage][kontroller].
     video-stage kalan TÜM alanı kaplar ve içindeki .video-player-host'u
     TAM ORTALAR, HER ZAMAN 16:9 oranıyla. Ekranın gerçek oranı 16:9
     olmasa bile (örn. iPhone ~19.5:9) boşta kalan alan SADECE bizim
     siyah arka planımızdır — YouTube kendi letterbox'ını asla farklı
     bir orana göre hesaplamaz, çünkü video kutusunun oranı hiç
     değişmez. Bu sayede kenar yamaları tam ekranda da doğru hizada kalır. */
  .video-guvenlik-wrap:fullscreen,
  .video-guvenlik-wrap:-webkit-full-screen,
  .video-guvenlik-wrap.alpago-fs {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #000;
  }
  .video-guvenlik-wrap:fullscreen,
  .video-guvenlik-wrap:-webkit-full-screen {
    width: 100vw; height: 100vh;
    border-radius: 0;
  }
  .video-guvenlik-wrap.alpago-fs {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0 !important;
    z-index: 2147483647 !important;
    overflow: hidden !important;
  }

  .video-guvenlik-wrap:fullscreen .video-stage,
  .video-guvenlik-wrap:-webkit-full-screen .video-stage,
  .video-guvenlik-wrap.alpago-fs .video-stage {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #000;
  }
  /* video-player-host'un tam ekrandaki gerçek piksel boyutu (16:9 sabit
     oranla, "contain" mantığıyla — videonun HİÇBİR PİKSELİ KIRPILMADAN
     mevcut alana sığdırılacak şekilde) JS tarafından hesaplanıp inline
     style olarak yazılır — bkz. video-player.js > videoTamEkranBoyutlandir().
     CSS aspect-ratio + flexbox kombinasyonu, içeriği tamamen absolute
     konumlu olan bir kutuda (bizim durumumuz) tarayıcılar arası güvenilir
     sonuç vermediği için (özellikle eski iOS Safari) bilerek JS'e bırakıldı.
     max-width/max-height burada gerekmez: JS hesabı zaten hiçbir zaman
     mevcut alanı aşmayan bir boyut üretir (kırpma YAPILMIYOR, sadece
     gerekirse ince siyah bant kalır). */
  .video-guvenlik-wrap:fullscreen .video-player-host,
  .video-guvenlik-wrap:-webkit-full-screen .video-player-host,
  .video-guvenlik-wrap.alpago-fs .video-player-host {
    flex: 0 0 auto;
  }
  /* Tam ekranda kontrol çubuğu artık videonun ALTINDA ayrı bir alan
     KAPLAMIYOR — videonun ÜZERİNE yarı saydam bir şerit olarak biniyor
     (tıpkı YouTube/Netflix gibi profesyonel oynatıcılarda olduğu gibi).
     Böylece video-stage'e kalan yükseklik kontrol çubuğu kadar
     azalmıyor, video mümkün olan EN BÜYÜK boyutta (gereksiz siyah bant
     olmadan, sadece ekran oranı 16:9'dan farklıysa doğal pillarbox ile)
     gösterilebiliyor. */
  .video-guvenlik-wrap:fullscreen .video-custom-controls,
  .video-guvenlik-wrap:-webkit-full-screen .video-custom-controls,
  .video-guvenlik-wrap.alpago-fs .video-custom-controls {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.55) 70%, transparent);
    border: 0;
  }
  .video-guvenlik-wrap.alpago-fs .video-custom-controls {
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 6px) !important;
    padding-left:  max(env(safe-area-inset-left,   0px), 10px) !important;
    padding-right: max(env(safe-area-inset-right,  0px), 10px) !important;
  }
  body.alpago-fs-body { overflow: hidden !important; }

  .video-yonetim-yeni { margin: 0 0 24px; }

  .islem-galeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
  .islem-galeri-kart { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 12px 10px; cursor: pointer; transition: border-color var(--transition), transform var(--transition); }
  .islem-galeri-kart:hover { border-color: var(--border2); transform: translateY(-2px); }
  .islem-galeri-ust { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
  .islem-galeri-baslik { font-size: 0.95rem; font-weight: 700; color: var(--text); }
  .islem-galeri-dolar { font-family: 'Courier New', monospace; font-weight: 800; font-size: 0.88rem; white-space: nowrap; }
  .islem-galeri-dolar.pozitif { color: var(--accent); }
  .islem-galeri-dolar.negatif { color: var(--loss); }
  .islem-galeri-alt { font-size: 0.72rem; color: var(--text3); margin-bottom: 8px; }
  .islem-galeri-rozetler { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
  .islem-galeri-rozet { font-size: 0.65rem; font-weight: 800; padding: 2px 7px; border-radius: 4px; letter-spacing: 0.3px; }
  .islem-galeri-rozet.win { background: var(--accent-dim); color: var(--accent); }
  .islem-galeri-rozet.loss { background: var(--loss-dim); color: var(--loss); }
  .islem-galeri-kapak { position: relative; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 16 / 10; background: var(--bg); }
  .islem-galeri-kapak img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .islem-galeri-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.28); }
  .islem-galeri-play svg { filter: drop-shadow(0 1px 4px rgba(0,0,0,0.5)); }
@keyframes islem-yeni-parla {
    0%, 100% { box-shadow: 0 0 6px rgba(232,185,49,0.4); filter: brightness(1); }
    50% { box-shadow: 0 0 16px rgba(232,185,49,0.95); filter: brightness(1.12); }
  }
  .islem-yeni-rozet {
    background: #E8B931;
    color: #111;
    border: 1px solid #F6DE7A;
    font-weight: 800;
    letter-spacing: 0.6px;
    white-space: nowrap;
    animation: islem-yeni-parla 1.8s ease infinite;
    box-shadow: 0 0 10px rgba(232,185,49,0.55);
  }
  .islem-yeni-kapak { position: absolute; top: 8px; left: 8px; z-index: 2; font-size: 0.62rem; padding: 4px 8px; }

  .islem-yonetim-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; align-items: end; }
  .islem-yonetim-url, .islem-yonetim-kaydet { grid-column: 1 / -1; }
  .islem-yonetim-kaydet { display: flex; justify-content: flex-end; gap: 8px; }
  .islem-wl { display: flex; gap: 6px; }
  .islem-wl-btn { flex: 1; background: var(--bg); border: 1px solid var(--border2); color: var(--text2); border-radius: var(--radius-sm); padding: 9px 10px; font-size: 0.78rem; font-weight: 800; cursor: pointer; font-family: inherit; }
  .islem-wl-btn.aktif[data-wl="WIN"] { background: var(--accent-dim); border-color: rgba(0,214,143,0.35); color: var(--accent); }
  .islem-wl-btn.aktif[data-wl="LOSS"] { background: var(--loss-dim); border-color: rgba(255,77,77,0.35); color: var(--loss); }

  .islem-yonetim-satir { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
  .islem-yonetim-satir:last-child { border-bottom: none; }
  .islem-yonetim-thumb { width: 72px; height: 44px; border-radius: 6px; overflow: hidden; background: var(--bg); flex-shrink: 0; }
  .islem-yonetim-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .islem-yonetim-bilgi { flex: 1; min-width: 110px; }
  .islem-yonetim-ad { font-size: 0.88rem; font-weight: 700; }
  .islem-yonetim-meta { font-size: 0.72rem; color: var(--text3); }
  .islem-yonetim-aksiyon { display: flex; gap: 6px; margin-left: auto; }

  /* ── Mobil kontrol çubuğu uyarlamaları ── */
  @media (max-width: 600px) {
    .video-custom-controls { gap: 4px; padding: 5px 6px; min-height: 44px; }
    .video-volume  { width: 50px; }
    .video-sure    { min-width: 54px; font-size: 10px; }
    .video-hiz-select { min-width: 44px; font-size: 11px; padding: 0 3px; }
    .video-play-btn, .video-fullscreen-btn { width: 32px; flex-basis: 32px; }
  }
  @media (max-width: 400px) {
    .video-volume  { width: 34px; }
    .video-sure    { min-width: 46px; font-size: 9px; }
  }