/*
|==========================================================================
| ETKİLEŞİM VE MALZEME KATMANI
|==========================================================================
| Apple tasarım ilkelerinin (emilkowalski/skills — apple-design) siteye
| uygulanmış hâli. Tek dosyada toplanmasının nedeni kaskad sırası:
| bu dosya, sayfa CSS'lerinden SONRA, </head>'den hemen önce enjekte edilir
| (database-connect.php → kaInjectInteractionStylesheet). Böylece sayfa
| bazlı kurallara !important yazmadan üstün gelir.
|
| ÖLÇÜM — bu dosya yazılmadan önce projede:
|   :hover transform kuralı ......... 25
|   :active transform kuralı ......... 1     ← basma geri bildirimi yok denecek kadar az
|   (akordeon başlıkları bu kuralın dışında tutuldu — aşağıya bakın)
|   prefers-reduced-transparency ..... 0 dosya
|   prefers-contrast ................. 1 dosya (yalnızca feedback-modal.css)
|   font-optical-sizing .............. 0
|
| PROJE KURALLARI KORUNUR:
|   box-shadow yok · outline yok · gereksiz !important yok · marka renkleri aynı
*/


/* ==========================================================================
   1. BASMA GERİ BİLDİRİMİ
   ==========================================================================
   İlke: geri bildirim BASARKEN görünür, bırakırken değil. Ölçü de ilkeyle
   birlikte veriliyor: scale(0.97), 100ms, ease-out.

   Neden transform: layout tetiklemez, compositor üzerinde çalışır; 100ms'lik
   bir geri bildirimin kare atlaması kabul edilemez.

   Neden bu kadar uzun seçici listesi: projede ortak bir buton sınıfı yok
   (.nu-btn, .ps-btn, .fb-icon-btn, .ka-doc-btn ... hepsi ayrı doğmuş).
   Tek tek yazmak, hepsini tek sınıfa taşımaktan çok daha az riskli.
*/
button,
[role="button"],
input[type="submit"],
input[type="button"],
.btn,
.ka-btn,
.form-btn,
.nu-btn,
.ps-btn,
.osa-btn,
.ka-doc-btn,
.ka-report-btn,
.ka-lp-nav-btn,
.ka-ready-cover-open,
.ka-status-link,
.ka-status-back,
.ka-forbidden-btn,
.fb-icon-btn,
.fb-send-button,
.fb-attach-button,
.fb-poll-inline-button {
    /* Dokunmatikte 300ms gecikmeyi ve gri parlamayı kaldırır:
       geri bildirim parmağın değdiği anda görünür. */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 100ms var(--ka-ease-out, cubic-bezier(0, 0, .2, 1));
}

button:active:not(:disabled):not([aria-disabled="true"]),
[role="button"]:active:not([aria-disabled="true"]),
input[type="submit"]:active:not(:disabled),
input[type="button"]:active:not(:disabled),
.btn:active:not(:disabled),
.ka-btn:active:not(:disabled),
.form-btn:active:not(:disabled),
.nu-btn:active:not(:disabled),
.ps-btn:active:not(:disabled),
.osa-btn:active:not(:disabled),
.ka-doc-btn:active,
.ka-report-btn:active,
.ka-lp-nav-btn:active:not(:disabled),
.ka-ready-cover-open:active,
.ka-status-link:active,
.ka-status-back:active,
.ka-forbidden-btn:active,
.fb-icon-btn:active,
.fb-send-button:active,
.fb-attach-button:active,
.fb-poll-inline-button:active {
    transform: scale(.97);
}

/*
   AKORDEON BAŞLIKLARI BU GERİ BİLDİRİMİN DIŞINDA.

   .accordion-button tam genişlikte bir <button>'dır; scale(.97) uygulandığında
   kenarları içeri kaçtığı için basma hissi yerine "eğilip büküldü" izlenimi
   veriyordu. Bu düğmelerde geri bildirimi zaten panelin açılıp kapanma
   animasyonu ve ok işaretinin dönmesi veriyor; ayrıca ölçek değişimine
   gerek yok.
*/
.accordion-button:active,
.accordion-button:active:not(:disabled):not([aria-disabled="true"]) {
    transform: none;
}

