/*
 * Torna Ustası v2 — refinements.css
 * Yalnız iyileştirme: tasarım, sayfa yapısı, menüler, renkler ve logo aynen kalır.
 * Her blok bağımsızdır; bir sorunu geri almak için ilgili bloğu silmek yeterlidir.
 * Tümünü kapatmak için: inc/v2-refinements.php → tornaustasi_v2_enqueue_refinements.
 * Not: Tailwind (CDN) kendi stilini <head> sonuna eklediği için buradaki kurallar
 * gerektiğinde #masthead / html gibi öneklerle daha belirgin yazılmıştır.
 */

/* ------------------------------------------------------------------
 * R1. Masaüstü üst menü: öğeler tek satırda kalsın (1024–1535 px'te
 *     "Ustaya Sor", "Giriş Yap", "Hesap Oluştur" iki satıra kırılıyor,
 *     "Anasayfa" logoya yapışıyordu). Yalnız aralık daraltılır.
 * ------------------------------------------------------------------ */
@media (min-width: 1024px) {
    #masthead #site-navigation .nav-link,
    #masthead .btn-primary,
    #masthead .btn-secondary {
        white-space: nowrap;
    }

    #masthead #site-navigation {
        margin-left: 1.5rem;
        margin-right: 1rem;
    }
}

@media (min-width: 1024px) and (max-width: 1535.98px) {
    #masthead #site-navigation > ul > li + li {
        margin-left: 1.15rem;
    }

    #masthead .btn-primary,
    #masthead .btn-secondary {
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }
}

@media (min-width: 1024px) and (max-width: 1279.98px) {
    #masthead #site-navigation {
        margin-left: 0.75rem;
        margin-right: 0.5rem;
    }

    #masthead #site-navigation > ul > li + li {
        margin-left: 0.7rem;
    }

    #masthead #site-navigation .nav-link {
        font-size: 0.8125rem;
    }

    #masthead .btn-primary,
    #masthead .btn-secondary {
        padding: 0.55rem 0.8rem;
        font-size: 0.8125rem;
    }
}

/* ------------------------------------------------------------------
 * R2. Koyu modda logo: koyu renkli logo yazısı (#2b2826) koyu başlıkta
 *     görünmüyordu. Ayrı koyu logo yüklenmediyse logo açık renge çevrilir
 *     (yeşil ton korunur). Customizer › Logo › "Koyu Mod Logosu" yüklenirse o kullanılır.
 * ------------------------------------------------------------------ */
html.dark #masthead .tu-site-logo:not(.tu-site-logo--has-dark) {
    filter: invert(1) hue-rotate(180deg) brightness(1.15);
    opacity: 1;
}

#masthead .tu-site-logo-dark {
    display: none;
}

html.dark #masthead .tu-site-logo--has-dark {
    display: none;
}

html.dark #masthead .tu-site-logo-dark {
    display: block;
    opacity: 1;
}

/* ------------------------------------------------------------------
 * R3. Ana sayfa forum kartları (mobil): #homepage-forums 100vw genişlik
 *     + margin-left:0 birleşimiyle sağa ~16 px taşıyor, kartların sağ kenarı
 *     kesiliyordu.
 * ------------------------------------------------------------------ */
@media (max-width: 640px) {
    html body.home #homepage-forums {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
}

/* ------------------------------------------------------------------
 * R4. Koyu modda açık renkli degrade arka planlar (from-*-50 → to-white vb.)
 *     beyaz kalıyordu; ör. makale başlık alanı beyaz zemin + açık yazı
 *     = okunamıyor. Yalnız dark: karşılığı olmayan soluk degradeler etkilenir.
 * ------------------------------------------------------------------ */
