/* ==========================================================================
   Tanıtım sayfası — app.css'ten AYRI dosya, bilerek.

   Portal AÇIK temalı, tanıtım sayfası KOYU. İkisini tek dosyada tutmak,
   her yeni portal kuralının tanıtım sayfasını bozma riskini kalıcı hâle
   getirirdi. Bu dosya yalnızca tanıtım düzenini kullanan sayfalarda
   yükleniyor.

   PALET LOGODAN ÖLÇÜLDÜ, seçilmedi: projenbt.com'daki logo.png tuvale
   çizilip baskın renkleri sayıldı — #f2d6c8 / #ec8a8a / #e03030 üç
   dairenin renkleri, #0e0e1c sitenin kendi gövde rengi.

   TEK TEMA: marka koyu. Logo koyu zemin için yapılmış; açık temada
   saydam daireler kayboluyor. Her renk açıkça boyanıyor.
   ========================================================================== */

/* app.css BU SAYFADA DA YÜKLÜ ve gövdeye 2rem dolgu veriyor. Tam genişlik
   düzen onun üstüne yazılmak zorunda.

   `html body` yazılıyor, sadece `body` değil: eşit özgüllükte kazanan
   "sonra gelen" olur ve bu, App.razor'daki <link> sırasına bağımlılık
   demekti. Sıra bir gün değişirse tanıtım sayfası sessizce 2rem dolgulu
   ve açık zeminli render edilirdi. Özgüllük, sıradan daha dayanıklı. */
html body {
    margin: 0;
    padding: 0;
    background: var(--zemin);
    color: var(--metin);
    font-family: "Source Sans 3", system-ui, -apple-system, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/* app.css h2'ye kendi bölüm aralığını veriyor; tanıtımın ölçüsü başka. */
html body h2 { margin: 0; }

:root {
    --zemin:        #0e0e1c;
    --zemin-2:      #14142a;
    --yuzey:        #1a1a33;
    --yuzey-2:      #22224a;
    --cizgi:        #2c2c52;
    --cizgi-parlak: #3d3d6b;

    /* Nötrler LACİVERTE çalıyor: saf gri bu zeminde ölü görünüyordu. */
    --metin:        #f0f0f5;
    --soluk:        #9a9ab8;
    --cok-soluk:    #6c6c8e;

    --kirmizi:      #e03030;
    --kirmizi-acik: #e07070;
    --kirmizi-zemin:#2a1220;

    --iyi:          #35b877;
    --dikkat:       #e0a800;

    --olcu:         clamp(1.15rem, 0.7rem + 2vw, 2.4rem);
}

* { box-sizing: border-box; }


a { color: inherit; }

h1, h2, h3, .marka-ad {
    font-family: "Bricolage Grotesque", "Source Sans 3", system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.08;
    text-wrap: balance;
    margin: 0;
}

.sayi {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

.kabuk { max-width: 1120px; margin: 0 auto; padding: 0 var(--olcu); }


/* --- Üst çubuk -------------------------------------------------------- */

.ust-cubuk {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(14, 14, 28, .82);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--cizgi);
}

.ust-ic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem var(--olcu);
    max-width: 1120px;
    margin: 0 auto;
}

.marka { display: flex; align-items: center; gap: .6rem; text-decoration: none; }

.marka-ad {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .01em;
}

.marka-alt {
    display: block;
    font-family: "Source Sans 3", sans-serif;
    font-size: .58rem;
    font-weight: 400;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--cok-soluk);
    margin-top: .1rem;
}

.ust-eylem { display: flex; align-items: center; gap: .5rem; }

/* --- Düğmeler --------------------------------------------------------- */

.dugme {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem 1.15rem;
    border-radius: 6px;
    border: 1px solid transparent;
    font-family: "Source Sans 3", sans-serif;
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .14s, border-color .14s, transform .14s;
}

