/* ==========================================================================
   ALTUNAKAR — KURUMSAL ANA SAYFA TASARIMI (2026-08-17)

   NEDEN: Ana sayfa yıllar içinde 18 bölüme çıktı, her bölüm kendi rengini,
   kendi boşluğunu, kendi kart reçetesini uydurdu. Kullanıcının tarifi:
   "çorba olmuş". Bu dosya, Neo Servis sitesinde işe yarayan tek-sistem
   yaklaşımını Altunakar'a taşıyor.

   İLKELER (Neo'dan devralındı)
   1. Tek aksan ailesi. İkinci bir sıcak renk yok.
   2. Tek kart reçetesi — hizmet, ürün, yorum, belge hepsi aynı kenarlık,
      aynı yarıçap, aynı gölge, aynı hover.
   3. Tek bölüm ritmi (--kt-bolum-y). Hiçbir bölüm kendi boşluğunu uydurmaz.
   4. Tek başlık kalıbı: etiket → h2 → giriş.
   5. Üç gölge, beş yarıçap, dört yüzey. Dışına çıkılmaz.

   ÇAKIŞMA: Sayfada Bootstrap + css/main.css hâlâ yüklü (navbar, sihirbaz,
   mega menü onlara bağlı). Çakışmayı önlemek için BÜTÜN sınıflar "kt-" ön
   ekiyle yazıldı ve değişkenler .kt gövde sınıfına kapatıldı. main.css'teki
   hiçbir kural bu dosyadan etkilenmez; bu dosyadaki hiçbir kural da eski
   sayfaya sızmaz.

   GERİ ALMA: index-eski.php dosyasını index.php'nin üstüne kopyalamak
   yeterli — bu dosya o sayfada hiç yüklenmiyor.
   ========================================================================== */

/* == 01 Değişkenler ======================================================= */

body.kt {
    --kt-aksan-950: #05203f;
    --kt-aksan-900: #072a52;
    --kt-aksan-800: #093868;
    --kt-aksan-700: #0a4a92;
    --kt-aksan-600: #0a5ecb;
    --kt-aksan-500: #2b7ae4;
    --kt-aksan-400: #63a0ee;
    --kt-aksan-300: #9cc4f6;
    --kt-aksan-200: #cbe0fb;
    --kt-aksan-100: #e4eefd;
    --kt-aksan-50:  #f2f7ff;
    --kt-aksan-rgb: 10, 94, 203;

    --kt-siyah:   #08080a;
    --kt-yuzey-1: #ffffff;
    --kt-yuzey-2: #f6f6f8;
    --kt-yuzey-3: #eeeef1;

    --kt-murekkep: #101014;
    --kt-sis:      #5f6169;
    --kt-sis-2:    #8b8d95;
    --kt-ters:     #ffffff;
    --kt-ters-sis: rgba(255, 255, 255, .62);

    --kt-cizgi:      #e3e4e8;
    --kt-cizgi-koyu: #d2d4da;
    --kt-cizgi-ters: rgba(255, 255, 255, .14);

    --kt-yesil:   #106b45;
    --kt-yesil-z: #e8f5ee;

    --kt-kap: 1180px;
    --kt-yan: clamp(18px, 4vw, 30px);
    --kt-bolum-y: clamp(52px, 5.4vw, 84px);
    --kt-bosluk: clamp(18px, 2.2vw, 26px);

    --kt-r-xs: 8px;
    --kt-r-s:  12px;
    --kt-r-m:  16px;
    --kt-r-l:  22px;
    --kt-r-xl: 30px;

    --kt-golge-0: 0 1px 2px rgba(16, 16, 20, .04);
    --kt-golge-1: 0 4px 16px rgba(16, 16, 20, .07), 0 1px 3px rgba(16, 16, 20, .04);
    --kt-golge-2: 0 18px 48px rgba(16, 16, 20, .13), 0 4px 12px rgba(16, 16, 20, .06);

    --kt-hiz: .26s cubic-bezier(.3, .1, .25, 1);

    background: var(--kt-yuzey-1);
    color: var(--kt-murekkep);
}


/* == 02 Tipografi ========================================================= */

.kt-kap {
    width: 100%;
    max-width: var(--kt-kap);
    margin-inline: auto;
    padding-inline: var(--kt-yan);
}

.kt h1, .kt h2, .kt h3, .kt h4 { text-wrap: balance; }

.kt-h1 {
    margin: 0 0 18px;
    font-size: clamp(34px, 5.2vw, 58px);
    font-weight: 640;
    letter-spacing: -.032em;
    line-height: 1.08;
    color: inherit;
}
.kt-h2 {
    margin: 0 0 14px;
    font-size: clamp(27px, 3.5vw, 42px);
    font-weight: 640;
    letter-spacing: -.028em;
    line-height: 1.1;
    color: inherit;
}
.kt-h3 {
    margin: 0 0 8px;
    font-size: clamp(18px, 1.5vw, 21px);
    font-weight: 640;
    letter-spacing: -.022em;
    line-height: 1.2;
    color: inherit;
}

.kt-giris {
    margin: 0;
    font-size: clamp(16.5px, 1.35vw, 19.5px);
    line-height: 1.56;
    color: var(--kt-sis);
    max-width: 62ch;
    text-wrap: pretty;
}

.kt-etiket {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 640;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--kt-aksan-700);
    background: var(--kt-aksan-50);
    border: 1px solid var(--kt-aksan-100);
    border-radius: 100px;
    padding: 6px 13px;
    margin: 0 0 16px;
}
.kt-etiket::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

/* Koyu zeminde tipografi tersine döner */
.kt-bolum.koyu, .kt-kahraman { background: var(--kt-siyah); color: var(--kt-ters); }
.kt-bolum.koyu .kt-giris, .kt-kahraman .kt-giris { color: var(--kt-ters-sis); }
.kt-bolum.koyu .kt-etiket, .kt-kahraman .kt-etiket {
    color: var(--kt-aksan-300);
    background: rgba(var(--kt-aksan-rgb), .16);
    border-color: rgba(255, 255, 255, .1);
}


/* == 03 Düğme ve rozet ==================================================== */

.kt-dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 50px;
    padding: 0 26px;
    border: 1px solid transparent;
    border-radius: 100px;
    background: var(--kt-aksan-600);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.01em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--kt-hiz), transform var(--kt-hiz),
                box-shadow var(--kt-hiz), color var(--kt-hiz), border-color var(--kt-hiz);
}
.kt-dugme:hover {
    background: var(--kt-aksan-700);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--kt-golge-1);
}
.kt-dugme:active { transform: none; box-shadow: none; }