/* Basma anında gözle görülür ama sakin bir geri bildirim: yüzey tonu. */
.accordion-button {
    transition: background-color 160ms var(--ka-ease-out, cubic-bezier(0, 0, .2, 1)),
        color 160ms var(--ka-ease-out, cubic-bezier(0, 0, .2, 1));
}

.accordion-button::after {
    transition: transform 200ms var(--ka-ease-out, cubic-bezier(0, 0, .2, 1));
}

/*
   Devre dışı düğme basılmış gibi görünmemeli — yoksa "çalıştı" sanılır.
*/
button:disabled:active,
.btn:disabled:active,
.ka-btn:disabled:active,
.form-btn:disabled:active,
.nu-btn:disabled:active,
.ps-btn:disabled:active,
[aria-disabled="true"]:active {
    transform: none;
}


/* ==========================================================================
   2. HAREKET: YALNIZCA COMPOSITOR DOSTU ÖZELLİKLER
   ==========================================================================
   İlke: yalnızca transform ve opacity animasyonlansın; will-change ipucu
   verilsin. will-change bilinçli olarak DAR tutuldu — her öğeye yazmak
   GPU katmanı israfı yapar ve mobilde performansı düşürür.
*/
.ka-lp-nav-btn,
.fb-send-button,
.ka-modal,
.modal-content,
.fb-group-modal-card {
    will-change: transform, opacity;
}


/* ==========================================================================
   3. AÇILIR KATMANLAR TETİKLEYİCİDEN DOĞAR
   ==========================================================================
   İlke: menü/popover, tetikleyen düğmeden çıkıyormuş gibi açılmalı; ekranın
   ortasından belirmemeli. transform-origin bunu tek satırda sağlar.
*/
.ka-ready-cover-popover,
.fb-message-menu,
.fb-emoji-panel,
.ka-sidebar-popover,
.dropdown-menu {
    transform-origin: top center;
}

.ka-sidebar-popover {
    /* Kenar çubuğu açılırları soldaki tetikleyiciden çıkar. */
    transform-origin: left center;
}


/* ==========================================================================
   4. TİPOGRAFİ: BOYUTA GÖRE TRACKING VE LEADING
   ==========================================================================
   İlke: tek bir letter-spacing tüm boyutlara uygulanmaz. Harf boşluğu boyut
   büyüdükçe DARALIR, satır aralığı ise daralır; gövde metninde tersi geçerli.

   Buradaki değerler ilkenin verdiği sayılar: büyük başlık -0.02em / 1.05,
   gövde 0 / 1.5.

   Kapsam bilinçli olarak dar: yalnızca başlık etiketleri ve sayfa başlığı
   sınıfları. Projede 1240 sabit px font-size var; hepsine dokunmak büyük
   regresyon riski taşırdı, o yüzden yalnızca hiyerarşinin tepesi düzeltildi.
*/
html {
    /* Sistem yazı tipi optik boyutlandırma tablolarını taşır; açık bırakılır. */
    font-optical-sizing: auto;
}

/*
   SATIR YÜKSEKLİĞİNE DOKUNULMUYOR — ölçüm gerekçesi:
   Panoda h1 zaten -0.66px (= -0.02em) tracking taşıyor, yani ilkeye uygun
   ayarlanmış. line-height değerleri de sayfa sayfa elle dengelenmiş; bunları
   tek elden ezmek h3'te 34px → 36px gibi sessiz kaymalar üretiyordu.
   Bu yüzden yalnızca EKSİK OLAN ölçek uygulanıyor: harf aralığı.
*/
h1,
.ka-page-title,
.ka-lp-overview-intro h1,
.fade-header {
    letter-spacing: -0.01em;
}

h2,
.ka-section-title {
    letter-spacing: -0.01em;
}

h3,
h4 {
    letter-spacing: -.01em;
}

p,
.ka-text-body,
.ka-lp-overview-intro p {
    letter-spacing: 0;
}

/*
   Bulanık yüzey üzerindeki metin: ilke, okunabilirlik için biraz daha kalın
   ve biraz daha açık harf aralığı istiyor.
*/
.ka-lp-builder-topbar .ka-lp-title-group,
.fb-message-form .fb-char-counter {
    letter-spacing: .005em;
}