.dugme.birincil { background: var(--kirmizi); color: #fff; }
.dugme.birincil:hover { background: #f04040; transform: translateY(-1px); }

.dugme.ikincil { border-color: var(--cizgi-parlak); color: var(--metin); background: transparent; }
.dugme.ikincil:hover { border-color: var(--kirmizi-acik); color: var(--kirmizi-acik); }

.dugme:focus-visible { outline: 2px solid var(--kirmizi-acik); outline-offset: 2px; }

/* --- Hero ------------------------------------------------------------- */

.hero {
    position: relative;
    overflow: hidden;
    padding: clamp(2.5rem, 1rem + 7vw, 6rem) 0 clamp(2.5rem, 1rem + 5vw, 4.5rem);
}

/* Logonun ic ice dairelerinden turetilmis atmosfer — dekor degil, marka
   isaretinin buyutulmus hali. */
.hero::before,
.hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(70px);
    opacity: .5;
}

.hero::before {
    width: 30rem; height: 30rem;
    top: -12rem; right: -8rem;
    background: radial-gradient(circle, rgba(224, 48, 48, .55), transparent 70%);
}

.hero::after {
    width: 24rem; height: 24rem;
    top: -6rem; right: 6rem;
    background: radial-gradient(circle, rgba(224, 112, 112, .35), transparent 70%);
}

.hero-ic {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(1.8rem, 1rem + 3vw, 3.5rem);
    align-items: center;
}

@media (max-width: 900px) {
    .hero-ic { grid-template-columns: 1fr; }
}

.goz {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: "JetBrains Mono", monospace;
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--kirmizi-acik);
    border: 1px solid rgba(224, 112, 112, .35);
    background: rgba(224, 48, 48, .09);
    border-radius: 999px;
    padding: .3rem .75rem;
    margin-bottom: 1.1rem;
}

h1 { font-size: clamp(2.4rem, 1.3rem + 4.6vw, 4.3rem); }

h1 .vurgu { color: var(--kirmizi-acik); }

.hero p.giris {
    margin: 1.1rem 0 0;
    font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem);
    color: var(--soluk);
    max-width: 46ch;
}

.hero p.giris strong { color: var(--metin); font-weight: 600; }

.hero-eylem { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }

.hero-not {
    margin: 1rem 0 0;
    font-size: .82rem;
    color: var(--cok-soluk);
}

/* --- Hüküm kartı: ürünün gerçek çıktısı ------------------------------- */

.hukum-kart {
    background: linear-gradient(160deg, var(--yuzey), var(--zemin-2));
    border: 1px solid var(--cizgi);
    border-radius: 12px;
    padding: 1.1rem 1.2rem 1.3rem;
    box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .9);
}

.kart-ust {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .6rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--cizgi);
}

.kart-ust h3 { font-size: 1.05rem; letter-spacing: -.01em; }

.kart-ust .alt {
    display: block;
    font-family: "JetBrains Mono", monospace;
    font-size: .68rem;
    color: var(--cok-soluk);
    margin-top: .25rem;
    letter-spacing: .02em;
}

.hukum {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .22rem .65rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid var(--dikkat);
    color: var(--dikkat);
    background: rgba(224, 168, 0, .1);
}

.hukum::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.eksenler { display: grid; gap: .1rem; margin-top: .3rem; }

.eksen {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: .7rem;
    padding: .6rem .1rem;
    border-bottom: 1px solid rgba(44, 44, 82, .55);
}

.eksen:last-child { border-bottom: 0; }

.eksen .ad { font-size: .92rem; }

.eksen .olcum {
    font-family: "JetBrains Mono", monospace;
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    color: var(--soluk);
}

.puan {
    font-size: .68rem;
    font-weight: 600;
    padding: .1rem .5rem;
    border-radius: 999px;
    border: 1px solid;
    white-space: nowrap;
}

.puan.iyi    { color: var(--iyi);    border-color: rgba(53, 184, 119, .5); }
.puan.dikkat { color: var(--dikkat); border-color: rgba(224, 168, 0, .5); }

.kart-dip {
    margin: .9rem 0 0;
    padding-top: .8rem;
    border-top: 1px solid var(--cizgi);
    font-size: .8rem;
    color: var(--cok-soluk);
}

.kart-dip strong { color: var(--soluk); font-weight: 600; }

/* --- Bölüm iskeleti --------------------------------------------------- */

section { padding: clamp(3rem, 1.5rem + 5vw, 5.5rem) 0; }

section.ayrik { border-top: 1px solid var(--cizgi); }

.bolum-basi { max-width: 60ch; margin-bottom: clamp(1.6rem, 1rem + 1.5vw, 2.6rem); }

