/* Davetiye sayfalarının ortak stilleri (index.html ve kina-nikah.html) */

  /* ---------- davetiye sayfası ---------- */
  .giris {
    padding: 2rem 0 1rem;  /* üstte 32px */
    text-align: center;
  }

  /* en üstteki aile çizimi: köpek, iki kedi, gelin ve damat */
  .aile { width: min(100%, 21rem); margin: 0 auto 1.8rem; }
  .aile * { vector-effect: non-scaling-stroke; }
  .aile .line-art { stroke-width: 1.8; }
  .aile .line-art .ince { stroke-width: 1.1; }
  .aile .evcil * { stroke-width: 1.3; }
  .aile .evcil .ince { stroke-width: 0.9; }
  .aile .evcil .kalin { stroke-width: 3.6; }
  .aile .evcil .tasma { stroke-width: 1.8; }
  .aile .evcil .iris { stroke-width: 0.8; }
  .aile .gul { fill: var(--pembe); stroke: var(--murekkep); stroke-width: 0.9; }
  .aile .yaka-cicegi { fill: var(--altin); stroke: none; }
  .aile .kalp { fill: none; stroke: var(--kirmizi); stroke-width: 1.3; }
  .aile .turuncu { fill: var(--turuncu); stroke: none; }
  .aile .turuncu-cizgili { fill: var(--turuncu); }
  .aile .pembe { fill: var(--pembe); stroke: none; }
  .aile .kopek-krem { fill: var(--kopek-krem); }
  .aile .kopek-ten { fill: var(--kopek-ten); }
  .aile .kopek-namlu { fill: var(--kopek-namlu); }
  .aile .biyik-tuy { fill: none; stroke: var(--kopek-krem); stroke-width: 0.8; }
  .aile .kuyruk-salla { transform-box: fill-box; transform-origin: 20% 90%; animation: kuyrukSalla 0.9s ease-in-out infinite alternate; }
  @keyframes kuyrukSalla { from { transform: rotate(-10deg); } to { transform: rotate(12deg); } }


  /* üç etkinliği kapsayan cümle uzun; dar ekranda tek satıra sığsın */
  .giris .ust-baslik {
    font-size: 0.875rem;
    letter-spacing: 0.26em;
    text-wrap: balance;
  }
  @media (max-width: 400px) {
    .giris .ust-baslik { letter-spacing: 0.14em; }
  }

  .isimler {
    font-size: clamp(2.9rem, 15vw, 4.75rem);
    line-height: 1.02;
    letter-spacing: -0.01em;
  }
  .isimler .ve {
    display: block;
    font-style: italic;
    font-size: max(0.42em, 1.5rem);
    color: var(--altin-buyuk);
    margin: 0.35em 0;
  }

  .giris-tarih {
    margin-top: 1.9rem;
    font-size: 0.875rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--murekkep-sis);
  }

  /* geri sayım */
  .sayac-etiket {
    margin: 2.6rem 0 0.7rem;
    font-size: 0.875rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--murekkep-sis);
  }
  .sayac-etiket b { font-weight: 400; color: var(--murekkep); }
  .sayac {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
  }
  .sayac div {
    padding: 0.9rem 0.25rem;
    border: 1px solid var(--cizgi);
    border-radius: 3px;
  }
  .sayac b {
    display: block;
    font-family: var(--baslik);
    font-size: 1.7rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
  }
  .sayac span {
    font-size: 0.875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--murekkep-sis);
  }
  .sayac .sayac-mesaj {
    grid-column: 1 / -1;
    border: 0;
    padding: 0;
    font-family: var(--baslik);
    font-size: 1.5rem;
    font-style: italic;
  }

  /* program: tarih satırının altında üç etkinlik kutusu, kartlarla aynı renk dili */
  .program-serit {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.4rem;
  }
  .program-serit a {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.8rem 0.3rem 0.85rem;
    border: 1px solid var(--murekkep);
    border-radius: 4px;
    background: var(--kutu-zemin);
    text-decoration: none;
    /* düğme gibi kabarık dursun: dokunulabilir olduğu anlaşılsın */
    box-shadow: 0 3px 0 var(--murekkep);
    transition: transform 150ms ease, box-shadow 150ms ease;
  }
  .program-serit a[hidden] { display: none; }
  .program-serit a:hover,
  .program-serit a:focus-visible { transform: translateY(-2px); box-shadow: 0 5px 0 var(--murekkep); }
  .program-serit a:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--murekkep); }
  .program-serit .detay {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.4rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--cizgi);
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--murekkep);
  }
  .program-serit .detay svg { width: 1rem; height: 1rem; }
  .program-serit b {
    font-family: var(--baslik);
    font-style: italic;
    font-weight: 600;
    color: var(--murekkep);
    font-size: clamp(1.25rem, 5.4vw, 1.5rem);
    line-height: 1.15;
  }
  .program-serit small {
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--murekkep-sis);
  }
  .program-serit b, .program-serit small { text-align: center; text-wrap: balance; }
  .program-serit small span { display: block; }

  /* bölümler */
  section { padding: 1rem 0; }

  .bolum-basligi {
    font-size: clamp(1.75rem, 7vw, 2.3rem);
    font-style: italic;
    text-align: center;
    margin-bottom: 1.6rem;
  }
  .bolum-aciklama {
    text-align: center;
    color: var(--murekkep-sis);
    font-size: 0.9rem;
    margin: -0.6rem 0 2rem;
  }

  /* ---------- etkinlik kartları ---------- */
  .etkinlikler { display: grid; gap: 1.6rem; }

  .etkinlik {
    --vurgu: var(--altin);
    --vurgu-yazi: var(--altin-yazi);
    position: relative;
    padding: 2rem 1.35rem 1.5rem;
    border: 1px solid var(--cizgi);
    border-radius: 4px;
    background: var(--kagit);
    scroll-margin-top: 1.5rem;
  }
  .etkinlik[hidden] { display: none; }
  .etkinlik--kina  { --vurgu: var(--kirmizi); --vurgu-yazi: var(--kirmizi-yazi); }
  .etkinlik--nikah { --vurgu: var(--altin);   --vurgu-yazi: var(--altin-yazi); }
  .etkinlik--nikah { background: var(--nikah-zemin); border-color: var(--nikah-cizgi); }
  .etkinlik.etkinlik--nikah .kiyafet { background: var(--nikah-koyu); }
  .etkinlik.etkinlik--nikah .bilgi-listesi > div { border-color: var(--nikah-cizgi); }

  .etkinlik-ust { text-align: center; margin-bottom: 1.2rem; }
  .etkinlik-ust .cizim { width: 4.6rem; margin: 0 auto 0.9rem; }
  .etkinlik h3 { font-size: clamp(1.9rem, 8vw, 2.4rem); font-style: italic; }
  .etkinlik-ozet {
    max-width: 24rem;
    margin: 0.6rem auto 0;
    font-size: 0.9rem;
    color: var(--murekkep-sis);
  }

  .etkinlik .kiyafet {
    display: flex;
    gap: 0.7rem;
    align-items: baseline;
    margin: 1.2rem 0 0;
    padding: 0.85rem 1rem;
    background: var(--kagit-koyu);
    border-left: 2px solid var(--vurgu);
    border-radius: 2px;
    font-size: 0.875rem;
  }
  .etkinlik .kiyafet b {
    flex: none;
    font-weight: 400;
    font-size: 0.875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--murekkep-sis);
  }

  /* yol tarifi: Yer satırında adresin hemen altında */
  .bilgi-listesi .dugme--yol {
    width: auto;
    margin-top: 0.75rem;
    padding: 0.7rem 1.2rem;
    font-family: var(--metin);
    font-size: 0.875rem;
    letter-spacing: 0.16em;
  }

  /* after party: gecenin kartı, zemin ters */
  .etkinlik--after {
    --vurgu: var(--goz);
    --vurgu-yazi: var(--goz);
    background: var(--murekkep);
    border-color: var(--murekkep);
    color: var(--kagit);
  }
  .etkinlik--after .line-art { stroke: var(--kagit); }
  .etkinlik--after .line-art .leke { fill: var(--kagit); }
  .etkinlik--after .line-art .beyaz { fill: var(--murekkep); }
  .etkinlik--after .etkinlik-ozet,
  .etkinlik--after .bilgi-listesi dt,
  .etkinlik--after .bilgi-listesi dd small,
  .etkinlik--after .kiyafet b,
  .etkinlik--after .bitti-etiketi { color: var(--gece-sis); }
  .etkinlik--after .bilgi-listesi > div { border-color: #4A423A; }
  .etkinlik--after .kiyafet { background: #3A332C; }
  .etkinlik--after .dugme { border-color: var(--kagit); color: var(--kagit); }
  .etkinlik--after .dugme:hover,
  .etkinlik--after .dugme:active { background: var(--kagit); color: var(--murekkep); }
  .etkinlik--after :focus-visible { outline-color: var(--goz); }

  /* disko topu parıltıları */
  .parilti-yildiz { transform-box: fill-box; transform-origin: center; animation: pirilda 2.4s ease-in-out infinite; }
  .parilti-yildiz:nth-of-type(2) { animation-delay: 0.8s; }
  .parilti-yildiz:nth-of-type(3) { animation-delay: 1.6s; }
  @keyframes pirilda {
    0%, 100% { opacity: 0.2; transform: scale(0.6); }
    50%      { opacity: 1;   transform: scale(1); }
  }

  /* bitmiş etkinlik */
  /* yazıyı soldurmuyoruz (kontrast düşer), sadece çizimi */
  .etkinlik.bitti .etkinlik-ust .cizim { opacity: 0.45; }
  .etkinlik .bitti-etiketi { display: none; }
  .etkinlik.bitti .bitti-etiketi {
    display: block;
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    font-size: 0.875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--murekkep-sis);
  }

  .bilgi-listesi { margin: 0; }
  .bilgi-listesi > div {
    display: grid;
    grid-template-columns: 5.2rem 1fr;
    gap: 0.5rem 1rem;
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--cizgi);
    align-items: baseline;
  }
  .bilgi-listesi dt {
    font-size: 0.875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--murekkep-sis);
  }
  .bilgi-listesi dd {
    margin: 0;
    font-family: var(--baslik);
    font-size: 1.22rem;
    line-height: 1.35;
  }
  .bilgi-listesi dd small {
    display: block;
    font-family: var(--metin);
    font-size: 0.875rem;
    color: var(--murekkep-sis);
    margin-top: 0.2rem;
  }

  .dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    margin-top: 1.6rem;
    padding: 1rem 1.5rem;
    border: 1px solid var(--murekkep);
    border-radius: 999px;
    background: transparent;
    color: var(--murekkep);
    font: inherit;
    font-size: 0.875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 240ms ease, color 240ms ease;
  }
  .dugme:hover, .dugme:active { background: var(--murekkep); color: var(--kagit); }
  .dugme--dolu { background: var(--murekkep); color: var(--kagit); }
  .dugme--dolu:hover, .dugme--dolu:active { background: var(--altin-yazi); border-color: var(--altin-yazi); }
  .dugme svg { width: 1.1em; height: 1.1em; flex: none; }

  /* not kutusu */
  .not {
    text-align: center;
    padding: 2.2rem 1.4rem;
    border: 1px solid var(--cizgi);
    border-radius: 4px;
  }
  .not p:last-child { margin-bottom: 0; }

  /* ---------- kartta katılım sorusu ---------- */
  .katil {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--cizgi);
  }
  .katil fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
  .katil legend {
    width: 100%;
    padding: 0;
    margin-bottom: 0.8rem;
    text-align: center;
    font-family: var(--baslik);
    font-style: italic;
    font-size: 1.45rem;
  }
  .evet-hayir { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .secenek { position: relative; display: block; cursor: pointer; }
  .secenek input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .secenek span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    border: 1px solid var(--murekkep);
    border-radius: 999px;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    transition: background 200ms ease, color 200ms ease;
  }
  .secenek:hover span { background: var(--kagit-koyu); }
  .secenek input:checked + span { background: var(--murekkep); color: var(--kagit); }
  .secenek input:focus-visible + span { outline: 2px solid var(--altin-yazi); outline-offset: 3px; }

  .katil-detay[hidden] { display: none; }
  .katil-detay {
    display: grid;
    gap: 1rem;
    padding: 1.1rem 1rem;
    background: var(--kagit-koyu);
    border-radius: 3px;
  }
  .katil-detay label {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--murekkep-sis);
  }
  .katil-detay label small { font-size: 0.875rem; letter-spacing: 0.04em; text-transform: none; }
  .katil-detay input,
  .katil-detay select {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--sinir);
    border-radius: 3px;
    background: var(--kagit);
    color: var(--murekkep);
    font: inherit;
    font-size: 1rem;  /* iOS'ta odakta zoom olmasın */
  }
  .katil-detay input:focus, .katil-detay select:focus {
    outline: none;
    border-color: var(--altin-yazi);
    box-shadow: 0 0 0 1px var(--altin-yazi);
  }
  .katil-detay input::placeholder { color: var(--murekkep-sis); opacity: 1; }
  .katil-detay select { max-width: 11rem; cursor: pointer; }
  /* "Seçiniz" seçiliyken ipucu rengi */
  .katil-detay select:has(option[value=""]:checked) { color: var(--murekkep-sis); }
  .katil-detay .dugme { margin-top: 0; }
  /* bot tuzağı: görünmez ve yer kaplamaz (form alanı genişliğini ezmek için .katil-detay ile) */
  .katil-detay .tuzak { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); opacity: 0; }
  .kisi-alani[hidden] { display: none; }
  .form-uyari { margin: 0; font-size: 0.9rem; color: var(--kirmizi-yazi); }
  .form-uyari:empty { display: none; }
  .katil-tamam { margin: 0; font-size: 0.95rem; text-align: center; }

  /* koyu after party kartında */
  .etkinlik--after .katil { border-color: #4A423A; }
  .etkinlik--after .secenek span { border-color: var(--kagit); }
  .etkinlik--after .secenek:hover span { background: #3A332C; }
  .etkinlik--after .secenek input:checked + span { background: var(--kagit); color: var(--murekkep); }
  .etkinlik--after .secenek input:focus-visible + span { outline-color: var(--goz); }
  .etkinlik--after .katil-detay { background: #3A332C; }
  .etkinlik--after .katil-detay label { color: var(--gece-sis); }
  .etkinlik--after .form-uyari { color: #F2B8A8; }
  .etkinlik--after .dugme--dolu { background: var(--kagit); color: var(--murekkep); }
  .etkinlik--after .dugme--dolu:hover,
  .etkinlik--after .dugme--dolu:active { background: var(--goz); border-color: var(--goz); color: var(--murekkep); }

  footer {
    text-align: center;
    padding: 4rem 0 calc(3rem + env(safe-area-inset-bottom));
    color: var(--murekkep-sis);
    font-size: 0.875rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
  }

  /* scroll ile beliren bloklar */
  .belir { opacity: 0; transform: translateY(18px); transition: opacity 800ms ease, transform 800ms cubic-bezier(.2,.6,.2,1); }
  .belir.gorundu { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .belir { opacity: 1; transform: none; } }

  /* kina-nikah.html: resim olarak paylaşılan sade sayfa */
  .resim-sayfasi .giris { padding-bottom: 0; }
  .resim-sayfasi footer { padding: 1.5rem 0 2rem; }
  /* nikah salonu: mekân adının altında kendi satırında */
  .bilgi-listesi .salon { display: block; }