/* ============================================================
   İletişim Sayfası modülü (opencart.contact_page) — vitrin stilleri

   KAPSAM: her kural `#contact-page` ya da `.cpx` ile başlar. Bu kap
   yalnızca modülün kendi şablonunda vardır, dolayısıyla varsayılan
   iletişim sayfasına, checkout'a ya da temanın başka ekranlarına
   hiçbir kural sızmaz.

   Sınıf öneki `cpx-`: mevcut `contact-page.css` dosyası `cp-` önekini
   kullanıyor ve o dosya varsayılan sayfada HÂLÂ yüklü. Aynı öneki
   kullansaydık iki dosya birbirini ezerdi.
   ============================================================ */

.cpx {
	/* --- Renkler: tek gri ailesi, tek vurgu --- */
	--cpx-acc: var(--tuva-altin-vurgu, #FEC303);
	--cpx-ink: #161616;
	--cpx-body: #4b4b4b;
	--cpx-dim: #6f6f6f;
	--cpx-muted: #9b9b9b;
	--cpx-line: #e6e6e6;
	--cpx-panel: #fafafa;
	--cpx-wire: #cfcfcf; /* wireframe kesikli çizgi */

	/* --- Tipografi ölçeği: yalnız bu 5 kademe --- */
	--cpx-fs-title: 22px;
	--cpx-fs-strong: 16px;
	--cpx-fs-base: 15px;
	--cpx-fs-note: 14px;
	--cpx-fs-eye: 12px;
	--cpx-lh: 1.65;

	--cpx-radius: 14px;
	--cpx-gap: 28px;

	/* Masaustunde .fixedHeader (siyah kategori bari) sticky top:0 ve 55px
	   yuksekliginde; yapiskan form onun ALTINDA dursun diye 55+16. */
	--cpx-sticky-top: 71px;
	--cpx-shadow: 0 1px 2px rgba(22, 22, 22, .04), 0 8px 24px rgba(22, 22, 22, .06);
}

.cpx-shell {
	padding: 32px 15px 48px;
}


.cpx-layout-boxed .cpx-shell {
	max-width: 1400px;
	margin: 0 auto;
}

.cpx-layout-fullwidth .cpx-shell {
	max-width: none;
	padding-left: clamp(15px, 4vw, 64px);
	padding-right: clamp(15px, 4vw, 64px);
}

/* ---------- Izgara ---------- */
.cpx-grid {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: var(--cpx-gap);
	align-items: start;
}

.cpx-info-right .cpx-col-info {
	order: 2;
}

.cpx-info-right .cpx-col-form {
	order: 1;
}

.cpx-col {
	min-width: 0;
}

/* ---------- Kart ---------- */
/* Kartlarin kenari belli olsun: sayfa zemini de acik oldugu icin cerceve+golge
   olmadan iki beyaz kutu bosluk icinde yuzuyordu. */
.cpx-card {
	background: #fff;
	border: 1px solid var(--cpx-line);
	border-radius: var(--cpx-radius);
	box-shadow: var(--cpx-shadow);
	padding: 32px 34px;
}

/* ---------- Başlık ---------- */
.cpx-title {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: var(--cpx-fs-title);
	font-weight: 700;
	line-height: 1.25;
	color: var(--cpx-ink);
	letter-spacing: .01em;
	margin: 0 0 20px;
}

.cpx-title::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--cpx-line);
}

.cpx-intro {
	font-size: var(--cpx-fs-base);
	line-height: 1.7;
	color: var(--cpx-body);
	margin: 0 0 26px;
}

/* ---------- Bölüm / etiket ---------- */
.cpx-sec + .cpx-sec {
	margin-top: 32px;
}

.cpx-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	font-size: var(--cpx-fs-eye);
	font-weight: 700;
	color: var(--cpx-dim);
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 2;
}

/* ---------- Çalışma saatleri ---------- */
.cpx-hours {
	display: flex;
	flex-direction: column;
}

.cpx-hour {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--cpx-line);
	font-size: var(--cpx-fs-base);
	color: var(--cpx-body);
}

.cpx-hour:last-child {
	border-bottom: none;
}

.cpx-hour-val {
	font-weight: 600;
	color: var(--cpx-ink);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Kapalı gün: değer soluk, gün adı da soluk — satır bütün olarak geri çekilir. */
.cpx-hour-closed .cpx-hour-day {
	color: var(--cpx-muted);
}

.cpx-badge-closed {
	font-weight: 500;
	color: var(--cpx-muted);
}

/* ---------- Haftanın tamamı kapalı uyarısı ----------
   Sayfanın EN ÜSTÜNDE, ızgaradan önce durur: ziyaretçi saat listesini
   okumadan durumu görsün diye. */
.cpx-closed-banner {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: var(--cpx-gap);
	padding: 14px 18px;
	border: 1px solid var(--cpx-line);
	border-left: 3px solid var(--cpx-muted);
	border-radius: 8px;
	background: var(--cpx-panel);
	color: var(--cpx-ink);
	font-size: var(--cpx-fs-note);
	font-weight: 600;
}

.cpx-closed-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--cpx-muted);
	flex: 0 0 auto;
}

