/* ---------------------------------------------------------------------------
   DerAnalitik tanıtım sitesi — tasarım dizgesi

   Uygulamanın kendisi Tabler/Bootstrap kullanıyor; tanıtım sitesi KULLANMIYOR.
   Sebep: pazarlama sayfaları ürünün kabuğuyla aynı görünmek zorunda değil ve
   tek bir çerçeve dosyası indirmek için 300 KB CSS çekmek, ilk boyanma süresini
   (arama sıralamasında sayılan bir ölçüt) gereksiz yere uzatıyordu. Buradaki
   düzen kendi ızgarasını kuruyor, tek dış bağımlılık ikon yazı tipi.

   Renkler flowitall şablonundan alındı: krem zemin + koyu mor mürekkep,
   yardımcı renk olarak lavanta ve gül tonu.
   --------------------------------------------------------------------------- */

:root {
    --tn-krem: #f9f7f1;
    --tn-beyaz: #ffffff;
    --tn-murekkep: #270d5b;
    --tn-mor: #7344d2;
    --tn-lavanta: #ded4eb;
    --tn-lavanta-acik: #efeaf7;
    --tn-gul: #ebd4d4;
    --tn-cizgi: #e6e1d8;
    --tn-soluk: #6b5f85;

    --tn-yaricap: 24px;
    --tn-yaricap-kart: 20px;
    --tn-golge: 0 2px 8px rgba(39, 13, 91, .06);
    --tn-golge-yuksek: 0 12px 32px rgba(39, 13, 91, .12);

    --tn-genislik: 1140px;
    --tn-bosluk: 24px;
}

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

html { scroll-behavior: smooth; }

body.tn {
    margin: 0;
    background: var(--tn-krem);
    color: var(--tn-murekkep);
    font-family: Rubik, "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 18px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.tn h1, .tn h2, .tn h3, .tn h4 {
    font-weight: 500;
    line-height: 1.2;
    margin: 0 0 .6em;
    letter-spacing: -.01em;
}

.tn h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
.tn h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
.tn h3 { font-size: 1.25rem; }
.tn h4 { font-size: 1.05rem; }
.tn p { margin: 0 0 1.1em; }
.tn a { color: var(--tn-mor); text-decoration: none; }
.tn a:hover { text-decoration: underline; }
.tn img { max-width: 100%; height: auto; }

.tn-kapsayici {
    width: 100%;
    max-width: var(--tn-genislik);
    margin: 0 auto;
    padding: 0 var(--tn-bosluk);
}

.tn-dar { max-width: 760px; }

.tn-bolum { padding: 72px 0; }
.tn-bolum-sik { padding: 48px 0; }
.tn-zemin-beyaz { background: var(--tn-beyaz); }
.tn-zemin-lavanta { background: var(--tn-lavanta-acik); }

.tn-ustyazi {
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tn-mor);
    font-weight: 500;
    margin: 0 0 .6rem;
}

.tn-giris { font-size: 1.15rem; color: var(--tn-soluk); }
.tn-soluk { color: var(--tn-soluk); }
.tn-kucuk { font-size: .9rem; }
.tn-orta { text-align: center; }
.tn-orta .tn-giris { margin-left: auto; margin-right: auto; max-width: 640px; }

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

