/* ============================================================
   kontoryukle — tasarım sistemi
   Yönden bağımsız yazılmıştır: left/right yerine inline-start/end,
   margin-left yerine margin-inline-start. Arapça ve Farsça bu sayede
   ayrı bir stil dosyası olmadan aynalanıyor.
   ============================================================ */

:root {
    /* Nötr ölçek — zeminden metne */
    --n-0:  #ffffff;
    --n-25: #fcfdfe;
    --n-50: #f6f8fb;
    --n-100:#eef2f7;
    --n-200:#e2e8f0;
    --n-300:#cbd5e1;
    --n-400:#94a3b8;
    --n-500:#64748b;
    --n-600:#475569;
    --n-700:#334155;
    --n-800:#1e293b;
    --n-900:#0f172a;

    /* Birincil — koyu petrol yeşili. Başlıklar, koyu haplar, ikincil butonlar. */
    --p-50: #eefaf7;
    --p-100:#d3f2ea;
    --p-200:#a7e5d6;
    --p-500:#0f6a63;
    --p-600:#0d5450;
    --p-700:#0b423f;
    --p-900:#062b29;

    /* Vurgu — limon yeşili. Yalnızca ana eylem butonunda kullanılır;
       her yerde kullanılırsa dikkat çekiciliğini kaybeder. */
    --a-300:#dcf24f;
    --a-400:#cfe92b;
    --a-500:#c2dc16;
    --a-600:#a8c00c;
    --a-ink:#12352f;   /* limon üstünde okunur koyu metin */

    /* Nane — bölüm zeminleri */
    --m-100:#e6faf3;
    --m-200:#c8f4e6;
    --m-300:#a5ecd7;

    --ok-50:#ecfdf5;  --ok-200:#a7f3d0;  --ok-600:#059669;  --ok-700:#047857;
    --wa-50:#fffbeb;  --wa-200:#fde68a;  --wa-600:#d97706;  --wa-700:#b45309;
    --da-50:#fef2f2;  --da-200:#fecaca;  --da-600:#dc2626;  --da-700:#b91c1c;

    /* Boşluk ölçeği — 4px tabanlı */
    --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;
    --s-5:1.25rem; --s-6:1.5rem; --s-8:2rem;  --s-10:2.5rem;
    --s-12:3rem;  --s-16:4rem;

    /* Yumuşak, davetkâr biçim dili — köşeler belirgin şekilde yuvarlak */
    --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-full:999px;

    --sh-sm: 0 1px 2px rgba(6,43,41,.06);
    --sh-md: 0 4px 16px rgba(6,43,41,.07), 0 1px 3px rgba(6,43,41,.04);
    --sh-lg: 0 18px 44px rgba(6,43,41,.12), 0 3px 8px rgba(6,43,41,.05);
    --sh-focus: 0 0 0 3px var(--p-200);

    --content: 1120px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--n-0);
    color: var(--n-700);
    /* Varsa yuvarlak sistem yazı tipi tercih edilir; yoksa olağan gövde
       yazı tipine düşer. Türkçe/Rusça/Arapça/Farsça'nın hepsini kapsayan
       tek bir web yazı tipi bulunana kadar sistem yığını en güvenlisi. */
    font: 400 16px/1.6 ui-rounded, "SF Pro Rounded", "Segoe UI Variable Text",
          system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* Arap ve Fars alfabeleri aynı punto boyunda daha küçük görünüyor */
html[dir="rtl"] body { font-size: 17px; line-height: 1.75; }

h1, h2, h3 { margin: 0; line-height: 1.18; letter-spacing: -.03em; color: var(--p-700); font-weight: 800; }
p { margin: 0; }
a { color: var(--p-600); }

.wrap { width: min(var(--content), 100% - var(--s-8)); margin-inline: auto; }
.narrow { max-width: 560px; margin-inline: auto; }
.muted { color: var(--n-500); }
.small { font-size: .875rem; }
.tnum { font-variant-numeric: tabular-nums; }

