/* ==========================================================================
   Entaveri — tanitim sitesi
   entalead.com ile ayni iskelet (css/site.css oradan alindi); yalnizca marka
   rengi Entaveri'nin moruna cevrildi ve Entaveri'ye ozgu bilesenler
   dosyanin sonuna eklendi.
   Bootstrap 5.3 uzerine ince bir katman. Bootstrap'in kendi degiskenleri
   ezilerek marka rengi tek yerden yonetilir; boylece .btn-primary, .text-primary
   gibi hazir siniflar da mor olur ve HTML'de renk kodu tekrar etmez.
   ========================================================================== */

:root {
    /* Marka: mor (EntaPro paletindeki --vurgu-mor, #7c3aed). Once
       entapro.com'daki indigo (#4361ee) kullaniliyordu; marka karariyla mora
       gecildi. Koyu tonlar metin/buton icin: acik ton beyaz zeminde kucuk
       yazida yeterli kontrasti vermiyor. */
    --ev-brand: #7c3aed;
    --ev-brand-dark: #6d28d9;
    --ev-brand-darker: #5b21b6;
    --ev-brand-soft: rgba(124, 58, 237, .12);
    --ev-brand-softer: rgba(124, 58, 237, .06);

    --ev-ink: #1a1a2e;
    --ev-muted: #64748b;
    --ev-line: #e6eaef;
    --ev-surface: #ffffff;
    --ev-surface-alt: #f8f9fa;
    --ev-footer: #212529;

    --ev-shadow: 0 10px 30px rgba(0, 0, 0, .05);
    --ev-shadow-lift: 0 16px 40px rgba(91, 33, 182, .12);
    --ev-nav-h: 96px;

    /* EntaPro'nun kart vurgu paleti. Kaynak sitede her kartin kendi rengi var
       (style="--accent:#7c3aed"); hepsi tek renk olsaydi kart izgarasi duz ve
       ayirt edilemez olurdu. Ayni degerleri aliyoruz ki iki site ayni aileden
       gorunsun. Entaveri'nin marka rengi bu paletteki mor. */
    --vurgu-mor: #7c3aed;
    --vurgu-gok: #0ea5e9;
    --vurgu-turuncu: #f97316;
    --vurgu-teal: #14b8a6;
    --vurgu-yesil: #10b981;
    --vurgu-indigo: #4361ee;
    --vurgu-amber: #f59e0b;

    /* Bootstrap'in primary'sini devral: .btn-primary, .text-primary,
       .border-primary, form focus halkasi — hepsi tek satirdan mor olur. */
    --bs-primary: #7c3aed;
    --bs-primary-rgb: 124, 58, 237;
    --bs-link-color: #6d28d9;
    --bs-link-color-rgb: 109, 40, 217;
    --bs-link-hover-color: #5b21b6;
    --bs-body-color: #1a1a2e;
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-border-color: #e6eaef;
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--ev-nav-h) + 16px); }

body {
    font-family: var(--bs-body-font-family);
    color: var(--ev-ink);
    background: var(--ev-surface);
    -webkit-font-smoothing: antialiased;
}

/* Klavyeyle gezenler odagi gorebilsin. Bootstrap'in varsayilan halkasi
   marka rengiyle uyumlu degil. */
:focus-visible { outline: 3px solid var(--ev-brand); outline-offset: 2px; border-radius: 4px; }