.tn-dugme {
    display: inline-block;
    padding: 14px 34px;
    border-radius: var(--tn-yaricap);
    font-weight: 500;
    font-size: 1rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.tn-dugme:hover { text-decoration: none; transform: translateY(-1px); }

/* Renkler `.tn` ile kapsanıyor: kapsamsız hâlde `.tn a` kuralı (0,1,1) bu
   sınıfları (0,1,0) yeniyor ve koyu zeminli düğmede mor yazı çıkıyordu. */
.tn .tn-dugme-birincil { background: var(--tn-murekkep); color: var(--tn-beyaz); }
.tn .tn-dugme-birincil:hover { background: #1c0942; color: var(--tn-beyaz); box-shadow: var(--tn-golge-yuksek); }

.tn .tn-dugme-ikincil { background: var(--tn-lavanta); color: var(--tn-mor); }
.tn .tn-dugme-ikincil:hover { background: #d2c4e6; color: var(--tn-mor); }

.tn .tn-dugme-cizgili { background: transparent; color: var(--tn-murekkep); border-color: var(--tn-murekkep); }
.tn .tn-dugme-cizgili:hover { background: var(--tn-murekkep); color: var(--tn-beyaz); }

.tn-dugme-kucuk { padding: 9px 22px; font-size: .92rem; }

.tn-dugmeler { display: flex; flex-wrap: wrap; gap: 12px; }
.tn-orta .tn-dugmeler { justify-content: center; }

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

.tn-ustcubuk {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(249, 247, 241, .92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--tn-cizgi);
}

.tn-ustcubuk-ic {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 72px;
}

.tn-marka {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    font-size: 1.15rem;
    color: var(--tn-murekkep);
}

.tn-marka:hover { text-decoration: none; }

.tn-marka-ikon {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: var(--tn-murekkep);
    color: var(--tn-beyaz);
    font-size: 1.05rem;
}

.tn-menu { display: flex; align-items: center; gap: 4px; margin-left: auto; align-self: stretch; }
.tn-menu > a, .tn-menu-baslik { color: var(--tn-murekkep); padding: 8px 14px; border-radius: 14px; font-size: .97rem; }
.tn-menu > a:hover, .tn-menu-baslik:hover { background: var(--tn-lavanta-acik); text-decoration: none; }
.tn-menu > a[aria-current="page"], .tn-menu-baslik[aria-current="page"] { color: var(--tn-mor); font-weight: 500; }

/* --- Mega menü ------------------------------------------------------------
   Öge üst çubuğun tam yüksekliğini kaplar: imleç düğmeden panele inerken
   aradaki boşlukta ".tn-menu-oge" üzerinden çıkmasın, panel kapanmasın.
   Geniş panel (Modüller) üst çubuğun iç kutusuna göre, dar paneller kendi
   ögesine göre konumlanır. */

.tn-ustcubuk-ic { position: relative; }

.tn-menu-oge { display: flex; align-items: center; align-self: stretch; }
.tn-menu-oge:has(.tn-mega-dar), .tn-menu-oge:has(.tn-mega-liste) { position: relative; }

.tn-menu-baslik {
    background: none;
    border: 0;
    font-family: inherit;
    line-height: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tn-menu-baslik .bi { font-size: .75rem; transition: transform .15s ease; }
.tn-menu-oge.acik .tn-menu-baslik .bi { transform: rotate(180deg); }

.tn-mega {
    display: none;
    position: absolute;
    top: 100%;
    left: var(--tn-bosluk);
    right: var(--tn-bosluk);
    background: var(--tn-beyaz);
    border: 1px solid var(--tn-cizgi);
    border-radius: var(--tn-yaricap-kart);
    box-shadow: var(--tn-golge-yuksek);
    padding: 24px;
    z-index: 50;
}

.tn-mega-dar { left: 0; right: auto; width: 560px; }
.tn-mega-liste { left: 0; right: auto; width: 320px; padding: 12px; }

.tn-menu-oge.acik > .tn-mega { display: block; }

@media (min-width: 1025px) and (hover: hover) {
    .tn-menu-oge:hover > .tn-mega { display: block; }
}

.tn-mega-sutunlar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 20px; }
.tn-mega-izgara { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 12px; }
.tn-mega-sutun, .tn-mega-izgara > *, .tn-mega-sutunlar > * { min-width: 0; }

.tn-mega-ustyazi {
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tn-soluk);
    margin: 0 0 8px 10px;
}

.tn .tn-mega-kart {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px;
    border-radius: 14px;
    color: var(--tn-murekkep);
}

.tn .tn-mega-kart:hover, .tn .tn-mega-kart[aria-current="page"] {
    background: var(--tn-lavanta-acik);
    text-decoration: none;
}

.tn-mega-ikon {
    flex: 0 0 36px;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: var(--tn-lavanta-acik);
    color: var(--tn-mor);
    font-size: 1.05rem;
}

.tn-mega-kart:hover .tn-mega-ikon { background: var(--tn-beyaz); }

.tn-mega-metin { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.tn-mega-metin strong { font-weight: 500; font-size: .95rem; }
.tn-mega-metin small { color: var(--tn-soluk); font-size: .82rem; margin-top: 2px; }

.tn-mega-alt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding: 14px 10px 0;
    border-top: 1px solid var(--tn-cizgi);
    font-size: .9rem;
}

.tn-mega-alt a { font-weight: 500; }

.tn-menu-dugmeler { display: inline-flex; gap: 8px; margin-left: 8px; }

.tn-menu-dugmesi {
    display: none;
    margin-left: auto;
    background: none;
    border: 1px solid var(--tn-cizgi);
    border-radius: 14px;
    padding: 8px 12px;
    font-size: 1.25rem;
    color: var(--tn-murekkep);
    cursor: pointer;
}

/* Menü 1024px'te hamburgere geçer (eskiden 960): mega menüyle üst çubukta
   altı başlık + iki düğme var ve 960–1024 arasında tek satıra sığmıyor. */
@media (max-width: 1024px) {
    .tn-menu-dugmesi { display: block; }
    .tn-menu {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 12px var(--tn-bosluk) 20px;
        background: var(--tn-krem);
        border-bottom: 1px solid var(--tn-cizgi);
        max-height: calc(100vh - 72px);
        overflow-y: auto;
    }
    .tn-menu.acik { display: flex; }
    .tn-menu .tn-dugme { text-align: center; margin-top: 8px; }

    /* Paneller akordeon: yerinde açılır, sütunlar alt alta. */
    .tn-menu-oge { flex-direction: column; align-items: stretch; position: static !important; }
    .tn-menu-baslik { justify-content: space-between; width: 100%; text-align: left; }
    .tn-mega, .tn-mega-dar, .tn-mega-liste {
        position: static;
        width: auto;
        box-shadow: none;
        border-radius: 14px;
        padding: 8px;
        margin: 4px 0 8px;
    }
    .tn-mega-sutunlar, .tn-mega-izgara { grid-template-columns: 1fr 1fr; }
    .tn-mega-alt { justify-content: flex-start; }
    .tn-menu-dugmeler { flex-direction: column; margin-left: 0; }
}

@media (max-width: 640px) {
    .tn-mega-sutunlar, .tn-mega-izgara { grid-template-columns: 1fr; }
    .tn-mega-metin small { display: none; }
    .tn .tn-mega-kart { padding: 7px 10px; align-items: center; }
}

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

.tn-hero { padding: 84px 0 64px; }

.tn-hero-izgara {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 48px;
    align-items: center;
}

@media (max-width: 900px) {
    .tn-hero { padding: 48px 0 40px; }
    .tn-hero-izgara { grid-template-columns: 1fr; gap: 32px; }
}

/* Izgara ögesinin otomatik en küçük boyutu (min-width:auto) içindeki en geniş
   satırın min-content'i kadardır: kurum kodu satırı yüzünden sütun telefonda
   442px'e çıkıp ANA SAYFAYI yana kaydırıyordu (başlık ve kart kırpılıyordu). */
.tn-hero-izgara > * { min-width: 0; }

@media (max-width: 520px) {
    /* "okul-kodu" + ".deranalitik.com.tr" + düğme dar ekranda tek satıra sığmaz. */
    .tn-alan-grubu { flex-wrap: wrap; }
    .tn-alan-grubu input { flex: 1 1 100%; }
}

.tn-rozet {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--tn-lavanta);
    color: var(--tn-mor);
    border-radius: 999px;
    padding: 6px 16px;
    font-size: .85rem;
    font-weight: 500;
    margin-bottom: 18px;
}

/* --- Kartlar ------------------------------------------------------------- */

.tn-izgara { display: grid; gap: 20px; }
.tn-izgara-2 { grid-template-columns: repeat(2, 1fr); }
.tn-izgara-3 { grid-template-columns: repeat(3, 1fr); }
.tn-izgara-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 980px) {
    .tn-izgara-3, .tn-izgara-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .tn-izgara-2, .tn-izgara-3, .tn-izgara-4 { grid-template-columns: 1fr; }
}