.kt-dugme.hat {
    background: none;
    color: var(--kt-murekkep);
    border-color: var(--kt-cizgi-koyu);
}
.kt-dugme.hat:hover {
    background: var(--kt-yuzey-2);
    color: var(--kt-murekkep);
    border-color: var(--kt-murekkep);
    box-shadow: none;
}
.kt-bolum.koyu .kt-dugme.hat, .kt-kahraman .kt-dugme.hat {
    color: #fff;
    border-color: rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .05);
}
.kt-bolum.koyu .kt-dugme.hat:hover, .kt-kahraman .kt-dugme.hat:hover {
    background: rgba(255, 255, 255, .13);
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
}
.kt-dugme.kucuk { min-height: 40px; padding: 0 18px; font-size: 14px; }

.kt-dugme-sira { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Klavyeyle gezinme: odak halkası her yerde aynı ve görünür. */
.kt a:focus-visible,
.kt button:focus-visible,
.kt summary:focus-visible,
.kt [role="button"]:focus-visible {
    outline: 2px solid var(--kt-aksan-600);
    outline-offset: 3px;
}
.kt-bolum.koyu a:focus-visible, .kt-kahraman a:focus-visible { outline-color: var(--kt-aksan-300); }

.kt-bag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 15px;
    color: var(--kt-aksan-600);
    text-decoration: none;
}
.kt-bag::after { content: "→"; transition: transform var(--kt-hiz); }
.kt-bag:hover { color: var(--kt-aksan-700); text-decoration: none; }
.kt-bag:hover::after { transform: translateX(3px); }

.kt-rozet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--kt-sis);
    background: var(--kt-yuzey-2);
    border: 1px solid var(--kt-cizgi);
    border-radius: 100px;
    padding: 5px 12px;
    white-space: nowrap;
}
.kt-rozet.yesil { color: var(--kt-yesil); background: var(--kt-yesil-z); border-color: transparent; }
.kt-rozet-sira { display: flex; flex-wrap: wrap; gap: 8px; }
.kt-bolum.koyu .kt-rozet, .kt-kahraman .kt-rozet {
    color: var(--kt-ters-sis);
    background: rgba(255, 255, 255, .06);
    border-color: var(--kt-cizgi-ters);
}


/* == 04 Bölüm iskeleti ==================================================== */

.kt-bolum { padding: var(--kt-bolum-y) 0; position: relative; }
.kt-bolum.gri  { background: var(--kt-yuzey-2); }
.kt-bolum.koyu { background: var(--kt-siyah); color: var(--kt-ters); }

.kt-bolum + .kt-bolum:not(.gri):not(.koyu) { border-top: 1px solid var(--kt-cizgi); }
.kt-bolum.gri + .kt-bolum.gri { border-top: 1px solid var(--kt-cizgi-koyu); }

.kt-bolum-basi {
    max-width: 62ch;
    margin: 0 auto clamp(26px, 2.8vw, 38px);
    text-align: center;
}
.kt-bolum-basi.sol { margin-inline: 0; text-align: left; }
.kt-bolum-basi .kt-giris { margin-inline: auto; }
.kt-bolum-basi.sol .kt-giris { margin-inline: 0; }

/* Başlık solda, yan eylem sağda (mağaza vitrini gibi bölümler için) */
.kt-bolum-basi.satir {
    max-width: none;
    margin-inline: 0;
    text-align: left;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 40px;
    flex-wrap: wrap;
}
.kt-bolum-basi.satir > div { max-width: 58ch; }
.kt-bolum-basi.satir .kt-giris { margin-inline: 0; }

.kt-ikili {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: clamp(30px, 4vw, 58px);
    align-items: center;
}

.kt-olcum {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 44px;
    margin: 26px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--kt-cizgi);
}
.kt-bolum.koyu .kt-olcum, .kt-kahraman .kt-olcum { border-top-color: var(--kt-cizgi-ters); }
.kt-olcum > div { display: grid; gap: 3px; }
.kt-olcum dt {
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 660;
    letter-spacing: -.03em;
    line-height: 1.05;
}
.kt-olcum dd { margin: 0; font-size: 13px; color: var(--kt-sis); }
.kt-bolum.koyu .kt-olcum dd, .kt-kahraman .kt-olcum dd { color: var(--kt-ters-sis); }


/* == 05 Kahraman ========================================================== */

.kt-kahraman {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: min(88vh, 780px);
    /* Sütun: önce metin bloğu, en altta ilkeler rayı tam genişlikte.
       (Satır yönünde bırakılırsa ray metnin YANINA geçiyor.) */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(90px, 12vw, 150px) 0 0;
}
.kt-kahraman-arka { position: absolute; inset: 0; z-index: -2; }
.kt-kahraman-arka video,
.kt-kahraman-arka img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
/* Okuma perdesi: yazının durduğu sol yarıda güçlü, sağda çekim açıkta kalır.
   Üçüncü katman gezinme çubuğunun altını karartıyor — logo ve menü, klibin
   parlak bir karesine denk geldiğinde bile okunur kalsın. */
.kt-kahraman-perde {
    position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(100deg, rgba(4, 6, 12, .94) 0%, rgba(4, 6, 12, .82) 34%,
                        rgba(4, 6, 12, .42) 62%, rgba(4, 6, 12, .28) 100%),
        linear-gradient(to top, rgba(4, 6, 12, .88) 0%, transparent 46%),
        linear-gradient(to bottom, rgba(4, 6, 12, .72) 0%, transparent 22%);
}
/* Kenar karartması (vinyet): kadrajın köşeleri yumuşasın, göz ortada kalsın. */
.kt-kahraman::after {
    content: "";
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(120% 90% at 50% 45%, transparent 42%, rgba(2, 4, 9, .55) 100%);
}

/* Dikkat: kap genişliği (1180) korunur, metin İÇERİDE 760'a kısılır.
   Buraya max-width verilirse blok kabın soluna değil ekranın ortasına
   yaslanır ve perdenin koyu tarafından çıkar. */
.kt-kahraman-ic {
    position: relative;
    margin-top: auto;
    padding-bottom: clamp(34px, 4vw, 52px);
}
.kt-kahraman-ic > * { max-width: 760px; }
.kt-kahraman .kt-h1 { color: #fff; }
.kt-kahraman-ust {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin: 0 0 18px;
    font-size: 13px; font-weight: 600; letter-spacing: .02em;
    color: rgba(255, 255, 255, .9);
}
.kt-kahraman-ust span {
    color: var(--kt-ters-sis);
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, .24);
}
.kt-kahraman .kt-giris { margin-bottom: 26px; color: rgba(255, 255, 255, .78); }