/* Ekran okuyucular icin: gorunmez ama okunur. Bolum atlama baglantisi kullanir. */
.gorsel-gizli {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.atla-baglantisi {
    position: absolute; left: 12px; top: -60px; z-index: 2000;
    background: var(--ev-brand-darker); color: #fff; padding: 10px 18px;
    border-radius: 0 0 10px 10px; font-weight: 600; transition: top .18s;
}
.atla-baglantisi:focus { top: 0; color: #fff; }

/* --------------------------------------------------------------- tipografi */

/* Bolum ust etiketi — kaynak sitedeki .section-subtitle:
   14.4px / 700 / BUYUK HARF / harf araligi 2px */
.bolum-etiketi {
    display: inline-block;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ev-brand-dark);
    margin-bottom: .75rem;
}

.bolum-basligi { font-size: 1.875rem; font-weight: 700; letter-spacing: -.3px; line-height: 1.2; }
.bolum-girisi { font-size: 1.0625rem; font-weight: 300; line-height: 1.65; color: var(--ev-muted); }

@media (min-width: 992px) {
    .bolum-basligi { font-size: 2.125rem; }
}

.metin-degradesi {
    background: linear-gradient(120deg, var(--ev-brand-darker), var(--ev-brand));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Degrade desteklenmezse metin gorunmez kalmasin. */
    -webkit-text-fill-color: transparent;
}
@supports not (background-clip: text) {
    .metin-degradesi { color: var(--ev-brand-darker); -webkit-text-fill-color: currentColor; }
}

/* ----------------------------------------------------------------- bolumler */

.bolum { padding: 4rem 0; }
@media (min-width: 992px) { .bolum { padding: 5.5rem 0; } }

/* Kaynak sitedeki ritim: beyaz ve gri bolumler sirayla, aralarinda ince cizgi. */
.bolum-gri {
    background: var(--ev-surface-alt);
    border-top: 1px solid var(--ev-line);
    border-bottom: 1px solid var(--ev-line);
}

/* --------------------------------------------------------------- gezinti */

.gezinti {
    background: rgba(255, 255, 255, .97);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s, box-shadow .2s;
    min-height: var(--ev-nav-h);
}
.gezinti.kaydirildi { border-bottom-color: var(--ev-line); box-shadow: 0 2px 20px rgba(0, 0, 0, .04); }
.gezinti .navbar-brand { gap: .7rem; }
/* Kaynak sitede logo 120px ve gezinti 138px. Urun sitesinde bu kadar
   yuksek bir cubuk icerigi asagi itiyor; ortasini aliyoruz. */
.marka-isaret { height: 44px; width: 44px; display: block; }
.marka-kilit { display: flex; flex-direction: column; line-height: 1; }
.marka-alt {
    font-size: .5625rem; font-weight: 700; letter-spacing: 1.4px;
    text-transform: uppercase; color: var(--ev-muted); margin-top: .28rem;
}
.gezinti .nav-link {
    /* Kaynak site: 16px / 500 / #64748b. Menu baglantilari sonuk, dikkat
       basliga ve CTA'ya gitsin. */
    font-size: 1rem; font-weight: 500; color: var(--ev-muted);
    padding: .5rem 1rem; border-radius: 8px;
}
.gezinti .nav-link:hover, .gezinti .nav-link:focus { color: var(--ev-brand-darker); background: var(--ev-brand-softer); }

/* Kelime-logo Inter ile.
   Once Syne kullaniliyordu ama harf formlari dekoratif: bu boyutta kelime-logo
   okunakliligini kaybediyordu (entalead.com'da yasandi). Kelime-logonun
   ilk isi okunmak.
   Duzen EntaPro'nun kendi logosunu yankiliyor: kalin sans kelime + altinda
   minik, harf arasi acilmis buyuk harfli etiket (onlarda "ENTEGRATED TECH"). */
.marka-yazisi {
    font-family: var(--bs-body-font-family);
    font-weight: 800; font-size: 1.3rem;
    letter-spacing: -.025em; color: var(--ev-ink); line-height: 1;
}
.marka-yazisi span { color: var(--ev-brand-dark); }

/* ------------------------------------------------------------------ butonlar */

.btn { font-weight: 600; border-radius: 800px; padding: .75rem 1.5rem; }
.btn-sm { padding: .55rem 1.15rem; font-size: .875rem; }
.btn-primary {
    background: var(--ev-brand-dark); border-color: var(--ev-brand-dark);
    box-shadow: 0 4px 15px rgba(109, 40, 217, .35);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--ev-brand-darker); border-color: var(--ev-brand-darker);
    box-shadow: 0 6px 20px rgba(109, 40, 217, .45);
}
.btn-outline-primary { color: var(--ev-brand-dark); border-color: var(--ev-brand-dark); }
.btn-outline-primary:hover, .btn-outline-primary:focus { background: var(--ev-brand-dark); border-color: var(--ev-brand-dark); color: #fff; }

/* ------------------------------------------------------------------- kartlar */

.kart {
    background: var(--ev-surface);
    border: 1px solid var(--ev-line);
    border-radius: 16px;
    box-shadow: var(--ev-shadow);
    padding: 1.5rem;
    height: 100%;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.kart:hover { transform: translateY(-3px); box-shadow: var(--ev-shadow-lift); border-color: rgba(124, 58, 237, .35); }
/* Beliris animasyonu — kutuphanesiz.
   ONEMLI: gizleme YALNIZCA <html class="beliris"> varken gecerli. O sinifi
   sayfanin basindaki satir ici betik, ancak IntersectionObserver varsa ve
   kullanici hareket kisitlamasi istememisse ekliyor.
   JS kapaliysa, betik engellendiyse ya da tarayici eskiyse sinif hic olusmaz
   ve icerik oldugu gibi gorunur. Once bu sitede AOS kullaniliyordu; init
   calismasina ragmen elemanlari acmadigi icin sayfa bombos kaliyordu. Boyle
   bir sayfanin okunabilirligi bir kutuphaneye emanet edilemez. */
html.beliris [data-belir] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .55s ease-out, transform .55s ease-out;
    will-change: opacity, transform;
}
html.beliris [data-belir].gorundu {
    opacity: 1;
    transform: none;
}

/* Hareketten rahatsiz olan kullanicilar icin (isletim sistemi ayari).
   Satir ici betik zaten .beliris eklemiyor; bu blok ikinci savunma hatti. */
@media (prefers-reduced-motion: reduce) {
    .kart, .kart:hover { transform: none; transition: none; }
    html { scroll-behavior: auto; }
    html.beliris [data-belir] { opacity: 1; transform: none; transition: none; }
}

.kart-baslik { font-size: 1.0625rem; font-weight: 600; margin-bottom: .5rem; }
.kart-metin { font-size: .9375rem; color: var(--ev-muted); line-height: 1.6; margin: 0; }

.kart-ikon {
    /* Kaynak site: 46x46, radius 13, zemin vurgunun %12'si, ikon vurgu rengi.
       --vurgu verilmezse markanin moruna duser. */
    --vurgu: var(--ev-brand-dark);
    width: 46px; height: 46px; border-radius: 13px;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--vurgu) 12%, transparent);
    color: var(--vurgu);
    margin-bottom: 1rem;
}
.kart-ikon svg { width: 22px; height: 22px; }