.tn-kart {
    background: var(--tn-beyaz);
    border: 1px solid var(--tn-cizgi);
    border-radius: var(--tn-yaricap-kart);
    padding: 28px;
    box-shadow: var(--tn-golge);
    display: flex;
    flex-direction: column;
}

.tn-kart h3 { margin-bottom: .35em; }
.tn-kart p { color: var(--tn-soluk); font-size: .97rem; }
.tn-kart p:last-child { margin-bottom: 0; }

a.tn-kart { color: inherit; transition: transform .14s ease, box-shadow .14s ease; }
a.tn-kart:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--tn-golge-yuksek); }

.tn-kart-baglanti {
    margin-top: auto;
    padding-top: 16px;
    color: var(--tn-mor);
    font-weight: 500;
    font-size: .93rem;
}

.tn-ikon {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: 16px;
    background: var(--tn-lavanta-acik);
    color: var(--tn-mor);
    font-size: 1.35rem;
    margin-bottom: 18px;
}

.tn-ikon-gul { background: var(--tn-gul); color: #8a4a4a; }

/* --- Gösterge şeridi ----------------------------------------------------- */

.tn-gostergeler {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    background: var(--tn-murekkep);
    color: var(--tn-beyaz);
    border-radius: var(--tn-yaricap-kart);
    padding: 32px;
}

.tn-gostergeler div { text-align: center; }
.tn-gostergeler strong { display: block; font-size: 1.7rem; font-weight: 500; }
.tn-gostergeler span { font-size: .88rem; opacity: .78; }

@media (max-width: 720px) { .tn-gostergeler { grid-template-columns: repeat(2, 1fr); } }

/* --- Metin içeriği (özellik, çözüm, yazı gövdesi) ------------------------ */

.tn-govde h2 { margin-top: 2em; }
.tn-govde h2:first-child { margin-top: 0; }
/* Hukuki metinler düzenleyiciden gelir; alt başlık (h3) de basılabilir. */
.tn-govde h3 { font-size: 1.05rem; margin: 1.4em 0 .4em; }
.tn-govde ul { margin: 0 0 1.4em; padding-left: 0; list-style: none; }

.tn-govde ul li {
    position: relative;
    padding-left: 30px;
    margin-bottom: .55em;
    color: var(--tn-soluk);
}

.tn-govde ul li::before {
    content: "";
    position: absolute;
    left: 6px; top: .62em;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--tn-lavanta);
    border: 2px solid var(--tn-mor);
}

.tn-tablo-sarici { overflow-x: auto; margin: 0 0 1.6em; }

.tn-tablo {
    width: 100%;
    border-collapse: collapse;
    background: var(--tn-beyaz);
    border-radius: var(--tn-yaricap-kart);
    overflow: hidden;
    font-size: .95rem;
    min-width: 520px;
}

.tn-tablo th, .tn-tablo td {
    text-align: right;
    padding: 12px 16px;
    border-bottom: 1px solid var(--tn-cizgi);
    vertical-align: top;
}

.tn-tablo th { background: var(--tn-lavanta-acik); font-weight: 500; }
.tn-tablo tr:last-child td { border-bottom: none; }

/* --- Kırıntı yolu -------------------------------------------------------- */

/* Kısayol `padding` kapsayıcının yan boşluğunu da siliyordu: kırıntı yolu
   telefonda ekranın sol kenarına yapışıyordu. Yalnız üst boşluk verilir. */
.tn-kirinti { font-size: .87rem; color: var(--tn-soluk); padding-top: 20px; }
.tn-kirinti a { color: var(--tn-soluk); }
.tn-kirinti span { margin: 0 6px; opacity: .5; }

