/* ════════════════════════════════════════════════════════
   İLETİŞİM — SAYFA STİLİ
   Navbar sitenin geneliyle aynıdır (index.css + navbar.js).
   Bu dosya yalnızca bu sayfanın (hero, iletişim, form vb.) stillerini içerir.
   ════════════════════════════════════════════════════════ */
:root {
    --il-bubblegum: #FF8FAB;
    --il-bubblegum-soft: #FFF0F5;
    --il-sky: #74C7EC;
    --il-sky-soft: #EEF8FE;
    --il-mint: #7EDBA5;
    --il-mint-soft: #EEFAF3;
    --il-sun: #FFD166;
    --il-sun-soft: #FFFBEC;
    --il-lavender: #B09FE8;
    --il-lavender-soft: #F4F1FD;
    --il-peach: #FFB085;
    --il-white: #FFFFFF;
    --il-bg: #FFF8FA;
    --il-text: #3D2C35;
    --il-text-soft: #8A6878;
    --il-border: #FAE8EF;
    --il-shadow: 0 10px 34px rgba(255, 143, 171, 0.16);
    --il-shadow-hover: 0 18px 46px rgba(255, 143, 171, 0.26);
    --il-radius: 22px;
    --il-radius-lg: 34px;
}



/* Hero */
.il-hero {
    text-align: center; padding: 70px 24px;
    background:
        radial-gradient(circle at 12% 20%, var(--il-sun-soft) 0, var(--il-sun-soft) 40%, transparent 60%),
        radial-gradient(circle at 88% 25%, var(--il-lavender-soft) 0, var(--il-lavender-soft) 40%, transparent 60%),
        linear-gradient(160deg, var(--il-bubblegum-soft), var(--il-sky-soft));
}
.il-eyebrow { display: inline-block; padding: 6px 20px; background: var(--il-bubblegum-soft); color: #C71D5C; border-radius: 50px; font-size: 15px; font-weight: 700; }
.il-hero h1 { font-size: clamp(34px, 6vw, 54px); margin: 14px 0 6px; }
.il-hero p { font-size: 17px; color: var(--il-text-soft); max-width: 640px; margin: 6px auto 0; }

/* Layout */
.il-container { max-width: 1150px; margin: 40px auto 0; padding: 0 24px; }
.il-layout { display: grid; grid-template-columns: 420px 1fr; gap: 40px; align-items: start; }

/* Bilgi paneli */
.il-info { display: flex; flex-direction: column; gap: 16px; }
.il-info-card {
    display: flex; align-items: center; gap: 14px;
    background: var(--il-white); border: 2px solid var(--il-border); border-radius: var(--il-radius);
    box-shadow: var(--il-shadow); padding: 18px 20px; transition: all 0.25s;
}
.il-info-card:hover { transform: translateY(-4px); border-color: var(--il-c); box-shadow: var(--il-shadow-hover); }
.il-info-ico {
    width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--il-c-soft); color: var(--il-c); font-size: 20px;
}
.il-info-card strong { display: block; font-family: 'Baloo 2', cursive; font-size: 15px; }
.il-info-card span { color: var(--il-text-soft); font-size: 14px; }
.il-socials { display: flex; gap: 10px; margin-top: 6px; }
.il-socials a {
    width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    background: var(--il-bubblegum-soft); color: var(--il-bubblegum); text-decoration: none; font-size: 18px; transition: all 0.2s;
}
.il-socials a:hover { transform: translateY(-3px); background: var(--il-bubblegum); color: #fff; }

/* Form paneli */
.il-form-card {
    background: var(--il-white); border: 2px solid var(--il-border); border-radius: var(--il-radius-lg);
    box-shadow: var(--il-shadow); padding: 30px;
}
.il-form-card h2 { font-size: 24px; margin-bottom: 6px; }
.il-form-card .il-form-sub { color: var(--il-text-soft); font-size: 14px; margin-bottom: 20px; }
.il-form-group { margin-bottom: 16px; }
.il-form-group label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.il-input { width: 100%; padding: 12px 14px; font-size: 14px; font-family: inherit; color: var(--il-text); background: var(--il-bg); border: 2px solid var(--il-border); border-radius: 12px; outline: none; transition: border-color 0.15s; }
.il-input:focus { border-color: var(--il-bubblegum); }
textarea.il-input { resize: vertical; min-height: 140px; }
.il-error { color: #d6336c; font-size: 13px; margin-top: 4px; display: none; }
.il-form-group.il-invalid .il-error { display: block; }
.il-form-group.il-invalid .il-input { border-color: #f87171; }

/* Buton & başarı */
.il-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border: none; border-radius: 50px;
    font-size: 15px; font-weight: 800; font-family: 'Baloo 2', cursive; cursor: pointer; color: #fff;
    background: linear-gradient(135deg, var(--il-bubblegum), #FF6B95); box-shadow: 0 6px 18px rgba(255,143,171,0.25);
    transition: all 0.25s;
}
.il-btn:hover { transform: translateY(-3px); box-shadow: var(--il-shadow-hover); }
.il-success {
    display: none; margin-top: 18px; padding: 14px 16px; background: var(--il-mint-soft); border: 2px solid var(--il-mint);
    color: var(--il-text); border-radius: 12px; font-size: 14px; font-weight: 600;
}

/* Footer */
.il-footer {
    margin-top: 40px; background: var(--il-lavender-soft); border-top: 2px solid var(--il-border);
    padding: 34px 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
}
.il-footer .il-copy { color: var(--il-text-soft); font-size: 14px; }
.il-footer .il-links { display: flex; gap: 18px; flex-wrap: wrap; }
.il-footer .il-links a { text-decoration: none; color: var(--il-lavender); font-weight: 600; font-size: 14px; }
.il-footer .il-links a:hover { color: var(--il-text); }

/* Yukarı çık */
.il-backtop {
    position: fixed; right: 26px; bottom: 26px; width: 48px; height: 48px; border-radius: 50%; border: none;
    background: var(--il-bubblegum); color: #fff; font-size: 20px; cursor: pointer; box-shadow: var(--il-shadow-hover);
    opacity: 0; pointer-events: none; transition: all 0.3s; z-index: 200;
}
.il-backtop.il-show { opacity: 1; pointer-events: auto; }
.il-backtop:hover { transform: translateY(-4px); background: var(--il-peach); }

/* index.css ile gelen genel element stilleri için sıfırlama */
.il-hero, .il-container, .il-layout, .il-form-card, .il-info { max-width: none; width: auto; color: var(--il-text); }
.il-footer { max-width: none; border-radius: 0; }

@media (max-width: 992px) {
    .il-layout { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .il-hero { padding: 50px 16px; }
    .il-form-card { padding: 22px; }
    .il-footer { flex-direction: column; text-align: center; }
}
.il-form-group.il-invalid .il-input { border-color: #f87171; }