/* ------------------------------------------------------------------ gorseller */

/* Kaynak sitedeki figure kabugu: p-3 p-md-4 bg-white rounded-4 shadow-sm border.
   Semanin etrafina beyaz bir cerceve koyuyor; gri bolum zemininde gorsel
   "yuzer" gibi durmuyor, kart gibi oturuyor. */
.gorsel-kutu {
    background: var(--ev-surface);
    border: 1px solid var(--ev-line);
    border-radius: 16px;
    box-shadow: var(--ev-shadow);
    padding: 1rem;
}
@media (min-width: 768px) { .gorsel-kutu { padding: 1.5rem; } }

.gorsel-kutu img {
    display: block; width: 100%; height: auto; border-radius: 12px;
}
.gorsel-altyazi {
    font-size: .9375rem; line-height: 1.6; color: var(--ev-muted);
    margin: 1rem 0 0;
}

/* --------------------------------------------------------------- adim rozeti */

.adim-no {
    width: 40px; height: 40px; flex: 0 0 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--ev-brand-soft); color: var(--ev-brand-dark);
    font-weight: 700; font-size: 1rem;
    margin-bottom: .85rem;
}

/* ------------------------------------------------------------------ hero */

.hero {
    padding: calc(var(--ev-nav-h) + 4rem) 0 4rem;
    background:
        radial-gradient(60rem 30rem at 82% -12%, rgba(124, 58, 237, .13), transparent 62%),
        radial-gradient(46rem 26rem at 8% 8%, rgba(109, 40, 217, .09), transparent 60%),
        var(--ev-surface-alt);
    border-bottom: 1px solid var(--ev-line);
}
@media (min-width: 992px) { .hero { padding: calc(var(--ev-nav-h) + 6rem) 0 5.5rem; } }

.hero h1 { font-size: 2.125rem; font-weight: 700; letter-spacing: -.5px; line-height: 1.18; }
@media (min-width: 768px) { .hero h1 { font-size: 2.75rem; } }
/* Kaynak sitede h1 44px. Daha buyugu bu icerikte satir sayisini artiriyor. */
@media (min-width: 1200px) { .hero h1 { font-size: 2.75rem; } }

