/* ============================================================
   Sopyo E-Fatura Kontör Paketleri — satın alma sayfası stilleri
   Kaynak: Claude Design "E-Fatura Paketleri - Ana Tasarım" (Varyant E)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,600;0,700;0,800;0,900;1,900&display=swap');

:root {
    --sopyo-navy: #0d1b2e;
    --sopyo-blue: #1a6bff;
    --sopyo-blue-deep: #0b4fe0;
    --sopyo-blue-sky: #2d9cff;
    --sopyo-grad: linear-gradient(135deg, #2d9cff 0%, #1158f1 100%);
    --sopyo-tint: #eaf2fe;
    --sopyo-tint-2: #f5f9ff;
    --ink-600: #5a6b80;
    --ink-400: #8a99ab;
    --line: #e3eaf3;
    --font-brand: 'Nunito', system-ui, sans-serif;
}

html, body { margin: 0; padding: 0; background: #f8fbff; }

.ef-page {
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    font-family: var(--font-brand);
    background: linear-gradient(180deg, var(--sopyo-tint) 0%, #f8fbff 340px, #f8fbff 100%);
}

/* ---------- header ---------- */
.ef-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 40px; height: 72px; background: #fff;
    border-bottom: 1px solid var(--line);
}
.ef-header .ef-logo { display: flex; align-items: center; gap: 10px; }
.ef-header .ef-logo img.icon { height: 34px; width: auto; display: block; }
.ef-header .ef-logo img.word { height: 22px; width: auto; display: block; margin-top: 6px; }
.ef-cancel {
    font: 600 14px/1 var(--font-brand); color: var(--sopyo-navy);
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
    padding: 10px 18px; cursor: pointer; text-decoration: none;
}
.ef-cancel:hover { background: var(--sopyo-tint-2); }

