@font-face {
  font-family: 'PressStart2P';
  src: url('../fonts/PressStart2P.ttf') format('truetype');
}

:root{
  --neon: #00ff33; /* Ana Neon Yeşil */
  --neon-dim: #00c22a;
  --accent: #00ffd6; /* Sayfa Numarası Rengi */
  --bg: #000;
  --red: #e60000;
  --frame-shadow: rgba(0,255,51,0.3); /* Çerçeve Işıklandırması */

  --frame-width: 900px;
}

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

html, body{
  height:100%;
  font-family: 'PressStart2P', monospace;
  background:
    radial-gradient(circle at 10% 10%, rgba(2,2,2,0.98), rgba(12,12,12,0.98)),
    repeating-radial-gradient(#0b0b0b 0 2px,#0e0e0e 2px 6px);
  color: var(--neon);
  display:flex;
  justify-content:center;
  align-items:flex-start;
  
  /* SADECE DİKEY DOLGUYU BIRAK, YATAY ORTALAMAYI DESTEKLE */
  padding:20px; 
  
  overflow-x: hidden;
  overflow-y: hidden;
}

.page-bg {
  width: 100%;
  max-width: 1400px;
  display: flex;
  margin: 0 auto;
  justify-content: center;
  align-items: flex-start;
  z-index: 10;
  position: relative;
  min-height: 100vh;
  
  flex-direction: column; 
  align-items: center; /* Ana çerçeveyi ortalamak için */
  gap: 20px;
}

/* TELETEXT FRAME */
.teletext-frame {
  width: 100%;
  max-width: var(--frame-width);
  margin: 0px auto; /* Yeterli olmalı */
  padding: 18px 25px; /* Yanlardan daha fazla boşluk */
  background: linear-gradient(#000,#030303);
  border:6px solid var(--neon);
  box-shadow: 0 0 50px var(--frame-shadow), inset 0 0 25px rgba(0,255,51,0.1);
  display:flex;
  flex-direction:column;
  gap:12px;
  box-sizing: border-box;
  transition: transform 0.3s ease;
  position: relative;
  z-index: 5;
  overflow: visible;
  min-height: 500px; /* En az bir yükseklik */
  order: 1;
  /* Sola kaydırma kuralı kaldırıldı, artık ortada olmalı. */
  transform: none; 
}

/* HEADER */
.header { 
  text-align:center; 
  margin-bottom:12px; 
  width: 100%;
}
.title-red{
  display:inline-block;
  background:var(--red);
  color:#fff;
  padding:10px 34px;
  border:4px solid #b10000;
  box-shadow: 0 0 12px rgba(230,0,0,0.5);
  font-size:20px;
  letter-spacing:6px;
  max-width:100%;
  line-height: 1.2;
  text-align: center;
}
.title-main, .by {
  display: inline-block;
}
.by {
  font-size: 11px;
  margin-left: 10px;
  color: #ccc;
  text-align: center;
}
.subtitle { 
  color: var(--neon); 
  margin-top:6px; 
  font-size:11px; 
  opacity:0.92; 
  word-wrap: break-word;
}

/* SLIDER STİLLERİ KALDIRILDI */


/* CONTENT (Sütunlar) */
.content {
  display:flex;
  flex-wrap:nowrap; 
  gap:30px;
  justify-content:space-between;
  width: 100%;
  padding: 10px 0;
}
.col {
  flex:1 1 200px;
  min-width:180px;
}
.col h3 { 
  color:#00e04d; 
  margin-bottom:10px; 
  font-size:14px; 
  text-decoration: underline;
  text-decoration-color: var(--accent);
  padding-bottom: 2px;
}
.col ul { 
  list-style:none; 
  padding-left:0; 
}
.col li { 
  margin-bottom:6px; 
  display:flex; 
  align-items:flex-start; 
  gap:6px; 
  font-size:12px; 
  color:var(--neon); 
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}
.col li a {
  text-decoration: none;
  color: var(--neon);
}
.col .num { 
  color:var(--accent); 
  width:40px; 
  font-weight:700; 
  flex-shrink: 0;
}

/* MARQUEE */
.marquee-container{
  overflow:hidden;
  white-space:nowrap;
  padding:8px 6px;
  margin:10px 0;
  border-top:2px dashed var(--neon-dim);
  border-bottom:2px dashed var(--neon-dim);
  width: 100%;
}
.marquee { 
  display:inline-block; 
  animation:marquee 12s linear infinite; 
  letter-spacing:2px; 
  font-size: 12px;
}
@keyframes marquee { 
  0%{transform:translateX(100%);}
  100%{transform:translateX(-100%);} 
}

/* PAGER */
.pager { 
  display:flex; 
  flex-direction:column; 
  align-items:center; 
  gap:10px; 
  margin-top:20px; 
  width: 100%;
  border-top: 1px solid var(--neon-dim);
  padding-top: 15px;
}

.page-input-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pager label { 
  font-size:12px; 
  color:var(--neon-dim); 
}
#page-input { 
  width:100px; 
  padding:6px; 
  background:#000; 
  border:2px solid var(--neon); 
  color:var(--neon); 
  text-align:center; 
  font-family: 'PressStart2P', monospace;
  font-size: 9px;
}
#go-btn { 
  padding:6px 12px; 
  background:var(--neon); 
  color:#000; 
  border:2px solid #00b33a; 
  cursor:pointer; 
  font-weight:700; 
  font-size:12px; 
  font-family: 'PressStart2P', monospace;
}
.quick-links { 
  display:flex; 
  flex-wrap:wrap; 
  gap:18px; 
  justify-content:center; 
  margin-top:6px; 
  width: 100%;
}
.quick-links .ql { 
  font-size:11px; 
  color:var(--neon); 
  text-decoration:none; 
  border: 1px solid var(--neon-dim); /* Kenarlık ekle */
  padding:3px 8px; 
  opacity:0.95; 
  word-wrap: break-word;
  white-space: nowrap;
  transition: all 0.1s;
}
.quick-links .ql:hover {
  background: var(--neon-dim);
  color: #000;
}

/* POPUP */
.popup {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.95);
  justify-content:center;
  align-items:center;
  padding:20px;
  z-index:1000;
  overflow-y: auto;
}
.popup .popup-content {
  background:#000;
  border:4px solid var(--neon);
  padding:18px;
  width:90%;
  max-width:780px;
  max-height:90vh;
  overflow:auto;
  color:var(--neon);
  position: relative;
  border-radius: 8px;
}
/* ... Diğer pop-up stilleri ... */

/* FOOTER */
.footer { 
  text-align:center; 
  margin-top:10px; 
  font-size:11px; 
  color:var(--neon-dim); 
  width: 100%;
}

/* ===== MOBİL UYUMLULUK (TAMAMEN SADELEŞTİRİLDİ) ===== */
@media (max-width: 1200px) {
  .teletext-frame {
    max-width: 95%;
  }
}