/* Klibin o anki sahnesine göre değişen tek satır */
.kt-sahne { display: grid; margin: 0 0 22px; min-height: 30px; }
.kt-sahne-m {
    grid-area: 1 / 1;
    display: flex; align-items: center; gap: 12px;
    font-size: 15px; font-weight: 600; letter-spacing: -.01em;
    color: #fff;
    opacity: 0; transform: translateY(10px);
    transition: opacity .5s ease, transform .6s cubic-bezier(.16, 1, .3, 1);
}
.kt-sahne-m.etkin { opacity: 1; transform: none; }
.kt-sahne-m i {
    width: 26px; height: 2px; border-radius: 2px; flex: none;
    background: var(--kt-aksan-400);
}
/* JS yoksa / video oynamıyorsa ilk satır görünür kalır — içerik asla kaybolmaz */
.kt-sahne-m:first-child { opacity: 1; transform: none; }
.kt-sahne.calisiyor .kt-sahne-m:first-child:not(.etkin) { opacity: 0; transform: translateY(10px); }

/* Alt ray — ilkeler */
.kt-ray {
    position: relative;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, .14);
    background: rgba(6, 8, 14, .5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.kt-ray ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    list-style: none;
    margin: 0;
    padding-block: 20px;
}
.kt-ray li {
    display: flex; align-items: flex-start; gap: 12px;
    padding-inline: clamp(10px, 1.6vw, 22px);
    border-left: 1px solid rgba(255, 255, 255, .1);
}
.kt-ray li:first-child { border-left: 0; padding-left: 0; }
.kt-ray i.fas, .kt-ray i.far, .kt-ray i.fab {
    font-size: 17px; color: var(--kt-aksan-400); margin-top: 2px; flex: none;
}
.kt-ray span { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.kt-ray strong { font-size: 14px; font-weight: 640; color: #fff; letter-spacing: -.015em; }
.kt-ray em { font-style: normal; font-size: 12.5px; color: var(--kt-ters-sis); }


/* == 05b Tam ekran kahraman (2026-08-20) ==================================
   Kullanıcı isteği: "asıl odak video olsun, tam sayfayı kaplasın, sadece
   üstteki çubuk bar kalsın". Bu blok bir EK KATMAN: `.tam` sınıfı index.php'den
   silinirse bölüm eski hâline (88vh, içeride ray, açıklama paragrafı) döner.
   Üstteki gezinme çubuğu fixed olduğu için klibin üzerinde durmaya devam
   ediyor; bölüm onun altından değil, ARKASINDAN başlıyor. */
.kt-kahraman.tam {
    /* svh: mobil tarayıcıda adres çubuğu kayarken bölüm zıplamasın. */
    min-height: 100svh;
    justify-content: center;
    padding: clamp(84px, 11vw, 132px) 0 clamp(40px, 6vw, 72px);
}
.kt-kahraman.tam .kt-kahraman-ic { margin-top: 0; padding-bottom: 0; }
/* Perde inceltildi. Eski değerler (sol yarıda %94 karartma) altı satır metni
   okutmak içindi; ekranda başlık + iki buton kaldığına göre klibin üstünde o
   kadar koyu tabakaya gerek yok. Yalnız başlığın arkası ve üst/alt kenarlar
   karartılıyor — logo, menü ve butonlar her karede okunur kalsın diye. */
.kt-kahraman.tam .kt-kahraman-perde {
    background:
        linear-gradient(100deg, rgba(4, 6, 12, .74) 0%, rgba(4, 6, 12, .50) 30%,
                        rgba(4, 6, 12, .16) 60%, rgba(4, 6, 12, 0) 100%),
        linear-gradient(to bottom, rgba(4, 6, 12, .62) 0%, transparent 20%),
        linear-gradient(to top, rgba(4, 6, 12, .46) 0%, transparent 28%);
}
/* Vinyet de hafifledi: kadraj köşeleri artık daha az yeniyor. */
.kt-kahraman.tam::after {
    background: radial-gradient(125% 95% at 50% 45%, transparent 55%, rgba(2, 4, 9, .40) 100%);
}
/* Başlık tipografisi. Ekranda kalan TEK metin olduğu için normal .kt-h1'den
   daha iri, daha sıkı ve iki tonlu: ilk satır soluk, ikinci satır tam beyaz.
   Cümle tek nefeste okunur ama göz "çalışır hâlde teslim ederiz" satırında
   durur — asıl vaat orası. Gölge dekoratif değil: klibin açık bir karesine
   denk gelen harfler okunur kalsın diye. */
.kt-kahraman.tam .kt-h1 {
    display: grid;
    /* .kt-kahraman-ic > * kuralındaki 760px burada dar kalıyor: bu ölçüde
       ikinci satır ikiye bölünüyor ve başlık üç satıra çıkıyordu. Genişletildi
       ki her iki satır da tek satırda dursun. */
    max-width: min(980px, 100%);
    margin-bottom: clamp(26px, 3.2vw, 38px);
    font-size: clamp(36px, 5.6vw, 68px);
    font-weight: 680;
    letter-spacing: -.042em;
    line-height: 1.02;
    text-shadow: 0 2px 34px rgba(2, 4, 9, .5);
}
.kt-kahraman.tam .kt-h1 span { display: block; }
.kt-kahraman.tam .kt-h1 span:first-child { color: rgba(255, 255, 255, .70); font-weight: 560; }
.kt-kahraman.tam .kt-h1 span:last-child  { color: #fff; }

/* Butonlar klibin üstünde durduğu için çerçeveli olan cam gibi:
   arkasındaki kare seçiliyor ama yazı okunuyor. */
.kt-kahraman.tam .kt-dugme { padding: 14px 26px; font-size: 15.5px; }
.kt-kahraman.tam .kt-dugme.hat {
    backdrop-filter: blur(12px) saturate(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    background: rgba(255, 255, 255, .07);
}

/* Giriş hareketi: satırlar ve butonlar sırayla yükselerek belirir. Klip zaten
   oynuyor; metin de aynı anda "yerine oturursa" bölüm film gibi açılıyor.
   "Hareketi azalt" açıkken bu blok hiç uygulanmaz, her şey baştan yerinde. */
@media (prefers-reduced-motion: no-preference) {
    .kt-kahraman.tam .kt-h1 span,
    .kt-kahraman.tam .kt-dugme-sira {
        opacity: 0;
        transform: translateY(20px);
        animation: kt-kahraman-gir .95s cubic-bezier(.16, 1, .3, 1) forwards;
    }
    .kt-kahraman.tam .kt-h1 span:first-child { animation-delay: .10s; }
    .kt-kahraman.tam .kt-h1 span:last-child  { animation-delay: .24s; }
    .kt-kahraman.tam .kt-dugme-sira          { animation-delay: .42s; }
}
@keyframes kt-kahraman-gir { to { opacity: 1; transform: none; } }

/* Ray artık kahramanın DIŞINDA: video üstünde değil, kendi zemininde.
   Cam efekti (backdrop-filter) anlamsız kaldığı için kapatıldı. */
.kt-ray.disari {
    background: var(--kt-siyah);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}

@media (max-width: 768px) {
    /* Aşağıdaki genel `.kt-kahraman { min-height: 0 }` kuralı `.tam`ı geçemez
       (özgüllük düşük); yine de dolgu telefonda küçültülüyor. */
    .kt-kahraman.tam { padding: clamp(76px, 18vw, 108px) 0 clamp(28px, 8vw, 48px); }
}


/* == 06 Kartlar =========================================================== */

/* TEK KART REÇETESİ — sayfadaki bütün kutular buradan doğar. */
.kt-kart {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--kt-yuzey-1);
    border: 1px solid var(--kt-cizgi);
    border-radius: var(--kt-r-l);
    box-shadow: var(--kt-golge-0);
    padding: clamp(20px, 2.2vw, 28px);
    text-decoration: none;
    color: inherit;
    transition: transform var(--kt-hiz), box-shadow var(--kt-hiz), border-color var(--kt-hiz);
}
a.kt-kart:hover {
    transform: translateY(-3px);
    box-shadow: var(--kt-golge-2);
    border-color: var(--kt-cizgi-koyu);
    text-decoration: none;
    color: inherit;
}
.kt-bolum.koyu .kt-kart {
    background: rgba(255, 255, 255, .05);
    border-color: var(--kt-cizgi-ters);
    box-shadow: none;
    color: var(--kt-ters);
}

.kt-kart-ikon {
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: 13px;
    background: var(--kt-aksan-50);
    color: var(--kt-aksan-600);
    font-size: 18px;
    margin-bottom: 16px;
}
.kt-bolum.koyu .kt-kart-ikon { background: rgba(var(--kt-aksan-rgb), .2); color: var(--kt-aksan-300); }

/* Kartın sağ üstünde duran küçük etiket. Konumu ikonun hizasında;
   kart padding'i clamp olduğu için aynı clamp ile ölçülür. */
.kt-kart-rozet {
    position: absolute;
    top: clamp(20px, 2.2vw, 28px);
    right: clamp(20px, 2.2vw, 28px);
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--kt-aksan-50);
    color: var(--kt-aksan-700);
    font-size: 11.5px;
    font-weight: 620;
    letter-spacing: .02em;
    line-height: 1.4;
    white-space: nowrap;
}
.kt-bolum.koyu .kt-kart-rozet { background: rgba(var(--kt-aksan-rgb), .22); color: var(--kt-aksan-300); }
.kt-kart p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--kt-sis); }
.kt-bolum.koyu .kt-kart p { color: var(--kt-ters-sis); }
.kt-kart-liste {
    list-style: none;
    margin: 16px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--kt-cizgi);
    display: grid;
    gap: 8px;
    font-size: 13.5px;
    color: var(--kt-sis);
}
.kt-kart-liste li { display: flex; align-items: flex-start; gap: 9px; }
.kt-kart-liste li::before {
    content: "";
    width: 5px; height: 5px; margin-top: 7px; flex: none;
    border-radius: 50%;
    background: var(--kt-aksan-400);
}
.kt-kart-alt { margin-top: auto; padding-top: 18px; }

