/* Gönülden site yerleşimi (tasarımın maket.css'inden; maket notu sınıfları çıkarıldı). Yalnız degiskenler.css değişkenlerini kullanır; dış kaynak yok. */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--yazi-govde);
  font-size: var(--boyut-govde);
  line-height: var(--satir-yuksekligi);
  overflow-wrap: anywhere;
}
img, svg, video { max-width: 100%; display: block; }

h1, h2, h3 { font-family: var(--yazi-baslik); font-weight: 400; line-height: var(--satir-yuksekligi-baslik); margin: 0 0 var(--bosluk-3); }
h1 { font-size: var(--boyut-baslik-1); }
h2 { font-size: var(--boyut-baslik-2); }
h3 { font-size: var(--boyut-baslik-3); font-weight: 600; }
p { margin: 0 0 var(--bosluk-3); }
.ust-baslik { font-family: var(--yazi-govde); font-size: var(--boyut-ust-baslik); letter-spacing: var(--ust-baslik-aralik); text-transform: uppercase; color: var(--metin-ikincil); font-weight: 500; margin: 0 0 var(--bosluk-2); }

a { color: var(--vurgu); text-underline-offset: 0.2em; }
:focus-visible { outline: var(--odak-kalinlik) solid var(--odak); outline-offset: 2px; }

.atla { position: absolute; left: -999px; top: 0; background: var(--yuzey); padding: var(--bosluk-2) var(--bosluk-3); }
.atla:focus { left: var(--bosluk-3); }

/* Üst ve alt bilgi */
.ust { padding: var(--bosluk-3) var(--bosluk-4); border-bottom: 1px solid var(--cizgi); }
.ust__ic, main, .alt__ic { width: min(100%, var(--icerik-genislik)); margin-inline: auto; }
.ust__ic { display: flex; flex-wrap: wrap; gap: var(--bosluk-1) var(--bosluk-4); align-items: baseline; justify-content: space-between; }
.ad { font-family: var(--yazi-ad); font-size: var(--boyut-baslik-3); color: var(--metin); text-decoration: none; }
.ad small { display: block; font-family: var(--yazi-govde); font-size: var(--boyut-ust-baslik); letter-spacing: var(--ust-baslik-aralik); text-transform: uppercase; font-weight: 500; color: var(--metin-ikincil); }
main { padding: var(--bosluk-5) var(--bosluk-4) var(--bosluk-7); }
.alt { border-top: 1px solid var(--cizgi); padding: var(--bosluk-5) var(--bosluk-4); color: var(--metin-ikincil); font-size: var(--boyut-kucuk); }
.alt__ic p { margin-bottom: var(--bosluk-2); }


/* Kartlar */
.ekran { background: var(--yuzey); border-radius: var(--kose-buyuk); box-shadow: var(--golge); padding: var(--bosluk-5) var(--bosluk-4); margin-bottom: var(--bosluk-5); }
.ekran--hero { background: var(--hero-zemin); border-radius: var(--kose-hero); padding: var(--bosluk-6) var(--bosluk-4); }
.ikincil { color: var(--metin-ikincil); font-size: var(--boyut-kucuk); }
.rakam { font-family: var(--yazi-rakam); font-variant-numeric: tabular-nums; }

/* Adımlar */
.adimlar { list-style: none; counter-reset: adim; padding: 0; margin: 0 0 var(--bosluk-4); display: grid; gap: var(--bosluk-3); }
.adimlar li { counter-increment: adim; display: grid; grid-template-columns: var(--dokunma-alani) 1fr; gap: var(--bosluk-3); align-items: center; }
.adimlar li::before { content: counter(adim); display: grid; place-items: center; width: var(--dokunma-alani); height: var(--dokunma-alani); border-radius: var(--kose-hap); border: 1px solid var(--vurgu); font-family: var(--yazi-baslik); font-size: var(--boyut-buyuk); font-weight: 600; }

