/*
 * Güven Garage Özellikler: sayfa bölümleri, düğmeler, mobil alt bar.
 *
 * Bu dosya temadan bağımsızdır. Renkler aşağıdaki --gg-* değişkenlerinden gelir.
 * Aynı değerler Kadence paletinde de tanımlı (bkz. TASARIM.md), değiştirirken ikisini birlikte güncelle.
 */

:root {
	--gg-vurgu: #C2461F;        /* logo turuncusu, beyaz metinle 5:1 kontrast */
	--gg-vurgu-koyu: #A33914;   /* üzerine gelince */
	--gg-vurgu-acik: #F26A3A;   /* koyu zeminde vurgu metni */
	--gg-siyah: #171716;        /* logo zemini */
	--gg-metin: #2B2B29;
	--gg-soluk: #5B5A56;
	--gg-cizgi: #DCDAD5;
	--gg-zemin: #F5F4F1;
	--gg-yesil: #187A41;        /* WhatsApp düğmesi, beyaz metinle 5.4:1 */
	--gg-en: 1100px;
}

/* ---------- Düğmeler ---------- */

.gg-dugmeler {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 24px 0 8px;
}
/* Tema bağlantı stilleri (alt çizgi, renk) düğmelerin üstüne yazılmasın. */
a.gg-btn,
a.gg-btn:hover,
a.gg-btn:focus-visible { text-decoration: none !important; }
.gg-btn--ara, .gg-btn--whatsapp { color: #fff !important; }
.gg-cta .gg-btn--ara { color: var(--gg-siyah) !important; }
.gg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 50px;
	padding: 12px 22px;
	border: 2px solid transparent;
	border-radius: 6px;
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
}
.gg-btn--ara { background: var(--gg-vurgu); color: #fff; }
.gg-btn--ara:hover, .gg-btn--ara:focus-visible { background: var(--gg-vurgu-koyu); color: #fff; }
.gg-btn--whatsapp { background: var(--gg-yesil); color: #fff; }
.gg-btn--whatsapp:hover, .gg-btn--whatsapp:focus-visible { background: #12602f; color: #fff; }
.gg-btn--yol { background: transparent; color: currentColor; border-color: currentColor; }
.gg-btn--yol:hover, .gg-btn--yol:focus-visible { background: rgba(127, 127, 127, .16); color: currentColor; }
.gg-btn--kucuk { min-height: 44px; padding: 8px 18px; font-size: 1rem; }
.gg-btn:focus-visible, .gg-bar a:focus-visible { outline: 3px solid var(--gg-vurgu-acik); outline-offset: 2px; }
.gg-simge { flex: none; }

/* ---------- Sayfa bölümleri ---------- */

.gg-hero, .gg-bant, .gg-bolum, .gg-cta {
	margin-block: 0 !important;   /* bölümler arasında tema/blok boşluğu kalmasın */
	padding-inline: 20px;
}
.gg-hero > *, .gg-bant > *, .gg-bolum > *, .gg-cta > * {
	max-width: var(--gg-en);
	margin-inline: auto;
}

.gg-hero {
	background: var(--gg-siyah);
	color: #ECEAE6;
	padding-block: clamp(40px, 8vw, 88px);
}
.gg-hero--kucuk { padding-block: clamp(32px, 5vw, 56px); }
.gg-hero h1 { color: #fff; margin-block: 0 16px; max-width: 18ch; text-wrap: balance; }
.gg-hero--kucuk h1 { max-width: none; }
.gg-hero .gg-etiket { color: var(--gg-vurgu-acik); font-weight: 600; letter-spacing: .04em; margin-block: 0 8px; }
.gg-hero .gg-giris { font-size: clamp(1.1rem, 2.5vw, 1.3rem); max-width: 40rem; margin-block: 0; }
.gg-hero .gg-not { color: #B9B6AF; margin-block: 8px 0; font-size: .95rem; }

.gg-bant { background: var(--gg-zemin); padding-block: 28px; border-bottom: 1px solid var(--gg-cizgi); }
.gg-bant .gg-rakam { color: var(--gg-vurgu); font-size: clamp(1.7rem, 4vw, 2.2rem); line-height: 1.1; margin-block: 0 2px; }
.gg-bant p { margin-block: 0; color: var(--gg-soluk); }

.gg-bolum { background: #fff; padding-block: clamp(36px, 6vw, 64px); }
.gg-bolum--koyu { background: var(--gg-siyah); color: #ECEAE6; }
.gg-bolum--koyu h2, .gg-bolum--koyu h3 { color: #fff; }
.gg-bolum--zemin { background: var(--gg-zemin); }
.gg-bolum h2 { margin-block: 0 12px; }
.gg-bolum .gg-giris { max-width: 42rem; margin-block: 0 24px; color: var(--gg-soluk); }
.gg-bolum--koyu .gg-giris { color: #B9B6AF; }

.gg-cta { background: var(--gg-vurgu); color: #fff; padding-block: clamp(36px, 6vw, 56px); }
.gg-cta h2 { color: #fff; margin-block: 0 8px; }
.gg-cta p { margin-block: 0; max-width: 40rem; }
.gg-cta .gg-btn--ara { background: #fff; color: var(--gg-siyah); }
.gg-cta .gg-btn--ara:hover, .gg-cta .gg-btn--ara:focus-visible { background: #F1EFEA; color: var(--gg-siyah); }
.gg-cta .gg-btn--yol { color: #fff; }

/* ---------- Izgara ve kartlar ---------- */

/*
 * Klasik temalarda WordPress, Group bloğunun içeriğini fazladan bir
 * .wp-block-group__inner-container kutusuna sarar. Izgara, kartların gerçek üst kutusuna uygulanır.
 */
.gg-grid,
.gg-grid > .wp-block-group__inner-container {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.gg-grid--2, .gg-grid--2 > .wp-block-group__inner-container { gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.gg-grid--3, .gg-grid--3 > .wp-block-group__inner-container { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.gg-grid > *,
.gg-grid > .wp-block-group__inner-container > * { margin-block: 0; }

.gg-kart {
	background: #fff;
	border: 1px solid var(--gg-cizgi);
	border-radius: 8px;
	padding: 20px;
}
.gg-bolum--zemin .gg-kart { background: #fff; }
.gg-kart h2, .gg-kart h3 { font-size: 1.35rem; margin-block: 0 8px; }
.gg-kart p { margin-block: 0; color: var(--gg-soluk); }

.gg-madde h3, .gg-madde .gg-madde-baslik { font-size: 1.2rem; margin-block: 0 4px; }
.gg-madde p { margin-block: 0; }
.gg-bolum--koyu .gg-madde p { color: #C9C6BF; }

.gg-baglanti { margin-block: 24px 0; font-weight: 600; }

/* ---------- SSS ---------- */

.wp-block-details { border-top: 1px solid var(--gg-cizgi); padding-block: 14px; margin-block: 0; }
.wp-block-details:last-of-type { border-bottom: 1px solid var(--gg-cizgi); }
.wp-block-details summary { font-weight: 600; cursor: pointer; }
.wp-block-details p { margin-block: 8px 0; color: var(--gg-soluk); }

/* ---------- İletişim ---------- */

.gg-saatler { border-collapse: collapse; width: 100%; max-width: 22rem; margin-block: 8px 0; }
.gg-saatler th, .gg-saatler td { text-align: left; padding: 8px 0; border-bottom: 1px solid var(--gg-cizgi); font-variant-numeric: tabular-nums; }
.gg-saatler th { font-weight: 600; padding-right: 16px; }
.gg-harita { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid var(--gg-cizgi); aspect-ratio: 4 / 3; max-width: 100%; }
.gg-harita iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Alt bilgi (footer) ---------- */

.gg-alt { display: grid; gap: 24px 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); align-items: start; text-align: left; max-width: calc(var(--gg-en) + 40px); margin-inline: auto; padding-inline: 20px; }
.gg-alt__sutun { display: flex; flex-direction: column; gap: 4px; }
.gg-alt__sutun span { white-space: pre-line; }
.gg-alt__ad { font-size: 1.2rem; }
.gg-alt a:not(.gg-btn) { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.gg-alt__telif { grid-column: 1 / -1; margin: 8px 0 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: .9rem; opacity: .85; }
.gg-alt .gg-btn { align-self: flex-start; }

/* ---------- Mobil yapışkan alt bar ---------- */

.gg-bar { display: none; }

@media (max-width: 767px) {
	.gg-bar {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		background: var(--gg-siyah);
		border-top: 2px solid var(--gg-vurgu);
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}
	.gg-bar a {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		min-height: 56px;
		color: #fff;
		font-size: .8rem;
		font-weight: 600;
		text-decoration: none;
	}
	.gg-bar a[data-gg="ara"] { background: var(--gg-vurgu); }
	.gg-bar a[data-gg="whatsapp"] { background: var(--gg-yesil); }
	body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
	.gg-hero h1 { max-width: none; }
	.gg-dugmeler .gg-btn { flex: 1 1 100%; }
}