/*
 * Şablon dosyalarına (style.css, bootsnav.css, bootstrap) dokunmadan yapılan düzeltmeler.
 * Bu dosya diğer stillerden SONRA yüklenmelidir.
 */

/* 1) Dar ekranda kaydırınca .header "fixed-top" alır ve style.css'teki
 *    ".fixed-top .navbar-nav>li>a { color:#fff !important }" açılır mobil menünün
 *    (beyaz zeminli) bağlantılarını beyaz yapıp görünmez kılıyordu. O kural !important
 *    olduğundan aynı güçte !important gerekir; seçici (0,4,2) olduğu için (0,2,1) olanı
 *    yener ve yalnız menü bağlantılarını hedefler. Geniş ekran (>992px) etkilenmez.
 *    Hover/odak rengi: şablonun turuncusu (#ff5903) beyazda ~3:1 kaldığından
 *    4,5:1 için daha koyu bir turuncu-kahve kullanılır. */
@media (max-width: 992px) {
	.header.fixed-top nav.navbar.bootsnav .navbar-nav > li > a {
		color: #303030 !important;
	}
	.header.fixed-top nav.navbar.bootsnav .navbar-nav > li > a:hover,
	.header.fixed-top nav.navbar.bootsnav .navbar-nav > li > a:focus,
	.header.fixed-top nav.navbar.bootsnav .navbar-nav > li.active > a {
		color: #b33c00 !important;
	}
}

/* 2) Fare/dokunma tıklamasında bootstrap'in "a:focus" çerçevesi başka yere
 *    tıklanana dek kalıyordu. Yalnız klavye dışı odakta gizlenir. */
:focus:not(:focus-visible) {
	outline: none;
}

/* 3) Erişilebilirlik: klavye (Tab) ile gezinirken çerçeve belirgin kalır. */
:focus-visible {
	outline: 3px solid #ff5903;
	outline-offset: 2px;
}

/* 4) Tıklamada çerçeve gizlenince geri bildirim kalmıyordu; aşağıdaki kurallar
 *    yalnız basılı tutulurken (:active) kısa, sakin bir his verir. */

/* Dokunmatikte varsayılan gri kutu yerine şablonun turuncusundan yarı saydam ton. */
a, button, .btn {
	-webkit-tap-highlight-color: rgba(255, 89, 3, .18);
}

/* .scroll-top şablonda kendi beyaz halkasını taşıyor; madde 2 onu da siliyordu. */
.scroll-top:focus:not(:focus-visible) {
	outline: 3px solid rgba(255, 255, 255, .6);
}

/* Menü bağlantıları: geçiş kısa tutulur (şablonunki .15s). */
nav .navbar-nav > li > a {
	transition: background-color .1s ease-out, opacity .1s ease-out, color .15s ease-in-out;
}

/* Geniş ekran: kırmızı barda zemin tonu görünmez, bu yüzden hafif opaklık. Yazı beyaz kalır. */
nav .navbar-nav > li > a:active {
	opacity: .75;
}

/* Dar ekran: beyaz menüde siyahın %7'si kadar zemin tonu; opaklık gerekmez. */
@media (max-width: 992px) {
	nav .navbar-nav > li > a:active {
		opacity: 1;
		background-color: rgba(0, 0, 0, .07);
	}
}

/* Mağaza rozetleri / görsel bağlantılar: ölçek <img>'e uygulanır; <a> satır içi kaldığı için
 * komşu hizası ve <br> düzeni bozulmaz. Logo bağlantısı da kapsanır. */
a > img {
	transition: transform .1s ease-out, opacity .1s ease-out;
}
a:active > img {
	transform: scale(.97);
	opacity: .85;
}

/* Düğmeler ve yukarı çık: şablonda bunlarda transform yok; ölçek güvenle eklenir. */
.btn, button, .scroll-top {
	transition: transform .1s ease-out, opacity .1s ease-out;
}
.btn:active, button:active, .scroll-top:active {
	transform: scale(.97);
	opacity: .85;
}

/* Metin bağlantıları (alt bilgi, sayfa içi): ölçek yerine opaklık + alt çizgi. */
.footer a:active, .footer-links a:active, .copyright a:active, p a:active, li a:active {
	opacity: .75;
	text-decoration: underline;
}
/* Menü ve sosyal ikonlar bu genel metin kuralından muaf: alt çizgi menüde hoş durmaz. */
nav .navbar-nav > li > a:active, .social-hex:active {
	text-decoration: none;
}

/* Hareket azaltma tercihinde ölçek yok, yalnız opaklık. */
@media (prefers-reduced-motion: reduce) {
	a:active > img, .btn:active, button:active, .scroll-top:active {
		transform: none;
	}
}