/* Revak Buluşmalar: web katılım sayfası. Renkler docs/tasarim/belirtecler.json'dan (açık ve koyu, Kontrastı Artır).
   Tek süs kemer penceresidir; renk tek başına anlam taşımaz (seçili seçenekte işaret, koltukta sayı da var). */

:root {
  color-scheme: light dark;
  --zemin: #F5EFE6; --yuzey: #FFFCF7; --yuzey2: #ECE4D6; --yukseltilmis: #FFFFFF;
  --cizgi: #E3D9C9; --cizgi-belirgin: #8A8172;
  --murekkep: #1B1F1D; --murekkep2: #4A544F; --murekkep3: #5C6660;
  --birincil: #0F4C3A; --birincil-yumusak: #E1E6DA; --ustunde: #FFFCF7;
  --altin-metin: #765819; --altin-sus: #C7A14A;
  --uyari: #8A5300; --uyari-yumusak: #F4E6CC; --hata: #A2352C; --hata-yumusak: #F5E1DC;
  --kose-kart: 24px; --kose-ic: 16px; --kose-satir: 12px;
  --yazi: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --yazi-baslik: ui-serif, "New York", "Iowan Old Style", Georgia, "Noto Serif", serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --zemin: #0E1A16; --yuzey: #15231E; --yuzey2: #1E2E28; --yukseltilmis: #1B2B25;
    --cizgi: #2A3C35; --cizgi-belirgin: #6F8078;
    --murekkep: #ECE4D3; --murekkep2: #B3BDB6; --murekkep3: #97A39C;
    --birincil: #8FC4AB; --birincil-yumusak: #1B3A30; --ustunde: #0E1A16;
    --altin-metin: #D9B865; --altin-sus: #C7A14A;
    --uyari: #EDB65A; --uyari-yumusak: #33291A; --hata: #F2907F; --hata-yumusak: #3A1F1C;
  }
}
@media (prefers-contrast: more) {
  :root { --murekkep2: #2E3632; --murekkep3: #3B443F; --birincil: #0A3A2C; --altin-metin: #5E4512; --cizgi: #8A8172; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root { --murekkep2: #D6DDD8; --murekkep3: #C4CCC7; --birincil: #A9D8C1; --altin-metin: #E8CC85; --cizgi: #6F8078; }
}

/* Kemer penceresinin gök paleti: vaktin göğü (belirtecler.json "gok"). */
.gok-sabah { --gok-ust: #D7DCEA; --gok-ufuk: #EDDDD8; }
.gok-ogle, .gok-cuma { --gok-ust: #D9E8EE; --gok-ufuk: #EEF0E5; }
.gok-ikindi { --gok-ust: #E8E2D1; --gok-ufuk: #F3D8B1; }
.gok-aksam { --gok-ust: #DBD5E6; --gok-ufuk: #F1D2CA; }
.gok-yatsi { --gok-ust: #CED5DF; --gok-ufuk: #DCDDE3; }
.gok-bayram { --gok-ust: #E2EBEF; --gok-ufuk: #F6E5C9; }
@media (prefers-color-scheme: dark) {
  .gok-sabah { --gok-ust: #131B31; --gok-ufuk: #352B43; }
  .gok-ogle, .gok-cuma { --gok-ust: #112739; --gok-ufuk: #1C3A3F; }
  .gok-ikindi { --gok-ust: #1E2330; --gok-ufuk: #47331E; }
  .gok-aksam { --gok-ust: #1B1932; --gok-ufuk: #4A2934; }
  .gok-yatsi { --gok-ust: #0A1411; --gok-ufuk: #12241E; }
  .gok-bayram { --gok-ust: #192838; --gok-ufuk: #433626; }
}
.kemer { width: 64px; height: auto; flex: none; display: block; }
.kemer .gok-ust { stop-color: var(--gok-ust); }
.kemer .gok-ufuk { stop-color: var(--gok-ufuk); }
.kemer-cizgi { stroke: var(--altin-sus); stroke-width: 3; stroke-linejoin: round; }

/* Temel */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--zemin); color: var(--murekkep); font-family: var(--yazi);
  font-size: 1.0625rem; line-height: 1.5;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.ust {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; max-width: 40rem; margin: 0 auto;
  padding: 10px 16px 0;
}
.marka { font-family: var(--yazi-baslik); font-weight: 600; font-size: 1.25rem; color: var(--birincil); }
a.marka { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; }
.marka img { width: 0.8em; height: 1em; flex: none; }

/* Katılım sayfasının durağan kimliği (bulusma.html): ne olduğu ve güven cümlesi, altta sitenin sayfaları. Betiksiz iki
   dil birlikte görünür; betik dili seçince (banner.js, uygulama.ts) öteki dilin bloğu gizlenir. */
html.dil-secili[lang="tr"] [data-dil-blok][lang="en"], html.dil-secili[lang="en"] [data-dil-blok][lang="tr"] { display: none; }
html:not(.dil-secili) .yalniz-betikle { display: none; }
.kimlik { flex: 1 0 100%; margin: 0 0 4px; }
.kimlik + .kimlik { margin-top: 8px; }
.kimlik-ne { color: var(--murekkep2); font-size: 0.9375rem; font-weight: 600; margin: 0 0 2px; }
.kimlik-guven { color: var(--murekkep3); font-size: 0.875rem; }
.site-alt { max-width: 40rem; margin: 0 auto; padding: 0 16px 32px; }
.site-alt nav {
  display: flex; flex-wrap: wrap; gap: 0 18px; padding-top: 8px; border-top: 1px solid var(--cizgi); font-size: 0.9375rem;
}
.site-alt a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; font-weight: 500; text-underline-offset: 3px; }
main { max-width: 40rem; margin: 0 auto; padding: 8px 16px 48px; display: flex; flex-direction: column; gap: 14px; }
main:focus { outline: none; }
h1 { font-family: var(--yazi-baslik); font-weight: 600; font-size: 1.75rem; line-height: 1.2; margin: 0 0 4px; overflow-wrap: anywhere; }
h2 { font-size: 1.25rem; line-height: 1.3; margin: 0 0 10px; }
h3 { font-size: 1.0625rem; line-height: 1.3; margin: 20px 0 8px; }
p { margin: 0 0 8px; overflow-wrap: anywhere; }
p:last-child { margin-bottom: 0; }
a { color: var(--birincil); }

.kart { background: var(--yuzey); border-radius: var(--kose-kart); padding: 20px; border: 1px solid var(--cizgi); }
.kart.sade { background: transparent; border: 0; padding: 0 4px; }
.ikincil { color: var(--murekkep2); font-size: 0.9375rem; }
.ipucu { color: var(--murekkep3); font-size: 0.875rem; margin-top: 6px; }
.vurgu { font-weight: 600; }
.yukleniyor { color: var(--murekkep2); text-align: center; padding: 48px 0; }
.gorunmez { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Buluşma kartı: iOS'taki ayrıntı ekranının kahramanı gibi vaktin göğü (gök geçişi), üstünde cami, büyük cemaat saati,
   tarih ve düzenleyen. Gök üstü metin renkleri belirtecler.json "gokUstu"dan (gokMetin, gokMetin2; iki uca karşı ölçülü). */
.kahraman {
  --gok-metin: #1B1F1D; --gok-metin2: #434D48;
  background: linear-gradient(180deg, var(--gok-ust, var(--yuzey)) 0%, var(--gok-ufuk, var(--yuzey)) 100%);
  border-color: transparent; color: var(--gok-metin); padding: 22px 20px 20px;
}
@media (prefers-color-scheme: dark) { .kahraman { --gok-metin: #F4EEE2; --gok-metin2: #BCC5BF; } }
@media (prefers-contrast: more) {
  .kahraman { --gok-metin2: #2E3632; border-color: var(--cizgi); }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) { .kahraman { --gok-metin2: #D6DDD8; } }
.kahraman-ust { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.kahraman-metin { min-width: 0; }
.kahraman .kemer { width: 52px; }
.ust-satir { color: var(--gok-metin2); font-weight: 600; font-size: 0.9375rem; margin-bottom: 2px; }
.kahraman h1 { margin-bottom: 2px; }
.adres, .gok-ikincil { color: var(--gok-metin2); font-size: 0.9375rem; }
.saat-buyuk { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 26px 0 0; }
.saat-buyuk .saat {
  font-size: 3.25rem; line-height: 1.05; font-weight: 650; letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.saat-etiket { color: var(--gok-metin2); font-size: 1.0625rem; }
.kahraman .tarih { font-size: 1.25rem; font-weight: 600; line-height: 1.3; margin: 4px 0 0; }
.davet-satiri { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; color: var(--gok-metin2); font-weight: 500; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none; display: inline-flex; align-items: center;
  justify-content: center; background: var(--birincil-yumusak); color: var(--birincil); font-weight: 600; font-size: 0.875rem;
}
.davet-basligi { font-size: 1.25rem; font-weight: 600; line-height: 1.3; margin: 6px 4px 0; }
.ayrinti { margin: 0; }
.ayrinti dt { color: var(--murekkep2); font-size: 0.875rem; font-weight: 600; }
.ayrinti dd { margin: 0 0 12px; overflow-wrap: anywhere; }
.ayrinti dd:last-child { margin-bottom: 0; }
.ayrinti-karti .onayli { color: var(--murekkep2); margin: 0; }
.ayrinti + .onayli { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--cizgi); }
.ozet { margin: 12px 0 0; }
.ortali { text-align: center; }

/* Düğmeler */
.dugme {
  appearance: none; font: inherit; font-weight: 600; min-height: 48px; padding: 11px 18px; border-radius: 14px;
  border: 1.5px solid transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  text-align: center; text-decoration: none; gap: 8px; line-height: 1.25;
}
.dugme.birincil { background: var(--birincil); color: var(--ustunde); width: 100%; margin-top: 14px; }
.dugme.ikincil { background: transparent; color: var(--birincil); border-color: var(--cizgi-belirgin); }
.dugme.tehlike { background: var(--hata); color: var(--ustunde); }
.dugme.metin {
  background: transparent; color: var(--birincil); padding: 8px 2px; min-height: 44px; font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px;
}
.dugme.buyuk { min-height: 56px; font-size: 1.125rem; border-radius: 16px; margin-top: 20px; }
.dugme:disabled { opacity: 0.6; cursor: not-allowed; }
.dugme.kare { width: 48px; padding: 0; font-size: 1.375rem; }
.dugme[aria-pressed="true"] { background: var(--birincil-yumusak); border-color: var(--birincil); }
.dugmeler { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.dugmeler .dugme.birincil { width: auto; flex: 1 1 10rem; margin-top: 0; }
.dugmeler.sarmali .dugme.ikincil { flex: 1 1 auto; }
.dugme:focus-visible, .alan:focus-visible, .secenek input:focus-visible + span, .onay-kutusu input:focus-visible,
a:focus-visible { outline: 3px solid var(--birincil); outline-offset: 2px; }
.dil { min-height: 44px; }

/* Google ve Apple düğmeleri: ikisi aynı boy (--boy, 48 px) ve aynı hap biçimi, her biri kendi markasının kuralıyla.
   Google (developers.google.com/identity/branding-guidelines): 40 px'lik resmî düğmenin oranları; renkli "G" 20/40,
   G'nin solunda 12/40, sağında 10/40, yazının sağında 12/40; yazı Google Sans Medium 14/20 (yoksa Roboto, o da yoksa
   sistem yazısı). Açıkta #FFFFFF zemin, içte 1 px #747775 çizgi, #1F1F1F yazı; koyuda #131314, #8E918F, #E3E3E3.
   Apple (HIG, Sign in with Apple › custom buttons): sistem yazısı, boyu yüksekliğin %43'ü; logo dosyası düğme
   yüksekliğinde (arayuz.ts); logo ile yazı arası Apple'ın kendi düğmesindeki gibi 8/48. Açık zeminde siyah, koyu
   zeminde beyaz, ikisinde de çizgisiz; logo ve yazı aynı renk. Metin büyük yazıda satır kırar, yükseklik sabit
   değildir. */
.saglayicilar { --boy: 3rem; display: flex; flex-direction: column; gap: 12px; margin: 16px 0 12px; }
.dugme.saglayici {
  width: 100%; min-height: var(--boy); border-radius: calc(var(--boy) / 2); border-width: 1px; white-space: normal;
}
.dugme.saglayici-google {
  padding: calc(var(--boy) * 0.1) calc(var(--boy) * 0.3); gap: calc(var(--boy) * 0.25);
  font-family: "Google Sans", Roboto, var(--yazi); font-weight: 500;
  font-size: calc(var(--boy) * 0.35); line-height: calc(var(--boy) * 0.5);
  background: #FFFFFF; color: #1F1F1F; border-color: #747775;
}
.saglayici-google .logo { width: calc(var(--boy) * 0.5); height: calc(var(--boy) * 0.5); flex: none; }
.dugme.saglayici-apple {
  padding: 0 calc(var(--boy) * 0.3); gap: calc(var(--boy) * 0.1);
  font-family: var(--yazi); font-weight: 500; font-size: calc(var(--boy) * 0.43); line-height: 1.2;
  background: #000000; color: #FFFFFF; border-width: 0;
}
.saglayici-apple .logo { width: calc(var(--boy) * 0.3865); height: var(--boy); flex: none; fill: currentColor; }
@media (prefers-color-scheme: dark) {
  .dugme.saglayici-google { background: #131314; color: #E3E3E3; border-color: #8E918F; }
  .dugme.saglayici-apple { background: #FFFFFF; color: #000000; }
}
.dugmeler.dikey { flex-direction: column; align-items: stretch; }
.dugmeler.dikey .dugme, .dugmeler.dikey .dugme.birincil { flex: none; width: 100%; margin-top: 0; }
.yedek { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--cizgi); }
.yedek .dugme { width: 100%; margin-top: 6px; }
.hesap-satiri { overflow-wrap: anywhere; }

/* Seçenekler (radio) */
.secenekler { border: 0; padding: 0; margin: 0; min-width: 0; }
.secenekler legend { font-weight: 600; font-size: 1.125rem; margin: 0 0 10px; padding: 0; }
.secenek-satiri { display: grid; grid-template-columns: 1fr; gap: 8px; }
.secenek { position: relative; display: block; }
.secenek input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.secenek span {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 12px;
  border-radius: 14px; border: 1.5px solid var(--cizgi-belirgin); background: var(--yukseltilmis);
  text-align: center; font-weight: 500; cursor: pointer;
}
.secenek input:checked + span {
  background: var(--birincil-yumusak); border-color: var(--birincil); box-shadow: inset 0 0 0 1px var(--birincil);
  font-weight: 600;
}
.secenek input:checked + span::before {
  content: ""; width: 6px; height: 12px; border: solid var(--birincil); border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) translateY(-2px); flex: none;
}
@media (min-width: 30rem) { .secenek-satiri { grid-template-columns: repeat(3, 1fr); } }
/* Katılım beyanı (bulusma-katilim): iki seçenekli yanıt yan yana, uzun ulaşım seçenekleri alt alta; seçimler arası boşluk. */
@media (min-width: 30rem) { .secenekler.ikili .secenek-satiri { grid-template-columns: repeat(2, 1fr); } }
.secenekler.dikey .secenek-satiri { grid-template-columns: 1fr; }
.secenekler.dikey .secenek span { justify-content: flex-start; text-align: start; }
.secenekler + .secenekler, .secenekler + .panel { margin-top: 18px; }

/* Form */
.onay-kutusu { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 6px; cursor: pointer; }
.onay-kutusu input { width: 24px; height: 24px; margin: 2px 0 0; flex: none; accent-color: var(--birincil); }
.alan-etiketi { display: block; font-weight: 600; margin: 18px 0 6px; }
.alan {
  width: 100%; font: inherit; min-height: 48px; padding: 10px 14px; border-radius: 12px;
  border: 1.5px solid var(--cizgi-belirgin); background: var(--yukseltilmis); color: var(--murekkep);
}
.alan::placeholder { color: var(--murekkep3); }
.alan[aria-invalid="true"] { border-color: var(--hata); }
.alan-hatasi { color: var(--hata); font-weight: 600; font-size: 0.9375rem; margin-top: 6px; }

/* Bantlar */
.bant { border-radius: var(--kose-satir); padding: 12px 14px; margin: 0; font-weight: 500; color: var(--murekkep); }
.bant-bilgi { background: var(--birincil-yumusak); border-inline-start: 4px solid var(--birincil); }
.bant-uyari { background: var(--uyari-yumusak); border-inline-start: 4px solid var(--uyari); }
.bant-hata { background: var(--hata-yumusak); border-inline-start: 4px solid var(--hata); }
.panel .bant { margin-bottom: 12px; }

/* Ulaşım panelleri */
.panel { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--cizgi); }
.panel > h3:first-child { margin-top: 0; }
.alt-panel { margin-top: 16px; padding: 16px; border-radius: var(--kose-ic); background: var(--yuzey2); }
.alt-panel h3 { margin-top: 0; }
.liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.satir { background: var(--yukseltilmis); border: 1px solid var(--cizgi); border-radius: var(--kose-ic); padding: 12px 14px; }
.satir .dugme.birincil { margin-top: 10px; }
.satir-baslik { font-weight: 600; }
.teklif { background: var(--birincil-yumusak); border-color: var(--birincil); margin-bottom: 12px; }
.koltuk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0; font-variant-numeric: tabular-nums; }
.koltuk-gosterge { display: inline-flex; gap: 4px; }
.koltuk-gosterge span { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--birincil); }
.koltuk-gosterge .dolu { background: var(--birincil); }
.adimlayici { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; flex-wrap: wrap; }
.adimlayici-etiket { font-weight: 600; flex: 1 1 8rem; }
.adimlayici-deger { min-width: 2ch; text-align: center; font-size: 1.375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.durum-satiri { margin: 14px 0 0; }
.durum-satiri .ikincil { margin: 0; }
.konum-satiri { margin-top: 6px; }
.konum-satiri p { margin: 0; }
.ileti { color: var(--altin-metin); font-weight: 600; margin-top: 6px; }
.ucret { margin: 18px 0 0; }

/* Alt bölüm ve pencereler */
.alt { padding: 4px 4px 0; }
.alt .dugmeler { margin-top: 4px; gap: 4px 18px; }
/* reCAPTCHA rozeti alt düğmeleri örtmesin: Google'ın izin verdiği biçimde gizlenir, yerine alt bölümde not var. */
.grecaptcha-badge { visibility: hidden; }
.pencere {
  border: 0; border-radius: var(--kose-kart); padding: 24px; width: min(34rem, calc(100vw - 32px));
  background: var(--yukseltilmis); color: var(--murekkep);
}
.pencere::backdrop { background: rgb(0 0 0 / 0.5); }
.pencere.uzun { max-height: calc(100dvh - 48px); overflow: auto; }
.pencere .dugmeler { justify-content: flex-end; margin-top: 18px; }
.pencere .dugmeler .dugme { flex: 0 1 auto; min-width: 7rem; }

@media (min-width: 40rem) {
  main { padding-top: 16px; gap: 18px; }
  .kart { padding: 28px; }
  .kemer { width: 88px; }
  .kahraman .kemer { width: 64px; }
  .kahraman { padding: 30px 28px 26px; }
  .saat-buyuk .saat { font-size: 4rem; }
  h1 { font-size: 2rem; }
  .dugme.birincil { width: auto; min-width: 16rem; }
  .dugme.birincil.buyuk { width: 100%; }
  .satir .dugme.birincil { min-width: 12rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .dugme, .secenek span { transition: background-color 0.2s, border-color 0.2s; }
}