/* ==========================================================
   3. BÖLÜM — ETKİNLİK DETAYLARI (Kına ve Nikah aynı sistemi kullanır)
   başlık · tarih · saat · geri sayım · mekan · yol tarifi · katılım
   ========================================================== */

[hidden] { display: none !important; }

.etkinlik {
  position: relative;
  padding: 76px 20px 84px;
  color: var(--d-krem);
  background:
    radial-gradient(ellipse 110% 30% at 50% 0%, rgba(185, 116, 74, .22), transparent 70%),
    linear-gradient(to bottom, #3f2a30 0%, #33232d 35%, #33232d 70%, #3f2a30 100%);
  animation: etkinlik-gelis .9s ease both;
}
@keyframes etkinlik-gelis { from { opacity: 0; } to { opacity: 1; } }

.etkinlik::before {                  /* bölümler arası ince altın ayraç */
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(220px, 50%);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(to right, transparent, var(--d-altin), transparent);
  opacity: .7;
}

.etkinlik__ic {
  max-width: 440px;
  margin: 0 auto;
}

/* ---------- Başlık ---------- */

.etkinlik__baslik { text-align: center; }

.etkinlik__ust {
  display: block;
  font-family: var(--yazi-serif);
  font-size: 11.5px;
  letter-spacing: .4em;
  text-indent: .4em;
  text-transform: uppercase;
  color: var(--d-altin);
}

.etkinlik__ad {
  margin: 10px 0 0;
  font-family: var(--yazi-el);
  font-weight: 400;
  font-size: clamp(50px, 15vw, 66px);
  line-height: 1.1;
  color: var(--d-krem);
  text-shadow: 0 0 22px rgba(255, 190, 130, .3);
}

.etkinlik__tarih {
  margin: 24px 0 0;
  font-family: var(--yazi-serif);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: .08em;
  font-variant-numeric: lining-nums;
}
.etkinlik__tarih small {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .36em;
  text-indent: .36em;
  text-transform: uppercase;
  color: rgba(255, 233, 200, .75);
}

.etkinlik__saat {
  margin: 16px 0 0;
  font-family: var(--yazi-serif);
  font-style: italic;
  font-size: 21px;
  color: var(--d-altin);
}

/* ---------- Geri sayım (mekanik sayaç) ---------- */

.sayac {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 46px 0 0;
}

.sayac__birim { text-align: center; }

.sayac__pencere {
  display: flex;
  gap: 3px;
  justify-content: center;
}

.rakam {
  position: relative;
  width: 30px;
  height: 46px;
  overflow: hidden;
  border-radius: 7px;
  border: 1px solid rgba(217, 165, 102, .38);
  background: linear-gradient(to bottom, #231620 0%, #3a2830 50%, #231620 100%);
  box-shadow: 0 6px 14px rgba(15, 8, 12, .4);
}
.rakam::after {                      /* tambur hissi: üst-alt gölge + ince orta çizgi */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(15, 8, 12, .55), transparent 28%, transparent 72%, rgba(15, 8, 12, .55)),
    linear-gradient(to bottom, transparent calc(50% - .5px), rgba(15, 8, 12, .35) calc(50% - .5px), rgba(15, 8, 12, .35) calc(50% + .5px), transparent calc(50% + .5px));
  pointer-events: none;
}

.rakam__serit {
  display: block;
  opacity: 0;
  will-change: transform;
  transition: opacity .5s ease;
}
.sayac.basladi .rakam__serit { opacity: 1; }

.rakam__serit span {
  display: block;
  height: 46px;
  line-height: 46px;
  font-family: var(--yazi-serif);
  font-weight: 500;
  font-size: 31px;
  font-variant-numeric: lining-nums;
  color: var(--d-krem);
}

.sayac__etiket {
  display: block;
  margin-top: 12px;
  font-family: var(--yazi-serif);
  font-size: 10.5px;
  letter-spacing: .26em;
  text-indent: .26em;
  text-transform: uppercase;
  color: rgba(255, 233, 200, .7);
}

.sayac__bitti {
  margin: 16px 0 0;
  text-align: center;
  font-family: var(--yazi-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--d-altin);
}

/* ---------- Krem paneller (mekan + katılım) ---------- */

.etkinlik__paneller {
  display: grid;
  gap: 24px;
  margin-top: 52px;
}

.panel {
  position: relative;
  padding: 42px 26px 38px;
  border-radius: 10px;
  text-align: center;
  color: var(--d-murekkep);
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(255, 249, 238, .55), transparent 70%),
    linear-gradient(to bottom, var(--d-krem) 0%, var(--d-krem-2) 100%);
  box-shadow: 0 16px 38px rgba(20, 10, 16, .3);
}
.panel::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 6px;
  border: 1px solid rgba(185, 116, 74, .5);
  pointer-events: none;
}

