/* ==========================================================================
   NORMMATİK — KARŞILAMA SAYFASI
   ==========================================================================
   26.08.2026'da sıfırdan yazıldı. Öncekinin sorunu neydi:

   1. Zemin neredeyse siyahtı (#070d18). Kullanıcı kitlesi okul müdürleri
      ve öğretmenler; koyu, parlak vurgulu bir sayfa resmî bir araçtan çok
      oyun sitesi izlenimi veriyordu.
   2. Uygulamanın KENDİSİ aydınlık. Ziyaretçi karanlık bir kapıdan girip
      bambaşka bir yere çıkıyordu.
   3. Ekran görüntüleri ancak kaydırınca görünüyordu; oysa ürünün en güçlü
      kanıtı onlar.
   4. Hiç @media kuralı yoktu; telefonda üst menü tamamen ekran dışındaydı.

   Bu dosyanın ilkeleri:
   - Aydınlık zemin, yüksek kontrast, az renk.
   - Ürün ekranı ilk ekranda görünür.
   - Süs yok: gradyan yağmuru, parlama, gereksiz emoji yok.
   - Önce telefon: bütün ölçüler dar ekrandan geniş ekrana doğru kurulur.

   Kontrast değerleri beyaz zemine karşı ölçüldü (WCAG AA = 4,5:1):
     --metin      #0f172a  ~17,9:1
     --metin-soluk #55637a  ~5,9:1
     --mavi       #0b5cab  ~6,4:1
     --yesil      #15803d  ~5,0:1
   ========================================================================== */

:root {
    --beyaz: #ffffff;
    --zemin: #f6f8fb;
    --kart: #ffffff;
    --cizgi: #e2e8f0;
    --cizgi-koyu: #cbd5e1;

    --metin: #0f172a;
    --metin-soluk: #55637a;

    --mavi: #0b5cab;
    --mavi-koyu: #084a8c;
    --mavi-soluk: #eff6ff;
    --yesil: #15803d;
    --yesil-soluk: #f0fdf4;

    --golge: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 12px rgba(15, 23, 42, .05);
    --golge-kalk: 0 4px 8px rgba(15, 23, 42, .08), 0 12px 28px rgba(15, 23, 42, .10);

    --yazi: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    --en: 1120px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--yazi);
    background: var(--beyaz);
    color: var(--metin);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* `height: auto` ŞART. Yoksa etiketteki height="1559" harfi harfine
   uygulanır, genişlik ise max-width ile küçülür; görsel dikey olarak
   gerilir. İlk yazımda unutulmuştu ve ürün ekranı 4,55 kat uzamıştı.
   width/height etiketleri yine de duruyor: tarayıcı yeri baştan ayırır,
   sayfa yüklenirken zıplama olmaz. */
img { max-width: 100%; height: auto; display: block; }

.kap {
    width: 100%;
    max-width: var(--en);
    margin: 0 auto;
    padding: 0 1.1rem;
}

/* ------------------------------------------------------------------ ÜST ÇUBUK */
.ust {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--cizgi);
}

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

.marka {
    display: flex;
    align-items: center;
    gap: .55rem;
    text-decoration: none;
    color: var(--metin);
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -.01em;
    flex-shrink: 0;
}

.marka-im {
    width: 30px; height: 30px;
    border-radius: 7px;
    background: var(--mavi);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: .95rem;
    font-weight: 800;
}

.ust-menu { display: none; gap: 1.4rem; list-style: none; }

/* Telefonda üst çubukta artık İKİ düğme var (Lisans Al + Kurum Girişi).
   Varsayılan düğme ölçüsüyle 375px'te çubuk 393px'e taşıyordu; dar ekranda
   ölçü küçültülür, 640px'ten itibaren normale döner. */
.ust .dugme { padding: .5rem .7rem; font-size: .84rem; }

.ust-menu a {
    white-space: nowrap;      /* menu ogeleri satir atlamasin */
    color: var(--metin-soluk);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
    padding: .3rem 0;
    border-bottom: 2px solid transparent;
}
.ust-menu a:hover { color: var(--mavi); border-bottom-color: var(--mavi); }

/* ------------------------------------------------------------------ İLETİŞİM
   08.09.2026: sayfada iletişim bölümü YOKTU. Ulaşmanın tek yolu giriş
   kutusunun içindeki "Şifremi unuttum" bağlantısıydı; lisans almak isteyen
   biri hiçbir şey bulamıyordu. Bu blok o boşluğu kapatır. */
.yazi-dar {
    max-width: 460px;
    margin: 0 auto;
    text-align: center;
}

/* Fiyat kutusu. Kullanici karari 08.09.2026: fiyat ana sayfada yazsin,
   ama ilk ekranda degil -- once urun gorunsun, sonra tutar. */
