/* OTOMATİK ÜRETİLDİ: scripts/build-portal.cjs, kaynak taslak/style.css. Elle düzenleme. */
/* ==========================================================================
   ZENIN2 - BUZUL & KRİSTAL GİRİŞ EKRANI TASLAĞI (GLACIAL FROST THEME V4)
   Göz Yormayan Kristalimsi Çerçeveler, Soft Grid-Stack Sekmeler, Sıfır Ani Geçiş
   ========================================================================== */

/* --- Font Tanımlamaları --- */
@font-face {
  font-family: 'Marcellus SC';
  src: url('/fonts/marcellus-sc.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fira Sans';
  src: url('/fonts/fira-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fira Sans';
  src: url('/fonts/fira-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fira Sans';
  src: url('/fonts/fira-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --- Değişkenler & Buzul Renk Paleti --- */
#zenin2-portal-root {
  --m2-font-title: 'Marcellus SC', 'Cinzel', 'Times New Roman', serif;
  --m2-font-body: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif;

  /* Buzul & Kristal Renk Sistemi (Göz Yormayan Gece Mavisi & Kristal Ayazı) */
  --bg-deep: #040810;
  --bg-stone: #0a1322;
  --bg-surface: rgba(12, 22, 38, 0.95);
  --bg-input: rgba(6, 13, 24, 0.92);
  
  /* Kristal & Buz Tonları */
  --ice-primary: #38bdf8;
  --ice-bright: #bae6fd;
  --ice-shimmer: #e0f2fe;
  --ice-dim: #0284c7;
  --ice-border: rgba(125, 211, 252, 0.32);
  --ice-glow: rgba(56, 189, 248, 0.22);
  --ice-aura: rgba(56, 189, 248, 0.08);

  /* Safir & Arktik Mavi */
  --sapphire-core: #1d4ed8;
  --sapphire-light: #2563eb;
  --sapphire-deep: #0f2766;
  --sapphire-glow: rgba(37, 99, 235, 0.45);

  --text-main: #e2e8f0;
  --text-muted: #8ba2bd;
  --text-bright: #ffffff;
  --text-ice: #c7ebff;

  --status-online: #38bdf8;
  --status-busy: #fbbf24;
  --status-full: #f87171;

  --radius-sm: 2px;
  --radius-md: 4px;

  /* Ultra-Soft Animasyon Eğrileri (Cubic Beziers) */
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);

  --trans-fast: 0.18s var(--ease-soft);
  --trans-normal: 0.35s var(--ease-soft);
  --trans-slow: 0.55s var(--ease-soft);
}

/* --- Sıfırlama & Taban Kuralları --- */
#zenin2-portal-root *,
#zenin2-portal-root *::before,
#zenin2-portal-root *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

#zenin2-portal-root,
#zenin2-portal-root {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg-deep);
  color: var(--text-main);
  font-family: var(--m2-font-body);
  font-size: 14px;
  line-height: 1.5;
  user-select: none;
  -webkit-user-select: none;
}

#zenin2-portal-root button {
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  outline: none;
}

#zenin2-portal-root input {
  font: inherit;
  color: inherit;
  border: none;
  outline: none;
  background: none;
}

/* --- Arka Plan Katmanları (Buzul Dağları & Ethereal Aurora) --- */
#zenin2-portal-root .m2-bg-viewport {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  background: radial-gradient(ellipse at 56% 22%, #19384b, #040810 75%);
}

#zenin2-portal-root .m2-bg-picture {
  display: block;
  width: 100%;
  height: 100%;
}

#zenin2-portal-root .m2-bg-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 36%;
  filter: brightness(0.72) contrast(1.08);
  transform: scale(1.03) translateZ(0);
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: transform;
  animation: bg-ice-drift 36s ease-in-out infinite alternate;
}

@keyframes bg-ice-drift {
  0% { transform: scale(1.03) translate3d(0, 0, 0); }
  50% { transform: scale(1.05) translate3d(-0.4%, -0.3%, 0); }
  100% { transform: scale(1.02) translate3d(0.4%, 0.2%, 0); }
}

@media (max-width: 640px), (pointer: coarse), (prefers-reduced-motion: reduce) {
  #zenin2-portal-root .m2-bg-art {
    animation: none;
    transform: none;
    will-change: auto;
  }

  #zenin2-portal-root .m2-aurora-glow,
#zenin2-portal-root .m2-embers-canvas {
    display: none;
  }
}

/* Derinlik Gradiyentleri & Soğuk Gece Vignette */
#zenin2-portal-root .m2-bg-vignette {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 50% 50%, rgba(4, 8, 16, 0.42) 0%, rgba(4, 8, 16, 0.84) 72%, #040810 100%),
    linear-gradient(180deg, rgba(4, 8, 16, 0.78) 0%, transparent 22%, transparent 78%, rgba(4, 8, 16, 0.94) 100%);
  contain: strict;
}

/* Kutup Aurorası */
#zenin2-portal-root .m2-aurora-glow {
  position: absolute;
  width: 55vw;
  height: 55vw;
  right: -10vw;
  top: 5vh;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.16) 0%, rgba(37, 99, 235, 0.06) 50%, transparent 70%);
  filter: blur(60px);
  will-change: transform, opacity;
  animation: aurora-soft-breathe 9s ease-in-out infinite alternate;
  mix-blend-mode: screen;
  pointer-events: none;
}

@keyframes aurora-soft-breathe {
  0% { opacity: 0.4; transform: scale(0.96) translate(0, 0); }
  100% { opacity: 0.85; transform: scale(1.07) translate(-1%, -1%); }
}

/* Buzul Kristal Kar Parçacıkları (Canvas) */
#zenin2-portal-root .m2-embers-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.92;
  contain: strict;
}

/* --- Ana Sayfa Düzeni (Flex Ortalanmış, 100dvh & Safe-Area Uyumlu) --- */
#zenin2-portal-root .m2-viewport-container {
  position: relative;
  z-index: 10;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: max(12px, env(safe-area-inset-top));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  padding-left: max(16px, env(safe-area-inset-left));
  overflow-y: auto;
  box-sizing: border-box;
}

