/* ==========================================================================
   EntaLead — tanitim sitesi
   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 teal olur ve HTML'de renk kodu tekrar etmez.
   ========================================================================== */

:root {
    /* Marka. EntaPro'nun indigo'su degil: EntaLead'in kendi teal'i.
       Kaynak sayfada da EntaLead bolumlerinin vurgu rengi buydu. */
    --el-brand: #14b8a6;
    --el-brand-dark: #0d9488;
    --el-brand-darker: #0f766e;
    --el-brand-soft: rgba(20, 184, 166, .12);
    --el-brand-softer: rgba(20, 184, 166, .06);

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

    --el-shadow: 0 10px 30px rgba(0, 0, 0, .05);
    --el-shadow-lift: 0 16px 40px rgba(15, 118, 110, .12);
    --el-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. EntaLead'e onlarin atadigi renk zaten #14b8a6. */
    --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 teal olur. */
    --bs-primary: #14b8a6;
    --bs-primary-rgb: 20, 184, 166;
    --bs-link-color: #0d9488;
    --bs-link-color-rgb: 13, 148, 136;
    --bs-link-hover-color: #0f766e;
    --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(--el-nav-h) + 16px); }

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

/* Klavyeyle gezenler odagi gorebilsin. Bootstrap'in varsayilan halkasi
   marka rengiyle uyumlu degil. */