/* --- Akordiyon (SSS) ----------------------------------------------------- */

.tn-sss { border-top: 1px solid var(--tn-cizgi); }

.tn-sss details {
    border-bottom: 1px solid var(--tn-cizgi);
    padding: 4px 0;
}

.tn-sss summary {
    cursor: pointer;
    list-style: none;
    padding: 18px 40px 18px 0;
    font-weight: 500;
    position: relative;
}

.tn-sss summary::-webkit-details-marker { display: none; }

.tn-sss summary::after {
    content: "+";
    position: absolute;
    /* Isaret sagda: sol kenar sorunun metniyle cakisiyordu (summary'nin dolgusu
       sagda 40px). */
    right: 8px; top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    color: var(--tn-mor);
    line-height: 1;
}

.tn-sss details[open] summary::after { content: "−"; }
.tn-sss details p { color: var(--tn-soluk); padding: 0 0 18px; margin: 0; font-size: .97rem; }

/* --- Sözlük -------------------------------------------------------------- */

.tn-terim {
    background: var(--tn-beyaz);
    border: 1px solid var(--tn-cizgi);
    border-radius: var(--tn-yaricap-kart);
    padding: 24px 28px;
    margin-bottom: 16px;
    scroll-margin-top: 90px;
}

.tn-terim h2 { font-size: 1.2rem; margin-bottom: .4em; }
.tn-terim p { color: var(--tn-soluk); font-size: .97rem; margin-bottom: 0; }

.tn-formul {
    display: inline-block;
    margin-top: 14px;
    background: var(--tn-lavanta-acik);
    color: var(--tn-mor);
    border-radius: 12px;
    padding: 8px 16px;
    font-family: Inconsolata, "Cascadia Mono", ui-monospace, monospace;
    font-size: .92rem;
}

.tn-harf-seridi { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }

/* --- Yazı listesi -------------------------------------------------------- */

.tn-yazi-ustbilgi { font-size: .87rem; color: var(--tn-soluk); margin-bottom: 10px; }
.tn-yazi-ustbilgi span { margin: 0 8px; opacity: .5; }

.tn-etiket {
    display: inline-block;
    background: var(--tn-lavanta);
    color: var(--tn-mor);
    border-radius: 999px;
    padding: 3px 12px;
    font-size: .78rem;
    font-weight: 500;
}

/* --- Kurum adresi kutusu ------------------------------------------------- */

.tn-kutu {
    background: var(--tn-beyaz);
    border: 1px solid var(--tn-cizgi);
    border-radius: var(--tn-yaricap-kart);
    padding: 28px;
    box-shadow: var(--tn-golge);
}

.tn-alan-grubu { display: flex; gap: 8px; margin-top: 14px; }

.tn-alan-grubu input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--tn-cizgi);
    border-radius: 14px;
    padding: 12px 16px;
    font: inherit;
    font-size: .95rem;
    color: var(--tn-murekkep);
    background: var(--tn-krem);
}

.tn-alan-grubu input:focus { outline: 2px solid var(--tn-mor); outline-offset: 1px; }
.tn-alan-eki { align-self: center; color: var(--tn-soluk); font-size: .9rem; white-space: nowrap; }
.tn-hata { color: #b02a37; font-size: .87rem; margin-top: 8px; }

/* E-posta alan adı önerisi (demo formu, site.js değil sayfa betiği kurar). */
.tn-oneri { font-size: .85rem; color: var(--tn-soluk); margin-top: 6px; }

.tn-oneri-dugme {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--tn-mor);
    text-decoration: underline;
    cursor: pointer;
}
.tn-gizli { display: none; }

/* --- Form (demo talebi) -------------------------------------------------- */

.tn-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.tn-form .tn-tam { grid-column: 1 / -1; }

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

.tn-form label {
    display: block;
    font-size: .9rem;
    font-weight: 500;
    margin-bottom: 6px;
}

.tn-form input[type="text"],
.tn-form input[type="email"],
.tn-form input[type="tel"],
.tn-form input[type="number"],
.tn-form select,
.tn-form textarea {
    width: 100%;
    border: 1px solid var(--tn-cizgi);
    border-radius: 14px;
    padding: 12px 16px;
    font: inherit;
    font-size: .95rem;
    color: var(--tn-murekkep);
    background: var(--tn-krem);
}

.tn-form input:focus,
.tn-form select:focus,
.tn-form textarea:focus { outline: 2px solid var(--tn-mor); outline-offset: 1px; }

.tn-form textarea { resize: vertical; min-height: 96px; }

.tn-form .field-validation-error,
.tn-form .tn-alan-hatasi { display: block; color: #b02a37; font-size: .85rem; margin-top: 6px; }

.tn-uyari {
    background: #fdeaec;
    border: 1px solid #f3c2c7;
    color: #842029;
    border-radius: 14px;
    padding: 14px 18px;
    font-size: .93rem;
}

/* --- Demo formu: aydınlatma, izinler, numara onayı ------------------------ */

.tn-izin-baslik { font-weight: 600; font-size: .95rem; margin-bottom: 8px; }

.tn-aydinlatma {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--tn-cizgi);
    border-radius: 14px;
    padding: 14px 18px;
    background: var(--tn-krem);
    font-size: .88rem;
    line-height: 1.55;
}

