:root{
  /* Base */
  --bg:#0b0b0f;
  --text:#ffffff;

  /* Music (turuncu → nar çiçeği → pembe) */
  --music-from:#ff5b3c;
  --music-mid:#ff8800;
  --music-to:#ff007a;

  /* Art (mavi → mor → magenta) */
  --art-from:#2aa8ff;
  --art-mid:#6a58ff;
  --art-to:#c040ff;

  --panel-radius:22px;
  --panel-border:1px solid rgba(255,255,255,.08);
  --panel-bg:rgba(255,255,255,.04);
  --speed:240ms;

  /* Oran: geniş ekranda 9:16, çok dar ekranda 1:1 */
  --ratio: 9/16;
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}

/* Layout: 2 kolon sabit (stack yok) */
.gateway{
  min-height:calc(100vh - 74px);
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(10px, 2.2vw, 22px);
  padding:clamp(8px, 3.5vw, 40px);
  align-items:center;  /* dikey ortalama */
}

/* Sabit yükseklik; genişlik daralır */
.portrait{
  height: min(78vh, 640px); /* sabit hissi: 640px tavan, 78vh üst sınır */
}


/* Panel */
.panel{
  position:relative;
  display:block;
  border:var(--panel-border);
  border-radius:var(--panel-radius);
  overflow:hidden;
background: transparent; /* hover öncesi ekstra koyuluk yok */
  text-decoration:none;
  transition:
    transform var(--speed) ease,
    box-shadow var(--speed) ease,
    border-color var(--speed) ease;
}
.panel:hover .media img,
.panel:focus-visible .media img{
  filter: none;
}


/* Görsel alanı */
.media, .media img{
  position:absolute; inset:0; width:100%; height:100%;
}
.media{
  background:#222428;
  margin:0;                 /* figure default margin'ını sıfırla */
  border-radius:inherit;    /* panel köşeleriyle birebir maskele */
}
.media img{
  display:block;            /* inline-gap çizgilerini önler */
  width:100%; height:100%;
  object-fit:cover;
  filter: grayscale(100%) saturate(0) contrast(108%);
  transition: filter var(--speed) ease;
}


/* Hover'da renkli overlay (default'ta tamamen görünmez) */
.overlay{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity var(--speed) ease;
  mix-blend-mode:screen; /* görselin üstünde neon etkisi */
}

.dark-layer {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25); /* %25 siyah */
  z-index: 0;                      /* görselin üzerinde ama yazının altında */
  pointer-events: none;
}

/* Spotlight: imleci takip eder (default 0) */
.spotlight{
  position:absolute; inset:-10%;
  pointer-events:none; opacity:0;
  transition:opacity var(--speed) ease;
  --mx:50%; --my:50%;
  background: radial-gradient(180px 180px at var(--mx) var(--my), #ffffff66, transparent 60%);
  mix-blend-mode:screen;
}

/* Ortadaki başlık */
.label{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center; z-index:1; padding:18px;
}
.label h2{
  margin:0 0 8px;
  font-size:clamp(26px,4.8vw,44px);
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.01em;

}
.label h2 span{ color:#fff; }
.label p{ margin:0; color:#ffffffc9; font-size:14px; }

#panel-music .label p{
  background: linear-gradient(90deg, var(--music-from), var(--music-mid), var(--music-to));
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
#panel-art .label p{
  background: linear-gradient(90deg, var(--art-from), var(--art-mid), var(--art-to));
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}

.panel:hover .label p,
.panel:focus-visible .label p{
  background:none;
  -webkit-text-fill-color:#fff !important;
  color:#fff !important;
}

/* Themed neon overlays */
#panel-music .overlay{
  background:
    radial-gradient(120% 120% at 20% 15%, color-mix(in oklab, var(--music-mid) 70%, transparent), transparent 60%),
    radial-gradient(90% 90% at 80% 85%, color-mix(in oklab, var(--music-to) 70%, transparent), transparent 60%),
    linear-gradient(135deg, var(--music-from), var(--music-mid), var(--music-to));
}
#panel-art .overlay{
  background:
    radial-gradient(120% 120% at 25% 20%, color-mix(in oklab, var(--art-mid) 70%, transparent), transparent 60%),
    radial-gradient(90% 90% at 80% 80%, color-mix(in oklab, var(--art-to) 70%, transparent), transparent 60%),
    linear-gradient(135deg, var(--art-from), var(--art-mid), var(--art-to));
}

#panel-music .label h2{
  background: linear-gradient(90deg, var(--music-from), var(--music-mid), var(--music-to));
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
#panel-art .label h2{
  background: linear-gradient(90deg, var(--art-from), var(--art-mid), var(--art-to));
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}

/* Hover/focus efektleri */
.panel:hover, .panel:focus-visible{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 16px 36px rgba(0,0,0,.42);
}

.panel:hover .label h2,
.panel:focus-visible .label h2{
  background:none;
  -webkit-text-fill-color:#fff !important; 
  color:#fff !important;
}

.panel:hover .overlay, .panel:focus-visible .overlay{ opacity:.78; }
.panel:hover .spotlight, .panel:focus-visible .spotlight{ opacity:1; }

.panel:not(:hover):not(:focus-visible) .overlay{ opacity:0; }


/* Klavye odağı */
.panel:focus-visible{
  outline:2px solid #ffffff66;
  outline-offset:2px;
  border-color:#ffffff33;
}



/* Motion tercihi */
@media (prefers-reduced-motion:reduce){
  .panel,.overlay,.spotlight{ transition:none !important; }
}

/* Dokunmatik hover efekti (aynı hover stillerini uygular) */
.panel.touched .overlay,
.panel.touched .spotlight,
.panel.touched .media img {
  opacity: 1;
  filter: none;
}

.panel:hover .dark-layer,
.panel:focus-visible .dark-layer,
.panel.touched .dark-layer {
  background: rgba(0, 0, 0, 0); /* hover’da biraz daha şeffaf */
}

/* Hover/focus/touch anında siyah stroke ekle */
.panel:hover .label h2,
.panel:focus-visible .label h2,
.panel.touched .label h2 {
  text-shadow:
    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000;
}

.panel:hover .label p,
.panel:focus-visible .label p,
.panel.touched .label p {
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}

.panel.touched .label h2,
.panel.touched .label p {
  background: none;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
}