/* ziroo.net teması ("Kapılar"): üç kapı (Oyunlar, Araçlar, Diskort), öne çıkan şerit (KAPIŞ) ve yıldızlı
   arka plan. Ortak tasarım hub.css'te (www/shared): kart çerçevesi, parıltı, açılış ve hareket azaltma oradan gelir.
   Kapı çizimleri index.html'de satır içi SVG; hareketleri burada (yalnız transform/opacity).
   Kapılarda sayı ya da liste yok (hub'lar değişince eskimesin); öne çıkan şerit elle güncellenir. */

:root {
  --au-1: 139 92 246;
  --au-2: 34 211 238;
  --au-3: 236 46 140;
  --title: linear-gradient(100deg, #ffe0f0 0%, #ff5fae 22%, #c084fc 52%, #67e8f9 80%, #e6fbff 100%);
}

/* ---------- Arka plan: hub ışıklarının üstünde yavaş parlayan yıldızlar ---------- */

.stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cg fill='white'%3E%3Ccircle cx='171' cy='431' r='1' fill-opacity='.8'/%3E%3Ccircle cx='291' cy='493' r='1.2' fill-opacity='.45'/%3E%3Ccircle cx='489' cy='527' r='.6'/%3E%3Ccircle cx='543' cy='244' r='1.2' fill-opacity='.3'/%3E%3Ccircle cx='17' cy='382' r='1' fill-opacity='.8'/%3E%3Ccircle cx='73' cy='151' r='1.2' fill-opacity='.45'/%3E%3Ccircle cx='241' cy='46' r='.8' fill-opacity='.8'/%3E%3Ccircle cx='455' cy='37' r='.8'/%3E%3Ccircle cx='512' cy='121' r='1' fill-opacity='.6'/%3E%3Ccircle cx='26' cy='161' r='1' fill-opacity='.3'/%3E%3Ccircle cx='130' cy='23' r='.8' fill-opacity='.45'/%3E%3Ccircle cx='568' cy='354' r='.8' fill-opacity='.8'/%3E%3Ccircle cx='157' cy='194' r='1' fill-opacity='.3'/%3E%3Ccircle cx='484' cy='243' r='.5' fill-opacity='.45'/%3E%3Ccircle cx='216' cy='597' r='1' fill-opacity='.3'/%3E%3Ccircle cx='128' cy='576' r='.8'/%3E%3Ccircle cx='400' cy='208' r='.8' fill-opacity='.45'/%3E%3Ccircle cx='551' cy='422' r='.8' fill-opacity='.6'/%3E%3Ccircle cx='465' cy='516' r='.8' fill-opacity='.6'/%3E%3Ccircle cx='499' cy='398' r='.8' fill-opacity='.3'/%3E%3Ccircle cx='98' cy='165' r='1' fill-opacity='.8'/%3E%3Ccircle cx='5' cy='506' r='.5'/%3E%3Ccircle cx='537' cy='230' r='1'/%3E%3Ccircle cx='329' cy='572' r='1' fill-opacity='.3'/%3E%3Ccircle cx='188' cy='177' r='1' fill-opacity='.6'/%3E%3Ccircle cx='343' cy='357' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 600px 600px;
  opacity: .45;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / .45) 50%, transparent 88%);
  mask-image: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / .45) 50%, transparent 88%);
  animation: twinkle-sky 9s ease-in-out infinite alternate;
}
.stars.st2 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='430' height='430'%3E%3Cg fill='white'%3E%3Ccircle cx='321' cy='133' r='.9' fill-opacity='.9'/%3E%3Ccircle cx='381' cy='336' r='.5' fill-opacity='.6'/%3E%3Ccircle cx='400' cy='130' r='.5' fill-opacity='.4'/%3E%3Ccircle cx='60' cy='193' r='1.3' fill-opacity='.4'/%3E%3Ccircle cx='197' cy='281' r='.5' fill-opacity='.9'/%3E%3Ccircle cx='130' cy='9' r='.7' fill-opacity='.6'/%3E%3Ccircle cx='146' cy='96' r='1.3' fill-opacity='.4'/%3E%3Ccircle cx='393' cy='411' r='.5' fill-opacity='.4'/%3E%3Ccircle cx='319' cy='319' r='1.3' fill-opacity='.4'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 430px 430px;
  animation-duration: 6.5s;
  animation-delay: -3s;
}
@keyframes twinkle-sky {
  from { opacity: .18; }
  to { opacity: .6; }
}