.tn-aydinlatma:focus { outline: 2px solid var(--tn-mor); outline-offset: 1px; }
/* Metin Sistem Ayarları → Hukuki Metinler'de düzenleniyor; düzenleyicinin
   üretebildiği bütün etiketler burada karşılanır (h1-h3, ol, tablo). */
.tn-aydinlatma h1, .tn-aydinlatma h2, .tn-aydinlatma h3 { font-size: .92rem; margin: 14px 0 4px; }
.tn-aydinlatma p { margin: 0 0 8px; }
.tn-aydinlatma ul, .tn-aydinlatma ol { margin: 0 0 8px; }
.tn-aydinlatma table { width: 100%; border-collapse: collapse; margin: 0 0 8px; font-size: .85rem; }
.tn-aydinlatma td, .tn-aydinlatma th { border-bottom: 1px solid var(--tn-cizgi); padding: 4px 6px; vertical-align: top; text-align: left; }
.tn-izin-aciklama p { margin: 0 0 8px; }
.tn-aydinlatma-son { text-align: center; color: var(--tn-soluk); font-size: .8rem; margin-top: 12px; }

.tn-izin-kutusu {
    border: 1px dashed var(--tn-cizgi);
    border-radius: 14px;
    padding: 14px 18px;
}

.tn-form label.tn-onay-satiri {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-weight: 400;
    font-size: .9rem;
    margin: 10px 0 0;
    cursor: pointer;
}

.tn-onay-satiri input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--tn-mor); }
.tn-onay-satiri input[type="checkbox"]:disabled + span { color: var(--tn-soluk); }

.tn-onay-penceresi {
    border: none;
    border-radius: var(--tn-yaricap-kart);
    box-shadow: var(--tn-golge-yuksek);
    padding: 24px;
    max-width: min(460px, calc(100vw - 32px));
    color: var(--tn-murekkep);
}

.tn-onay-penceresi::backdrop { background: rgba(39, 13, 91, .45); }
.tn-onay-penceresi h2 { font-size: 1.15rem; margin: 0 0 10px; }
.tn-onay-numara { font-size: 1.4rem; font-weight: 700; letter-spacing: .03em; margin: 8px 0; }
.tn-onay-penceresi .tn-dugmeler { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.tn-uyari ul { margin: 0; padding-left: 18px; list-style: disc; }
.tn-uyari li { color: inherit; padding-left: 0; }
.tn-uyari li::before { content: none; }

/* --- Çağrı bloğu --------------------------------------------------------- */

.tn-cagri {
    background: var(--tn-murekkep);
    color: var(--tn-beyaz);
    border-radius: 32px;
    padding: 56px 40px;
    text-align: center;
}

.tn-cagri h2 { color: var(--tn-beyaz); }
.tn-cagri p { color: rgba(255, 255, 255, .8); max-width: 560px; margin: 0 auto 28px; }
.tn .tn-cagri .tn-dugme-birincil { background: var(--tn-beyaz); color: var(--tn-murekkep); }
.tn .tn-cagri .tn-dugme-birincil:hover { background: var(--tn-lavanta); color: var(--tn-murekkep); }
.tn .tn-cagri .tn-dugme-cizgili { border-color: rgba(255, 255, 255, .45); color: var(--tn-beyaz); }
.tn .tn-cagri .tn-dugme-cizgili:hover { background: var(--tn-beyaz); color: var(--tn-murekkep); }

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

.tn-altbilgi {
    background: var(--tn-beyaz);
    border-top: 1px solid var(--tn-cizgi);
    padding: 56px 0 32px;
    font-size: .93rem;
}

.tn-altbilgi-izgara {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 32px;
}

@media (max-width: 860px) { .tn-altbilgi-izgara { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .tn-altbilgi-izgara { grid-template-columns: 1fr; } }

.tn-altbilgi h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--tn-soluk); }
.tn-altbilgi ul { list-style: none; margin: 0; padding: 0; }
.tn-altbilgi li { margin-bottom: 8px; }
.tn-altbilgi a { color: var(--tn-murekkep); }

.tn-altbilgi-son {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--tn-cizgi);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    color: var(--tn-soluk);
    font-size: .87rem;
}

/* --- Erişilebilirlik ----------------------------------------------------- */

.tn-atla {
    position: absolute;
    left: -9999px;
    background: var(--tn-murekkep);
    color: var(--tn-beyaz);
    padding: 12px 20px;
    border-radius: 0 0 14px 0;
    z-index: 100;
}

.tn-atla:focus { left: 0; top: 0; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .tn-dugme, a.tn-kart { transition: none; }
}

/* --- Kullanım kılavuzu (genel yüz) ---------------------------------------

   Kılavuz konuları tanıtım sitesinde de yayımlanıyor; rehber yazılarından
   farklı olarak numaralı adım, menü yolu rozeti, vurgu kutusu ve ekran
   görüntüsü taşıyorlar. Aşağıdakiler yalnızca o parçalar içindir.

   ⚠️ .tn a kuralı (0,1,1) düğme sınıflarını yendiği için buradaki bağlantı
   renkleri bilerek ezilmiyor; kutular <a> içermiyor.
   ------------------------------------------------------------------------- */

.tn-adimlar {
    counter-reset: tnadim;
    list-style: none;
    padding-left: 0;
    margin: 0 0 1.6em;
}