/* ==========================================================================
   5. DOKUNMA HEDEFİ PAYI
   ==========================================================================
   İlke: dokunma hedefinin çevresinde ~10px pay olsun; küçük ikon düğmeler
   parmakla ıskalanmasın. Görsel boyut DEĞİŞMEZ — yalnızca vurulabilir alan
   büyür (::after ile şeffaf bir alan serilir).
*/
.fb-icon-btn,
.fb-attach-button,
.fb-poll-inline-button {
    position: relative;
}

.fb-icon-btn::after,
.fb-attach-button::after,
.fb-poll-inline-button::after {
    content: "";
    position: absolute;
    inset: -10px;
    /* Görünmez; yalnızca isabet alanını büyütür. */
}


/* ==========================================================================
   5b. MODAL KARARTMASI TEKLEŞTİRİLİR
   ==========================================================================
   İlke: "Aynı görünüm = aynı davranış." Modal açmak her yerde aynı işi
   yapıyorsa arka plan her yerde aynı ölçüde geri itilmeli.

   ÖLÇÜM — düzeltmeden önceki karartma değerleri:
     .fb-modal (feedback-modal.css) ....... .58
     .fb-modal (feedback.css) ............. .46, .38, .58   ← aynı seçici, üç değer
     .lp-modal-overlay .................... .42
     .bbb-modal ........................... .42
     .ka-bbb-report-dialog::backdrop ...... .56

   Hepsi --ka-scrim (.58) üzerinde birleşiyor. Bu dosya en sonda yüklendiği
   için aynı özgüllükte yazmak yeterli; !important gerekmiyor.
*/
.fb-modal,
.lp-modal-overlay,
.bbb-modal,
.ka-modal-backdrop,
.modal-backdrop {
    background-color: var(--ka-scrim, rgba(var(--ka-t-0f172a, 15, 23, 42), .58));
}

.ka-bbb-report-dialog::backdrop,
.ka-bbb-drawer-dialog::backdrop {
    background-color: var(--ka-scrim, rgba(var(--ka-t-0f172a, 15, 23, 42), .58));
}


/* ==========================================================================
   6. AZALTILMIŞ HAREKET
   ==========================================================================
   theme.css süre tokenlarını 1ms'e çekiyor; ancak projedeki CSS'lerin çoğu
   süreyi sabit yazmış (transition: .16s ease gibi) ve o kurallara token
   uğramıyor. Bu blok boşluğu kapatır.

   İlke: kaydırma/yay yerine opaklık; elastik ve taşma davranışı kalkar.
   Opaklık ve renk değişimleri KORUNUR — anlamayı kolaylaştırırlar.
*/
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 200ms !important;
        /* Yalnızca opaklık geçişi kalsın; kayma/ölçek anında olsun. */
        transition-property: opacity, background-color, border-color, color !important;
        scroll-behavior: auto !important;
    }

    /* Basma geri bildirimi bile ölçek kullanmasın; renk değişimi yeterli. */
    button:active,
    [role="button"]:active,
    .btn:active,
    .ka-btn:active,
    .form-btn:active {
        transform: none !important;
    }
}