/* ---------- stepper ---------- */
.ef-steps { display: flex; align-items: center; gap: 14px; }
.ef-step { display: flex; align-items: center; gap: 8px; font: 600 14px/1 var(--font-brand); white-space: nowrap; }
.ef-step .dot {
    width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center;
    font: 700 12px/1 var(--font-brand);
}
.ef-step.done .dot { background: #e8f8ef; color: #18a558; }
.ef-step.done { color: var(--sopyo-navy); }
.ef-step.todo .dot { background: #fff; color: var(--ink-400); border: 1px solid var(--line); }
.ef-step.todo { color: var(--ink-400); }
.ef-step.active .dot { background: var(--sopyo-blue); color: #fff; }
.ef-step.active { color: var(--sopyo-navy); }
.ef-steps .bar { width: 56px; height: 2px; background: var(--line); border-radius: 2px; }

/* ---------- hero ---------- */
.ef-hero { text-align: center; padding: 52px 16px 0; }
.ef-hero h1 { font: 900 34px/1.2 var(--font-brand); color: var(--sopyo-navy); margin: 0; }
.ef-hero p { font: 600 16px/1.5 var(--font-brand); color: var(--ink-600); margin: 10px 0 0; }
.ef-hero p a { color: var(--sopyo-blue); text-decoration: none; }

/* ---------- paket kartı ---------- */
.ef-card {
    max-width: 880px; margin: 40px auto 0; background: #fff; border-radius: 20px;
    box-shadow: 0 14px 36px rgba(13, 27, 46, .08); overflow: hidden;
}
.ef-card-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 24px 32px; border-bottom: 1px solid var(--line);
}
.ef-card-head h2 { font: 800 19px/1 var(--font-brand); color: var(--sopyo-navy); margin: 0; }

.ef-rows { display: flex; flex-direction: column; gap: 12px; padding: 20px 24px; }
.ef-row {
    display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 18px;
    padding: 16px 20px; border-radius: 14px; cursor: pointer; text-align: left;
    border: 2px solid var(--line); background: #fff; position: relative;
}
.ef-row.selected { border-color: var(--sopyo-blue); background: var(--sopyo-tint-2); }
.ef-row input[type="radio"] {
    position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none;
}
.ef-row .radio {
    width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box;
    border: 2px solid #c9d6e6; background: #fff;
}
.ef-row.selected .radio { border: 7px solid var(--sopyo-blue); }
.ef-row .name { font: 800 16.5px/1.2 var(--font-brand); color: var(--sopyo-navy); }
.ef-row .unit { font: 600 13px/1 var(--font-brand); color: var(--ink-400); margin-top: 5px; }
.ef-row .pop {
    margin-left: 10px; vertical-align: 2px; display: inline-block;
    font: 800 10.5px/1 var(--font-brand); letter-spacing: .06em; text-transform: uppercase;
    background: var(--sopyo-grad); color: #fff; padding: 5px 10px; border-radius: 999px;
}
.ef-row .price { font: 900 21px/1 var(--font-brand); color: var(--sopyo-navy); }

.ef-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 22px 32px; border-top: 1px solid var(--line); background: var(--sopyo-tint-2);
}
.ef-foot .text { font: 700 15px/1.4 var(--font-brand); color: var(--ink-600); }
.ef-foot .text strong { color: var(--sopyo-navy); font: 900 18px/1 var(--font-brand); }
.ef-cta {
    border: none; border-radius: 999px; cursor: pointer;
    background: var(--sopyo-blue); color: #fff;
    font: 800 14px/1 var(--font-brand); letter-spacing: .08em; text-transform: uppercase;
    padding: 16px 44px; box-shadow: 0 10px 22px rgba(26, 107, 255, .3);
}
.ef-cta:hover { background: var(--sopyo-blue-deep); }

/* ---------- SSS ---------- */
.ef-faq-wrap {
    max-width: 720px; margin: 64px auto 80px; background: #fff; border-radius: 20px;
    box-shadow: 0 10px 30px rgba(13, 27, 46, .06); padding: 40px 48px;
}
.ef-faq-wrap h2 { font: 900 26px/1.2 var(--font-brand); color: var(--sopyo-navy); text-align: center; margin: 0 0 16px; }
.ef-faq details { border-bottom: 1px solid var(--line); }
.ef-faq details:last-child { border-bottom: none; }
.ef-faq summary {
    list-style: none; cursor: pointer; display: flex; align-items: center;
    justify-content: space-between; gap: 16px; padding: 20px 4px;
    font: 700 16px/1.4 var(--font-brand); color: var(--sopyo-navy);
}
.ef-faq summary::-webkit-details-marker { display: none; }
.ef-faq summary .chev {
    flex: none; width: 20px; height: 20px; color: var(--ink-400);
    transition: transform .2s ease;
}
.ef-faq details[open] summary .chev { transform: rotate(180deg); }
.ef-faq .body {
    padding: 0 4px 20px; font: 400 14.5px/1.65 var(--font-brand); color: var(--ink-600);
    max-width: 640px;
}

/* ---------- başvuru modalı ---------- */
.ef-modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(13, 27, 46, .5);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 40px 16px; overflow-y: auto;
}
.ef-modal-overlay[hidden] { display: none; }
.ef-modal {
    width: 100%; max-width: 560px; background: #fff; border-radius: 20px;
    box-shadow: 0 24px 64px rgba(13, 27, 46, .25); overflow: hidden;
    font-family: var(--font-brand);
}
.ef-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 28px; border-bottom: 1px solid var(--line);
}
.ef-modal-head h3 { font: 800 19px/1 var(--font-brand); color: var(--sopyo-navy); margin: 0; }
.ef-modal-close {
    display: grid; place-items: center; width: 34px; height: 34px;
    border: 1px solid var(--line); border-radius: 10px; background: #fff;
    color: var(--ink-400); cursor: pointer;
}
.ef-modal-close:hover { background: var(--sopyo-tint-2); color: var(--sopyo-navy); }
.ef-modal-body { padding: 24px 28px; display: flex; flex-direction: column; gap: 18px; }
.ef-modal-foot {
    padding: 20px 28px; border-top: 1px solid var(--line); background: var(--sopyo-tint-2);
    display: flex; justify-content: center;
}

