/* ==========================================================================
   Oyun Atölyesi sayfa şablonu (page-oyun-atolyesi.php)
   Tüm kurallar .fkm-oa altında tutulur; temanın diğer sayfalarını etkilemez.
   ========================================================================== */

.fkm-oa {
  --oa-red: #e40514;
  --oa-red-dark: #b8040f;
  --oa-ink: #1a1a1a;
  --oa-muted: #5f5a5c;
  --oa-blush: #fff0ec;
  --oa-line: #ecdfdb;
  --oa-field: #f7f3f2;
  --oa-yellow: #ffc533;
  --oa-teal: #1fa99a;
  --oa-blue: #2f6fde;

  color: var(--oa-ink);
  font-family: "Graphik", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.fkm-oa *,
.fkm-oa *::before,
.fkm-oa *::after {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Buton
   -------------------------------------------------------------------------- */
.fkm-oa .oa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 32px;
  border-radius: 999px;
  background: var(--oa-red);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  transition: background-color .2s ease, transform .2s ease;
}

.fkm-oa .oa-btn:hover {
  background: var(--oa-red-dark);
  color: #fff;
}

.fkm-oa .oa-btn:active {
  transform: translateY(1px);
}

.fkm-oa a:focus-visible,
.fkm-oa button:focus-visible,
.fkm-oa input[type="submit"]:focus-visible {
  outline: 3px solid var(--oa-ink);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.fkm-oa .oa-hero {
  background: var(--oa-blush);
  padding: 72px 0 168px;
  border-radius: 0 0 48px 48px;
  overflow: hidden;
}

.fkm-oa .oa-hero__logo {
  display: block;
  width: auto;
  height: 88px;
  max-width: 100%;
  margin-bottom: 32px;
}

.fkm-oa .oa-hero__brand {
  margin-bottom: 20px;
  color: var(--oa-red);
  font-size: 1.0625rem;
  font-weight: 600;
}

.fkm-oa .oa-hero__title {
  max-width: 11ch;
  margin-bottom: 28px;
  font-size: clamp(2.75rem, 1.6rem + 3.8vw, 5rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.fkm-oa .oa-hero__lead {
  max-width: 34em;
  color: var(--oa-muted);
  font-size: 1.125rem;
  line-height: 1.7;
}

.fkm-oa .oa-hero__lead p {
  margin: 0;
}

.fkm-oa .oa-hero__lead p + p {
  margin-top: 1em;
}

.fkm-oa .oa-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 36px;
}

.fkm-oa .oa-hero__note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--oa-ink);
  font-size: .9375rem;
  font-weight: 500;
}

.fkm-oa .oa-hero__note::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--oa-yellow);
  box-shadow: 0 0 0 4px rgba(255, 197, 51, .3);
}

.fkm-oa .oa-hero__visual {
  max-width: 640px;
  margin-left: auto;
}

.fkm-oa .oa-hero__img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 999px 999px 32px 32px;
}

/* Oyuncak blok illüstrasyonu */
.fkm-oa .oa-toys {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.fkm-oa .oa-toys__shadow {
  fill: rgba(26, 26, 26, .07);
}

.fkm-oa .oa-toys__letter {
  font-family: "Graphik", sans-serif;
  font-size: 68px;
  font-weight: 700;
  fill: #fff;
}

.fkm-oa .oa-toys__letter--dark {
  fill: var(--oa-ink);
}

.fkm-oa .oa-toy {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .fkm-oa .oa-toy {
    animation: oa-drop .9s both;
  }

  .fkm-oa .oa-toy--arch {
    animation-name: oa-rise;
    animation-duration: .7s;
    animation-timing-function: cubic-bezier(.34, 1.4, .64, 1);
  }

  .fkm-oa .oa-toy--k { animation-delay: .25s; }
  .fkm-oa .oa-toy--m { animation-delay: .4s; }
  .fkm-oa .oa-toy--f { animation-delay: .6s; }
  .fkm-oa .oa-toy--ball { animation-delay: .85s; }
}

@keyframes oa-drop {
  0% {
    opacity: 0;
    transform: translateY(-200px);
    animation-timing-function: cubic-bezier(.55, 0, 1, .45);
  }
  20% {
    opacity: 1;
  }
  62% {
    transform: translateY(0) scale(1, 1);
    animation-timing-function: ease-out;
  }
  76% {
    transform: translateY(0) scale(1.06, .9);
    animation-timing-function: ease-in-out;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1, 1);
  }
}

