/**
 * DVA Header — responsive & düzen iyileştirmesi
 * main.css'in üstüne biner; mevcut kuralları ezerek header'ı
 * her genişlikte düzenli tutar. main.css DEĞİŞTİRİLMEZ.
 *
 * Strateji:
 *  - Menü öğeleri asla satır kırmaz (nowrap)
 *  - Logo (sol) | menü (orta, esnek) | aksiyonlar (sağ) dengeli
 *  - Menü sığmadan hamburger'a geçiş 1200px'te (1024 çok geç kalıyordu)
 *  - Tutarlı boşluklar
 */

/* ---- Navbar düzeni: 3 bölge, dengeli ---- */
.header .navbar {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: nowrap;
}

.header .logo-link {
	flex: 0 0 auto;   /* logo sabit */
}

/* Menü sola-orta, kalan alanı alır; vize butonları margin-auto ile sağa iter */
.header .nav-menu {
	flex: 1 1 auto;
	justify-content: flex-start;
	gap: 1.6rem;
	flex-wrap: nowrap;
	align-items: center;
}

/* Aksiyonlar sağda sabit */
.header .header-actions {
	flex: 0 0 auto;
	gap: 0.6rem;
}

/* Logo — daha belirgin */
.header .logo {
	height: 64px !important;
}

/* Menü öğeleri asla iki satıra kırılmasın */
.header .nav-menu > li {
	white-space: nowrap;
}
.header .nav-menu > li > a {
	white-space: nowrap;
}

/* ---- Geniş masaüstü (≥1400px): rahat boşluklar ---- */
@media (min-width: 1550px) {
	.header .nav-menu { gap: 2rem; }
	.header .header-actions { gap: 1.25rem; }
}

/* ---- Orta masaüstü (1350–1549px): boşlukları kıs (buton sıkıştırma dosya sonunda) ---- */
@media (min-width: 1350px) and (max-width: 1549px) {
	.header .navbar { gap: 0.8rem; }
	.header .nav-menu { gap: 0.85rem; }
	.header .nav-menu > li > a { font-size: 0.9rem; }
	.header .header-actions { gap: 0.5rem; }
	.header .social-icons { gap: 0.6rem; }
}

/* ---- 1200px altı: masaüstü menüyü gizle, hamburger'a geç ----
   main.css 1024'te geçiyordu; menü öğeleri o genişliğe sığmadığı
   için 1200'e çekiyoruz. */
@media (max-width: 1349px) {
	.header .nav-menu { display: none !important; }
	.header .header-actions { display: none !important; }
	.header .mobile-toggle { display: flex !important; }
}

/* ≥1200px: hamburger gizli, masaüstü görünür (main.css 1024'ü ezmemek için net) */
@media (min-width: 1350px) {
	.header .mobile-toggle { display: none !important; }
	.header .nav-menu { display: flex !important; }
	.header .header-actions { display: flex !important; }
}

/* ---- Hamburger butonu görünümü ---- */
.header .mobile-toggle {
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
}
.header .mobile-toggle span {
	display: block;
	width: 26px;
	height: 2.5px;
	background: var(--red, #d71923);
	border-radius: 2px;
	transition: 0.3s;
}

/* ---- Mobil açılır menü ---- */
.mobile-menu {
	position: fixed;
	top: 0;
	right: -100%;
	width: min(85%, 340px);
	height: 100vh;
	height: 100dvh;              /* dinamik viewport — iOS adres çubuğu sorununu çözer */
	background: #fff;
	box-shadow: -4px 0 24px rgba(0,0,0,0.12);
	z-index: 10000;
	transition: right 0.32s cubic-bezier(.4,0,.2,1);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;   /* iOS akıcı scroll */
	padding-top: 5rem;
	padding-bottom: 2rem;       /* alttaki butonlar kesilmesin */
	display: block;
	overscroll-behavior: contain;
}
.mobile-menu.active {
	right: 0;
}
.mobile-menu-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.45);
	opacity: 0;
	visibility: hidden;
	transition: 0.3s;
	z-index: 9999;
}
.mobile-menu-overlay.active {
	opacity: 1;
	visibility: visible;
}

