/* Herkese açık sertifika doğrulama sayfası (inc/belgedogrulama.php, HTML: system/belge.php).
   Tek sütun: panel temasının mor geçişli bandı ve üstüne binen doğrulama kartı. Panel gibi yalnız açık görünüm. */
@font-face { font-family: "Ubuntu"; font-weight: 400; font-display: swap; src: url("../fonts/Ubuntu/Ubuntu-Regular.woff2") format("woff2"), url("../fonts/Ubuntu/Ubuntu-Regular.woff") format("woff"); }
@font-face { font-family: "Ubuntu"; font-weight: 500; font-display: swap; src: url("../fonts/Ubuntu/Ubuntu-Medium.woff2") format("woff2"), url("../fonts/Ubuntu/Ubuntu-Medium.woff") format("woff"); }
/* Sertifikadaki yazı tipi; yalnız Latin + Türkçe harfler (pyftsubset, wght=500) */
@font-face { font-family: "EB Garamond"; font-weight: 500; font-display: swap; src: url("../fonts/EBGaramond/EBGaramond-Medium-tr.woff2") format("woff2"); }

:root {
  --tema-1: #da8cff;
  --tema-2: #9a55ff;
  --mor: #8a3ffc;
  --mor-acik: #f3e9ff;
  --zemin: #f4f2f9;
  --kart: #ffffff;
  --metin: #23213a;
  --soluk: #6c6a85;
  --cizgi: #e6e3f0;
  --yesil: #0f7b4b;
  --yesil-zemin: #e6f5ee;
  --kirmizi: #b42318;
  --kirmizi-zemin: #fdecea;
  --yazi: "Ubuntu", "Segoe UI", system-ui, sans-serif;
  --ad: "EB Garamond", Georgia, "Times New Roman", serif;
  --kod: ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--zemin); color: var(--metin); font: 15px/1.55 var(--yazi); }
.belge-gutter { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* Bant */
.belge-bant { position: relative; overflow: hidden; color: #fff; background: linear-gradient(to right, var(--tema-1), var(--tema-2)); padding-block: 28px 84px; }
.belge-bant::before { content: ""; position: absolute; inset: 0; opacity: .45; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 28% 72%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 63% 55%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 26%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 90% 70%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 82%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 52% 88%, #fff 50%, transparent 51%); }
.belge-bant-ic { position: relative; max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: 18px; }
.belge-bant img { width: clamp(80px, 22vw, 112px); height: auto; flex: 0 0 auto; filter: drop-shadow(0 1px 2px rgba(60,20,110,.35)); }
.belge-bant-yazi { min-width: 0; }
.belge-site { font-size: 14px; letter-spacing: .02em; opacity: .92; font-weight: 500; }
.belge-bant h1 { margin: 2px 0 0; font-size: clamp(1.35rem, 4.5vw, 1.75rem); font-weight: 500; line-height: 1.2; text-shadow: 0 1px 2px rgba(60,20,110,.25); text-wrap: balance; }

/* Kart */
.belge-ana { padding-block: 0 40px; }
.belge-kart { position: relative; max-width: 720px; margin: -60px auto 0; background: var(--kart); border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(60,20,110,.06), 0 12px 32px rgba(60,20,110,.12); }
.belge-durum { display: flex; align-items: center; gap: 12px; padding: 16px 22px; font-weight: 500; }
.belge-durum svg { flex: 0 0 auto; width: 28px; height: 28px; }
.belge-durum small { display: block; font-weight: 400; font-size: 13px; opacity: .85; }
.belge-durum > div { min-width: 0; overflow-wrap: anywhere; }
.belge-durum.gecerli { background: var(--yesil-zemin); color: var(--yesil); }
.belge-durum.yok { background: var(--kirmizi-zemin); color: var(--kirmizi); }
.belge-govde { padding: 22px; display: grid; gap: 22px; }

.belge-etiket { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--soluk); font-weight: 500; }
.belge-sahip { margin: 2px 0 0; font-family: var(--ad); font-weight: 500; font-size: clamp(1.7rem, 6vw, 2.2rem); line-height: 1.15; overflow-wrap: anywhere; }
.belge-bilgi { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-top: 18px; border-top: 1px solid var(--cizgi); }
.belge-bilgi div { min-width: 0; }
.belge-bilgi dd { margin: 3px 0 0; font-weight: 500; overflow-wrap: anywhere; }
.belge-kod { font-family: var(--kod); font-size: 1.05rem; letter-spacing: .12em; background: var(--mor-acik); color: var(--mor); padding: 1px 8px; border-radius: 6px; }

.belge-gorsel { display: grid; gap: 10px; }
.belge-gorsel figure { margin: 0; border: 1px solid var(--cizgi); border-radius: 10px; overflow: hidden; background: #fafafa; }
.belge-gorsel img { display: block; width: 100%; height: auto; }
.belge-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; }
.belge-btn { font: 500 14px var(--yazi); border-radius: 8px; padding: 9px 16px; cursor: pointer; border: 1px solid var(--tema-2); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.belge-btn-dolu { background: linear-gradient(to right, var(--tema-1), var(--tema-2)); color: #fff; }
.belge-btn-bos { background: #fff; color: var(--mor); }
.belge-btn:hover { text-decoration: none; filter: brightness(.96); }
.belge-btn:focus-visible, .belge-imza:focus-visible, .belge-form input:focus-visible { outline: 3px solid rgba(138,63,252,.35); outline-offset: 2px; }
.belge-not { margin: 0; padding: 14px 16px; border-radius: 10px; background: var(--zemin); color: var(--soluk); font-size: 14px; }
.belge-iz { font-size: 13px; color: var(--soluk); padding: 14px 22px; border-top: 1px solid var(--cizgi); display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; }
.belge-iz span { overflow-wrap: anywhere; }

/* Form */
.belge-form-baslik { margin: 0; font-size: 1.15rem; font-weight: 500; }
.belge-form-aciklama { margin: 4px 0 0; color: var(--soluk); max-width: 60ch; }
.belge-form { display: grid; gap: 8px; }
.belge-form label { font-size: 13px; font-weight: 500; }
.belge-form-satir { display: flex; gap: 8px; flex-wrap: wrap; }
.belge-form input { flex: 1 1 200px; min-width: 0; font: 1.1rem var(--kod); letter-spacing: .14em; text-transform: uppercase; padding: 10px 14px; border: 1px solid #cfcbe0; border-radius: 8px; color: var(--metin); background: #fff; }
.belge-form input::placeholder { letter-spacing: .05em; text-transform: none; font-family: var(--yazi); font-size: 15px; color: #9a97b0; }
.belge-ipucu { font-size: 13px; color: var(--soluk); }

.belge-alt { max-width: 720px; margin: 22px auto 0; display: flex; justify-content: center; }
.belge-imza { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--soluk); text-decoration: none; padding: 4px 6px; border-radius: 6px; }
.belge-imza img { height: 22px; width: auto; display: block; }
.belge-imza:hover { color: var(--metin); text-decoration: none; }

@media (max-width: 560px) {
  .belge-bilgi { grid-template-columns: 1fr 1fr; }
  .belge-bilgi .belge-tur { grid-column: 1 / -1; }
  .belge-govde { padding: 18px; }
  .belge-durum { padding: 14px 18px; }
  .belge-iz { padding: 12px 18px; }
  .belge-dugmeler .belge-btn { flex: 1 1 auto; }
}