/* Numaralar ve para her dilde soldan sağa okunur — RTL'de ters çevrilmemeli */
.ltr { direction: ltr; unicode-bidi: isolate; }

/* ---------- Başlık ---------- */
.site-header {
    background: var(--n-0);
    border-block-end: 1px solid var(--n-200);
    position: sticky; top: 0; z-index: 20;
}
.header-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-4); padding-block: var(--s-3);
}
.brand {
    display: inline-flex; align-items: center; gap: var(--s-2);
    color: var(--n-900); text-decoration: none;
    font-weight: 800; font-size: 1.06rem; letter-spacing: -.03em;
}
.brand { font-size: 1.35rem; color: var(--p-700); }
.brand-mark {
    display: grid; place-items: center; inline-size: 2.2rem; block-size: 2.2rem;
    border-radius: 50%; background: var(--a-400); color: var(--a-ink);
    font-weight: 800; font-size: 1.15rem;
}

.langs { display: flex; gap: 2px; background: var(--n-100); padding: 3px; border-radius: var(--r-full); }
.lang {
    padding: .3rem .6rem; border-radius: var(--r-full);
    font-size: .78rem; font-weight: 700; color: var(--n-500); text-decoration: none;
}
.lang:hover { color: var(--p-700); }
.lang.on { background: var(--n-0); color: var(--p-700); box-shadow: var(--sh-sm); }

.site-main { flex: 1; padding-block: var(--s-10) var(--s-16); }
.site-footer {
    background: var(--n-0); border-block-start: 1px solid var(--n-200);
    color: var(--n-500); font-size: .875rem; padding-block: var(--s-6);
}

/* ---------- Kahraman alan ----------
   Metin ve form ortada; sağda tam boy görsel alanı. Görsel yerleştirilmemişse
   yumuşak bir degrade kalır — düzen boş görselle de bozulmuyor. */
