/* U2 AI Studio sertifika: doğrulama sayfası (/certification, /tr/sertifika) ve panel (/certification/panel).
   site.css'in değişkenlerini ve bileşenlerini (glass, btn, field) kullanır; yalnız eksikleri tanımlar. */

[hidden] { display: none !important }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* ---- doğrulama sayfası ------------------------------------------------------------------- */
.dg-giris { display: flex; gap: 10px }
.dg-giris input { flex: 1; min-width: 0; font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase }
.dg-giris input::placeholder { text-transform: none; letter-spacing: .04em }
.dg-giris .btn { flex: none }
.dg-nasil { margin: 14px 0 0; padding-left: 20px; list-style: decimal; display: grid; gap: 10px; color: var(--text-2); font-size: .92rem; line-height: 1.55 }

.dg-sonuc { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 24px }
.dg-durum { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: rgba(255,255,255,.04) }
.dg-durum svg { width: 26px; height: 26px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.dg-durum b { display: block; font-size: 1.05rem; color: var(--ink) }
.dg-durum p { margin: 3px 0 0; font-size: .88rem; color: var(--text-2) }
.dg-durum--gecerli { color: #5ee0a0; border-color: rgba(94,224,160,.38); background: rgba(94,224,160,.07) }
.dg-durum--iptal { color: #ff8a8a; border-color: rgba(255,138,138,.4); background: rgba(255,138,138,.07) }
.dg-durum--uyari { color: #ffcf6e; border-color: rgba(255,207,110,.4); background: rgba(255,207,110,.07) }
.dg-durum--yok { color: var(--text-2) }

.dg-baslik { margin: 22px 0 4px; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3) }
.dg-ad { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--ink); line-height: 1.15 }
.dg-alanlar { margin: 18px 0 0; display: grid; grid-template-columns: minmax(130px, 34%) 1fr; gap: 0; font-size: .92rem }
.dg-alanlar dt, .dg-alanlar dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line) }
.dg-alanlar dt { color: var(--text-3); padding-right: 14px }
.dg-alanlar dd { color: var(--ink) }
.dg-alanlar dd small { display: block; color: var(--text-2); font-size: .84rem; margin-top: 2px }
.dg-mono { font-family: var(--mono); font-size: .8rem; word-break: break-all; color: var(--text) }
.dg-eylem { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px }
.dg-tckn { margin-top: 24px; padding: 16px 18px; border-radius: var(--r-sm); border: 1px dashed var(--line-2) }
.dg-tckn p { margin: 0 0 10px; font-size: .86rem; color: var(--text-2) }
.dg-tckn .dg-giris input { text-transform: none }
.dg-tckn__sonuc { margin-top: 10px; font-size: .9rem; font-weight: 600 }
.dg-tckn__sonuc.ok { color: #5ee0a0 } .dg-tckn__sonuc.hayir { color: #ff8a8a }

@media (max-width: 560px) {
  .dg-giris { flex-direction: column }
  .dg-alanlar { grid-template-columns: 1fr }
  .dg-alanlar dt { border-bottom: 0; padding-bottom: 0 }
}

/* ---- panel -------------------------------------------------------------------------------- */
.pn-ust { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px;
  padding: 12px var(--gutter); background: rgba(4,8,15,.86); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur) }
.pn-ust__logo img { height: 30px; width: auto; display: block }
.pn-ust__ad { font-weight: 600; color: var(--ink); padding-left: 16px; border-left: 1px solid var(--line-2) }
.pn-ust__ben { margin-left: auto; font-size: .86rem; color: var(--text-2) }
.pn { max-width: 1120px; margin: 0 auto; padding: 32px var(--gutter) 80px }
.pn h1 { font-size: 1.8rem; margin-bottom: 8px }
.pn h2 { font-size: 1.25rem; margin-bottom: 16px }

.pn-giris { max-width: 440px; margin: 8vh auto 0; padding: 32px }
.pn-giris .lede { font-size: .94rem; margin-bottom: 22px }
.pn-bag { background: none; border: 0; padding: 4px 2px; color: var(--ice); font: inherit; font-size: .86rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px }
.pn-bag:hover { color: var(--ice-2) }
.pn-bag--sil { color: #ff9a9a }
.pn-giris__alt { display: flex; justify-content: center; gap: 22px; margin-top: 12px }

.pn-sekmeler { display: flex; gap: 6px; margin-bottom: 20px; border-bottom: 1px solid var(--line) }
.pn-sekmeler button { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 12px 16px; color: var(--text-2); font: inherit; font-weight: 600; cursor: pointer }
.pn-sekmeler button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ice) }

.pn-kart { display: block; min-width: 0; margin: 0 0 18px; padding: 22px 24px 8px; border: 0 }
.pn-kart > legend { float: left; width: 100%; padding: 0; margin-bottom: 16px; font-weight: 700; color: var(--ink); font-size: 1rem }
.pn-kart > legend + * { clear: both }
section.pn-kart { padding-bottom: 22px }
.pn-izgara { display: grid; gap: 0 16px }
.pn-izgara--2 { grid-template-columns: 1fr 1fr }
.pn-izgara--3 { grid-template-columns: repeat(3, 1fr) }
.pn-izgara--yil { grid-template-columns: 110px 1fr 1fr }
@media (max-width: 760px) { .pn-izgara--2, .pn-izgara--3, .pn-izgara--yil { grid-template-columns: 1fr } }