/* Form */
.alan { margin-bottom: var(--bosluk-4); }
label, legend { display: block; font-weight: 600; margin-bottom: var(--bosluk-1); }
input[type="text"], input[type="date"], input[type="time"], input[type="file"], select, textarea {
  display: block; width: 100%; min-height: var(--dokunma-alani);
  font: inherit; color: var(--metin); background: var(--kagit);
  border: 1px solid var(--metin-ikincil); border-radius: var(--kose);
  padding: var(--bosluk-2) var(--bosluk-3);
}
textarea { min-height: 8rem; resize: vertical; }
[aria-invalid="true"] { border: 2px solid var(--hata) !important; }
input:disabled, select:disabled, textarea:disabled, button:disabled { opacity: var(--pasif-saydamlik); cursor: not-allowed; }
fieldset { border: 0; padding: 0; margin: 0 0 var(--bosluk-4); min-width: 0; }
.iki-sutun { display: grid; gap: 0 var(--bosluk-4); }
.iki-sutun > * { min-width: 0; }
input[type="date"], input[type="time"] { min-width: 0; -webkit-appearance: none; appearance: none; } /* iOS Safari tarih/saat alanı %100'ü aşmasın */
@media (min-width: 40rem) { .iki-sutun { grid-template-columns: 1fr 1fr; } }

.kutu { display: flex; gap: var(--bosluk-3); align-items: flex-start; }
.kutu input { width: var(--kutu-boyut); height: var(--kutu-boyut); margin: 0.15rem 0 0; flex: none; accent-color: var(--vurgu); }
.kutu label { font-weight: 400; margin: 0; font-size: var(--boyut-kucuk); }

.ipucu { color: var(--metin-ikincil); font-size: var(--boyut-kucuk); margin: var(--bosluk-1) 0 0; }
.hata-metni { color: var(--hata); font-size: var(--boyut-kucuk); font-weight: 600; margin: var(--bosluk-1) 0 0; }
.bilgi { border-radius: var(--kose); padding: var(--bosluk-3); margin: var(--bosluk-3) 0; }
.bilgi p:last-child { margin: 0; }
.bilgi--hata { background: var(--hata-zemin); color: var(--hata-ust); }
.bilgi--uyari { background: var(--uyari-zemin); color: var(--uyari); }
.bilgi--not { background: var(--yuzey-ikincil); color: var(--metin); }
.basari { color: var(--basari); font-weight: 600; }

/* Tür seçimi (radyo kartları) */
.turler { display: grid; gap: var(--bosluk-3); }
@media (min-width: 30rem) { .turler { grid-template-columns: repeat(3, 1fr); } }
.tur { position: relative; }
.tur input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.tur label { display: grid; justify-items: center; gap: var(--bosluk-1); text-align: center; padding: var(--bosluk-4) var(--bosluk-3); min-height: 6rem; border: 1px solid var(--metin-ikincil); border-radius: var(--kose-buyuk); background: var(--kagit); margin: 0; }
.tur label svg { width: 2rem; height: 2rem; }
.tur label span { font-weight: 400; font-size: var(--boyut-kucuk); color: var(--metin-ikincil); }
.tur input:checked + label { background: var(--secili); border: 2px solid var(--vurgu); }
.tur input:checked + label span { color: var(--metin); }
.tur input:focus-visible + label { outline: var(--odak-kalinlik) solid var(--odak); outline-offset: 2px; }

/* Düğmeler */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bosluk-2);
  min-height: var(--dokunma-alani); padding: var(--bosluk-2) var(--bosluk-5);
  font: inherit; font-weight: 600; border-radius: var(--kose);
  border: 1px solid var(--dugme-zemin); background: var(--dugme-zemin); color: var(--dugme-metin);
  text-decoration: none; cursor: pointer;
  transition: border-color var(--hareket-kisa) var(--hareket-egri);
}
.dugme:hover { border-color: var(--metin); }
.dugme svg { width: 1.25rem; height: 1.25rem; flex: none; }
.dugme--ikincil { background: transparent; color: var(--vurgu); border-color: var(--vurgu); }
.dugme--koyu { background: var(--vurgu); color: var(--vurgu-ustu); border-color: var(--vurgu); }
.dugme--tehlike { background: transparent; color: var(--hata); border-color: var(--hata); }
.dugme--kucuk { min-height: var(--dokunma-alani); padding: var(--bosluk-1) var(--bosluk-3); font-size: var(--boyut-kucuk); }
.dugme--tam { width: 100%; }
.dugmeler { display: flex; flex-wrap: wrap; gap: var(--bosluk-3); align-items: center; }