.kt-izgara { display: grid; gap: var(--kt-bosluk); }
.kt-izgara.u2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kt-izgara.u3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kt-izgara.u4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }


/* == 07 Ürün kartı ======================================================== */

.kt-urun {
    padding: 0;
    overflow: hidden;
}
.kt-urun-gorsel {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--kt-yuzey-2);
    display: grid; place-items: center;
    overflow: hidden;
    border-bottom: 1px solid var(--kt-cizgi);
}
.kt-urun-gorsel img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 14px;
    transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
a.kt-urun:hover .kt-urun-gorsel img { transform: scale(1.04); }
.kt-urun-ic { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.kt-urun-ad {
    margin: 0 0 10px;
    font-size: 14.5px; font-weight: 600; line-height: 1.4;
    letter-spacing: -.012em;
    color: var(--kt-murekkep);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.kt-urun-fiyat {
    margin-top: auto;
    display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
}
.kt-urun-simdi { font-size: 19px; font-weight: 680; letter-spacing: -.025em; color: var(--kt-murekkep); }
.kt-urun-eski { font-size: 13.5px; color: var(--kt-sis-2); text-decoration: line-through; }
.kt-urun-ind {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    background: var(--kt-aksan-600); color: #fff;
    font-size: 12px; font-weight: 700; letter-spacing: -.01em;
    padding: 5px 10px; border-radius: 100px;
}
.kt-urun-kdv { margin: 6px 0 0; font-size: 11.5px; color: var(--kt-sis-2); }

/* Stok durumu — kartın en altında tek satır. Kurumsal alıcı "var mı"
   sorusunun cevabını fiyattan önce arıyor. */
.kt-urun-durum {
    display: flex; align-items: center; gap: 7px;
    margin: 12px 0 0; padding-top: 12px;
    border-top: 1px solid var(--kt-cizgi);
    font-size: 12.5px; font-weight: 600;
}
.kt-urun-durum::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
    background: currentColor;
}
.kt-urun-durum.var { color: var(--kt-yesil); }
.kt-urun-durum.az  { color: #a35a06; }
.kt-urun-durum.yok { color: var(--kt-sis-2); }


/* == 08 Medya bandı (atölye / vitrin klipleri) ============================ */

.kt-medya {
    border-radius: var(--kt-r-xl);
    overflow: hidden;
    background: var(--kt-yuzey-3);
    box-shadow: var(--kt-golge-2);
    line-height: 0;
}
.kt-medya video, .kt-medya img { width: 100%; height: auto; display: block; }


/* == 09 Marka şeridi ====================================================== */

.kt-marka-serit {
    background: var(--kt-yuzey-1);
    border-block: 1px solid var(--kt-cizgi);
    padding: 22px 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.kt-marka-ray { display: flex; gap: 58px; width: max-content; animation: ktKay 46s linear infinite; }
.kt-marka-ray span {
    font-size: 14px; font-weight: 640; letter-spacing: .14em;
    color: var(--kt-sis-2); white-space: nowrap; text-transform: uppercase;
}
@keyframes ktKay { to { transform: translateX(-50%); } }
.kt-marka-serit:hover .kt-marka-ray { animation-play-state: paused; }


/* == 10 SSS =============================================================== */

.kt-sss { display: grid; gap: 12px; max-width: 860px; margin-inline: auto; }
.kt-sss details {
    background: var(--kt-yuzey-1);
    border: 1px solid var(--kt-cizgi);
    border-radius: var(--kt-r-m);
    box-shadow: var(--kt-golge-0);
    overflow: hidden;
}
.kt-sss details[open] { border-color: var(--kt-cizgi-koyu); box-shadow: var(--kt-golge-1); }
.kt-sss summary {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 17px 20px;
    cursor: pointer;
    font-size: 16px; font-weight: 600; letter-spacing: -.015em;
    list-style: none;
}
.kt-sss summary::-webkit-details-marker { display: none; }
.kt-sss summary::after {
    content: "+";
    font-size: 22px; font-weight: 400; line-height: 1;
    color: var(--kt-aksan-600); flex: none;
    transition: transform var(--kt-hiz);
}
.kt-sss details[open] summary::after { transform: rotate(45deg); }
.kt-sss p {
    margin: 0; padding: 0 20px 20px;
    font-size: 15px; line-height: 1.62; color: var(--kt-sis);
}


/* == 11 Yorum kartı ======================================================= */

.kt-yorum-yildiz { display: flex; gap: 3px; color: #f5a623; font-size: 13px; margin-bottom: 12px; }
.kt-yorum-metin { font-size: 15px; line-height: 1.6; color: var(--kt-murekkep); margin: 0 0 18px; }
.kt-yorum-kim { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.kt-yorum-im {
    width: 40px; height: 40px; flex: none;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--kt-aksan-50); color: var(--kt-aksan-700);
    font-weight: 700; font-size: 15px;
}
.kt-yorum-ad { font-size: 14.5px; font-weight: 640; letter-spacing: -.015em; }
.kt-yorum-unvan { font-size: 12.5px; color: var(--kt-sis-2); }


/* == 12 Kapanış =========================================================== */

.kt-kapanis { text-align: center; max-width: 64ch; margin-inline: auto; position: relative; }
.kt-kapanis .kt-h2 { color: #fff; }
.kt-kapanis .kt-dugme-sira { justify-content: center; margin-top: 28px; }
/* Bandın ortasında çok hafif bir aksan ışığı — düz siyah yerine derinlik. */
.kt-bolum.koyu { overflow: hidden; }
.kt-bolum.koyu::before {
    content: "";
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(60% 120% at 50% 0%, rgba(var(--kt-aksan-rgb), .22), transparent 62%);
}
.kt-bolum.koyu > .kt-kap { position: relative; }


/* == 13 Sihirbaz kutusunun yeni kabuğu ==================================== */
/* Sihirbazın kendi davranışı ve iç stili css/wizard.css'ten geliyor; burada
   yalnız dış kabuğu yeni kart reçetesine uyduruyoruz. */

.kt-sihirbaz-kabuk .wizard-box {
    background: var(--kt-yuzey-1);
    border: 1px solid var(--kt-cizgi);
    border-radius: var(--kt-r-l);
    box-shadow: var(--kt-golge-2);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}


/* == 14 UYUM KATMANI — devralınan bölümleri sisteme sokar ================
   film / lansman / kurumsal / referans / sertifika bölümleri eski
   sayfadan olduğu gibi devralındı (içlerindeki formlar, videolar ve
   lightbox çalışmaya devam etsin diye). Ama her biri kendi boşluğunu,
   kendi başlık boyunu, kendi zeminini getiriyordu — "çorba" hissinin
   asıl kaynağı buydu. Aşağısı o bölümlerin YALNIZ kabuğunu yeni ritme
   uyduruyor; işaretlemelerine ve davranışlarına dokunmuyor.
   Hepsi .kt altında kapalı: eski ana sayfa bu kurallardan etkilenmez. */

/* Arka plandaki dolaşan mavi çizgiler (particles.js). Kurumsal bir
   sayfada dikkat dağıtıyor, video ve fotoğrafın önüne geçiyor. */
.kt #particles-js { display: none !important; }

/* --- Referans ve sertifika bölümleri: ortak zemin, ortak ritim --- */
.kt .ref-logos-section,
.kt .cert-section {
    padding: var(--kt-bolum-y) 0;
    background: var(--kt-yuzey-1);
    border-top: 1px solid var(--kt-cizgi);
    border-bottom: 0;
}
.kt .ref-logos-section { background: var(--kt-yuzey-2); }

.kt .ref-eyebrow, .kt .cert-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 640; letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--kt-aksan-700);
    background: var(--kt-aksan-50);
    border: 1px solid var(--kt-aksan-100);
    border-radius: 100px;
    padding: 6px 13px;
    margin: 0 0 16px;
}
.kt .ref-heading, .kt .cert-heading {
    font-size: clamp(27px, 3.5vw, 42px);
    font-weight: 640; letter-spacing: -.028em; line-height: 1.1;
    color: var(--kt-murekkep);
    margin: 0 0 14px;
}
.kt .ref-sub, .kt .cert-sub {
    font-size: clamp(16.5px, 1.35vw, 19.5px);
    line-height: 1.56;
    color: var(--kt-sis);
    max-width: 62ch;
    margin: 0 auto clamp(26px, 2.8vw, 38px);
}

/* Ölçüm şeridi: kt-olcum ile aynı dile geldi (kutu içinde değil, çizgi üstünde) */
.kt .ref-stats {
    max-width: var(--kt-kap);
    margin: 0 auto clamp(30px, 3vw, 44px);
    padding: 24px 0 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--kt-cizgi-koyu);
    box-shadow: none;
    border-radius: 0;
    gap: 18px 44px;
}
.kt .ref-stat-num {
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 660; letter-spacing: -.03em;
    color: var(--kt-murekkep);
    background: none; -webkit-text-fill-color: currentColor;
}
.kt .ref-stat-lbl { font-size: 13px; color: var(--kt-sis); letter-spacing: 0; text-transform: none; }
.kt .ref-stat-divider { display: none; }

/* Sertifika kartları tek kart reçetesine döndü */
.kt .cert-grid { max-width: var(--kt-kap); gap: var(--kt-bosluk); }
.kt .cert-card {
    background: var(--kt-yuzey-1);
    border: 1px solid var(--kt-cizgi);
    border-radius: var(--kt-r-l);
    box-shadow: var(--kt-golge-0);
    transition: transform var(--kt-hiz), box-shadow var(--kt-hiz), border-color var(--kt-hiz);
}
.kt .cert-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--kt-golge-2);
    border-color: var(--kt-cizgi-koyu);
}
.kt .cert-card-body { border-top: 1px solid var(--kt-cizgi); padding: 16px 18px 18px; }
.kt .cert-card-brand { color: var(--kt-aksan-700); font-size: 11.5px; letter-spacing: .12em; }
.kt .cert-card-title { font-size: 14.5px; font-weight: 600; letter-spacing: -.015em; color: var(--kt-murekkep); }
.kt .cert-card-zoom { font-size: 12.5px; color: var(--kt-sis-2); }