/* ---------- form alanları ---------- */
.ef-field { display: flex; flex-direction: column; gap: 7px; }
.ef-field label { font: 800 13.5px/1 var(--font-brand); color: var(--sopyo-navy); }
.ef-field label em { color: #e23c3c; font-style: normal; }
.ef-field small { font: 600 12px/1.3 var(--font-brand); color: var(--ink-400); }
.ef-field input,
.ef-field select {
    font: 600 14.5px/1.2 var(--font-brand); color: var(--sopyo-navy);
    border: 2px solid var(--line); border-radius: 12px; background: #fff;
    padding: 12px 14px; outline: none; width: 100%; box-sizing: border-box;
    -webkit-appearance: none; appearance: none;
}
.ef-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5l5 5 5-5' stroke='%238a99ab' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
    padding-right: 40px;
}
.ef-field input::placeholder { color: var(--ink-400); font-weight: 600; }
.ef-field input:focus,
.ef-field select:focus { border-color: var(--sopyo-blue); }
.ef-field input[readonly] { background: var(--sopyo-tint-2); color: var(--ink-600); }
.ef-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#loginForm { display: flex; flex-direction: column; gap: 18px; }   /* giriş: VKN ile telefon alanı arası boşluk */
.ef-divider { height: 1px; background: var(--line); margin: 4px 0; }

/* ---------- şirket türü seçimi ---------- */
.ef-segment { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ef-segment button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
    padding: 16px 12px; border-radius: 14px; cursor: pointer;
    border: 2px solid var(--sopyo-blue); background: #fff; color: var(--sopyo-blue);
    font: 700 14px/1 var(--font-brand);
}
.ef-segment button.active {
    background: var(--sopyo-blue); color: #fff;
    box-shadow: 0 8px 18px rgba(26, 107, 255, .3);
}

/* ---------- şirket bilgileri paneli ---------- */
.ef-company-panel {
    border: 2px solid var(--sopyo-blue); border-radius: 14px;
    padding: 18px 20px; display: flex; flex-direction: column; gap: 16px;
    background: var(--sopyo-tint-2);
}
.ef-company-panel[hidden] { display: none; }
.ef-company-panel-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.ef-company-panel-head .title { font: 800 14.5px/1.2 var(--font-brand); color: var(--sopyo-navy); }

/* ---------- başvuru başarı ekranı ---------- */
.ef-modal-success { padding: 40px 28px 36px; text-align: center; }
.ef-modal-success[hidden] { display: none; }
.ef-modal-success .icon {
    width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%;
    display: grid; place-items: center; background: #e8f8ef; color: #18a558;
}
.ef-modal-success h4 { font: 900 22px/1.2 var(--font-brand); color: var(--sopyo-navy); margin: 0 0 8px; }
.ef-modal-success p { font: 600 14.5px/1.6 var(--font-brand); color: var(--ink-600); margin: 0 0 24px; }

/* ============================================================
   Mobil uyumluluk
   ============================================================ */
@media (max-width: 920px) {
    .ef-card { margin-left: 16px; margin-right: 16px; }
    .ef-faq-wrap { margin-left: 16px; margin-right: 16px; padding: 28px 24px; }
}