.bolum-goz {
    font-family: "JetBrains Mono", monospace;
    font-size: .66rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--kirmizi-acik);
    display: block;
    margin-bottom: .7rem;
}

h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.65rem); }

.bolum-basi p { margin: .85rem 0 0; color: var(--soluk); font-size: 1.05rem; }

/* --- Fayda kartları --------------------------------------------------- */

.kartlar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));
    gap: 1px;
    background: var(--cizgi);
    border: 1px solid var(--cizgi);
    border-radius: 10px;
    overflow: hidden;
}

.kart { background: var(--zemin-2); padding: 1.5rem 1.4rem; }

.kart h3 { font-size: 1.12rem; margin-bottom: .5rem; }

.kart p { margin: 0; color: var(--soluk); font-size: .95rem; }

.kart .im {
    display: inline-grid;
    place-items: center;
    width: 2.1rem; height: 2.1rem;
    border-radius: 7px;
    background: rgba(224, 48, 48, .13);
    border: 1px solid rgba(224, 112, 112, .3);
    margin-bottom: .9rem;
}

.kart .im svg { width: 1.05rem; height: 1.05rem; stroke: var(--kirmizi-acik); fill: none; stroke-width: 1.8; }

/* --- Nasıl çalışır: gerçek bir SIRA, o yüzden numaralı --------------- */

.adimlar { display: grid; gap: 1px; background: var(--cizgi); border: 1px solid var(--cizgi); border-radius: 10px; overflow: hidden; }

@media (min-width: 820px) { .adimlar { grid-template-columns: repeat(3, 1fr); } }

.adim { background: var(--zemin-2); padding: 1.5rem 1.4rem; }

.adim .no {
    font-family: "JetBrains Mono", monospace;
    font-size: .72rem;
    font-weight: 600;
    color: var(--kirmizi-acik);
    letter-spacing: .1em;
    display: block;
    margin-bottom: .7rem;
}

.adim h3 { font-size: 1.05rem; margin-bottom: .45rem; }

.adim p { margin: 0; color: var(--soluk); font-size: .93rem; }

.adim code {
    font-family: "JetBrains Mono", monospace;
    font-size: .8rem;
    background: var(--zemin);
    border: 1px solid var(--cizgi);
    border-radius: 4px;
    padding: .1rem .35rem;
    color: var(--kirmizi-acik);
}

/* --- Güvenlik bloğu: sayfanın tek kırmızı zemini --------------------- */

.guvenlik {
    background:
        radial-gradient(120% 100% at 100% 0%, rgba(224, 48, 48, .13), transparent 60%),
        var(--kirmizi-zemin);
    border-top: 1px solid rgba(224, 48, 48, .28);
    border-bottom: 1px solid rgba(224, 48, 48, .28);
}

.guvenlik .bolum-goz { color: var(--kirmizi-acik); }

.soz {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    padding: 1.4rem 0;
    border-bottom: 1px solid rgba(224, 48, 48, .2);
    align-items: start;
}

.soz:last-child { border-bottom: 0; }

.soz-no {
    font-family: "JetBrains Mono", monospace;
    font-size: 1.5rem;
    font-weight: 600;
    color: rgba(224, 112, 112, .55);
    line-height: 1;
    padding-top: .2rem;
}

.soz h3 { font-size: 1.22rem; margin-bottom: .4rem; }