.hero-wrap { position: relative; overflow: hidden; }
.hero-photo {
    position: absolute; inset-block: 0; inset-inline-end: 0;
    inline-size: 40%; z-index: 0;
    background: linear-gradient(160deg, var(--m-200), var(--m-100) 55%, var(--n-0));
    background-size: cover; background-position: center;
    /* Metnin üstüne taşmasın diye içeri doğru yumuşak geçiş */
    -webkit-mask-image: linear-gradient(to var(--fade-dir, left), #000 55%, transparent);
    mask-image: linear-gradient(to var(--fade-dir, left), #000 55%, transparent);
}
html[dir="rtl"] .hero-photo { --fade-dir: right; }
@media (max-width: 900px) { .hero-photo { display: none; } }

.hero { text-align: center; margin-block-end: var(--s-6); position: relative; z-index: 1; }
.hero h1 { font-size: clamp(2rem, 5.2vw, 3.15rem); margin-block-end: var(--s-4); }
.hero p { color: var(--n-500); font-size: 1.08rem; max-width: 34ch; margin-inline: auto; }

/* Segment geçiş — kahraman alanın üstünde, sayfanın ne yaptığını tek bakışta anlatır */
.segmented {
    display: inline-flex; gap: 3px; background: var(--n-0); padding: 5px;
    border-radius: var(--r-full); box-shadow: var(--sh-md); margin-block-end: var(--s-6);
    position: relative; z-index: 1;
}
.seg {
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: .55rem 1.15rem; border-radius: var(--r-full);
    font-weight: 700; font-size: .92rem; color: var(--n-500); text-decoration: none;
}
.seg:hover { color: var(--p-700); }
.seg.on { background: var(--p-600); color: #fff; }

/* ---------- Kart ---------- */
.card {
    background: var(--n-0); border: 1px solid var(--n-100);
    border-radius: var(--r-xl); padding: var(--s-6); box-shadow: var(--sh-lg);
    position: relative; z-index: 1;
}
.card-lg { padding: var(--s-8); }

/* Nane zeminli bölüm — anlatım blokları için */
.band {
    background: var(--m-200); border-radius: var(--r-xl);
    padding: var(--s-8); margin-block-start: var(--s-10);
}
.band h2 { font-size: 1.4rem; margin-block-end: var(--s-3); }
.band p { color: var(--p-700); opacity: .8; }

/* ---------- Form ---------- */
.field { display: block; margin-block-end: var(--s-4); }
.label {
    display: block; font-size: .875rem; font-weight: 600;
    color: var(--n-700); margin-block-end: var(--s-2);
}

.input, .select {
    inline-size: 100%; background: var(--n-0);
    border: 1.5px solid var(--n-300); border-radius: var(--r-md);
    padding: .75rem .9rem; font: inherit; color: var(--n-900);
    transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: var(--n-400); }
.input:focus, .select:focus, .btn:focus-visible {
    outline: none; border-color: var(--p-500); box-shadow: var(--sh-focus);
}

/* Numara girişi — sayfanın ana eylemi. Bayrak dairesi + yüzen etiket,
   içeride tek bir hap biçiminde. */
.msisdn {
    display: flex; align-items: center; gap: var(--s-3);
    border: 2px solid var(--n-200); border-radius: var(--r-full);
    background: var(--n-0); padding: .55rem .7rem .55rem .8rem;
    transition: border-color .15s, box-shadow .15s;
}
.msisdn:focus-within { border-color: var(--p-500); box-shadow: var(--sh-focus); }

.msisdn .flag {
    position: relative; flex: 0 0 auto;
    inline-size: 2.6rem; block-size: 2.6rem; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--m-200); color: var(--p-700);
    font-size: .78rem; font-weight: 800; letter-spacing: .02em;
}
/* Ülke seçici görünmez şekilde dairenin üstünde durur — tıklanabilir alan
   dairenin tamamı olsun, ayrıca ok işareti kendi çiziliyor. */
.msisdn .flag select {
    position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
    opacity: 0; cursor: pointer; border: 0;
}
.msisdn .caret { flex: 0 0 auto; color: var(--n-400); margin-inline-start: -.4rem; }

.msisdn .fieldwrap { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; }
.msisdn .floating {
    font-size: .72rem; font-weight: 700; color: var(--n-400);
    letter-spacing: .01em; margin-block-end: -2px;
}
.msisdn .input {
    border: 0; border-radius: 0; padding: 0; background: transparent;
    font-size: 1.35rem; font-weight: 700; color: var(--p-700);
    letter-spacing: .03em; font-variant-numeric: tabular-nums;
    direction: ltr; text-align: start;
}
html[dir="rtl"] .msisdn .input,
html[dir="rtl"] .msisdn .floating { text-align: end; }
.msisdn .input:focus { box-shadow: none; }
.msisdn .input::placeholder { font-weight: 600; color: var(--n-300); }

/* ---------- Buton ---------- */
/* Butonlar tam yuvarlak hap — sistemin en belirgin biçim imzası */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    border: 2px solid transparent; border-radius: var(--r-full);
    padding: .8rem 1.5rem; font: inherit; font-weight: 700;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    background: var(--a-400); color: var(--a-ink);
    transition: background .15s, box-shadow .15s, transform .08s;
}
.btn:hover { background: var(--a-300); box-shadow: 0 6px 18px rgba(194,220,22,.35); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { background: var(--n-200); color: var(--n-400); cursor: not-allowed; box-shadow: none; }

.btn-lg { padding: 1.05rem 1.75rem; font-size: 1.08rem; }
.btn-block { inline-size: 100%; }

/* İkincil eylem — koyu petrol. Limon yalnızca ana eylemde kalsın. */
.btn-dark { background: var(--p-600); color: #fff; }
.btn-dark:hover { background: var(--p-700); box-shadow: 0 6px 18px rgba(13,84,80,.25); }

.btn-ghost { background: transparent; color: var(--p-700); border-color: var(--n-300); }
.btn-ghost:hover { background: var(--n-50); border-color: var(--p-200); box-shadow: none; }
.btn-sm { padding: .45rem 1rem; font-size: .85rem; border-width: 1.5px; }

/* ---------- Uyarı kutuları ---------- */
.alert {
    border-radius: var(--r-md); padding: var(--s-3) var(--s-4);
    font-size: .92rem; border: 1px solid; margin-block-end: var(--s-4);
}
.alert-error { background: var(--da-50); border-color: var(--da-200); color: var(--da-700); }
.alert-warn  { background: var(--wa-50); border-color: var(--wa-200); color: var(--wa-700); }
.alert-ok    { background: var(--ok-50); border-color: var(--ok-200); color: var(--ok-700); }
.alert:empty { display: none; }

/* ---------- Rozet ---------- */
.badge {
    display: inline-flex; align-items: center; gap: var(--s-2);
    border-radius: var(--r-full); padding: .3rem .7rem;
    font-size: .8rem; font-weight: 650; border: 1px solid;
}
.badge-ok   { background: var(--ok-50); color: var(--ok-700); border-color: var(--ok-200); }
.badge-wait { background: var(--wa-50); color: var(--wa-700); border-color: var(--wa-200); }
.badge-bad  { background: var(--da-50); color: var(--da-700); border-color: var(--da-200); }
.badge-info { background: var(--p-50); color: var(--p-700); border-color: var(--p-200); }

.dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; }
.dot-pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }

/* ---------- Güven şeridi ---------- */
.trust {
    display: flex; justify-content: center; gap: var(--s-6);
    flex-wrap: wrap; margin-block-start: var(--s-6);
    color: var(--n-500); font-size: .875rem;
}
.trust span { display: inline-flex; align-items: center; gap: var(--s-2); }
.trust svg { flex: 0 0 auto; color: var(--ok-600); }

/* ---------- Operatör tespit şeridi ---------- */
.detected {
    display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
    background: var(--n-0); border: 1px solid var(--n-200);
    border-radius: var(--r-lg); padding: var(--s-4) var(--s-5);
    margin-block-end: var(--s-5); box-shadow: var(--sh-sm);
}
.detected .op { font-weight: 700; color: var(--n-900); }
.detected .num { color: var(--n-500); font-variant-numeric: tabular-nums; }
.push-end { margin-inline-start: auto; }

/* ---------- Sekmeler ---------- */
.tabs { display: inline-flex; gap: 2px; background: var(--n-100); padding: 3px; border-radius: var(--r-md); }
.tab {
    padding: .5rem 1rem; border-radius: calc(var(--r-md) - 3px);
    font-size: .9rem; font-weight: 650; color: var(--n-500); text-decoration: none;
}
.tab:hover { color: var(--n-800); }
.tab.on { background: var(--n-0); color: var(--p-700); box-shadow: var(--sh-sm); }

.toolbar {
    display: flex; gap: var(--s-3); flex-wrap: wrap;
    align-items: center; margin-block-end: var(--s-5);
}
.toolbar .select { inline-size: auto; padding-block: .55rem; font-size: .9rem; }

/* ---------- Paket ızgarası ---------- */
.grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }

