/* ==========================================================================
   Zudax Serial Verification — on yuz

   Tema degiskenleri (--gold, --ff-serif ...) varsa onlar kullanilir; tema
   degisirse yedek degerlerle yine dogru gorunur.
   ========================================================================== */

.zdx-sc {
  --sc-gold: var(--gold, #a8873e);
  --sc-gold-light: var(--gold-light, #cbb26a);
  --sc-ink: var(--ink, #070706);
  --sc-soft: var(--ink-soft, rgba(10, 10, 8, .62));
  --sc-line: var(--border, rgba(12, 11, 8, .12));
  --sc-serif: var(--ff-serif, Georgia, 'Times New Roman', serif);
  --sc-sans: var(--ff-sans, 'Helvetica Neue', Arial, sans-serif);

  font-family: var(--sc-sans);
  margin: 0;
}

/* Form -------------------------------------------------------------------- */

.zdx-sc-label {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sc-soft);
  margin-bottom: 10px;
}

.zdx-sc-field {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.zdx-sc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
}

/* Dort kutu her zaman soldan saga okunur — bir sayi yaziyoruz. */
.zdx-sc-groups {
  display: flex;
  flex: 1 1 auto;
  gap: 10px;
  direction: ltr;
}

.zdx-sc-input {
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  height: 54px;
  border: 1px solid var(--sc-line);
  border-radius: 0;
  background: #fff;
  padding: 0 8px;
  font-family: var(--sc-sans);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .16em;
  text-align: center;
  text-transform: uppercase;
  color: var(--sc-ink);
  box-shadow: none;
  transition: border-color .3s;
}

.zdx-sc-input:focus {
  outline: none;
  border-color: var(--sc-gold);
}

.zdx-sc-input::placeholder {
  color: rgba(10, 10, 8, .22);
  letter-spacing: .16em;
}

.zdx-sc-btn {
  flex: 0 0 auto;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 34px;
  border: 1px solid var(--sc-ink);
  border-radius: 0;
  background: var(--sc-ink);
  color: #faf8f2;
  font-family: var(--sc-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .35s, border-color .35s, color .35s;
}

.zdx-sc-btn:hover,
.zdx-sc-btn:focus-visible {
  background: var(--sc-gold);
  border-color: var(--sc-gold);
  color: #fff;
}

.zdx-sc-hint {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--sc-soft);
}

/* Bal kupu — ekranda gorunmez ama ekran okuyucudan da gizli degil. */
.zdx-sc-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Sonuc -------------------------------------------------------------------- */

.zdx-sc-result {
  /* Her durum yalnizca bu bes degiskeni degistirir. */
  --sc-rail: var(--sc-gold);              /* kenar cizgisi — canli ton      */
  --sc-stamp: #7a6224;                    /* ikon + rozet dolgusu — koyu ton */
  --sc-tint: #fbf9f3;                     /* kart zemini                     */
  --sc-badge-fg: #fff;
  --sc-badge-bg: var(--sc-stamp);

  border: 1px solid var(--sc-line);
  border-inline-start: 3px solid var(--sc-rail);
  background: var(--sc-tint);
  padding: 26px 28px;
  margin: 0 0 28px;
}

/* Ikon ve rozet tek satirda; Arapca'da flex kendiliginden ters doner. */
.zdx-sc-flag {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 13px;
}

.zdx-sc-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--sc-stamp);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Ic isaret cerceveden kalin olsun ki 20px'te de okunsun. */
.zdx-sc-icon .zdx-mark { stroke-width: 1.9; }

/* Kayitta olmayan numara: cerceve kirik. Cizgi ic isaret kalinliginda,
   yoksa tireler tuy gibi kalir. 3.5+2.1 = 5.6 birim, altigenin 55.9
   birimlik cevresine tam 10 kez sigar; koseler temiz kalir. */
.zdx-sc-icon .zdx-frame-open {
  stroke-width: 1.9;
  stroke-dasharray: 3.5 2.1;
}

/* Nokta dolu olmali; cizgi ucu olarak 20px'te kayboluyor. */
.zdx-sc-icon .zdx-dot { fill: currentColor; stroke: none; }

.zdx-sc-result h3 {
  font-family: var(--sc-serif);
  font-size: 25px;
  font-weight: 300;
  line-height: 1.3;
  color: var(--sc-ink);
  margin: 0 0 12px;   /* ust bosluk artik .zdx-sc-flag'in isi */
}

/* Sabit renk: rgba(10,10,8,.62) dort ayri zeminde dort ayri orana
   donusuyordu; bu deger dordunde de 6.7:1 ve uzeri. */
.zdx-sc-result p {
  margin: 0 0 10px;
  font-size: 14.5px;
  line-height: 1.85;
  color: #55534e;
}

.zdx-sc-result p:last-child { margin-bottom: 0; }

.zdx-sc-result strong {
  color: var(--sc-ink);
  font-weight: 500;
}

/* Rozet artik ince cerceve degil, basilmis bir muhur.
   line-height 1 sart: yoksa temadan 1.75 miras alinir, kutu 21.5px yerine
   ~30.6px olur ve ikonla hizasi bozulur. */
.zdx-sc-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--sc-badge-fg);
  background: var(--sc-badge-bg);
  border: 1px solid var(--sc-stamp);
  /* Son harften sonra da .26em bosluk kalir; soldan ayni kadar ekleyip
     yaziyi kutunun optik ortasina getiriyoruz. */
  padding: 5px 12px 5px calc(12px + .26em);
}

