/**
 * OtoBeyin Modül Portalı — Frontend stilleri
 *
 * demo-anasayfa.html <style> içeriğinden PORT edilmiştir.
 * Tüm seçiciler .obm kökü altında ad-uzaylıdır (CONTRACT.md Bölüm 13.1).
 * Genel etiket seçicilerinden kaçınılmış, her şey .obm köküne bağlanmıştır.
 *
 * @package OtoBeyin_Portal
 */

/* ---------- KÖK / CSS DEĞİŞKENLERİ ---------- */
.obm {
	--obm-bg: #0b1120;          /* koyu lacivert */
	--obm-bg-2: #0f1830;
	--obm-panel: #111d3a;
	--obm-card: #13213f;
	--obm-line: #1f2f55;
	--obm-txt: #e8eefc;
	--obm-muted: #9fb0d0;
	--obm-accent: #2f6bff;      /* kurumsal mavi (settings.theme_color ile override edilebilir) */
	--obm-accent-2: #1ed3a7;    /* destekleniyor yeşili */
	--obm-red: #ff5b6e;
	--obm-radius: 16px;
	--obm-shadow: 0 18px 40px -18px rgba( 0, 0, 0, .6 );

	color: var( --obm-txt );
	font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.obm *,
.obm *::before,
.obm *::after {
	box-sizing: border-box;
}

.obm a {
	color: inherit;
	text-decoration: none;
}

/* ---------- HERO ---------- */
.obm-hero {
	position: relative;
	overflow: hidden;
	padding: 74px 0 64px;
	background:
		radial-gradient( 1100px 460px at 80% -10%, rgba( 47, 107, 255, .22 ), transparent 60% ),
		radial-gradient( 800px 400px at 0% 120%, rgba( 30, 211, 167, .12 ), transparent 55% ),
		var( --obm-bg );
}

.obm-hero__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient( var( --obm-line ) 1px, transparent 1px ),
		linear-gradient( 90deg, var( --obm-line ) 1px, transparent 1px );
	background-size: 46px 46px;
	opacity: .10;
	-webkit-mask-image: radial-gradient( 700px 380px at 70% 10%, #000, transparent );
	mask-image: radial-gradient( 700px 380px at 70% 10%, #000, transparent );
}

.obm-hero__inner {
	position: relative;
	max-width: 760px;
	margin: 0 auto;
	padding: 0 22px;
	width: 100%;
}

.obm-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba( 47, 107, 255, .14 );
	border: 1px solid rgba( 47, 107, 255, .35 );
	color: #cdd9ff;
	font-weight: 600;
	font-size: 13px;
	padding: 7px 14px;
	border-radius: 999px;
	margin-bottom: 20px;
}

.obm-pill__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var( --obm-accent-2 );
	box-shadow: 0 0 0 4px rgba( 30, 211, 167, .18 );
}

.obm-hero__title,
h1.obm-hero__title,
.obm-hero h1 {
	font-size: clamp( 30px, 5vw, 50px );
	line-height: 1.08;
	margin: 0 0 16px;
	font-weight: 800;
	letter-spacing: -.5px;
}

.obm-hero__title span,
h1.obm-hero__title span,
.obm-hero h1 span {
	color: var( --obm-accent );
}

.obm-hero__lead {
	color: var( --obm-muted );
	font-size: 18px;
	max-width: 600px;
	margin: 0 0 28px;
}

.obm-search {
	display: flex;
	gap: 10px;
	background: var( --obm-card );
	border: 1px solid var( --obm-line );
	padding: 10px;
	border-radius: 14px;
	max-width: 620px;
	box-shadow: var( --obm-shadow );
}

.obm-search__input {
	flex: 1;
	background: transparent;
	border: 0;
	outline: 0;
	color: var( --obm-txt );
	font-size: 16px;
	font-family: inherit;
	padding: 8px 10px;
}

.obm-search__input::placeholder {
	color: #7286ad;
}

.obm-search svg {
	flex: 0 0 auto;
	align-self: center;
}

.obm-stats {
	display: flex;
	gap: 34px;
	margin-top: 34px;
	flex-wrap: wrap;
}

/* tek istatistik öğesi (demoda sınıfsız <div>; flex öğesi sarmalayıcı) */
.obm-stats__it {
	flex: 0 0 auto;
}