@media (max-width: 760px) {
    .ef-header { padding: 0 16px 10px; flex-wrap: wrap; height: auto; min-height: 64px; row-gap: 8px; align-items: center; }
    .ef-header .ef-logo { padding-top: 12px; }
    .ef-cancel { margin-top: 12px; }
    .ef-steps { order: 3; width: 100%; justify-content: center; }
    .ef-steps .bar { width: 20px; }
    .ef-step { font-size: 12.5px; gap: 6px; }
    .ef-step .dot { width: 20px; height: 20px; font-size: 11px; }

    .ef-hero { padding-top: 36px; }
    .ef-hero h1 { font-size: 25px; }
    .ef-hero p { font-size: 14.5px; padding: 0 8px; }

    .ef-card { margin: 28px 12px 0; border-radius: 16px; }
    .ef-card-head { padding: 18px 20px; }
    .ef-rows { padding: 14px 14px; gap: 10px; }
    .ef-row { grid-template-columns: 24px 1fr; gap: 12px; padding: 14px 14px; }
    .ef-row .price { grid-column: 2; justify-self: start; margin-top: 8px; }
    .ef-row .name { font-size: 15.5px; }
    .ef-row .pop { margin-left: 8px; }

    .ef-foot { flex-direction: column; align-items: stretch; text-align: center; padding: 18px 20px; gap: 14px; }
    .ef-foot .ef-cta { width: 100%; }

    .ef-faq-wrap { margin: 40px 12px 48px; padding: 24px 18px; border-radius: 16px; }
    .ef-faq-wrap h2 { font-size: 21px; }
    .ef-faq summary { font-size: 14.5px; padding: 16px 2px; }

    /* Modal */
    .ef-modal-overlay { padding: 12px 10px; align-items: flex-start; }
    .ef-modal { max-width: 100%; border-radius: 16px; }
    .ef-modal-head { padding: 16px 18px; }
    .ef-modal-head h3 { font-size: 17px; }
    .ef-modal-close { width: 40px; height: 40px; }
    .ef-modal-body { padding: 18px 16px; gap: 15px; }
    .ef-modal-foot { padding: 16px; }
    .ef-modal-foot .ef-cta { width: 100%; }
    .ef-field-row { grid-template-columns: 1fr; gap: 15px; }
    .ef-company-panel { padding: 14px 14px; }
    .ef-segment button { padding: 14px 8px; font-size: 13px; }

    /* iOS odaklanınca zoom yapmasın diye inputlar min 16px olmalı */
    .ef-field input,
    .ef-field select { font-size: 16px; padding: 13px 14px; }
}

@media (max-width: 380px) {
    .ef-steps { gap: 8px; }
    .ef-steps .bar { width: 10px; }
    .ef-step { font-size: 11.5px; }
    .ef-hero h1 { font-size: 22px; }
    .ef-row .price { font-size: 19px; }
    .ef-segment { grid-template-columns: 1fr; }
    .ef-company-panel-head { flex-direction: column; align-items: flex-start; }
}