.panel__ust {
  display: block;
  font-family: var(--yazi-serif);
  font-size: 11px;
  letter-spacing: .38em;
  text-indent: .38em;
  text-transform: uppercase;
  color: var(--d-bakir);
}

.mekan__ad {
  margin: 20px 0 0;
  font-family: var(--yazi-serif);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mekan__adres {
  margin: 16px auto 0;
  max-width: 280px;
  font-family: var(--yazi-serif);
  font-style: normal;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(74, 47, 51, .85);
}

.mekan__not {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 26px 0 0;
  font-family: var(--yazi-serif);
  font-style: italic;
  font-size: 16.5px;
  color: var(--d-bakir-koyu);
}
.mekan__not::before,
.mekan__not::after {
  content: "";
  flex: 0 0 18px;
  height: 1px;
  background: var(--d-altin);
}

/* ---------- Butonlar ---------- */

.buton {
  display: inline-block;
  margin-top: 30px;
  padding: 13px 28px 12px;
  border: 1px solid var(--d-bakir);
  border-radius: 999px;
  background: linear-gradient(to bottom, #c78354, var(--d-bakir-koyu));
  color: var(--d-krem);
  font-family: var(--yazi-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .22em;
  text-indent: .22em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(143, 85, 53, .35), 0 1px 0 rgba(255, 233, 200, .45) inset;
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease, opacity .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.buton:active { transform: scale(.97); }
.buton:focus-visible { outline: 2px solid var(--d-bakir); outline-offset: 4px; }
.buton[disabled] { opacity: .6; cursor: default; }

.buton--cizgi {
  background: transparent;
  border-color: rgba(255, 233, 200, .6);
  box-shadow: none;
}

@media (hover: hover) {
  .buton:not([disabled]):hover { filter: brightness(1.08); }
}

.bag {                               /* sade metin bağlantısı */
  margin: 0;
  padding: 6px 4px;
  border: 0;
  background: none;
  font-family: var(--yazi-serif);
  font-style: italic;
  font-size: 16px;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(185, 116, 74, .6);
  text-underline-offset: 4px;
  cursor: pointer;
}

/* ---------- Katılım formu ---------- */

.katilim { margin-top: 28px; text-align: left; }

.alan { display: block; }
.alan__etiket {
  display: block;
  font-family: var(--yazi-serif);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(74, 47, 51, .7);
}
.alan input[type="text"],
.alan textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 2px 11px;
  border: 0;
  border-bottom: 1px solid rgba(143, 85, 53, .45);
  border-radius: 0;
  background: transparent;
  font-family: var(--yazi-serif);
  font-size: 19px;               /* 16px altı iPhone'da yakınlaştırma yapar */
  color: var(--d-murekkep);
  outline: none;
  transition: border-color .25s ease;
  -webkit-appearance: none;
  appearance: none;
}
.alan input[type="text"]:focus,
.alan textarea:focus { border-bottom-color: var(--d-bakir-koyu); }

.secim {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 30px 0 0;
  padding: 0;
  border: 0;
}
.secim label { position: relative; display: block; }
.secim input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.secim span {
  display: block;
  padding: 12px 4px 11px;
  border: 1px solid rgba(143, 85, 53, .5);
  border-radius: 999px;
  text-align: center;
  font-family: var(--yazi-serif);
  font-size: 15px;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--d-bakir-koyu);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.secim input:checked + span {
  background: var(--d-bakir-koyu);
  border-color: var(--d-bakir-koyu);
  color: var(--d-krem);
}
.secim input:focus-visible + span { outline: 2px solid var(--d-bakir); outline-offset: 3px; }

.kisi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
  animation: etkinlik-gelis .4s ease both;
}
.kisi__kutu { display: flex; align-items: center; gap: 6px; }
.kisi__dugme {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(143, 85, 53, .5);
  border-radius: 50%;
  background: transparent;
  font-family: var(--yazi-serif);
  font-size: 22px;
  line-height: 1;
  color: var(--d-bakir-koyu);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kisi__dugme:active { background: rgba(185, 116, 74, .15); }
.kisi__sayi {
  min-width: 34px;
  text-align: center;
  font-family: var(--yazi-serif);
  font-weight: 500;
  font-size: 24px;
  font-variant-numeric: lining-nums;
}

.tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.katilim__alt { margin-top: 26px; text-align: center; }

.form-hata {
  min-height: 1.3em;
  margin: 20px 0 0;
  text-align: center;
  font-family: var(--yazi-serif);
  font-style: italic;
  font-size: 15.5px;
  color: #a23b32;
}

/* hata yokken boş satır yer kaplamasın (Gönder ile üstü arasında dengesiz boşluk oluyordu) */
.form-hata:empty { min-height: 0; margin: 0; }

/* gönderim sonrası */
.katilim-sonuc {
  margin-top: 22px;
  animation: etkinlik-gelis .8s ease both;
}
.katilim-sonuc__baslik {
  margin: 16px 0 0;
  font-family: var(--yazi-el);
  font-size: 40px;
  line-height: 1.15;
  color: var(--d-bakir-koyu);
  -webkit-text-stroke: .35px currentColor;
}
.katilim-sonuc__metin {
  margin: 16px auto 18px;
  max-width: 270px;
  font-family: var(--yazi-serif);
  font-size: 17.5px;
  line-height: 1.65;
}
.deneme-notu {
  margin: 10px 0 0;
  font-family: var(--yazi-serif);
  font-size: 13px;
  color: #a23b32;
}

/* onay işareti (katılım + hatıra defteri ortak) */
.onay-isareti {
  display: block;
  width: 54px;
  height: 54px;
  margin: 0 auto;
}
.onay-isareti circle,
.onay-isareti path {
  fill: none;
  stroke: var(--d-bakir);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.onay-isareti circle { stroke-dasharray: 152; stroke-dashoffset: 152; animation: onay-ciz .9s ease forwards; }
.onay-isareti path { stroke-dasharray: 36; stroke-dashoffset: 36; animation: onay-ciz .5s .7s ease forwards; }
@keyframes onay-ciz { to { stroke-dashoffset: 0; } }

/* ---------- Diğer etkinliğe yönlendirme ---------- */

.sonraki {
  margin-top: 64px;
  padding-top: 52px;
  text-align: center;
  position: relative;
  animation: etkinlik-gelis 1s ease both;
}
.sonraki::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid var(--d-altin);
}
.sonraki__soru {
  margin: 0;
  font-family: var(--yazi-el);
  font-size: clamp(34px, 10.2vw, 42px);
  line-height: 1.3;
  letter-spacing: .01em;
  color: var(--d-krem);
  -webkit-text-stroke: .4px currentColor;       /* ince el yazısına temiz bir ağırlık */
  text-shadow: 0 0 18px rgba(255, 190, 130, .25);
}
.sonraki__soru span { display: block; white-space: nowrap; }
.sonraki .buton { margin-top: 30px; }

.etkinlik__donus {
  margin-top: 44px;
  text-align: center;
  color: rgba(255, 233, 200, .8);
}

/* ---------- Kaydırınca beliriş (2. bölümdeki ile aynı) ---------- */

.etkinlik .belir { transition-duration: 1s; }

/* ---------- Geniş ekran ---------- */

@media (min-width: 860px) {
  .etkinlik { padding: 110px 40px 120px; }
  .etkinlik__ic { max-width: 900px; }
  .etkinlik__ad { font-size: 80px; }
  .etkinlik__tarih { font-size: 28px; }
  .sayac { gap: 20px; margin-top: 46px; }
  .rakam { width: 40px; height: 60px; border-radius: 9px; }
  .rakam__serit span { height: 60px; line-height: 60px; font-size: 40px; }
  .sayac__etiket { font-size: 11.5px; }
  .etkinlik__paneller { grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; margin-top: 60px; }
  .panel { padding: 50px 40px 44px; }
  .sonraki__soru { font-size: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .etkinlik, .sonraki, .katilim-sonuc, .kisi { animation: none; }
  .onay-isareti circle, .onay-isareti path { animation: none; stroke-dashoffset: 0; }
}

/* ---------- Alt bilgi: çok küçük, göze batmayan imza ---------- */

.alt-bilgi {
  padding: 26px 20px calc(30px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  background: #3f2a30;
}
.alt-bilgi a {
  display: inline-block;
  padding: 8px 12px;
  font-family: var(--yazi-serif);
  font-size: 12px;
  letter-spacing: .14em;
  font-variant-numeric: lining-nums;
  text-decoration: none;
  color: rgba(232, 214, 196, .26);
  transition: color .4s ease;
  -webkit-tap-highlight-color: transparent;
}
.alt-bilgi a:hover,
.alt-bilgi a:focus-visible { color: rgba(232, 214, 196, .55); outline: none; }