html.dark .bg-gradient-to-b.from-gray-50:not([class*="dark:"]),
html.dark .bg-gradient-to-r.from-gray-50:not([class*="dark:"]),
html.dark .bg-gradient-to-br.from-gray-50:not([class*="dark:"]),
html.dark [class~="from-blue-50"]:not([class*="dark:from-"]):not([class*="dark:bg-"]),
html.dark [class~="from-green-50"]:not([class*="dark:from-"]):not([class*="dark:bg-"]),
html.dark [class~="from-yellow-50"]:not([class*="dark:from-"]):not([class*="dark:bg-"]),
html.dark [class~="from-red-50"]:not([class*="dark:from-"]):not([class*="dark:bg-"]),
html.dark [class~="from-purple-50"]:not([class*="dark:from-"]):not([class*="dark:bg-"]),
html.dark [class~="from-indigo-50"]:not([class*="dark:from-"]):not([class*="dark:bg-"]),
html.dark [class~="from-orange-50"]:not([class*="dark:from-"]):not([class*="dark:bg-"]) {
    background-image: linear-gradient(to bottom, #263241, #1f2937);
    border-color: #374151;
}

html.dark .post-header {
    background-image: linear-gradient(to bottom, #263241, #1f2937);
    border-color: #374151;
}

/* ------------------------------------------------------------------
 * R5. Teknik araç sayfaları (TornaUstası Teknik Araçlar eklentisi, .tu-tool):
 *     sitenin dark-mode.css'i bu kartları kapsamıyordu; koyu modda beyaz kart
 *     koyu sayfada parlıyordu. YALNIZ koyu mod: kart/girdi/sonuç renkleri sitenin
 *     koyu paletine (gray-800/900) uyarlanır; açık mod ve düğme rengi aynen kalır.
 *     Kendi koyu modunu taşıyan CNC Program Üretici (.tu-cnc) hariç tutulur.
 *     Eklenti dosyalarına dokunulmaz.
 * ------------------------------------------------------------------ */
html.dark body .tu-tool:not(.tu-cnc) {
    --tu-bg: #1f2937;
    --tu-text: #f3f4f6;
    --tu-muted: #9ca3af;
    --tu-line: #374151;
    box-shadow: none;
}

html.dark body .tu-tool:not(.tu-cnc) input,
html.dark body .tu-tool:not(.tu-cnc) select {
    background: #111827;
    border-color: #4b5563;
    color: #f3f4f6;
}

html.dark body .tu-tool:not(.tu-cnc) .tu-results {
    background: #111827;
    border-color: #374151;
}

html.dark body .tu-tool:not(.tu-cnc) .tu-result,
html.dark body .tu-tool:not(.tu-cnc) .tu-code-card,
html.dark body .tu-tool:not(.tu-cnc) .tu-tabs button,
html.dark body .tu-tool:not(.tu-cnc) .tu-fit-presets button {
    background: #1f2937;
    border-color: #374151;
    color: #f3f4f6;
}

/* Etkin sekme/ön ayar: açık moddaki koyu (#17202a) zemin koyu sayfada kayboluyordu */
html.dark body .tu-tool:not(.tu-cnc) .tu-tabs button.is-active,
html.dark body .tu-tool:not(.tu-cnc) .tu-fit-presets button.is-active,
html.dark body .tu-tool:not(.tu-cnc) .tu-fit-presets button:hover {
    background: #f3f4f6;
    border-color: #f3f4f6;
    color: #111827;
}

html.dark body .tu-tool:not(.tu-cnc) .tu-code-badge {
    background: #374151;
    color: #f9fafb;
}

html.dark body .tu-tool:not(.tu-cnc) .tu-code-card p,
html.dark body .tu-tool:not(.tu-cnc) .tu-code-row b {
    color: #d1d5db;
}

html.dark body .tu-tool:not(.tu-cnc) .tu-code-row code {
    background: #111827;
    color: #e5e7eb;
}

/* ------------------------------------------------------------------
 * R6. Mobilde yüzen "Ekspertiz Teklifi Al" düğmesi içeriğin üstünü
 *     kapatıyordu: < 640 px'te yalnız simge (yuvarlak), daha köşede.
 *     Masaüstü görünüm değişmez. Düğmenin erişilebilir adı korunur.
 * ------------------------------------------------------------------ */
@media (max-width: 639.98px) {
    html body #quote-float-btn {
        right: 1rem;
        bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
        padding: 0;
        width: 3.25rem;
        height: 3.25rem;
        justify-content: center;
        gap: 0;
    }

    html body #quote-float-btn > span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    html body #quote-float-btn > svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    html body #back-to-top {
        right: 1.125rem;
        bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
    }

    /* Sayfanın en altı yüzen düğmenin altında kalmasın */
    #colophon,
    footer.site-footer {
        padding-bottom: 4.5rem;
    }
}