.hero-giris { font-size: 1.125rem; font-weight: 300; line-height: 1.65; color: var(--ev-muted); }

/* Kaynak sitedeki .hero-eyebrow ile ayni olcu: 12.8px / 700 / ls .5px,
   %8 zemin, %18 kenarlik, 999px yuvarlaklik, icinde bir nokta. */
.rozet {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(124, 58, 237, .08); color: var(--ev-brand-dark);
    border: 1px solid rgba(124, 58, 237, .18);
    border-radius: 999px; padding: .4rem .9rem;
    font-size: .8rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
}
.rozet .nokta {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ev-brand); flex: 0 0 7px;
}

/* Yetenek cipleri — kaynak sitede hero'nun altinda duran satir.
   13.12px / 600 / #475569, beyaz zemin, ince kenarlik. */
.cip-satiri { display: flex; flex-wrap: wrap; gap: .5rem; }
.cip {
    display: inline-flex; align-items: center; gap: .4rem;
    background: #fff; color: #475569;
    border: 1px solid rgba(15, 23, 42, .08); border-radius: 999px;
    padding: .4rem .85rem; font-size: .82rem; font-weight: 600;
}
.cip svg { width: 15px; height: 15px; color: var(--ev-brand-dark); }

.yakinda-etiketi {
    display: inline-block; background: rgba(100, 116, 139, .12); color: var(--ev-muted);
    border-radius: 800px; padding: .18rem .7rem; font-size: .75rem; font-weight: 600;
    letter-spacing: .5px; vertical-align: middle;
}

/* -------------------------------------------------------- sinyal etiketleri */

.sinyal {
    display: inline-flex; align-items: center; gap: .45rem;
    background: var(--ev-surface); border: 1px solid var(--ev-line);
    border-radius: 800px; padding: .45rem .95rem;
    font-size: .875rem; color: var(--ev-ink);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}
.sinyal::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ev-brand); flex: 0 0 6px; }

/* ------------------------------------------------------------ onay listesi */

.neden-listesi { list-style: none; padding: 0; margin: 0; }
.neden-listesi li { display: flex; gap: .65rem; padding: .5rem 0; font-size: .9375rem; color: var(--ev-ink); border-top: 1px solid var(--ev-line); }
.neden-listesi li:first-child { border-top: 0; }
.neden-listesi svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--ev-brand-dark); margin-top: .15rem; }

/* --------------------------------------------------------------- akis seridi */