/* ===== edonusum ekleri ===== */
.ed-shell { max-width: 1040px; margin: 0 auto; padding: 0 16px 64px; }
.ed-auth { max-width: 440px; margin: 56px auto 0; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 32px 32px 28px; box-shadow: 0 10px 30px rgba(13,27,46,.06); }
.ed-auth h1 { font: 800 22px/1.25 var(--font-brand); color: var(--sopyo-navy); margin: 0 0 6px; }
.ed-auth .sub { font: 600 14px/1.5 var(--font-brand); color: var(--ink-600); margin: 0 0 22px; }
.ed-tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--sopyo-tint-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; margin-bottom: 22px; }
.ed-tabs a { text-align: center; padding: 9px 0; border-radius: 8px; font: 700 13px/1 var(--font-brand); color: var(--ink-600); text-decoration: none; }
.ed-tabs a.active { background: #fff; color: var(--sopyo-navy); box-shadow: 0 1px 2px rgba(13,27,46,.08); }
.ed-input { width: 100%; box-sizing: border-box; height: 46px; border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; font: 600 16px/1 var(--font-brand); color: var(--sopyo-navy); background: #fff; }
.ed-input:focus { outline: none; border-color: var(--sopyo-blue); box-shadow: 0 0 0 3px rgba(26,107,255,.12); }
.ed-input[readonly] { background: var(--sopyo-tint-2); color: var(--ink-600); }
.ed-help { font: 600 12px/1.4 var(--font-brand); color: var(--ink-400); margin-top: 6px; }
.ed-alert { border-radius: 10px; padding: 12px 14px; font: 600 13px/1.5 var(--font-brand); margin: 0 0 16px; border: 1px solid; }
.ed-alert.err { background: #fff5f5; border-color: #f3c9c9; color: #a3261c; }
.ed-alert.ok { background: #eefaf3; border-color: #bfe8cf; color: #146c3a; }
.ed-alert.info { background: var(--sopyo-tint); border-color: #cfe0fb; color: #0b4fe0; }
.ed-otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 8px 0 12px; }
.ed-otp input { width: 100%; min-width: 0; box-sizing: border-box; padding: 0; height: 54px; text-align: center; font: 800 22px/1 var(--font-brand); border: 1px solid var(--line); border-radius: 10px; color: var(--sopyo-navy); }
.ed-otp input:focus { outline: none; border-color: var(--sopyo-blue); box-shadow: 0 0 0 3px rgba(26,107,255,.12); }
.ed-row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 600 13px/1 var(--font-brand); color: var(--ink-600); }
.ed-link { color: var(--sopyo-blue); font-weight: 700; text-decoration: none; background: none; border: 0; cursor: pointer; font-family: var(--font-brand); font-size: 13px; }
.ed-link[disabled] { color: var(--ink-400); cursor: default; }
.ed-support { text-align: center; margin-top: 22px; font: 600 12px/1.6 var(--font-brand); color: var(--ink-400); }
.ed-support a { color: var(--ink-600); text-decoration: none; }
.ef-cta[disabled] { opacity: .55; cursor: default; }
/* panel */
.ed-banner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 16px; margin-top: 28px; overflow: hidden; }
.ed-banner > div { padding: 20px 22px; border-right: 1px solid var(--line); }
.ed-banner > div:last-child { border-right: 0; }
.ed-banner .lbl { font: 700 11px/1 var(--font-brand); letter-spacing: .5px; text-transform: uppercase; color: var(--ink-400); margin-bottom: 8px; }
.ed-banner .val { font: 800 26px/1 var(--font-brand); color: var(--sopyo-navy); font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.ed-banner .val.neg { color: #b42318; }
.ed-banner .company { font: 800 17px/1.2 var(--font-brand); color: var(--sopyo-navy); }
.ed-banner .vkn { font: 600 13px/1.4 var(--font-brand); color: var(--ink-600); margin-top: 4px; }
.ed-badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font: 700 11px/1 var(--font-brand); letter-spacing: .2px; margin-top: 10px; }
.ed-badge.aktif { background: #eefaf3; color: #146c3a; }
.ed-badge.kritik, .ed-badge.suresi_dolmus { background: #fff1f0; color: #b42318; }
.ed-badge.basvuru, .ed-badge.isleniyor { background: #fff7e6; color: #9a5b00; }
.ed-banner.kritik { border-color: #f3c9c9; }
.ed-section { margin-top: 28px; }
.ed-section h2 { font: 800 17px/1.2 var(--font-brand); color: var(--sopyo-navy); margin: 0 0 12px; }
.ed-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.ed-table th, .ed-table td { text-align: left; padding: 12px 16px; font: 600 14px/1.3 var(--font-brand); border-bottom: 1px solid var(--line); color: var(--sopyo-navy); }
.ed-table th { font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-400); background: var(--sopyo-tint-2); }
.ed-table td.num, .ed-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ed-table tr:last-child td { border-bottom: 0; }
.ed-empty { padding: 28px; text-align: center; color: var(--ink-400); font: 600 14px var(--font-brand); }
.ed-wait { text-align: center; padding: 48px 0 24px; }
.ed-spinner { width: 34px; height: 34px; border: 3px solid var(--line); border-top-color: var(--sopyo-blue); border-radius: 50%; margin: 0 auto 18px; animation: edspin .9s linear infinite; }
@keyframes edspin { to { transform: rotate(360deg); } }
.ed-user { display: flex; align-items: center; gap: 12px; font: 600 13px/1.2 var(--font-brand); color: var(--ink-600); }
.ed-user strong { color: var(--sopyo-navy); }
@media (max-width: 760px) {
  .ed-banner { grid-template-columns: 1fr 1fr; }
  .ed-banner > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .ed-banner > div:first-child { grid-column: 1 / -1; }
  .ed-auth { margin-top: 24px; padding: 24px 18px; }
  .ed-otp input { height: 48px; font-size: 20px; }
}