/* 00-kapi.css — giriş kapısı: büyük Tarçın (ortak #maskot-kabi, z 70) üstte
   selam, altta "İncele". Kapı üst çubuğun (z 20) ALTINDA kalır ki dil
   düğmesi kullanılabilsin; sayfa içeriğinin üstünde. */

.giris-kapisi {
  position: fixed; inset: 0; z-index: 18;
  display: none; flex-direction: column; justify-content: space-between; align-items: center;
  padding: 92px 20px calc(36px + env(safe-area-inset-bottom));
  text-align: center;
  background:
    radial-gradient(90% 60% at 50% 45%, rgba(212, 162, 78, 0.22), transparent 70%),
    var(--zemin);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.7s;
}
html.kapi-acik .giris-kapisi, html.kapi-kapaniyor .giris-kapisi { display: flex; }

/* Kapı açıkken kaydırma kilitli; basınca kapı yukarı süzülüp kaybolur. */
html.kapi-acik, html.kapi-acik body { overflow: hidden; overscroll-behavior: none; }
html.kapi-kapaniyor .giris-kapisi { opacity: 0; transform: translateY(-5%); visibility: hidden; pointer-events: none; }

.kapi-selam { font: 700 14px var(--govde-font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--kor); margin: 0 0 12px; }
.kapi-baslik { font-size: clamp(30px, 5vw, 60px); }

.kapi-alt { display: flex; flex-direction: column; align-items: center; }
.kapi-dugme {
  appearance: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 58px; padding: 0 32px; border-radius: 999px;
  background: var(--altin); color: #1e1a16; font: 700 18px var(--govde-font);
  animation: kapiNabiz 2.2s ease-in-out infinite;
  transition: transform 0.2s var(--yay);
}
.kapi-dugme svg { width: 20px; height: 20px; animation: kapiOk 1.4s ease-in-out infinite; }
.kapi-dugme:hover { transform: translateY(-2px); }
.kapi-dugme:active { transform: scale(0.97); }
.kapi-dugme:focus-visible { outline: 3px solid var(--kor); outline-offset: 4px; }
/* Kaydırmaya çalışınca: "önce bana bas". */
.kapi-dugme.durtuldu { animation: kapiSalla 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97), kapiNabiz 2.2s ease-in-out infinite; }

.kapi-ipucu { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--metin-ikincil); margin: 14px 0 0; }

@keyframes kapiNabiz {
  0%, 100% { box-shadow: 0 16px 32px -14px rgba(196, 112, 62, 0.65), 0 0 0 0 rgba(212, 162, 78, 0.55); }
  50% { box-shadow: 0 16px 32px -14px rgba(196, 112, 62, 0.65), 0 0 0 16px rgba(212, 162, 78, 0); }
}
@keyframes kapiOk { 0%, 100% { translate: 0 0; } 50% { translate: 0 4px; } }
@keyframes kapiSalla { 20%, 60% { translate: -7px 0; } 40%, 80% { translate: 7px 0; } }

@media (prefers-reduced-motion: reduce) {
  .kapi-dugme, .kapi-dugme svg, .kapi-dugme.durtuldu { animation: none; }
  .giris-kapisi { transition: opacity 0.2s ease, visibility 0s linear 0.2s; }
  html.kapi-kapaniyor .giris-kapisi { transform: none; }
}

@media (max-width: 480px) {
  .giris-kapisi { padding-top: 78px; }
}

/* ── Kapıdaki dönen kartlar (js/kapiYorunge.js) ─────────────────────
   Kap konumlandırılmamış; her kart fixed ve z 69/71 → Tarçın'ın (z 70)
   arkasından/önünden geçer. Merkez Tarçın'la aynı (ekranın ortası). */
.kapi-yorunge { display: none; }
html.kapi-acik .kapi-yorunge, html.kapi-kapaniyor .kapi-yorunge { display: block; }
/* Halka merkezi ekran ortasının biraz altında: arkadan geçen kart üstteki
   başlığa binmesin. Kapı açıkken Tarçın da aynı merkeze oturur. */
html.kapi-acik .maskot-kabi.maskot-genis { top: 56%; }
.kapi-karti {
  position: fixed; left: 50%; top: 56%; margin: 0;
  width: clamp(74px, min(9vw, 13vh), 124px);
  translate: -50% -50%;
  pointer-events: none;
}
.kapi-karti figcaption { font-size: 12px; padding: 7px 4px 9px; }
/* İncele: kartlar dışarı savrulurken solar. */
html.kapi-kapaniyor .kapi-karti {
  opacity: 0;
  transition: opacity 0.45s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}