/**
 * Hub giriş kapısı — kahvehane masası (keçe, lamba, emaye fincan).
 * Kimi.ai split kart *yapısı*; palet kopyası değil.
 * Font: hub Bricolage Grotesque + Geist (yeni @font-face yok).
 */
#hesap-kapi[data-hesap-kapi] {
  --kece: #143D32;
  --is: #0B1210;
  --lamba: #E6B84A;
  --emaye: #1A3F66;
  --skor: #D9CDB8;
  --cay: #7A1F2B;
  --hk-sure: 320ms;
  --hk-ease: cubic-bezier(.22, 1, .36, 1);
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 3vw, 2rem);
  box-sizing: border-box;
  font-family: Geist, system-ui, sans-serif;
  color: var(--skor);
}

#hesap-kapi[hidden],
#hesap-kapi:not(.acik) {
  display: none;
}

body.hk-kilit {
  overflow: hidden;
}

/* —— mask (dış tık) —— */
.hk-mask {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  border: 0;
  padding: 0;
  background: color-mix(in srgb, var(--is) 78%, transparent);
  cursor: pointer;
  animation: hk-mask-gir var(--hk-sure) ease both;
}

/* —— split kart —— */
.hk-kart[role="dialog"] {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(15rem, 0.92fr) minmax(17rem, 1.08fr);
  width: min(46rem, 100%);
  max-height: min(36rem, 90vh);
  overflow: hidden;
  background: var(--kece);
  border: 1px solid color-mix(in srgb, var(--lamba) 28%, var(--kece));
  border-radius: 0.7rem;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--is) 50%, transparent),
    0 1.5rem 3rem color-mix(in srgb, var(--is) 70%, transparent),
    0 0 4rem color-mix(in srgb, var(--lamba) 12%, transparent);
  animation: hk-kart-gir 360ms var(--hk-ease) both;
}

.hk-kart :focus-visible {
  outline: 2px solid var(--lamba);
  outline-offset: 3px;
}

/* GIS iframe trap’e kilitlenmesin — clip / pointer-events yok */
#hk-google iframe,
.hk-kart iframe {
  max-width: 100%;
  pointer-events: auto;
  overflow: visible;
}

/* —— sol sahne: keçe + lamba + kâğıt + fincan —— */
.hk-sahne {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 16rem;
  padding: 1.25rem 1.1rem 5.5rem;
  background-color: var(--kece);
  background-image:
    radial-gradient(120% 70% at 50% -8%, color-mix(in srgb, var(--lamba) 34%, transparent), transparent 58%),
    radial-gradient(40% 28% at 72% 78%, color-mix(in srgb, var(--cay) 18%, transparent), transparent 70%),
    repeating-linear-gradient(
      92deg,
      transparent,
      transparent 2px,
      color-mix(in srgb, var(--is) 7%, transparent) 2px,
      color-mix(in srgb, var(--is) 7%, transparent) 3px
    );
  color: var(--skor);
}

.hk-sahne::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
  width: 3.2rem;
  height: 5.4rem;
  transform: translateX(-50%);
  background:
    linear-gradient(var(--lamba), var(--lamba)) 50% 0 / 1.5px 2.7rem no-repeat,
    conic-gradient(from 180deg at 50% 2.7rem, var(--lamba) 40deg, var(--is) 90deg, var(--is) 270deg, var(--lamba) 320deg, var(--lamba) 360deg);
  clip-path: polygon(46% 0, 54% 0, 54% 48%, 92% 48%, 72% 100%, 28% 100%, 8% 48%, 46% 48%);
  opacity: 0.92;
  pointer-events: none;
}