.tn-adimlar > li {
    counter-increment: tnadim;
    position: relative;
    padding-left: 46px;
    margin-bottom: 1.1em;
    color: var(--tn-murekkep);
}

.tn-adimlar > li::before {
    content: counter(tnadim);
    position: absolute;
    left: 0;
    top: -2px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--tn-mor);
    color: #fff;
    font-size: .85rem;
    font-weight: 500;
}

.tn-adim-metin { display: block; }

.tn-adim-yol {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--tn-lavanta-acik);
    border: 1px solid var(--tn-lavanta);
    font-size: .82rem;
    color: var(--tn-murekkep);
}

.tn-adim-aciklama {
    display: block;
    margin-top: 4px;
    font-size: .92rem;
    color: var(--tn-soluk);
}

/* Vurgu kutuları. Renk yalnızca sol şeritte: gövde metni her zaman okunur
   kalsın, koyu zeminli kutular sayfanın ritmini bozmasın. */
.tn-not {
    border: 1px solid var(--tn-cizgi);
    border-left: 3px solid var(--tn-mor);
    border-radius: 14px;
    background: var(--tn-beyaz);
    padding: 16px 20px;
    margin: 1.4em 0;
    font-size: .95rem;
}

.tn-not p { margin: 0; }
.tn-not p + ul { margin-top: .5em; }
.tn-not ul { margin-bottom: 0; }

.tn-not-baslik {
    font-weight: 500;
    color: var(--tn-murekkep);
    margin-bottom: .3em !important;
}