.pkg {
    background: var(--n-0); border: 1px solid var(--n-200);
    border-radius: var(--r-lg); padding: var(--s-5);
    display: flex; flex-direction: column; gap: var(--s-3);
    box-shadow: var(--sh-sm);
    transition: border-color .15s, box-shadow .15s, transform .1s;
}
.pkg:hover { border-color: var(--p-200); box-shadow: var(--sh-lg); transform: translateY(-2px); }
.pkg h3 { font-size: 1rem; line-height: 1.4; }

.specs { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.spec {
    background: var(--n-50); border: 1px solid var(--n-200); border-radius: var(--r-sm);
    padding: .25rem .55rem; font-size: .8rem; color: var(--n-600); font-weight: 550;
}
.spec b { color: var(--n-900); font-variant-numeric: tabular-nums; font-weight: 700; }

.price { margin-block-start: auto; display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.price .now { font-size: 1.4rem; font-weight: 800; color: var(--n-900); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.price .was { color: var(--n-400); text-decoration: line-through; font-size: .9rem; }
.price .off {
    background: var(--da-50); color: var(--da-700); border: 1px solid var(--da-200);
    border-radius: var(--r-sm); padding: .1rem .4rem; font-size: .75rem; font-weight: 700;
}

/* ---------- Özet satırları ---------- */
.rows { display: flex; flex-direction: column; border: 1px solid var(--n-200); border-radius: var(--r-md); overflow: hidden; }
.row {
    display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
    padding: .8rem var(--s-4); background: var(--n-0); font-size: .95rem;
}
.row + .row { border-block-start: 1px solid var(--n-100); }
.row span:first-child { color: var(--n-500); }
.row b { color: var(--n-900); font-weight: 650; }

/* ---------- Ödeme yöntemi seçimi ---------- */
.methods { display: flex; flex-direction: column; gap: var(--s-2); }
.method {
    display: flex; align-items: center; gap: var(--s-3);
    border: 1.5px solid var(--n-200); border-radius: var(--r-md);
    padding: var(--s-4); cursor: pointer; background: var(--n-0);
    transition: border-color .15s, background .15s;
}
.method:hover { border-color: var(--n-300); background: var(--n-25); }
.method:has(input:checked) { border-color: var(--p-500); background: var(--p-50); }
.method input { inline-size: 1.05rem; block-size: 1.05rem; accent-color: var(--p-600); flex: 0 0 auto; }
.method span { font-weight: 600; color: var(--n-800); }

/* ---------- Boş durum ---------- */
.empty {
    text-align: center; color: var(--n-500);
    padding: var(--s-12) var(--s-4);
    background: var(--n-0); border: 1px dashed var(--n-300); border-radius: var(--r-lg);
}
.empty strong { display: block; color: var(--n-800); font-size: 1.05rem; margin-block-end: var(--s-2); }

/* ---------- Adım göstergesi ---------- */
.steps { display: flex; align-items: center; gap: var(--s-2); justify-content: center; margin-block-end: var(--s-6); font-size: .82rem; }
.step { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--n-400); font-weight: 600; }
.step .n {
    inline-size: 1.5rem; block-size: 1.5rem; border-radius: 50%;
    display: grid; place-items: center; background: var(--n-200); color: var(--n-500);
    font-size: .75rem; font-weight: 700;
}
.step.on { color: var(--p-700); }
.step.on .n { background: var(--p-600); color: #fff; }
.step.done .n { background: var(--ok-600); color: #fff; }
.step.done { color: var(--ok-700); }
.steps .sep { inline-size: 1.5rem; block-size: 1.5px; background: var(--n-200); }

/* ---------- Sorgu aşaması ---------- */
.stage {
    display: flex; align-items: center; justify-content: center; gap: var(--s-3);
    background: var(--n-0); border: 1px solid var(--n-200);
    border-radius: var(--r-lg); padding: var(--s-10) var(--s-5);
    box-shadow: var(--sh-sm); color: var(--n-600); font-weight: 600;
    margin-block-end: var(--s-5);
}
.stage[hidden] { display: none; }

/* Aşama metni değişirken yumuşak geçiş — yeni metin belirsin, zıplamasın */
#stage-text { animation: fade .35s ease both; }

.spinner {
    inline-size: 1.15rem; block-size: 1.15rem; flex: 0 0 auto;
    border: 2.5px solid var(--p-100); border-top-color: var(--p-600);
    border-radius: 50%; animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg) } }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* Sonuçlar belirirken yükselerek gelsin; kartlar JS tarafında
   kademeli gecikmeyle sıralanıyor. */
.rise { animation: rise .38s cubic-bezier(.22,.68,.36,1) both; }

/* Hareket azaltma tercihi olan kullanıcıda tüm animasyonlar kapanır.
   Dönen bekleme göstergesi de dahil — vestibüler rahatsızlığı olanlar için
   sürekli dönen öğe rahatsız edici. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .pkg:hover { transform: none; }
}

@media (max-width: 620px) {
    .steps .lbl { display: none; }
    .toolbar { gap: var(--s-2); }
    .site-main { padding-block: var(--s-6) var(--s-12); }
}