/**
 * Theme Name:  DEVXPE
 * Theme URI:   https://soydan.me
 * Description: DEVXPE kurumsal teması. İnternet sitesi ile ilgili tüm güncellemeler, DEVXPE Panel'den yönetilir.
 * Version:     0.3.77
 * Author:      DEVXPE
 * Author URI:  https://soydan.me
 * License:     GPL-2.0-or-later
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: devxpe-theme
 * Domain Path: /languages
 * Requires at least: 6.0
 * Requires PHP: 7.4
 * Tags:        business, corporate, one-column, custom-logo, translation-ready
 */

/* ══════════════════════════════════════════════════════════
   0. CSS Değişkenleri & Sıfırlama
══════════════════════════════════════════════════════════ */

/*
 * Bootstrap Reboot yerine minimal temel katman.
 *
 * NEDEN: Tema artık Bootstrap CDN'ini yüklemiyor (performans). Bootstrap'ın
 * Reboot katmanı box-sizing, form yazı tipi mirası ve medya hizalamasını
 * sağlıyordu; bunlar olmadan genişlikler kayıyordu. Aşağısı o katmanın
 * kullanılan kısmıdır — tema kuralları bunları ezebilir (önce gelir).
 */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }

h1, h2, h3, h4, h5, h6 { margin-top: 0; }
p { margin-top: 0; }
ul, ol { margin-top: 0; }

button,
input,
optgroup,
select,
textarea {
	margin     : 0;
	font-family: inherit;
	font-size  : inherit;
	line-height: inherit;
}

button,
select { text-transform: none; }

img,
svg,
video { vertical-align: middle; }

:root {
	/* ── tema paleti (referans site) ───────────────────────── */
	--brand-green      : #006731;
	--brand-green-dark : #00461b;
	--brand-charcoal   : #033216;
	--brand-paper      : #f6fcf7;
	--brand-whatsapp   : #3fc168;

	--dxp-primary      : var(--brand-green);
	--dxp-primary-dark : var(--brand-green-dark);
	--dxp-accent       : #ddf1e1;
	--dxp-accent-fg    : var(--brand-green-dark);
	--dxp-text         : var(--brand-charcoal);
	--dxp-text-muted   : #57685b;
	--dxp-header-bg    : var(--brand-paper);
	--dxp-header-text  : var(--brand-charcoal);
	/* Footer zemini/yazısı panelden gelir (Renkler > Footer). Yedek: referans tasarım koyu nötr. */
	--dxp-footer-bg    : #09090b;
	--dxp-footer-text  : #ffffff;
	--dxp-border       : #dae4dc;
	--dxp-muted        : #ebf5ed;
	/* --dxp-text-muted (yukarıda) ikincil yazı rengidir. Panel/PHP tarafı aynı
	   rengi --dxp-muted-fg adıyla da yazar; burada tek kaynağa bağlanır. */
	--dxp-muted-fg     : var(--dxp-text-muted);

	/* ── köşe yarıçapı ölçeği (tek kaynak) ─────────────────── */
	--dxp-radius-sm    : 10px;
	--dxp-radius-md    : 12px;
	--dxp-radius       : 16px; /* varsayılan yüzey/kart yarıçapı */
	--dxp-radius-lg    : 16px;
	--dxp-radius-xl    : 24px;
	--dxp-radius-pill  : 9999px;

	/* ── ince çizgi (ring) ve görünür odak halkası ─────────── */
	--dxp-ring         : 0 0 0 1px rgba(3, 50, 22, .06);
	--dxp-ring-focus   : 0 0 0 3px color-mix(in srgb, var(--dxp-primary) 30%, transparent);

	/* ── dikey ritim (tek ölçek) ───────────────────────────── */
	--dxp-space-section: 64px; /* ana bölümlerin üst/alt boşluğu */
	--dxp-space-block  : 48px; /* bölüm içi alt bloklar */

	/* ── tipografi ölçeği (tek ölçek) ──────────────────────── */
	--dxp-fs-xs  : .75rem;
	--dxp-fs-sm  : .8125rem;
	--dxp-fs-base: .875rem;
	--dxp-fs-md  : 1rem;
	--dxp-fs-lg  : 1.125rem;
	--dxp-fs-xl  : 1.5rem;
	--dxp-fs-2xl : 1.875rem;
	--dxp-fs-3xl : 2.25rem;
	--dxp-fs-4xl : 3rem;
	--dxp-fs-5xl : 3.75rem;

	/* ── geçiş süreleri (tek ölçek) ────────────────────────── */
	--dxp-dur-fast: .15s;
	--dxp-dur     : .2s;
	--dxp-dur-slow: .25s;

	--dxp-shadow       : 0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(3,50,22,.06);
	--dxp-font         : "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--dxp-transition   : .2s ease;
}

/* Mobilde dikey boşluk azalır: daha az kaydırma, daha derli toplu ritim. */
@media (max-width: 640px) {
	:root { --dxp-space-section: 48px; }
}

/* Taşan içerik sayfayı yana kaydırmasın.
   İlk satır eski tarayıcılar için; clip destekleyenlerde ikinci kural geçerli
   (clip, kaydırma kapsayıcısı oluşturmadığı için position: sticky'yi bozmaz). */
html,
body {
	overflow-x: hidden;
	overflow-x: clip;
}