/* ---------- Kanallar ---------- */
/* Kanallar: duz liste yerine tiklanabilir kart izgarasi. */
.cpx-channels {
	display: grid;
	/* Esik 320px: OLCULEN en uzun deger (e-posta) 207px yer istiyor; 210px'lik
	   esikte iki sutun aciliyor ama sutun basina 209px kaliyordu ve e-posta
	   kelime ortasindan kiriliyordu. 320px'te iki sutun ANCAK gercekten
	   sigdiginda acilir. min(100%, ...) dar ekranda tasmayi engeller. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 10px;
}

.cpx-ch {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--cpx-line);
	border-radius: 10px;
	background: #fff;
	text-decoration: none;
	color: var(--cpx-acc);
	transition: border-color .15s, box-shadow .15s, transform .15s;
}

a.cpx-ch:hover {
	border-color: var(--cpx-acc);
	box-shadow: 0 4px 14px rgba(22, 22, 22, .07);
	transform: translateY(-1px);
}

a.cpx-ch:focus-visible {
	outline: 3px solid var(--cpx-acc);
	outline-offset: 2px;
}

a.cpx-ch:hover .cpx-ch-value {
	color: var(--cpx-acc);
}

a.cpx-ch:hover i {
	color: var(--cpx-acc);
}


a.cpx-ch:hover .cpx-ch-ic {
	border-color: var(--cpx-acc);
}

.cpx-ch-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	border: 1px solid var(--cpx-line);
	border-radius: 8px;
	font-size: 17px;
	transition: border-color .15s, color .15s;
}

/* Resim yöneticisinden seçilen görselin boyutu bilinmez; kutuya sığdırılır.
   `object-fit: contain` oranı bozmadan içeri alır (SVG dahil). */
.cpx-ch-img > img {
	width: 22px;
	height: 22px;
	display: block;
	object-fit: contain;
}

.cpx-ch-value {
	font-size: var(--cpx-fs-strong);
	font-weight: 600;
	color: var(--cpx-ink);
	overflow-wrap: anywhere;
	transition: color .15s;
}

/* NOT: Türe göre gömülü (data: URI) ikonlar KALDIRILDI. Görsel artık her
   satırda yöneticinin seçtiği Bootstrap ikonundan ya da yapıştırdığı SVG'den
   gelir (öncelik: SVG > ikon > hiç gösterme), bu yüzden `.cpx-ch-<tür>`
   sınıflarına gerek kalmadı. */

/* ---------- Adres ---------- */
.cpx-address {
	margin: 0;
	font-size: var(--cpx-fs-base);
	line-height: var(--cpx-lh);
	color: var(--cpx-body);
}

/* ---------- Dipnot ---------- */
.cpx-note {
	margin-top: 26px;
	padding: 14px 16px;
	background: var(--cpx-panel);
	border: 1px solid var(--cpx-line);
	border-left: 3px solid var(--cpx-acc);
	border-radius: 8px;
	color: var(--cpx-body);
	font-size: var(--cpx-fs-note);
	line-height: var(--cpx-lh);
}

/* ---------- Harita ---------- */
.cpx-map {
	position: relative;
	border-radius: 8px;
	border: 1px solid var(--cpx-line);
	overflow: hidden;
}

.cpx-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Tam genişlik harita bandı (üstte ya da en altta): köşe yuvarlaması ve
   yan kenarlık yok, sayfanın iki ucuna dayanır.
   Breadcrumb kaldırıldığı için "üstte" = sayfanın en üstü. */
.cpx-map-band {
	border-radius: 0;
	border-left: 0;
	border-right: 0;
	border-top: 0;
}

/* En alttaki bant için üst çizgi anlamlı, alt çizgi değil. */
.cpx-map-bottom {
	border-top: 1px solid var(--cpx-line);
	border-bottom: 0;
	margin-top: 8px;
}

.cpx-map-inline {
	margin-top: 22px;
}

/* ============================================================
   FORM — wireframe görünüm
   Kesikli çizgi + dolgusuz zemin + tek renk. Kasıtlı olarak "taslak"
   hissi verir; ama gerçek bir formdur, odak ve hata durumları çalışır.
   ============================================================ */
.cpx-card-wire {
	background: white
	
}

.cpx-form-note {
	margin: -12px 0 22px;
	font-size: var(--cpx-fs-note);
	color: var(--cpx-muted);
}

/* Ad ve E-posta yan yana; mesaj, captcha ve buton tam genislik.
   Sablona DOKUNULMADI -- sira formun cocuk siralamasindan okunuyor. */
.cpx-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.cpx-form > * {
	grid-column: 1 / -1;
}

.cpx-form > .cpx-field:nth-child(1),
.cpx-form > .cpx-field:nth-child(2) {
	grid-column: span 1;
}

.cpx-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.cpx-label {
	font-size: var(--cpx-fs-eye);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cpx-dim);
	margin: 0;
}