.fiyat-kutu {
    border: 1px solid var(--cizgi-koyu);
    border-radius: 14px;
    background: var(--kart);
    padding: 1.3rem 1.2rem 1.1rem;
    margin-bottom: 1.4rem;
}

.fiyat-tutar {
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1;
    color: var(--metin);
    font-variant-numeric: tabular-nums;
}

.fiyat-kapsam {
    color: var(--metin-soluk);
    font-size: .92rem;
    margin-top: .35rem;
}

.fiyat-liste {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    text-align: left;
    display: grid;
    gap: .4rem;
}

.fiyat-liste li {
    position: relative;
    padding-left: 1.5rem;
    font-size: .92rem;
    color: var(--metin);
}

/* Onay isareti CSS ile: emoji kullanmiyoruz, sayfanin geri kalaninda da yok. */
.fiyat-liste li::before {
    content: "";
    position: absolute;
    left: .25rem; top: .34rem;
    width: .38rem; height: .68rem;
    border: solid var(--yesil);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.fiyat-not {
    color: var(--metin-soluk);
    font-size: .82rem;
    margin: .9rem 0 0;
}

.iletisim-not {
    color: var(--metin-soluk);
    font-size: .9rem;
    margin-top: 1.2rem;
}

.iletisim-liste {
    list-style: none;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem .5rem;
    margin: .6rem 0 0;
    padding: 0;
}

.iletisim-liste li {
    background: var(--zemin);
    border: 1px solid var(--cizgi);
    border-radius: 999px;
    padding: .3rem .75rem;
    font-size: .85rem;
    color: var(--metin);
}

.landing-footer a { color: var(--mavi); text-decoration: none; }
.landing-footer a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ DÜĞMELER */
.dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .62rem 1.05rem;
    border-radius: 8px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: .92rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, border-color .15s, transform .1s;
}
.dugme:active { transform: translateY(1px); }

.dugme-birincil { background: var(--mavi); color: #fff; }
.dugme-birincil:hover { background: var(--mavi-koyu); }

.dugme-ikincil {
    background: var(--beyaz);
    color: var(--metin);
    border-color: var(--cizgi-koyu);
}
.dugme-ikincil:hover { border-color: var(--mavi); color: var(--mavi); }

.dugme-buyuk { padding: .8rem 1.4rem; font-size: 1rem; }

/* ------------------------------------------------------------------ GİRİŞ (HERO) */
.giris {
    padding: 2.5rem 0 1rem;
    background:
        radial-gradient(1100px 380px at 50% -160px, #eef4fd 0%, transparent 70%),
        var(--beyaz);
}

.giris-ic { max-width: 760px; margin: 0 auto; text-align: center; }

.rozet {
    display: inline-block;
    background: var(--mavi-soluk);
    color: var(--mavi);
    border: 1px solid #dbeafe;
    border-radius: 999px;
    padding: .3rem .8rem;
    font-size: .76rem;
    font-weight: 700;
    margin-bottom: 1.1rem;
}

.giris h1 {
    font-size: 1.85rem;
    line-height: 1.25;
    letter-spacing: -.02em;
    font-weight: 800;
    margin-bottom: .8rem;
}

.giris h1 .vurgu { color: var(--mavi); }

.giris-alt {
    font-size: 1rem;
    color: var(--metin-soluk);
    margin-bottom: 1.5rem;
}

.giris-dugmeler {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    align-items: stretch;
    margin-bottom: .9rem;
}

.giris-not { font-size: .8rem; color: var(--metin-soluk); }

/* Ürün ekranı — ilk ekranda görünmesi bilinçli */
.ekran-cerceve {
    margin: 2rem auto 0;
    max-width: 1000px;
    border: 1px solid var(--cizgi);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--golge-kalk);
    background: var(--kart);
}

.ekran-cubuk {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem .7rem;
    background: var(--zemin);
    border-bottom: 1px solid var(--cizgi);
}
.ekran-nokta { width: 9px; height: 9px; border-radius: 50%; background: var(--cizgi-koyu); }

/* Görselin alt kenarı — kullanıcı geri bildirimi, 27.08.2026
   ---------------------------------------------------------
   Ekran görüntüsündeki üç panelin de altı kesik (uygulamada kaydırılarak
   görülüyorlar). Düz bir kesik, gözün "sayfanın devamı var, kaydırayım"
   demesine yol açıyordu; oysa o bir resim.

   İki şey yapıldı:
   1. Alt kenara beyaza doğru yumuşak geçiş — bunun bir ÖNİZLEME olduğunu
      söyler, kesilmiş bir sayfa değil.
   2. Görsel tıklanabilir (gallery-card) — "tamamını göreyim" isteği artık
      kaydırmayla değil tıklamayla karşılanıyor. */
.ekran-govde { position: relative; }

.ekran-govde::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 90px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 92%);
    pointer-events: none;
}

