/* İnovia Form v2 — Public CSS — Berkay Yavuz
   TASARIM: Açık arka plan, koyu metin → input görünürlük sorunu YOK
   ------------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ── KAPSAYICI ───────────────────────────────────────────────────── */
.inf-wrap {
    --inf-accent : #2563eb;
    --inf-btn    : #2563eb;
    --inf-btxt   : #ffffff;
    --inf-bg     : #ffffff;
    --inf-surf   : #f8faff;
    --inf-border : #dde3f0;
    --inf-tx     : #111827;   /* her zaman koyu — asla kaybolmaz */
    --inf-muted  : #6b7280;
    --inf-err    : #dc2626;
    --r          : 10px;

    font-family  : 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    background   : var(--inf-bg);
    border-radius: 16px;
    border       : 1.5px solid var(--inf-border);
    box-shadow   : 0 4px 24px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.05);
    overflow     : hidden;
    color        : var(--inf-tx);
}

/* ── HEADER ──────────────────────────────────────────────────────── */
.inf-head {
    background   : var(--inf-surf);
    border-bottom: 1.5px solid var(--inf-border);
    padding      : 24px 28px 20px;
}
.inf-title {
    font-size   : 20px;
    font-weight : 800;
    color       : #0f172a;
    margin      : 0 0 6px;
    line-height : 1.25;
    letter-spacing: -.3px;
}
.inf-desc {
    font-size  : 13px;
    color      : var(--inf-muted);
    line-height: 1.65;
    margin     : 0;
}

/* ── FORM BODY ───────────────────────────────────────────────────── */
.inf-form { padding: 24px 28px 26px; }

/* ── GRID ────────────────────────────────────────────────────────── */
.inf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 540px) {
    .inf-row { grid-template-columns: 1fr; }
    .inf-head, .inf-form { padding-left: 18px; padding-right: 18px; }
}

/* ── FIELD ───────────────────────────────────────────────────────── */
.inf-field { margin-bottom: 16px; }

.inf-label {
    display    : flex;
    align-items: center;
    gap        : 5px;
    font-size  : 12px;
    font-weight: 700;
    color      : #374151;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 7px;
}
.inf-req { color: var(--inf-err); font-size: 14px; line-height: 1; }
.inf-opt {
    font-size     : 10px;
    font-weight   : 500;
    color         : var(--inf-muted);
    background    : #f1f5f9;
    border        : 1px solid #e2e8f0;
    padding       : 1px 7px;
    border-radius : 20px;
    text-transform: none;
    letter-spacing: 0;
}

/* ── INPUT WRAP ──────────────────────────────────────────────────── */
.inf-iw { position: relative; }

.inf-ico {
    position  : absolute;
    left      : 12px;
    top       : 50%;
    transform : translateY(-50%);
    width     : 15px;
    height    : 15px;
    color     : #9ca3af;
    pointer-events: none;
    transition: color .2s;
    z-index   : 2;
}
.inf-ico-top { top: 13px; transform: none; }
.inf-iw:focus-within .inf-ico { color: var(--inf-accent); }

/* ── INPUT — AÇIK TEMA, KESİN GÖRÜNÜR ───────────────────────────── */
.inf-wrap input[type="text"].inf-input,
.inf-wrap input[type="tel"].inf-input {
    /* ↓ Bu iki satır kritik — tema/tarayıcı karartmasını ezer */
    color            : #111827 !important;
    background-color : #ffffff !important;

    -webkit-text-fill-color: #111827 !important;
    caret-color      : var(--inf-accent);

    /* Layout */
    display : block;
    width   : 100%;
    padding : 11px 14px 11px 38px;
    border  : 1.5px solid var(--inf-border);
    border-radius : var(--r);
    font-family   : inherit;
    font-size     : 13.5px;
    font-weight   : 400;
    line-height   : 1.5;
    outline       : none;
    appearance    : none;
    -webkit-appearance: none;
    transition    : border-color .2s, box-shadow .2s;
    box-shadow    : none;

    /* Autofill override */
    -webkit-box-shadow: 0 0 0 200px #ffffff inset !important;
}

.inf-wrap input[type="text"].inf-input::placeholder,
.inf-wrap input[type="tel"].inf-input::placeholder {
    color: #9ca3af !important;
    -webkit-text-fill-color: #9ca3af !important;
}