/* Koyu video bantlarının (film, lansman) üst-alt çizgileri kalksın:
   zaten renk değişimiyle ayrılıyorlar, ikinci bir ayraç gürültü yapıyor. */
.kt .hrk-film, .kt .lns-bant, .kt #kurumsal { border-top: 0; border-bottom: 0; }


/* == 15 Dar ekran ========================================================= */

@media (max-width: 980px) {
    .kt-izgara.u4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kt-izgara.u3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kt-ikili { grid-template-columns: 1fr; }
    .kt-ray ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 0; }
    .kt-ray li:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 620px) {
    .kt-izgara.u4, .kt-izgara.u3, .kt-izgara.u2 { grid-template-columns: 1fr; }
    .kt-kahraman { min-height: 0; padding-top: clamp(72px, 20vw, 110px); }
    .kt-kahraman-perde {
        background: linear-gradient(to top, rgba(4, 6, 12, .95) 12%, rgba(4, 6, 12, .72) 60%, rgba(4, 6, 12, .55) 100%);
    }
    .kt-ray ul { grid-template-columns: 1fr; }
    .kt-ray li { border-left: 0; padding-left: 0; }
    .kt-dugme { width: 100%; }
    .kt-olcum { gap: 14px 28px; }
}

@media (prefers-reduced-motion: reduce) {
    .kt-marka-ray { animation: none; }
    .kt-sahne-m { transition: none; opacity: 1; transform: none; }
    .kt-kart, .kt-dugme, .kt-urun-gorsel img { transition: none; }
    a.kt-kart:hover { transform: none; }
}