.cpx-input.form-control {
	border-radius: 8px;
	padding: 13px 14px;
	font-size: var(--cpx-fs-base);
	line-height: 1.4;
	color: var(--cpx-ink);
	height: auto;
	box-shadow: none;
}


/* ODAK GOSTERGESI: onceki hal `box-shadow:none; outline:0` idi, yani klavyeyle
   gezen kullanici hangi alanda oldugunu GOREMIYORDU (WCAG 2.4.7). Geri getirildi;
   temanin global `input:focus` ve `:focus` kurallari !important kullandigi icin
   burada da zorunlu (ozgulluk 0,3,0 > 0,1,1). */
.cpx-input.form-control:focus {
	border-color: var(--cpx-ink) !important;
	box-shadow: 0 0 0 3px rgba(254, 195, 3, .40) !important;
	outline: 0 !important;
}

.cpx-textarea {
	min-height: 150px;
	resize: vertical;
}

.cpx-submit {
	margin-top: 6px;
	padding: 15px 20px;
	border: 1.5px dashed var(--cpx-ink);
	border-radius: 8px;
	background: transparent;
	color: var(--cpx-ink);
	font-size: var(--cpx-fs-strong);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}

.cpx-submit:hover {
	border-style: solid;
	background: var(--cpx-acc);
	border-color: var(--cpx-acc);
	color: #111;
}

/* Captcha eklentisinin kendi isaretlemesine uyum.
   ONCEKI HAL: 1.5px KESIKLI cizgi -- terk edilmis "wireframe" tasariminin
   kalintisiydi; diger uc input duz cizgiliyken captcha kesikli goruruyordu.
   Artik ayni cizgi. */
.cpx-captcha .form-control {
	background: #fff;
	box-shadow: none;
}

.cpx-captcha fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

.cpx-captcha .mb-3 {
	margin-bottom: 0 !important;
}

/* ---------- Yapiskan form sutunu (yalniz iki sutunlu duzende) ----------
   OLCULEN: bilgi sutunu 999px, form sutunu 641px -> sagda 357px bos alan
   kaliyordu (992px'de 406px). Form artik sayfayla birlikte kaydigi icin o
   alan islevsel hale gelir; kullanici uzun bilgi listesini gezerken form
   ekranda kalir. Tek sutunlu (mobil) duzende KAPALI -- orada yapiskanlik
   formu ekrana kilitleyip icerigi orterdi. */
@media (min-width: 992px) {
	.cpx-col-form {
		position: -webkit-sticky;
		position: sticky;
		top: var(--cpx-sticky-top);
	}
}

/* ---------- Hero: baslik okunabilirligi ----------
   Baslik dogrudan gorselin uzerindeydi; acik renkli bir gorselde okunmaz.
   Kural `body:has(#contact-page)` ile SINIRLI: .contact-top bu dosyanin
   kapsam onekini tasimadigi icin kapsam boyle kuruluyor, modul pasifken
   varsayilan sayfaya sizmaz. */
body:has(#contact-page) .contact-top {
	position: relative;
}

body:has(#contact-page) .contact-top::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .55) 100%);
	pointer-events: none;
}

body:has(#contact-page) .contact-top > .container {
	position: relative;
	z-index: 1;
}

/* ---------- Hareket azaltma tercihi ---------- */
@media (prefers-reduced-motion: reduce) {
	.cpx-ch {
		transition: none;
	}

	a.cpx-ch:hover {
		transform: none;
	}
}

/* ---------- Duyarlılık ---------- */
@media (max-width: 991.98px) {
	.cpx {
		--cpx-fs-title: 20px;
		--cpx-gap: 20px;
	}

	.cpx-grid {
		grid-template-columns: 1fr;
	}

	.cpx-form {
		grid-template-columns: 1fr;
	}

	.cpx-form > .cpx-field:nth-child(1),
	.cpx-form > .cpx-field:nth-child(2) {
		grid-column: 1 / -1;
	}

	/* Tek sütunda bilgi HER ZAMAN önce gelir; sağ/sol tercihi yalnız
	   iki sütunlu düzende anlamlıdır. */
	.cpx-info-right .cpx-col-info,
	.cpx-info-right .cpx-col-form {
		order: 0;
	}

	.cpx-card {
		padding: 24px 20px;
	}

	.cpx-shell {
		padding: 24px 15px 36px;
	}

	.cpx-layout-fullwidth .cpx-shell {
		padding-left: 15px;
		padding-right: 15px;
	}
}