/* =========================================================================
 * Obezite Sertifikasyon Programı — "Çok Yakında" sayfası
 * -------------------------------------------------------------------------
 * Renkler ve yazı tipi ana projeden alınmıştır:
 *   Lacivert  : #075193  (ana marka rengi)
 *   Koyu      : #054176 / #03325a
 *   Metin     : #282828 / #6a6c6f
 *   Zemin     : #f8f9fa
 *   Yazı tipi : Comfortaa
 * Sayfanın hiçbir işlevi yoktur; PHP / veritabanı bağlantısı içermez.
 * ========================================================================= */

@font-face {
    font-family: 'Comfortaa';
    src: url('../fonts/Comfortaa-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --brand: #075193;
    --brand-dark: #054176;
    --brand-darker: #03325a;
    --text: #282828;
    --text-soft: #6a6c6f;
    --bg: #f8f9fa;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: "Comfortaa", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--text);
    background-color: var(--bg);
    background-image: linear-gradient(160deg, #ffffff 0%, #f1f6fb 55%, #e6eef7 100%);
    -webkit-font-smoothing: antialiased;
}

/* --- Arka plandaki dekoratif daireler ------------------------------------ */

.bg-shapes {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.shape {
    position: absolute;
    display: block;
    border-radius: 50%;
}

.shape-1 {
    width: 520px;
    height: 520px;
    top: -220px;
    right: -160px;
    background: radial-gradient(circle at 30% 30%, rgba(7, 81, 147, .16), rgba(7, 81, 147, 0) 70%);
}

.shape-2 {
    width: 420px;
    height: 420px;
    bottom: -180px;
    left: -140px;
    background: radial-gradient(circle at 60% 40%, rgba(7, 81, 147, .12), rgba(7, 81, 147, 0) 70%);
}

/* Programın logosundaki "C" halkasını anımsatan ince çember */
.shape-3 {
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -150px;
    border: 1px solid rgba(7, 81, 147, .10);
    background: none;
}

/* --- Sayfa yerleşimi ----------------------------------------------------- */

.page {
    position: relative;
    z-index: 1;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px 24px;
}

.card {
    width: 100%;
    max-width: 880px;
    background: #ffffff;
    border: 1px solid #e4ecf4;
    border-radius: 24px;
    box-shadow: 0 18px 50px rgba(7, 81, 147, .10);
    padding: 56px 48px 48px;
    text-align: center;
}

/* --- Logolar ------------------------------------------------------------- */

.logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
    flex-wrap: wrap;
}

.logo {
    display: block;
    max-width: 100%;
    height: auto;
}

.logo-program { height: 84px; }
.logo-toad    { height: 74px; }

.logo-divider {
    width: 1px;
    height: 62px;
    background: linear-gradient(to bottom, rgba(7, 81, 147, 0), rgba(7, 81, 147, .28), rgba(7, 81, 147, 0));
}

/* --- Metinler ------------------------------------------------------------ */

.site-name {
    margin: 44px 0 0;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .01em;
    color: var(--brand);
}

.site-name::after {
    content: "";
    display: block;
    width: 72px;
    height: 4px;
    margin: 20px auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--brand), var(--brand-darker));
}

.message {
    margin: 26px 0 0;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.6;
    color: var(--text-soft);
}

/* --- Alt not ------------------------------------------------------------- */

.foot {
    margin-top: 28px;
    text-align: center;
}

.foot p {
    margin: 0;
    font-size: .85rem;
    font-weight: 500;
    color: var(--text-soft);
}

/* --- Duyarlı (responsive) ------------------------------------------------ */

@media (max-width: 767.98px) {
    .card {
        padding: 40px 24px 36px;
        border-radius: 20px;
    }

    /* Dar ekranda logolar alt alta, ayraç yatay çizgiye döner */
    .logos {
        flex-direction: column;
        gap: 18px;
    }

    .logo-divider {
        width: 62px;
        height: 1px;
        background: linear-gradient(to right, rgba(7, 81, 147, 0), rgba(7, 81, 147, .28), rgba(7, 81, 147, 0));
    }

    .logo-program { height: 62px; }
    .logo-toad    { height: 52px; }

    .site-name {
        margin-top: 32px;
        font-size: 1.4rem;
    }

    .message { font-size: 1.05rem; }

    .shape-3 { display: none; }
}

@media (max-width: 380px) {
    .logo-program { height: 52px; }
    .logo-toad    { height: 44px; }
    .site-name    { font-size: 1.2rem; }
}