/* Bağlantı kutusu (kopyala) */
.baglanti { display: flex; gap: var(--bosluk-2); align-items: stretch; }
.baglanti output { flex: 1; min-width: 0; display: flex; align-items: center; background: var(--kagit); border: 1px solid var(--metin-ikincil); border-radius: var(--kose); padding: var(--bosluk-2) var(--bosluk-3); font-family: var(--yazi-rakam); font-size: var(--boyut-kucuk); overflow-wrap: anywhere; }

/* Davetiye kartı */
.davetiye { background: var(--kagit); border-radius: var(--kose-hero); box-shadow: var(--golge-davetiye); padding: var(--bosluk-7) var(--bosluk-5); text-align: center; position: relative; margin-bottom: var(--bosluk-5); }
.davetiye::before { content: ""; position: absolute; inset: var(--bosluk-3); border: 1px solid var(--altin); border-radius: var(--kose-buyuk); pointer-events: none; }
.davetiye__isimler { font-family: var(--yazi-baslik); font-size: var(--boyut-isimler); line-height: var(--satir-yuksekligi-baslik); margin: var(--bosluk-3) 0 var(--bosluk-5); }
.davetiye__suslu { width: 6rem; margin: 0 auto var(--bosluk-4); color: var(--metin-ikincil); }
.davetiye__metin { font-family: var(--yazi-baslik); font-size: var(--boyut-buyuk); max-width: 26rem; margin: 0 auto var(--bosluk-5); }
.davetiye dl { display: grid; gap: var(--bosluk-3); margin: 0; }
.davetiye dt { font-size: var(--boyut-ust-baslik); letter-spacing: var(--ust-baslik-aralik); text-transform: uppercase; color: var(--metin-ikincil); }
.davetiye dd { margin: 0; font-weight: 500; }

/* Ses kaydı */
.kayit { display: grid; justify-items: center; gap: var(--bosluk-3); text-align: center; padding: var(--bosluk-5) 0; }
.kayit__dugme { width: var(--kayit-dugme); height: var(--kayit-dugme); border-radius: var(--kose-hap); border: 0; background: var(--vurgu); color: var(--vurgu-ustu); display: grid; place-items: center; cursor: pointer; }
.kayit__dugme svg { width: 2.25rem; height: 2.25rem; }
.kayit__dugme--kayitta { box-shadow: 0 0 0 0.5rem var(--secili); animation: nabiz 1.6s var(--hareket-egri) infinite; }
@keyframes nabiz { 50% { box-shadow: 0 0 0 1rem var(--secili); } }
@media (prefers-reduced-motion: reduce) { .kayit__dugme--kayitta { animation: none; } }
.kayit__sayac { font-family: var(--yazi-rakam); font-variant-numeric: tabular-nums; font-size: var(--boyut-sayac); font-weight: 300; line-height: 1; }
.kayit__dalga { width: 100%; height: 3rem; color: var(--metin-ikincil); }
audio { width: 100%; }

/* İlerleme */
progress { width: 100%; height: 0.75rem; accent-color: var(--vurgu); }

/* Seçilen fotoğraflar (maket: CSS kutular) */
.kucukler { display: grid; grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); gap: var(--bosluk-2); margin: var(--bosluk-3) 0; padding: 0; list-style: none; }
.kucukler li { position: relative; aspect-ratio: 1; border-radius: var(--kose); background: var(--secili); overflow: hidden; }
.kucukler li svg { width: 100%; height: 100%; color: var(--metin-ikincil); }
.kucukler li img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kucukler button { position: absolute; top: var(--bosluk-1); right: var(--bosluk-1); width: var(--dokunma-alani); height: var(--dokunma-alani); border-radius: var(--kose-hap); border: 0; background: var(--vurgu); color: var(--vurgu-ustu); font-size: var(--boyut-buyuk); cursor: pointer; }