.obm-stats b {
	display: block;
	font-size: 26px;
	font-weight: 800;
}

.obm-stats span {
	color: var( --obm-muted );
	font-size: 13px;
}

/* ---------- BÖLÜM GENEL ---------- */
.obm-section {
	padding: 64px 0;
}

.obm-wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 22px;
}

.obm-sec-head {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 42px;
}

.obm-kicker {
	color: var( --obm-accent-2 );
	font-weight: 700;
	letter-spacing: 1.5px;
	font-size: 13px;
	text-transform: uppercase;
}

.obm-sec-head h2 {
	font-size: clamp( 26px, 3.4vw, 36px );
	margin: 10px 0 12px;
	font-weight: 800;
	letter-spacing: -.4px;
}

.obm-sec-head p {
	color: var( --obm-muted );
	margin: 0;
	font-size: 16px;
}

/* ---------- KATEGORİLER ---------- */
.obm-cats {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 18px;
}

.obm-cat {
	background: linear-gradient( 180deg, var( --obm-card ), var( --obm-bg-2 ) );
	border: 1px solid var( --obm-line );
	border-radius: var( --obm-radius );
	padding: 24px;
	cursor: pointer;
	transition: .22s;
	position: relative;
	overflow: hidden;
}

.obm-cat:hover {
	transform: translateY( -4px );
	border-color: var( --obm-accent );
	box-shadow: var( --obm-shadow );
}

.obm-cat__ico {
	width: 54px;
	height: 54px;
	border-radius: 13px;
	display: grid;
	place-items: center;
	margin-bottom: 16px;
	background: rgba( 47, 107, 255, .13 );
	border: 1px solid rgba( 47, 107, 255, .28 );
}

.obm-cat__ico svg {
	width: 28px;
	height: 28px;
	stroke: #9cc0ff;
}

.obm-cat__title {
	margin: 0 0 6px;
	font-size: 19px;
	font-weight: 700;
}

.obm-cat__desc {
	margin: 0;
	color: var( --obm-muted );
	font-size: 14px;
}

.obm-cat__count {
	position: absolute;
	top: 18px;
	right: 18px;
	font-size: 12px;
	font-weight: 700;
	color: var( --obm-accent-2 );
	background: rgba( 30, 211, 167, .12 );
	padding: 4px 10px;
	border-radius: 999px;
}

/* ---------- LİSTE / AKORDEON ---------- */
.obm-list {
	background: var( --obm-bg-2 );
}

.obm-tools {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 26px;
}

.obm-listsearch {
	flex: 1;
	min-width: 260px;
	max-width: 520px;
	display: flex;
	align-items: center;
	gap: 10px;
	background: var( --obm-card );
	border: 1px solid var( --obm-line );
	border-radius: 12px;
	padding: 11px 14px;
}

.obm-listsearch input {
	flex: 1;
	background: transparent;
	border: 0;
	outline: 0;
	color: var( --obm-txt );
	font-size: 15px;
	font-family: inherit;
}

.obm-listsearch input::placeholder {
	color: #7286ad;
}

.obm-acc {
	max-width: 980px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.obm-acc-item {
	background: var( --obm-card );
	border: 1px solid var( --obm-line );
	border-radius: 14px;
	overflow: hidden;
}

.obm-acc-head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	cursor: pointer;
	user-select: none;
}

.obm-acc-head__ic {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	background: rgba( 47, 107, 255, .13 );
	border: 1px solid rgba( 47, 107, 255, .25 );
	flex: 0 0 auto;
}

.obm-acc-head__ic svg {
	width: 20px;
	height: 20px;
	stroke: #9cc0ff;
}

.obm-acc-head__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	flex: 1;
}

.obm-badge {
	font-size: 12px;
	font-weight: 700;
	color: var( --obm-accent-2 );
	background: rgba( 30, 211, 167, .12 );
	padding: 4px 11px;
	border-radius: 999px;
}

.obm-chev {
	transition: .25s;
	color: var( --obm-muted );
}

.obm-acc-item.is-open .obm-chev {
	transform: rotate( 180deg );
}

.obm-acc-body {
	display: none;
	border-top: 1px solid var( --obm-line );
}