.akis { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.akis-adim {
    background: var(--ev-surface); border: 1px solid var(--ev-line); border-radius: 12px;
    padding: .6rem 1rem; font-size: .875rem; font-weight: 600; color: var(--ev-ink);
}
.akis-adim.vurgu { background: var(--ev-brand-soft); border-color: rgba(124, 58, 237, .3); color: var(--ev-brand-darker); }
.akis-ok { color: var(--ev-brand); flex: 0 0 auto; }
.akis-ok svg { width: 18px; height: 18px; display: block; }

/* ------------------------------------------------------------------- SSS */

.accordion-item { border: 1px solid var(--ev-line); border-radius: 14px !important; margin-bottom: .75rem; overflow: hidden; background: var(--ev-surface); }
.accordion-button { font-weight: 600; font-size: 1rem; padding: 1.1rem 1.25rem; background: var(--ev-surface); }
.accordion-button:not(.collapsed) { background: var(--ev-brand-softer); color: var(--ev-brand-darker); box-shadow: none; }
.accordion-button:focus { box-shadow: none; }
.accordion-button::after {
    /* Bootstrap'in varsayilan oku mavi; marka rengine ceviriyoruz. */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236d28d9'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-body { color: var(--ev-muted); font-size: .9375rem; line-height: 1.7; padding-top: 0; }

/* ------------------------------------------------------------------ form */

.form-kutusu { background: var(--ev-surface); border: 1px solid var(--ev-line); border-radius: 20px; box-shadow: var(--ev-shadow); padding: 2rem; }
.form-control, .form-select { border-radius: 12px; padding: .75rem 1rem; border-color: var(--ev-line); font-size: .9375rem; }
.form-control:focus, .form-select:focus { border-color: var(--ev-brand); box-shadow: 0 0 0 .2rem rgba(124, 58, 237, .18); }
.form-label { font-size: .875rem; font-weight: 600; margin-bottom: .35rem; }
.form-check-input:checked { background-color: var(--ev-brand-dark); border-color: var(--ev-brand-dark); }
.kvkk-metni { font-size: .8125rem; color: var(--ev-muted); line-height: 1.6; }

.zorunlu-yildiz { color: var(--ev-brand-dark); }

/* Gonderim sonucu. Renk TEK basina anlam tasimazsa renk korlugu olan kullanici
   basari ile hatayi ayirt edemez; bu yuzden her durumun kendi metni ve
   simgesi var, ayrica role="status" ile ekran okuyucuya duyuruluyor. */
.form-sonuc { font-size: .9375rem; line-height: 1.55; border-radius: 12px; }
.form-sonuc:empty { display: none; }
.form-sonuc--basari,
.form-sonuc--uyari,
.form-sonuc--hata { padding: .85rem 1rem; border: 1px solid; }
.form-sonuc--basari { background: rgba(124, 58, 237, .1);  border-color: rgba(109, 40, 217, .35); color: var(--ev-brand-darker); }
.form-sonuc--uyari  { background: rgba(234, 179, 8, .1);   border-color: rgba(161, 98, 7, .3);    color: #854d0e; }
.form-sonuc--hata   { background: rgba(220, 38, 38, .07);  border-color: rgba(185, 28, 28, .28);  color: #991b1b; }

/* ----------------------------------------------------------------- footer */

.altbilgi { background: var(--ev-footer); color: rgba(255, 255, 255, .78); padding: 3.5rem 0 1.75rem; font-size: .9375rem; }
.altbilgi h3 { font-size: .8125rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; margin-bottom: 1rem; }
.altbilgi a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.altbilgi a:hover, .altbilgi a:focus { color: #fff; text-decoration: underline; }
.altbilgi ul { list-style: none; padding: 0; margin: 0; }
.altbilgi li { margin-bottom: .55rem; }
.altbilgi .alt-cizgi { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 2.5rem; padding-top: 1.5rem; font-size: .8125rem; color: rgba(255, 255, 255, .55); }
.altbilgi-isaret { height: 32px; width: 32px; display: block; }
.iletisim-satiri { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .6rem; }
.iletisim-satiri svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: .18rem; color: var(--ev-brand); }

/* ==========================================================================
   Entaveri'ye ozgu bilesenler
   ========================================================================== */

/* ------------------------------------------------------- izin kaydi (hero)
   Hero'nun sag tarafi. entalead.com'daki skor kartinin karsiligi: urunun
   ozunu tek bakista anlatan, resim olmayan bir ozet. Entaveri'nin ozu
   "denetime hazir dijital kanit" oldugu icin kart bir izin kaydini gosterir. */
.kayit-kutusu {
    background: var(--ev-surface); border: 1px solid var(--ev-line);
    border-radius: 20px; box-shadow: var(--ev-shadow); padding: 1.5rem;
}
@media (min-width: 576px) { .kayit-kutusu { padding: 1.75rem; } }

.kayit-ust {
    display: flex; align-items: center; gap: 1rem;
    padding-bottom: 1.1rem; margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--ev-line);
}
.kayit-kalkan {
    width: 56px; height: 56px; flex: 0 0 56px; border-radius: 16px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--ev-brand), var(--ev-brand-darker));
    color: #fff; box-shadow: 0 8px 20px rgba(124, 58, 237, .3);
}
.kayit-kalkan svg { width: 28px; height: 28px; }
.kayit-baslik { font-size: .75rem; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ev-muted); margin: 0 0 .3rem; }
.kayit-kisi { font-size: 1.05rem; font-weight: 700; margin: 0; line-height: 1.3; }
.kayit-kisi small { display: block; font-size: .8125rem; font-weight: 500; color: var(--ev-muted); font-variant-numeric: tabular-nums; }

.kayit-rozet {
    margin-left: auto; align-self: flex-start;
    display: inline-flex; align-items: center; gap: .3rem;
    background: rgba(16, 185, 129, .12); color: #047857;
    border-radius: 800px; padding: .28rem .7rem;
    font-size: .75rem; font-weight: 700; white-space: nowrap;
}
.kayit-rozet svg { width: 13px; height: 13px; }