/* --- Üst Çubuk (Top Bar) --- */
#zenin2-portal-root .m2-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 7px 14px;
  background: rgba(10, 18, 32, 0.76);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--ice-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
  animation: bar-soft-in 0.7s var(--ease-soft) both;
}

@keyframes bar-soft-in {
  0% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}

#zenin2-portal-root .m2-brand-mini {
  display: flex;
  align-items: center;
  gap: 10px;
}

#zenin2-portal-root .m2-mini-crest-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px var(--ice-glow));
  transition: transform var(--trans-normal);
}

#zenin2-portal-root .m2-brand-mini:hover .m2-mini-crest-img {
  transform: rotate(15deg) scale(1.12);
}

#zenin2-portal-root .m2-brand-mini span {
  font-family: var(--m2-font-title);
  font-size: 15px;
  letter-spacing: 0.16em;
  color: var(--ice-bright);
  text-shadow: 0 1px 4px #000;
}

#zenin2-portal-root .m2-nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
}

#zenin2-portal-root .m2-nav-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  padding: 4px 0;
  transition: color var(--trans-fast);
}

#zenin2-portal-root .m2-nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--ice-bright), transparent);
  transition: width var(--trans-fast);
}

#zenin2-portal-root .m2-nav-links a:hover {
  color: var(--ice-bright);
}

#zenin2-portal-root .m2-nav-links a:hover::after {
  width: 100%;
}

#zenin2-portal-root .m2-top-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

#zenin2-portal-root .m2-tool-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(56, 189, 248, 0.22);
  transition: all var(--trans-fast);
  will-change: transform, box-shadow;
}

#zenin2-portal-root .m2-tool-btn:hover {
  color: var(--ice-bright);
  border-color: var(--ice-primary);
  background: rgba(18, 34, 58, 0.7);
  transform: translateY(-1px);
}

#zenin2-portal-root .m2-tool-btn:active {
  transform: translateY(1px);
}

#zenin2-portal-root .m2-tool-btn.active {
  color: var(--ice-bright);
  border-color: var(--ice-primary);
  box-shadow: 0 0 10px var(--ice-glow);
}

/* Müzik Seçim Paneli Butonu */
#zenin2-portal-root .m2-music-btn-trigger {
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.35) 0%, rgba(15, 39, 102, 0.6) 100%);
  border-color: var(--ice-primary);
  color: var(--ice-bright);
}

/* --- Ana İçerik Alanı & Giriş Penceresi --- */
#zenin2-portal-root .m2-center-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 14px 0;
}

/* Kristalimsi Buzul Penceresi (Zenin2 Glacial Box) */
#zenin2-portal-root .m2-portal-box {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: 
    linear-gradient(180deg, rgba(16, 28, 48, 0.96) 0%, rgba(8, 14, 26, 0.98) 100%);
  border: 1px solid var(--ice-border);
  border-radius: var(--radius-sm);
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.92),
    0 0 0 1px rgba(0, 0, 0, 0.95),
    0 0 35px var(--ice-aura),
    inset 0 1px 0 rgba(224, 242, 254, 0.25),
    inset 0 0 30px rgba(0, 0, 0, 0.7);
  padding: 24px 28px 22px;
  will-change: transform, opacity, filter;
  animation: portal-soft-reveal 0.7s var(--ease-soft) both;
  transition: box-shadow var(--trans-slow), border-color var(--trans-normal);
}

#zenin2-portal-root .m2-portal-box:hover {
  border-color: rgba(125, 211, 252, 0.48);
  box-shadow: 
    0 22px 64px rgba(0, 0, 0, 0.94),
    0 0 0 1px rgba(0, 0, 0, 0.95),
    0 0 45px rgba(56, 189, 248, 0.15),
    inset 0 1px 0 rgba(224, 242, 254, 0.35),
    inset 0 0 30px rgba(0, 0, 0, 0.7);
}

@keyframes portal-soft-reveal {
  0% { 
    opacity: 0; 
    transform: translateY(16px) scale(0.985); 
    filter: blur(4px);
  }
  100% { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
    filter: blur(0);
  }
}

/* Kristalimsi Köşe İşlemeleri (GPU Kompozitli) */
#zenin2-portal-root .m2-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
  opacity: 0.92;
  transform: translateZ(0);
  will-change: filter, opacity;
  transition: opacity var(--trans-normal), filter var(--trans-normal);
}
#zenin2-portal-root .m2-corner::before,
#zenin2-portal-root .m2-corner::after {
  content: '';
  position: absolute;
  background: var(--ice-bright);
  box-shadow: 0 0 6px var(--ice-primary), 0 0 10px rgba(186, 230, 253, 0.5);
}
#zenin2-portal-root .m2-corner-tl { top: -2px; left: -2px; }
#zenin2-portal-root .m2-corner-tl::before { top: 0; left: 0; width: 14px; height: 2px; }
#zenin2-portal-root .m2-corner-tl::after { top: 0; left: 0; width: 2px; height: 14px; }

#zenin2-portal-root .m2-corner-tr { top: -2px; right: -2px; }
#zenin2-portal-root .m2-corner-tr::before { top: 0; right: 0; width: 14px; height: 2px; }
#zenin2-portal-root .m2-corner-tr::after { top: 0; right: 0; width: 2px; height: 14px; }

#zenin2-portal-root .m2-corner-bl { bottom: -2px; left: -2px; }
#zenin2-portal-root .m2-corner-bl::before { bottom: 0; left: 0; width: 14px; height: 2px; }
#zenin2-portal-root .m2-corner-bl::after { bottom: 0; left: 0; width: 2px; height: 14px; }

#zenin2-portal-root .m2-corner-br { bottom: -2px; right: -2px; }
#zenin2-portal-root .m2-corner-br::before { bottom: 0; right: 0; width: 14px; height: 2px; }
#zenin2-portal-root .m2-corner-br::after { bottom: 0; right: 0; width: 2px; height: 14px; }