.hk-sahne::after {
  content: "";
  position: absolute;
  right: 6%;
  bottom: 8%;
  z-index: 1;
  width: min(11.5rem, 78%);
  aspect-ratio: 280 / 220;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 220' fill='none'%3E%3Cg transform='translate(8 18) rotate(-12)'%3E%3Crect width='132' height='168' rx='2' fill='%23D9CDB8'/%3E%3Crect x='10' y='16' width='78' height='6' fill='%23143D32' opacity='.3'/%3E%3Crect x='10' y='32' width='104' height='3' fill='%23143D32' opacity='.16'/%3E%3Crect x='10' y='44' width='96' height='3' fill='%23143D32' opacity='.14'/%3E%3Crect x='10' y='56' width='88' height='3' fill='%23143D32' opacity='.12'/%3E%3Crect x='10' y='76' width='42' height='3' fill='%23143D32' opacity='.2'/%3E%3Crect x='62' y='76' width='28' height='3' fill='%237A1F2B' opacity='.45'/%3E%3Crect x='10' y='92' width='36' height='3' fill='%23143D32' opacity='.18'/%3E%3Crect x='56' y='92' width='22' height='3' fill='%23143D32' opacity='.18'/%3E%3Cellipse cx='98' cy='124' rx='26' ry='18' fill='%237A1F2B' opacity='.32'/%3E%3C/g%3E%3Cellipse cx='198' cy='198' rx='52' ry='10' fill='%230B1210' opacity='.4'/%3E%3Cellipse cx='198' cy='190' rx='44' ry='8' fill='%230d2844'/%3E%3Cpath d='M160 118c2 42 16 62 38 62s36-20 38-62h-76z' fill='%231A3F66'/%3E%3Cellipse cx='198' cy='118' rx='38' ry='14' fill='%232a5a88'/%3E%3Cellipse cx='198' cy='116' rx='29' ry='10' fill='%230B1210'/%3E%3Cellipse cx='198' cy='117' rx='26' ry='8' fill='%237A1F2B'/%3E%3Cellipse cx='188' cy='114' rx='10' ry='3' fill='%23E6B84A' opacity='.28'/%3E%3Cpath d='M236 126c20 2 28 16 26 30-2 14-16 22-34 18' stroke='%231A3F66' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M186 92c0-10 5-16 5-24' stroke='%23D9CDB8' stroke-width='2' stroke-linecap='round' opacity='.4'/%3E%3Cpath d='M198 90c2-12 0-18 6-26' stroke='%23D9CDB8' stroke-width='2' stroke-linecap='round' opacity='.32'/%3E%3Cpath d='M210 92c-1-8 5-14 3-22' stroke='%23D9CDB8' stroke-width='2' stroke-linecap='round' opacity='.26'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

.hk-sahne .hk-oyun,
.hk-sahne .hk-fincan,
.hk-sahne .hk-kagit {
  position: relative;
  z-index: 2;
}

.hk-oyun {
  margin: 2.6rem 0 0;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--skor);
  text-shadow: 0 1px 0 color-mix(in srgb, var(--is) 45%, transparent);
}

.hk-fincan {
  display: block;
  width: min(10rem, 70%);
  height: auto;
  margin-top: auto;
  pointer-events: none;
}

.hk-sahne:has(.hk-fincan)::after {
  display: none;
}

.hk-kagit {
  position: absolute;
  left: 8%;
  top: 38%;
  width: 42%;
  aspect-ratio: 3 / 4;
  background:
    radial-gradient(circle at 78% 72%, color-mix(in srgb, var(--cay) 38%, transparent), transparent 42%),
    repeating-linear-gradient(
      var(--skor) 0 0.7rem,
      color-mix(in srgb, var(--kece) 18%, var(--skor)) 0.7rem 0.78rem
    );
  box-shadow: 0 0.4rem 0.8rem color-mix(in srgb, var(--is) 40%, transparent);
  transform: rotate(-11deg);
  pointer-events: none;
}

.hk-sahne:has(.hk-kagit)::after {
  background-size: 58% auto;
  background-position: 100% 100%;
}

/* —— sağ form —— */
.hk-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
  padding: 1.35rem 1.4rem 1.15rem;
  overflow: auto;
  overscroll-behavior: contain;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--is) 28%, var(--kece)),
      color-mix(in srgb, var(--is) 42%, var(--kece))
    );
  border-left: 1px solid color-mix(in srgb, var(--lamba) 14%, transparent);
}

#hk-baslik {
  margin: 0 0 0.15rem;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--skor);
}

#hk-google {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 100%;
  min-height: 3rem;
  overflow: visible;
  background: color-mix(in srgb, var(--is) 35%, transparent);
  border: 1px solid color-mix(in srgb, var(--skor) 14%, transparent);
  border-radius: 0.45rem;
}

#hk-google:empty {
  min-height: 3rem;
}

.hk-veya {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.7rem;
  align-items: center;
  margin: 0.1rem 0;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: color-mix(in srgb, var(--skor) 48%, transparent);
}

.hk-veya::before,
.hk-veya::after {
  content: "";
  height: 1px;
  background: color-mix(in srgb, var(--skor) 16%, transparent);
}

.hk-telefon {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem 0;
}

.hk-telefon:empty,
.hk-telefon[hidden] {
  display: none;
}

#hk-ulke,
#hk-tel,
#hk-otp,
#hk-kod,
#hk-tel-not {
  min-width: 0;
}

#hk-otp,
#hk-kod,
#hk-tel-not {
  grid-column: 1 / -1;
}

#hk-ulke {
  width: 3.35rem;
  padding-left: 0.45rem;
  padding-right: 0.45rem;
  text-align: center;
  color: color-mix(in srgb, var(--skor) 68%, transparent);
  border-radius: 0.4rem 0 0 0.4rem;
  cursor: default;
  pointer-events: none;
}

#hk-tel {
  border-left: 0;
  border-radius: 0 0.4rem 0.4rem 0;
}