/* == 16 ÖLÜ ALAN DÜZELTMESİ =============================================
   Sayfa yayına girdikten sonra ölçülen boş bantların kapatılması.
   Tek blok hâlinde duruyor: bu bölümü silmek 2026-08-17 hâline döndürür.

   Ölçüm (1440x900, canlı): bölümler arasında 155-185 px boş bant vardı,
   hizmet kartlarının kısa olanlarında ~100 px beyaz, mağaza başlığının
   sağında ~600 px boş dikdörtgen, referans ve sertifika bantlarında
   kaydırırken 300 px'e varan boş alan görünüyordu.
   ====================================================================== */

/* --- 16.1 AOS geç açılıyordu -------------------------------------------
   Eski bölümler (referanslar, sertifikalar, yorumlar) AOS "fade-up" ile
   geliyor: aos.css içeriği 100 px aşağıdan, 0,8 sn'de getiriyor. Normal
   hızda kaydıran biri bölüme girdiğinde içerik HENÜZ görünmüyor — bakılan
   yer bomboş. "Ölü alan"ın asıl kaynağı buydu, boşluk değil gecikmeydi.
   Yolu 100→18 px'e, süreyi 0,8→0,42 sn'ye çekiyoruz; hareket duruyor ama
   göze boşluk olarak yansımıyor. Seçiciler .kt altında, iç sayfalardaki
   AOS davranışı aynen kalıyor. */
.kt [data-aos^="fade"][data-aos^="fade"] { transition-duration: .42s; }
.kt [data-aos="fade-up"]:not(.aos-animate)    { transform: translate3d(0, 18px, 0); }
.kt [data-aos="fade-down"]:not(.aos-animate)  { transform: translate3d(0, -18px, 0); }
.kt [data-aos="fade-left"]:not(.aos-animate)  { transform: translate3d(18px, 0, 0); }
.kt [data-aos="fade-right"]:not(.aos-animate) { transform: translate3d(-18px, 0, 0); }
.kt [data-aos^="zoom"]:not(.aos-animate)      { transform: scale(.97); }

/* Kademeli gecikmeler de aynı nedenle kırpıldı: 240 ms'lik bir gecikme,
   0,42 sn'lik geçişin üstüne binince kart sırasının sonu geç doluyordu.
   Beş nitelik = aos.css'teki en yüksek özgüllüğün (dört) üstü. */
.kt [data-aos][data-aos][data-aos][data-aos][data-aos] { transition-delay: 0s; }
.kt [data-aos][data-aos][data-aos][data-aos][data-aos-delay="150"],
.kt [data-aos][data-aos][data-aos][data-aos][data-aos-delay="160"] { transition-delay: .06s; }
.kt [data-aos][data-aos][data-aos][data-aos][data-aos-delay="240"] { transition-delay: .1s; }

/* --- 16.2 Bölüm ritmi bir kademe sıkıldı -------------------------------
   Her bölüm kendi alt boşluğunu, sonraki de kendi üst boşluğunu getirince
   aralar 155 px'i buluyordu. Ritim korunuyor, ölçek küçülüyor. */
body.kt { --kt-bolum-y: clamp(44px, 4.4vw, 66px); }

/* Aynı zeminde art arda gelen iki bölümde ara bir kez daha kısalır:
   arada renk değişimi olmadığı için boşluk "kopukluk" gibi okunuyordu. */
.kt .kt-bolum + .kt-bolum:not(.gri):not(.koyu),
.kt .kt-bolum.gri + .kt-bolum.gri { padding-top: calc(var(--kt-bolum-y) * .72); }

/* Eski bölümlerin kendi dolgusu kt ritmine bağlanıyor. lansman bandı
   118 px, kurumsal bant 100,8 px kullanıyordu — sayfadaki tek istisnaydı. */
.kt .hrk-lns, .kt #kurumsal, .kt .ref-logos-section, .kt .cert-section {
    padding-top: var(--kt-bolum-y);
    padding-bottom: var(--kt-bolum-y);
}

/* --- 16.3 Hizmet kartlarındaki beyaz -----------------------------------
   Izgara kartları en uzun kardeşe göre uzuyor; bir hizmetin açıklaması
   dört satır olunca iki satırlık kartlarda metinle "Ayrıntı" arasında
   ~100 px beyaz kalıyordu. Açıklamayı üç satıra sabitliyoruz: kartlar
   kendiliğinden eşitleniyor, kırpılan metin zaten modalde tam duruyor. */
.kt-hizmet-kart h3 { min-height: 2.2em; }
.kt-hizmet-kart p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(3 * 1.55em);
}

/* --- 16.4 Mağaza başlığının sağındaki boşluk ---------------------------
   Başlık 58ch'te kesiliyor, düğme en sağa yapışıyordu; arada ekranın
   yarısı kadar boş dikdörtgen kalıyordu. Metin kolonu genişletildi ve
   düğme başlık satırının hizasına çekildi. */
