/* Fontlar kendi sunucumuzdan — Google Fonts'a üçüncü taraf bağlantı yok.
   Cormorant Garamond ve DM Sans, SIL Open Font License 1.1 (bkz. public/fonts/OFL.txt) */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(/fonts/cormorant-500i-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(/fonts/cormorant-500i-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/cormorant-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/cormorant-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/dmsans-var-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/dmsans-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Yazar stilleri tarayıcının [hidden] kuralını ezdiği için gerekli:
   .ekran ve .uyari gibi display taşıyan sınıflar hidden niteliğini yok sayardı. */
[hidden] { display: none !important; }

:root {
  --zemin: #191512;
  --yuzey: #241E1A;
  --cizgi: #38302A;
  --ayrac: #2E2721;
  --iz: #3A322B;
  --metin: #F2EADF;
  --soluk: #A3958A;
  --silik: #7E6E61;
  --vurgu: #D08A5E;
  --vurgu-ust: #191512;
  --vurgu-cizgi: #6B4B37;
  --basarili: #8FAE87;
  --basarili-zemin: #26301F;
  --hata: #E08477;
  --hata-cizgi: #5C3A34;
  --hata-zemin: #33211E;
  --uyari-zemin: #2E2318;
  --uyari-cizgi: #463520;
  --uyari-metin: #E8CFA8;

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--zemin); }

body {
  margin: 0;
  font-family: var(--sans);
  /* Üstten inen sıcak ışık: düz koyu zemin yerine mum ışığı hissi. */
  background:
    radial-gradient(135% 58% at 50% -8%, rgba(208, 138, 94, 0.09), transparent 62%),
    var(--zemin);
  background-repeat: no-repeat;
  color: var(--metin);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
}

.ekran {
  min-height: 100dvh;
  max-width: 430px;
  margin: 0 auto;
  padding: 46px 28px calc(32px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}

.bosluk { flex: 1 1 20px; min-height: 20px; }

/* --- karşılama --- */

.monogram { display: flex; flex-direction: column; align-items: center; margin: 0; }

/* Davetiye üslubu: ince, geniş harf aralıklı, italik bir karşılama satırı. */
.hosgeldin {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0.13em;
  color: var(--vurgu);
  opacity: 0.92;
}

.isimler {
  margin: 14px 0 0;
  font-family: var(--serif);
  font-size: 41px;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0.005em;
  text-align: center;
}

.ve { font-style: italic; color: var(--vurgu); }

/* Çizgi — motif — çizgi. Çizgiler motiften uzaklaştıkça sönüyor. */
.sus { display: flex; align-items: center; gap: 13px; margin-top: 18px; }

.sus-cizgi { width: 46px; height: 1px; background: linear-gradient(to right, transparent, var(--vurgu-cizgi)); }
.sus-cizgi:last-child { background: linear-gradient(to left, transparent, var(--vurgu-cizgi)); }

.nisan {
  width: 21px; height: 21px; flex: 0 0 auto;
  fill: none; stroke: var(--vurgu); stroke-width: 1.15; stroke-linejoin: round;
}

.ince-cizgi {
  width: 56px; height: 1px; margin-top: 14px;
  background: linear-gradient(to right, transparent, var(--vurgu-cizgi), transparent);
}

.tarih {
  margin: 16px 0 0;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--soluk);
}

.cagri { text-align: center; }

.cagri h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 31px;
  font-weight: 500;
  line-height: 1.24;
}

.cagri p {
  margin: 14px auto 0;
  max-width: 300px;
  font-size: 15px;
  line-height: 1.62;
  color: var(--soluk);
}

.form { display: flex; flex-direction: column; }

.form label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soluk);
}

#ad {
  margin-top: 10px;
  height: 52px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 16px;
  color: var(--metin);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: 3px;
}

#ad::placeholder { color: var(--silik); opacity: 1; }
#ad:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 1px; }

.ipucu { margin: 12px 0 0; text-align: center; font-size: 13px; color: var(--soluk); }


/* --- düğmeler --- */