/* Durumlar ----------------------------------------------------------------- */

.zdx-sc-result.is-first {
  --sc-rail: #1c7a4a;
  --sc-stamp: #14603a;
  --sc-tint: #edf4ec;
}

.zdx-sc-result.is-repeat {
  --sc-rail: #af5800;
  --sc-stamp: #9a4900;
  --sc-tint: #fcf1de;
}

/* Ikisi de "bu urunu kullanmayin" demek; hangisinden geldigi fark etmesin.
   Farki ikon ve rozet sozcugu tasiyor. */
.zdx-sc-result.is-unknown,
.zdx-sc-result.is-void {
  --sc-rail: #b02a25;
  --sc-stamp: #7e1016;
  --sc-tint: #faedea;
}

/* Form hatasi urun hakkinda bir hukum degil: ayni kirmizi ailesi, en acik
   zemin, dolu yerine cerceveli rozet. En sik karsilasilan sonuc, en hafif
   kart. */
.zdx-sc-result.is-error {
  --sc-rail: #b02a25;
  --sc-stamp: #96201a;
  --sc-tint: #fcf6f4;
  --sc-badge-fg: #96201a;
  --sc-badge-bg: transparent;
}

/* Yuksek kontrast kipinde butun renkler atilir; durum yalnizca rozet
   sozcugune kalirdi. Cizili isaret isin diger yarisi. */
@media (forced-colors: active) {
  .zdx-sc-icon {
    forced-color-adjust: none;
    color: CanvasText;
    stroke: CanvasText;
  }

  .zdx-sc-badge { border: 1px solid CanvasText; }
  .zdx-sc-result { border-inline-start-width: 3px; }
}

/* Musteri sonucu yazdirabilir; renkler kaybolmasin. */
@media print {
  .zdx-sc-result {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* Sagdan sola --------------------------------------------------------------- */

/* Arapca'da harf araligi harflerin birlesmesini bozar. */
[dir="rtl"] .zdx-sc-label,
[dir="rtl"] .zdx-sc-badge,
[dir="rtl"] .zdx-sc-btn { letter-spacing: normal; }

[dir="rtl"] .zdx-sc-badge { padding: 5px 12px; }

/* Seri numarasi her zaman soldan saga okunur. */
[dir="rtl"] .zdx-sc-input,
[dir="rtl"] .zdx-sc-result strong {
  direction: ltr;
  unicode-bidi: isolate;
}

[dir="rtl"] .zdx-sc-input { text-align: center; }

/* Kucuk ekran --------------------------------------------------------------- */

@media (max-width: 600px) {
  .zdx-sc-row { flex-direction: column; }
  .zdx-sc-btn { width: 100%; }
  .zdx-sc-groups { gap: 7px; }
  .zdx-sc-input { font-size: 17px; letter-spacing: .1em; padding: 0 4px; }
  .zdx-sc-result { padding: 22px 20px; }
  .zdx-sc-result h3 { font-size: 22px; }
  .zdx-sc-icon { width: 20px; height: 20px; }
  .zdx-sc-flag { gap: 9px; }
}