#zenin2-portal-root .m2-portal-box:hover .m2-corner {
  opacity: 1;
  filter: drop-shadow(0 0 6px var(--ice-bright));
}

/* Tepe Buzul Safir Kristali (Prizmatik Işıltı) */
#zenin2-portal-root .m2-top-crest {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%) translateZ(0);
  width: 15px;
  height: 17px;
  background: linear-gradient(135deg, #ffffff 0%, #7dd3fc 30%, var(--ice-primary) 65%, var(--sapphire-core) 100%);
  clip-path: polygon(50% 0%, 100% 45%, 50% 100%, 0% 45%);
  box-shadow: 0 0 14px var(--sapphire-glow), 0 0 6px var(--ice-bright);
  border: 1px solid rgba(224, 242, 254, 0.7);
  z-index: 5;
  will-change: filter, transform;
  animation: sapphire-soft-breathe 3.6s ease-in-out infinite alternate;
}

@keyframes sapphire-soft-breathe {
  0% { filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.45)); transform: translateX(-50%) scale(1) translateZ(0); }
  100% { filter: drop-shadow(0 0 14px rgba(186, 230, 253, 0.95)) drop-shadow(0 0 6px #ffffff); transform: translateX(-50%) scale(1.08) translateZ(0); }
}

/* --- Logo ve Başlık Bölümü (Grafik Logo ve Tipografi) --- */
#zenin2-portal-root .m2-header-section {
  text-align: center;
  margin-bottom: 14px;
}

#zenin2-portal-root .m2-zenin-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto 4px;
}

#zenin2-portal-root .m2-zenin-logo-img {
  width: 100%;
  max-width: 340px;
  max-height: 135px;
  object-fit: contain;
  transform: translateZ(0);
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.92)) drop-shadow(0 0 16px rgba(56, 189, 248, 0.38)) drop-shadow(0 0 2px rgba(186, 230, 253, 0.45));
  transition: transform var(--trans-normal), filter var(--trans-normal);
  will-change: transform;
}

#zenin2-portal-root .m2-zenin-logo-img:hover {
  transform: scale(1.03) translateZ(0);
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.96)) drop-shadow(0 0 24px rgba(56, 189, 248, 0.60)) drop-shadow(0 0 6px rgba(224, 242, 254, 0.70));
}

#zenin2-portal-root .m2-subtitle-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--m2-font-title);
  font-size: 11px;
  letter-spacing: 0.26em;
  color: var(--ice-bright);
  text-transform: uppercase;
  margin-top: 4px;
}

#zenin2-portal-root .m2-subtitle-tag::before,
#zenin2-portal-root .m2-subtitle-tag::after {
  content: '';
  height: 1px;
  width: 32px;
  background: linear-gradient(90deg, transparent, var(--ice-primary));
}
#zenin2-portal-root .m2-subtitle-tag::after {
  background: linear-gradient(270deg, transparent, var(--ice-primary));
}

/* --- Canlı Sunucu Durumu & Kanal Seçici (Kompakt Profesyonel Çubuk) --- */
#zenin2-portal-root .m2-server-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(8, 16, 28, 0.72);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  margin-bottom: 14px;
  transition: border-color var(--trans-fast);
}

#zenin2-portal-root .m2-server-bar:hover {
  border-color: rgba(56, 189, 248, 0.4);
}

#zenin2-portal-root .m2-status-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
}

#zenin2-portal-root .m2-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-online);
  box-shadow: 0 0 8px var(--status-online);
  will-change: transform, box-shadow;
  animation: dot-ice-pulse 2.2s ease-in-out infinite;
}

@keyframes dot-ice-pulse {
  0% { transform: scale(0.92); opacity: 0.85; box-shadow: 0 0 6px var(--status-online); }
  50% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 12px var(--status-online); }
  100% { transform: scale(0.92); opacity: 0.85; box-shadow: 0 0 6px var(--status-online); }
}

#zenin2-portal-root .m2-status-text {
  color: var(--text-main);
  font-weight: 500;
}

#zenin2-portal-root .m2-status-text span {
  color: var(--text-muted);
  font-size: 10.5px;
  margin-left: 4px;
}

/* Kanal Butonları */
#zenin2-portal-root .m2-channels-group {
  display: flex;
  gap: 4px;
}

#zenin2-portal-root .m2-ch-btn {
  font-family: var(--m2-font-title);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  background: rgba(14, 26, 44, 0.7);
  border: 1px solid rgba(56, 189, 248, 0.2);
  transition: all var(--trans-fast);
  will-change: transform;
}

#zenin2-portal-root .m2-ch-btn:hover {
  color: var(--ice-bright);
  border-color: var(--ice-dim);
  background: rgba(22, 42, 70, 0.8);
  transform: translateY(-1px);
}

#zenin2-portal-root .m2-ch-btn:active {
  transform: translateY(1px);
}

#zenin2-portal-root .m2-ch-btn.selected {
  color: var(--ice-bright);
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.45) 0%, rgba(15, 39, 102, 0.75) 100%);
  border-color: var(--ice-bright);
  box-shadow: 0 0 8px var(--ice-glow);
  font-weight: 600;
}

/* --- Sekme Başlıkları --- */
#zenin2-portal-root .m2-tabs-header {
  display: flex;
  border-bottom: 1px solid rgba(56, 189, 248, 0.22);
  margin-bottom: 16px;
  position: relative;
}

#zenin2-portal-root .m2-tab-btn {
  flex: 1;
  text-align: center;
  padding: 9px 12px;
  font-family: var(--m2-font-title);
  font-size: 13.5px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  position: relative;
  transition: color var(--trans-fast);
}

#zenin2-portal-root .m2-tab-btn:hover {
  color: var(--text-bright);
}

#zenin2-portal-root .m2-tab-btn.active {
  color: var(--ice-bright);
  font-weight: 600;
}

#zenin2-portal-root .m2-tab-btn::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ice-bright), transparent);
  box-shadow: 0 0 8px var(--ice-primary);
  transform: translateX(-50%);
  transition: width var(--trans-normal);
}