.kt-bolum-basi.satir { align-items: flex-end; gap: 18px 32px; }
.kt-bolum-basi.satir > div { max-width: 74ch; flex: 1 1 460px; }
.kt-bolum-basi.satir > .kt-dugme { margin-bottom: 4px; }

/* --- 16.5 Lansman bandındaki siyah -------------------------------------
   İki sorun vardı. (a) Sol kolon (16/9 kadraj) 367 px, sağ kolon (anlatı)
   491 px; ortalanınca kadrajın altında ve üstünde 62'şer px siyah
   kalıyordu — kadraj artık üstten, künyeyle aynı çizgide başlıyor.
   (b) Bölüm görünür alana girerken kart 0,9 sn'de, panel 0,7 sn'de,
   anlatı 0,65 sn'de açılıyordu; üst üste binince bölüme ilk bakışta
   koca bir siyah bant görünüyordu. Süreler yarıya indi. */
.kt .hrk-lns-sahne { align-items: start; }
.kt .hrk-lns-kart {
    transition-duration: .4s, .45s;
}
.kt .hrk-lns-kart.gizli { transform: translateY(10px); }
.kt .hrk-lns-panel { transition-duration: .35s; }
.kt .hrk-lns-an {
    transition-duration: .3s, .32s, .3s;
    transform: translateY(8px);
    filter: blur(3px);
}
.kt .hrk-lns-an.etkin { transform: none; filter: none; }

@media (max-width: 980px) {
    .kt-hizmet-kart h3 { min-height: 0; }
}


/* ===========================================================================
   17 · SSS ZENGİNLEŞTİRME  (2026-08-17)
   ---------------------------------------------------------------------------
   Ana sayfadaki soru sayısı 8 → 22 çıktı. Uzun listeyi okunur tutmak için
   üstte başlık çipleri, altta "cevabı bulamadınız mı" satırı var.
   Bu blok ve includes/data/sss.php silinirse bölüm eski 8 soruluk düz
   listesine kendiliğinden döner.
   =========================================================================== */

.kt-sss-filtre {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 860px;
    margin: 0 auto 22px;
}