.tn-not-ipucu { border-left-color: #2f9e44; }
.tn-not-ipucu .tn-not-baslik { color: #2f7a3d; }

.tn-not-uyari { border-left-color: #c92a2a; }
.tn-not-uyari .tn-not-baslik { color: #a32020; }

.tn-not-ornek { border-left-color: #1c7ed6; }
.tn-not-ornek .tn-not-baslik { color: #1864ab; }

.tn-not-bilgi { border-left-color: #e8590c; }
.tn-not-bilgi .tn-not-baslik { color: #c24a0a; }

/* Ekran görüntüsü; dosya yoksa "ekran haritası" şeridi çizilir. */
.tn-ekran {
    margin: 1.6em 0;
    border: 1px solid var(--tn-cizgi);
    border-radius: var(--tn-yaricap-kart);
    overflow: hidden;
    background: var(--tn-beyaz);
}

.tn-ekran img {
    display: block;
    width: 100%;
    height: auto;
}

.tn-ekran-yok {
    padding: 28px 18px;
    text-align: center;
    color: var(--tn-soluk);
    font-size: .9rem;
    background: repeating-linear-gradient(
        45deg,
        var(--tn-lavanta-acik),
        var(--tn-lavanta-acik) 10px,
        transparent 10px,
        transparent 20px);
}

.tn-ekran figcaption {
    padding: 12px 18px;
    border-top: 1px solid var(--tn-cizgi);
    font-size: .88rem;
    color: var(--tn-soluk);
}

.tn-ekran-isaretler {
    margin: .6em 0 0;
    padding-left: 20px;
    font-size: .86rem;
}

.tn-ekran-isaretler li { margin-bottom: 4px; }

/* Kılavuz konusunun anlatım videosu (genel yüz). */
.tn-video {
    margin: 0;
    border: 1px solid var(--tn-cizgi);
    border-radius: var(--tn-yaricap-kart);
    overflow: hidden;
    background: var(--tn-beyaz);
}

/* 16:9: iframe'e yükseklik yazmadan kutuya oturur. */
.tn-video-cerceve {
    position: relative;
    padding-top: 56.25%;
    background: #000;
}

.tn-video-cerceve iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.tn-video figcaption {
    padding: 12px 18px;
    border-top: 1px solid var(--tn-cizgi);
    font-size: .88rem;
    color: var(--tn-soluk);
}

/* Kılavuz arama kutusu (genel yüz). */
.tn-arama {
    display: flex;
    gap: 10px;
    margin: 18px 0 22px;
    max-width: 560px;
}

.tn-orta .tn-arama {
    margin-left: auto;
    margin-right: auto;
}

.tn-arama input {
    flex: 1;
    min-width: 0;
    padding: 12px 16px;
    border: 1px solid var(--tn-cizgi);
    border-radius: 999px;
    background: var(--tn-beyaz);
    color: var(--tn-murekkep);
    font: inherit;
    font-size: .95rem;
}

.tn-arama input:focus {
    outline: 2px solid var(--tn-mor);
    outline-offset: 1px;
    border-color: transparent;
}

.tn-arama input::placeholder {
    color: var(--tn-soluk);
}

.tn-arama .tn-dugme {
    flex: 0 0 auto;
}

@media (max-width: 520px) {
    .tn-arama { flex-direction: column; }
    .tn-arama .tn-dugme { width: 100%; }
}

/* --- Modül sayfası: zikzak bölümler (28.09.2026) --------------------------
   Görselli bölüm metin + ekran görüntüsü yan yana; her ikinci görselli bölümde
   yer değiştirir. Telefonda görsel metnin altına iner. */

.tn-capa { scroll-margin-top: 90px; }

.tn-bolum-cipleri {
    list-style: none;
    padding: 0;
    margin: 28px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tn .tn-bolum-cipleri a {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--tn-beyaz);
    border: 1px solid var(--tn-cizgi);
    font-size: .88rem;
    color: var(--tn-murekkep);
}

.tn .tn-bolum-cipleri a:hover { border-color: var(--tn-mor); color: var(--tn-mor); text-decoration: none; }

.tn-zikzak {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 56px;
    align-items: center;
    padding-top: 44px;
    padding-bottom: 44px;
}

.tn-zikzak > * { min-width: 0; }
.tn-zikzak-ters > .tn-ekran { order: -1; }
.tn-zikzak-duz { padding-top: 28px; padding-bottom: 28px; }

.tn-ekran { margin: 0; }

.tn-ekran img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    border: 1px solid var(--tn-cizgi);
    box-shadow: var(--tn-golge-yuksek);
    background: var(--tn-beyaz);
}

.tn-ekran figcaption { font-size: .85rem; color: var(--tn-soluk); margin-top: 12px; text-align: center; }

@media (max-width: 900px) {
    .tn-zikzak { grid-template-columns: 1fr; gap: 24px; padding-top: 28px; padding-bottom: 28px; }
    .tn-zikzak-ters > .tn-ekran { order: 0; }
}

.tn-grup-baslik { font-size: 1.35rem; margin-bottom: 18px; }

/* --- Blog ------------------------------------------------------------------ */

.tn-blog-kategoriler {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 28px;
}

.tn .tn-blog-kategoriler a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 999px;
    background: var(--tn-beyaz);
    border: 1px solid var(--tn-cizgi);
    color: var(--tn-murekkep);
    font-size: .9rem;
}

.tn .tn-blog-kategoriler a:hover { border-color: var(--tn-mor); text-decoration: none; }
.tn .tn-blog-kategoriler a[aria-current="page"] { background: var(--tn-murekkep); border-color: var(--tn-murekkep); color: var(--tn-beyaz); }

.tn-blog-one-cikan {
    display: grid !important;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: center;
    padding: 36px;
}

.tn-blog-one-cikan > * { min-width: 0; }
.tn-blog-one-cikan h2 { font-size: 1.6rem; margin: .2em 0 .4em; }

.tn-blog-basliklar {
    list-style: none;
    margin: 0;
    padding: 20px 24px;
    border-radius: 16px;
    background: var(--tn-lavanta-acik);
    font-size: .92rem;
}

.tn-blog-basliklar li { padding: 6px 0; border-bottom: 1px solid rgba(39, 13, 91, .08); }
.tn-blog-basliklar li:last-child { border-bottom: 0; }

.tn .tn-kart .tn-kart-baslik { font-size: 1.15rem; line-height: 1.35; margin: .1em 0 .4em; }

/* Üst bilgideki ayraç span'ları soluk; kategori etiketi de span olduğu için
   aynı kurala takılıp soluk ve kaymış çıkıyordu. */
.tn-yazi-ustbilgi .tn-etiket { margin: 0; opacity: 1; }

@media (max-width: 900px) {
    .tn-blog-one-cikan { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
}

@media (max-width: 640px) {
    /* Çipler telefonda tek satırda yana kayar; sayfanın kendisi kaymaz. */
    .tn-blog-kategoriler { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 6px; }
    .tn .tn-blog-kategoriler a { flex: 0 0 auto; }
}

/* --- Fiyat hesaplayıcı (28.09.2026) ------------------------------------------
   Solda öğrenci sayısı, paket/modül seçimi; sağda yapışkan özet. Telefonda
   özet seçimin altına iner. Fiyat metinleri sunucudan gelen tabloyla tarayıcıda
   hesaplanır; ödenecek tutar satın alma formunda sunucuda yeniden hesaplanır. */

.tn-hesap {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.tn-hesap > * { min-width: 0; }

.tn-hesap-ayar {
    background: var(--tn-beyaz);
    border: 1px solid var(--tn-cizgi);
    border-radius: var(--tn-yaricap-kart);
    padding: 20px 24px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 28px;
    align-items: center;
}

.tn-hesap-ayar label { display: flex; flex-direction: column; gap: 2px; }

.tn-hesap-ogrenci { display: flex; align-items: center; gap: 14px; flex: 1 1 280px; min-width: 0; }

.tn-hesap-ogrenci input[type="number"] {
    width: 110px;
    padding: 10px 12px;
    border: 1px solid var(--tn-cizgi);
    border-radius: 12px;
    font: inherit;
    font-size: 1.1rem;
    color: var(--tn-murekkep);
}

.tn-hesap-ogrenci input[type="range"] { flex: 1 1 auto; min-width: 0; accent-color: var(--tn-mor); }

.tn-sekmeler {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--tn-lavanta-acik);
    border-radius: 999px;
    margin-bottom: 18px;
}

.tn-sekmeler button {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: .95rem;
    color: var(--tn-murekkep);
    padding: 8px 18px;
    border-radius: 999px;
    cursor: pointer;
}

.tn-sekmeler button.aktif { background: var(--tn-beyaz); box-shadow: var(--tn-golge); font-weight: 500; }
.tn-sekmeler-kucuk { margin-bottom: 0; }
.tn-sekmeler-kucuk button { padding: 6px 14px; font-size: .9rem; }

.tn-paketler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.tn-paket {
    position: relative;
    text-align: left;
    font: inherit;
    color: var(--tn-murekkep);
    background: var(--tn-beyaz);
    border: 2px solid var(--tn-cizgi);
    border-radius: var(--tn-yaricap-kart);
    padding: 20px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.tn-paket:hover { border-color: var(--tn-lavanta); box-shadow: var(--tn-golge); }
.tn-paket.secili { border-color: var(--tn-mor); box-shadow: var(--tn-golge-yuksek); }

.tn-paket-rozet {
    position: absolute;
    top: -11px; right: 16px;
    background: var(--tn-mor);
    color: var(--tn-beyaz);
    font-size: .74rem;
    padding: 3px 10px;
    border-radius: 999px;
}

.tn-paket-ust { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; }
.tn-paket-kime { color: var(--tn-soluk); font-size: .9rem; }
.tn-paket-fiyat { font-size: 1.35rem; font-weight: 500; margin-top: 6px; }
.tn-paket-moduller { color: var(--tn-soluk); font-size: .82rem; }

.tn-modul-listesi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.tn-modul-secim {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--tn-beyaz);
    border: 1px solid var(--tn-cizgi);
    border-radius: 14px;
    padding: 10px 12px;
    cursor: pointer;
    min-width: 0;
}

.tn-modul-secim:has(input:checked) { border-color: var(--tn-mor); background: var(--tn-lavanta-acik); }
.tn-modul-secim.zorunlu { cursor: default; }
.tn-modul-secim input { accent-color: var(--tn-mor); width: 18px; height: 18px; flex: 0 0 auto; }
.tn-modul-ad { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; font-size: .94rem; }
.tn-modul-ad small { color: var(--tn-soluk); font-size: .76rem; }
.tn-modul-fiyat { font-size: .88rem; color: var(--tn-soluk); white-space: nowrap; }

.tn-hesap-ozet {
    position: sticky;
    top: 92px;
    background: var(--tn-beyaz);
    border: 1px solid var(--tn-cizgi);
    border-radius: var(--tn-yaricap-kart);
    box-shadow: var(--tn-golge-yuksek);
    padding: 24px;
}

.tn-ozet-satirlar { list-style: none; margin: 12px 0; padding: 0; font-size: .92rem; max-height: 280px; overflow-y: auto; }
.tn-ozet-satirlar li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--tn-cizgi); }
.tn-ozet-satirlar li span:last-child { white-space: nowrap; color: var(--tn-soluk); }

.tn-ozet-toplam { margin: 0 0 8px; }
.tn-ozet-toplam div { display: flex; justify-content: space-between; padding: 4px 0; font-size: .95rem; }
.tn-ozet-toplam dt { color: var(--tn-soluk); font-weight: 400; }
.tn-ozet-toplam dd { margin: 0; }
.tn-ozet-toplam .genel { border-top: 2px solid var(--tn-murekkep); margin-top: 6px; padding-top: 10px; font-size: 1.25rem; font-weight: 500; }
.tn-ozet-toplam .genel dt { color: var(--tn-murekkep); }

.tn .tn-genis { display: block; width: 100%; text-align: center; margin-top: 16px; }

.tn-fiyat-tablosu th[scope="row"] { font-weight: 400; white-space: nowrap; }
.tn-fiyat-tablosu td { white-space: nowrap; text-align: right; }
.tn-fiyat-tablosu thead th:not(:first-child) { text-align: right; }

@media (max-width: 900px) {
    .tn-hesap { grid-template-columns: minmax(0, 1fr); }
    .tn-hesap-ozet { position: static; }
}

@media (max-width: 640px) {
    .tn-paketler, .tn-modul-listesi { grid-template-columns: minmax(0, 1fr); }
    .tn-hesap-ayar { padding: 16px; }
    .tn-sekmeler { display: flex; }
    .tn-sekmeler button { flex: 1 1 0; padding: 8px 10px; font-size: .9rem; }
}

/* --- Satın alma formu (28.09.2026) --------------------------------------------- */

.tn .tn-kutu .tn-form-baslik { font-size: 1.1rem; margin: 28px 0 12px; }
.tn-kutu form > .tn-form-baslik:first-of-type { margin-top: 4px; }

.tn-alan-eki {
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    color: var(--tn-soluk);
    white-space: nowrap;
}

.tn-metin-kutusu { margin: 8px 0 4px; }
.tn-metin-kutusu summary { cursor: pointer; font-weight: 500; padding: 6px 0; }
.tn-metin-kutusu .tn-aydinlatma { margin-top: 8px; }

.tn-kod-kutusu { font-size: 1.6rem; letter-spacing: .4em; max-width: 220px; text-align: center; }

.tn-bilgi {
    background: var(--tn-lavanta-acik);
    border-radius: 14px;
    padding: 10px 14px;
    color: var(--tn-mor);
}

.tn-banka { padding: 10px 0; border-bottom: 1px solid var(--tn-cizgi); }
.tn-iban { font-family: "Inconsolata", monospace; font-size: 1.05rem; letter-spacing: .03em; margin-top: 2px; word-break: break-all; }

@media (max-width: 520px) {
    .tn-alan-eki { flex: 1 1 100%; padding: 0; font-size: .9rem; }
}

/* hidden özniteliği .tn-dugme gibi display veren sınıflara yenilmesin
   (Kurumsal kademede "Satın al" gizlenmiyordu, 28.09). */
.tn [hidden] { display: none !important; }