:focus-visible { outline: 3px solid var(--el-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(--el-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(--el-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(--el-muted); }

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

.metin-degradesi {
    background: linear-gradient(120deg, var(--el-brand-darker), var(--el-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(--el-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(--el-surface-alt);
    border-top: 1px solid var(--el-line);
    border-bottom: 1px solid var(--el-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(--el-nav-h);
}
.gezinti.kaydirildi { border-bottom-color: var(--el-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(--el-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(--el-muted);
    padding: .5rem 1rem; border-radius: 8px;
}
.gezinti .nav-link:hover, .gezinti .nav-link:focus { color: var(--el-brand-darker); background: var(--el-brand-softer); }

/* Kelime-logo Inter ile.
   Once Syne kullaniliyordu ama harf formlari dekoratif: bu boyutta "EntaLead"
   goze "EntaLeacl" gibi geliyordu (d harfi cl'ye benziyor). 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(--el-ink); line-height: 1;
}
.marka-yazisi span { color: var(--el-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(--el-brand-dark); border-color: var(--el-brand-dark);
    box-shadow: 0 4px 15px rgba(13, 148, 136, .35);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--el-brand-darker); border-color: var(--el-brand-darker);
    box-shadow: 0 6px 20px rgba(13, 148, 136, .45);
}
.btn-outline-primary { color: var(--el-brand-dark); border-color: var(--el-brand-dark); }
.btn-outline-primary:hover, .btn-outline-primary:focus { background: var(--el-brand-dark); border-color: var(--el-brand-dark); color: #fff; }

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

.kart {
    background: var(--el-surface);
    border: 1px solid var(--el-line);
    border-radius: 16px;
    box-shadow: var(--el-shadow);
    padding: 1.5rem;
    height: 100%;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.kart:hover { transform: translateY(-3px); box-shadow: var(--el-shadow-lift); border-color: rgba(20, 184, 166, .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(--el-muted); line-height: 1.6; margin: 0; }

.kart-ikon {
    /* Kaynak site: 46x46, radius 13, zemin vurgunun %12'si, ikon vurgu rengi.
       --vurgu verilmezse markanin teal'ine duser. */
    --vurgu: var(--el-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(--el-surface);
    border: 1px solid var(--el-line);
    border-radius: 16px;
    box-shadow: var(--el-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(--el-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(--el-brand-soft); color: var(--el-brand-dark);
    font-weight: 700; font-size: 1rem;
    margin-bottom: .85rem;
}

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

.hero {
    padding: calc(var(--el-nav-h) + 4rem) 0 4rem;
    background:
        radial-gradient(60rem 30rem at 82% -12%, rgba(20, 184, 166, .13), transparent 62%),
        radial-gradient(46rem 26rem at 8% 8%, rgba(13, 148, 136, .09), transparent 60%),
        var(--el-surface-alt);
    border-bottom: 1px solid var(--el-line);
}
@media (min-width: 992px) { .hero { padding: calc(var(--el-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(--el-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(20, 184, 166, .08); color: var(--el-brand-dark);
    border: 1px solid rgba(20, 184, 166, .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(--el-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(--el-brand-dark); }

.yakinda-etiketi {
    display: inline-block; background: rgba(100, 116, 139, .12); color: var(--el-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(--el-surface); border: 1px solid var(--el-line);
    border-radius: 800px; padding: .45rem .95rem;
    font-size: .875rem; color: var(--el-ink);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}
.sinyal::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--el-brand); flex: 0 0 6px; }

/* ------------------------------------------------------------- skor paneli */

.skor-kutusu {
    background: var(--el-surface); border: 1px solid var(--el-line);
    border-radius: 20px; box-shadow: var(--el-shadow); padding: 1.75rem;
}

.skor-ust {
    display: flex; align-items: center; gap: 1.25rem;
    padding-bottom: 1.25rem; margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--el-line);
}

/* --yuzde'yi animasyonlu yapabilmek icin tipini bildiriyoruz. Ozel ozellikler
   varsayilan olarak metin sayilir ve gecise girmez; @property ile sayi
   oldugunu soyleyince halka dolarak beliriyor. Destegi olmayan tarayicida
   deger aninda yerine oturur - gorsel kayip yok. */
@property --yuzde {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

.halka {
    --yuzde: var(--hedef, 0);
    width: 116px; height: 116px; flex: 0 0 116px;
    border-radius: 50%;
    display: grid; place-items: center;
    transition: --yuzde 1.1s cubic-bezier(.22, .8, .3, 1);
    background:
        conic-gradient(from -90deg,
            var(--el-brand-dark) calc(var(--yuzde) * 1%),
            rgba(20, 184, 166, .14) 0);
}
/* Ic disk halkayi "cember" yapar; ayri bir maske ya da SVG gerekmiyor. */
.halka-ic {
    width: 88px; height: 88px; border-radius: 50%;
    background: var(--el-surface);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    line-height: 1;
}
.halka-sayi {
    /* Inter, Syne degil: Syne'nin rakamlari dekoratif ve bu boyutta okunmuyor.
       tabular-nums, deger degistiginde genislik oynamasini engeller. */
    font-family: var(--bs-body-font-family);
    font-variant-numeric: tabular-nums;
    font-size: 2.35rem; font-weight: 700; letter-spacing: -.02em;
    color: var(--el-ink);
}
.halka-birim { font-size: .75rem; font-weight: 600; color: var(--el-muted); margin-top: .15rem; }

/* Beliris acikken halka sifirdan baslar ve gorununce dolar.
   JS yoksa (.beliris sinifi eklenmez) dogrudan hedef degerde durur. */
html.beliris [data-belir] .halka { --yuzde: 0; }
html.beliris [data-belir].gorundu .halka { --yuzde: var(--hedef, 0); }
@media (prefers-reduced-motion: reduce) {
    .halka { transition: none; }
    html.beliris [data-belir] .halka { --yuzde: var(--hedef, 0); }
}

.skor-bilgi { min-width: 0; }
.skor-etiket {
    font-size: .75rem; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--el-muted); margin: 0 0 .5rem;
}
.skor-rozet {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--el-brand-soft); color: var(--el-brand-darker);
    border-radius: 800px; padding: .3rem .75rem;
    font-size: .8125rem; font-weight: 700;
}
.skor-rozet svg { width: 14px; height: 14px; }
.skor-not { font-size: .875rem; color: var(--el-muted); margin: .6rem 0 0; line-height: 1.5; }

.skor-neden-baslik { font-size: .75rem; margin-bottom: .5rem; }

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

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

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

/* --------------------------------------------------------- yasam dongusu */

.dongu { display: flex; flex-wrap: wrap; gap: .5rem; }
.dongu-asama {
    position: relative; background: var(--el-surface); border: 1px solid var(--el-line);
    border-radius: 800px; padding: .55rem 1.1rem; font-size: .9375rem; font-weight: 500;
}
.dongu-asama[data-sira]::before {
    content: attr(data-sira); display: inline-block; margin-right: .5rem;
    color: var(--el-brand-dark); font-weight: 700; font-size: .8125rem;
}

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

.accordion-item { border: 1px solid var(--el-line); border-radius: 14px !important; margin-bottom: .75rem; overflow: hidden; background: var(--el-surface); }
.accordion-button { font-weight: 600; font-size: 1rem; padding: 1.1rem 1.25rem; background: var(--el-surface); }
.accordion-button:not(.collapsed) { background: var(--el-brand-softer); color: var(--el-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='%230d9488'%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(--el-muted); font-size: .9375rem; line-height: 1.7; padding-top: 0; }

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

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

.zorunlu-yildiz { color: var(--el-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(20, 184, 166, .1);  border-color: rgba(13, 148, 136, .35); color: var(--el-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(--el-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(--el-brand); }