.ekran-ipucu {
    position: absolute;
    left: 50%;
    bottom: .7rem;
    transform: translateX(-50%);
    z-index: 1;
    background: var(--beyaz);
    border: 1px solid var(--cizgi-koyu);
    border-radius: 999px;
    padding: .3rem .8rem;
    font-size: .76rem;
    font-weight: 700;
    color: var(--metin-soluk);
    white-space: nowrap;
    box-shadow: var(--golge);
}

/* Hero çerçevesi galeri kartı sınıfını da taşıyor; galeri görünümü
   buraya sızmasın. */
.ekran-cerceve.gallery-card { border-color: var(--cizgi); }
.ekran-cerceve.gallery-card:hover { box-shadow: var(--golge-kalk); }
.ekran-cerceve.gallery-card img { border-bottom: none; }
.ekran-cerceve.gallery-card:hover .ekran-ipucu { border-color: var(--mavi); color: var(--mavi); }
.ekran-adres {
    margin-left: .5rem;
    font-size: .7rem;
    color: var(--metin-soluk);
    font-weight: 600;
}

/* ------------------------------------------------------------------ BÖLÜMLER */
.bolum { padding: 3rem 0; }
.bolum-gri { background: var(--zemin); border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); }

.bolum-basi { max-width: 620px; margin: 0 auto 2rem; text-align: center; }

.bolum-basi h2 {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -.015em;
    margin-bottom: .5rem;
}

.bolum-basi p { color: var(--metin-soluk); font-size: .95rem; }

/* ------------------------------------------------------------------ IZGARA */
.izgara { display: grid; grid-template-columns: 1fr; gap: 1rem; }

.kutu {
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: 10px;
    padding: 1.2rem;
}
.bolum-gri .kutu { background: var(--beyaz); }

.kutu h3 a { color: var(--mavi); text-decoration: none; }
.kutu h3 a:hover { text-decoration: underline; }

.kutu h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .4rem;
}

.kutu p { font-size: .88rem; color: var(--metin-soluk); }

.kutu-im {
    width: 34px; height: 34px;
    border-radius: 8px;
    background: var(--mavi-soluk);
    color: var(--mavi);
    display: grid; place-items: center;
    font-size: 1rem;
    margin-bottom: .7rem;
}

/* Kademe listesi — sade, ikonsuz */
.kademe-liste { display: grid; grid-template-columns: 1fr; gap: .55rem; }

.kademe {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    background: var(--beyaz);
    border: 1px solid var(--cizgi);
    border-radius: 8px;
    padding: .75rem .9rem;
}
.kademe b { font-size: .92rem; font-weight: 700; }
.kademe span { font-size: .82rem; color: var(--metin-soluk); }

/* ------------------------------------------------------------------ GALERİ */
.galeri { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }

.gallery-card {
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow .15s, border-color .15s;
}
.gallery-card:hover { box-shadow: var(--golge); border-color: var(--cizgi-koyu); }

.gallery-card img { border-bottom: 1px solid var(--cizgi); }

.galeri-yazi { padding: .85rem 1rem; }
.galeri-yazi h4 { font-size: .92rem; font-weight: 700; margin-bottom: .2rem; }
.galeri-yazi p { font-size: .8rem; color: var(--metin-soluk); }

/* ------------------------------------------------------------------ GÜVEN */
.guven-liste { display: grid; grid-template-columns: 1fr; gap: .8rem; }

.guven {
    display: flex;
    gap: .75rem;
    background: var(--beyaz);
    border: 1px solid var(--cizgi);
    border-left: 3px solid var(--yesil);
    border-radius: 8px;
    padding: .9rem 1rem;
}
.guven b { display: block; font-size: .9rem; margin-bottom: .15rem; }
.guven span { font-size: .84rem; color: var(--metin-soluk); }

/* ------------------------------------------------------------------ SSS */
.sss { max-width: 760px; margin: 0 auto; }

.sss details {
    border: 1px solid var(--cizgi);
    border-radius: 8px;
    background: var(--beyaz);
    margin-bottom: .6rem;
    overflow: hidden;
}

.sss summary {
    padding: .9rem 1rem;
    font-size: .92rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: "+"; color: var(--mavi); font-weight: 800; }
.sss details[open] summary::after { content: "−"; }

.sss .cevap {
    padding: 0 1rem 1rem;
    font-size: .88rem;
    color: var(--metin-soluk);
}

/* ------------------------------------------------------------------ KAPANIŞ */
.kapanis { padding: 3rem 0; text-align: center; }

.kapanis h2 { font-size: 1.35rem; font-weight: 800; margin-bottom: .5rem; }
.kapanis p { color: var(--metin-soluk); margin-bottom: 1.3rem; font-size: .95rem; }