.obm-acc-item.is-open .obm-acc-body {
	display: block;
}

.obm-tbl-scroll {
	overflow-x: auto;
}

.obm-tbl-scroll table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	min-width: 680px;
}

.obm-tbl-scroll th,
.obm-tbl-scroll td {
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid var( --obm-line );
	white-space: nowrap;
}

.obm-tbl-scroll th {
	color: var( --obm-muted );
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .5px;
	background: var( --obm-panel );
}

.obm-tbl-scroll tbody tr:hover {
	background: rgba( 47, 107, 255, .06 );
}

.obm-tbl-scroll td.obm-brand,
.obm-brand {
	font-weight: 700;
}

.obm-chip {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 6px;
	background: rgba( 47, 107, 255, .14 );
	color: #9cc0ff;
}

.obm-chip--sw {
	background: rgba( 255, 91, 110, .14 );
	color: #ffb3bc;
}

/* fiyat çipi — yeşil (eski .obm-ok görünümü) */
.obm-price {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	color: var( --obm-accent-2 );
	background: rgba( 30, 211, 167, .12 );
	border: 1px solid rgba( 30, 211, 167, .28 );
	padding: 4px 11px;
	border-radius: 999px;
	white-space: nowrap;
}

/* "On request" — sönük varyant */
.obm-price--ask {
	color: var( --obm-muted );
	background: rgba( 159, 176, 208, .10 );
	border-color: var( --obm-line );
}

.obm-note-row {
	padding: 16px 20px;
	color: var( --obm-muted );
	font-size: 13px;
	background: var( --obm-panel );
}

.obm-empty {
	padding: 30px;
	text-align: center;
	color: var( --obm-muted );
}

.obm-demo-tag {
	font-size: 10px;
	font-weight: 700;
	color: #ffd27a;
	background: rgba( 255, 176, 32, .12 );
	padding: 2px 7px;
	border-radius: 5px;
	margin-left: 6px;
}

.obm-list__note {
	text-align: center;
	color: var( --obm-muted );
	font-size: 13px;
	margin-top: 26px;
}

/* ---------- FORM / İLETİŞİM ---------- */
/* iletişim ızgarası: form + yan kanal paneli (demo .contact) */
.obm-contact__grid {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 30px;
	align-items: start;
}

/* yan panel başlık/metin (demo .contact-aside) */
.obm-contact__aside h3 {
	margin-top: 0;
	font-size: 22px;
}

.obm-contact__aside p {
	color: var( --obm-muted );
}

.obm-form {
	background: var( --obm-card );
	border: 1px solid var( --obm-line );
	border-radius: var( --obm-radius );
	padding: 28px;
}

.obm-field {
	margin-bottom: 16px;
}

.obm-field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var( --obm-muted );
	margin-bottom: 7px;
}

.obm-field input,
.obm-field textarea,
.obm-field select {
	width: 100%;
	background: var( --obm-bg );
	border: 1px solid var( --obm-line );
	border-radius: 11px;
	color: var( --obm-txt );
	font-family: inherit;
	font-size: 15px;
	padding: 12px 14px;
	outline: 0;
}

.obm-field input:focus,
.obm-field textarea:focus,
.obm-field select:focus {
	border-color: var( --obm-accent );
}

.obm-field textarea {
	resize: vertical;
	min-height: 90px;
}

.obm-file {
	border: 1.5px dashed var( --obm-line );
	border-radius: 11px;
	padding: 18px;
	text-align: center;
	color: var( --obm-muted );
	font-size: 14px;
	cursor: pointer;
}

.obm-file:hover {
	border-color: var( --obm-accent );
	color: var( --obm-txt );
}

.obm-row2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