/* Adimlar dikey bir zaman cizgisi: nokta + ince cizgi. Her adim sirayla
   "tamamlandi" durumuna gecer; JS yoksa hepsi zaten tamamlanmis gorunur. */
.zaman-cizgisi { list-style: none; margin: 0; padding: 0; }
.zaman-cizgisi li {
    position: relative; display: flex; gap: .85rem;
    padding: 0 0 1rem 0;
}
.zaman-cizgisi li:last-child { padding-bottom: 0; }
.zaman-cizgisi li::before {
    content: ""; position: absolute; left: 13px; top: 28px; bottom: 2px;
    width: 2px; background: var(--ev-line);
}
.zaman-cizgisi li:last-child::before { display: none; }
.zc-nokta {
    position: relative; z-index: 1;
    width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--ev-brand-dark); color: #fff;
    transition: background .35s, transform .35s;
}
.zc-nokta svg { width: 14px; height: 14px; }
.zc-metin { min-width: 0; padding-top: .2rem; }
.zc-baslik { display: block; font-size: .9375rem; font-weight: 600; line-height: 1.35; }
.zc-alt { display: block; font-size: .8125rem; color: var(--ev-muted); line-height: 1.45; font-variant-numeric: tabular-nums; }

/* Beliris acikken adimlar gri baslar ve kart gorununce sirayla dolar. */
html.beliris [data-belir] .zc-nokta { background: #cbd5e1; transform: scale(.85); }
html.beliris [data-belir].gorundu .zc-nokta { background: var(--ev-brand-dark); transform: none; }
html.beliris [data-belir].gorundu li:nth-child(2) .zc-nokta { transition-delay: .25s; }
html.beliris [data-belir].gorundu li:nth-child(3) .zc-nokta { transition-delay: .5s; }
html.beliris [data-belir].gorundu li:nth-child(4) .zc-nokta { transition-delay: .75s; }
html.beliris [data-belir].gorundu li:nth-child(5) .zc-nokta { transition-delay: 1s; }
@media (prefers-reduced-motion: reduce) {
    .zc-nokta { transition: none; }
    html.beliris [data-belir] .zc-nokta { background: var(--ev-brand-dark); transform: none; }
}

.kayit-alt {
    margin-top: 1.1rem; padding-top: 1rem; border-top: 1px dashed var(--ev-line);
    display: flex; align-items: center; gap: .5rem;
    font-size: .8125rem; color: var(--ev-muted);
}
.kayit-alt svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--ev-brand-dark); }
.kayit-alt code { font-size: .78rem; color: var(--ev-ink); background: var(--ev-surface-alt); border-radius: 6px; padding: .1rem .4rem; word-break: break-all; }

/* ---------------------------------------------------------- temas noktalari */

.temas-izgara {
    display: grid; gap: .75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 576px) { .temas-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .temas-izgara { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.temas {
    display: flex; align-items: center; gap: .65rem;
    background: var(--ev-surface); border: 1px solid var(--ev-line);
    border-radius: 14px; padding: .85rem 1rem;
    font-size: .9375rem; font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
    transition: border-color .2s, transform .2s;
}
.temas:hover { border-color: rgba(124, 58, 237, .35); transform: translateY(-2px); }
.temas svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--ev-brand-dark); }
@media (prefers-reduced-motion: reduce) { .temas:hover { transform: none; } }

/* ----------------------------------------------------------- karsilastirma
   Masaustunde klasik tablo. Dar ekranda uc sutun sigmiyor ve yatay kaydirma
   istemiyoruz: her satir kendi kartina donusur, sutun adi data-etiket'ten
   gelir. Tablo semantigi (th/td) korunur, ekran okuyucu yine tablo okur. */