.kapanis-dugmeler { display: flex; flex-direction: column; gap: .6rem; }

/* ------------------------------------------------------------------ ALT BİLGİ */
.landing-footer {
    background: var(--zemin);
    border-top: 1px solid var(--cizgi);
    padding: 1.8rem 1.1rem;
    text-align: center;
    font-size: .82rem;
    color: var(--metin-soluk);
}
.landing-footer p + p { margin-top: .35rem; }

/* ------------------------------------------------------------------ GİRİŞ KUTUSU */
.auth-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    z-index: 100;
    padding: 1rem;
    overflow-y: auto;
}
.auth-modal-overlay.active { display: flex; align-items: center; justify-content: center; }

.auth-modal-box {
    background: var(--beyaz);
    border: 1px solid var(--cizgi);
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    box-shadow: var(--golge-kalk);
    overflow: hidden;
}

.auth-modal-header {
    position: relative;
    padding: 1.4rem 1.4rem 1.1rem;
    border-bottom: 1px solid var(--cizgi);
    text-align: center;
}

.auth-modal-close {
    position: absolute;
    top: .7rem; right: .7rem;
    width: 30px; height: 30px;
    border-radius: 7px;
    border: 1px solid var(--cizgi);
    background: var(--beyaz);
    color: var(--metin-soluk);
    font-size: .9rem;
    cursor: pointer;
}
.auth-modal-close:hover { background: var(--zemin); color: var(--metin); }

.auth-modal-box form { padding: 1.3rem 1.4rem 1.5rem; }

.auth-form-group { margin-bottom: .9rem; }

.auth-form-label {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    color: var(--metin);
    margin-bottom: .35rem;
}

.auth-form-input {
    width: 100%;
    padding: .7rem .85rem;
    border: 1px solid var(--cizgi-koyu);
    border-radius: 8px;
    font-family: inherit;
    font-size: .95rem;
    color: var(--metin);
    background: var(--beyaz);
}
.auth-form-input:focus {
    outline: none;
    border-color: var(--mavi);
    box-shadow: 0 0 0 3px rgba(11, 92, 171, .12);
}

.btn-auth-submit {
    width: 100%;
    padding: .78rem;
    border: none;
    border-radius: 8px;
    background: var(--mavi);
    color: #fff;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: .3rem;
}
.btn-auth-submit:hover { background: var(--mavi-koyu); }
.btn-auth-submit:disabled { opacity: .6; cursor: default; }

/* ------------------------------------------------------------------ LIGHTBOX */
.lightbox-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .9);
    z-index: 120;
    padding: 2rem 1rem;
    overflow: auto;
}
.lightbox-modal.active { display: block; }

.lightbox-close {
    position: fixed;
    top: 1rem; right: 1rem;
    width: 38px; height: 38px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    z-index: 2;
}

.lightbox-img-box { max-width: 1200px; margin: 0 auto; }
.lightbox-img { width: 100%; border-radius: 8px; }

.lightbox-title {
    max-width: 1200px;
    margin: .8rem auto 0;
    color: #e2e8f0;
    font-size: .88rem;
    text-align: center;
}

/* ==========================================================================
   GENİŞ EKRANLAR
   ==========================================================================
   Önce telefon kuruldu; buradan itibaren genişletiliyor. Eski dosyanın en
   büyük hatası tersini yapmaktı: masaüstü için yazılmış, telefon hiç
   düşünülmemişti.
   ========================================================================== */

@media (min-width: 640px) {
    .ust .dugme { padding: .62rem 1.05rem; font-size: inherit; }

    .giris-dugmeler,
    .kapanis-dugmeler { flex-direction: row; justify-content: center; }

    .giris h1 { font-size: 2.3rem; }
    .giris-alt { font-size: 1.08rem; }

    .izgara { grid-template-columns: repeat(2, 1fr); }
    .kademe-liste { grid-template-columns: repeat(2, 1fr); }
    .guven-liste { grid-template-columns: repeat(2, 1fr); }
    .galeri { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
    .kap, .ust-ic { padding-left: 1.6rem; padding-right: 1.6rem; }

    .ust-menu { display: flex; }

    .giris { padding: 4rem 0 1.5rem; }
    .giris h1 { font-size: 2.7rem; }

    .bolum { padding: 4.5rem 0; }
    .bolum-basi h2 { font-size: 1.7rem; }

    .izgara { grid-template-columns: repeat(3, 1fr); }
    .kademe-liste { grid-template-columns: repeat(3, 1fr); }
    .galeri { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------------------------ YAZDIRMA */
@media print {
    .ust, .giris-dugmeler, .kapanis, .auth-modal-overlay, .lightbox-modal { display: none !important; }
    body { background: #fff; }
}