/* Mobil menü liste görünümü */
.mobile-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.mobile-nav-list li {
	border-bottom: 1px solid #f0f0f0;
}
.mobile-nav-list li a {
	display: block;
	padding: 15px 1.5rem;
	color: #2c2c2c;
	text-decoration: none;
	font-size: 1rem;
	font-weight: 500;
	transition: 0.2s;
}
.mobile-nav-list li a:hover {
	background: #f8f9fa;
	color: var(--red, #d71923);
	padding-left: 1.8rem;
}

/* Mobilde masaüstü menü/aksiyon kesin gizli, ≥1200 mobil menü kapalı */
@media (min-width: 1350px) {
	.mobile-menu, .mobile-menu-overlay { display: none; }
}

/* =========================================================================
 * Sosyal ikonları gizle + header-actions düzeni
 * ====================================================================== */
.header .social-icons {
	display: none !important;
}

/* header-actions: butonlar solda, sepet en sağda */
@media (min-width: 1350px) {
	.header .header-actions {
		display: flex !important;
		align-items: center;
		gap: 0.6rem;
	}
	/* Sepeti en sağa it */
	.header .header-cart-button {
		order: 99;
		margin-left: 0.3rem;
	}
}

/* =========================================================================
 * Ülke vize menü öğeleri → dolu buton (kendi renginde)
 * Rusya mavi, Suudi yeşil. href ile hedefleniyor (tema class taşımıyor).
 * "Yeni" rozeti butonun sağ-üst köşesinde küçük badge.
 * ====================================================================== */

/* Ortak buton gövdesi — masaüstü */
@media (min-width: 1350px) {
	.header .nav-menu > li:has(> a[href*="rusya-vize-basvurusu"]),
	.header .nav-menu > li:has(> a[href*="suudi-arabistan-vize-basvurusu"]) {
		position: relative;
	}

	/* Rusya öğesi grubu sağa iter (normal menüden ayırır) */
	.header .nav-menu > li:has(> a[href*="rusya-vize-basvurusu"]) {
		margin-left: auto;
	}
	/* Suudi ile Rusya arası küçük boşluk */
	.header .nav-menu > li:has(> a[href*="suudi-arabistan-vize-basvurusu"]) {
		margin-left: 0.5rem;
	}

	.header .nav-menu a[href*="rusya-vize-basvurusu"],
	.header .nav-menu a[href*="suudi-arabistan-vize-basvurusu"] {
		display: inline-block;
		padding: 10px 18px;
		border-radius: 10px;
		color: #fff !important;
		font-weight: 600;
		font-size: 0.9rem;
		white-space: nowrap;
		transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
		position: relative;
	}

	/* Rusya — mavi dolu buton */
	.header .nav-menu a[href*="rusya-vize-basvurusu"] {
		background: #0039A6;
	}
	.header .nav-menu a[href*="rusya-vize-basvurusu"]:hover {
		filter: brightness(1.08);
		transform: translateY(-1px);
		box-shadow: 0 4px 12px rgba(0,57,166,0.28);
	}

	/* Suudi — yeşil dolu buton */
	.header .nav-menu a[href*="suudi-arabistan-vize-basvurusu"] {
		background: #165d31;
	}
	.header .nav-menu a[href*="suudi-arabistan-vize-basvurusu"]:hover {
		filter: brightness(1.1);
		transform: translateY(-1px);
		box-shadow: 0 4px 12px rgba(22,93,49,0.28);
	}

	/* main.css'in .nav-link::after altçizgisini bu butonlarda kapat */
	.header .nav-menu a[href*="rusya-vize-basvurusu"]::after,
	.header .nav-menu a[href*="suudi-arabistan-vize-basvurusu"]::after {
		display: none !important;
	}

	/* "Yeni" rozeti — buton sağ-üst köşesinde (li::after ile) */
	.header .nav-menu > li:has(> a[href*="rusya-vize-basvurusu"])::after,
	.header .nav-menu > li:has(> a[href*="suudi-arabistan-vize-basvurusu"])::after {
		content: "Yeni";
		position: absolute;
		top: -7px;
		right: -6px;
		padding: 1px 6px;
		font-size: 8.5px;
		font-weight: 700;
		line-height: 1.5;
		color: #fff;
		border-radius: 99px;
		text-transform: uppercase;
		letter-spacing: 0.3px;
		box-shadow: 0 1px 4px rgba(0,0,0,0.2);
		z-index: 2;
	}
	/* Rozet zıt/kontrast renk: buton mavi→rozet turuncu, buton yeşil→rozet amber */
	.header .nav-menu > li:has(> a[href*="rusya-vize-basvurusu"])::after {
		background: #ff7a00;   /* mavinin üstünde turuncu, dikkat çeker */
	}
	.header .nav-menu > li:has(> a[href*="suudi-arabistan-vize-basvurusu"])::after {
		background: #d4a017;   /* yeşilin üstünde amber/altın */
	}
}

/* =========================================================================
 * MOBİL: vize öğeleri tam genişlik dolu buton (kendi renginde)
 * ====================================================================== */
.mobile-nav-list li:has(a[href*="rusya-vize-basvurusu"]),
.mobile-nav-list li:has(a[href*="suudi-arabistan-vize-basvurusu"]) {
	border-bottom: none;
	padding: 6px 1.5rem;
}
/* Rusya öğesinden önce ayırıcı boşluk (normal menüden ayrı grup) */
.mobile-nav-list li:has(a[href*="rusya-vize-basvurusu"]) {
	margin-top: 0.5rem;
	padding-top: 12px;
	border-top: 1px solid #ececec;
}

.mobile-nav-list a[href*="rusya-vize-basvurusu"],
.mobile-nav-list a[href*="suudi-arabistan-vize-basvurusu"] {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 1rem !important;
	border-radius: 10px;
	color: #fff !important;
	font-weight: 700;
	font-size: 1rem;
	text-align: center;
}
/* Rusya — mavi dolu buton */
.mobile-nav-list a[href*="rusya-vize-basvurusu"] {
	background: #0039A6 !important;
}
/* Suudi — yeşil dolu buton */
.mobile-nav-list a[href*="suudi-arabistan-vize-basvurusu"] {
	background: #165d31 !important;
}
/* Hover'da padding kaymasını engelle (main.css'i ez) */
.mobile-nav-list a[href*="rusya-vize-basvurusu"]:hover,
.mobile-nav-list a[href*="suudi-arabistan-vize-basvurusu"]:hover {
	padding-left: 1rem !important;
	filter: brightness(1.05);
}

/* "Yeni" rozeti — buton içinde, beyaz/yarı-saydam */
.mobile-nav-list a[href*="rusya-vize-basvurusu"]::after,
.mobile-nav-list a[href*="suudi-arabistan-vize-basvurusu"]::after {
	content: "Yeni";
	display: inline-block;
	padding: 1px 7px;
	font-size: 9px;
	font-weight: 700;
	line-height: 1.5;
	color: #fff;
	background: rgba(255,255,255,0.25);
	border-radius: 99px;
	vertical-align: middle;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

/* =========================================================================
 * Orta masaüstü (1350–1549px) buton sıkıştırma
 * Ana buton tanımından SONRA gelir ki onu ezsin (specificity eşit).
 * ====================================================================== */
@media (min-width: 1350px) and (max-width: 1549px) {
	.header .nav-menu a[href*="rusya-vize-basvurusu"],
	.header .nav-menu a[href*="suudi-arabistan-vize-basvurusu"] {
		padding: 8px 13px;
		font-size: 0.82rem;
	}
	.header .header-actions .btn-primary {
		padding: 12px 20px;
		font-size: 0.9rem;
	}
}

/* =========================================================================
 * Dubai Vize Başvurusu butonu — vize butonlarıyla aynı boyut, ama vurgulu
 * (ana CTA olduğu için hafif daha güçlü gölge + biraz daha dolgun)
 * ====================================================================== */
@media (min-width: 1350px) {
	.header .header-actions .btn-primary {
		padding: 10px 20px;
		border-radius: 10px;
		font-size: 0.9rem;
		font-weight: 700;
		background: #d71923;
		color: #fff;
		box-shadow: 0 4px 14px rgba(215,25,35,0.32);   /* vurgulu gölge */
		transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
	}
	.header .header-actions .btn-primary:hover {
		filter: brightness(1.06);
		transform: translateY(-1px);
		box-shadow: 0 6px 18px rgba(215,25,35,0.42);
	}
	/* Sepet ikonu buton grubunun en sağında, hafif ayrı */
	.header .header-actions {
		margin-left: 0.4rem;
	}
}

/* ═══════════════════════════════════════════════════════════
 * 15 Ağustos 2026 düzeltmeleri
 * 1) "Yeni" rozetleri kaldırıldı (masaüstü + mobil)
 * 2) Mobilde sepet: menü içindeki tam genişlik butondan çıkarıldı,
 *    üst barda hamburger'in soluna ikon olarak taşındı
 * ═══════════════════════════════════════════════════════════ */

/* 1 — "Yeni" rozetleri kapatıldı */
.header .nav-menu > li:has(> a[href*="rusya-vize-basvurusu"])::after,
.header .nav-menu > li:has(> a[href*="suudi-arabistan-vize-basvurusu"])::after,
.mobile-nav-list a[href*="rusya-vize-basvurusu"]::after,
.mobile-nav-list a[href*="suudi-arabistan-vize-basvurusu"]::after {
	content: none !important;
	display: none !important;
}

/* 2 — Mobil sepet: üst barda ikon, menüde yok */
@media (max-width: 1349px) {
	.header .header-actions {
		display: flex !important;
		align-items: center;
		margin-left: auto;
		margin-right: 0.35rem;
		gap: 0;
	}
	.header .header-actions .social-icons,
	.header .header-actions .btn-primary {
		display: none !important;
	}

	.header .header-cart-button {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		background: transparent !important;
		border-radius: 8px;
		font-size: 21px;
		color: #d71923;
	}
	.header .header-cart-button .cart-count {
		top: -2px;
		right: -2px;
		font-size: 10px;
		height: 18px;
		min-width: 18px;
	}

	/* menü içindeki "Sepetim" butonu kaldırıldı */
	.mobile-menu > div:has(> button.btn-primary) {
		display: none !important;
	}
}

/* ── Mobil menü: üç buton eşit yükseklik + eşit boşluk ── */
@media (max-width: 1349px) {
	.mobile-menu > .mobile-nav-list {
		padding-bottom: 0 !important;
	}
	.mobile-nav-list li:has(a[href*="rusya-vize-basvurusu"]) {
		margin-top: 0.5rem;
		padding: 24px 1.5rem 0;
		border-top: 1px solid #ececec;
		border-bottom: none;
	}
	.mobile-nav-list li:has(a[href*="suudi-arabistan-vize-basvurusu"]) {
		margin-top: 0;
		padding: 12px 1.5rem 0;
		border-top: none;
		border-bottom: none;
	}
	.mobile-menu > div:has(> a.btn-primary) {
		padding: 12px 1.5rem 1.5rem !important;
	}

	/* üç buton da aynı gövde */
	.mobile-nav-list a[href*="rusya-vize-basvurusu"],
	.mobile-nav-list a[href*="suudi-arabistan-vize-basvurusu"],
	.mobile-menu > div > a.btn.btn-primary {
		display: flex !important;
		align-items: center;
		justify-content: center;
		height: 54px !important;
		padding: 0 1rem !important;
		border-radius: 10px;
		font-size: 1rem;
		font-weight: 700;
		box-sizing: border-box;
	}
}


/* 19.10.2026 — Ana sayfa hero: <1500px'de sabit 550px yerine görsel oranında ölçeklenir, yazılar kırpılmaz */
@media (max-width:1499px){
  .hero{height:auto!important;aspect-ratio:2560/743;min-height:220px;}
  .hero .hero-bg{width:100%!important;height:100%!important;object-fit:cover;}
}

/* 22.10.2026 - Telefonda anasayfa hero: dikey mobil gorsel (1721x2201) kendi oraninda gosterilir, kirpilmaz */
@media (max-width:700px){
  .home .hero{aspect-ratio:1721/2201;min-height:0;}
}