#zenin2-portal-root .m2-tab-btn.active::after {
  width: 80%;
}

#zenin2-portal-root .m2-tab-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(56, 189, 248, 0.2);
  color: var(--ice-bright);
  margin-left: 6px;
  vertical-align: middle;
  border: 1px solid rgba(56, 189, 248, 0.3);
  transition: all var(--trans-fast);
}

#zenin2-portal-root .m2-tab-btn.active .m2-tab-badge {
  background: var(--ice-primary);
  color: #040810;
  font-weight: 700;
  box-shadow: 0 0 6px var(--ice-glow);
}

/* =========================================================================
   YUMUŞAK SEKME VİEVPORTU (GRID STACK - ASLA DISPLAY: NONE KULLANMAZ)
   ========================================================================= */
#zenin2-portal-root .m2-tab-viewport {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  position: relative;
}

#zenin2-portal-root .m2-tab-pane {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.985);
  transition: 
    opacity 0.35s var(--ease-soft),
    transform 0.35s var(--ease-soft),
    visibility 0.35s;
  pointer-events: none;
  width: 100%;
}

#zenin2-portal-root .m2-tab-pane.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* --- Form Alanları --- */
#zenin2-portal-root .m2-form-body {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

#zenin2-portal-root .m2-field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#zenin2-portal-root .m2-field-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  color: var(--text-ice);
  letter-spacing: 0.05em;
  font-weight: 500;
}

#zenin2-portal-root .m2-field-label .sub-hint {
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: normal;
}

#zenin2-portal-root .m2-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg-input);
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.85);
  transition: border-color var(--trans-fast), box-shadow var(--trans-fast), background var(--trans-fast);
}

#zenin2-portal-root .m2-input-wrapper:hover {
  border-color: rgba(56, 189, 248, 0.45);
  background: rgba(10, 18, 32, 0.95);
}

#zenin2-portal-root .m2-input-wrapper:focus-within {
  border-color: var(--ice-bright);
  background: rgba(14, 26, 44, 0.98);
  box-shadow: 
    0 0 0 1px rgba(186, 230, 253, 0.5),
    0 0 16px rgba(56, 189, 248, 0.42),
    inset 0 0 10px rgba(56, 189, 248, 0.12);
}

#zenin2-portal-root .m2-input-icon {
  width: 16px;
  height: 16px;
  margin-left: 12px;
  opacity: 0.7;
  color: var(--ice-primary);
  flex-shrink: 0;
  transition: opacity var(--trans-fast), color var(--trans-fast), transform var(--trans-fast);
}

#zenin2-portal-root .m2-input-wrapper:focus-within .m2-input-icon {
  opacity: 1;
  color: var(--ice-bright);
  transform: scale(1.08);
}

#zenin2-portal-root .m2-text-input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  font-size: 13.5px;
  color: #fff;
  letter-spacing: 0.03em;
}

#zenin2-portal-root .m2-text-input::placeholder {
  color: rgba(139, 162, 189, 0.45);
  font-size: 12px;
  transition: opacity var(--trans-fast);
}

#zenin2-portal-root .m2-text-input:focus::placeholder {
  opacity: 0.65;
}

/* Şifre Göster/Gizle Düğmesi */
#zenin2-portal-root .m2-eye-btn {
  width: 36px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: color var(--trans-fast), transform var(--trans-fast);
}

#zenin2-portal-root .m2-eye-btn:hover {
  color: var(--ice-bright);
  transform: scale(1.1);
}

#zenin2-portal-root .m2-eye-btn:active {
  transform: scale(0.95);
}

#zenin2-portal-root .m2-eye-btn svg {
  width: 16px;
  height: 16px;
}

/* Seçenekler Satırı */
#zenin2-portal-root .m2-options-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2px;
  font-size: 11.5px;
}

/* Özel Buzul Onay Kutusu (Sıfır Emoji) */
#zenin2-portal-root .m2-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--text-main);
  user-select: none;
}

#zenin2-portal-root .m2-custom-check {
  width: 15px;
  height: 15px;
  border: 1px solid var(--ice-primary);
  border-radius: var(--radius-sm);
  background: rgba(8, 16, 28, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all var(--trans-fast);
}

#zenin2-portal-root .m2-checkbox-label input[type="checkbox"] {
  display: none;
}

#zenin2-portal-root .m2-checkbox-label:hover .m2-custom-check {
  border-color: var(--ice-bright);
  box-shadow: 0 0 6px var(--ice-glow);
}

#zenin2-portal-root .m2-checkbox-label input[type="checkbox"]:checked + .m2-custom-check {
  background: var(--ice-primary);
  border-color: var(--ice-bright);
  box-shadow: 0 0 8px var(--ice-glow);
}

#zenin2-portal-root .m2-checkbox-label input[type="checkbox"]:checked + .m2-custom-check::after {
  content: '';
  width: 4px;
  height: 8px;
  border: solid #040810;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-top: -2px;
}

#zenin2-portal-root .m2-link-simple {
  color: var(--ice-primary);
  text-decoration: none;
  position: relative;
  transition: color var(--trans-fast);
}

#zenin2-portal-root .m2-link-simple::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--ice-bright);
  transition: width var(--trans-fast);
}

#zenin2-portal-root .m2-link-simple:hover {
  color: var(--ice-bright);
}

#zenin2-portal-root .m2-link-simple:hover::after {
  width: 100%;
}

/* --- Zenin2 Safir Eylem Butonu (Primary Button) --- */
#zenin2-portal-root .m2-btn-primary {
  position: relative;
  width: 100%;
  height: 44px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: 
    linear-gradient(180deg, #2563eb 0%, var(--sapphire-core) 45%, var(--sapphire-deep) 100%);
  border: 1px solid var(--ice-bright);
  border-radius: var(--radius-sm);
  box-shadow: 
    0 4px 16px rgba(29, 78, 216, 0.45),
    inset 0 1px 0 rgba(224, 242, 254, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6);
  font-family: var(--m2-font-title);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
  cursor: pointer;
  overflow: hidden;
  transition: all var(--trans-normal);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform, box-shadow;
}

