/*
 * Sihirli Dikkat — tanıtım sitesinin kendi CSS'i.
 *
 * KURAL (panelinkiyle aynı, `public/panel/css/sd-panel.css`): Metronic'in
 * `styles.css`'i purge edilmiş bir Tailwind çıktısıdır ve YENİDEN DERLENEMEZ.
 * Orada olmayan bir yardımcı sınıf yazmak sessizce hiçbir şey yapmaz — sayfa
 * bozuk görünür, derleme yeşil kalır. Bu yüzden tanıtım şablonlarında ham
 * Tailwind yardımcı sınıfı HİÇ kullanılmaz; yalnızca (a) varlığı doğrulanmış
 * `kt-*` bileşenleri (kt-btn, kt-card, kt-input, kt-textarea, kt-form-label,
 * kt-alert…) ve (b) bu dosyadaki `sd-tanitim-*` kuralları geçer.
 * `TanitimSitesiTest::test_tanitim_bladelerinde_uydurma_sinif_yok` bunu zorlar.
 *
 * NEDEN AYRI DOSYA, NEDEN `sd-panel.css`'e YAZILMADI: o dosya yönetim
 * panelinin dosyası ve başka bir ajan orada çalışıyor; ayrıca tanıtım sitesi
 * bir panel DEĞİL — kahraman bölümü, geniş tipografi ve bölüm ritmi gerekir,
 * bunların paneldeki hiçbir ekranda karşılığı yok.
 *
 * Renkler giriş ekranıyla (frontend/src/sayfalar/GirisSayfasi.tsx) aynı
 * paletten seçildi: beyaz zemin, zinc-950 başlık, zinc-500 gövde, zinc-200
 * çizgi, blue-600 vurgu. Tek istisna "Etkinliklerden" bölümü: modüllerin
 * kendi arayüzü koyu lacivert/altın olduğu için o bölümün zemini de koyudur —
 * ekran görüntüleri beyaz bir kutunun içinde yamalı duruyordu.
 */

.sd-tanitim {
    --sd-t-zemin: #ffffff;
    --sd-t-yumusak: #fafafa;
    --sd-t-cizgi: #e4e4e7;
    --sd-t-metin: #09090b;
    --sd-t-ikincil: #52525b;
    --sd-t-soluk: #71717a;
    --sd-t-vurgu: #2563eb;
    --sd-t-vurgu-koyu: #1d4ed8;
    --sd-t-vurgu-zemin: #eff6ff;
    --sd-t-koyu: #101a3d;
    --sd-t-koyu-cizgi: #2a3663;
    --sd-t-altin: #e3b53f;

    /* Bölüm ritmi tek yerden. Telefonda dar, masaüstünde geniş. */
    --sd-t-bolum-bosluk: 64px;
    --sd-t-kap: 1120px;

    margin: 0;
    background: var(--sd-t-zemin);
    color: var(--sd-t-metin);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;

    /* Telefonda yatay kaydırmayı kaynağında keser: uzun bir başlık ya da
       taşan bir kutu, sayfayı sağa sola oynatmasın. */
    overflow-x: hidden;
}

@media (min-width: 768px) {
    .sd-tanitim {
        --sd-t-bolum-bosluk: 96px;
    }
}

/* Bağlantı demirlerine (#talep) giderken başlık çubuğunun altında kalmasın. */
.sd-tanitim [id] {
    scroll-margin-top: 84px;
}

/* --------------------------------------------------------------- iskelet */

.sd-tanitim-kap {
    width: 100%;
    max-width: var(--sd-t-kap);
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.sd-tanitim-bolum {
    padding: var(--sd-t-bolum-bosluk) 0;
}

.sd-tanitim-bolum-yumusak {
    background: var(--sd-t-yumusak);
    border-top: 1px solid var(--sd-t-cizgi);
    border-bottom: 1px solid var(--sd-t-cizgi);
}

.sd-tanitim-bolum-koyu {
    background: var(--sd-t-koyu);
    color: #e7ecff;
}

/* Klavyeyle gezen için ilk durak: uzun menüyü atlayıp içeriğe git. */
.sd-tanitim-atla {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 50;
    padding: 10px 16px;
    background: var(--sd-t-metin);
    color: #ffffff;
    border-radius: 0 0 8px 0;
    text-decoration: none;
}

.sd-tanitim-atla:focus {
    left: 0;
}

/* ------------------------------------------------------------ üst çubuk */

.sd-tanitim-ust {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgb(255 255 255 / 92%);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--sd-t-cizgi);
}

.sd-tanitim-ust-ic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
}