/* honeypot — görünmez tutulur */
.obm-hp {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* başarı / hata bildirimleri */
.obm-notice {
	border-radius: 11px;
	padding: 14px 16px;
	margin-bottom: 16px;
	font-size: 14px;
	font-weight: 600;
}

.obm-notice--ok {
	background: rgba( 30, 211, 167, .12 );
	border: 1px solid rgba( 30, 211, 167, .35 );
	color: #9ff0d8;
}

.obm-notice--err {
	background: rgba( 255, 91, 110, .12 );
	border: 1px solid rgba( 255, 91, 110, .35 );
	color: #ffb3bc;
}

/* ---------- BUTONLAR ---------- */
.obm-btn {
	border: 0;
	cursor: pointer;
	font-family: inherit;
	font-weight: 700;
	border-radius: 11px;
	padding: 11px 18px;
	font-size: 14px;
	transition: .2s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.obm-btn--primary {
	background: var( --obm-accent );
	color: #fff;
}

.obm-btn--primary:hover {
	filter: brightness( 1.08 );
	transform: translateY( -1px );
}

.obm-btn--ghost {
	background: transparent;
	color: var( --obm-txt );
	border: 1px solid var( --obm-line );
}

.obm-btn--ghost:hover {
	border-color: var( --obm-accent );
}

/* tam genişlik buton (form "Send request") */
.obm-btn--block {
	width: 100%;
}

/* WhatsApp / Telegram kanal listesi (dikey yığın) */
.obm-ch-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* satır içi WhatsApp / Telegram kanalları */
.obm-ch {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var( --obm-card );
	border: 1px solid var( --obm-line );
	border-radius: 13px;
	padding: 15px 18px;
	transition: .2s;
}

.obm-ch:hover {
	transform: translateX( 4px );
}

.obm-ch__ic {
	width: 44px;
	height: 44px;
	border-radius: 11px;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.obm-ch--wa .obm-ch__ic {
	background: rgba( 37, 211, 102, .13 );
}

.obm-ch--tg .obm-ch__ic {
	background: rgba( 34, 158, 217, .13 );
}

/* kanal metin sarmalayıcı (başlık + alt satır) */
.obm-ch__txt {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.obm-ch b {
	display: block;
}

.obm-ch span {
	color: var( --obm-muted );
	font-size: 13px;
}

/* ---------- YÜZEN BUTONLAR ---------- */
.obm-float {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 70;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.obm-fbtn {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	box-shadow: 0 12px 28px -8px rgba( 0, 0, 0, .6 );
	transition: .2s;
}

.obm-fbtn:hover {
	transform: scale( 1.08 );
}

.obm-fbtn--wa {
	background: #25d366;
}

.obm-fbtn--tg {
	background: #229ed9;
}

.obm-fbtn svg {
	width: 30px;
	height: 30px;
	fill: #fff;
}

/* ---------- RESPONSIVE ---------- */
@media ( max-width: 880px ) {
	.obm-cats {
		grid-template-columns: 1fr 1fr;
	}

	.obm-contact__grid {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 560px ) {
	.obm-cats {
		grid-template-columns: 1fr;
	}

	.obm-row2 {
		grid-template-columns: 1fr;
	}

	.obm-stats {
		gap: 22px;
	}
}

/* ---------- SERVİS GRUPLARI (Mileage Correction vb.) ---------- */
.obm-cat-groups {
	display: flex;
	flex-direction: column;
	gap: 44px;
}

.obm-service__title {
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: clamp( 20px, 3vw, 28px );
	font-weight: 800;
	margin: 0 0 22px;
	color: var( --obm-txt, #e8eefc );
}

.obm-service__title::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	margin: 12px auto 0;
	border-radius: 3px;
	background: var( --obm-accent, #2f6bff );
}

/* ---------- HERO LOGO ---------- */
.obm-hero__logo {
	display: block;
	margin: 0 auto 26px;
	max-width: min( 560px, 56% );
	width: 100%;
	height: auto;
	filter: drop-shadow( 0 0 20px rgba( 47, 107, 255, 0.35 ) );
}

@media ( max-width: 560px ) {
	.obm-hero__logo {
		max-width: 78%;
	}
}

/* ---------- SİTE ALT BİLGİSİ (footer) ---------- */
.obm-sitefooter {
	background: #0b1120;
	color: #9fb0d0;
	text-align: center;
	padding: 24px 16px;
	font-size: 14px;
	border-top: 1px solid #1f2f55;
}

.obm-sitefooter__link {
	color: #4d8bff;
	text-decoration: underline;
}

.obm-sitefooter__link:hover {
	color: #6ea2ff;
}

.obm-sitefooter__sep {
	margin: 0 8px;
	opacity: 0.6;
}