.soz p { margin: 0; color: #d9c3c8; font-size: .98rem; max-width: 62ch; }

.soz p strong { color: #fff; font-weight: 600; }

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

.sss { display: grid; gap: .55rem; max-width: 60rem; }

details {
    background: var(--zemin-2);
    border: 1px solid var(--cizgi);
    border-radius: 8px;
    padding: 0 1.1rem;
}

details[open] { border-color: var(--cizgi-parlak); }

summary {
    cursor: pointer;
    list-style: none;
    padding: 1rem 0;
    font-weight: 600;
    font-size: 1.02rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

summary::-webkit-details-marker { display: none; }

summary::after {
    content: "+";
    font-family: "JetBrains Mono", monospace;
    color: var(--kirmizi-acik);
    font-size: 1.15rem;
    flex: 0 0 auto;
}

details[open] summary::after { content: "–"; }

summary:focus-visible { outline: 2px solid var(--kirmizi-acik); outline-offset: 3px; border-radius: 4px; }

details p { margin: 0 0 1.05rem; color: var(--soluk); font-size: .96rem; max-width: 68ch; }

/* --- Demo formu ------------------------------------------------------- */

.form-blok {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(1.8rem, 1rem + 3vw, 3.5rem);
    align-items: start;
}

@media (max-width: 900px) { .form-blok { grid-template-columns: 1fr; } }

.form-kutu {
    background: var(--zemin-2);
    border: 1px solid var(--cizgi);
    border-radius: 12px;
    padding: clamp(1.2rem, .8rem + 1vw, 1.8rem);
}

.alanlar { display: grid; gap: .85rem; }

@media (min-width: 560px) { .ikili { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; } }

label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .3rem; color: var(--soluk); }

label .zorunlu { color: var(--kirmizi-acik); }

input[type="text"], input[type="email"], input[type="tel"], select, textarea {
    width: 100%;
    padding: .6rem .75rem;
    border-radius: 6px;
    border: 1px solid var(--cizgi-parlak);
    background: var(--zemin);
    color: var(--metin);
    font-family: inherit;
    font-size: .95rem;
}

textarea { resize: vertical; min-height: 5rem; }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--kirmizi-acik);
    box-shadow: 0 0 0 3px rgba(224, 48, 48, .16);
}

.onay {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .6rem;
    align-items: start;
    font-size: .82rem;
    color: var(--soluk);
    margin-top: .3rem;
}

.onay input { margin-top: .25rem; }

.onay a { color: var(--kirmizi-acik); }

.yan-liste { display: grid; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }

.yan-liste li { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; }

.yan-liste .tik {
    width: 1.15rem; height: 1.15rem;
    flex: 0 0 auto;
    margin-top: .18rem;
    stroke: var(--iyi);
    fill: none;
    stroke-width: 2.2;
}

.yan-liste strong { display: block; font-size: .98rem; }

.yan-liste span { color: var(--soluk); font-size: .9rem; }

/* --- Alt bilgi -------------------------------------------------------- */

footer {
    border-top: 1px solid var(--cizgi);
    padding: 2.2rem 0 2.8rem;
    background: #0a0a16;
}

.dip {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.2rem;
    align-items: flex-start;
}

.dip p { margin: .5rem 0 0; color: var(--cok-soluk); font-size: .85rem; max-width: 40ch; }

.dip-baglar { display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: .88rem; }

.dip-baglar a { color: var(--soluk); text-decoration: none; }

.dip-baglar a:hover { color: var(--metin); }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* --- Formun uygulama tarafında eklenenleri ------------------------------ */

/* BAL KAPANI: göze görünmez ama `display:none` DEĞİL — bazı botlar
   gizli alanları atlıyor. Ekran dışına taşınıyor ve ekran okuyucudan
   `aria-hidden` ile gizleniyor, böylece gerçek kullanıcı hiç
   karşılaşmıyor. */
.bal-kapani {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.dugme.genis { width: 100%; justify-content: center; margin-top: .4rem; }

.form-not { margin: .2rem 0 0; font-size: .78rem; color: var(--cok-soluk); text-align: center; }

.form-hata {
    margin: 0;
    padding: .55rem .75rem;
    border-radius: 6px;
    border: 1px solid var(--kirmizi);
    background: rgba(224, 48, 48, .12);
    color: #ffb3b3;
    font-size: .88rem;
}

/* Blazor'un dogrulama mesaji sinifi. */
.validation-message {
    display: block;
    margin-top: .3rem;
    font-size: .8rem;
    color: #ffb3b3;
}

/* --- Teşekkür ekranı ---------------------------------------------------
   Formun YERİNE geçiyor: form da kalsaydı kullanıcı gönderilip
   gönderilmediğini anlayamaz ve ikinci kez gönderirdi. */
.tesekkur { text-align: center; padding: 1.5rem .5rem; }

.tesekkur svg {
    width: 2.6rem;
    height: 2.6rem;
    stroke: var(--iyi);
    fill: none;
    stroke-width: 2.2;
    margin-bottom: .8rem;
}

.tesekkur h3 { font-size: 1.25rem; margin-bottom: .5rem; }

.tesekkur p { margin: 0 auto; color: var(--soluk); font-size: .95rem; max-width: 38ch; }

/* --- Aydınlatma metni sayfası ------------------------------------------ */

.belge { max-width: 70ch; padding: clamp(2rem, 1rem + 4vw, 4rem) 0; }

.belge h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); margin-bottom: 1.2rem; }

