/* ========== Temel / Reset ========== */
:root {
    --bg-blue: #004A71;
    --brand-red: #C7161E;
    --text: #333;
    --muted: #ccc;
    --card-bg: #fff;
    --shadow: 0 2px 5px rgba(0,0,0,.3);
    --radius: 20px;
    --gap: 24px;
    --container-w: 960px;
    --fs-base: 14px;
    --fs-small: 12px;
    --app-pad-x: 40px; /* .application yatay boşluk */
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* =========================================
   GOTHAM — ana aile
   (elindeki dosya adlarına göre eşleştirme)
   ========================================= */
@font-face {
    font-family: 'Gotham';
    src: local('Gotham Thin'), url('/Assets/fonts/Gotham-Thin.otf') format('opentype'), url('/Assets/fonts/GOTHAM-THIN.TTF') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: local('Gotham Thin Italic'), url('/Assets/fonts/Gotham-ThinItalic.otf') format('opentype'), url('/Assets/fonts/GOTHAM-THINITALIC.TTF') format('truetype');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: local('Gotham ExtraLight'), url('/Assets/fonts/Gotham-ExtraLight.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: local('Gotham XLight Italic'), url('/Assets/fonts/Gotham-XLightItalic.otf') format('opentype');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: local('Gotham Light'), url('/Assets/fonts/Gotham-Light.otf') format('opentype'), url('/Assets/fonts/GOTHAM-LIGHT.TTF') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: local('Gotham Light Italic'), url('/Assets/fonts/Gotham-LightItalic.otf') format('opentype'), url('/Assets/fonts/GOTHAM-LIGHTITALIC.TTF') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: local('Gotham Book'), url('/Assets/fonts/Gotham-Book.otf') format('opentype'), url('/Assets/fonts/GOTHAM-BOOK.TTF') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: local('Gotham Book Italic'), url('/Assets/fonts/Gotham Book Italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: local('Gotham Medium'), url('/Assets/fonts/Gotham-Medium.otf') format('opentype'), url('/Assets/fonts/GOTHAM-MEDIUM.TTF') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: local('Gotham Medium Italic'), url('/Assets/fonts/Gotham-MediumItalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: local('Gotham Bold'), url('/Assets/fonts/Gotham-BoldItalic.otf') format('opentype'), url('/Assets/fonts/GOTHAM-BOLD.TTF') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: local('Gotham Bold Italic'), url('/Assets/fonts/Gotham-BoldItalic.otf') format('opentype'), url('/Assets/fonts/GOTHAM-BOLDITALIC.TTF') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: local('Gotham Black'), url('/Assets/fonts/GOTHAM-BLACK.TTF') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: local('Gotham Black Italic'), url('/Assets/fonts/GOTHAM-BLACKITALIC.TTF') format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* Bazı paketlerde “Ultra” da var. Yoksa bu iki bloğu kaldır. */
@font-face {
    font-family: 'Gotham';
    src: local('Gotham Ultra'), url('/Assets/fonts/Gotham-Ultra.otf') format('opentype'), url('/Assets/fonts/GOTHAM-ULTRA.TTF') format('truetype');
    font-weight: 950;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: local('Gotham UltraItalic'), url('/Assets/fonts/Gotham-UltraItalic.otf') format('opentype'), url('/Assets/fonts/GOTHAM-ULTRAITALIC.TTF') format('truetype');
    font-weight: 950;
    font-style: italic;
    font-display: swap;
}

/* =========================================
   GOTHAM NARROW — dar genişlikte aile
   ========================================= */
@font-face {
    font-family: 'Gotham Narrow';
    src: local('Gotham Narrow Light'), url('/Assets/fonts/GothamNarrow-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham Narrow';
    src: local('Gotham Narrow Book'), url('/Assets/fonts/GothamNarrow-Book.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham Narrow';
    src: local('Gotham Narrow Medium'), url('/Assets/fonts/GothamNarrow-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham Narrow';
    src: local('Gotham Narrow Bold'), url('/Assets/fonts/GothamNarrow-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* =========================================
   GOTHAM ROUNDED — yuvarlatılmış uçlar
   ========================================= */
@font-face {
    font-family: 'Gotham Rounded';
    src: local('Gotham Rounded Book'), url('/Assets/fonts/gotham-rounded-book.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham Rounded';
    src: local('Gotham Rounded Medium'), url('/Assets/fonts/gotham-rounded-medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham Rounded';
    src: local('Gotham Rounded Bold'), url('/Assets/fonts/gotham-rounded-bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

html, body {
    margin: 0;
    padding: 0;
    font-size: var(--fs-base);
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    color: var(--text);
    overflow-x: hidden; /* sağa kaymayı engeller */
    max-width: 100vw;
}

/* Arka plan */
body {
    margin-bottom: 50px;
    background: url('/Assets/images/bg-sample.jpg') center/cover no-repeat fixed;
    min-height: 100vh; /* ekranı tam kapla */
    background-color: #1b5594;
    font-family: 'Gotham', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}

small {
    font-size: var(--fs-small);
}

/* ========== Sayfa Layout ========== */
footer {
    margin-top: 300px;
}

    footer img {
        width: 100%;
        display: block;
    }

.box {
    margin-top: 100px;
    display: flex;
    gap: 5vw;
    justify-content: space-evenly;
    align-items: flex-start;
}

    .box img {
        max-width: max(15%,100px);
        height: auto;
        object-fit: contain;
    }

/* Kart / form kapsayıcı */
.application {
    width: var(--container-w);
    max-width: 95vw;
    margin-top: -50px;
    padding: 0 var(--app-pad-x) 30px; /* içeriğe yatay boşluk */
    border-radius: var(--radius);
    background: var(--card-bg);
    border-top: 1px solid #e5e5e5;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    border-color: #f3f3f3;
    overflow: hidden; /* köşelerden kırpma (hero için şart) */
}

    .application small {
        margin: 20px 0 15px;
    }

    .application h4 {
        font-size: 25px;
        line-height: 20px;
        font-weight: 100;
        text-align: center;
    }

    .application p {
        line-height: 25px;
        text-align: justify;
        line-break: auto;
    }

/* ================= HERO ================= */
/* .application’ın yatay padding’ini iptal ederek hero’yu kenara yapıştır */
.hero img {
    display: block;
    width: 100% !important;
    height: auto;
    max-width: none !important; /* .box img kuralını ezer */
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

/* Hero’yu kutuya sıfıra sıfır oturt */
.hero {
    margin: 0 calc(-1 * var(--app-pad-x));
    width: calc(100% + (var(--app-pad-x) * 2));
    line-height: 0;
}

/* ========== Form ========== */
.application form {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

    .application form a {
        color: var(--brand-red);
    }

    /* Her control satırı tam genişlik */
    .application form .control {
        width: 100% !important;
        padding: 0;
        margin-bottom: 15px;
    }

.control {
    width: 100%;
    padding: 0 10px;
}

    /* Etiket */
    .control label {
        display: block;
        margin: 0 0 6px;
        font-weight: 600;
    }

label i {
    color: #E50003;
}

/* Input & Textarea */
.application .control input[type="text"],
.application .control input[type="email"],
.application .control input[type="tel"],
.application .control input[type="number"],
.application .control input[type="password"],
.application .control textarea,
.application .control .ddl,
.application .control .sayilar,
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="password"], textarea, .ddl, .sayilar {
    width: 100%;
    padding: 12px;
    margin: 5px 0;
    border: 1px solid var(--muted);
    border-radius: 6px;
    font-size: 16px;
    color: var(--text);
    outline: none;
    transition: border-color .3s ease, box-shadow .2s ease;
    font-family: inherit;
    box-sizing: border-box;
}

textarea {
    resize: none;
    min-height: 200px;
}

    input:focus, textarea:focus {
        border-color: var(--brand-red);
    }

/* Button */
.application .control input[type="submit"],
.application .control input[type="button"],
.application .control button,
input[type="submit"], input[type="button"], button {
    width: 100%;
    padding: 12px 24px;
    margin-top: 15px;
    border: none;
    border-radius: 8px;
    background: var(--bg-blue);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .2s ease, transform .02s ease-in;
}

    input[type="submit"]:hover, input[type="button"]:hover, button:hover {
        filter: brightness(1.08);
    }

    input[type="submit"]:active, input[type="button"]:active, button:active {
        transform: translateY(1px);
    }

/* Bölücü çizgi */
hr {
    height: 1px;
    width: 100%;
    border: 0;
    background: #000;
    margin-top: -20px;
    display: block;
    clear: both;
}

/* Uyarılar */
.alert {
    padding: 10px;
    margin-bottom: 10px;
    font-weight: 700;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 20px;
    color: #000;
    width: 100%;
    background: #fff;
}

.alert-success {
    border: 2px solid #2ecc71;
}

.alert-error {
    border: 2px solid #c0392b;
}

/* ========== Responsive ========== */
@media (max-width:991px) {
    :root {
        --app-pad-x: 24px;
    }
    /* mobilde iç boşluğu azalt */
    .application {
        width: min(92vw,var(--container-w));
        padding: 0 var(--app-pad-x) 24px;
    }

    .box {
        padding: 0 10px;
    }

    footer {
        margin-top: 100px;
    }
}

/* ===== Loading Overlay (varsa) ===== */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,.4);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.loading-content {
    text-align: center;
    background: #fff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,.2);
    border: 2px solid #004A71;
    max-width: 400px;
    width: 80%;
}

.loading-title {
    font-size: 24px;
    font-weight: 700;
    color: #004A71;
    margin-bottom: 20px;
}

.loading-message {
    margin-top: 15px;
    font-weight: 700;
    color: #004A71;
    font-size: 18px;
    line-height: 1.5;
}

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #004A71;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.chp-logo {
    width: 80px;
    margin: 0 auto 20px;
    display: block;
}