/* ==========================================================================
   7. AZALTILMIŞ SAYDAMLIK
   ==========================================================================
   Projede bu tercih için HİÇBİR karşılık yoktu (ölçüm: 0 dosya).
   Cam etkisi (backdrop-filter) okuma güçlüğü çeken kullanıcılar için
   sorun yaratır: ilke, yüzeyi donuklaştırıp bulanıklığı kaldırmayı söyler.

   Marka renkleri değişmez; yalnızca saydamlık kapanır.
*/
@media (prefers-reduced-transparency: reduce) {
    .ka-lp-builder-topbar,
    .ka-lp-sticky-steps,
    #navbar-area,
    .fb-message-form,
    .fb-modal,
    .fb-gallery-card,
    .modal-content,
    .ka-modal,
    .ka-ready-cover-popover,
    .fb-group-modal-card,
    .ka-sidebar-popover,
    /* Aşağıdakiler ilk yazımda atlanmıştı; sayfa sayfa taranıp bulundu:
       bulanıklık uygulanıyordu ama geri düşüşleri yoktu. */
    .fb-sidebar,
    .fb-chat-head,
    .fb-date-divider,
    .ps-card,
    .social-x-header,
    .ka-edu-card-reason,
    .education-isProgress,
    .exam-status-badge,
    /* Son süpürme: rozet/etiket gibi küçük cam yüzeyler de kalmasın.
       Seçici listesi sayfa sayfa ölçülerek kapatıldı, tahminle değil. */
    [class*="badge"],
    [class*="chip"] {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background-color: var(--ka-bg-surface, #fff);
    }

    /* Karartma katmanı saydam kalmalı ki altındaki içerik seçilebilsin,
       ama daha opak olur: bulanıklık gidince ayrım ona kalıyor. */
    .fb-modal,
    .ka-modal-backdrop,
    .modal-backdrop {
        background-color: rgba(var(--ka-t-020617, 2, 6, 23), .78);
    }
}


/* ==========================================================================
   8. YÜKSEK KONTRAST
   ==========================================================================
   Projede yalnızca feedback-modal.css'te vardı; site geneline yayılıyor.
   İlke: neredeyse tam opak zemin + belirgin kenarlık.

   Proje outline'ları yasakladığı için odak göstergesi de burada kenarlıkla
   güçlendirilir — klavye kullanıcısı yüksek kontrastta kaybolmasın.
*/
@media (prefers-contrast: more) {
    :root {
        --ka-border: rgba(var(--ka-t-0f172a, 15, 23, 42), .55);
        --ka-border-card: rgba(var(--ka-t-0f172a, 15, 23, 42), .55);
        --ka-border-surface: rgba(var(--ka-t-0f172a, 15, 23, 42), .55);
        --ka-text-secondary: var(--ka-c-2b3444, #2b3444);
        --ka-text-muted: var(--ka-c-3d4757, #3d4757);
    }

    html.dark {
        --ka-border: rgba(255, 255, 255, .55);
        --ka-border-card: rgba(255, 255, 255, .55);
        --ka-border-surface: rgba(255, 255, 255, .55);
        --ka-text-secondary: var(--ka-c-e2e8f0, #e2e8f0);
        --ka-text-muted: var(--ka-c-cbd5e1, #cbd5e1);
    }

    .ka-lp-builder-topbar,
    .fb-message-form,
    .modal-content,
    .ka-modal {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background-color: var(--ka-bg-surface, #fff);
    }

    :focus-visible {
        border-color: var(--ka-primary-brand, var(--ka-c-6c63ff, #6c63ff));
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}


/* ==========================================================================
   9. TEMA GEÇİŞİ
   ==========================================================================
   İlke: aydınlık ↔ karanlık geçişinde ani parlaklık sıçraması olmasın.
   Yalnızca renk yumuşatılır; hareket eklenmez.
*/
html,
body {
    transition: background-color 220ms var(--ka-ease-standard, cubic-bezier(.2, 0, .2, 1)),
                color 220ms var(--ka-ease-standard, cubic-bezier(.2, 0, .2, 1));
}

@media (prefers-reduced-motion: reduce) {
    html,
    body {
        transition: none;
    }
}

/* ==========================================================================
   YAZI AĞIRLIĞI — göreli değerleri kapat
   ==========================================================================
   Bootstrap `b, strong { font-weight: bolder }` yazıyor. `bolder` GÖRELİ bir
   değerdir: ebeveyn 400 ise 700, ebeveyn 600 ise 800, 700 ise 900 olur.
   Ölçümde sayfada 800/900 ağırlıkla çizilen öğelerin kaynağı buydu — kaynak
   CSS'te tek bir 800+ bildirim kalmamasına rağmen ekranda kalınlık sürüyordu.

   apple-design §15: hiyerarşi ağırlık + boyut + satır yüksekliğiyle kurulur
   ve her değer savunulabilir olmalıdır (§16.7 Craft). Bu yüzden vurgu
   ağırlığı SABİT bir basamağa bağlanır.

   Bu dosya </head>'den hemen önce enjekte edildiği için Bootstrap'tan sonra
   gelir; !important gerekmez.
   ========================================================================== */

b,
strong,
.fw-bold,
.fw-bolder {
    /*
     * Vurgu, gövde metninin BİR kademe üstü (400 → 500).
     *
     * Önce 600 verilmişti; ölçümde 11–12px'lik bildirim ve günlük
     * satırlarındaki <strong> öğeleri bu ağırlıkla gereksiz kalın
     * görünüyordu. 500, küçük puntoda sakin kalırken normal punto ve
     * üstünde vurguyu korur.
     */
    font-weight: var(--ka-font-weight-medium, 500);
}