/* Hover Işık Süzülmesi */
#zenin2-portal-root .m2-btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-25deg);
  transition: left 0.75s var(--ease-soft);
}

/* Dokunmatik Ekranlar ve Sürekli Buzul Enerjisi Dalgası */
#zenin2-portal-root .m2-btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 75%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(224, 242, 254, 0.08) 25%,
    rgba(255, 255, 255, 0.32) 50%,
    rgba(224, 242, 254, 0.08) 75%,
    transparent 100%
  );
  transform: skewX(-25deg);
  animation: m2-crystal-energy-sweep 4.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}

@keyframes m2-crystal-energy-sweep {
  0%, 55% { left: -150%; }
  100% { left: 190%; }
}

#zenin2-portal-root .m2-btn-primary:hover {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 45%, #1e3a8a 100%);
  border-color: #ffffff;
  box-shadow: 
    0 8px 24px rgba(37, 99, 235, 0.65),
    0 0 14px rgba(186, 230, 253, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transform: translateY(-2px) translateZ(0);
}

#zenin2-portal-root .m2-btn-primary:hover::before {
  left: 160%;
}

#zenin2-portal-root .m2-btn-primary:active {
  transform: scale(0.985) translateZ(0);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.8),
    0 0 14px var(--ice-glow),
    inset 0 2px 6px rgba(0, 0, 0, 0.6);
}

#zenin2-portal-root .m2-btn-primary:disabled {
  filter: grayscale(0.85) brightness(0.6);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Yan Kristal Mücevherler */
#zenin2-portal-root .m2-btn-gem {
  width: 6px;
  height: 6px;
  background: #a5f3fc;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  margin: 0 10px;
  box-shadow: 0 0 5px #a5f3fc;
  transition: transform var(--trans-fast);
}

#zenin2-portal-root .m2-btn-primary:hover .m2-btn-gem {
  transform: scale(1.25);
  box-shadow: 0 0 8px #cffafe;
}

/* --- Yükleme & İlerleme Çubuğu --- */
#zenin2-portal-root .m2-progress-box {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0;
  padding: 0 10px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  text-align: center;
  transition: max-height 0.4s var(--ease-soft), opacity 0.35s var(--ease-soft), margin 0.35s var(--ease-soft), padding 0.35s;
}

#zenin2-portal-root .m2-progress-box.show {
  max-height: 80px;
  opacity: 1;
  margin-top: 10px;
  padding: 10px;
  border-color: rgba(56, 189, 248, 0.25);
}

#zenin2-portal-root .m2-progress-status {
  font-size: 11.5px;
  color: var(--ice-bright);
  font-family: var(--m2-font-title);
  letter-spacing: 0.08em;
}

#zenin2-portal-root .m2-progress-bar-track {
  width: 100%;
  height: 6px;
  background: rgba(8, 14, 26, 0.9);
  border: 1px solid var(--ice-dim);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

#zenin2-portal-root .m2-progress-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #1d4ed8, var(--ice-primary), var(--ice-bright));
  box-shadow: 0 0 10px var(--ice-glow);
  transition: width 0.35s var(--ease-soft);
  will-change: width;
}

/* =========================================================================
   YUMUŞAK AÇILAN / KAPANAN BİLDİRİM BANNER'I (FLUID EXPANSION)
   ========================================================================= */
#zenin2-portal-root .m2-toast-banner {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-8px);
  margin-bottom: 0;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  border: 1px solid transparent;
  pointer-events: none;
  transition: 
    max-height 0.38s var(--ease-soft),
    opacity 0.32s var(--ease-soft),
    transform 0.32s var(--ease-soft),
    margin-bottom 0.32s var(--ease-soft),
    padding 0.32s;
  will-change: max-height, opacity, transform;
}

#zenin2-portal-root .m2-toast-banner.show {
  max-height: 70px;
  opacity: 1;
  transform: translateY(0);
  margin-bottom: 12px;
  padding: 8px 12px;
  pointer-events: auto;
}

#zenin2-portal-root .m2-toast-banner.error {
  background: rgba(80, 16, 24, 0.88);
  border-color: #f87171;
  color: #fee2e2;
  box-shadow: 0 4px 14px rgba(80, 16, 24, 0.5);
}

#zenin2-portal-root .m2-toast-banner.success {
  background: rgba(14, 60, 80, 0.88);
  border-color: #38bdf8;
  color: #e0f2fe;
  box-shadow: 0 4px 14px rgba(14, 60, 80, 0.5);
}

#zenin2-portal-root .m2-toast-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* --- Kayıtlı Hesaplar Kartları --- */
#zenin2-portal-root .m2-saved-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
  padding-right: 4px;
}

#zenin2-portal-root .m2-saved-list::-webkit-scrollbar {
  width: 4px;
}
#zenin2-portal-root .m2-saved-list::-webkit-scrollbar-thumb {
  background: var(--ice-dim);
  border-radius: 2px;
}

#zenin2-portal-root .m2-account-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  background: rgba(8, 16, 28, 0.8);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: var(--radius-sm);
  transition: all var(--trans-fast);
  will-change: transform, border-color, background;
}

#zenin2-portal-root .m2-account-card:hover {
  background: rgba(16, 32, 56, 0.88);
  border-color: var(--ice-bright);
  transform: translateX(3px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7);
}

#zenin2-portal-root .m2-acc-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

#zenin2-portal-root .m2-acc-avatar-box {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: url('/assets/ui/character/box_face.png') no-repeat center center / contain;
  border: 1px solid rgba(56, 189, 248, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.8);
}

#zenin2-portal-root .m2-acc-face-img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  transition: transform var(--trans-fast);
}

#zenin2-portal-root .m2-account-card:hover .m2-acc-face-img {
  transform: scale(1.1);
}

#zenin2-portal-root .m2-acc-details {
  display: flex;
  flex-direction: column;
}