@keyframes oa-rise {
  from {
    opacity: 0;
    transform: scaleY(0);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* --------------------------------------------------------------------------
   Etkinlik bilgileri
   -------------------------------------------------------------------------- */
.fkm-oa .oa-info {
  position: relative;
  z-index: 1;
  margin-top: -104px;
}

.fkm-oa .oa-info__card {
  display: grid;
  grid-template-columns: 1fr 1fr 1.35fr;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 30px 60px -30px rgba(120, 18, 10, .28), 0 0 0 1px rgba(120, 18, 10, .04);
}

.fkm-oa .oa-info__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 36px 40px;
}

.fkm-oa .oa-info__item + .oa-info__item {
  border-left: 1px solid var(--oa-line);
}

.fkm-oa .oa-info__label {
  margin-bottom: 4px;
  color: var(--oa-muted);
  font-size: .875rem;
  font-weight: 500;
}

.fkm-oa .oa-info__value {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.fkm-oa .oa-info__sub {
  color: var(--oa-muted);
  font-size: 1.0625rem;
}

.fkm-oa .oa-info__address {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 26em;
  color: var(--oa-muted);
  text-decoration: none;
}

.fkm-oa .oa-info__address::before {
  content: "";
  flex: 0 0 14px;
  width: 14px;
  height: 18px;
  margin-top: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='18' viewBox='0 0 14 18'%3E%3Cpath d='M7 1a6 6 0 0 0-6 6c0 4.5 6 10 6 10s6-5.5 6-10a6 6 0 0 0-6-6Z' fill='none' stroke='%23e40514' stroke-width='1.8'/%3E%3Ccircle cx='7' cy='7' r='2.2' fill='%23e40514'/%3E%3C/svg%3E") no-repeat center / contain;
}

.fkm-oa .oa-info__address address {
  margin: 0;
  font-size: .9375rem;
  font-style: normal;
  line-height: 1.5;
}

.fkm-oa .oa-info__address:hover {
  color: var(--oa-ink);
}

.fkm-oa .oa-info__address:hover address {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fkm-oa .oa-info__link {
  margin-top: 6px;
  color: var(--oa-red);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fkm-oa .oa-info__link:hover {
  color: var(--oa-red-dark);
}

.fkm-oa .oa-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fkm-oa .oa-slot {
  display: flex;
  flex-direction: column;
  min-width: 120px;
  padding: 12px 18px;
  border-radius: 16px;
  background: var(--oa-blush);
}

.fkm-oa .oa-slot__name {
  color: var(--oa-muted);
  font-size: .8125rem;
  font-weight: 500;
}

.fkm-oa .oa-slot__time {
  color: var(--oa-red);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Başvuru
   -------------------------------------------------------------------------- */
.fkm-oa .oa-apply {
  padding: 104px 0 128px;
}

.fkm-oa .oa-apply__intro {
  position: sticky;
  top: 32px;
}

.fkm-oa .oa-apply__title {
  margin-bottom: 18px;
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.fkm-oa .oa-apply__text {
  max-width: 28em;
  color: var(--oa-muted);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.fkm-oa .oa-apply__text p {
  margin: 0;
}

.fkm-oa .oa-apply__text p + p {
  margin-top: 1em;
}

.fkm-oa .oa-apply__card {
  padding: 44px;
  border: 1px solid var(--oa-line);
  border-radius: 28px;
  background: #fff;
}

.fkm-oa .oa-closed {
  color: var(--oa-muted);
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* Form ızgarası */
.fkm-oa .oa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 20px;
}

.fkm-oa .oa-field {
  min-width: 0;
}

.fkm-oa .oa-field--full {
  grid-column: 1 / -1;
}

.fkm-oa .oa-field > label,
.fkm-oa .oa-sessions legend {
  display: block;
  margin-bottom: 8px;
  color: var(--oa-ink);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.3;
}

.fkm-oa .wpcf7-form-control-wrap {
  display: block;
  position: relative;
}

/* Metin alanları ve seçim kutusu */
.fkm-oa .oa-grid input[type="text"],
.fkm-oa .oa-grid input[type="tel"],
.fkm-oa .oa-grid input[type="email"],
.fkm-oa .oa-grid select {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 18px;
  border: 1.5px solid transparent;
  border-radius: 14px;
  background-color: var(--oa-field);
  color: var(--oa-ink);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.fkm-oa .oa-grid select {
  padding-right: 48px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' fill='none' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 14px 9px;
  cursor: pointer;
}

.fkm-oa .oa-grid input::placeholder {
  color: #9b9395;
  opacity: 1;
}

.fkm-oa .oa-grid input[type="text"]:hover,
.fkm-oa .oa-grid input[type="tel"]:hover,
.fkm-oa .oa-grid input[type="email"]:hover,
.fkm-oa .oa-grid select:hover {
  border-color: var(--oa-line);
}

.fkm-oa .oa-grid input[type="text"]:focus,
.fkm-oa .oa-grid input[type="tel"]:focus,
.fkm-oa .oa-grid input[type="email"]:focus,
.fkm-oa .oa-grid select:focus {
  border-color: var(--oa-red);
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(228, 5, 20, .12);
  outline: none;
}

.fkm-oa .oa-grid .wpcf7-not-valid:not(.wpcf7-radio):not(.wpcf7-acceptance) {
  border-color: var(--oa-red);
  background-color: #fff6f5;
}

.fkm-oa .wpcf7-not-valid-tip {
  display: block;
  margin-top: 8px;
  color: var(--oa-red-dark);
  font-size: .8125rem;
  font-weight: 500;
}

/* Seans seçimi */
.fkm-oa .oa-sessions {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.fkm-oa .oa-sessions legend {
  float: none;
  width: auto;
  padding: 0;
  margin-bottom: 10px;
}

.fkm-oa .oa-sessions .wpcf7-radio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  counter-reset: oa-seans;
}

.fkm-oa .oa-sessions .wpcf7-list-item {
  display: block;
  margin: 0;
  counter-increment: oa-seans;
}

.fkm-oa .oa-sessions .wpcf7-list-item label {
  display: block;
  position: relative;
  margin: 0;
  padding: 18px 60px 18px 22px;
  border: 1.5px solid var(--oa-line);
  border-radius: 18px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

.fkm-oa .oa-sessions .wpcf7-list-item label:hover {
  border-color: #d9c6c1;
}

.fkm-oa .oa-sessions input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.fkm-oa .oa-sessions .wpcf7-list-item-label {
  display: block;
  color: var(--oa-ink);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  transition: color .15s ease;
}

.fkm-oa .oa-sessions .wpcf7-list-item-label::before {
  content: counter(oa-seans) ". Seans";
  display: block;
  margin-bottom: 4px;
  color: var(--oa-muted);
  font-size: .8125rem;
  font-weight: 500;
}

/* Radyo göstergesi */
.fkm-oa .oa-sessions .wpcf7-list-item-label::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 22px;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border: 2px solid #cfc4c1;
  border-radius: 50%;
  background: #fff;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.fkm-oa .oa-sessions input:checked + .wpcf7-list-item-label {
  color: var(--oa-red);
}

.fkm-oa .oa-sessions input:checked + .wpcf7-list-item-label::after {
  border-color: var(--oa-red);
  background: var(--oa-red);
  box-shadow: inset 0 0 0 5px #fff;
}

.fkm-oa .oa-sessions .wpcf7-list-item label:has(input:checked) {
  border-color: var(--oa-red);
  background: var(--oa-blush);
}

.fkm-oa .oa-sessions .wpcf7-list-item label:has(input:focus-visible) {
  outline: 3px solid var(--oa-ink);
  outline-offset: 3px;
}

.fkm-oa .oa-sessions .wpcf7-not-valid .wpcf7-list-item label {
  border-color: var(--oa-red);
}

/* KVKK onayı */
.fkm-oa .oa-consent .wpcf7-list-item {
  margin: 0;
}

.fkm-oa .oa-consent label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  color: var(--oa-muted);
  font-size: .875rem;
  line-height: 1.55;
  cursor: pointer;
}

.fkm-oa .oa-consent a {
  color: var(--oa-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fkm-oa .oa-consent input[type="checkbox"] {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 2px solid #cfc4c1;
  border-radius: 7px;
  background: #fff center / 12px 9px no-repeat;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.fkm-oa .oa-consent input[type="checkbox"]:checked {
  border-color: var(--oa-red);
  background-color: var(--oa-red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9'%3E%3Cpath d='M1.5 4.5 4.5 7.5 10.5 1.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.fkm-oa .oa-consent input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--oa-ink);
  outline-offset: 2px;
}

/* Gönder butonu */
.fkm-oa .oa-field--submit {
  position: relative;
  margin-top: 6px;
}

.fkm-oa .oa-grid .oa-submit {
  display: block;
  width: 100%;
  height: 60px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--oa-red);
  color: #fff;
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease, opacity .2s ease;
}

.fkm-oa .oa-grid .oa-submit:hover {
  background: var(--oa-red-dark);
}

.fkm-oa .oa-grid .oa-submit:active {
  transform: translateY(1px);
}

.fkm-oa .oa-grid .oa-submit:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none;
}

.fkm-oa .oa-grid .oa-submit:disabled:hover {
  background: var(--oa-red);
}

.fkm-oa .oa-field--submit .wpcf7-spinner {
  position: absolute;
  top: 18px;
  right: 22px;
  margin: 0;
  background-color: rgba(255, 255, 255, .35);
}

/* Form yanıt mesajı */
.fkm-oa .wpcf7 form .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 16px 20px;
  border: 0;
  border-radius: 16px;
  background: #fdecec;
  color: #8f1009;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.5;
}

.fkm-oa .wpcf7 form.sent .wpcf7-response-output {
  background: #e7f6ee;
  color: #145c35;
}

.fkm-oa .wpcf7 form.invalid .wpcf7-response-output,
.fkm-oa .wpcf7 form.unaccepted .wpcf7-response-output,
.fkm-oa .wpcf7 form.payment-required .wpcf7-response-output {
  background: #fff5dc;
  color: #6e4b00;
}

/* --------------------------------------------------------------------------
   Duyarlı düzen
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .fkm-oa .oa-info__item {
    padding: 30px 28px;
  }
}

@media (max-width: 991px) {
  .fkm-oa .oa-hero {
    padding: 48px 0 136px;
    border-radius: 0 0 32px 32px;
  }

  .fkm-oa .oa-hero__visual {
    max-width: 440px;
    margin: 0 auto;
  }

  .fkm-oa .oa-hero__logo {
    height: 68px;
    margin-bottom: 24px;
  }

  .fkm-oa .oa-info {
    margin-top: -88px;
  }

  .fkm-oa .oa-info__card {
    grid-template-columns: 1fr 1fr;
  }

  .fkm-oa .oa-info__item--sessions {
    grid-column: 1 / -1;
    border-left: 0 !important;
    border-top: 1px solid var(--oa-line);
  }

  .fkm-oa .oa-apply {
    padding: 72px 0 96px;
  }

  .fkm-oa .oa-apply__intro {
    position: static;
  }
}

@media (max-width: 575px) {
  .fkm-oa .oa-hero__actions .oa-btn {
    width: 100%;
  }

  .fkm-oa .oa-info__card {
    grid-template-columns: 1fr;
    border-radius: 24px;
  }

  .fkm-oa .oa-info__item {
    padding: 24px;
  }

  .fkm-oa .oa-info__item + .oa-info__item {
    border-left: 0;
    border-top: 1px solid var(--oa-line);
  }

  .fkm-oa .oa-info__value {
    font-size: 1.5rem;
  }

  .fkm-oa .oa-apply__card {
    padding: 24px 20px;
    border-radius: 24px;
  }

  .fkm-oa .oa-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .fkm-oa .oa-sessions .wpcf7-radio {
    gap: 10px;
  }

  .fkm-oa .oa-sessions .wpcf7-list-item label {
    padding: 16px 48px 16px 16px;
  }

  .fkm-oa .oa-sessions .wpcf7-list-item-label {
    font-size: 1.5rem;
  }

  .fkm-oa .oa-sessions .wpcf7-list-item-label::after {
    right: 14px;
  }
}