.karsilastirma {
    width: 100%; border-collapse: separate; border-spacing: 0;
    background: var(--ev-surface); border: 1px solid var(--ev-line);
    border-radius: 16px; overflow: hidden; box-shadow: var(--ev-shadow);
    font-size: .9375rem;
}
.karsilastirma th, .karsilastirma td { padding: 1rem 1.25rem; vertical-align: top; border-top: 1px solid var(--ev-line); }
.karsilastirma thead th { border-top: 0; background: var(--ev-surface-alt); font-size: .8125rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ev-muted); }
.karsilastirma thead th.biz { background: var(--ev-brand-soft); color: var(--ev-brand-darker); }
.karsilastirma tbody th { font-weight: 600; width: 34%; }
.karsilastirma td.biz { background: var(--ev-brand-softer); color: var(--ev-ink); }
.karsilastirma td.onlar { color: var(--ev-muted); }
.hucre { display: flex; gap: .55rem; align-items: flex-start; }
.hucre svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: .12rem; }
.biz .hucre svg { color: #059669; }
.onlar .hucre svg { color: #94a3b8; }

@media (max-width: 767.98px) {
    .karsilastirma, .karsilastirma tbody, .karsilastirma tr, .karsilastirma th, .karsilastirma td { display: block; width: 100%; }
    .karsilastirma { background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
    .karsilastirma thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .karsilastirma tbody tr {
        background: var(--ev-surface); border: 1px solid var(--ev-line);
        border-radius: 14px; box-shadow: var(--ev-shadow);
        overflow: hidden; margin-bottom: .85rem;
    }
    .karsilastirma tbody th { width: 100%; border-top: 0; padding: .9rem 1rem .6rem; font-size: 1rem; }
    .karsilastirma td { padding: .7rem 1rem; }
    .karsilastirma td::before {
        content: attr(data-etiket); display: block;
        font-size: .6875rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
        margin-bottom: .3rem; color: var(--ev-muted);
    }
    .karsilastirma td.biz::before { color: var(--ev-brand-darker); }
}

/* ------------------------------------------------------------ guvenlik bandi
   Tek koyu bolum. Sayfanin geri kalani beyaz/gri ritimde; guvenlik vaadi
   gorsel olarak da ayrissin diye lacivert zemin. */
.bolum-koyu {
    background:
        radial-gradient(50rem 24rem at 90% 0%, rgba(124, 58, 237, .35), transparent 60%),
        radial-gradient(40rem 20rem at 0% 100%, rgba(192, 38, 211, .18), transparent 60%),
        #1c1236;
    color: rgba(255, 255, 255, .82);
}
.bolum-koyu .bolum-etiketi { color: #c4b5fd; }
.bolum-koyu .bolum-basligi { color: #fff; }
.bolum-koyu .bolum-girisi { color: rgba(255, 255, 255, .72); }
.kart-koyu {
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px; padding: 1.5rem; height: 100%;
}
.kart-koyu .kart-baslik { color: #fff; }
.kart-koyu .kart-metin { color: rgba(255, 255, 255, .68); }
.kart-koyu .kart-ikon { --vurgu: #c4b5fd; background: rgba(196, 181, 253, .14); }

/* ---------------------------------------------------------------- CTA bandi */

.cta-bandi {
    background: linear-gradient(120deg, var(--ev-brand-darker), var(--ev-brand));
    border-radius: 24px; color: #fff; padding: 2.25rem 1.5rem;
    box-shadow: 0 20px 50px rgba(91, 33, 182, .25);
}
@media (min-width: 992px) { .cta-bandi { padding: 3rem 3.5rem; } }
.cta-bandi h2 { color: #fff; }
.cta-bandi p { color: rgba(255, 255, 255, .85); }
.btn-beyaz { background: #fff; color: var(--ev-brand-darker); border: 0; box-shadow: 0 6px 18px rgba(0, 0, 0, .15); }
.btn-beyaz:hover, .btn-beyaz:focus { background: #f5f3ff; color: var(--ev-brand-darker); }
.btn-cizgi-beyaz { color: #fff; border: 1.5px solid rgba(255, 255, 255, .7); background: transparent; }
.btn-cizgi-beyaz:hover, .btn-cizgi-beyaz:focus { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; }
.cta-bandi :focus-visible { outline-color: #fff; }

/* ------------------------------------------------------------ kucuk ekran */

@media (max-width: 575.98px) {
    :root { --ev-nav-h: 76px; }
    .marka-isaret { height: 38px; width: 38px; }
    .hero .btn { width: 100%; }
    .form-kutusu { padding: 1.25rem; }
    .akis-ok { display: none; }
}
.min-w-0 { min-width: 0; }