/* ---------- Başlık: ortada, büyük ZIROO yazısı ---------- */

.top { text-align: center; }

.wordmark {
  margin: clamp(16px, 2.6vw, 26px) auto 0;
  padding-left: .03em;
  font-size: clamp(80px, 22vw, 168px);
  letter-spacing: .03em;
}

.top .lede { margin-inline: auto; }

/* ---------- Kapılar: telefonda alt alta (çizim solda), geniş ekranda üç sütun (çizim üstte) ---------- */

.doors {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: clamp(30px, 4.5vw, 46px);
}

.door {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
}

/* Kapı vurguları ("r g b"): --a1 ana, --a2 ikinci, --ink-a açık yazı tonu */
.d-games { --a1: 255 79 163; --a2: 255 47 209; --ink-a: 255 200 228; }
.d-tools { --a1: 34 211 238; --a2: 96 165 250; --ink-a: 165 243 252; }
.d-diskort { --a1: 167 139 250; --a2: 129 140 248; --ink-a: 221 214 254; }

.portal {
  position: relative;
  min-height: 150px;
  overflow: hidden;
  border-radius: var(--radius) 0 0 var(--radius);
}
/* Telefonda çizim sabit boyutta, kapı + kanat ortada ve zemin kartın alt kenarında */
.portal .scene {
  position: absolute;
  bottom: 0;
  left: calc(50% - 109px);
  display: block;
  width: 192px;
  height: 144px;
}

.door .body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 18px 18px 18px 6px;
}
.door .name { font-size: 25px; }
.door .desc { margin-top: 6px; font-size: 14.5px; }
.door .row { padding-top: 14px; }
/* Düğmeye uzanan ince çizgi (oyun kartlarındaki gibi) */
.door .row::before {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgb(var(--a1) / .45), rgb(var(--a1) / 0));
}

/* Kapı tabelası: alt alan adı */
.plate {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  color: var(--ink-3);
  font: 500 12.5px/1 var(--display);
  letter-spacing: .05em;
}
.plate::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--a1));
  box-shadow: 0 0 8px rgb(var(--a1));
}