.sd-tanitim-marka {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--sd-t-metin);
    text-decoration: none;
    white-space: nowrap;
}

.sd-tanitim-marka-isaret {
    font-size: 1.25rem;
    line-height: 1;
}

.sd-tanitim-menu {
    display: none;
    align-items: center;
    gap: 24px;
}

.sd-tanitim-menu-bag {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--sd-t-ikincil);
    text-decoration: none;
}

.sd-tanitim-menu-bag:hover,
.sd-tanitim-menu-bag-aktif {
    color: var(--sd-t-vurgu);
}

.sd-tanitim-ust-eylem {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (min-width: 900px) {
    .sd-tanitim-menu {
        display: flex;
    }
}

/* -------------------------------------------------------------- kahraman */

.sd-tanitim-kahraman {
    position: relative;
    padding: 56px 0 var(--sd-t-bolum-bosluk);
    background:
        radial-gradient(900px 380px at 50% -120px, var(--sd-t-vurgu-zemin), transparent 70%),
        var(--sd-t-zemin);
    border-bottom: 1px solid var(--sd-t-cizgi);
}

/*
 * Kahraman iki sütun: solda metin, sağda ürünün kendi ekranı.
 *
 * Tek sütunlu ilk sürümde 1440 pikselde sağ yarı tamamen boş kalıyordu ve
 * sayfa "yazı yığını" gibi duruyordu. Sağdaki sütun 960 pikselin ALTINDA
 * metnin altına düşer, telefonda da öyle görünür.
 */
.sd-tanitim-kahraman-izgara {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}

@media (min-width: 960px) {
    .sd-tanitim-kahraman-izgara {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: 56px;
    }
}

.sd-tanitim-kahraman-ic {
    max-width: 620px;
    min-width: 0;
}

/* Ürün ekranının çerçevesi. Modüllerin kendi arayüzü koyu lacivert olduğu
   için çerçeve de koyu: beyaz bir kutunun içinde görsel yamalı duruyordu. */
.sd-tanitim-kahraman-cerceve {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--sd-t-koyu-cizgi);
    border-radius: 16px;
    background: var(--sd-t-koyu);
    box-shadow: 0 24px 48px -24px rgb(16 26 61 / 45%);
}

.sd-tanitim-kahraman-gorsel {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 8 / 5;
    object-fit: cover;
}

/* Kahramanın sağ sütunundaki kutu ızgara satırının boyuna UZAMAZ.
   `.sd-tanitim-kutu`'nun `height: 100%`i orada kutunun altında kocaman bir
   boşluk bırakıyordu (bayilik sayfası). */
.sd-tanitim-kahraman-izgara .sd-tanitim-kutu {
    height: auto;
}

.sd-tanitim-kahraman-altyazi {
    display: block;
    padding: 12px 16px;
    border-top: 1px solid var(--sd-t-koyu-cizgi);
    font-size: 0.8125rem;
    color: #b9c3e6;
}

/* Kahramandaki çağrı düğmeleri. Metronic'in `kt-btn-lg`'si 40 piksel — panel
   için doğru, bir satış sayfasının ana çağrısı için küçük. Yükseklik ve
   yazı ölçüsü burada büyütülür; renk/kenar/odak davranışı `kt-btn`den gelir. */
.sd-tanitim-dugme-buyuk {
    height: 46px;
    padding-inline: 22px;
    font-size: 0.9375rem;
    font-weight: 500;
}

.sd-tanitim-etiket {
    display: inline-block;
    margin-bottom: 16px;
    padding: 5px 12px;
    border: 1px solid var(--sd-t-cizgi);
    border-radius: 999px;
    background: var(--sd-t-zemin);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--sd-t-ikincil);
}

.sd-tanitim-h1 {
    margin: 0 0 20px;
    font-size: clamp(2rem, 6.2vw, 3.25rem);
    line-height: 1.12;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--sd-t-metin);

    /* Uzun Türkçe bileşik kelimeler dar ekranda kutuyu taşırmasın. */
    overflow-wrap: break-word;
}

.sd-tanitim-h2 {
    margin: 0 0 12px;
    font-size: clamp(1.5rem, 3.6vw, 2.125rem);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--sd-t-metin);
}

.sd-tanitim-h3 {
    margin: 0 0 8px;
    font-size: 1.0625rem;
    line-height: 1.4;
    font-weight: 600;
    color: var(--sd-t-metin);
}

.sd-tanitim-lead {
    margin: 0;
    font-size: clamp(1.0625rem, 2.2vw, 1.1875rem);
    line-height: 1.65;
    color: var(--sd-t-ikincil);
}