body {
	font-family: var(--dxp-font);
	/* Gövde zemini panelden ayarlanır (Tasarım → Renk → Arkaplan Rengi). Bölümler kendi zeminini çizer. */
	background : var(--dxp-bg, #ffffff);
	color      : var(--dxp-text);
	-webkit-font-smoothing: antialiased;
}

/* `hidden` özniteliği her zaman gizler.
   NEDEN: `.dxp-btn` gibi kurallar `display:inline-flex/block` verdiğinde
   tarayıcının varsayılan `[hidden]{display:none}` kuralı eziliyordu; bu yüzden
   teklif formundaki "Geri/Gönder" butonları ve alan hata notları görünüyordu. */
[hidden] { display: none !important; }

a { color: var(--dxp-link, var(--dxp-primary)); transition: color var(--dxp-transition); }
a:hover { color: var(--dxp-link-hover, var(--dxp-primary-dark)); }

/* Bootstrap butonlarını tema renk değişkenlerine bağlar.
   Normal = ana renk, hover = açık ton, aktif/focus = koyu ton. */
.btn-primary {
	--bs-btn-bg: var(--dxp-primary);
	--bs-btn-border-color: var(--dxp-primary);
	--bs-btn-color: var(--dxp-primary-contrast, #fff);
	--bs-btn-hover-bg: var(--dxp-primary-hover);
	--bs-btn-hover-border-color: var(--dxp-primary-hover);
	--bs-btn-hover-color: var(--dxp-primary-contrast, #fff);
	--bs-btn-active-bg: var(--dxp-primary-focus);
	--bs-btn-active-border-color: var(--dxp-primary-focus);
	--bs-btn-active-color: var(--dxp-primary-contrast, #fff);
	--bs-btn-disabled-bg: var(--dxp-primary);
	--bs-btn-disabled-border-color: var(--dxp-primary);
	--bs-btn-disabled-color: var(--dxp-primary-contrast, #fff);
	--bs-btn-focus-box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--dxp-primary) 35%, transparent);
}

.btn-secondary {
	--bs-btn-bg: var(--dxp-secondary);
	--bs-btn-border-color: var(--dxp-secondary);
	--bs-btn-color: var(--dxp-secondary-contrast, #fff);
	--bs-btn-hover-bg: var(--dxp-secondary-hover);
	--bs-btn-hover-border-color: var(--dxp-secondary-hover);
	--bs-btn-hover-color: var(--dxp-secondary-contrast, #fff);
	--bs-btn-active-bg: var(--dxp-secondary-focus);
	--bs-btn-active-border-color: var(--dxp-secondary-focus);
	--bs-btn-active-color: var(--dxp-secondary-contrast, #fff);
	--bs-btn-focus-box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--dxp-secondary) 35%, transparent);
}

/* Şablon buton dili: pill, büyük harf, hafif harf aralığı */
.btn {
	border-radius: 50px;
	text-transform: uppercase;
	letter-spacing: .5px;
	font-weight: 600;
}

/* Header: dropdown mobil menünün doğru konumlanması için referans nokta */
.dxp-header {
	position: relative;
}

/* ══════════════════════════════════════════════════════════
   1. Skip link (erişilebilirlik)
══════════════════════════════════════════════════════════ */
.skip-link {
	position   : absolute;
	left       : -9999px;
	top        : 6px;
	z-index    : 9999;
	background : var(--dxp-primary);
	color      : #fff;
	padding    : 8px 16px;
	border-radius: 0 0 var(--dxp-radius) var(--dxp-radius);
}
.skip-link:focus { left: 6px; }

/* ══════════════════════════════════════════════════════════
   2. Header — tema tasarımı
══════════════════════════════════════════════════════════ */
.dxp-header {
	background                : color-mix(in srgb, var(--dxp-header-bg) 90%, transparent);
	-webkit-backdrop-filter   : blur(12px);
	backdrop-filter           : blur(12px);
	box-shadow                : var(--dxp-ring);
	z-index                   : 40;
}
.dxp-header--sticky {
	position : sticky;
	top      : 0;
}
.admin-bar .dxp-header--sticky {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.dxp-header-inner {
	width          : 100%;
	max-width      : 1280px;
	margin         : 0 auto;
	padding        : 0 20px;
	display        : flex;
	align-items    : center;
	justify-content: space-between;
	gap            : 16px;
}
.dxp-header-bar > .dxp-header-inner {
	height: 64px;
}

/* Marka / logo */
.dxp-brand {
	display        : flex;
	align-items    : center;
	text-decoration: none;
	flex-shrink    : 0;
}
.dxp-logo {
	height    : 56px;
	width     : auto;
	object-fit: contain;
}
.dxp-logo--mobile  { display: block; }
.dxp-logo--desktop { display: none; }
.dxp-brand-name {
	font-size  : 1.25rem;
	font-weight: 700;
	color      : var(--brand-charcoal);
}

/* Header sloganı (panelden açılıp kapanır): logonun/başlığın yanında,
   ince çizgiyle ayrılmış küçük metin. */
.dxp-brand-tagline {
	margin-left  : 12px;
	padding-left : 12px;
	border-left  : 1px solid color-mix(in srgb, var(--dxp-header-text, var(--brand-charcoal)) 22%, transparent);
	font-size    : .75rem;
	font-weight  : 500;
	line-height  : 1.25;
	max-width    : 240px;
	color        : color-mix(in srgb, var(--dxp-header-text, var(--brand-charcoal)) 62%, transparent);
}
@media (max-width: 991px) {
	.dxp-brand-tagline { display: none; }
}

/*
 * Logo: arkasına zemin eklenmez. Koyu zeminlerde renk çevrilmez; paneldeki
 * "Koyu Zemin Logosu" (logo_dark) gösterilir (bkz. devxpe_brand_logo()).
 */
.dxp-logo,
.dxp-mobile-logo { background: none; }

/* Logo yüklüyse header dikey boşluğu logoya göre esner (sabit 64px yerine). */
.dxp-header--has-logo .dxp-header-bar > .dxp-header-inner {
	height         : auto;
	min-height     : 64px;
	padding-top    : 10px;
	padding-bottom : 10px;
}
.dxp-header--has-logo .dxp-brand { margin: 2px 0; }

/* Slogan konumu (panel: Site Ayarları → Slogan Konumu). */
.dxp-brand--tag-top,
.dxp-brand--tag-bottom {
	flex-direction: column;
	align-items   : flex-start;
}
.dxp-brand--tag-left .dxp-brand-tagline,
.dxp-brand--tag-top .dxp-brand-tagline,
.dxp-brand--tag-bottom .dxp-brand-tagline {
	border-left : 0;
	padding-left: 0;
	margin-left : 0;
}
.dxp-brand--tag-left .dxp-brand-tagline {
	order          : -1;
	margin-right   : 12px;
	padding-right  : 12px;
	border-right   : 1px solid color-mix(in srgb, var(--dxp-header-text, var(--brand-charcoal)) 22%, transparent);
}
.dxp-brand--tag-top .dxp-brand-tagline {
	order        : -1;
	max-width    : 100%;
	margin-bottom: 6px;
}
.dxp-brand--tag-bottom .dxp-brand-tagline {
	max-width: 100%;
	margin-top: 6px;
}

/* Hamburger solda: logo + hamburger solda gruplanır, aksiyonlar sağa itilir. */
.dxp-burger-left { justify-content: flex-start; }
.dxp-burger-left .dxp-actions { margin-left: auto; }

/* Masaüstü menü */
.dxp-nav-wrap { display: none; }
.dxp-nav .dxp-nav-list {
	list-style: none;
	margin    : 0;
	padding   : 0;
	display   : flex;
	align-items: center;
	gap       : 4px;
}
.dxp-nav .dxp-nav-list > li { position: relative; }
.dxp-nav .dxp-nav-list > li > a {
	display        : inline-flex;
	align-items    : center;
	gap            : 4px;
	padding        : 6px 12px;
	border-radius  : 9999px;
	font-size      : .875rem;
	font-weight    : 500;
	color          : color-mix(in srgb, var(--brand-charcoal) 80%, transparent);
	text-decoration: none;
	transition     : background var(--dxp-dur-fast), color var(--dxp-dur-fast);
}
.dxp-nav .dxp-nav-list > li > a:hover,
.dxp-nav .dxp-nav-list > li.current-menu-item > a,
.dxp-nav .dxp-nav-list > li.current_page_item > a,
.dxp-nav .dxp-nav-list > li.current-menu-ancestor > a {
	background: color-mix(in srgb, var(--brand-charcoal) 5%, transparent);
	color     : var(--brand-charcoal);
}

/* Alt menü (Legal vb.) */
.dxp-nav .dxp-nav-list .sub-menu {
	position      : absolute;
	top           : calc(100% + 8px);
	left          : 0;
	min-width     : 190px;
	list-style    : none;
	margin        : 0;
	padding       : 6px;
	background    : #ffffff;
	border        : 1px solid var(--dxp-border);
	border-radius : var(--dxp-radius);
	box-shadow    : 0 10px 30px rgba(3, 50, 22, .12);
	display       : none;
	flex-direction: column;
	gap           : 2px;
	z-index       : 50;
}
.dxp-nav .dxp-nav-list li:hover > .sub-menu,
.dxp-nav .dxp-nav-list li:focus-within > .sub-menu { display: flex; }
.dxp-nav .dxp-nav-list .sub-menu a {
	display        : block;
	padding        : 8px 10px;
	border-radius  : 8px;
	font-size      : .875rem;
	color          : var(--brand-charcoal);
	text-decoration: none;
}
.dxp-nav .dxp-nav-list .sub-menu a:hover { background: var(--dxp-muted); }

/* Aksiyon butonları */
.dxp-actions {
	display    : flex;
	align-items: center;
	gap        : 8px;
}
.dxp-pill {
	display        : none;
	align-items    : center;
	gap            : 8px;
	border-radius  : 9999px;
	font-size      : .75rem;
	font-weight    : 600;
	text-decoration: none;
	white-space    : nowrap;
}
.dxp-pill--phone {
	background: var(--brand-charcoal);
	color     : #ffffff;
	padding   : 8px 12px;
}
.dxp-pill--phone svg { width: 14px; height: 14px; }
.dxp-pill--quote {
	background: var(--brand-green);
	color     : #ffffff;
	padding   : 8px 16px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 2px color-mix(in srgb, var(--brand-green) 20%, transparent);
}
.dxp-pill--phone:hover,
.dxp-pill--quote:hover {
	color  : #ffffff;
	filter : brightness(.94);
}

.dxp-icon-btn {
	display        : inline-flex;
	align-items    : center;
	justify-content: center;
	width          : 36px;
	height         : 36px;
	padding        : 0;
	border         : 0;
	background     : transparent;
	border-radius  : 9999px;
	color          : var(--brand-charcoal);
	cursor         : pointer;
	transition     : background var(--dxp-dur-fast), color var(--dxp-dur-fast);
}
.dxp-icon-btn svg { width: 20px; height: 20px; }
.dxp-icon-btn:hover { background: color-mix(in srgb, var(--brand-charcoal) 6%, transparent); }
.dxp-icon-btn--phone {
	background: var(--brand-charcoal);
	color     : #ffffff;
}
.dxp-icon-btn--phone svg { width: 16px; height: 16px; }
.dxp-icon-btn--phone:hover { background: var(--brand-green-dark); color: #ffffff; }

/* ══════════════════════════════════════════════════════════
   Mobil menü — açılış stili panelden (mobile_menu_style)
   4 stil: dropdown / offcanvas_left / offcanvas_right / modal_center
   Tek markup; fark yalnızca konumlandırma ve animasyon.
══════════════════════════════════════════════════════════ */
.dxp-mobile-menu {
	background : var(--brand-paper);
}

/* Kapak (yalnızca ekranı kaplayan stillerde basılır) */
.dxp-mobile-overlay {
	position   : fixed;
	inset      : 0;
	/*
	 * z-index, header (1060) ve yüzen buton/mobil bar (9997-9998)'dan YÜKSEK:
	 * menü açılınca ekranın TAMAMI (header dâhil) kaplanır. Menü paneli 10001
	 * ile perdenin de üstünde kalır.
	 *
	 * PERFORMANS: Tam ekran `backdrop-filter: blur()` mobilde her karede
	 * yeniden bulanıklaştırma yaptığı için kaydırmayı takıyordu; onun yerine
	 * düz yarı saydam perde kullanılır (GPU'da çok daha ucuz, akıcı).
	 */
	z-index    : 10000;
	background : rgba(3, 50, 22, .45);
	opacity    : 0;
	visibility : hidden;
	/* Kapalıyken (ve kapanış geçişi boyunca) tıklamayı geçir: hamburger
	   görünür kaldığı sürece overlay araya girip tıklamayı yutmasın. */
	pointer-events: none;
	touch-action: none;
	transition : opacity .22s ease, visibility .22s ease;
}
.dxp-mobile-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
.admin-bar .dxp-mobile-overlay { top: var(--wp-admin--admin-bar--height, 32px); }

/* Kapatma butonu: yalnızca ekranı kaplayan stillerde görünür */
.dxp-mobile-close {
	display         : none;
	position        : absolute;
	top             : 10px;
	right           : 10px;
	align-items     : center;
	justify-content : center;
	width           : 34px;
	height          : 34px;
	padding         : 0;
	border          : 0;
	border-radius   : 9999px;
	background      : rgba(0, 0, 0, .06);
	color           : var(--brand-charcoal);
	cursor          : pointer;
}
.dxp-mobile-close svg { width: 18px; height: 18px; }
.dxp-mobile-menu:not(.dxp-mobile-menu--dropdown) .dxp-mobile-close { display: inline-flex; }

/*
 * 1) Dropdown — header'ın hemen altında, EKRANI KAPLAYAN panel gibi davranır.
 * position:fixed olduğu için belge akışına girmez ve açılınca altındaki
 * içeriği (manşet) aşağı İTMEZ. Aç/kapa display ile değil; display akışı
 * değiştirir, bu yüzden opacity/visibility/transform ile yapılır.
 */
.dxp-mobile-menu--dropdown {
	position   : fixed;
	top        : var(--dxp-header-h, 64px);
	left       : 0;
	right      : 0;
	z-index    : 1050;
	max-height : calc(100vh - var(--dxp-header-h, 64px));
	max-height : calc(100dvh - var(--dxp-header-h, 64px));
	overflow-y : auto;
	overscroll-behavior: contain;
	border-top : 1px solid rgba(0, 0, 0, .05);
	padding    : 12px 20px;
	box-shadow : 0 10px 40px rgba(3, 50, 22, .18);
	transform  : translateY(-8px);
	opacity    : 0;
	visibility : hidden;
	pointer-events: none;
	transition : opacity var(--dxp-dur) ease, transform var(--dxp-dur) ease, visibility var(--dxp-dur);
}
.dxp-mobile-menu--dropdown.open {
	transform  : translateY(0);
	opacity    : 1;
	visibility : visible;
	pointer-events: auto;
}

/* 2-3) Off-canvas — yandan kayar */
.dxp-mobile-menu--offcanvas_left,
.dxp-mobile-menu--offcanvas_right {
	position       : fixed;
	top            : 0;
	bottom         : 0;
	/* Perdenin (10000) ÜSTÜNDE olmalı: kapanış animasyonu sırasında da
	   perdenin altına düşmesin (yoksa panel kararıp "flash" gibi görünür). */
	z-index        : 10001;
	display        : flex;
	flex-direction : column;
	width          : 320px;
	max-width      : 86vw;
	/* Panel position:fixed ve ekranı kaplar; üst boşluk header'ın ALTINDA
	   kalacak kadar (kaydırma konumundan bağımsız). Header yüksekliği yoksa
	   en az 18px bırakılır. */
	padding        : max(var(--dxp-header-h, 0px), 18px) 18px 24px;
	overflow-y     : auto;
	overscroll-behavior: contain;
	box-shadow     : 0 10px 40px rgba(3, 50, 22, .22);
	visibility     : hidden;
	/* Yayın panelindeki menüyle AYNI basit geçiş: yalnızca yandan kayma.
	   Fade/blur/ölçek yok → kapanışta saydamlaşıp "flash" yapmaz. */
	transition     : transform .22s ease, visibility .22s ease;
}
.dxp-mobile-menu--offcanvas_left  { left: 0;  transform: translate3d(-100%, 0, 0); }
.dxp-mobile-menu--offcanvas_right { right: 0; transform: translate3d(100%, 0, 0); }
.dxp-mobile-menu--offcanvas_left.open,
.dxp-mobile-menu--offcanvas_right.open {
	transform  : translate3d(0, 0, 0);
	visibility : visible;
}

/* 4) Modal — ekranın ortasında belirir */
.dxp-mobile-menu--modal_center {
	position       : fixed;
	top            : 50%;
	left           : 50%;
	z-index        : 10001;
	display        : flex;
	flex-direction : column;
	width          : 92vw;
	max-width      : 420px;
	max-height     : 82vh;
	padding        : 18px;
	overflow-y     : auto;
	overscroll-behavior: contain;
	border-radius  : 16px;
	box-shadow     : 0 20px 60px rgba(3, 50, 22, .3);
	transform      : translate(-50%, calc(-50% + 28px));
	opacity        : 0;
	visibility     : hidden;
	transition     : transform var(--dxp-dur-slow) cubic-bezier(.4, 0, .2, 1), opacity var(--dxp-dur) ease, visibility var(--dxp-dur-slow);
}
.dxp-mobile-menu--modal_center.open {
	transform  : translate(-50%, -50%);
	opacity    : 1;
	visibility : visible;
}

/* Admin bar açıkken ekranı kaplayan panelleri aşağı hizala */
.admin-bar .dxp-mobile-menu--offcanvas_left,
.admin-bar .dxp-mobile-menu--offcanvas_right {
	top: var(--wp-admin--admin-bar--height, 32px);
}
.admin-bar .dxp-mobile-menu--dropdown {
	top: calc(var(--dxp-header-h, 64px) + var(--wp-admin--admin-bar--height, 32px));
}
.admin-bar .dxp-mobile-menu--modal_center {
	top: calc(50% + var(--wp-admin--admin-bar--height, 32px) / 2);
}

/*
 * Menü açıkken header ve yüzen butonlar doğal olarak perdenin (z-index 10000)
 * ALTINDA kalır (header 40, butonlar 9997-9998); ayrı bir JS sınıfı veya
 * z-index kuralı GEREKMEZ.
 *
 * KAYDIRMA KİLİDİ YOK (yayın panelindeki menüyle aynı davranış): perde tam
 * ekran ve `touch-action: none` olduğu için mobilde arka plan kaymaz. Böylece
 * `overflow:hidden` ile kaydırma çubuğunu kaldırıp genişleme/zıplama sorunu
 * hiç oluşmaz — JS telafisi de gerekmez.
 */

/*
 * Erişilebilirlik standardı: `prefers-reduced-motion: reduce` (kullanıcının
 * cihazında "animasyonları kaldır" açık) ise menü/perde geçişi KAPATILIR;
 * menü anında açılıp kapanır. Bu ayarı kullanıcı tercihine bırakıyoruz.
 */
@media (prefers-reduced-motion: reduce) {
	.dxp-mobile-menu,
	.dxp-mobile-overlay { transition: none; }
	.dxp-mobile-menu--modal_center { transform: translate(-50%, -50%); }
}

.dxp-mobile-logo {
	display    : block;
	height     : 80px;
	width      : auto;
	max-width  : 100%;
	margin     : 0 auto 12px;
	object-fit : contain;
}

.dxp-mobile-list,
.dxp-mobile-list ul {
	list-style : none;
	margin     : 0;
	padding    : 0;
}
.dxp-mobile-list {
	display : grid;
	gap     : 4px;
}
.dxp-mobile-list a {
	display         : block;
	padding         : 8px 12px;
	border-radius   : 8px;
	color           : color-mix(in srgb, var(--brand-charcoal) 80%, transparent);
	font-size       : .875rem;
	font-weight     : 500;
	text-decoration : none;
}
.dxp-mobile-list a:hover,
.dxp-mobile-list li.current-menu-item > a,
.dxp-mobile-list li.current_page_item > a {
	background : color-mix(in srgb, var(--brand-charcoal) 5%, transparent);
	color      : var(--brand-charcoal);
}
.dxp-mobile-list .sub-menu { padding-left: 12px; }
.dxp-mobile-list .sub-menu a {
	font-size   : .8125rem;
	font-weight : 400;
}
/* Link'siz menü etiketi ('#' URL'li öğe) — referans tasarım'teki bölüm başlığı gibi */
.dxp-mobile-list .dxp-nav-label {
	display        : block;
	padding        : 8px 12px 4px;
	font-size      : .75rem;
	font-weight    : 600;
	letter-spacing : .1em;
	text-transform : uppercase;
	color          : var(--dxp-text-muted);
	cursor         : default;
}

.dxp-mobile-cta {
	display         : block;
	margin-top      : 8px;
	padding         : 11px 16px;
	border-radius   : 9999px;
	background      : var(--brand-green);
	color           : #ffffff;
	font-size       : .875rem;
	font-weight     : 600;
	text-align      : center;
	text-decoration : none;
}
.dxp-mobile-cta:hover { background: var(--brand-green-dark); color: #ffffff; }

/* Hamburger: dokunmatikte gecikmesiz tıklama (fastclick'e gerek yok) */
.dxp-burger {
	touch-action                : manipulation;
	-webkit-tap-highlight-color : transparent;
}

/* Hamburger: açıkken çarpıya döner */
.dxp-burger .dxp-burger-close { display: none; }
.dxp-burger.open .dxp-burger-open  { display: none; }
.dxp-burger.open .dxp-burger-close { display: inline-flex; }

/* Kırılma noktaları */
@media (min-width: 640px) {
	.dxp-pill--phone,
	.dxp-pill--quote { display: inline-flex; }
	.dxp-icon-btn--phone { display: none; }
}
/* Menü / hamburger görünürlüğü panelin kırılma noktasına göre inline CSS'te
   yönetilir (functions.php). Burada yalnızca logo boyutu. */
@media (min-width: 1024px) {
	.dxp-logo     { height: 64px; }
	.dxp-logo--mobile  { display: none; }
	.dxp-logo--desktop { display: block; }
}

/* Hamburger ve mobil menü stilleri yukarıdaki "2. Header" bloğunda. */

/* ══════════════════════════════════════════════════════════
   4. WP Admin Bar uyumu
   Giriş yapılınca üstte sabit duran yönetim çubuğu (admin bar):
   32px (≥783px) / 46px (<783px). Yapışkan header ofseti
   functions.php'de sticky bloğunda verilir.
══════════════════════════════════════════════════════════ */

/*
 * WP, 600px altında admin bar'ı "position: absolute" yapar ve kaydırınca
 * kaybolur; yapışkan header ise 46px ofset verdiği için gap oluşur. Admin bar'ı
 * 600px altında da ekranın üstüne sabitleyerek hizayı koruyoruz.
 */
@media screen and (max-width: 600px) {
	#wpadminbar { position: fixed !important; }
}

/* ══════════════════════════════════════════════════════════
   5. Ticker (Haber Bandı)
══════════════════════════════════════════════════════════ */
.dxp-ticker-wrap {
	color: #fff;
	overflow: hidden;
	font-size: 13.5px;
	font-weight: 500;
	width: 100%;
}

.dxp-ticker-inner {
	display: flex;
	align-items: center;
	height: 40px;
	width: 100%;
}

.dxp-ticker-label {
	background: rgba(0, 0, 0, 0.2);
	padding: 0 16px;
	height: 100%;
	display: flex;
	align-items: center;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-size: 12px;
	flex-shrink: 0;
	position: relative;
	z-index: 2;
	white-space: nowrap;
}

.dxp-ticker-label::after {
	content: '';
	position: absolute;
	right: -10px;
	top: 0;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 10px solid rgba(0, 0, 0, 0.2);
}

.dxp-ticker-content {
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	position: relative;
	height: 100%;
	margin-left: 18px;
	white-space: nowrap;
}

.dxp-ticker-marquee {
	display: inline-block;
	white-space: nowrap;
	line-height: 40px;
	padding-left: 100%;
	animation: dxpMarquee 25s linear infinite;
	will-change: transform;
}

.dxp-ticker-marquee:hover {
	animation-play-state: paused;
}

.dxp-ticker-speed-slow { animation-duration: 35s; }
.dxp-ticker-speed-normal { animation-duration: 25s; }
.dxp-ticker-speed-fast { animation-duration: 15s; }

.dxp-ticker-item {
	display: inline-block;
	padding-right: 48px;
	position: relative;
	white-space: nowrap;
	vertical-align: middle;
}

.dxp-ticker-item::after {
	content: '•';
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0.5;
}

.dxp-ticker-item:last-child::after {
	content: '';
}

@keyframes dxpMarquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-100%, 0, 0); }
}

/* Tablet / Mobil uyum */
@media (max-width: 991.98px) {
	.dxp-ticker-wrap    { font-size: 12.8px; }
	.dxp-ticker-label   { padding: 0 12px; font-size: 11px; }
	.dxp-ticker-content { margin-left: 14px; }
	.dxp-ticker-item    { padding-right: 34px; }
	.dxp-ticker-item::after { right: 12px; }
}

@media (max-width: 575.98px) {
	.dxp-ticker-wrap    { font-size: 12px; }
	.dxp-ticker-label   { padding: 0 10px; letter-spacing: .02em; }
	.dxp-ticker-content { margin-left: 12px; }
	.dxp-ticker-item    { padding-right: 26px; }
	.dxp-ticker-item::after { right: 8px; }
}

/* Hareket azaltma tercihi (erişilebilirlik) */
@media (prefers-reduced-motion: reduce) {
	.dxp-ticker-marquee { animation: none; }
}

/* ══════════════════════════════════════════════════════════
   6. Sabit Yan Reklamlar (Sticky Ads)
══════════════════════════════════════════════════════════ */
.dxp-sticky-ad {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1000;
	background: #fff;
	box-shadow: 0 10px 30px rgba(0,0,0,0.1);
	border: 1px solid var(--dxp-border);
	border-radius: var(--dxp-radius);
	padding: 8px;
}

.dxp-sticky-ad-left {
	left: 10px;
}

.dxp-sticky-ad-right {
	right: 10px;
}

.dxp-sticky-close {
	position: absolute;
	top: -12px;
	right: -12px;
	background: var(--dxp-text);
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	z-index: 10;
}

.dxp-sticky-close:hover {
	background: var(--dxp-primary);
}

.dxp-sticky-content {
	min-width: 120px;
	min-height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Mobil (≤ 1199px) için alta sabitlenen yatay reklamlar */
@media (max-width: 1199px) {
	.dxp-sticky-ad {
		position: relative;
		top: auto;
		transform: none;
		border-radius: 0;
		border: none;
		box-shadow: none;
		flex: 1;
		display: flex;
		justify-content: center;
		padding: 4px;
		border-right: 1px solid var(--dxp-border);
	}
	.dxp-sticky-ad:last-child {
		border-right: none;
	}
	.dxp-sticky-ad-left { left: auto; }
	.dxp-sticky-ad-right { right: auto; }
	.dxp-sticky-close {
		top: -10px;
		right: 4px;
	}
	.dxp-sticky-content {
		min-width: auto;
		min-height: 50px;
		max-height: 90px;
		width: 100%;
	}
	.dxp-sticky-content * {
		max-height: 90px !important;
		max-width: 100% !important;
	}
}

/* 6. Mobil menü stilleri "2. Header" bloğunda (sheet). */

/* ══════════════════════════════════════════════════════════
   7. Sidebar (Widget Alanı)
══════════════════════════════════════════════════════════ */
.dxp-sidebar .widget {
	background    : #fff;
	border        : 1px solid var(--dxp-border);
	border-radius : var(--dxp-radius);
	margin-bottom : 1.5rem;
	padding       : 1.25rem;
}

.dxp-sidebar .widget-title {
	font-size     : 1rem;
	font-weight   : 700;
	color         : var(--dxp-text);
	margin-bottom : 1rem;
	padding-bottom: .75rem;
	border-bottom : 2px solid var(--dxp-primary);
}

.dxp-sidebar .widget ul {
	list-style   : none;
	margin       : 0;
	padding      : 0;
}

.dxp-sidebar .widget ul li {
	padding      : .45rem 0;
	border-bottom: 1px solid rgba(0,0,0,.05);
}

.dxp-sidebar .widget ul li:last-child {
	border-bottom: none;
}

.dxp-sidebar .widget ul li a {
	color    : var(--dxp-text);
	text-decoration: none;
}

.dxp-sidebar .widget ul li a:hover {
	color: var(--dxp-primary);
}

/* ══════════════════════════════════════════════════════════
   8. Şablon: Header / Footer / Ana Sayfa Bölümleri
   Referans: renk paleti (yesil / komur)
══════════════════════════════════════════════════════════ */

/* Üst bar (opsiyonel) */
.dxp-topbar {
	/* Zemin panelden ayarlanır (Üst Bar Rengi); boşsa ana renk takip edilir. */
	background  : var(--dxp-topbar-bg, var(--brand-charcoal));
	border-color: rgba(255, 255, 255, 0.1) !important;
}
.dxp-topbar-link {
	color     : color-mix(in srgb, var(--dxp-topbar-text, #ffffff), transparent 20%);
	transition: color var(--dxp-transition);
}
.dxp-topbar-link:hover { color: var(--dxp-topbar-text, #ffffff); }

/* Anasayfada içerik bölümleri tam genişlik; main'in dikey dolgusunu sıfırla.
   Bootstrap .py-4 !important kullandığı için burada da !important gerekir. */
body.home .dxp-main {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* ── Hero (referans tasarım) ─────────────────────────────────────────── */
.dxp-hero {
	background: var(--dxp-bg-soft, var(--brand-paper));
	padding   : 32px 0;
}
@media (min-width: 1024px) {
	.dxp-hero { padding: 56px 0 64px; }
}
.dxp-hero-inner {
	width                 : 100%;
	max-width             : 1280px;
	margin                : 0 auto;
	padding               : 0 20px;
	display               : grid;
	grid-template-columns : 1fr;
	gap                   : 32px;
	align-items           : start;
}
@media (min-width: 1024px) {
	.dxp-hero-inner { grid-template-columns: 1fr 1fr; gap: 48px; }
}
.dxp-hero-copy {
	display       : flex;
	flex-direction: column;
	gap           : 24px;
}

/* Rozet */
.dxp-hero-badge {
	display       : inline-flex;
	align-items   : center;
	gap           : 8px;
	align-self    : flex-start;
	padding       : 4px 12px;
	border-radius : 9999px;
	background    : color-mix(in srgb, var(--brand-green) 10%, transparent);
	color         : var(--brand-green);
	font-size     : 11px;
	font-weight   : 600;
	line-height   : 1.6;
	text-transform: uppercase;
	letter-spacing: .1em;
}
.dxp-hero-badge-dot {
	position     : relative;
	width        : 6px;
	height       : 6px;
	border-radius: 9999px;
	background   : var(--brand-green);
	flex-shrink  : 0;
}

/* Uptime tarzı "canlı" nokta: sabit çekirdek + dışa yayılıp sönen halka. */
.dxp-hero-badge-dot::after {
	content      : '';
	position     : absolute;
	inset        : 0;
	border-radius: inherit;
	background   : inherit;
	animation    : dxpDotPing 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}

@keyframes dxpDotPing {
	0%   { transform: scale(1);   opacity: .65; }
	100% { transform: scale(2.6); opacity: 0; }
}

/* Hareket azaltma tercihi: nokta sabit kalır. */
@media (prefers-reduced-motion: reduce) {
	.dxp-hero-badge-dot::after { animation: none; }
}

/* Başlık + alt metin */
.dxp-hero-title {
	margin        : 0;
	font-size     : var(--dxp-fs-3xl);
	font-weight   : 700;
	line-height   : 1.05;
	letter-spacing: -.025em;
	color         : var(--brand-charcoal);
	text-wrap     : balance;
}
@media (min-width: 640px)  { .dxp-hero-title { font-size: var(--dxp-fs-4xl); } }
@media (min-width: 1024px) { .dxp-hero-title { font-size: var(--dxp-fs-5xl); } }

.dxp-hero-subtitle {
	margin     : 0;
	max-width  : 52ch;
	font-size  : 1rem;
	line-height: 1.625;
	color      : color-mix(in srgb, var(--brand-charcoal) 70%, transparent);
	text-wrap  : pretty;
}
@media (min-width: 640px) { .dxp-hero-subtitle { font-size: 1.125rem; } }

/* Butonlar */
.dxp-hero-buttons {
	display       : flex;
	flex-direction: column;
	gap           : 12px;
}
@media (min-width: 640px) {
	.dxp-hero-buttons { flex-direction: row; }
}
.dxp-btn {
	display        : inline-flex;
	align-items    : center;
	justify-content: center;
	gap            : 8px;
	height         : 48px;
	padding        : 0 24px;
	border-radius  : 9999px;
	font-size      : 1rem;
	font-weight    : 600;
	text-decoration: none;
	white-space    : nowrap;
	transition     : background var(--dxp-dur-fast), color var(--dxp-dur-fast), border-color var(--dxp-dur-fast);
}
.dxp-btn .dxp-ic { width: 16px; height: 16px; flex-shrink: 0; }
.dxp-btn--primary {
	background: var(--brand-green);
	color     : #ffffff;
	box-shadow: 0 1px 3px rgba(3, 50, 22, .18), 0 8px 24px rgba(3, 50, 22, .12);
}
.dxp-btn--primary:hover {
	background: var(--brand-green-dark);
	color     : #ffffff;
}
.dxp-btn--outline {
	background: #ffffff;
	color     : var(--brand-charcoal);
	border    : 1px solid color-mix(in srgb, var(--brand-charcoal) 15%, transparent);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.dxp-btn--outline:hover {
	background: var(--dxp-accent);
	color     : var(--dxp-accent-fg);
}

/* Rozet çipleri */
.dxp-hero-chips {
	display              : grid;
	grid-template-columns: repeat(4, 1fr);
	gap                  : 8px;
	padding              : 12px;
	border-radius        : 16px;
	background           : #ffffff;
	box-shadow           : var(--dxp-ring);
}
.dxp-chip {
	display       : flex;
	flex-direction: column;
	align-items   : center;
	gap           : 4px;
	padding       : 4px 0;
	text-align    : center;
}
.dxp-chip .dxp-ic {
	width : 16px;
	height: 16px;
	color : var(--brand-green);
}
.dxp-chip-value {
	font-size  : 13px;
	font-weight: 600;
	line-height: 1;
	color      : var(--brand-charcoal);
}
.dxp-chip-label {
	font-size     : 10px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color         : var(--dxp-text-muted);
}

/* Dar ekranda 4'lü rozeti 2x2 yap; metin taşmasın. */
@media (max-width: 640px) {
	.dxp-hero-chips { grid-template-columns: repeat(2, 1fr); }
	.dxp-chip-value,
	.dxp-chip-label { overflow-wrap: anywhere; }
	.dxp-chip-value { line-height: 1.15; }
	.dxp-chip-label { line-height: 1.25; }
}

/* Mobilde hero altına, yüzen iletişim butonları için boşluk bırak
   (chips butonların üstüne binmesin). */
@media (max-width: 767.98px) {
	.dxp-hero { padding-bottom: 96px; }
}

/* Görsel */
.dxp-hero-media { margin-top: 32px; }
@media (min-width: 1024px) {
	.dxp-hero-media { margin-top: 0; }
}
.dxp-hero-media-frame {
	overflow     : hidden;
	border-radius: 24px;
	box-shadow   : var(--dxp-ring);
}
.dxp-hero-media-frame img {
	display    : block;
	width      : 100%;
	/* `height: auto` ŞART: CLS için eklenen width/height öznitelikleri
	   presentational hint olarak height verir ve aspect-ratio'yu ezer. */
	height     : auto;
	aspect-ratio: 4 / 3;
	object-fit : cover;
}

/* ── Hizmetler (referans tasarım) ────────────────────────────────────── */
.dxp-services {
	background: var(--dxp-bg, #ffffff);
	padding   : var(--dxp-space-section) 0;
}
.dxp-services-inner {
	width    : 100%;
	max-width: 1280px;
	margin   : 0 auto;
	padding  : 0 20px;
}

/* Bölüm başlığı */
.dxp-section-head {
	max-width     : 672px;
	display       : flex;
	flex-direction: column;
	gap           : 12px;
}
.dxp-eyebrow {
	font-size     : 11px;
	font-weight   : 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	color         : var(--brand-green);
}
.dxp-section-h2 {
	margin        : 0;
	font-size     : var(--dxp-fs-2xl);
	font-weight   : 700;
	line-height   : 1.2;
	letter-spacing: -.02em;
	color         : var(--brand-charcoal);
}
@media (min-width: 640px) {
	.dxp-section-h2 { font-size: var(--dxp-fs-3xl); }
}
.dxp-section-sub {
	margin   : 0;
	font-size: 1rem;
	color    : var(--dxp-text-muted);
}

/* Kart ızgarası */
.dxp-cards {
	margin-top           : 40px;
	display              : grid;
	grid-template-columns: 1fr;
	gap                  : 20px;
}
@media (min-width: 640px) {
	.dxp-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.dxp-cards { grid-template-columns: repeat(3, 1fr); }
}

/* "Daha fazla göster" (Hizmetler + Projeler): gizli kartlar + aç/kapa butonu (JS'siz). */
.dxp-services-extra { display: none; margin-top: 20px; }
.dxp-services-toggle:checked ~ .dxp-services-extra { display: grid; }
.dxp-services-morebtn,
.dxp-projects-morebtn {
	display     : flex;
	width       : max-content;
	margin      : 24px auto 0;
	align-items : center;
	gap         : 6px;
	padding     : 10px 22px;
	border      : 1px solid var(--dxp-border, #dae4dc);
	border-radius: 9999px;
	background  : #fff;
	color       : var(--brand-green, #006731);
	font-size   : .875rem;
	font-weight : 600;
	cursor      : pointer;
	text-align  : center;
}
.dxp-services-morebtn:hover,
.dxp-projects-morebtn:hover { background: var(--dxp-muted, #ebf5ed); }
.dxp-smore-close { display: none; }
.dxp-services-toggle:checked ~ .dxp-services-morebtn .dxp-smore-open { display: none; }
.dxp-services-toggle:checked ~ .dxp-services-morebtn .dxp-smore-close { display: inline; }

.dxp-card {
	display        : block;
	overflow       : hidden;
	border-radius  : 16px;
	background     : var(--brand-paper);
	box-shadow     : var(--dxp-ring);
	text-decoration: none;
	color          : inherit;
	transition     : box-shadow var(--dxp-dur-slow);
}
.dxp-card:hover {
	box-shadow: var(--dxp-ring), 0 12px 30px rgba(3, 50, 22, .12);
}
.dxp-card-media {
	aspect-ratio: 4 / 3;
	overflow    : hidden;
}
.dxp-card-media img {
	display   : block;
	width     : 100%;
	height    : 100%;
	object-fit: cover;
	transition: transform .5s;
}
.dxp-card:hover .dxp-card-media img { transform: scale(1.05); }

.dxp-card-body {
	padding: 20px;
}
.dxp-card-body h3 {
	margin     : 0 0 4px;
	font-size  : 1rem;
	font-weight: 600;
	color      : var(--brand-charcoal);
}
.dxp-card-body p {
	margin     : 0;
	font-size  : .875rem;
	line-height: 1.5;
	color      : var(--dxp-text-muted);
}
.dxp-card-link {
	margin-top : 12px;
	display    : inline-flex;
	align-items: center;
	gap        : 4px;
	font-size  : .875rem;
	font-weight: 500;
	color      : var(--brand-green);
}
.dxp-card-link .dxp-ic { width: 14px; height: 14px; }

/* Etiket / kategori satırı */
.dxp-tagrow {
	margin-top: 32px;
	display   : flex;
	flex-wrap : wrap;
	gap       : 8px;
}
.dxp-tag {
	display        : inline-block;
	padding        : 6px 12px;
	border-radius  : 9999px;
	border         : 1px solid rgba(0, 0, 0, .1);
	background     : #ffffff;
	font-size      : .75rem;
	font-weight    : 500;
	color          : color-mix(in srgb, var(--brand-charcoal) 70%, transparent);
	text-decoration: none;
	transition     : border-color var(--dxp-dur-fast), color var(--dxp-dur-fast);
}
.dxp-tag:hover {
	border-color: color-mix(in srgb, var(--brand-green) 40%, transparent);
	color       : var(--brand-charcoal);
}

/* ── Neden Biz (referans tasarım) ────────────────────────────────────── */
.dxp-features {
	background: var(--dxp-bg-soft, var(--brand-paper));
	padding   : var(--dxp-space-section) 0;
}
.dxp-features-grid {
	margin-top           : 40px;
	display              : grid;
	grid-template-columns: 1fr;
	gap                  : 20px;
}
@media (min-width: 640px) {
	.dxp-features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.dxp-features-grid { grid-template-columns: repeat(4, 1fr); }
}
.dxp-feature {
	background   : #ffffff;
	border-radius: 16px;
	padding      : 20px;
	box-shadow   : var(--dxp-ring);
}
.dxp-feature .dxp-ic {
	width : 24px;
	height: 24px;
	color : var(--brand-green);
}
.dxp-feature h3 {
	margin     : 12px 0 0;
	font-size  : 1rem;
	font-weight: 600;
	color      : var(--brand-charcoal);
}
.dxp-feature p {
	margin     : 4px 0 0;
	font-size  : .875rem;
	line-height: 1.5;
	color      : var(--dxp-text-muted);
}

/* ── Nasıl Çalışır (referans tasarım) ────────────────────────────────── */
.dxp-steps {
	background: var(--dxp-bg, #ffffff);
	padding   : var(--dxp-space-section) 0;
}
.dxp-steps-grid {
	margin-top           : 40px;
	display              : grid;
	grid-template-columns: 1fr;
	gap                  : 20px;
	list-style           : none;
	padding              : 0;
}
@media (min-width: 640px) {
	.dxp-steps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.dxp-steps-grid { grid-template-columns: repeat(5, 1fr); }
}
.dxp-step {
	background   : var(--brand-paper);
	border-radius: 16px;
	padding      : 20px;
	box-shadow   : var(--dxp-ring);
}
.dxp-step-num {
	display        : inline-flex;
	align-items    : center;
	justify-content: center;
	width          : 32px;
	height         : 32px;
	border-radius  : 9999px;
	background     : var(--brand-green);
	color          : #ffffff;
	font-size      : .875rem;
	font-weight    : 700;
}
.dxp-step h3 {
	margin     : 12px 0 0;
	font-size  : 1rem;
	font-weight: 600;
	color      : var(--brand-charcoal);
}
.dxp-step p {
	margin     : 4px 0 0;
	font-size  : .875rem;
	line-height: 1.625;
	color      : var(--dxp-text-muted);
}

/* ── Projeler (referans tasarım) ─────────────────────────────────────── */
.dxp-projects {
	background: var(--dxp-bg-soft, var(--brand-paper));
	padding   : var(--dxp-space-section) 0;
}
.dxp-projects-grid {
	margin-top           : 40px;
	display              : grid;
	grid-template-columns: 1fr;
	gap                  : 24px;
}
@media (min-width: 640px) {
	.dxp-projects-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.dxp-projects-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Projeler "Daha fazla göster": Hizmetler ile aynı mekanizma (gizli grid + etiket). */
.dxp-projects-extra { display: none; }
.dxp-projects-toggle:checked ~ .dxp-projects-extra { display: grid; }
.dxp-projects-toggle:checked ~ .dxp-projects-morebtn .dxp-smore-open { display: none; }
.dxp-projects-toggle:checked ~ .dxp-projects-morebtn .dxp-smore-close { display: inline; }

.dxp-project {
	margin       : 0;
	overflow     : hidden;
	border-radius: 16px;
	background   : #ffffff;
	box-shadow   : var(--dxp-ring);
}
.dxp-project-media {
	aspect-ratio: 4 / 3;
	overflow    : hidden;
}
.dxp-project-media img {
	display   : block;
	width     : 100%;
	height    : 100%;
	object-fit: cover;
}
.dxp-project figcaption { padding: 20px; }
.dxp-project figcaption h3 {
	margin     : 0 0 4px;
	font-size  : 1rem;
	font-weight: 600;
	color      : var(--brand-charcoal);
}
.dxp-project figcaption p {
	margin   : 0;
	font-size: .875rem;
	color    : var(--dxp-text-muted);
}

/* ── Yorumlar (referans tasarım) ─────────────────────────────────────── */
.dxp-reviews {
	background: var(--dxp-bg, #ffffff);
	padding   : var(--dxp-space-section) 0;
}
.dxp-reviews-grid {
	margin-top           : 40px;
	display              : grid;
	grid-template-columns: 1fr;
	gap                  : 20px;
}
@media (min-width: 640px) {
	.dxp-reviews-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.dxp-reviews-grid { grid-template-columns: repeat(3, 1fr); }
}
.dxp-review {
	margin       : 0;
	background   : #ffffff;
	border-radius: 16px;
	padding      : 24px;
	box-shadow   : var(--dxp-ring);
}
.dxp-stars {
	display: flex;
	gap    : 2px;
	color  : #eab308;
}
.dxp-stars .dxp-ic {
	width : 16px;
	height: 16px;
	fill  : currentColor;
}
.dxp-review blockquote {
	margin     : 12px 0 0;
	font-size  : .875rem;
	line-height: 1.625;
	color      : color-mix(in srgb, var(--brand-charcoal) 80%, transparent);
}
.dxp-review figcaption {
	margin        : 16px 0 0;
	font-size     : .75rem;
	font-weight   : 500;
	text-transform: uppercase;
	letter-spacing: .1em;
	color         : var(--dxp-text-muted);
}
.dxp-reviews-note {
	margin   : 24px 0 0;
	font-size: .8125rem;
	color    : var(--dxp-text-muted);
}

/* ── Bölgeler (referans tasarım) ─────────────────────────────────────── */
.dxp-areas {
	background: var(--brand-paper);
	padding   : var(--dxp-space-section) 0;
}
.dxp-tag--lg {
	padding   : 8px 16px;
	font-size : .875rem;
	background: var(--brand-paper);
	color     : color-mix(in srgb, var(--brand-charcoal) 80%, transparent);
}

/* ── SSS (referans tasarım) ──────────────────────────────────────────── */
.dxp-faq {
	background: var(--dxp-bg, #ffffff);
	padding   : var(--dxp-space-section) 0;
}
.dxp-faq-inner {
	display              : grid;
	grid-template-columns: 1fr;
	gap                  : 32px;
	align-items          : start;
}
@media (min-width: 1024px) {
	.dxp-faq-inner { grid-template-columns: 1fr 1.4fr; gap: 48px; }
}
.dxp-accordion { width: 100%; }
.dxp-acc {
	border-bottom: 1px solid var(--dxp-border);
}
.dxp-acc-btn {
	display        : flex;
	align-items    : center;
	justify-content: space-between;
	gap            : 12px;
	padding        : 16px 0;
	cursor         : pointer;
	list-style     : none;
	font-size      : 1rem;
	font-weight    : 600;
	color          : var(--brand-charcoal);
	transition     : color var(--dxp-dur-fast);
}
.dxp-acc-btn::-webkit-details-marker { display: none; }
.dxp-acc-btn:hover { text-decoration: underline; }
.dxp-acc-chev {
	width      : 16px;
	height     : 16px;
	flex-shrink: 0;
	color      : var(--dxp-muted-fg);
	transition : transform var(--dxp-dur);
}
.dxp-acc[open] .dxp-acc-chev { transform: rotate(180deg); }
.dxp-acc-panel {
	overflow : hidden;
	font-size: .875rem;
	color    : color-mix(in srgb, var(--brand-charcoal) 70%, transparent);
}
.dxp-acc-panel p {
	margin     : 0 0 16px;
	line-height: 1.625;
}

/* ── Detay sayfası (yazı / içerik tipi) ─────────────────── */
.dxp-detail-inner {
	width    : 100%;
	max-width: 1280px;
	margin   : 0 auto;
	padding  : 0 20px;
}

/* Manşet: referans tasarım'da breadcrumb + manşet bg-brand-paper bandında; içerik beyaz. */
.dxp-detail-hero { background: var(--dxp-bg-soft, var(--brand-paper)); padding: 32px 0 64px; }

/*
 * İçerik ızgarası (referans tasarım): solda içerik (1.4fr), sağda yapışkan form (1fr).
 * Teklif formu kapalıysa .dxp-detail-grid hiç çizilmez, tek sütun olur.
 */
.dxp-detail-grid {
	width                : 100%;
	max-width            : 1280px;
	margin               : 50px auto 0;
	padding              : 0 20px 48px;
	display              : grid;
	grid-template-columns: 1fr;
	gap                  : 48px;
	background           : #ffffff;
}
@media (min-width: 1024px) {
	.dxp-detail-grid {
		grid-template-columns: 1.4fr 1fr;
		align-items          : start;
	}
	.dxp-detail-aside {
		position  : sticky;
		top       : 96px;
		align-self: start;
	}
	.admin-bar .dxp-detail-aside { top: 128px; }
}
.dxp-detail-main { min-width: 0; }
.dxp-detail-aside { min-width: 0; }

/* Neler dahil (sol kolon) — referans tasarım: beyaz arka plan */
.dxp-includes { padding: 24px 0 16px; background: var(--dxp-bg, #ffffff); }
.dxp-includes-title {
	margin     : 0 0 28px;
	font-size  : 1.5rem;
	font-weight: 700;
	color      : var(--brand-charcoal);
}
.dxp-includes-grid {
	list-style           : none;
	margin               : 0;
	padding              : 0;
	display              : grid;
	grid-template-columns: 1fr;
	gap                  : 14px;
}
@media (min-width: 640px) {
	.dxp-includes-grid { grid-template-columns: repeat(2, 1fr); }
}
.dxp-include {
	display      : flex;
	align-items  : flex-start;
	gap          : 12px;
	padding      : 18px 20px;
	border-radius: 12px;
	background   : var(--brand-paper);
	box-shadow   : var(--dxp-ring);
	font-size    : .875rem;
	color        : color-mix(in srgb, var(--brand-charcoal) 80%, transparent);
}
.dxp-include .dxp-ic {
	width      : 20px;
	height     : 20px;
	color      : var(--brand-green);
	flex-shrink: 0;
}

/* Bölge sayfası "Neler dahil" (referans tasarım): solda başlık + giriş metni, sağda kağıt kartlar. */
.dxp-includes--area { display: grid; gap: 32px; }
@media (min-width: 1024px) {
	.dxp-includes--area {
		grid-template-columns: 1fr 1.1fr;
		gap                  : 48px;
		align-items          : start;
	}
}
.dxp-includes-copy .dxp-includes-title { margin-bottom: 12px; }
.dxp-includes-intro {
	font-size  : .875rem;
	line-height: 1.6;
	color      : var(--dxp-text-muted);
}
.dxp-includes-intro > * + * { margin-top: 12px; }
.dxp-includes-cards {
	list-style: none;
	margin    : 0;
	padding   : 0;
	display   : grid;
	gap       : 16px;
}
.dxp-include-card {
	padding      : 20px;
	border-radius: 16px;
	background   : var(--brand-paper);
	box-shadow   : var(--dxp-ring);
	font-size    : .875rem;
	line-height  : 1.6;
	color        : color-mix(in srgb, var(--brand-charcoal) 75%, transparent);
}

/* Manşet */
.dxp-detail-hero-grid {
	display              : grid;
	grid-template-columns: 1fr;
	gap                  : 32px;
	align-items          : start;
}
@media (min-width: 1024px) {
	.dxp-detail-hero-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
}
/* Görsel yoksa metin tek sütunda kalsın (sağ yarım boş kalmasın) */
.dxp-detail-hero-grid--solo { grid-template-columns: 1fr; }
@media (min-width: 1024px) {
	.dxp-detail-hero-grid--solo { grid-template-columns: 1fr; }
}
.dxp-detail-hero-grid--solo .dxp-detail-title { max-width: 48rem; }
.dxp-detail-hero-grid--solo .dxp-detail-sub { max-width: 42rem; }

/* Bölge şablonu: kağıt zemin, tek sütun manşet */
.dxp-detail-hero--area {
	background: var(--brand-paper);
}
.dxp-detail-location {
	display    : flex;
	align-items: flex-start;
	gap        : 8px;
	margin     : 0;
	max-width  : 42rem;
	font-size  : .875rem;
	line-height: 1.55;
	color      : var(--dxp-text-muted);
}
.dxp-detail-location .dxp-ic {
	width      : 16px;
	height     : 16px;
	margin-top : 2px;
	color      : var(--brand-green);
	flex-shrink: 0;
}
.dxp-detail-title {
	margin        : 0;
	font-size     : var(--dxp-fs-3xl);
	font-weight   : 700;
	line-height   : 1.1;
	letter-spacing: -.025em;
	color         : var(--brand-charcoal);
	text-wrap     : balance;
}
@media (min-width: 640px) {
	.dxp-detail-title { font-size: var(--dxp-fs-4xl); }
}
.dxp-detail-sub {
	margin     : 0;
	max-width  : 52ch;
	font-size  : 1rem;
	line-height: 1.6;
	color      : color-mix(in srgb, var(--brand-charcoal) 70%, transparent);
}

/* İçerik */
.dxp-detail-body { padding: var(--dxp-space-block) 0 0; }
.dxp-detail-content > * + * { margin-top: 2rem; }
.dxp-detail-content h2 {
	margin     : 0;
	font-size  : 1.5rem;
	font-weight: 700;
	color      : var(--brand-charcoal);
}
.dxp-detail-content h3 {
	margin     : 0;
	font-size  : 1.25rem;
	font-weight: 600;
	color      : var(--brand-charcoal);
}
.dxp-detail-content p {
	margin     : .75rem 0 0;
	line-height: 1.7;
	color      : color-mix(in srgb, var(--brand-charcoal) 70%, transparent);
}
.dxp-detail-content ul,
.dxp-detail-content ol {
	margin     : .75rem 0 0 1.25rem;
	line-height: 1.7;
	color      : color-mix(in srgb, var(--brand-charcoal) 70%, transparent);
}
.dxp-detail-content a { color: var(--brand-green); }
.dxp-detail-content img {
	max-width    : 100%;
	height       : auto;
	border-radius: 16px;
}

/* Detay SSS + ilgili içerikler + kompakt form (referans tasarım) */
.dxp-faq--detail {
	padding   : var(--dxp-space-block) 0 0;
	background: transparent;
}
.dxp-faq-head {
	margin     : 0 0 16px;
	font-size  : 1.5rem;
	font-weight: 700;
	color      : var(--brand-charcoal);
}

.dxp-related { padding: var(--dxp-space-block) 0 0; }
.dxp-related-title {
	margin        : 0 0 12px;
	font-size     : .875rem;
	font-weight   : 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	color         : var(--dxp-text-muted);
}
.dxp-related .dxp-tagrow { margin-top: 0; }
.dxp-related .dxp-tag { background: #ffffff; }

/* Bölüm başlıkları */
.dxp-section { padding: var(--dxp-space-section) 0; }

/* Sidebar widget: yarıçap/kutu görünümü yukarıdaki .widget temel
   kuralından gelir (tek kaynak). Burada yalnızca başlık rengi ezilir. */
.dxp-sidebar .widget-title {
	color: var(--dxp-primary);
}

/* ── Footer (referans tasarım) ───────────────────────────────────────── */
.dxp-footer {
	font-size    : 14px;
	overflow-wrap: break-word;
}
.dxp-footer a {
	color          : var(--dxp-footer-text);
	text-decoration: none;
	transition     : color var(--dxp-dur-fast);
}
.dxp-footer a:hover { color: var(--dxp-footer-text); text-decoration: underline; }

.dxp-footer-inner {
	width    : 100%;
	max-width: 1280px;
	margin   : 0 auto;
	padding  : 56px 20px;
}

.dxp-footer-grid {
	display              : grid;
	grid-template-columns: 1fr;
	gap                  : 40px;
}
@media (min-width: 768px) {
	.dxp-footer-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Mobilde 2. ve 3. sütun yan yana (panel: "Mobilde Yan Yana"). Kapalıyken
   tüm sütunlar alt alta dizilir (varsayılan). */
@media (max-width: 767.98px) {
	.dxp-footer-grid--cols-side { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
	.dxp-footer-grid--cols-side .dxp-footer-brand { grid-column: 1 / -1; }
}

/* Marka sütunu */
.dxp-footer-brand {
	display       : flex;
	flex-direction: column;
	gap           : 12px;
}
@media (min-width: 768px) {
	.dxp-footer-brand { grid-column: span 2; }
}
.dxp-footer-logobox {
	display   : inline-block;
	align-self: flex-start;
}
/*
 * Footer logosunun arkasına beyaz plaka EKLENMEZ ve renk çevrilmez; koyu
 * footer zemininde paneldeki "Koyu Zemin Logosu" gösterilir.
 */
.dxp-footer-logobox img {
	display   : block;
	height    : 96px;
	width     : auto;
	object-fit: contain;
}
.dxp-footer-about {
	margin     : 0;
	max-width  : 28rem;
	font-size  : .875rem;
	line-height: 1.625;
}
.dxp-footer-note {
	margin   : 0;
	font-size: .75rem;
	color    : color-mix(in srgb, var(--dxp-footer-text), transparent 35%);
}

/* İletişim listesi */
.dxp-footer-contact {
	list-style    : none;
	margin        : 0;
	padding       : 12px 0 0;
	display       : flex;
	flex-direction: column;
	gap           : 8px;
	font-size     : .875rem;
}
.dxp-footer-contact li {
	display    : flex;
	align-items: center;
	gap        : 8px;
}
.dxp-footer-contact .dxp-ic {
	width      : 16px;
	height     : 16px;
	color      : var(--brand-green);
	flex-shrink: 0;
}
.dxp-footer-strong { color: var(--dxp-footer-text); font-weight: 600; }
.dxp-footer-strong:hover { text-decoration: underline; }

/* Link sütunları */
.dxp-footer-col h2 {
	margin        : 0 0 16px;
	font-size     : .75rem;
	font-weight   : 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	color         : var(--dxp-footer-text);
}
.dxp-footer-col ul {
	list-style    : none;
	margin        : 0;
	padding       : 0;
	display       : flex;
	flex-direction: column;
	gap           : 8px;
	font-size     : .875rem;
}

/* Alt çubuk */
.dxp-footer-bottom {
	margin-top    : 48px;
	border-top    : 1px solid color-mix(in srgb, var(--dxp-footer-text), transparent 85%);
	padding-top   : 24px;
	font-size     : 11px;
	text-transform: uppercase;
	letter-spacing: .1em;
	color         : color-mix(in srgb, var(--dxp-footer-text), transparent 35%);
}
.dxp-footer-bottom-inner {
	display    : flex;
	flex-wrap  : wrap;
	align-items: center;
	gap        : 8px 20px;
}
@keyframes dxpRefsScroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ── Yan yana bölümler (anasayfada 2 sütun) ─────────────── */
.dxp-rows-side {
	display: flex;
	align-items: stretch;
}
.dxp-rows-side > * {
	flex: 1 1 calc(100% / var(--dxp-cols, 2));
	min-width: 0;
}
@media (max-width: 991px) {
	.dxp-rows-side {
		flex-direction: column;
	}
	.dxp-rows-side > * {
		flex: 0 0 auto;
		width: 100%;
	}
}

/* Yazı içeriği (single/page) */
.entry-content {
	line-height: 1.7;
	color: var(--dxp-text-muted);
}
.entry-content h2,
.entry-content h3 {
	color: var(--dxp-text);
	margin-top: 25px;
	margin-bottom: 15px;
}
.entry-content a {
	color: var(--dxp-primary);
	font-weight: 500;
	text-decoration: underline;
}
.entry-content a:hover { color: var(--dxp-primary-dark); }
.entry-content ul,
.entry-content ol {
	padding-left: 20px;
	margin-bottom: 1rem;
}
.entry-content ul li,
.entry-content ol li {
	margin-bottom: 10px;
	color: var(--dxp-text-muted);
}

/* ══════════════════════════════════════════════════════════
   Breadcrumb (referans tasarım)
══════════════════════════════════════════════════════════ */
.dxp-crumbs-wrap { margin: 0 0 20px; }
/*
 * Kırıntı şeridi (referans tasarım): manşet/banner ile AYNI açık yeşil zemini paylaşır
 * (--brand-paper). Arşiv/arama/yazı ve içerik tipi detayları hep bu
 * sarmalayıcıyı kullanır, böylece görünüm her yerde aynıdır.
 */
.dxp-crumbs-outer {
	background: var(--brand-paper);
	padding   : 24px 0 32px;
}
.dxp-crumbs-outer .dxp-crumbs-wrap { margin-bottom: 0; }

.dxp-crumbs {
	list-style : none;
	margin     : 0;
	padding    : 0;
	display    : flex;
	flex-wrap  : wrap;
	align-items: center;
	gap        : 10px;
	font-size  : .875rem;
	color      : var(--dxp-muted-fg);
}

.dxp-crumbs a {
	color          : var(--dxp-muted-fg);
	text-decoration: none;
	transition     : color var(--dxp-dur-fast);
}
.dxp-crumbs a:hover { color: var(--brand-charcoal); }

.dxp-crumbs .dxp-ic { width: 14px; height: 14px; }

.dxp-crumbs span[aria-current] { color: var(--brand-charcoal); }

/* ══════════════════════════════════════════════════════════
   Bölge şablonu bantları (referans tasarım)
══════════════════════════════════════════════════════════ */
.dxp-band { padding: var(--dxp-space-section) 0; }
.dxp-band--white    { background: #ffffff; }
.dxp-band--paper    { background: var(--brand-paper); }
.dxp-band--charcoal { background: var(--brand-charcoal); color: #ffffff; }

/*
 * Sayfa başlığı bandı (hakkımızda / iletişim / düz sayfa / arşiv): bu bir
 * bölüm değil, sayfanın başlık şerididir; 64px yerine daha dar üst boşluk
 * alır. Kırıntı şeridi olan arşivlerde kırıntının 32px alt boşluğu yettiği
 * için bant üstü 8px'e iner (bkz. archive.css .dxp-archive--after-crumbs).
 */
.dxp-page-band { padding-top: 40px; }

.dxp-band-inner {
	width    : 100%;
	max-width: 1280px;
	margin   : 0 auto;
	padding  : 0 20px;
}

.dxp-band-title {
	margin     : 0 0 24px;
	font-size  : 1.5rem;
	font-weight: 700;
	color      : var(--brand-charcoal);
}

/* Bant içinde bölümlerin kendi dikey boşluklarını sıfırla */
.dxp-band .dxp-detail-body,
.dxp-band .dxp-includes,
.dxp-band .dxp-related,
.dxp-band .dxp-faq { padding: 0; }

/* SSS bandı: solda başlık, sağda akordeon */
@media (min-width: 1024px) {
	.dxp-band--faq .dxp-band-inner {
		display              : grid;
		grid-template-columns: 1fr 1.4fr;
		gap                  : 48px;
		align-items          : start;
	}
	.dxp-band--faq .dxp-band-title { margin-bottom: 0; }
}

/* Projeler bandı */
.dxp-proj-grid {
	display              : grid;
	grid-template-columns: 1fr;
	gap                  : 20px;
}
@media (min-width: 640px) {
	.dxp-proj-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.dxp-proj-grid { grid-template-columns: repeat(3, 1fr); }
}
.dxp-proj {
	background   : #ffffff;
	border-radius: 16px;
	padding      : 20px;
	box-shadow   : var(--dxp-ring);
}
.dxp-proj-title {
	margin     : 0;
	font-size  : 1rem;
	font-weight: 600;
	color      : var(--brand-charcoal);
}
.dxp-proj-dl { margin: 12px 0 0; }
.dxp-proj-row + .dxp-proj-row { margin-top: 8px; }
.dxp-proj-row dt {
	font-size     : 11px;
	font-weight   : 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	color         : var(--dxp-text-muted);
}
.dxp-proj-row dd {
	margin   : 2px 0 0;
	font-size: .875rem;
	color    : color-mix(in srgb, var(--brand-charcoal) 70%, transparent);
}

/* Hizmetler bandı */
.dxp-svc-grid {
	display              : grid;
	grid-template-columns: 1fr;
	gap                  : 16px;
}
@media (min-width: 640px) {
	.dxp-svc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.dxp-svc-grid { grid-template-columns: repeat(3, 1fr); }
}
.dxp-svc {
	display        : block;
	background     : var(--brand-paper);
	border-radius  : 16px;
	padding        : 20px;
	box-shadow     : var(--dxp-ring);
	text-decoration: none;
	color          : inherit;
	transition     : box-shadow var(--dxp-dur-fast);
}
a.dxp-svc:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, .08), var(--dxp-ring); }
.dxp-svc h3 {
	margin     : 0;
	font-size  : 1rem;
	font-weight: 600;
	color      : var(--brand-charcoal);
}
.dxp-svc p {
	margin   : 4px 0 0;
	font-size: .875rem;
	color    : var(--dxp-text-muted);
}
.dxp-svc-link {
	display    : inline-flex;
	align-items: center;
	gap        : 4px;
	margin-top : 12px;
	font-size  : .875rem;
	font-weight: 500;
	color      : var(--brand-green);
}
.dxp-svc-link .dxp-ic { width: 14px; height: 14px; }

/* ══════════════════════════════════════════════════════════
   Normal sayfa şablonları (referans tasarım)
══════════════════════════════════════════════════════════ */
.dxp-page-inner { max-width: 768px; }

.dxp-page-inner .dxp-eyebrow { margin-bottom: 12px; }

.dxp-page-title {
	margin        : 0 0 20px;
	font-size     : var(--dxp-fs-2xl);
	font-weight   : 700;
	line-height   : 1.15;
	letter-spacing: -.025em;
	color         : var(--brand-charcoal);
	text-wrap     : balance;
}
@media (min-width: 640px) {
	.dxp-page-title { font-size: var(--dxp-fs-3xl); }
}
.dxp-page-title--xl { font-size: var(--dxp-fs-3xl); }
@media (min-width: 640px) {
	.dxp-page-title--xl { font-size: var(--dxp-fs-4xl); }
}

.dxp-page-lead {
	margin   : 0 0 20px;
	max-width: 44rem;
	font-size: 1rem;
	line-height: 1.7;
	color    : color-mix(in srgb, var(--brand-charcoal) 75%, transparent);
}

.dxp-page-content {
	font-size  : .875rem;
	line-height: 1.7;
	color      : color-mix(in srgb, var(--brand-charcoal) 75%, transparent);
}
.dxp-page-content > * + * { margin-top: 16px; }
.dxp-page-content h2 {
	margin     : 28px 0 0;
	font-size  : 1.125rem;
	font-weight: 600;
	color      : var(--brand-charcoal);
}
.dxp-page-content h3 {
	margin     : 24px 0 0;
	font-size  : 1rem;
	font-weight: 600;
	color      : var(--brand-charcoal);
}
.dxp-page-content a { color: var(--brand-green); }
.dxp-page-content ul,
.dxp-page-content ol { padding-left: 20px; }
.dxp-page-content li + li { margin-top: 6px; }
.dxp-page-content strong { color: var(--brand-charcoal); }

/* ══════════════════════════════════════════════════════════
   404 sayfası (referans tasarım)
══════════════════════════════════════════════════════════ */
.dxp-404 {
	display        : flex;
	align-items    : center;
	justify-content: center;
	min-height     : 70vh;
	padding        : 64px 20px;
	background     : #ffffff;
}
.dxp-404-box { max-width: 28rem; text-align: center; }
.dxp-404-code {
	font-size     : 4.5rem;
	font-weight   : 700;
	line-height   : 1;
	letter-spacing: -.03em;
	color         : var(--brand-charcoal);
}
.dxp-404-title {
	margin     : 16px 0 0;
	font-size  : 1.25rem;
	font-weight: 600;
	color      : var(--brand-charcoal);
}
.dxp-404-text {
	margin     : 8px 0 0;
	font-size  : .875rem;
	line-height: 1.6;
	color      : var(--dxp-text-muted);
}
.dxp-404 .dxp-btn { margin-top: 24px; }

/* ══════════════════════════════════════════════════════════
   Header menüsü: dropdown ok, animasyon ve etiket (link'siz) öğe
══════════════════════════════════════════════════════════ */

/* Link'siz menü etiketi ('#' URL'li öğe) — <a> gibi görünür */
.dxp-nav .dxp-nav-list > li > .dxp-nav-label {
	display    : inline-flex;
	align-items: center;
	gap        : 4px;
	padding    : 6px 12px;
	border-radius: 9999px;
	font-size  : .875rem;
	font-weight: 500;
	color      : color-mix(in srgb, var(--brand-charcoal) 80%, transparent);
	cursor     : default;
}

/* Alt menüsü olanlara ok (chevron-down) */
.dxp-nav .dxp-nav-list > li.menu-item-has-children > a::after,
.dxp-nav .dxp-nav-list > li.menu-item-has-children > .dxp-nav-label::after {
	content         : '';
	width           : 14px;
	height          : 14px;
	flex-shrink     : 0;
	background-color: currentColor;
	-webkit-mask    : url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask            : url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition      : transform var(--dxp-dur) ease;
}
.dxp-nav .dxp-nav-list > li.menu-item-has-children:hover > a::after,
.dxp-nav .dxp-nav-list > li.menu-item-has-children:focus-within > a::after,
.dxp-nav .dxp-nav-list > li.menu-item-has-children:hover > .dxp-nav-label::after,
.dxp-nav .dxp-nav-list > li.menu-item-has-children:focus-within > .dxp-nav-label::after {
	transform: rotate(180deg);
}

/* Dropdown açılış/kapanış animasyonu (display yerine opacity + transform) */
.dxp-nav .dxp-nav-list .sub-menu {
	display        : flex;
	opacity        : 0;
	visibility     : hidden;
	transform      : translateY(8px) scale(.98);
	transform-origin: top left;
	transition     : opacity var(--dxp-dur-fast) ease, transform var(--dxp-dur-fast) ease, visibility var(--dxp-dur-fast) ease;
	pointer-events : none;
}
.dxp-nav .dxp-nav-list li:hover > .sub-menu,
.dxp-nav .dxp-nav-list li:focus-within > .sub-menu {
	opacity        : 1;
	visibility     : visible;
	transform      : translateY(0) scale(1);
	pointer-events : auto;
}
/* Fare alt menüye geçerken kapanmasın: aradaki boşluğu köprüle */
.dxp-nav .dxp-nav-list > li.menu-item-has-children::after {
	content : '';
	position: absolute;
	left    : 0;
	right   : 0;
	top     : 100%;
	height  : 12px;
}

/* ── Yüzen iletişim butonları ─────────────────────────── */
.dxp-float {
	position        : fixed;
	z-index         : 9998;
	display         : flex;
	align-items     : center;
	justify-content : center;
	width           : 52px;
	height          : 52px;
	padding         : 0;
	border          : 0;
	border-radius   : 999px;
	color           : #fff;
	background      : var(--dxp-primary, #006731);
	box-shadow      : 0 6px 18px rgba(0, 0, 0, .18);
	cursor          : pointer;
	transition      : transform var(--dxp-dur-fast) ease, box-shadow var(--dxp-dur-fast) ease, opacity var(--dxp-dur-fast) ease, visibility var(--dxp-dur-fast) ease;
}
.dxp-float:hover,
.dxp-float:focus-visible { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .24); }
.dxp-float svg { width: 24px; height: 24px; }
.dxp-float--wa  { left: 20px; bottom: 20px; background: var(--brand-whatsapp, #3fc168); }
/* Şablon 2: WhatsApp yalnızca masaüstünde; mobilde alt barda. */
.dxp-float--wa.dxp-desktop-only { display: none; }
/* Telefon butonu yalnızca mobilde; mobil düzeni aşağıdaki media sorgusunda. */
.dxp-float--tel { right: 20px; bottom: 20px; display: none; }
.dxp-float--top {
	right      : 20px;
	bottom     : 20px;
	background : #033216;
	opacity    : 0;
	visibility : hidden;
	transform  : translateY(8px);
}
.dxp-float--top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.dxp-float--top svg { transform: rotate(180deg); }

@media (max-width: 767.98px) {
	.dxp-float { width: 48px; height: 48px; }
	.dxp-float svg { width: 22px; height: 22px; }
	.dxp-float--wa  { left: auto; right: 16px; bottom: 16px; }
	.dxp-float--tel { right: 16px; bottom: 72px; display: flex; }
	.dxp-float--top { right: 16px; bottom: 128px; }
}

/* ── Duyuru popup ─────────────────────────────────────── */
.dxp-popup { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; padding: 20px; }
.dxp-popup.is-open { display: flex; }
.dxp-popup-backdrop { position: absolute; inset: 0; background: rgba(3, 50, 22, .55); }
.dxp-popup-box {
	position      : relative;
	width         : 100%;
	max-width     : 460px;
	max-height    : calc(100vh - 40px);
	overflow      : auto;
	background    : #fff;
	border-radius : 16px;
	box-shadow    : 0 24px 60px rgba(0, 0, 0, .3);
	animation     : dxp-popup-in var(--dxp-dur) ease-out;
}
@keyframes dxp-popup-in {
	from { opacity: 0; transform: translateY(12px) scale(.98); }
	to   { opacity: 1; transform: none; }
}
.dxp-popup-img img { display: block; width: 100%; height: auto; }
.dxp-popup-body { padding: 22px 24px 26px; }
.dxp-popup-title { margin: 0 0 10px; font-size: 22px; line-height: 1.25; color: #033216; }
.dxp-popup-text { font-size: 15px; line-height: 1.6; color: var(--dxp-muted-fg, #57685b); }
.dxp-popup-text p:last-child { margin-bottom: 0; }
.dxp-popup-btn {
	display         : inline-block;
	margin-top      : 16px;
	padding         : 11px 22px;
	border-radius   : var(--dxp-radius-pill);
	color           : #fff;
	font-weight     : 600;
	text-decoration : none;
}
.dxp-popup-btn:hover { background: var(--dxp-primary-hover, #006731); color: #fff; }
.dxp-popup-x {
	position        : absolute;
	top             : 10px;
	right           : 10px;
	display         : flex;
	align-items     : center;
	justify-content : center;
	width           : 34px;
	height          : 34px;
	padding         : 0;
	border          : 0;
	border-radius   : 999px;
	background      : rgba(255, 255, 255, .92);
	color           : #033216;
	font-size       : 22px;
	line-height     : 1;
	cursor          : pointer;
	box-shadow      : 0 2px 8px rgba(0, 0, 0, .16);
}
.dxp-popup-x:hover { background: #fff; }
.dxp-popup-open { cursor: pointer; }

/* ── Mobil alt bar (Şablon 2: Ara | WhatsApp | Teklif Al) ─── */.dxp-mbar {
	position        : fixed;
	left            : 0;
	right           : 0;
	bottom          : 0;
	z-index         : 9997;
	display         : none; /* yalnızca mobilde açılır (inline CSS, panel kırılma noktası) */
	align-items     : stretch;
	gap             : 6px;
	padding         : 6px 8px;
	background      : var(--brand-charcoal, #033216);
	box-shadow      : 0 -2px 12px rgba(0, 0, 0, .18);
}
.dxp-mbar-item {
	flex            : 1 1 0;
	display         : flex;
	flex-direction  : column;
	align-items     : center;
	justify-content : center;
	gap             : 4px;
	min-height      : 48px;
	padding         : 6px 4px;
	border-radius   : 10px;
	color           : #ffffff;
	font-size       : .6875rem;
	font-weight     : 700;
	line-height     : 1;
	text-decoration : none;
	transition      : background var(--dxp-dur-fast);
}
.dxp-mbar-item svg { width: 20px; height: 20px; }
/* Font Awesome glifleri SVG'lerle aynı boyutta olsun. */
.dxp-mbar-item i[class*="fa-"] { font-size: 20px; width: 20px; line-height: 1; text-align: center; }
.dxp-mbar-item:hover { color: #ffffff; background: rgba(255, 255, 255, .08); }
/* Ortadaki buton: açık yeşil (Şablon 1'deki WhatsApp yeşiliyle aynı). */
.dxp-mbar-main {
	background : var(--brand-whatsapp, #3fc168);
	box-shadow : 0 2px 10px rgba(0, 0, 0, .22);
}
.dxp-mbar-main:hover {
	background: var(--brand-whatsapp, #3fc168);
	filter     : brightness(.93);
}
.dxp-mbar-main svg { width: 22px; height: 22px; }
.dxp-mbar-main i[class*="fa-"] { font-size: 22px; width: 22px; }

/* Font Awesome glifleri (ön yüz): satır içi SVG'lerle aynı hizada dursun. */
i[class^="fa-"], i[class*=" fa-"] {
	display        : inline-block;
	line-height    : 1;
	text-align     : center;
	vertical-align : middle;
}

/* ══════════════════════════════════════════════════════════
   Sayfa düzeni (panelden): dar ↔ tam genişlik
   Genişlik ve yan boşluk functions.php'de panel ayarından üretilir
   (--dxp-wrap-max / --dxp-wrap-pad). Sarmalayıcıların sabit 1280px
   değerleri burada ezilir; ayar böylece tüm bölümlerde geçerli olur.
══════════════════════════════════════════════════════════ */
.dxp-header-inner,
.dxp-hero-inner,
.dxp-services-inner,
.dxp-faq-inner,
.dxp-quote-inner,
.dxp-detail-inner,
.dxp-footer-inner,
.dxp-footer-bottom-inner,
.dxp-band-inner,
.dxp-ticker-wrap > .container,
.dxp-ticker-wrap > .container-fluid,
main.container,
main.container-fluid {
	max-width     : var(--dxp-wrap-max, 1280px);
	padding-left  : var(--dxp-wrap-pad, 20px);
	padding-right : var(--dxp-wrap-pad, 20px);
	margin-left   : auto;
	margin-right  : auto;
}
/* Mobilde yan boşluk ekranı yemesin: en fazla 16px. */
@media (max-width: 640px) {
	.dxp-header-inner,
	.dxp-hero-inner,
	.dxp-services-inner,
	.dxp-faq-inner,
	.dxp-quote-inner,
	.dxp-detail-inner,
	.dxp-footer-inner,
	.dxp-footer-bottom-inner,
	.dxp-band-inner,
	.dxp-ticker-wrap > .container,
	.dxp-ticker-wrap > .container-fluid,
	main.container,
	main.container-fluid {
		padding-left  : min(var(--dxp-wrap-pad, 20px), 16px);
		padding-right : min(var(--dxp-wrap-pad, 20px), 16px);
	}
}




/* ══════════════════════════════════════════════════════════
   Bootstrap yardımcı sınıfları (CDN kaldırıldı; header.php kullanır)
══════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   Klavye odağı (erişilebilirlik) — tek biçim görünür halka
   Fare/touch ile odakta çizilmez; yalnızca klavyede (Tab) görünür.
   :where() → özgüllük 0; bileşenler kendi kuralıyla kolayca ezebilir.
════════════════════════════════════════════════════════════ */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline       : 2px solid var(--dxp-primary);
	outline-offset: 2px;
}

.d-flex{display:flex}.flex-wrap{flex-wrap:wrap}
.justify-content-between{justify-content:space-between}
.align-items-center{align-items:center}
.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:1rem}
.small{font-size:.875em}
.text-decoration-none{text-decoration:none}
.flex-grow-1{flex-grow:1}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.border-bottom{border-bottom:1px solid var(--dxp-border, #e4e4e7)}