#hk-otp {
  letter-spacing: 0.22em;
  font-variant-numeric: tabular-nums;
}

#hk-kod {
  width: 100%;
  min-height: 2.35rem;
  padding: 0.45rem 0.8rem;
  color: var(--skor);
  font: 600 0.85rem/1.2 "Bricolage Grotesque", system-ui, sans-serif;
  background: color-mix(in srgb, var(--emaye) 78%, var(--is));
  border: 1px solid color-mix(in srgb, var(--skor) 16%, transparent);
  border-radius: 0.4rem;
  cursor: pointer;
}

#hk-kod:hover,
#hk-kod:focus-visible {
  background: color-mix(in srgb, var(--emaye) 92%, var(--lamba));
}

#hk-kod:disabled {
  opacity: 0.55;
  cursor: default;
}

#hk-tel-not {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--skor) 52%, transparent);
}

#hk-tel-not:empty {
  display: none;
}

.hk-form input[type="email"],
.hk-form input[type="password"],
.hk-form input[type="tel"],
.hk-form input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 0.8rem;
  color: var(--skor);
  font: 450 0.95rem/1.3 Geist, system-ui, sans-serif;
  background: color-mix(in srgb, var(--is) 55%, var(--kece));
  border: 1px solid color-mix(in srgb, var(--skor) 18%, transparent);
  border-radius: 0.4rem;
}

.hk-form input::placeholder {
  color: color-mix(in srgb, var(--skor) 42%, transparent);
}

.hk-form button[type="submit"] {
  padding: 0.6rem 0.9rem;
  color: var(--is);
  font: 650 0.9rem/1.2 "Bricolage Grotesque", system-ui, sans-serif;
  background: var(--lamba);
  border: 0;
  border-radius: 0.4rem;
  cursor: pointer;
}

details.hk-gelismis {
  margin: 0;
  color: var(--skor);
  font-size: 0.72rem;
}

.hk-gelismis > summary {
  cursor: pointer;
  list-style: none;
  width: fit-content;
  padding: 0.15rem 0;
  color: var(--skor);
  font-size: 0.72rem;
}

.hk-gelismis > summary::-webkit-details-marker {
  display: none;
}

.hk-gelismis > summary::after {
  content: " ▾";
  color: var(--skor);
}

.hk-gelismis[open] > summary::after {
  content: " ▴";
}

.hk-gelismis .hk-gelismis-govde {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.55rem;
}

.hk-gelismis:not([open]) .hk-gelismis-govde,
.hk-gelismis:not([open]) form,
.hk-gelismis:not([open]) input {
  display: none;
}

#hesap-anonim {
  appearance: none;
  align-self: center;
  margin-top: auto;
  padding: 0.35rem 0.2rem;
  color: color-mix(in srgb, var(--skor) 46%, transparent);
  font: 400 0.78rem/1.4 Geist, system-ui, sans-serif;
  letter-spacing: 0.01em;
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  background: none;
  border: 0;
  box-shadow: none;
  cursor: pointer;
}

#hesap-anonim:hover,
#hesap-anonim:focus-visible {
  color: var(--skor);
}

@keyframes hk-mask-gir {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hk-kart-gir {
  from {
    opacity: 0;
    transform: translateY(0.6rem) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 640px) {
  #hesap-kapi[data-hesap-kapi] {
    padding: 0;
    align-items: stretch;
  }

  .hk-kart[role="dialog"] {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
  }

  .hk-sahne {
    min-height: 6.5rem;
    max-height: 28vh;
    padding: 0.85rem 1rem 3.2rem;
  }

  .hk-sahne::before {
    height: 3.6rem;
    width: 2.2rem;
  }

  .hk-sahne::after {
    width: min(8rem, 42%);
    right: 4%;
    bottom: 4%;
  }

  .hk-oyun {
    margin-top: 1.6rem;
    font-size: 1.2rem;
  }

  .hk-form {
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--lamba) 14%, transparent);
    padding: 1.1rem 1.1rem 1.4rem;
  }

  #hk-google {
    width: 100%;
    min-height: 44px;
    flex: 0 0 auto;
  }

  #hk-google iframe {
    width: 100%;
    min-height: 44px;
    pointer-events: auto;
    overflow: visible;
  }

  #hk-ulke,
  #hk-tel,
  #hk-otp {
    min-height: 44px;
  }

  #hk-kod {
    min-height: 44px;
    font-size: 0.85rem;
  }

  #hesap-anonim {
    margin-top: 1.25rem;
    padding: 0.35rem 0.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #hesap-kapi[data-hesap-kapi],
  #hesap-kapi[data-hesap-kapi] *,
  #hesap-kapi[data-hesap-kapi] *::before,
  #hesap-kapi[data-hesap-kapi] *::after {
    transition: none;
    animation: none;
  }
}