#zenin2-portal-root .m2-acc-username {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-bright);
  letter-spacing: 0.02em;
}

#zenin2-portal-root .m2-acc-sub {
  font-size: 10.5px;
  color: var(--text-muted);
}

#zenin2-portal-root .m2-acc-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

#zenin2-portal-root .m2-btn-acc-enter {
  padding: 4px 12px;
  font-family: var(--m2-font-title);
  font-size: 11px;
  letter-spacing: 0.08em;
  background: rgba(37, 99, 235, 0.65);
  border: 1px solid var(--ice-primary);
  border-radius: var(--radius-sm);
  color: #fff;
  transition: all var(--trans-fast);
}

#zenin2-portal-root .m2-btn-acc-enter:hover {
  background: var(--ice-dim);
  box-shadow: 0 0 10px var(--ice-glow);
  transform: scale(1.04);
}

#zenin2-portal-root .m2-btn-acc-del {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: all var(--trans-fast);
}

#zenin2-portal-root .m2-btn-acc-del:hover {
  color: #f87171;
  background: rgba(248, 113, 113, 0.18);
  transform: scale(1.1);
}

/* --- Karakter Silme Kodu İpucu --- */
#zenin2-portal-root .m2-hint-badge {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* --- Alt Bilgi (Footer) --- */
#zenin2-portal-root .m2-footer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 6px 14px;
  font-size: 11px;
  color: rgba(139, 162, 189, 0.7);
  border-top: 1px solid rgba(56, 189, 248, 0.15);
}

#zenin2-portal-root .m2-footer-links {
  display: flex;
  gap: 16px;
}

#zenin2-portal-root .m2-footer-links a {
  color: rgba(139, 162, 189, 0.7);
  text-decoration: none;
  transition: color var(--trans-fast);
}

#zenin2-portal-root .m2-footer-links a:hover {
  color: var(--ice-bright);
}

/* =========================================================================
   YUMUŞAK AÇILAN / KAPANAN MODAL VE MÜZİK ODASI (SMOOTH IN & OUT)
   ========================================================================= */
#zenin2-portal-root .m2-modal-overlay,
#zenin2-portal-root .m2-music-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: 
    opacity 0.32s var(--ease-soft),
    visibility 0.32s;
  will-change: opacity, visibility;
}

#zenin2-portal-root .m2-modal-overlay.open,
#zenin2-portal-root .m2-music-panel-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#zenin2-portal-root .m2-modal-card,
#zenin2-portal-root .m2-music-card {
  width: 100%;
  max-width: 520px;
  background: linear-gradient(180deg, #101c32 0%, #08101d 100%);
  border: 1px solid var(--ice-primary);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.95), 0 0 35px var(--ice-aura);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform: translateY(16px) scale(0.97);
  transition: transform 0.35s var(--ease-soft);
  will-change: transform;
}

#zenin2-portal-root .m2-modal-card {
  max-width: 380px;
}

#zenin2-portal-root .m2-modal-overlay.open .m2-modal-card,
#zenin2-portal-root .m2-music-panel-overlay.open .m2-music-card {
  transform: translateY(0) scale(1);
}

#zenin2-portal-root .m2-music-head,
#zenin2-portal-root .m2-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(56, 189, 248, 0.2);
  padding-bottom: 10px;
}

#zenin2-portal-root .m2-music-head h3,
#zenin2-portal-root .m2-modal-head h3 {
  font-family: var(--m2-font-title);
  color: var(--ice-bright);
  font-size: 15px;
  letter-spacing: 0.12em;
  display: flex;
  align-items: center;
  gap: 8px;
}

#zenin2-portal-root .m2-music-close,
#zenin2-portal-root .m2-modal-close {
  color: var(--text-muted);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: all var(--trans-fast);
}

#zenin2-portal-root .m2-music-close:hover,
#zenin2-portal-root .m2-modal-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.1);
}

/* Şimdi Çalıyor Çubuğu */
#zenin2-portal-root .m2-now-playing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(6, 14, 26, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: var(--radius-sm);
}

#zenin2-portal-root .m2-now-info {
  display: flex;
  flex-direction: column;
}

#zenin2-portal-root .m2-now-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--ice-bright);
}

#zenin2-portal-root .m2-now-zone {
  font-size: 11px;
  color: var(--text-muted);
}

/* Canlı Equalizer Animasyonu */
#zenin2-portal-root .m2-equalizer {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 16px;
}

#zenin2-portal-root .m2-eq-bar {
  width: 3px;
  background: var(--ice-primary);
  border-radius: 1px;
  height: 4px;
  transition: height 0.1s ease;
}

#zenin2-portal-root .m2-equalizer.playing .m2-eq-bar:nth-child(1) { animation: eq-anim 0.8s infinite ease-in-out alternate; }
#zenin2-portal-root .m2-equalizer.playing .m2-eq-bar:nth-child(2) { animation: eq-anim 1.1s infinite 0.2s ease-in-out alternate; }
#zenin2-portal-root .m2-equalizer.playing .m2-eq-bar:nth-child(3) { animation: eq-anim 0.7s infinite 0.4s ease-in-out alternate; }
#zenin2-portal-root .m2-equalizer.playing .m2-eq-bar:nth-child(4) { animation: eq-anim 0.9s infinite 0.1s ease-in-out alternate; }

@keyframes eq-anim {
  0% { height: 3px; }
  100% { height: 16px; }
}

/* Şarkı Listesi */
#zenin2-portal-root .m2-playlist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 250px;
  overflow-y: auto;
  padding-right: 4px;
}

#zenin2-portal-root .m2-playlist::-webkit-scrollbar {
  width: 4px;
}
#zenin2-portal-root .m2-playlist::-webkit-scrollbar-thumb {
  background: var(--ice-dim);
  border-radius: 2px;
}

#zenin2-portal-root .m2-track-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(8, 16, 28, 0.75);
  border: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--trans-fast);
}

