/**
 * MTN Travel — marka renk vurguları
 * -----------------------------------------------------------------
 * Logodaki üç renk siteye küçük dozlarda serpiştirilir.
 * Yalnızca panelden "Marka renk vurguları" açıkken yüklenir; kapatınca
 * tasarım birebir eski hâline döner.
 *
 * Tailwind ÜRETMEZ; elle yazılmıştır, derleme gerektirmez.
 */

:root {
    /* Logonun tam renkleri — süs amaçlı (işaret, çizgi).
       Tek kaynak ui.css'tir; o yüklenmezse aynı değerlere geri düşer. */
    --brand-red:   var(--red,   #c91417);
    --brand-green: var(--green, #5bb02f);
    --brand-blue:  var(--blue,  #007ac1);

    /* Yazı ve ikon zeminleri için koyulaştırılmış karşılıkları.
       Logo yeşili beyaz üzerinde 2.7:1 kontrast verir — okunmaz.
       Aşağıdaki değerler WCAG eşiklerini geçer (ölçüldü). */
    --brand-red-ink:   #c91417;   /* beyaz zeminde 5.84:1 */
    --brand-green-ink: #3d7d1d;   /* beyaz zeminde 5.06:1 */
    --brand-blue-ink:  #007ac1;   /* beyaz zeminde 4.61:1 */

    /* Üç eşit dilim — logo çizgisi */
    --brand-bar: linear-gradient(90deg,
        var(--brand-red)   0%,  var(--brand-red)   33.33%,
        var(--brand-green) 33.33%, var(--brand-green) 66.66%,
        var(--brand-blue)  66.66%, var(--brand-blue)  100%);
}

/* -----------------------------------------------------------------
   1) Bölüm etiketlerinin (HAKKIMIZDA, NEDEN BİZ…) önündeki küçük işaret
   ----------------------------------------------------------------- */
[data-kicker] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

[data-kicker]::before {
    content: "";
    width: 26px;
    height: 3px;
    flex: none;
    border-radius: 2px;
    background: var(--brand-bar);
}

/* Ortalanmış başlıklarda işaret de ortalansın */
.text-center [data-kicker] {
    justify-content: center;
}

/* -----------------------------------------------------------------
   2) İkon kutuları — sırayla üç marka rengi
   ----------------------------------------------------------------- */
/* Beyaz ikon kontrastı: kırmızı 6.2:1 · yeşil 4.6:1 · mavi 4.8:1 (orta ton) */
[data-brand-tile="0"] { background: linear-gradient(140deg, #d8241f, #a81013); }
[data-brand-tile="1"] { background: linear-gradient(140deg, #4d9a26, #356e19); }
[data-brand-tile="2"] { background: linear-gradient(140deg, #1b8ed2, #00639a); }

[data-brand-tile] {
    box-shadow: 0 6px 16px -8px rgb(0 0 0 / 0.35);
}

/* -----------------------------------------------------------------
   3) Rakamlar — her kutu farklı marka renginde
   ----------------------------------------------------------------- */
[data-brand-text="0"] { color: var(--brand-red-ink); }
[data-brand-text="1"] { color: var(--brand-green-ink); }
[data-brand-text="2"] { color: var(--brand-blue-ink); }

/* -----------------------------------------------------------------
   4) Hizmet kartları — üstte, üzerine gelince açılan marka çizgisi
   ----------------------------------------------------------------- */
[data-brand-edge] {
    position: relative;
}

[data-brand-edge]::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 3px;
    background: var(--brand-bar);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    z-index: 2;
    pointer-events: none;
}

@media (hover: hover) {
    [data-brand-edge]:hover::after { transform: scaleX(1); }
}

/* Dokunmatik cihazlarda hover yok — çizgi hep görünsün */
@media (hover: none) {
    [data-brand-edge]::after { transform: scaleX(1); }
}

/* -----------------------------------------------------------------
   5) Alt bilgi üstündeki marka çizgisi
   ----------------------------------------------------------------- */
[data-footer]::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 3px;
    background: var(--brand-bar);
    z-index: 1;
}

/* -----------------------------------------------------------------
   6) Klavye odağı  (metin seçimi rengi ui.css'te tanımlıdır)
   ----------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

/* -----------------------------------------------------------------
   7) HAREKETİ AZALT
   ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    [data-brand-edge]::after {
        transition: none;
        transform: scaleX(1);
    }
}