/* ------------------------------------------------------------------
 * R7. Klavye odağı görünür olsun (erişilebilirlik). Fareyle tıklamada
 *     görünmez (:focus-visible).
 * ------------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid #7bb639;
    outline-offset: 2px;
}

/* ------------------------------------------------------------------
 * R8. Hareket azaltma tercihi: sponsor kaydırma animasyonu ve hover
 *     zıplamaları kapatılır (yalnız "Hareketi azalt" açık cihazlarda).
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .animate-scroll,
    .sponsor-slider {
        animation: none !important;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ------------------------------------------------------------------
 * R9. İş ilanları başlık rengi: açık zeminde #7ED957 kontrastı 1.8:1 idi
 *     (okunması zor). Açık temada aynı yeşilin koyu tonu, koyu temada
 *     eski renk korunur.
 * ------------------------------------------------------------------ */
.tu-job-title {
    color: #3f7f1f;
    text-decoration: none;
    transition: color 0.2s ease;
}

.tu-job-title:hover,
.tu-job-title:focus {
    color: #2f6a14;
}

html.dark .tu-job-title {
    color: #7ed957;
}

html.dark .tu-job-title:hover,
html.dark .tu-job-title:focus {
    color: #4caf50;
}

/* ------------------------------------------------------------------
 * R10. Konu sayfası: "(0 değerlendirme)" yazısı dar ekranda kartın dışına
 *      taşıyordu.
 * ------------------------------------------------------------------ */
.topic-rating .topic-rating__summary {
    flex-wrap: wrap;
    row-gap: 0.25rem;
}

.topic-rating .topic-rating__count {
    white-space: nowrap;
}

/* ------------------------------------------------------------------
 * R11. Kurs arşivi (/kurslar/): içerik başlığın hemen altına yapışıktı.
 *      Kurs detay (mobil): kenar boşluğu sitenin 16 px düzenine,
 *      tanıtım videosu (300×150 varsayılan) tam genişliğe ve 16:9'a.
 * ------------------------------------------------------------------ */
.tutor-wrap.tutor-courses-wrap {
    padding-top: 2rem;
}

.tutor-course-details-page .tutor-video-player iframe:not([class*="plyr"]):not([style*="position"]) {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
}

@media (max-width: 767.98px) {
    .tutor-course-details-page.tutor-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ------------------------------------------------------------------
 * R12. Sponsor logoları koyu modda: koyu yazılı logolar koyu kartta
 *      kayboluyordu; logo kutusu koyu modda da açık zeminli kalır.
 * ------------------------------------------------------------------ */
html.dark .sponsor-item > div {
    /* dark-mode.css'teki ".dark .bg-white { ... !important }" kuralını yalnız logo kutusu için aşar */
    background-color: #f9fafb !important;
    border-color: #374151;
}

/* Kutunun içindeki hover katmanı (.rounded-xl) dark-mode.css yüzünden opak koyu oluyordu */
html.dark .sponsor-item > div > div.absolute {
    background-color: transparent;
}

html.dark .sponsor-item img {
    opacity: 1;
}

/* ------------------------------------------------------------------
 * R13. 3D Program Üretici girişleri (yalnız /cnc-program-uretici/ yayımlıysa basılır):
 *      küçük yeşil "Yeni" hapı; 1024–1535 px'te menü tek satır kalsın diye
 *      menü öğesi ikon + "3D" kısa metne iner.
 * ------------------------------------------------------------------ */
.tu-new-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 9999px;
    background: #7bb639;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

#masthead .tu-nav-3d__short {
    display: none;
}

@media (min-width: 1024px) and (max-width: 1535.98px) {
    #masthead .tu-nav-3d__long {
        display: none;
    }

    #masthead .tu-nav-3d__short {
        display: inline;
    }
}

/* Hero'daki 3 düğme: 1280 px ve üstünde tek satıra sığsın (yalnız yatay iç boşluk daralır;
   alt alta sarılırsa hero yükselip arka plan görseli farklı kırpılıyordu) */
@media (min-width: 1280px) {
    .tu-hero-actions.tu-hero-actions {
        gap: 0.75rem;
    }

    .tu-hero-actions.tu-hero-actions > a {
        padding-left: 0.875rem;
        padding-right: 0.875rem;
    }
}

/* Koyu modda dark-mode.css'in [class*="badge"] kuralına takılmaması için ayrı sınıf adı (tu-new-pill) */
html.dark .tu-new-pill {
    background: #7bb639;
    color: #fff;
}