#zenin2-portal-root .m2-track-item:hover {
  background: rgba(18, 36, 62, 0.8);
  border-color: var(--ice-primary);
  transform: translateX(2px);
}

#zenin2-portal-root .m2-track-item.active {
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.4) 0%, rgba(14, 28, 50, 0.7) 100%);
  border-color: var(--ice-bright);
}

#zenin2-portal-root .m2-track-title {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-main);
}

#zenin2-portal-root .m2-track-item.active .m2-track-title {
  color: var(--ice-bright);
  font-weight: 600;
}

#zenin2-portal-root .m2-track-tag {
  font-size: 10.5px;
  color: var(--text-muted);
}

/* Çalar Kontrolleri */
#zenin2-portal-root .m2-player-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 6px;
  border-top: 1px solid rgba(56, 189, 248, 0.18);
}

#zenin2-portal-root .m2-ctrl-btn {
  padding: 6px 14px;
  background: rgba(37, 99, 235, 0.4);
  border: 1px solid var(--ice-primary);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-family: var(--m2-font-title);
  letter-spacing: 0.08em;
  color: #fff;
  transition: all var(--trans-fast);
}

#zenin2-portal-root .m2-ctrl-btn:hover {
  background: var(--ice-dim);
  box-shadow: 0 0 8px var(--ice-glow);
}

#zenin2-portal-root .m2-volume-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
}

#zenin2-portal-root .m2-vol-slider {
  accent-color: var(--ice-primary);
  height: 4px;
  cursor: pointer;
}

/* =========================================================================
   GELİŞMİŞ MOBİL UYUMLULUK VE ERGONOMİ (320px - 640px)
   ========================================================================= */
@media (max-width: 640px) {
  /* Sayfa Konteyneri & Kenar Boşlukları */
  #zenin2-portal-root .m2-viewport-container {
    padding-top: max(8px, env(safe-area-inset-top));
    padding-right: max(10px, env(safe-area-inset-right));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    padding-left: max(10px, env(safe-area-inset-left));
    gap: 8px;
  }

  /* iOS Otomatik Zoom'u Kesin Engelleme & Minimum 44px Dokunmatik Yükseklik */
  #zenin2-portal-root .m2-text-input {
    font-size: 16px !important; /* iOS WebKit 16px altını otomatik zoomlar, 16px bunu sıfırlar */
    height: 42px;
  }

  #zenin2-portal-root .m2-input-wrapper {
    min-height: 44px;
  }

  /* Dokunmatik Hedefler (Minimum 44px Apple/WCAG Uyumu) */
  #zenin2-portal-root .m2-tool-btn {
    min-height: 38px;
    padding: 8px 12px;
    font-size: 11.5px;
    touch-action: manipulation;
  }

  #zenin2-portal-root .m2-ch-btn {
    min-height: 36px;
    padding: 6px 12px;
    font-size: 11.5px;
    touch-action: manipulation;
  }

  #zenin2-portal-root .m2-tab-btn {
    min-height: 44px;
    padding: 12px 6px;
    font-size: 12.5px;
    letter-spacing: 0.08em;
    touch-action: manipulation;
  }

  #zenin2-portal-root .m2-btn-primary {
    height: 48px;
    font-size: 14px;
    touch-action: manipulation;
  }

  #zenin2-portal-root .m2-eye-btn {
    width: 44px;
    height: 44px;
    touch-action: manipulation;
  }

  #zenin2-portal-root .m2-checkbox-label {
    min-height: 40px;
    padding: 4px 0;
  }

  #zenin2-portal-root .m2-btn-acc-del {
    width: 36px;
    height: 36px;
  }

  #zenin2-portal-root .m2-music-close,
#zenin2-portal-root .m2-modal-close {
    width: 40px;
    height: 40px;
  }

  /* Üst Bar: Kompakt & Sıkışmayan Mobil Düzenleme */
  #zenin2-portal-root .m2-top-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    gap: 8px;
  }

  #zenin2-portal-root .m2-brand-mini span {
    font-size: 13.5px;
    letter-spacing: 0.12em;
  }

  #zenin2-portal-root .m2-mini-crest-img {
    width: 22px;
    height: 22px;
  }

  #zenin2-portal-root .m2-nav-links {
    order: 3;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid rgba(56, 189, 248, 0.15);
    padding-top: 8px;
    margin-top: 2px;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  #zenin2-portal-root .m2-nav-links::-webkit-scrollbar {
    display: none;
  }

  #zenin2-portal-root .m2-nav-links a {
    font-size: 11.5px;
    padding: 6px 4px;
    white-space: nowrap;
    touch-action: manipulation;
  }

  /* Portal Kutusu & Logo */
  #zenin2-portal-root .m2-center-stage {
    padding: 6px 0;
  }

  #zenin2-portal-root .m2-portal-box {
    padding: 18px 14px 16px;
    max-width: 100%;
  }

  #zenin2-portal-root .m2-zenin-logo-img {
    max-width: 260px;
    max-height: 105px;
  }

  #zenin2-portal-root .m2-subtitle-tag {
    font-size: 10px;
    letter-spacing: 0.18em;
  }

  /* Sunucu Durum Çubuğu */
  #zenin2-portal-root .m2-server-bar {
    padding: 6px 8px;
  }

  #zenin2-portal-root .m2-status-text {
    font-size: 11px;
  }

  #zenin2-portal-root .m2-status-text span {
    display: inline-block;
    font-size: 10.5px;
  }

  /* Alt Bilgi (Footer) - Home Indicator Korumalı */
  #zenin2-portal-root .m2-footer-bar {
    flex-direction: column;
    gap: 6px;
    text-align: center;
    padding: 8px 10px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }

  #zenin2-portal-root .m2-footer-links {
    gap: 14px;
  }

  #zenin2-portal-root .m2-footer-links a {
    padding: 4px 6px;
    touch-action: manipulation;
  }

  /* Modal Pencereleri */
  #zenin2-portal-root .m2-modal-card,
#zenin2-portal-root .m2-music-card {
    padding: 16px 14px;
    max-height: 90dvh;
    overflow-y: auto;
  }
}