.dugme {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 58px;
  margin-top: 14px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.dugme svg { width: 19px; height: 19px; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.birincil { background: var(--vurgu); color: var(--vurgu-ust); }
.birincil svg { stroke: var(--vurgu-ust); }
.birincil:disabled { opacity: 0.4; cursor: default; }

.ikincil { height: 48px; margin-top: 10px; font-size: 15px; background: transparent; color: var(--metin); border: 1px solid var(--cizgi); }

.cerceveli { background: transparent; color: var(--vurgu); border: 1px solid var(--vurgu-cizgi); height: 56px; margin-top: 0; }
.cerceveli svg { stroke: var(--vurgu); }

.duz { height: 48px; margin-top: 10px; font-size: 15px; font-weight: 400; background: transparent; color: var(--soluk); }
.duz svg { width: 17px; height: 17px; stroke: var(--soluk); }

.dugme:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }

/* --- yükleme ekranı --- */

#ekran-yukleme { padding-top: 30px; padding-left: 24px; padding-right: 24px; }

.ust-cubuk { display: flex; align-items: baseline; justify-content: space-between; }

.isimler-kucuk { font-family: var(--serif); font-size: 20px; font-weight: 500; }

.tarih-kucuk { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--soluk); }

.durum-baslik { margin: 26px 0 6px; font-family: var(--serif); font-size: 30px; font-weight: 500; }

.durum-satir { margin: 0; font-size: 14px; color: var(--soluk); }

.iz { margin-top: 14px; height: 6px; background: var(--iz); border-radius: 3px; overflow: hidden; }
.dolgu { width: 0; height: 100%; background: var(--vurgu); border-radius: 3px; transition: width 0.25s ease; }

.uyari {
  margin-top: 20px;
  display: flex;
  gap: 11px;
  align-items: flex-start;
  background: var(--uyari-zemin);
  border: 1px solid var(--uyari-cizgi);
  border-radius: 4px;
  padding: 13px 14px;
}
.uyari svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; fill: none; stroke: var(--uyari-metin); stroke-width: 1.7; stroke-linecap: round; }
.uyari p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--uyari-metin); }
.uyari b { font-weight: 700; }

.liste { list-style: none; margin: 8px 0 0; padding: 0; }

.satir { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--ayrac); }
.satir:last-child { border-bottom: 0; }

.kutu {
  width: 44px; height: 44px; flex: 0 0 auto;
  border-radius: 3px;
  background: var(--ayrac);
  display: flex; align-items: center; justify-content: center;
}
.kutu svg { width: 19px; height: 19px; fill: none; stroke: var(--silik); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kutu.hatali { background: var(--hata-zemin); }
.kutu.hatali svg { stroke: var(--hata); }
.kutu.bitti svg { stroke: var(--basarili); }

.orta { flex: 1 1 auto; min-width: 0; }
.dosya-adi { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alt-bilgi { margin-top: 3px; font-size: 12.5px; color: var(--soluk); }
.alt-bilgi.suruyor { color: var(--vurgu); }
.alt-bilgi.hatali { color: var(--hata); }

.mini-iz { margin-top: 7px; height: 4px; background: var(--iz); border-radius: 2px; overflow: hidden; }
.mini-dolgu { width: 0; height: 100%; background: var(--vurgu); border-radius: 2px; }

.tik-isareti { width: 22px; height: 22px; flex: 0 0 auto; }

.yeniden {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--hata);
  background: transparent;
  border: 1px solid var(--hata-cizgi);
  border-radius: 3px;
  cursor: pointer;
}

/* --- teşekkür ekranı --- */

#ekran-tesekkur { align-items: center; }
#ekran-tesekkur .form { width: 100%; }

.tik { width: 72px; height: 72px; border-radius: 50%; background: var(--basarili-zemin); display: flex; align-items: center; justify-content: center; }
.tik svg { width: 34px; height: 34px; fill: none; stroke: var(--basarili); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.tesekkur-baslik { margin: 26px 0 0; font-family: var(--serif); font-size: 46px; font-weight: 500; line-height: 1.05; }
.tesekkur-sayi { margin: 12px 0 0; font-size: 15px; color: var(--soluk); }
.tesekkur-metin { margin: 26px 0 0; max-width: 310px; text-align: center; font-size: 15px; line-height: 1.62; color: var(--soluk); }

.alt-monogram { display: flex; flex-direction: column; align-items: center; }
.isimler-orta { margin: 16px 0 0; font-family: var(--serif); font-size: 22px; font-weight: 500; }
.alt-monogram .tarih { font-size: 10px; margin-top: 8px; }

/* --- devam et şeridi --- */

.devam {
  margin-top: 20px;
  background: var(--yuzey);
  border: 1px solid var(--vurgu-cizgi);
  border-radius: 4px;
  padding: 16px;
}
.devam p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; }
.devam .dugme { margin-top: 0; height: 48px; font-size: 15px; }
.devam .ikincil { margin-top: 8px; }

/* --- bildirim --- */

.bildirim {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 48px);
  padding: 12px 18px;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: 4px;
  font-size: 14px;
  color: var(--metin);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .dolgu { transition: none; }
}