.belge h2 { font-size: 1.2rem; margin: 2rem 0 .6rem; }

.belge p, .belge li { color: var(--soluk); }

.belge ul { padding-left: 1.2rem; }

.belge li { margin-bottom: .35rem; }

.belge .taslak-uyari {
    border: 1px solid var(--dikkat);
    background: rgba(224, 168, 0, .1);
    color: #f0d68a;
    border-radius: 8px;
    padding: .9rem 1.1rem;
    font-size: .92rem;
    margin-bottom: 1.8rem;
}

.belge .taslak-uyari strong { color: #ffe9a8; }

/* ==========================================================================
   "DIŞARISI" EKRANLARI — giriş, davet, yetkisizlik, doğrulama.

   Bunlar tanıtım sayfasıyla aynı dünyada: kullanıcı ya henüz müşteri
   değil, ya hesabı yok, ya da yanlış kapıda. Portalın veri ekranları
   (grid, grafik, tablo) buraya girmiyor — onlar saatlerce bakılan
   yüzeyler ve sakin kalmaları gerekiyor.

   MARKANIN KIRMIZISI BURADA SERBEST, portalda DEĞİL: portalda kırmızı
   "hata" demek (--hata, başarısız paket rozeti, silme uyarısı). Birincil
   düğmeleri kırmızı yapmak, izleme ürününde her eylemi uyarı gibi
   gösterirdi. Burada rakip bir anlam yok.
   ========================================================================== */

.giris-kutusu,
.disari-kart {
    max-width: 23rem;
    margin: clamp(2rem, 8vh, 5rem) auto;
    padding: 0 1.2rem;
}

.disari-kart { text-align: center; max-width: 30rem; }

.disari-kart h1 { font-size: 1.6rem; margin: 1.2rem 0 .4rem; }

.disari-kart p { color: var(--soluk); margin: 0 0 1.6rem; }

.giris-kutusu .marka {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: 1.6rem;
    text-decoration: none;
}

.giris-kutusu h1 { font-size: 1.55rem; margin: 0 0 .25rem; }

.giris-alt { color: var(--soluk); font-size: .9rem; margin: 0 0 1.3rem; }

/* Etiket ve alanlar: portalın app.css'i de yüklü olduğu için özgüllükle
   eziliyor — sıralamaya güvenmek, <link> sırası değişince sessizce
   bozulmak demekti. */
html body .giris-kutusu label {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    color: var(--soluk);
    margin: .85rem 0 .25rem;
}

html body .giris-kutusu input {
    width: 100%;
    padding: .55rem .7rem;
    border-radius: 6px;
    border: 1px solid var(--cizgi-parlak);
    background: var(--zemin-2);
    color: var(--metin);
    font: inherit;
    font-size: .95rem;
}

html body .giris-kutusu input::placeholder { color: var(--cok-soluk); }

html body .giris-kutusu input:focus {
    outline: none;
    border-color: var(--kirmizi-acik);
    box-shadow: 0 0 0 3px rgba(224, 48, 48, .16);
}

.giris-tanitim {
    display: block;
    margin-top: 1.2rem;
    text-align: center;
    font-size: .82rem;
    color: var(--cok-soluk);
    text-decoration: none;
}

.giris-tanitim u { color: var(--kirmizi-acik); text-decoration: none; }

/* Giriş hatası: kırmızı zaten bu sayfanın vurgu rengi, o yüzden hata
   şeridi ÇERÇEVEYLE ayrışıyor — yalnızca renkle ayrışsaydı düğmeden
   ayırt edilemezdi. */
html body .giris-kutusu .hata {
    margin: 1rem 0 0;
    padding: .55rem .75rem;
    border: 1px solid var(--kirmizi);
    border-radius: 6px;
    background: rgba(224, 48, 48, .12);
    color: #ffb3b3;
    font-size: .88rem;
}