/* =========================================================================
   EKSTRA KÜÇÜK EKRANLAR (320px - 380px: iPhone SE 1/2, Galaxy Fold Ön Ekranı)
   ========================================================================= */
@media (max-width: 380px) {
  #zenin2-portal-root .m2-viewport-container {
    padding-left: 6px;
    padding-right: 6px;
  }

  #zenin2-portal-root .m2-portal-box {
    padding: 14px 10px 14px;
  }

  #zenin2-portal-root .m2-zenin-logo-img {
    max-width: 220px;
    max-height: 90px;
  }

  /* Sunucu ve Kanal Seçimi Sıkışmasını Engelleme */
  #zenin2-portal-root .m2-server-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  #zenin2-portal-root .m2-channels-group {
    justify-content: stretch;
    width: 100%;
  }

  #zenin2-portal-root .m2-ch-btn {
    flex: 1;
    text-align: center;
    padding: 7px 0;
  }

  /* Sekme Butonları */
  #zenin2-portal-root .m2-tabs-header {
    gap: 0;
  }

  #zenin2-portal-root .m2-tab-btn {
    font-size: 11px;
    letter-spacing: 0.04em;
    padding: 10px 3px;
  }

  #zenin2-portal-root .m2-tab-badge {
    padding: 0 4px;
    margin-left: 2px;
  }

  /* Seçenekler Satırı */
  #zenin2-portal-root .m2-options-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  #zenin2-portal-root .m2-link-simple {
    align-self: flex-end;
  }
}


/* =========================================================================
   OYUNA DÖNÜŞ EKRANI (Session Resume)
   Sayfa oyun sırasında yenilendiğinde, oyun yeniden yüklenirken gösterilir.
   Giriş kutusunun çerçevesini, mührünü ve logosunu kullanır.
   ========================================================================= */
#zenin2-portal-root .m2-resume-screen {
  position: relative;
  z-index: 10;
  display: none;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  flex-direction: column;
}

#zenin2-portal-root .m2-resume-screen.show {
  display: flex;
}

/* Dönüş ekranı açıkken giriş düzeni (üst çubuk, kutu, alt bilgi) görünmez */
#zenin2-portal-root .m2-resume-screen.show ~ .m2-viewport-container {
  display: none;
}

#zenin2-portal-root .m2-resume-box {
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 30px 30px 20px;
}

#zenin2-portal-root .m2-resume-box .m2-zenin-logo-img {
  max-width: 290px;
  max-height: 112px;
}

/* Dönen buz halkası: yükleme sürerken canlılık verir, göz yormaz */
#zenin2-portal-root .m2-resume-rune {
  position: relative;
  width: 38px;
  height: 38px;
  margin-top: 4px;
}

#zenin2-portal-root .m2-resume-rune::before,
#zenin2-portal-root .m2-resume-rune span {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

#zenin2-portal-root .m2-resume-rune::before {
  border: 1px solid var(--ice-border);
  box-shadow: 0 0 14px var(--ice-aura), inset 0 0 10px var(--ice-aura);
}

#zenin2-portal-root .m2-resume-rune span {
  border: 2px solid transparent;
  border-top-color: var(--ice-bright);
  border-right-color: var(--ice-primary);
  filter: drop-shadow(0 0 6px var(--ice-glow));
  animation: resume-rune-spin 1.4s linear infinite;
}

@keyframes resume-rune-spin {
  to { transform: rotate(360deg); }
}

#zenin2-portal-root .m2-resume-title {
  font-family: var(--m2-font-title);
  font-size: 19px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ice-shimmer);
  text-shadow: 0 0 14px var(--ice-glow), 0 2px 6px rgba(0, 0, 0, 0.9);
}

#zenin2-portal-root .m2-resume-sub {
  margin: 0;
  font-family: var(--m2-font-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(186, 230, 253, 0.72);
}

#zenin2-portal-root .m2-resume-progress {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
  padding: 12px 12px 10px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: var(--radius-sm);
}

#zenin2-portal-root .m2-resume-exit {
  margin-top: 4px;
  padding: 4px 8px;
  background: none;
  border: 0;
  font-family: var(--m2-font-body);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: rgba(186, 230, 253, 0.5);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color var(--trans-normal), text-decoration-color var(--trans-normal);
}

#zenin2-portal-root .m2-resume-exit:hover,
#zenin2-portal-root .m2-resume-exit:focus-visible {
  color: var(--ice-bright);
  text-decoration-color: currentColor;
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  #zenin2-portal-root .m2-resume-rune span { animation-duration: 4s; }
}


/* =========================================================================
   PORTAL KÖKÜ (oyun içi). Sayfanın tamamını kaplar, oyunun tuvalinin üstünde durur.
   Giriş tamamlanınca önce .dismissed ile söner, ardından [hidden] ile DOM'dan
   görsel olarak tamamen çıkar. Böylece görünmez alanlar fareyi yakalamaz.
   ========================================================================= */
#zenin2-portal-root {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.4s var(--ease-smooth);
}

#zenin2-portal-root.dismissed {
  opacity: 0;
}

#zenin2-portal-root.dismissed,
#zenin2-portal-root.dismissed * {
  pointer-events: none !important;
}

#zenin2-portal-root[hidden] {
  display: none !important;
}

/* Sekme alanı yalnızca etkin sekme kadar yer kaplar. Taslakta bütün sekmeler aynı grid
   hücresinde üst üste durduğu için kart en uzun sekmenin (Kayıt Ol) boyunu alıyordu.
   Etkin olmayan sekme akıştan çıkar; kartın boyu sekme değişirken portal-controller.js
   tarafından yumuşakça uzatılıp kısaltılır. */
#zenin2-portal-root .m2-tab-viewport {
  position: relative;
  transition: height 0.35s var(--ease-soft);
}

#zenin2-portal-root .m2-tab-viewport.resizing {
  overflow: hidden;
}

#zenin2-portal-root .m2-tab-pane:not(.active) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}