.sd-tanitim-metin {
    margin: 0;
    color: var(--sd-t-ikincil);
}

.sd-tanitim-eylemler {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

/* Rozet şeridi: kahramanın altındaki dört sayı. */
.sd-tanitim-rozetler {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 36px 0 0;
    padding: 0;
    list-style: none;
}

.sd-tanitim-rozet {
    padding: 14px 16px;
    border: 1px solid var(--sd-t-cizgi);
    border-radius: 12px;
    background: var(--sd-t-zemin);
}

.sd-tanitim-rozet-sayi {
    display: block;
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--sd-t-metin);
}

.sd-tanitim-rozet-ad {
    display: block;
    font-size: 0.8125rem;
    color: var(--sd-t-soluk);
}

@media (min-width: 768px) {
    .sd-tanitim-rozetler {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------- bölüm başlığı */

.sd-tanitim-bolum-basi {
    max-width: 720px;
    margin-bottom: 36px;
}

.sd-tanitim-bolum-koyu .sd-tanitim-h2,
.sd-tanitim-bolum-koyu .sd-tanitim-h3 {
    color: #ffffff;
}

.sd-tanitim-bolum-koyu .sd-tanitim-lead,
.sd-tanitim-bolum-koyu .sd-tanitim-metin {
    color: #b9c3e6;
}

.sd-tanitim-bolum-koyu .sd-tanitim-etiket {
    background: transparent;
    border-color: var(--sd-t-koyu-cizgi);
    color: var(--sd-t-altin);
}

/* ---------------------------------------------------------------- ızgara */

.sd-tanitim-izgara {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

@media (min-width: 640px) {
    .sd-tanitim-izgara-2,
    .sd-tanitim-izgara-3,
    .sd-tanitim-izgara-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 960px) {
    .sd-tanitim-izgara-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sd-tanitim-izgara-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* İki sütunlu anlatım (metin + kutu) */
.sd-tanitim-ikili {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

@media (min-width: 960px) {
    .sd-tanitim-ikili {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 56px;
    }
}

/* ----------------------------------------------------------------- kutu */

.sd-tanitim-kutu {
    padding: 24px;
    border: 1px solid var(--sd-t-cizgi);
    border-radius: 14px;
    background: var(--sd-t-zemin);
    height: 100%;
    box-sizing: border-box;
}

.sd-tanitim-bolum-koyu .sd-tanitim-kutu {
    border-color: var(--sd-t-koyu-cizgi);
    background: rgb(255 255 255 / 4%);
}

.sd-tanitim-kutu-simge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 16px;
    border: 1px solid var(--sd-t-cizgi);
    border-radius: 10px;
    background: var(--sd-t-zemin);
    color: var(--sd-t-vurgu);
}

/* Numaralı adım (Ölç → Yönlendir → Takip et) */
.sd-tanitim-adim-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: var(--sd-t-vurgu);
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 600;
}

/* ------------------------------------------------------------ liste türleri */

.sd-tanitim-liste {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sd-tanitim-liste-oge {
    position: relative;
    padding-left: 26px;
    color: var(--sd-t-ikincil);
}

/* Onay işareti: ikon yazı tipi yüklemeden (keenicons 232 KB CSS + 421 KB font)
   aynı işi gören saf CSS çizim. Giriş ekranı da simgelerini bu gerekçeyle
   gömülü SVG yapmıştı. */
.sd-tanitim-liste-oge::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 8px;
    width: 6px;
    height: 11px;
    border: solid var(--sd-t-vurgu);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.sd-tanitim-bolum-koyu .sd-tanitim-liste-oge {
    color: #b9c3e6;
}

.sd-tanitim-bolum-koyu .sd-tanitim-liste-oge::before {
    border-color: var(--sd-t-altin);
}

/* Alan listesi: ad + o alandaki etkinlik sayısı */
.sd-tanitim-alanlar {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

@media (min-width: 640px) {
    .sd-tanitim-alanlar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.sd-tanitim-alan {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--sd-t-cizgi);
    border-radius: 10px;
    background: var(--sd-t-zemin);
}

.sd-tanitim-alan-ad {
    font-weight: 500;
    color: var(--sd-t-metin);
}

.sd-tanitim-alan-grup {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--sd-t-soluk);
}

.sd-tanitim-alan-sayi {
    flex-shrink: 0;
    font-size: 0.8125rem;
    color: var(--sd-t-soluk);
    white-space: nowrap;
}

/* ---------------------------------------------------------------- vitrin */

.sd-tanitim-vitrin {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 640px) {
    .sd-tanitim-vitrin {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 960px) {
    .sd-tanitim-vitrin {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.sd-tanitim-vitrin-oge {
    overflow: hidden;
    border: 1px solid var(--sd-t-koyu-cizgi);
    border-radius: 12px;
    background: rgb(255 255 255 / 4%);
}

.sd-tanitim-vitrin-gorsel {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 8 / 5;
    object-fit: cover;
    background: #0a1130;
}

.sd-tanitim-vitrin-ad {
    display: block;
    padding: 12px 14px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #ffffff;
}

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

.sd-tanitim-sss {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 820px;
}

.sd-tanitim-sss-oge {
    border: 1px solid var(--sd-t-cizgi);
    border-radius: 12px;
    background: var(--sd-t-zemin);
}

.sd-tanitim-sss-baslik {
    padding: 16px 18px;
    font-weight: 500;
    color: var(--sd-t-metin);
    cursor: pointer;
    list-style: none;
}

/* Safari/Chrome'un varsayılan üçgeni; kendi işaretimiz aşağıda. */
.sd-tanitim-sss-baslik::-webkit-details-marker {
    display: none;
}

.sd-tanitim-sss-baslik::after {
    content: "+";
    float: right;
    margin-left: 12px;
    color: var(--sd-t-soluk);
    font-weight: 400;
}

.sd-tanitim-sss-oge[open] .sd-tanitim-sss-baslik::after {
    content: "−";
}

.sd-tanitim-sss-govde {
    margin: 0;
    padding: 0 18px 18px;
    color: var(--sd-t-ikincil);
}

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

.sd-tanitim-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

@media (min-width: 640px) {
    .sd-tanitim-form-ikili {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sd-tanitim-form-tam {
        grid-column: 1 / -1;
    }
}

.sd-tanitim-alan-kutusu {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/*
 * Bal küpü. Görünmez OLMALI ama `display:none` YETMEZ: bazı botlar gizli
 * alanları atlamak için tam olarak `display:none`/`visibility:hidden`
 * arıyor. Kutu bu yüzden ekranın dışına taşınır; ayrıca şablonda
 * `tabindex="-1"` ve `aria-hidden="true"` var, yani ne klavye ne ekran
 * okuyucu ona uğrar — insanın doldurması mümkün değildir.
 */
.sd-tanitim-balkupu {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.sd-tanitim-form-not {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--sd-t-soluk);
}

.sd-tanitim-hata {
    margin: 0;
    font-size: 0.8125rem;
    color: #dc2626;
}

/* ------------------------------------------------------------ geçiş şeridi */

.sd-tanitim-serit {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--sd-t-cizgi);
    border-radius: 14px;
    background: var(--sd-t-vurgu-zemin);
}

@media (min-width: 768px) {
    .sd-tanitim-serit {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 28px 32px;
    }
}

.sd-tanitim-serit-metin {
    min-width: 0;
}

/* ------------------------------------------------------------------- alt */

.sd-tanitim-alt {
    padding: 40px 0;
    border-top: 1px solid var(--sd-t-cizgi);
    background: var(--sd-t-yumusak);
}

.sd-tanitim-alt-ic {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (min-width: 768px) {
    .sd-tanitim-alt-ic {
        flex-direction: row;
        justify-content: space-between;
        gap: 48px;
    }
}

.sd-tanitim-alt-bag {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sd-tanitim-alt-bag a {
    font-size: 0.875rem;
    color: var(--sd-t-ikincil);
    text-decoration: none;
}

.sd-tanitim-alt-bag a:hover {
    color: var(--sd-t-vurgu);
}

.sd-tanitim-kucuk {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--sd-t-soluk);
}

.sd-tanitim-iletisim {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.875rem;
    color: var(--sd-t-ikincil);
}

.sd-tanitim-iletisim a {
    color: var(--sd-t-ikincil);
    text-decoration: none;
}

.sd-tanitim-iletisim a:hover {
    color: var(--sd-t-vurgu);
}

/* ------------------------------------------------------------ küçük şeyler */

.sd-tanitim-vurgu-metin {
    color: var(--sd-t-metin);
    font-weight: 500;
}

.sd-tanitim-ayrac {
    margin-top: 28px;
}

.sd-tanitim-ustluk {
    margin-bottom: 20px;
}

/* Tek kutuluk bölümler (Fiyat, "Neyi söylemiyoruz"). 1440 pikselde kutu
   sayfanın tamamına yayılınca içindeki üç satırlık metin kaybolmuş gibi
   duruyordu; okuma genişliği sınırlanır. */
.sd-tanitim-dar {
    max-width: 820px;
}