/* ===========================================================================
   Belge doğrulama sayfası (.cvf) — ORTAK
   ---------------------------------------------------------------------------
   Bu dosya `certificate_verify.php` içindeki satır içi stil bloğundan
   ÇIKARILDI: mikro yeterlilik belgesinin doğrulama sayfası da AYNI standardı
   kullanıyor. Kural iki yerde kopyalanırsa biri güncellenip diğeri eskir.

   Kullanan sayfalar:
     /certificate/verify/{token}                       katılım belgesi (turuncu)
     /mikro-yeterlilikler/sertifika-dogrula/{token}    mikro belge (mavi)

   Vurgu ailesi belirteçte; mikro tarafı yalnızca `.cvf--mikro` kapsamında
   değerleri değiştiriyor, tek bir bileşen kuralı ikinci kez yazılmıyor.
   Zemin ve çizgi renkleri public-ui.css'ten (`--pu-*`) geliyor.
   =========================================================================== */

.cvf {
    --cvf-accent: #f37a52;
    --cvf-accent-rgb: 243, 122, 82;
    --cvf-accent-2: #fda871;
    --cvf-accent-3: #ec387d;
    --cvf-accent-light: #ffd0ae;
}

/* Mikro yeterlilik belgesi MAVİ — panelde ve belgede olduğu gibi. */
.cvf--mikro {
    --cvf-accent: #5b9dff;
    --cvf-accent-rgb: 91, 157, 255;
    --cvf-accent-2: #7cb8ff;
    --cvf-accent-3: #8b7bf7;
    --cvf-accent-light: #dceaff;
}

/* ---------------------------------------------------------------------------
   Belge doğrulama sayfası (.cvf)
   ---------------------------------------------------------------------------
   Sayfa Bulma varsayılanlarıyla kalmıştı: ortalanmış `title is-2`, kenarlıksız
   düğme yığını ve `<center>` etiketiyle sarılmış bir form. Sitenin geri kalanı
   `pubhead` + panel diline geçtiği için buraya gelen kullanıcı başka bir siteye
   düşmüş gibi hissediyordu. Yapı korunuyor (aynı veriler, aynı bağlantılar),
   yalnızca kabuk tasarım çizgisine alınıyor.

   Stil sayfaya gömülü: yalnızca bu görünüm kullanıyor, ortak dosyayı
   büyütmenin anlamı yok. Renk ve yarıçap değerleri public-ui.css'teki
   değişkenlerden geliyor, böylece tema tek yerden değişmeye devam ediyor.
   --------------------------------------------------------------------------- */
.cvf { padding-top: 2.5rem; }