.kt-cip {
    appearance: none;
    border: 1px solid var(--kt-cizgi);
    background: var(--kt-yuzey-1);
    color: var(--kt-sis);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .01em;
    padding: 9px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.kt-cip:hover { border-color: var(--kt-cizgi-koyu); color: var(--kt-murekkep); }
.kt-cip.etkin {
    background: var(--kt-aksan-600);
    border-color: var(--kt-aksan-600);
    color: #fff;
}

/* details[hidden] tarayıcıda display:block'a yenilir — açıkça kapatılmalı. */
.kt-sss details[hidden] { display: none; }

.kt-sss-dip {
    max-width: 860px;
    margin: 22px auto 0;
    text-align: center;
    font-size: 14.5px;
    color: var(--kt-sis);
}
.kt-sss-dip a {
    color: var(--kt-aksan-600);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.kt-sss-dip a:hover { text-decoration: underline; }
.kt-sss-dip span { margin: 0 8px; opacity: .45; }

@media (max-width: 640px) {
    .kt-sss-filtre { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .kt-sss-filtre::-webkit-scrollbar { display: none; }
    .kt-cip { flex: 0 0 auto; }
}

/* == 12 · TEMA KATMANI (2026-08-20) =======================================
   Sorun: `kt-` katmanı renklerini kendi jetonlarından alıyordu ama jetonlar
   temadan habersizdi. Sonuç: tema düğmesi "koyu"ya alınınca ana sayfanın
   çoğu açık kalıyor, "açık"a alınınca koyu bantlar siyah kalıyordu.

   Kural (kullanıcı kararı, 2026-08-20):
     · MacBook filmi (#hrk-film) ve lansman bandı (#hrk-lns) HER İKİ TEMADA
       DA SİYAH kalır. Onlar hareket.css'te ve `.koyu` sınıfı taşımıyorlar,
       bu yüzden burada hiç geçmiyorlar — bilerek dokunulmadı.
     · Geri kalan her yer temayı takip eder.

   Yöntem: renkleri tek tek ezmek yerine JETONLARI yeniden tanımlıyoruz.
   `.kt-bolum.koyu` / `.kt-kahraman` içindeki onlarca kural zaten
   --kt-siyah / --kt-ters / --kt-ters-sis / --kt-cizgi-ters okuduğu için
   dört satır hepsini birden çeviriyor. Yalnız düz yazılmış #fff ve
   rgba(255,255,255,…) değerleri elle karşılanıyor (aşağıda A2/A3).

   GERİ ALMA: bu "12" bloğunu sil — dosya 2026-08-20 öncesi davranışına döner.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A · AÇIK TEMA — koyu bantlar açılır
   -------------------------------------------------------------------------- */

/* A1 · Jeton çevirisi: bir satırda onlarca kuralı ters yüz eder.
   2026-08-21 — `.kt-kahraman` bu listeden ÇIKARILDI. Kahraman açık temada da
   koyu kalıyor (bkz. A3); jetonlar burada çevrilseydi klibin üstündeki yazı ve
   cam buton koyu mürekkebe dönüp karanlık kadrajda okunmaz olurdu. */
html:not([data-theme="dark"]) body.kt .kt-bolum.koyu,
html:not([data-theme="dark"]) body.kt .kt-ray.disari {
    --kt-siyah:      var(--kt-yuzey-2);
    --kt-ters:       var(--kt-murekkep);
    --kt-ters-sis:   var(--kt-sis);
    --kt-cizgi-ters: var(--kt-cizgi);
}

/* A2 · Koyu bantların düz yazılmış beyazları. */
html:not([data-theme="dark"]) body.kt .kt-bolum.koyu .kt-etiket {
    color: var(--kt-aksan-700);
    background: var(--kt-aksan-50);
    border-color: var(--kt-aksan-200);
}
html:not([data-theme="dark"]) body.kt .kt-bolum.koyu .kt-dugme.hat {
    color: var(--kt-murekkep);
    border-color: var(--kt-cizgi-koyu);
    background: var(--kt-yuzey-1);
}
html:not([data-theme="dark"]) body.kt .kt-bolum.koyu .kt-dugme.hat:hover {
    color: var(--kt-murekkep);
    border-color: var(--kt-murekkep);
    background: var(--kt-yuzey-3);
}
html:not([data-theme="dark"]) body.kt .kt-bolum.koyu .kt-rozet {
    background: var(--kt-yuzey-1);
    border-color: var(--kt-cizgi);
    color: var(--kt-sis);
}
html:not([data-theme="dark"]) body.kt .kt-bolum.koyu .kt-kart {
    background: var(--kt-yuzey-1);
    border-color: var(--kt-cizgi);
    box-shadow: var(--kt-golge-0);
    color: var(--kt-murekkep);
}
html:not([data-theme="dark"]) body.kt .kt-bolum.koyu .kt-kart-ikon {
    background: var(--kt-aksan-50);
    color: var(--kt-aksan-600);
}
html:not([data-theme="dark"]) body.kt .kt-bolum.koyu .kt-kart-rozet {
    background: var(--kt-aksan-50);
    color: var(--kt-aksan-700);
}
html:not([data-theme="dark"]) body.kt .kt-bolum.koyu .kt-kart p { color: var(--kt-sis); }
html:not([data-theme="dark"]) body.kt .kt-kapanis .kt-h2 { color: var(--kt-murekkep); }
/* Koyu banttaki mavi hâle açık zeminde kirli bir leke bırakıyor. */
html:not([data-theme="dark"]) body.kt .kt-bolum.koyu::before { opacity: .35; }

/* A3 · Tam ekran kahraman — AÇIK TEMADA DA KOYU PERDE.
   2026-08-21 — Kullanıcı: "aydınlık moddayken bu videoya soldan bir beyazlatma
   efekti geliyor; açık temada olsa bile koyu moddaki gibi karanlık efekt
   gelsin." Bu yüzden buradaki BEYAZ geçersiz kılmalar kaldırıldı. Artık
   kahraman iki temada da §05b'deki koyu perdeyi, koyu vinyeti, beyaz başlığı
   ve cam butonu kullanıyor — tek bir görünüm var, tema kahramanı etkilemiyor.

   Silinen kurallar: beyaz perde (soldan .62 → 0), beyaz vinyet, mürekkep
   başlık + beyaz hâle (text-shadow), beyaz zeminli .hat butonu ve mobil beyaz
   perde. Bunlar hep birlikte gitmek zorundaydı: yalnız perde koyulaştırılsaydı
   koyu mürekkep başlık karanlık kadrajda okunmaz olurdu.

   Kahramanın DIŞINDA açık tema aynen sürüyor; buradaki değişiklik yalnız
   ilk ekrandaki klip alanını kapsıyor. Geri alma: bu bloğu silip yerine
   rgba(255,255,255,…) katmanlarını koymak yeterli (git geçmişinde duruyor). */

/* A4 · İlkeler rayı (kahramanın altındaki şerit). */
html:not([data-theme="dark"]) body.kt .kt-ray.disari {
    background: var(--kt-yuzey-2);
    border-bottom-color: var(--kt-cizgi);
}
html:not([data-theme="dark"]) body.kt .kt-ray li { border-left-color: var(--kt-cizgi); }
html:not([data-theme="dark"]) body.kt .kt-ray strong { color: var(--kt-murekkep); }
html:not([data-theme="dark"]) body.kt .kt-ray em { color: var(--kt-sis); }

/* --------------------------------------------------------------------------
   B · KOYU TEMA — açık yüzeyler kararır
   Yalnız yüzey/metin/çizgi jetonları çevriliyor; vurgu (aksan) paleti aynı
   kalıyor, çünkü mavi tonlar iki temada da okunuyor.
   -------------------------------------------------------------------------- */
html[data-theme="dark"] body.kt {
    --kt-yuzey-1: #0f1117;
    --kt-yuzey-2: #14161d;
    --kt-yuzey-3: #1b1e27;
    --kt-murekkep: #eceef3;
    --kt-sis:      #a2a7b4;
    --kt-sis-2:    #7f8492;
    --kt-cizgi:      #262a35;
    --kt-cizgi-koyu: #333846;
    --kt-yesil:   #4ade80;
    --kt-yesil-z: rgba(74, 222, 128, .12);
    --kt-golge-0: 0 1px 2px rgba(0, 0, 0, .35);
    --kt-golge-1: 0 4px 16px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .3);
    --kt-golge-2: 0 18px 48px rgba(0, 0, 0, .55), 0 4px 12px rgba(0, 0, 0, .35);
}
/* Vurgu tonlarının açık ucu koyu zeminde göz alıyor; yalnız zemin olarak
   kullanılan 50/100/200 kademeleri saydam maviye çevriliyor. */
html[data-theme="dark"] body.kt {
    --kt-aksan-50:  rgba(43, 122, 228, .12);
    --kt-aksan-100: rgba(43, 122, 228, .18);
    --kt-aksan-200: rgba(43, 122, 228, .28);
}
/* Koyu tema + koyu bant: bant zaten siyah, ama sayfanın geri kalanı da
   koyulaştığı için ayrım kalmıyor. Bir tık daha derin tutuyoruz. */
html[data-theme="dark"] body.kt .kt-bolum.koyu { background: #06070b; }
/* Aksan-700/800 zemin üstünde koyu metin isteyen yerler. */
html[data-theme="dark"] body.kt .kt-urun-durum.az { color: #fbbf24; }

/* == 13 · YAZI ÖLÇEĞİ — bir tık küçültme (2026-08-20) =====================
   Kullanıcı: "yazılar çok göze büyük geliyor bi tık küçült".
   Küçültülen yalnızca BAŞLIKLAR ve giriş paragrafları (~%10 / ~%7).
   Gövde metni, kart açıklamaları, menü ve alt bilgi zaten 13–15 px —
   onlara dokunulmadı, daha küçüğü okunurluğu bozardı.
   Aynı seçicilerin dosyanın üstündeki kopyalarıyla ÇAKIŞMASI kasıtlı:
   aynı özgüllükte, sonra geldiği için kazanıyor. Böylece geri alma
   bu "13" bloğunu silmekten ibaret.
   ========================================================================== */
.kt-h1     { font-size: clamp(30px, 4.6vw, 51px); }
.kt-h2     { font-size: clamp(24px, 3.05vw, 37px); }
.kt-h3     { font-size: clamp(16.5px, 1.35vw, 19px); }
.kt-giris  { font-size: clamp(15.5px, 1.2vw, 18px); }
.kt-olcum dt { font-size: clamp(20px, 1.95vw, 26px); }
.kt-kahraman.tam .kt-h1 { font-size: clamp(32px, 4.9vw, 59px); }
.kt .ref-heading, .kt .cert-heading { font-size: clamp(24px, 3.05vw, 37px); }
.kt .ref-sub, .kt .cert-sub { font-size: clamp(15.5px, 1.2vw, 18px); }
.kt .ref-stat-num { font-size: clamp(20px, 1.95vw, 26px); }