/* Herkese açık sertifika doğrulama ve paylaşım sayfası. */

.cert-page {
    padding: 60px 0 90px;
    background: #f6f7f9;
}

.cert-card {
    max-width: 900px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #e6e8ec;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 32px rgba(16,24,40,.06);
}

.cert-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 22px 30px;
    border-bottom: 1px solid #eef0f3;
}

.cert-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}

.cert-badge--valid {
    background: rgba(15,123,62,.10);
    color: #0f7b3e;
}

.cert-badge--invalid {
    background: rgba(180,35,24,.10);
    color: #b42318;
}

.cert-badge__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.cert-card__code {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .14em;
    color: #101828;
}

.cert-preview {
    display: block;
    width: 100%;
    height: auto;
    border-bottom: 1px solid #eef0f3;
    background: #101828;
}

/* Arka plan görselli şablonda isim, PDF'teki gibi görselin üzerine bindirilir.
   Konum ve boyut görsel genişliğine oranlıdır (cqw), değerler view'da CSS değişkeni olarak gelir.
   PDF motoru önek almayan transform'u uygulamadığı için orada "top" satırın üst kenarıdır;
   burada da kaydırma yapılmaz, satır yüksekliği varsayılanda bırakılır. */
.cert-preview-wrap {
    position: relative;
    container-type: inline-size;
}

.cert-preview__name {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--name-top, 35%);
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(var(--name-size, 1.64) * 1cqw);
    font-weight: bold;
    text-align: center;
    color: var(--name-color, #ffffff);
    pointer-events: none;
}

.cert-card__body {
    padding: 30px;
}

.cert-name {
    font-size: 30px;
    line-height: 1.25;
    font-weight: 800;
    color: #101828;
    margin: 0 0 6px;
}

.cert-course {
    font-size: 17px;
    color: #475467;
    margin: 0 0 26px;
}

    .cert-course a {
        color: #475467;
        text-decoration: underline;
    }

.cert-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 26px 44px;
    padding: 22px 0;
    border-top: 1px solid #eef0f3;
    border-bottom: 1px solid #eef0f3;
    margin-bottom: 26px;
}

.cert-fact__label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #98a2b3;
    margin-bottom: 5px;
}

.cert-fact__value {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #101828;
}

.cert-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.cert-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    transition: opacity .15s;
}

    .cert-btn:hover {
        opacity: .88;
        text-decoration: none;
    }

.cert-btn--primary {
    background: #101828;
    color: #ffffff;
}

.cert-btn--linkedin {
    background: #0a66c2;
    color: #ffffff;
}

.cert-btn--ghost {
    background: #ffffff;
    color: #344054;
    border-color: #d0d5dd;
}

.cert-share {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid #eef0f3;
}

.cert-share__label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #98a2b3;
    margin-bottom: 12px;
}

.cert-share__row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

    .cert-share__row + .cert-share__row {
        margin-top: 12px;
    }

/* Bağlantı kutusu ve kopyala düğmesi */
.cert-share__link-box {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 520px;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.cert-share__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: none;
    padding: 11px 14px;
    font-size: 13.5px;
    color: #344054;
    background: transparent;
}

.cert-share__copy {
    flex: 0 0 auto;
    border: 0;
    border-left: 1px solid #d0d5dd;
    background: #f9fafb;
    color: #344054;
    font-size: 13.5px;
    font-weight: 700;
    padding: 0 18px;
    cursor: pointer;
    transition: background .15s, color .15s;
}

    .cert-share__copy:hover {
        background: #f2f4f7;
    }

    .cert-share__copy.is-copied {
        background: #0f7b3e;
        color: #fff;
        border-left-color: #0f7b3e;
    }

.cert-share__btn {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    border: 1px solid #d0d5dd;
    border-radius: 999px;
    background: #fff;
    color: #344054;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s, color .15s;
}

    .cert-share__btn:hover {
        border-color: #98a2b3;
        color: #101828;
        text-decoration: none;
    }

.cert-verify {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 900px;
    margin: 22px auto 0;
    padding: 20px 24px;
    background: #ffffff;
    border: 1px solid #e6e8ec;
    border-radius: 14px;
}

.cert-verify__qr {
    width: 96px;
    height: 96px;
    flex: 0 0 auto;
    image-rendering: pixelated;
}

.cert-verify__text {
    flex: 1 1 260px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #475467;
    margin: 0;
}

.cert-verify__url {
    display: block;
    margin-top: 6px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 12.5px;
    color: #101828;
    word-break: break-all;
}

.cert-empty {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
    padding: 60px 30px;
}

.cert-empty__title {
    font-size: 26px;
    font-weight: 800;
    color: #101828;
    margin: 20px 0 10px;
}

.cert-empty__text {
    font-size: 15px;
    color: #667085;
    margin-bottom: 26px;
}

@media (max-width: 640px) {
    .cert-share__link-box {
        max-width: 100%;
    }

    .cert-page {
        padding: 34px 0 60px;
    }

    .cert-card__body {
        padding: 24px 20px;
    }

    .cert-name {
        font-size: 23px;
    }

    .cert-facts {
        gap: 18px 28px;
    }
}