/* ===========================================================================
   buharkeyf mobil başlık şeridi + hamburger menü — site kimliğine uyum (2026-09-28)

   Site dili: destek sayfası / asistan v2 ile aynı mavi → camgöbeği geçiş
   (#1f4a68 #2d6486 #3f7fa6 #7fb0cf), beyaz yuvarlak kartlar, Spartan başlık.
   Yalnız mobil öğeleri hedefler (.mobile-top-bar, .mobile-main-menu-container);
   masaüstü menüye dokunmaz. Journal3 kendi renklerini yüksek özgüllükle
   bastığı için anahtar özelliklerde !important kullanıldı.
   =========================================================================== */

/* ---------------- Üst şerit (Giriş Yap · Kayıt Ol · Kargo · SSS) ---------------- */
html body .mobile-top-bar {
	background: linear-gradient(90deg, #eef4f9 0%, #f1f6fa 100%) !important;
	border-bottom: 1px solid #d6e5f0 !important;
	padding: 7px 10px !important; min-height: 0 !important; height: auto !important;
}
html body .mobile-top-bar .mobile-top-menu-wrapper { width: 100%; }
html body .mobile-top-bar .top-menu .j-menu {
	display: flex !important; flex-wrap: nowrap !important; gap: 7px; justify-content: center;
	overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 !important; padding: 0 !important;
}
html body .mobile-top-bar .top-menu .j-menu::-webkit-scrollbar { display: none; }
html body .mobile-top-bar .top-menu .j-menu > li { flex: none; margin: 0 !important; border: 0 !important; }
html body .mobile-top-bar .top-menu .j-menu > li::before, html body .mobile-top-bar .top-menu .j-menu > li::after { display: none !important; }
html body .mobile-top-bar .top-menu .j-menu > li > a {
	display: inline-flex !important; align-items: center; gap: 6px; height: 32px !important;
	padding: 0 12px !important; border-radius: 999px !important;
	background: #fff !important; border: 1px solid #d6e5f0 !important;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
	font: 700 11.5px/1 Roboto, sans-serif !important; letter-spacing: .3px !important;
	text-transform: uppercase !important; color: #1f4a68 !important; white-space: nowrap;
}
html body .mobile-top-bar .top-menu .j-menu > li > a:active { background: #d6e5f0 !important; }
html body .mobile-top-bar .top-menu .j-menu > li > a .links-text { color: inherit !important; font: inherit !important; }
html body .mobile-top-bar .top-menu .j-menu > li > a::before { color: #2d6486 !important; font-size: 14px !important; margin: 0 !important; }

/* ---------------- Hamburger menü paneli ---------------- */
html body .mobile-main-menu-container { background: #f5f8fc !important; }
html body .mobile-main-menu-container .mobile-wrapper-header {
	background: linear-gradient(120deg, #2d6486 0%, #3f7fa6 60%, #5b93b8 100%) !important;
	color: #fff !important; height: 60px !important; padding: 0 12px 0 18px !important;
	display: flex !important; align-items: center; justify-content: space-between; border: 0 !important;
}
html body .mobile-main-menu-container .mobile-wrapper-header > span {
	font: 700 17px/1 Spartan, Roboto, sans-serif !important; color: #fff !important;
	text-transform: none !important; letter-spacing: 0 !important;
}
html body .mobile-main-menu-container .mobile-wrapper-header > span { font-size: 0 !important; }
html body .mobile-main-menu-container .mobile-wrapper-header > span::before { content: "Menü"; font: 700 17px/1 Spartan, Roboto, sans-serif; color: #fff; }
html body .mobile-main-menu-container .mobile-wrapper-header > span::after { content: "  ·  Kategoriler"; font: 500 13px/1 Roboto, sans-serif; color: rgba(255,255,255,.85); white-space: pre; }
html body .mobile-main-menu-container .mobile-wrapper-header .x {
	width: 38px !important; height: 38px !important; border-radius: 11px !important;
	background: rgba(255, 255, 255, .2) !important; display: flex !important; align-items: center; justify-content: center;
	position: static !important; margin: 0 !important;
}
html body .mobile-main-menu-container .mobile-wrapper-header .x::before { color: #fff !important; font-size: 17px !important; margin: 0 !important; }

html body .mobile-main-menu-container .mobile-main-menu-wrapper { padding: 10px 10px 24px !important; background: #f5f8fc !important; }

/* Ana kategori kartları */
html body .mobile-main-menu-container .main-menu > .j-menu > li.main-menu-item {
	background: #fff !important; border: 1px solid #e2e8f0 !important; border-radius: 14px !important;
	margin: 0 0 7px !important; overflow: hidden; box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
html body .mobile-main-menu-container .main-menu > .j-menu > li.main-menu-item::before,
html body .mobile-main-menu-container .main-menu > .j-menu > li.main-menu-item::after { display: none !important; }
html body .mobile-main-menu-container .main-menu > .j-menu > li.main-menu-item > a {
	display: flex !important; align-items: center; gap: 8px; min-height: 52px !important;
	padding: 0 56px 0 16px !important; position: relative;
	font: 700 13.5px/1.25 Spartan, Roboto, sans-serif !important; letter-spacing: .2px !important;
	text-transform: uppercase !important; color: #0f172a !important; background: none !important;
}
html body .mobile-main-menu-container .main-menu > .j-menu > li.main-menu-item > a .links-text { color: inherit !important; font: inherit !important; }
html body .mobile-main-menu-container .main-menu > .j-menu > li.main-menu-item > a::before { color: #2d6486 !important; font-size: 17px !important; margin: 0 4px 0 0 !important; }
html body .mobile-main-menu-container .main-menu > .j-menu > li.main-menu-item > a:active { background: #eef4f9 !important; }
html body .mobile-main-menu-container .main-menu > .j-menu > li.main-menu-item.open > a,
html body .mobile-main-menu-container .main-menu > .j-menu > li.main-menu-item > a[aria-expanded="true"] { color: #1f4a68 !important; }

/* Rozetler: ÇOK SATAN / YENİ / EN İYİ */
html body .mobile-main-menu-container .menu-label {
	position: static !important; transform: none !important; order: 2;
	display: inline-flex !important; align-items: center; height: 19px; padding: 0 8px !important;
	border-radius: 999px !important; font: 700 9.5px/1 Roboto, sans-serif !important; letter-spacing: .4px !important;
	background: linear-gradient(135deg, #2d6486, #3f7fa6) !important; color: #fff !important; margin: 0 !important;
	box-shadow: none !important; border: 0 !important;
}
html body .mobile-main-menu-container .menu-label::before, html body .mobile-main-menu-container .menu-label::after { display: none !important; }
html body .mobile-main-menu-container .main-menu-item-2 > a .menu-label { background: linear-gradient(135deg, #2f7358, #3f8a6c) !important; }   /* YENİ (yumuşak yeşil) */

/* Açma düğmesi: (+) yerine açık mavi kutuda ok */
html body .mobile-main-menu-container .open-menu {
	position: absolute !important; right: 10px !important; top: 50% !important; transform: translateY(-50%);
	width: 34px !important; height: 34px !important; border-radius: 10px !important;
	background: #eef4f9 !important; display: flex !important; align-items: center; justify-content: center;
	margin: 0 !important; border: 0 !important;
}
html body .mobile-main-menu-container .open-menu i { color: #2d6486 !important; font-size: 0 !important; transition: transform .2s ease; }
html body .mobile-main-menu-container .open-menu i::before { content: "\f107" !important; font-size: 19px !important; line-height: 1; }
html body .mobile-main-menu-container .open-menu:not(.collapsed) i { transform: rotate(180deg); }
html body .mobile-main-menu-container .open-menu:not(.collapsed) { background: linear-gradient(135deg, #2d6486, #3f7fa6) !important; }
html body .mobile-main-menu-container .open-menu:not(.collapsed) i { color: #fff !important; }

/* Alt menüler */
html body .mobile-main-menu-container .main-menu-item > .collapse > .j-menu,
html body .mobile-main-menu-container .main-menu-item > .collapsing > .j-menu {
	background: #fff !important; margin: 0 12px 10px 16px !important; padding: 2px 0 !important;
	border-left: 2px solid #d6e5f0 !important;
}
html body .mobile-main-menu-container .collapse .j-menu > li { border: 0 !important; background: none !important; }
html body .mobile-main-menu-container .collapse .j-menu > li::before, html body .mobile-main-menu-container .collapse .j-menu > li::after { display: none !important; }
html body .mobile-main-menu-container .collapse .j-menu > li > a {
	display: flex !important; align-items: center; min-height: 42px !important; position: relative;
	padding: 0 50px 0 14px !important; background: none !important;
	font: 500 13.5px/1.3 Roboto, sans-serif !important; letter-spacing: 0 !important;
	text-transform: none !important; color: #334155 !important;
}
html body .mobile-main-menu-container .collapse .j-menu > li > a .links-text { color: inherit !important; font: inherit !important; }
html body .mobile-main-menu-container .collapse .j-menu > li > a:active { color: #1f4a68 !important; background: #eef4f9 !important; }
html body .mobile-main-menu-container .collapse .collapse .j-menu { margin: 0 8px 6px 14px !important; }
html body .mobile-main-menu-container .collapse .j-menu > li > a .open-menu { width: 30px !important; height: 30px !important; right: 6px !important; }

/* ---- düzeltmeler: Türkçe nokta/çift nokta kırpılması, rozet kırılması, ok ikonu, alt menü girintisi ---- */
/* Tema .links-text'e overflow:hidden + ellipsis veriyor; sıkı satır yüksekliğinde İ/Ö/Ü noktaları kırpılıyordu */
html body .mobile-main-menu-container .j-menu > li > a .links-text {
	overflow: visible !important; text-overflow: clip !important; white-space: normal !important;
	line-height: 1.45 !important; padding: 2px 0 !important; min-width: 0; flex: 0 1 auto;
}
html body .mobile-main-menu-container .main-menu > .j-menu > li.main-menu-item > a { line-height: 1.45 !important; padding-top: 6px !important; padding-bottom: 6px !important; }
html body .mobile-main-menu-container .menu-label { white-space: nowrap !important; flex: none !important; }
/* icomoon (+) yerine CSS ile çizilmiş ok */
html body .mobile-main-menu-container .open-menu i { display: none !important; }
html body .mobile-main-menu-container .open-menu::after {
	content: ""; width: 8px; height: 8px; border-right: 2.2px solid #2d6486; border-bottom: 2.2px solid #2d6486;
	transform: translateY(-2px) rotate(45deg); transition: transform .2s ease;
}
html body .mobile-main-menu-container .open-menu:not(.collapsed)::after { border-color: #fff; transform: translateY(2px) rotate(-135deg); }
/* Alt menü girintisi */
html body .mobile-main-menu-container .collapse .j-menu, html body .mobile-main-menu-container .collapsing .j-menu { padding-left: 0 !important; }
html body .mobile-main-menu-container .collapse .j-menu > li { margin: 0 !important; padding: 0 !important; }
html body .mobile-main-menu-container .collapse .j-menu > li > a { padding-left: 14px !important; }

/* 4 hap (Giriş · Kayıt · Kargo · SSS) 390px'e sığsın; daha dar ekranda soldan başlayıp kaydırılsın */
html body .mobile-top-bar { padding: 7px 8px !important; }
html body .mobile-top-bar .top-menu .j-menu { gap: 5px !important; justify-content: flex-start !important; }
html body .mobile-top-bar .top-menu .j-menu > li > a { padding: 0 9px !important; gap: 5px !important; font-size: 10.5px !important; letter-spacing: .2px !important; height: 30px !important; }
html body .mobile-top-bar .top-menu .j-menu > li > a::before { font-size: 13px !important; }
@media (min-width: 400px) { html body .mobile-top-bar .top-menu .j-menu { justify-content: center !important; } }
/* Dar ekran (iPhone SE 320px): liste ekrandan taşmasın, kendi içinde kaysın */
html body .mobile-top-bar, html body .mobile-top-bar .mobile-top-menu-wrapper, html body .mobile-top-bar .top-menu { max-width: 100% !important; min-width: 0 !important; overflow: hidden; }
html body .mobile-top-bar .top-menu .j-menu { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; }