.inf-wrap input[type="text"].inf-input:focus,
.inf-wrap input[type="tel"].inf-input:focus {
    border-color : var(--inf-accent) !important;
    box-shadow   : 0 0 0 3px rgba(37,99,235,.12) !important;
    -webkit-box-shadow: 0 0 0 200px #f0f6ff inset, 0 0 0 3px rgba(37,99,235,.12) !important;
    background-color: #f0f6ff !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

/* Autofill (Chrome sarı düzeltmesi) */
.inf-wrap input:-webkit-autofill,
.inf-wrap input:-webkit-autofill:hover,
.inf-wrap input:-webkit-autofill:focus {
    -webkit-text-fill-color: #111827 !important;
    -webkit-box-shadow      : 0 0 0 200px #ffffff inset !important;
    transition: background-color 9999s;
}

/* Textarea aynı stiller */
.inf-wrap textarea.inf-input {
    color            : #111827 !important;
    background-color : #ffffff !important;
    -webkit-text-fill-color: #111827 !important;
    -webkit-box-shadow: 0 0 0 200px #ffffff inset !important;

    display : block;
    width   : 100%;
    padding : 11px 14px 11px 38px;
    border  : 1.5px solid var(--inf-border);
    border-radius : var(--r);
    font-family   : inherit;
    font-size     : 13.5px;
    font-weight   : 400;
    line-height   : 1.6;
    outline       : none;
    appearance    : none;
    -webkit-appearance: none;
    transition    : border-color .2s, box-shadow .2s;
    resize        : vertical;
    min-height    : 80px;
    max-height    : 200px;
    caret-color   : var(--inf-accent);
}
.inf-wrap textarea.inf-input::placeholder {
    color: #9ca3af !important;
    -webkit-text-fill-color: #9ca3af !important;
}
.inf-wrap textarea.inf-input:focus {
    border-color : var(--inf-accent) !important;
    box-shadow   : 0 0 0 3px rgba(37,99,235,.12) !important;
    background-color: #f0f6ff !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    -webkit-box-shadow: 0 0 0 200px #f0f6ff inset, 0 0 0 3px rgba(37,99,235,.12) !important;
}

/* ── ERROR STATE ─────────────────────────────────────────────────── */
.inf-wrap .inf-input.is-err {
    border-color : var(--inf-err) !important;
    box-shadow   : 0 0 0 3px rgba(220,38,38,.1) !important;
}
.inf-err {
    display   : block;
    font-size : 11.5px;
    color     : var(--inf-err);
    font-weight: 500;
    margin-top: 4px;
    min-height: 16px;
}

/* ── RADIO CARDS ─────────────────────────────────────────────────── */
.inf-radios { display: flex; gap: 10px; flex-wrap: wrap; }
.inf-radio  { flex: 1; min-width: 110px; cursor: pointer; }
.inf-radio input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }

.inf-radio-box {
    display      : flex;
    align-items  : center;
    gap          : 10px;
    padding      : 12px 14px;
    background   : var(--inf-surf);
    border       : 1.5px solid var(--inf-border);
    border-radius: var(--r);
    transition   : all .2s;
    user-select  : none;
    position     : relative;
}
.inf-radio:hover .inf-radio-box { border-color: var(--inf-accent); background: #eff6ff; }
.inf-radio input:checked + .inf-radio-box {
    border-color: var(--inf-accent);
    background  : #eff6ff;
    box-shadow  : 0 0 0 3px rgba(37,99,235,.1);
}

.inf-radio-ico { font-size: 17px; flex-shrink: 0; }
.inf-radio-txt { font-size: 13.5px; font-weight: 600; color: #1e293b; flex: 1; }

.inf-radio-chk {
    width : 18px; height: 18px;
    border: 1.5px solid #d1d5db;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: all .2s;
    background: #fff;
}
.inf-radio-chk svg { width: 9px; height: 9px; color: #fff; opacity: 0; transition: opacity .15s; }
.inf-radio input:checked + .inf-radio-box .inf-radio-chk {
    background  : var(--inf-accent);
    border-color: var(--inf-accent);
}
.inf-radio input:checked + .inf-radio-box .inf-radio-chk svg { opacity: 1; }

/* ── SUBMIT ──────────────────────────────────────────────────────── */
.inf-btn {
    display      : flex;
    align-items  : center;
    justify-content: center;
    gap          : 8px;
    width        : 100%;
    padding      : 13px 20px;
    margin-top   : 4px;
    background   : var(--inf-btn);
    color        : var(--inf-btxt);
    border       : none;
    border-radius: var(--r);
    font-family  : inherit;
    font-size    : 13px;
    font-weight  : 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor       : pointer;
    position     : relative;
    overflow     : hidden;
    transition   : transform .2s, box-shadow .2s, filter .2s;
}
.inf-btn:hover  { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.15); }
.inf-btn:active { transform: scale(.99); filter: brightness(.97); }
.inf-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; filter: none; }

.inf-arr { transition: transform .2s; flex-shrink: 0; }
.inf-btn:hover .inf-arr { transform: translateX(4px); }
.inf-btn-txt, .inf-loader, .inf-arr { position: relative; z-index: 1; }

/* Shimmer sweep */
.inf-btn::before {
    content  : '';
    position : absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
    transform: translateX(-100%);
    transition: transform .5s;
}
.inf-btn:hover::before { transform: translateX(100%); }

/* ── SPINNER ─────────────────────────────────────────────────────── */
@keyframes inf-spin { to { transform: rotate(360deg); } }
.inf-spin { animation: inf-spin .7s linear infinite; }

/* ── MESSAGE ─────────────────────────────────────────────────────── */
.inf-msg {
    margin-top   : 12px;
    padding      : 12px 16px;
    border-radius: var(--r);
    font-size    : 13px;
    font-weight  : 600;
    text-align   : center;
    line-height  : 1.5;
}
.inf-msg.ok  { background: #f0fdf4; border: 1.5px solid #86efac; color: #15803d; }
.inf-msg.err { background: #fef2f2; border: 1.5px solid #fca5a5; color: #991b1b; }

@keyframes inf-pop { from{transform:scale(.96);opacity:0} to{transform:scale(1);opacity:1} }
.inf-msg.ok { animation: inf-pop .3s cubic-bezier(.34,1.56,.64,1) both; }