/* --------------------------------------------------------------- Durum şeridi */
.cvf-durum {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 1.6rem;
    padding: .6rem 1.1rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: .9rem;
    font-weight: 700;
}
.cvf-durum svg { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Yeşil = doğrulandı, kırmızı = geçersiz. Renk tek başına anlam taşımıyor:
   ikon ve metin de durumu söylüyor. */
.cvf-durum--ok  { border-color: rgba(52, 211, 153, .35); background: rgba(52, 211, 153, .12); color: #6ee7b7; }
.cvf-durum--yok { border-color: rgba(248, 113, 113, .35); background: rgba(248, 113, 113, .12); color: #fca5a5; }

/* ------------------------------------------------------------------- Panel */
.cvf-panel {
    max-width: 980px;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 1.15rem;
    border: 1px solid var(--pu-line);
    background: var(--pu-panel, #121414);
}
.cvf-gorsel {
    display: block;
    width: 100%;
    height: auto;
    border-radius: .9rem;
    border: 1px solid rgba(255, 255, 255, .08);
    background: #0d0f10;
}

/* Künye — belge görselindeki bilgiyi METİN olarak da veriyor.
   Görsel bir PNG; ekran okuyucu ve arama motoru içindekini okuyamıyor. */
.cvf-kunye {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .9rem 1.5rem;
    margin-top: 1.4rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(255, 255, 255, .07);
}
.cvf-kunye dt {
    margin-bottom: .2rem;
    color: var(--pu-muted);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.cvf-kunye dd { margin: 0; color: #fff; font-size: .95rem; font-weight: 600; line-height: 1.5; }
/* Görseli olmayan belge — doğrulama yine geçerli, yalnızca dosya yok. */
.cvf-eksik {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    padding: 1.5rem 1.2rem;
    border-radius: .9rem;
    border: 1px dashed rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .03);
    color: var(--pu-muted);
    font-size: .9rem;
}
.cvf-eksik svg { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.cvf-anahtar { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; word-break: break-all; color: #dfe4e4; }

/* ------------------------------------------------------------------ Eylemler */
/* Eylem şeridi PAYLAŞ NOTUNUN hemen altında: notta anlatılan "Profile Ekle"
   ve "Ağda Paylaş" düğmeleri, metinden sonra gelmeli — eskiden belge
   görselinin de altında, sayfanın en dibinde kalıyordu. Alt boşluk panelden
   ayırıyor; not basılmadığında (başkasının belgesi) durum şeridinin kendi
   1,6rem alt boşluğu üstte yeterli havayı bırakıyor. */
.cvf-eylem {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 0 auto 1.5rem;
    max-width: 980px;
}
.cvf-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 40px;
    padding: 0 1.05rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .04);
    color: #e9eded !important;
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none !important;
    transition: border-color .22s ease, background-color .22s ease, color .22s ease;
}
.cvf-btn:hover { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .09); color: #fff !important; }
.cvf-btn svg { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Birincil eylem: belgeyi indirmek. Marka rengi yalnızca burada. */
.cvf-btn--ana {
    border-color: rgba(var(--cvf-accent-rgb), .5);
    background: rgba(var(--cvf-accent-rgb), .16);
    color: var(--cvf-accent-light) !important;
}
.cvf-btn--ana:hover { border-color: rgba(var(--cvf-accent-rgb), .9); background: rgba(var(--cvf-accent-rgb), .26); color: #fff !important; }
/* LinkedIn logosu kurumsal renkli; `fill` kullandığı için kontur sıfırlanıyor. */
.cvf-btn .cvf-li { width: 17px; height: 17px; stroke: none; }
.cvf-eylem-bosluk { flex: 1 1 auto; }

/* --------------------------------------------------------------- Paylaş notu */
.cvf-not {
    max-width: 980px;
    margin: 0 auto 1.25rem;
    padding: 1rem 1.15rem;
    border-radius: .9rem;
    border: 1px solid rgba(52, 211, 153, .22);
    background: rgba(52, 211, 153, .07);
    color: #cfd6d6;
    font-size: .88rem;
    line-height: 1.7;
}
.cvf-not strong { color: #6ee7b7; }
.cvf-not-baslik { display: block; margin-bottom: .35rem; color: #fff; font-weight: 700; }

/* ------------------------------------------------------------------- Form */
.cvf-form {
    max-width: 560px;
    margin: 0 auto;
    padding: 1.6rem;
    border-radius: 1.15rem;
    border: 1px solid var(--pu-line);
    background: var(--pu-panel, #121414);
}
.cvf-form-baslik { margin: 0 0 .4rem; color: #fff; font-size: 1.15rem; font-weight: 800; }
.cvf-form-alt { margin: 0 0 1.1rem; color: var(--pu-muted); font-size: .88rem; line-height: 1.7; }
.cvf-input {
    width: 100%;
    height: 46px;
    padding: 0 1rem;
    border-radius: .75rem;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .04);
    color: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .9rem;
    transition: border-color .22s ease, background-color .22s ease;
}
.cvf-input::placeholder { color: #7d8484; font-family: inherit; }
.cvf-input:focus { outline: none; border-color: rgba(var(--cvf-accent-rgb), .75); background: rgba(255, 255, 255, .06); }
.cvf-gonder {
    width: 100%;
    height: 46px;
    margin-top: .8rem;
    border-radius: .75rem;
    border: 0;
    background: linear-gradient(90deg, var(--cvf-accent-2), var(--cvf-accent) 55%, var(--cvf-accent-3));
    color: #1a0b06;
    font-size: .92rem;
    font-weight: 800;
    cursor: pointer;
    transition: filter .22s ease;
}
.cvf-gonder:hover { filter: brightness(1.08); }

@media screen and (max-width: 600px) {
    .cvf-panel, .cvf-form { padding: 1.15rem; }
    .cvf-btn { flex: 1 1 auto; justify-content: center; }
    .cvf-eylem-bosluk { display: none; }
}


/* ---------------------------------------------------------------------------
   Sayfa başlığı (`pubhead`, public-ui.css) — mikro türevi
   ---------------------------------------------------------------------------
   `pubhead` ortak bir vitrin bileşeni ve rengi kuralın içinde SABİT
   (`rgba(243,122,82,…)`, `#ffbe9c`, degrade durakları). O dosyayı
   değiştirmek sitenin bütün vitrin başlıklarını etkilerdi; burada yalnızca
   mikro doğrulama sayfasının kapsamında düzeltiliyor.
   --------------------------------------------------------------------------- */
.cvf--mikro .pubhead-eyebrow {
    border-color: rgba(var(--cvf-accent-rgb), .35);
    background: rgba(var(--cvf-accent-rgb), .14);
    color: var(--cvf-accent-light);
}
.cvf--mikro .pubhead-rule {
    background: linear-gradient(90deg, var(--cvf-accent-3), var(--cvf-accent) 55%, var(--cvf-accent-2));
}