.pn-egitim__ust { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap }
.pn-egitim__dug { display: flex; gap: 14px }
.pn-tur { display: inline-flex; border: 1px solid var(--line-2); border-radius: 999px; padding: 3px }
.pn-tur label { position: relative; padding: 7px 16px; border-radius: 999px; font-size: .88rem; font-weight: 600; color: var(--text-2); cursor: pointer }
.pn-tur input { position: absolute; opacity: 0; inset: 0; cursor: pointer }
.pn-tur label:has(input:checked) { background: var(--ice); color: #04080F }
.pn-tur label:has(input:focus-visible) { outline: 2px solid var(--ice); outline-offset: 2px }
.pn-onay { display: inline-flex; gap: 9px; align-items: center; margin: 2px 0 16px; font-size: .9rem; color: var(--text); cursor: pointer }
.pn-onay input { width: 17px; height: 17px; accent-color: var(--ice) }
.pn-egitmen { padding-top: 4px }
.pn-imza { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 18px }
.pn-imza label:focus-within { outline: 2px solid var(--ice); outline-offset: 2px }
.pn-imza img { height: 56px; max-width: 220px; object-fit: contain; background: #fff; border-radius: 8px; padding: 4px 8px }

.pn-alt { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 18px; flex-wrap: wrap }
.pn-alt .form__micro { max-width: 520px; margin: 0 }
.pn-dugmeler { display: flex; gap: 10px; flex-wrap: wrap }

.pn-sonuc { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.pn-sonuc li { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: center;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgba(255,255,255,.03) }
.pn-sonuc b { color: var(--ink) }
.pn-sonuc .dg-mono { font-size: .82rem }
.pn-sonuc__eylem { display: flex; gap: 14px; align-items: center; font-size: .86rem }
.pn-sonuc__eylem a { color: var(--ice); text-decoration: underline; text-underline-offset: 3px }
.pn-sonuc__durum { font-size: .82rem; color: var(--text-2) }
.pn-sonuc__durum.ok { color: #5ee0a0 } .pn-sonuc__durum.hata { color: #ff8a8a }

.pn-arac { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap }
.pn-arac .field { flex: 1; min-width: 240px }
.pn-arac .btn { margin-bottom: 17px }
.pn-tablo-kap { overflow-x: auto; margin: 0 -6px 14px }
.pn-tablo { width: 100%; border-collapse: collapse; font-size: .86rem }
.pn-tablo th { text-align: left; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 600; padding: 8px 6px; border-bottom: 1px solid var(--line-2) }
.pn-tablo td { padding: 10px 6px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text) }
.pn-tablo td b { color: var(--ink); font-weight: 600 }
.pn-tablo td small { display: block; color: var(--text-3) }
.pn-tablo td .dg-mono { white-space: nowrap }
.pn-tablo .pn-is { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; white-space: nowrap }
.pn-tablo input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--ice) }
.pn-pil { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 600 }
.pn-pil--gecerli { background: rgba(94,224,160,.14); color: #5ee0a0 }
.pn-pil--iptal { background: rgba(255,138,138,.14); color: #ff8a8a }
.pn-pil--pdfyok { background: rgba(255,207,110,.14); color: #ffcf6e }
.pn-pil--bekliyor { background: rgba(255,207,110,.14); color: #ffcf6e }
.pn-pil--gonderildi { background: rgba(143,182,255,.16); color: var(--ice) }
.pn-pil--teslim { background: rgba(94,224,160,.14); color: #5ee0a0 }
.pn-pil--hata { background: rgba(255,138,138,.14); color: #ff8a8a }
.pn-gonderim small .pn-bag { padding: 0; font-size: inherit }
.pn-suzgec { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px }
.pn-suzgec button { border: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: var(--text-2);
  border-radius: 999px; padding: 7px 14px; font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer }
.pn-suzgec button span { margin-left: 4px; color: var(--text-3); font-weight: 500 }
.pn-suzgec button[aria-selected="true"] { background: var(--ice); border-color: var(--ice); color: #04080F }
.pn-suzgec button[aria-selected="true"] span { color: #04080F }
.pn-gecmis td { background: rgba(255,255,255,.025); padding-top: 4px }
.pn-gecmis ul { list-style: none; margin: 0; padding: 4px 0; display: grid; gap: 8px; font-size: .84rem }
.pn-gecmis li small { display: block; color: var(--text-3); margin-top: 2px }

.pn-bildirim { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 40; max-width: min(560px, calc(100vw - 32px));
  padding: 12px 18px; border-radius: 12px; background: #0f1c30; border: 1px solid var(--line-2); color: var(--ink);
  font-size: .9rem; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .2s ease }
.pn-bildirim.acik { opacity: 1 }
.pn-bildirim.hata { border-color: rgba(255,138,138,.5) }