/* Panel */
.sayilar { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bosluk-2); margin: 0 0 var(--bosluk-3); padding: 0; list-style: none; text-align: center; }
.sayilar li { background: var(--kagit); border-radius: var(--kose); padding: var(--bosluk-3) var(--bosluk-1); font-size: var(--boyut-kucuk); }
.sayilar strong { display: block; font-family: var(--yazi-baslik); font-size: var(--boyut-baslik-2); font-weight: 600; line-height: 1.1; }
.anilar { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--bosluk-3); }
.ani { background: var(--kagit); border-radius: var(--kose-buyuk); padding: var(--bosluk-3); display: grid; gap: var(--bosluk-2); }
.ani__ust { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--bosluk-1) var(--bosluk-3); font-size: var(--boyut-kucuk); }
.ani__kim { font-weight: 600; }
.ani__gorsel { aspect-ratio: 4 / 3; border-radius: var(--kose); background: var(--secili); overflow: hidden; }
.ani__gorsel svg { width: 100%; height: 100%; color: var(--metin-ikincil); }
.ani__video { aspect-ratio: 16 / 9; border-radius: var(--kose); background: var(--metin); display: grid; place-items: center; color: var(--vurgu-ustu); }
video.ani__video { display: block; width: 100%; max-width: 100%; }
.filtre { display: flex; flex-wrap: wrap; gap: var(--bosluk-2); margin-bottom: var(--bosluk-3); }
.filtre button { min-height: var(--dokunma-alani); padding: var(--bosluk-1) var(--bosluk-4); border-radius: var(--kose-hap); border: 1px solid var(--vurgu); background: transparent; color: var(--vurgu); font: inherit; font-size: var(--boyut-kucuk); cursor: pointer; }
.filtre button[aria-pressed="true"] { background: var(--vurgu); color: var(--vurgu-ustu); }
.tehlike { border: 1px solid var(--hata); border-radius: var(--kose-buyuk); padding: var(--bosluk-4); }
.tehlike h2 { color: var(--hata); font-size: var(--boyut-baslik-3); font-weight: 600; }
.panel-menu { display: grid; gap: var(--bosluk-2); }
@media (min-width: 30rem) { .panel-menu { grid-template-columns: 1fr 1fr; } }

/* Masa kartı (A6) */
.masa-karti { width: min(100%, var(--kart-a6-en)); aspect-ratio: 105 / 148; margin: 0 auto var(--bosluk-5); background: var(--kagit); border-radius: var(--kose); box-shadow: var(--golge-davetiye); padding: 8%; display: grid; grid-template-rows: auto auto 1fr auto; justify-items: center; text-align: center; gap: 3%; position: relative; }
.masa-karti::before { content: ""; position: absolute; inset: 4%; border: 1px solid var(--altin); border-radius: var(--kose-orta); pointer-events: none; }
.masa-karti__isimler { font-family: var(--yazi-baslik); font-size: var(--boyut-baslik-3); line-height: 1.1; margin: 0; }
.masa-karti__cagri { font-family: var(--yazi-baslik); font-size: var(--boyut-baslik-2); font-weight: 600; margin: 0; }
.masa-karti__qr { width: 70%; background: var(--qr-arka); padding: 0; align-self: center; }
.masa-karti__qr svg { width: 100%; height: auto; }
.masa-karti__alt { font-size: var(--boyut-ust-baslik); color: var(--metin-ikincil); margin: 0; }
/* A6 ve sıfır kenar yalnız masa kartına (K24); diğer sayfalar tarayıcı varsayılanıyla yazdırılır. */
@page kart { size: A6; margin: 0; }
@media print {
  body { background: var(--qr-arka); }
  .ust, .alt, .yazdirma-disi { display: none !important; }
  main { padding: 0; width: auto; }
  .masa-karti { page: kart; width: var(--kart-a6-en); height: var(--kart-a6-boy); box-shadow: none; border-radius: 0; margin: 0; }
}

/* Aydınlatma metni */
.metin-sayfa h2 { font-size: var(--boyut-baslik-3); font-weight: 600; margin-top: var(--bosluk-5); }
.metin-sayfa li { margin-bottom: var(--bosluk-2); }
.yer-tutucu { background: var(--uyari-zemin); color: var(--uyari); padding: 0 var(--bosluk-1); border-radius: var(--kose-kucuk); font-weight: 600; }

/* Yardımcılar (CSP satır içi stile izin vermez: style="" niteliği kullanılmaz) */
.cizim { margin: var(--bosluk-4) auto; color: var(--metin); }
.ust-bosluk { margin-top: var(--bosluk-3); }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dolgu-kagit { fill: var(--kagit); }
.dolgu-secili { fill: var(--secili); }
.tur label .tur__ad { font-weight: 600; font-size: var(--boyut-govde); color: var(--metin); }
.qr-arka { fill: var(--qr-arka); }
.qr-on { fill: var(--qr-on); }
[hidden] { display: none !important; }
/* Yönetim paneli: gerçek oynatıcılar (maketteki kutuların yerine) */
img.ani__gorsel { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; }
.ani audio { display: block; width: 100%; }