@media (min-width: 720px) {
  .doors { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .door { display: flex; flex-direction: column; }
  .portal {
    aspect-ratio: 16 / 11;
    min-height: 0;
    border-radius: var(--radius) var(--radius) 0 0;
  }
  .portal .scene { inset: 0; width: 100%; height: 100%; }
  .door .body { flex: 1; padding: 0 24px 24px; }
  .door .name { font-size: 31px; }
  .door .desc { font-size: 15px; }
  .door .row { padding-top: 18px; }
}

/* ---------- Kapı çizimi: hareketler ---------- */

.scene .halo, .scene .cog, .scene .px, .scene .ring, .scene .emblem, .scene .eq, .scene .btn {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* Fareyle üstüne gelince (ya da klavyeyle odaklanınca) içerisi aydınlanır, ışık yere yayılır, kapı biraz daha açılır */
.scene .room { opacity: .7; transition: opacity .5s; }
.scene .spill {
  opacity: .6;
  transform-box: fill-box;
  transform-origin: 50% 0;
  transition: opacity .5s, transform .7s var(--ease);
}
.scene .emblem { transition: transform .6s var(--ease); }
.scene .leaf {
  transform-box: fill-box;
  transform-origin: 0 50%;
  transition: transform .7s var(--ease);
}
.door:hover .room,
.door:focus-visible .room { opacity: 1; }
.door:hover .spill,
.door:focus-visible .spill { opacity: 1; transform: scale(1.12, 1.25); }
.door:hover .emblem,
.door:focus-visible .emblem { transform: translateY(-5px) scale(1.08); }
.door:hover .leaf,
.door:focus-visible .leaf { transform: scaleX(.78); }

/* Kapının arkasındaki ışık nefes alır */
.scene .halo { animation: halo 6s ease-in-out infinite alternate; }
@keyframes halo {
  from { transform: scale(.94); opacity: .7; }
  to { transform: scale(1.04); opacity: 1; }
}

/* Oyunlar: süzülen piksel kıvılcımları, sırayla yanan düğmeler */
.scene .px { opacity: .7; animation: twinkle 4.6s ease-in-out infinite; }
.scene .px.p2 { animation-duration: 5.4s; animation-delay: -1.2s; }
.scene .px.p3 { animation-duration: 4s; animation-delay: -2.6s; }
.scene .px.p4 { animation-duration: 6s; animation-delay: -.6s; }
.scene .px.p5 { animation-duration: 5s; animation-delay: -3.4s; }
.scene .px.p6 { animation-duration: 4.4s; animation-delay: -1.8s; }
@keyframes twinkle {
  0%, 100% { transform: translateY(0); opacity: .25; }
  50% { transform: translateY(-7px); opacity: 1; }
}

.scene .btn { animation: lamp 2.4s linear infinite; }
.scene .btn.n2 { animation-delay: -1.8s; }
.scene .btn.n3 { animation-delay: -1.2s; }
.scene .btn.n4 { animation-delay: -.6s; }
@keyframes lamp {
  0%, 22% { opacity: 1; }
  30%, 100% { opacity: .15; }
}

/* Araçlar: kapının arkasında yavaş dönen dişli */
.scene .cog { animation: spin 90s linear infinite; }

/* Diskort: kapıdan yayılan ses halkaları, konuşan çubuklar */
.scene .ring { opacity: .28; animation: ring 6s ease-out infinite; }
.scene .ring.r2 { animation-delay: -2s; }
.scene .ring.r3 { animation-delay: -4s; }
@keyframes ring {
  0% { transform: scale(.8); opacity: 0; }
  25% { opacity: .5; }
  100% { transform: scale(1.3); opacity: 0; }
}

.scene .eq { animation: eq 1.1s ease-in-out infinite alternate; }
.scene .eq.e2 { animation-duration: .8s; animation-delay: -.5s; }
.scene .eq.e3 { animation-duration: 1.3s; animation-delay: -.2s; }
.scene .eq.e4 { animation-duration: .9s; animation-delay: -.7s; }
.scene .eq.e5 { animation-duration: 1.2s; animation-delay: -.9s; }
@keyframes eq {
  from { transform: scaleY(.35); }
  to { transform: scaleY(1); }
}

.scene .wv { animation: blink 2.4s ease-in-out infinite; }
.scene .wv.w2 { animation-delay: -1.2s; }

/* ---------- Öne çıkan şerit (elle güncellenir) ---------- */

.feature {
  margin-top: 20px;
  animation: rise .8s var(--ease) .42s both;
}

.spot {
  --a1: 255 61 110;
  --a2: 255 138 61;
  --ink-a: 255 190 205;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 18px;
  padding: 14px 14px 14px 16px;
  border-radius: 18px;
}
@media (hover: hover) {
  .spot:hover { transform: translateY(-3px); }
}
.spot:focus-visible { transform: translateY(-3px); }

/* Ara sıra şeridin üstünden geçen ışık */
.spot .shine {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.spot .shine::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgb(var(--a1) / .16), transparent);
  transform: translateX(-110%);
  animation: shine 8s ease-in-out 1.6s infinite;
}
@keyframes shine {
  0% { transform: translateX(-110%); }
  28%, 100% { transform: translateX(260%); }
}

.spot-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  min-width: 0;
}
.spot-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 21px/1.1 var(--display);
  letter-spacing: .06em;
  color: #fff;
}
.spot-name svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: rgb(var(--a1));
  filter: drop-shadow(0 0 5px rgb(var(--a1) / .8));
}
.spot-desc {
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.45;
}

/* ---------- Alt bilgi ---------- */

.foot { justify-content: center; }

/* ---------- Telefon ---------- */

@media (max-width: 600px) {
  .spot { grid-template-columns: minmax(0, 1fr) auto; padding: 14px; }
  .spot .badge { justify-self: start; }
  .spot-text { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 380px) {
  .door { grid-template-columns: 108px minmax(0, 1fr); }
  .door .body { padding-right: 16px; }
  .door .name { font-size: 23px; }
}

/* ---------- Hareket azaltma (animasyon ve geçişleri hub.css kapatır; burada kalan dönüşümler) ---------- */

@media (prefers-reduced-motion: reduce) {
  .door:hover .spill, .door:focus-visible .spill,
  .door:hover .emblem, .door:focus-visible .emblem,
  .door:hover .leaf, .door:focus-visible .leaf,
  .spot:hover, .spot:focus-visible { transform: none; }
  .spot .shine { display: none; }
}