.btn-outline-light {
    text-transform: none !important;
    /* Açık renk çerçeveli butonların (btn-outline-light) metnini otomatik büyük harfe çevirmez */
}

/* =========================================================
   HEADER SLIDER – SLIDE 1 STYLES
   Düzenleyen: İldeniz Tufan Boy
   Son Güncelleme: 2025-12-02 13:28
   ========================================================= */
/* Hizmet Etiketi */
.header-badge {
    display: inline-block;
    padding: 0.65rem 1.4rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: rgba(0, 0, 0, 0.45);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #ffffff;
}

/* Büyük Başlık */
.header-title {
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
}

/* Açıklama Paragrafı */
.header-desc {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.65;
    margin-top: 0.8rem;
}

/* Hashtag Alanı */
.header-hashtags {
    margin-top: 12px;
}

/* Her bir Hashtag */
.header-tag {
    display: inline-block;
    margin-bottom: 4px;
    padding: 0.15rem 0.45rem;
    font-size: 0.72rem;
    font-family: 'SF Mono', 'Roboto Mono', monospace;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 4px;
    color: #ffffff;
    opacity: 0.85;
    margin-right: 3px;
}

    /* =========================================================
   HEADER SLIDER – Tipografi Düzeltmesi (Premium Weight)
   ========================================================= */
    .header-title {
        font-weight: 500 !important;
        /* 700 gibi durmasın */
        letter-spacing: 0.5px !important;
        /* premium aralık */
        line-height: 1.2 !important;
    }

    .header-desc {
        font-weight: 300 !important;
        /* yumuşak */
        letter-spacing: 0.2px !important;
        line-height: 1.5 !important;
        opacity: 0.92 !important;
        /* hafif transparan */
    }

    .header-badge {
        font-weight: 500 !important;
        letter-spacing: 1px !important;
    }

    .header-tag {
        font-weight: 400 !important;
        letter-spacing: 0.4px !important;
    }

    /* =========================================================
   HERO HEADER — SLIDE ICON NAV (HERO-NAV-01)
   Açıklama: Hero slider altındaki ikon bazlı slayt navigasyonu.
   Amaç: Kullanıcının doğrudan ilgili ana slayta atlamasını sağlamak.
   Last Modified: 2025-12-07 — Mirai Dev Team (Tooltip eklendi)
   ========================================================= */

    #hero-header .hero-slider-nav {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 6rem;
        /* DEĞİŞTİRİLDİ: Eskisi 3.75rem idi.
                                Daha yukarı almak için 6rem yaptık. */
        z-index: 15;
        pointer-events: none;
        /* yalnızca butonlar tıklanabilir olacak */
    }

    #hero-header .hero-slider-nav-inner {
        display: flex;
        justify-content: center;
        gap: 0.75rem;
    }

    #hero-header .hero-slide-dot {
        pointer-events: auto;
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.45);
        background: rgba(0, 0, 0, 0.35);
        color: rgba(255, 255, 255, 0.65);
        /* DEĞİŞTİRİLDİ: Eskisi #ffffff.
                                        Rengi biraz soluklaştırdık. */
        font-size: 0.75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        outline: none;
        cursor: pointer;
        transition: all 0.25s ease;
        opacity: 0.6;
        /* DEĞİŞTİRİLDİ: Eskisi 0.65.
                                        Genel opaklık hafifçe düşürüldü. */
        position: relative;
        /* EKLENDİ: Tooltip'i bu butonun
                                        göreli koordinatına bağlamak için. */
    }

    #hero-header .hero-slide-dot .hero-dot-label {
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    #hero-header .hero-slide-dot.is-active,
    #hero-header .hero-slide-dot:hover,
    #hero-header .hero-slide-dot:focus {
        opacity: 1;
        border-color: #ffffff;
        background: rgba(0, 0, 0, 0.65);
        color: #ffffff;
        /* EKLENDİ: Aktif/hover olduğunda
                                        sayıları tekrar tam beyaz yap. */
        transform: translateY(-2px);
    }

    /* =========================================================
   TOOLTIP: aria-label içeriğini gösteren balon
   ========================================================= */

    /* EKLENDİ: Tooltip balonu — metin kaynağı olarak aria-label kullanılır */
    #hero-header .hero-slide-dot::after {
        content: attr(aria-label);
        /* BURASI ÖNEMLİ: Tooltip metni
                                        doğrudan aria-label'den okunuyor. */
        position: absolute;
        left: 50%;
        bottom: 135%;
        /* dairenin biraz üstünde */
        transform: translate(-50%, 4px);
        padding: 0.25rem 0.5rem;
        background: rgba(0, 0, 0, 0.85);
        color: #ffffff;
        font-size: 0.68rem;
        line-height: 1.2;
        white-space: nowrap;
        border-radius: 0.35rem;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
        z-index: 20;
    }

    /* EKLENDİ: Tooltip'in küçük oku (üçgen) */
    #hero-header .hero-slide-dot::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 125%;
        transform: translateX(-50%);
        border-width: 6px 6px 0 6px;
        border-style: solid;
        border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        z-index: 20;
    }

    /* EKLENDİ: Hover/focus halinde tooltip'i göster */
    #hero-header .hero-slide-dot:hover::after,
    #hero-header .hero-slide-dot:focus::after {
        opacity: 1;
        transform: translate(-50%, 0);
        /* hafif yukarı gelsin */
    }

    #hero-header .hero-slide-dot:hover::before,
    #hero-header .hero-slide-dot:focus::before {
        opacity: 1;
    }

    @media (max-width: 767.98px) {
        #hero-header .hero-slider-nav {
            bottom: 4rem;
            /* DEĞİŞTİRİLDİ: Eskisi 2.5rem.
                                        Mobilde de biraz yukarı aldık. */
        }

        #hero-header .hero-slide-dot {
            width: 1.9rem;
            height: 1.9rem;
            font-size: 0.7rem;
        }
    }


/* =========================================================
   HEADER TITLE
   ========================================================= */

.header-title {
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.35;
}





#hero-header .header-badge{ font-size: 12px; line-height: 1.2; }

@media (max-width: 991px){
  #hero-header .header-badge{ font-size: 10px; }
}



#hero-header .header-title{ font-size: 34px; line-height: 1.2; }

@media (max-width: 991px){
  #hero-header .hheader-title{ font-size: 14px; }
}