@charset "UTF-8";
/* ==========================================================================
   Voltaj Pro — theme.css  (v2 "Pano")
   Elektrik taahhüt / arıza / pano firması teması. Açık ve koyu görünüm.
   --------------------------------------------------------------------------
   BU DOSYA SIFIRDAN YAZILDI. v1 (8700 satır) atıldı; gerekçesi DESIGN-V2.md.
   Müşteri geri bildirimi: "hiç güzel değil, çok profesyonel uzman bir tasarım
   olsun, full responsive, sektöre özel renk".

   --------------------------------------------------------------------------
   TASARIM KARARLARI — neden böyle

   1) Renk: tema renk ÜRETMEZ, TÜKETİR.
      Bütün renkler BG Panel Tasarım modülünün <head> içine bastığı --vp-*
      değişkenlerinden gelir. Bu dosyanın başındaki blok yalnızca YEDEK'tir.
      Yedekler bilerek :where(:root) ile yazıldı: :where() özgüllüğü sıfırlar,
      böylece panelin :root bloğu (bu dosyadan ÖNCE basılır — inc/enqueue.php
      açıklamasına bakın) kaynak sırasına rağmen HER ZAMAN kazanır. v1'de bu
      ters kurulmuştu ve panelden seçilen palet sessizce eziliyordu.

   2) Palet "Pano": pano gövdesi (derin petrol-antrasit) + sinyal sarısı
      (elektrik uyarı etiketi sarısı) + bakır (iletken). Rakiplerin jenerik
      lacivert-mavisinden bilinçli ayrışma.

   3) SARI DİSİPLİNİ — bu temanın en önemli kuralı.
      Sarı toplam alanın %3-5'ini geçmez. Birincil düğme sarı DEĞİL, koyu
      petroldür. Sarı yalnız dört yerde: acil rozeti, tek vurgu çizgisi,
      garanti rozeti, hesap sonucu vurgusu. Sarıyı geniş zemine yaymak
      "ucuz şablon" hissi verir; müşterinin beğenmediği şey tam olarak buydu.

   4) Görsel odaklı kart dili — ÇİZİM YOK.
      Kartın ana elemanı fotoğraftır: object-fit:cover + aspect-ratio ile
      sabit oran, hover'da %3 yakınlaşma. Görsel yoksa SVG sahnesi değil,
      bilinçli tasarlanmış .vp-ph yer tutucusu gelir.

   5) Ritim: ardışık bölümler aynı görünmez. En az üç zemin tonu (bg, bg-2,
      bg-3), bir koyu şerit ve bir tam-genişlik kesme (.vp-sec--bleed).
      Zebra tek başına yeterli değil — v1'in hatası buydu.

   6) Yükseklik dili: açık modda gölge, koyu modda çizgi. Koyu zeminde gölge
      okunmaz; ayrımı kenarlık ve yüzey tonu taşır.

   7) Erişilebilirlik pazarlık dışı (WCAG 2.2 AA):
      :focus-visible her yerde 3px belirgin çerçeve + 2px offset (2.4.11),
      dokunma hedefleri en az 44x44px (2.5.8 için 24px zorunlu, biz 44 veriyoruz),
      prefers-reduced-motion tüm hareketi kapatır.

   8) Koyu mod tek kaynaklıdır: [data-vp-theme="dark"].
      Bu dosya @media (prefers-color-scheme) içinde RENK TANIMLAMAZ
      (THEME-CONTRACT §9). Cihaz tercihini panelin "auto" kipi çözer.

   --------------------------------------------------------------------------
   İÇİNDEKİLER
     01  Yedek değişkenler (panel yokken) — Pano paleti, açık + koyu
     02  Tema içi jetonlar (--vpt-*)
     03  Tasarım modülü bayrakları (body sınıfları)
     04  Sıfırlama ve taban
     05  Tipografi
     06  Erişilebilirlik yardımcıları ve durum kapıları
     07  Yerleşim: wrap / sec / head / grid
     08  Düğmeler
     09  Küçük bileşenler: badge, chip, tag, icontile, stat, quote, stars…
     10  Yer tutucu: .vp-ph
     11  Üst şerit, başlık, menü, çekmece, arama, tema düğmesi
     12  Kahraman
     13  Güven şeridi
     14  Kartlar
     15  Hizmetler
     16  Neden biz (asimetrik)
     17  Adımlar / zaman çizelgesi
     18  Fiyat tablosu
     19  Hesaplama araçları
     20  Projeler (bento)
     21  Bölgeler
     22  Yorumlar
     23  SSS
     24  Harekete geçirme şeridi
     25  Blog
     26  İletişim
     27  Form ailesi (.vp-form*)
     28  Alt bilgi
     29  Yapışkan çağrı, yukarı çık, okuma çubuğu, arama
     30  İç sayfalar: pagehead, kırıntı, prose, tekil, yan sütun
     31  JS bileşenleri: toast, lightbox, ekran okuyucu duyuruları
     32  Hareket, reveal ve durum sınıfları
     33  Duyarlılık (1440 / 1200 / 1024 / 900 / 768 / 640 / 380)
     34  Koyu mod ince ayarları
     35  Yazdırma kancası, zorlanmış renkler, düşük hareket
   ========================================================================== */


/* ==========================================================================
   01 — YEDEK DEĞİŞKENLER
   Panel devre dışıyken site çıplak kalmasın diye. Değerler DESIGN-V2.md §2
   ile birebir aynıdır. :where() kullanımının gerekçesi dosya başındadır.
   ========================================================================== */

:where(:root) {
	/* --- Ana renk: pano gövdesi, derin petrol-antrasit ------------------ */
	--vp-primary: #143039;
	--vp-primary-d: #0C1F26;
	--vp-primary-l: #1F4C5A;
	--vp-primary-rgb: 20, 48, 57;
	--vp-on-primary: #FFFFFF;

	/* --- Vurgu: sinyal sarısı (elektrik uyarı etiketi) ------------------ */
	--vp-accent: #F6B300;
	--vp-accent-rgb: 246, 179, 0;
	--vp-on-accent: #14100A;   /* sarı üstünde siyah metin: gerçek levha mantığı */
	--vp-accent-d: #D99C00;

	/* --- İkincil vurgu: iletken bakırı --------------------------------- */
	--vp-copper: #B4653A;
	--vp-copper-rgb: 180, 101, 58;

	/* --- Metin ---------------------------------------------------------- */
	--vp-ink: #0F1A1F;
	--vp-ink-2: #3B4B52;
	--vp-muted: #6B7A81;
	--vp-ink-rgb: 15, 26, 31;

	/* --- Zemin ve yüzey: sıcak kırık beyaz, fotoğrafı öne çıkarır ------- */
	--vp-bg: #FAF9F6;
	--vp-bg-2: #F2F0EB;
	--vp-bg-3: #E7E4DD;
	--vp-surface: #FFFFFF;
	--vp-surface-2: #FAF9F6;
	--vp-line: #DFDBD2;
	--vp-line-2: #C4BFB3;

	/* --- Durum ---------------------------------------------------------- */
	--vp-danger: #CE2B22;
	--vp-danger-rgb: 206, 43, 34;
	--vp-ok: #0C7A57;
	--vp-warn: #B26A00;

	/* --- Yükseklik ------------------------------------------------------ */
	--vp-sh-1: 0 1px 2px rgba(15, 26, 31, .06), 0 6px 18px rgba(15, 26, 31, .06);
	--vp-sh-2: 0 12px 32px rgba(15, 26, 31, .09);
	--vp-sh-3: 0 28px 64px rgba(15, 26, 31, .13);
	--vp-ring: 0 0 0 3px rgba(20, 48, 57, .28);

	/* --- Biçim ---------------------------------------------------------- */
	--vp-r: 14px;
	--vp-r-sm: 9px;
	--vp-r-lg: 22px;
	--vp-r-pill: 999px;
	--vp-r-btn: var(--vp-r);

	/* --- Ölçü ve ritim (DESIGN-V2 §4) ----------------------------------- */
	--vp-container: 1240px;
	--vp-space: clamp(64px, 8vw, 120px);
	--vp-gap: clamp(18px, 2.2vw, 30px);
	--vp-pad: clamp(20px, 2.6vw, 34px);

	/* --- Yazı tipleri (DESIGN-V2 §3) ------------------------------------ */
	--vp-font-head: "Bricolage Grotesque", "Archivo", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--vp-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--vp-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

	/* --- Panelin ek jetonları (yoksa nötr) ------------------------------ */
	--vp-fs: 1;
	--vp-w-head: 800;
	--vp-ls-head: -.02em;
}

/* Koyu mod yedeği. Tek kaynak data-vp-theme özniteliğidir; bu blok da
   :where() ile sıfır özgüllükte tutulur ki panel değerleri ezebilsin.
   Sırası açık moddan sonradır: öznitelik varken bu kazanır. */
:where(:root[data-vp-theme="dark"]) {
	--vp-primary: #3D8DA6;      /* petrol açıldı: koyu zeminde metin olarak okunur */
	--vp-primary-d: #2A6E85;
	--vp-primary-l: #7FBDD1;
	--vp-primary-rgb: 61, 141, 166;
	--vp-on-primary: #06131A;

	--vp-accent: #FFC42E;
	--vp-accent-rgb: 255, 196, 46;
	--vp-on-accent: #14100A;
	--vp-accent-d: #E0A916;

	--vp-copper: #D98A5E;
	--vp-copper-rgb: 217, 138, 94;

	--vp-ink: #E9EDEE;
	--vp-ink-2: #B4C0C4;
	--vp-muted: #869499;
	--vp-ink-rgb: 233, 237, 238;

	--vp-bg: #0B1116;
	--vp-bg-2: #101920;
	--vp-bg-3: #172229;
	--vp-surface: #101920;
	--vp-surface-2: #16222A;
	--vp-line: #22323B;
	--vp-line-2: #33474F;

	--vp-danger: #F2564C;
	--vp-danger-rgb: 242, 86, 76;
	--vp-ok: #2FB187;
	--vp-warn: #E0A916;

	--vp-sh-1: 0 1px 2px rgba(0, 0, 0, .45), 0 6px 18px rgba(0, 0, 0, .45);
	--vp-sh-2: 0 12px 32px rgba(0, 0, 0, .55);
	--vp-sh-3: 0 28px 64px rgba(0, 0, 0, .65);
	--vp-ring: 0 0 0 3px rgba(61, 141, 166, .45);
}


/* ==========================================================================
   02 — TEMA İÇİ JETONLAR (--vpt-*)
   Panel bunları basmaz; sözleşme dışı olduğu için ayrı ad alanı kullanıyoruz.
   Böylece "panel değişkeni mi, tema değişkeni mi" sorusu hiç doğmuyor.
   ========================================================================== */

:root {
	/* Tipografi ölçeği — akışkan, clamp (DESIGN-V2 §3) */
	--vpt-h1: clamp(2.4rem, 1.6rem + 3.4vw, 4.2rem);
	--vpt-h2: clamp(1.9rem, 1.4rem + 2.1vw, 3rem);
	--vpt-h3: clamp(1.15rem, 1rem + .6vw, 1.45rem);
	--vpt-h4: clamp(1.02rem, .96rem + .3vw, 1.15rem);
	--vpt-body: clamp(1.03rem, .99rem + .16vw, 1.095rem);   /* 16.5 → 17.5px */
	--vpt-lead: clamp(1.06rem, 1rem + .4vw, 1.19rem);
	--vpt-small: .8125rem;
	--vpt-kicker: .75rem;

	--vpt-lh: 1.62;
	--vpt-lh-tight: 1.35;
	--vpt-measure: 66ch;

	/* Ayrık boşluk basamakları — bileşen içi ölçüler bunlardan türer */
	--vpt-1: 4px;
	--vpt-2: 8px;
	--vpt-3: 12px;
	--vpt-4: 16px;
	--vpt-5: 22px;
	--vpt-6: 30px;
	--vpt-7: 40px;
	--vpt-8: 56px;

	/* Etkileşim */
	--vpt-tap: 44px;              /* asgari dokunma hedefi */
	--vpt-dur: .22s;
	--vpt-dur-slow: .45s;
	--vpt-ease: cubic-bezier(.22, .61, .36, 1);
	--vpt-ease-out: cubic-bezier(.16, 1, .3, 1);

	/* Katman sırası — tek yerden yönetilir, dosya boyunca sayı yazılmaz */
	--vpt-z-base: 1;
	--vpt-z-sticky: 30;
	--vpt-z-header: 60;
	--vpt-z-drawer: 80;
	--vpt-z-call: 70;
	--vpt-z-top: 90;
	--vpt-z-toast: 100;

	/* JS'in yazdığı değişkenlerin başlangıç değeri: betik gelmeden de doğru */
	--vp-header-h: 72px;
	--vp-sbw: 0px;
	--vp-progress: 0;
	--vp-bar: 0%;
	--vp-delay: 0s;

	/* Kart görsel oranları (DESIGN-V2 §5.3) */
	--vpt-ratio-service: 4 / 3;
	--vpt-ratio-project: 3 / 2;
	--vpt-ratio-lead: 16 / 9;
	--vpt-ratio-post: 16 / 10;
	--vpt-ratio-hero: 4 / 5;

	/* Teknik ızgara dokusu — sektör göndermesi, çok silik kullanılır */
	--vpt-grid-line: rgba(var(--vp-ink-rgb), .06);
	--vpt-grid-size: 26px;

	/*
	 * Fotoğraf üstü karartma (scrim).
	 *
	 * Bu İKİ DEĞER BİLEREK PALETE BAĞLI DEĞİL. Karartma katmanının işi,
	 * altındaki fotoğrafın üstünde beyaz metni okunur tutmak; koyu modda
	 * --vp-ink beyaza döndüğü için palete bağlansaydı katman beyazlar ve
	 * metin tamamen kaybolurdu. Katman her iki görünümde de KOYU kalmak
	 * zorunda. Değerler paletin petrol ailesinden seçildi, böylece
	 * karartma "gri bir perde" gibi değil, temanın parçası gibi durur.
	 */
	--vpt-scrim-rgb: 12, 31, 38;
	--vpt-scrim-dark-rgb: 6, 19, 26;
}


/* ==========================================================================
   03 — TASARIM MODÜLÜ BAYRAKLARI (body sınıfları)
   BGP_Design::body_class() basar. "vp-has-" öneki bilinçlidir: bayrak adı
   bileşen adıyla ÇAKIŞMAMALI. İlk sürümde bayrak "vp-sticky-call" idi,
   <body> üzerine binince bileşenin position:fixed kuralını yiyor ve tüm
   sayfa kayboluyordu. Bayraklar ayrı ad alanında durur.
   ========================================================================== */

/* Yoğunluk: panel --vp-space/gap/pad değerlerini zaten değiştirir; burada
   yalnız bileşen içi nefes ince ayarlanır. "regular" varsayılandır ve
   02. bölümdeki değerleri kullanır; kancası, özel CSS yazan kullanıcının
   yoğunluğa göre kural yazabilmesi için yine de tanımlı. */
.vp-d-regular {
	--vpt-lh: 1.62;
}

.vp-d-compact {
	--vpt-5: 18px;
	--vpt-6: 24px;
	--vpt-7: 32px;
	--vpt-8: 44px;
	--vpt-lh: 1.55;
}

.vp-d-comfortable {
	--vpt-5: 26px;
	--vpt-6: 34px;
	--vpt-7: 48px;
	--vpt-8: 66px;
	--vpt-lh: 1.68;
}

/* Gölge tercihi. "flat" seçildiğinde yükseklik çizgiyle anlatılır; kart
   sınırsız kalmaz, aksi hâlde kartlar zeminde erir. */
.vp-sh-flat {
	--vp-sh-1: none;
	--vp-sh-2: none;
	--vp-sh-3: none;
	--vpt-card-line: var(--vp-line-2);
}

.vp-sh-crisp {
	--vpt-card-line: var(--vp-line);
}

.vp-sh-soft {
	--vpt-card-line: var(--vp-line);
}

/* Düğme biçimi. --vp-r-btn'i panel de basar; bayrak, panel değişkeni
   gelmediğinde (ör. önizleme) aynı sonucu üretir. */
.vp-btn-pill {
	--vp-r-btn: var(--vp-r-pill);
}

.vp-btn-square {
	--vp-r-btn: 2px;
}

.vp-btn-rounded {
	--vp-r-btn: var(--vp-r);
}

/* Bölüm arka plan dokusu. Hepsi çok silik; fotoğrafın önüne geçmez. */
.vp-pat-none {
	--vpt-pattern: none;
}

.vp-pat-grid {
	--vpt-pattern:
		linear-gradient(var(--vpt-grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--vpt-grid-line) 1px, transparent 1px);
	--vpt-pattern-size: var(--vpt-grid-size) var(--vpt-grid-size);
}

.vp-pat-dots {
	--vpt-pattern: radial-gradient(var(--vpt-grid-line) 1.5px, transparent 1.6px);
	--vpt-pattern-size: 22px 22px;
}

.vp-pat-diagonal {
	--vpt-pattern: repeating-linear-gradient(135deg, var(--vpt-grid-line) 0 1px, transparent 1px 14px);
	--vpt-pattern-size: auto;
}

.vp-pat-grid .vp-sec--alt,
.vp-pat-dots .vp-sec--alt,
.vp-pat-diagonal .vp-sec--alt,
.vp-pat-grid .vp-sec--dark,
.vp-pat-dots .vp-sec--dark,
.vp-pat-diagonal .vp-sec--dark {
	background-image: var(--vpt-pattern);
	background-size: var(--vpt-pattern-size, auto);
}

/* Hareket. "vp-anim-off" kullanıcı tercihinden bağımsız, panel kararıdır. */
.vp-anim-off *,
.vp-anim-off *::before,
.vp-anim-off *::after {
	animation-duration: .001ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: .001ms !important;
	scroll-behavior: auto !important;
}

.vp-anim-off [data-vp-reveal] {
	opacity: 1 !important;
	transform: none !important;
}

/* Yapışkan başlık yalnız bayrak varken. Bayrak yoksa başlık akışta kalır ve
   içerik üst boşluğu telafi etmeye çalışmaz. */
.vp-has-sticky-head .vp-header {
	position: sticky;
	top: 0;
	z-index: var(--vpt-z-header);
}

/* Mobil yapışkan çağrı çubuğu açıkken sayfa sonuna pay bırakılır; aksi hâlde
   alt bilgi bağlantılarının üstüne biner. */
.vp-has-sticky-call .vp-footer {
	padding-bottom: calc(var(--vpt-8) + env(safe-area-inset-bottom, 0px));
}

/* İmleç vurgusu: yalnız hassas işaretleyicide, dokunmatikte anlamsız. */
@media (hover: hover) and (pointer: fine) {
	.vp-cursor-accent a:hover,
	.vp-cursor-accent button:hover:not(:disabled) {
		cursor: pointer;
		text-decoration-color: var(--vp-accent);
	}
}


/* ==========================================================================
   04 — SIFIRLAMA VE TABAN
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Yapışkan başlık çapa hedeflerini örtmesin. */
	scroll-padding-top: calc(var(--vp-header-h) + 16px);
	/* Yatay kaydırma yasağı (DESIGN-V2 §8): taşan tek bir öğe tüm sayfayı
	   kaydırılabilir yapıyordu. Kapı burada. */
	overflow-x: hidden;
}

body {
	margin: 0;
	background: var(--vp-bg);
	color: var(--vp-ink);
	font-family: var(--vp-font-body);
	font-size: calc(var(--vpt-body) * var(--vp-fs, 1));
	line-height: var(--vpt-lh);
	font-synthesis-weight: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
	min-height: 100vh;
	min-height: 100svh;
}

/* Çekmece açıkken gövde kilitlenir; kaydırma çubuğunun genişliği kadar iç
   dolgu eklenir ki sayfa sağa sıçramasın (--vp-sbw'yi theme.js yazar). */
body.vp-is-locked {
	overflow: hidden;
	padding-right: var(--vp-sbw, 0px);
	touch-action: none;
}

img,
svg,
video,
canvas,
iframe,
picture {
	max-width: 100%;
	display: block;
}

img,
video,
iframe {
	height: auto;
}

/* Oranı bilinen medyada yükseklik sıçraması (CLS) olmaz. */
img[width][height] {
	height: auto;
}

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

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

figure,
blockquote,
dl,
dd {
	margin: 0;
}

table {
	border-collapse: collapse;
	width: 100%;
}

hr {
	border: 0;
	border-top: 1px solid var(--vp-line);
	margin: var(--vpt-6) 0;
}

::selection {
	background: rgba(var(--vp-accent-rgb), .3);
	color: var(--vp-ink);
}

/* Tarayıcının kendi arayüzü (kaydırma çubuğu, form denetimleri) tema ile
   uyumlu olsun. Renk TANIMI değil, tarayıcıya ipucudur. */
:root {
	color-scheme: light;
	accent-color: var(--vp-primary);
}

:root[data-vp-theme="dark"] {
	color-scheme: dark;
}


/* ==========================================================================
   05 — TİPOGRAFİ
   Editoryal ölçek: başlık ile gövde arasındaki kontrast v1'e göre belirgin
   şekilde artırıldı. "Şablon" hissinin en büyük sebebi düz, kontrastsız
   tipografiydi.
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--vp-font-head);
	color: var(--vp-ink);
	/* 360px genişlikte başlıklar taşmasın: dengeli sarma + heceleme. */
	text-wrap: balance;
	overflow-wrap: break-word;
	hyphens: auto;
}

h1 {
	font-size: var(--vpt-h1);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.02;
}

h2 {
	font-size: var(--vpt-h2);
	font-weight: 800;
	letter-spacing: -.025em;
	line-height: 1.08;
}

h3 {
	font-size: var(--vpt-h3);
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.24;
}

h4,
h5,
h6 {
	font-size: var(--vpt-h4);
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.3;
}

p {
	margin: 0 0 1em;
}

p:last-child {
	margin-bottom: 0;
}

strong,
b {
	font-weight: 700;
}

small {
	font-size: var(--vpt-small);
}

code,
kbd,
pre,
samp {
	font-family: var(--vp-font-mono);
	font-size: .92em;
}

/* Sayılar hizalı olsun: fiyat, süre, istatistik sütun sütun akar
   (DESIGN-V2 §3). Bu, fiyat tablosunda gözle görülür fark yaratır. */
.vp-stat__num,
.vp-card__price,
.vp-table__price,
.vp-tool__out-val,
.vp-cta__phone-num,
.vp-phone__num,
.vp-reviews__avg,
.vp-sticky-card__price,
.vp-pager__item,
.vp-why__num,
.vp-step__num,
.vp-hero__badge,
time {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* Kicker: bakır renkli, seyrek harf aralıklı, küçük büyük harf.
   Sarı yerine bakır kullanılması sarı bütçesini korur. */
.vp-head__kicker {
	display: inline-block;
	font-family: var(--vp-font-body);
	font-size: var(--vpt-kicker);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--vp-copper);
	margin-bottom: var(--vpt-3);
}

/* Metin rengi yardımcıları — .vp-prose ve editör içeriğinde kullanılır. */
.vp-muted {
	color: var(--vp-muted);
}

.vp-danger {
	color: var(--vp-danger);
}

.vp-ok {
	color: var(--vp-ok);
}

.vp-warn {
	color: var(--vp-warn);
}

/* Blok editörünün palet sınıfları (inc/setup.php slug'ları).
   Yazılmazsa editörde seçilen renk ön yüzde hiç uygulanmaz. */
.has-vp-primary-color { color: var(--vp-primary); }
.has-vp-accent-color { color: var(--vp-accent); }
.has-vp-ink-color { color: var(--vp-ink); }
.has-vp-bg-color { color: var(--vp-bg); }
.has-vp-surface-color { color: var(--vp-surface); }
.has-vp-line-color { color: var(--vp-line); }

.has-vp-primary-background-color { background-color: var(--vp-primary); color: var(--vp-on-primary); }
.has-vp-accent-background-color { background-color: var(--vp-accent); color: var(--vp-on-accent); }
.has-vp-ink-background-color { background-color: var(--vp-ink); color: var(--vp-bg); }
.has-vp-bg-background-color { background-color: var(--vp-bg); }
.has-vp-surface-background-color { background-color: var(--vp-surface); }
.has-vp-line-background-color { background-color: var(--vp-line); }


/* ==========================================================================
   06 — ERİŞİLEBİLİRLİK YARDIMCILARI VE DURUM KAPILARI
   ========================================================================== */

/* Ekran okuyucu metni. clip-path modern yol, clip eski tarayıcı için. */
.vp-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Odaklanınca görünür olması gereken ekran okuyucu bağlantıları. */
.vp-sr:focus,
.vp-sr:focus-visible {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
}

/* İçeriğe atla: klavye kullanıcısının ilk durağı. */
.vp-skip {
	position: absolute;
	left: 12px;
	top: -100px;
	z-index: var(--vpt-z-toast);
	display: inline-flex;
	align-items: center;
	min-height: var(--vpt-tap);
	padding: 10px 18px;
	background: var(--vp-primary);
	color: var(--vp-on-primary);
	border-radius: var(--vp-r-sm);
	font-weight: 700;
	box-shadow: var(--vp-sh-2);
	transition: top var(--vpt-dur) var(--vpt-ease);
}

.vp-skip:focus,
.vp-skip:focus-visible {
	top: 12px;
}

/* Odak halkası — WCAG 2.2 §2.4.11 "Focus Appearance".
   2px değil 3px veriyoruz: sarı zeminde 2px kaybolabiliyor. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--vp-primary);
	outline-offset: 2px;
	border-radius: var(--vp-r-sm);
}

/* Koyu zemin üstünde odak halkası ana renkte okunmaz; sarıya çevrilir. */
.vp-sec--dark :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.vp-footer :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.vp-cta :where(a, button, summary, [tabindex]):focus-visible,
.vp-reviews :where(a, button, summary, [tabindex]):focus-visible {
	outline-color: var(--vp-accent);
}

/* Fare ile tıklamada halka çizilmez, klavyede çizilir. */
:focus:not(:focus-visible) {
	outline: none;
}

/*
 * [hidden] kapısı.
 * Çekmece BU KURALDAN MUAF: görünürlüğü transform + visibility ile yönetilir,
 * display:none ile gizlenirse açılış/kapanış geçişi hiç çalışmaz ve odak
 * tuzağı kurulamaz. theme.js açarken özniteliği kaldırıyor; öznitelik hâlâ
 * dururken de öğe ekran dışında ve erişilemez durumda kalır.
 */
[hidden]:not(.vp-drawer) {
	display: none !important;
}

/* Dokunma hedefi asgarisi (WCAG 2.2 §2.5.8 24px ister; biz 44px veriyoruz).
   İçerik akışındaki metin bağlantıları hariç tutulur, aksi hâlde paragraf
   içindeki bağlantı satır yüksekliğini bozar. */
@media (pointer: coarse) {
	.vp-nav__link,
	.vp-btn,
	.vp-chip,
	.vp-burger,
	.vp-themetoggle,
	.vp-searchbtn,
	.vp-pager__item a,
	.vp-share__btn,
	.vp-footer__list a,
	.vp-topbar__link,
	.vp-sticky-call__btn {
		min-height: var(--vpt-tap);
		min-width: var(--vpt-tap);
	}
}

/* Panel kapalıyken yönetici uyarısı (inc/compat.php). Satır içi biçemi
   vardır; burada yalnız okunur bir çerçeve veriyoruz. */
.vp-panelwarn {
	max-width: var(--vp-container);
	margin: var(--vpt-5) auto;
	padding: var(--vpt-4) var(--vpt-5);
	border: 1px solid var(--vp-line-2);
	border-left: 4px solid var(--vp-danger);
	border-radius: var(--vp-r-sm);
	background: var(--vp-surface);
	color: var(--vp-ink);
}


/* ==========================================================================
   07 — YERLEŞİM: wrap / sec / head / grid
   ========================================================================== */

.vp-wrap {
	width: min(100% - 2 * var(--vpt-5), var(--vp-container));
	margin-inline: auto;
}

.vp-wrap--narrow {
	width: min(100% - 2 * var(--vpt-5), 780px);
}

.vp-main {
	display: block;
	min-height: 40vh;
}

.vp-main--dar > .vp-sec > .vp-wrap,
.vp-main--dar > .vp-wrap {
	width: min(100% - 2 * var(--vpt-5), 900px);
}

.vp-main--genis > .vp-sec > .vp-wrap,
.vp-main--genis > .vp-wrap {
	width: min(100% - 2 * var(--vpt-5), 1440px);
}

/* --- Bölüm ---------------------------------------------------------------
   Ritim kuralı (DESIGN-V2 §4): ardışık bölümler aynı görünmemeli. Zebra
   (--alt) tek başına yetmez; bölümler kendi kimliklerini 14. bölümden
   itibaren tek tek alır. Burada yalnız taban ve ortak zeminler var.
------------------------------------------------------------------------- */

.vp-sec {
	position: relative;
	padding-block: var(--vp-space);
	background: var(--vp-bg);
	/* İçerik taşmasının sayfayı kaydırılabilir yapmasını engeller. */
	overflow-x: clip;
}

.vp-sec--alt {
	background: var(--vp-bg-2);
}

.vp-sec--tight {
	padding-block: calc(var(--vp-space) * .42);
}

.vp-sec--dark {
	background: var(--vp-primary-d);
	color: rgba(255, 255, 255, .88);
	--vp-ink: #FFFFFF;
	--vp-ink-2: rgba(255, 255, 255, .82);
	--vp-muted: rgba(255, 255, 255, .62);
	--vp-line: rgba(255, 255, 255, .14);
	--vp-line-2: rgba(255, 255, 255, .24);
	--vp-surface: rgba(255, 255, 255, .05);
	--vp-surface-2: rgba(255, 255, 255, .08);
}

.vp-sec--dark :where(h1, h2, h3, h4, h5, h6) {
	color: #fff;
}

/*
 * Tam genişlik kesme (DESIGN-V2 §10).
 * Konteynerden taşar ama YATAY KAYDIRMA ÜRETMEZ: gövdede overflow-x:clip
 * var ve genişlik 100vw yerine 100% + hesaplanmış pay ile veriliyor;
 * 100vw kaydırma çubuğunu da sayar ve masaüstünde 15px taşma yaratırdı.
 */
.vp-sec--bleed {
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
	padding-inline: 0;
}

.vp-sec--bleed > .vp-wrap {
	width: 100%;
}

/* İki bölüm arasında ince bakır ayraç — yalnız zemin tonu aynıysa görünür. */
.vp-sec + .vp-sec::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 1px;
	background: var(--vp-line);
	opacity: .55;
}

.vp-sec--dark + .vp-sec::before,
.vp-sec + .vp-sec--dark::before,
.vp-sec--alt + .vp-sec::before,
.vp-sec + .vp-sec--alt::before,
.vp-sec--bleed::before {
	display: none;
}

/* --- Bölüm başlığı -------------------------------------------------------- */

.vp-head {
	max-width: 780px;
	margin: 0 auto var(--vpt-7);
	text-align: center;
}

.vp-head--left {
	margin-inline: 0;
	text-align: left;
}

.vp-head__title {
	margin: 0;
}

/* Başlık altındaki tek vurgu çizgisi — sarı bütçesinin harcandığı yerlerden
   biri. Kısa ve kalın: dekorasyon değil, işaret. */
.vp-head__title::after {
	content: "";
	display: block;
	width: 52px;
	height: 4px;
	margin: var(--vpt-4) auto 0;
	border-radius: var(--vp-r-pill);
	background: var(--vp-accent);
}

.vp-head--left .vp-head__title::after {
	margin-inline: 0;
}

.vp-head__sub {
	margin: var(--vpt-4) auto 0;
	max-width: var(--vpt-measure);
	color: var(--vp-ink-2);
	font-size: var(--vpt-lead);
	line-height: 1.55;
}

.vp-head--left .vp-head__sub {
	margin-inline: 0;
}

.vp-head__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vpt-3);
	justify-content: center;
	margin-top: var(--vpt-5);
}

.vp-head--left .vp-head__actions {
	justify-content: flex-start;
}

/* Bölüm altı eylem satırı (ör. "Tüm hizmetler"). */
.vp-sec__foot {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vpt-3);
	justify-content: center;
	align-items: center;
	margin-top: var(--vpt-7);
}

/* --- Izgara --------------------------------------------------------------
   minmax(0, 1fr): sütun içeriği (uzun başlık, geniş tablo) sütunu şişirip
   ızgarayı taşırmasın diye. Bu tek satır, yatay kaydırmanın en sık sebebini
   ortadan kaldırır.
------------------------------------------------------------------------- */

.vp-grid {
	display: grid;
	gap: var(--vp-gap);
	grid-template-columns: repeat(var(--vpt-cols, 1), minmax(0, 1fr));
}

.vp-grid--2 { --vpt-cols: 2; }
.vp-grid--3 { --vpt-cols: 3; }
.vp-grid--4 { --vpt-cols: 4; }


/* ==========================================================================
   08 — DÜĞMELER
   Birincil düğme SARI DEĞİL, koyu petroldür (DESIGN-V2 §6). Sarı yalnız
   "acil" niteliğindeki tek eylemde (--accent) kullanılır.
   ========================================================================== */

.vp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--vpt-2);
	min-height: 48px;
	padding: 12px 22px;
	border: 1.5px solid transparent;
	border-radius: var(--vp-r-btn, var(--vp-r));
	font-family: var(--vp-font-body);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.01em;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color var(--vpt-dur) var(--vpt-ease),
		border-color var(--vpt-dur) var(--vpt-ease),
		color var(--vpt-dur) var(--vpt-ease),
		box-shadow var(--vpt-dur) var(--vpt-ease),
		transform var(--vpt-dur) var(--vpt-ease);
}

.vp-btn:disabled,
.vp-btn[aria-disabled="true"] {
	opacity: .55;
	cursor: not-allowed;
	pointer-events: none;
}

.vp-btn__i {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
}

.vp-btn__i svg {
	width: 1.15em;
	height: 1.15em;
	fill: currentColor;
}

.vp-btn__t {
	display: inline-block;
	/* Uzun düğme metni 380px'te taşmasın. */
	white-space: normal;
	overflow-wrap: anywhere;
}

/* Birincil: koyu petrol zemin, beyaz metin. Sitenin ana eylem rengi budur. */
.vp-btn--primary {
	background: var(--vp-primary);
	border-color: var(--vp-primary);
	color: var(--vp-on-primary);
	box-shadow: var(--vp-sh-1);
}

.vp-btn--primary:hover {
	background: var(--vp-primary-d);
	border-color: var(--vp-primary-d);
	box-shadow: var(--vp-sh-2);
	transform: translateY(-1px);
}

.vp-btn--primary:active {
	transform: translateY(0);
	box-shadow: none;
}

/* Vurgu: sinyal sarısı üstünde siyah metin. Sayfada en fazla bir-iki tane.
   Kontrast oranı 11:1 üzeri — levha mantığı hem güzel hem erişilebilir. */
.vp-btn--accent {
	background: var(--vp-accent);
	border-color: var(--vp-accent);
	color: var(--vp-on-accent);
	box-shadow: var(--vp-sh-1);
}

.vp-btn--accent:hover {
	background: var(--vp-accent-d, var(--vp-accent));
	border-color: var(--vp-accent-d, var(--vp-accent));
	transform: translateY(-1px);
	box-shadow: var(--vp-sh-2);
}

.vp-btn--accent:active {
	transform: translateY(0);
	box-shadow: none;
}

/* Çerçeveli: ikincil eylem. Zeminden rengini alır, dolayısıyla koyu
   şeritlerde de doğru görünür. */
.vp-btn--line {
	background: transparent;
	border-color: var(--vp-line-2);
	color: var(--vp-ink);
}

.vp-btn--line:hover {
	border-color: var(--vp-primary);
	color: var(--vp-primary);
	background: rgba(var(--vp-primary-rgb), .06);
}

.vp-sec--dark .vp-btn--line,
.vp-cta .vp-btn--line,
.vp-footer .vp-btn--line {
	border-color: rgba(255, 255, 255, .32);
	color: #fff;
}

.vp-sec--dark .vp-btn--line:hover,
.vp-cta .vp-btn--line:hover,
.vp-footer .vp-btn--line:hover {
	border-color: var(--vp-accent);
	color: var(--vp-accent);
	background: rgba(var(--vp-accent-rgb), .1);
}

/* Hayalet: üçüncül, çerçevesiz. */
.vp-btn--ghost {
	background: transparent;
	border-color: transparent;
	color: var(--vp-primary);
	padding-inline: 12px;
}

.vp-btn--ghost:hover {
	background: rgba(var(--vp-primary-rgb), .08);
}

.vp-sec--dark .vp-btn--ghost,
.vp-cta .vp-btn--ghost {
	color: #fff;
}

.vp-sec--dark .vp-btn--ghost:hover,
.vp-cta .vp-btn--ghost:hover {
	background: rgba(255, 255, 255, .12);
}

/* Büyük: kahraman ve harekete geçirme şeritleri. 56px yükseklik
   (DESIGN-V2 §6) — telefon ekranında baş parmakla ıskalanmaz. */
.vp-btn--lg {
	min-height: 56px;
	padding: 14px 28px;
	font-size: 1.0625rem;
}

.vp-btn--sm {
	min-height: 38px;
	padding: 8px 14px;
	font-size: .9rem;
}

.vp-btn--block {
	display: flex;
	width: 100%;
}

/* Yan yana düğme grubu — kahraman, kart altı, çekmece. */
.vp-hero__cta,
.vp-cta__btns,
.vp-cta__actions,
.vp-drawer__cta,
.vp-sticky-card__actions,
.vp-tools__cta,
.vp-pricing__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vpt-3);
	align-items: center;
}


/* ==========================================================================
   09 — KÜÇÜK BİLEŞENLER
   badge · chip · tag · icontile · stat · quote · stars · hours · phone
   ========================================================================== */

/* --- Rozet ---------------------------------------------------------------
   Varsayılan rozet NÖTR'dür. Sarı yalnız "acil" rozetinde kullanılır; her
   rozeti sarı yapmak sarı bütçesini bir kalemde bitirirdi.
------------------------------------------------------------------------- */

.vp-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: var(--vp-r-pill);
	background: var(--vp-bg-3);
	color: var(--vp-ink-2);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.5;
	white-space: nowrap;
}

.vp-badge svg {
	width: 13px;
	height: 13px;
	fill: currentColor;
}

/* Acil: sarı zemin, siyah metin. Elektrik uyarı etiketinin birebir kopyası. */
.vp-badge--acil {
	background: var(--vp-accent);
	color: var(--vp-on-accent);
}

.vp-badge--acil::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

/* Kategori: bakır çerçeve, şeffaf zemin — kart görselinin üstünde de okunur. */
.vp-badge--cat {
	background: rgba(var(--vp-copper-rgb), .12);
	color: var(--vp-copper);
	box-shadow: inset 0 0 0 1px rgba(var(--vp-copper-rgb), .3);
}

/* Varış süresi: bölge kartında "22 dk" gibi. */
.vp-badge--eta {
	background: rgba(var(--vp-primary-rgb), .1);
	color: var(--vp-primary);
	text-transform: none;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}

/* Hizmet rozetleri (bgp_service_badges): acil · popüler · yeni · kampanya.
   YALNIZ "acil" sarıdır. Diğerleri sarıya kaçarsa bir kart ızgarasında dört
   sarı leke oluşuyor ve gerçek acil işareti görünmez hâle geliyor. */
.vp-badge--yeni {
	background: rgba(12, 122, 87, .12);
	color: var(--vp-ok);
}

.vp-badge--kampanya {
	background: rgba(var(--vp-copper-rgb), .14);
	color: var(--vp-copper);
}

/* --- Çip (süzgeç ve sekme düğmesi) --------------------------------------- */

.vp-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 8px 16px;
	border: 1.5px solid var(--vp-line);
	border-radius: var(--vp-r-pill);
	background: var(--vp-surface);
	color: var(--vp-ink-2);
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color var(--vpt-dur) var(--vpt-ease),
		border-color var(--vpt-dur) var(--vpt-ease),
		color var(--vpt-dur) var(--vpt-ease);
}

.vp-chip:hover {
	border-color: var(--vp-primary-l);
	color: var(--vp-primary);
}

/* Etkin çip: petrol dolgu. theme.js "is-on" yazar. */
.vp-chip.is-on,
.vp-chip.is-active,
.vp-chip[aria-selected="true"],
.vp-chip[aria-pressed="true"] {
	background: var(--vp-primary);
	border-color: var(--vp-primary);
	color: var(--vp-on-primary);
}

.vp-chip--ok {
	border-color: rgba(12, 122, 87, .35);
	color: var(--vp-ok);
}

.vp-chip__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: var(--vp-r-pill);
	background: rgba(var(--vp-ink-rgb), .08);
	color: inherit;
	font-size: .75rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.vp-chip.is-on .vp-chip__count {
	background: rgba(255, 255, 255, .2);
}

/* Süzgeç kabı: mobilde kaydırma şeridine döner (33. bölüm). */
.vp-filter,
.vp-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vpt-2);
	justify-content: center;
	margin-bottom: var(--vpt-6);
}

/* --- Etiket --------------------------------------------------------------- */

.vp-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vp-tag {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border-radius: var(--vp-r-sm);
	background: var(--vp-bg-2);
	color: var(--vp-muted);
	font-size: .78rem;
	font-weight: 600;
	line-height: 1.6;
}

a.vp-tag:hover {
	background: rgba(var(--vp-primary-rgb), .1);
	color: var(--vp-primary);
}

.vp-tag--more {
	background: transparent;
	color: var(--vp-copper);
	font-weight: 700;
}

/* --- İkon karosu ---------------------------------------------------------
   Bütün bölümlerde aynı ikon kabı kullanılır; ayrım rengi bağlamdan gelir.
------------------------------------------------------------------------- */

.vp-icontile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: var(--vp-r-sm);
	background: rgba(var(--vp-primary-rgb), .08);
	color: var(--vp-primary);
}

.vp-icontile svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.vp-sec--dark .vp-icontile,
.vp-cta .vp-icontile {
	background: rgba(255, 255, 255, .1);
	color: var(--vp-accent);
}

/* --- İstatistik ----------------------------------------------------------- */

.vp-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.vp-stat__num {
	font-family: var(--vp-font-head);
	font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.75rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--vp-primary);
}

.vp-sec--dark .vp-stat__num,
.vp-cta .vp-stat__num {
	color: var(--vp-accent);
}

.vp-stat__suf {
	font-size: .55em;
	font-weight: 700;
	margin-left: 2px;
	color: var(--vp-copper);
}

.vp-stat__lbl {
	font-size: var(--vpt-small);
	color: var(--vp-muted);
	line-height: 1.4;
}

/* --- Alıntı --------------------------------------------------------------- */

.vp-quote {
	position: relative;
	margin: 0;
	padding-top: var(--vpt-5);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--vp-ink-2);
}

/* İri bakır tırnak (DESIGN-V2 §7 · reviews). */
.vp-quote::before {
	content: "\201C";
	position: absolute;
	top: -6px;
	left: -2px;
	font-family: var(--vp-font-head);
	font-size: 3.4rem;
	line-height: 1;
	color: var(--vp-copper);
	opacity: .55;
	pointer-events: none;
}

/* --- Yıldızlar ------------------------------------------------------------ */

.vp-stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: var(--vp-accent);
}

.vp-stars__i {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.vp-stars__i.is-off {
	color: var(--vp-line-2);
}

/* --- Çalışma saati rozeti -------------------------------------------------- */

.vp-hours {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--vpt-small);
	font-weight: 600;
	color: var(--vp-ink-2);
	line-height: 1.4;
}

.vp-hours__dot {
	width: 8px;
	height: 8px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--vp-muted);
	box-shadow: 0 0 0 3px rgba(var(--vp-ink-rgb), .08);
}

/* Açık: yeşil nokta. DESIGN-V2 §6 nabız animasyonunu açıkça yasaklıyor —
   panik hâlindeki ziyaretçiye yanıp sönen nokta göstermek stres artırıyor. */
.vp-hours--on .vp-hours__dot {
	background: var(--vp-ok);
	box-shadow: 0 0 0 3px rgba(12, 122, 87, .18);
}

.vp-hours--off .vp-hours__dot {
	background: var(--vp-danger);
	box-shadow: 0 0 0 3px rgba(var(--vp-danger-rgb), .18);
}

.vp-hours--na .vp-hours__dot {
	background: var(--vp-line-2);
}

.vp-hours__txt {
	white-space: nowrap;
}

.vp-hours__detail {
	color: var(--vp-muted);
	font-weight: 500;
}

/* --- Telefon bloğu -------------------------------------------------------- */

.vp-phone {
	display: inline-flex;
	align-items: center;
	gap: var(--vpt-3);
	padding: 10px 14px;
	border-radius: var(--vp-r);
	background: var(--vp-surface);
	border: 1px solid var(--vp-line);
	transition: border-color var(--vpt-dur) var(--vpt-ease), box-shadow var(--vpt-dur) var(--vpt-ease);
}

.vp-phone:hover {
	border-color: var(--vp-primary-l);
	box-shadow: var(--vp-sh-1);
}

.vp-phone__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: var(--vp-r-sm);
	background: rgba(var(--vp-primary-rgb), .1);
	color: var(--vp-primary);
}

.vp-phone__ico svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.vp-phone__box {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.vp-phone__lbl {
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--vp-muted);
	font-weight: 700;
}

.vp-phone__num {
	font-family: var(--vp-font-head);
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--vp-ink);
	white-space: nowrap;
}

/* --- Tablo tabanı --------------------------------------------------------- */

.vp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .97rem;
}

.vp-table th,
.vp-table td {
	padding: 14px var(--vpt-4);
	text-align: left;
	border-bottom: 1px solid var(--vp-line);
	vertical-align: middle;
}

.vp-table thead th {
	font-family: var(--vp-font-body);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vp-muted);
	border-bottom-width: 2px;
}

.vp-table tbody tr:last-child td {
	border-bottom: 0;
}

/* --- Genel giriş denetimleri (araçlar, arama, editör) --------------------- */

.vp-input,
.vp-select {
	width: 100%;
	min-height: 48px;
	padding: 11px 14px;
	border: 1.5px solid var(--vp-line-2);
	border-radius: var(--vp-r-sm);
	background: var(--vp-surface);
	color: var(--vp-ink);
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color var(--vpt-dur) var(--vpt-ease), box-shadow var(--vpt-dur) var(--vpt-ease);
}

.vp-input:hover,
.vp-select:hover {
	border-color: var(--vp-primary-l);
}

.vp-input:focus,
.vp-select:focus {
	outline: none;
	border-color: var(--vp-primary);
	box-shadow: var(--vp-ring);
}

.vp-input::placeholder {
	color: var(--vp-muted);
	opacity: 1;
}

/* Yerel ok yerine kendi okumuz: yükseklik ve renk her tarayıcıda aynı olsun. */
.vp-select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 40px;
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position:
		calc(100% - 20px) calc(50% + 1px),
		calc(100% - 14px) calc(50% + 1px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

/* Sayısal alanlarda artırma okları kaldırılır: hesap araçlarında yanlışlıkla
   tıklanıp sonucu değiştiriyorlar. */
.vp-input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
	font-variant-numeric: tabular-nums;
}

.vp-input[type="number"]::-webkit-outer-spin-button,
.vp-input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}


/* ==========================================================================
   10 — YER TUTUCU (.vp-ph)   DESIGN-V2 §5.2
   Görsel yoksa SVG sahnesine DÜŞMEZ. Amaç "eksik görsel" gibi değil,
   bilinçli boş kart gibi görünmek: petrol→antrasit çok hafif diyagonal
   gradyan + silik teknik ızgara + tek renkli ikon + kayıt adı.
   ========================================================================== */

.vp-ph {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	aspect-ratio: var(--vpt-ph-ratio, var(--vpt-ratio-service));
	padding: var(--vpt-4);
	overflow: hidden;
	background:
		linear-gradient(142deg, var(--vp-primary-l) 0%, var(--vp-primary) 46%, var(--vp-primary-d) 100%);
	color: rgba(255, 255, 255, .78);
	text-align: center;
	isolation: isolate;
}

/* Teknik ızgara: opacity .06 — fark edilir ama okunmaz. */
.vp-ph::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .9) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .9) 1px, transparent 1px);
	background-size: var(--vpt-grid-size) var(--vpt-grid-size);
	opacity: .06;
	pointer-events: none;
	z-index: -1;
}

/* Köşede ince bakır işaret: yer tutucu bile marka ailesine ait görünsün. */
.vp-ph::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 46px;
	height: 3px;
	background: var(--vp-copper);
	opacity: .8;
}

.vp-ph__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	opacity: .85;
}

.vp-ph__icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.vp-ph__label {
	max-width: 22ch;
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: .01em;
	opacity: .72;
	overflow-wrap: anywhere;
}

/* Oran varyantları — kart tipine göre kap sınıfı belirler (14. bölüm). */
.vp-card--project .vp-ph { --vpt-ph-ratio: var(--vpt-ratio-project); }
.vp-card--post .vp-ph { --vpt-ph-ratio: var(--vpt-ratio-post); }
.vp-bento__cell--lead .vp-ph { --vpt-ph-ratio: var(--vpt-ratio-lead); }
.vp-card--member .vp-ph { --vpt-ph-ratio: 1 / 1; }

/* SVG kütüphanesi (inc/svg.php) ikon ve boş durum için duruyor; kart ya da
   kahraman medyası olarak ARTIK KULLANILMIYOR (DESIGN-V2 §5). Kalan
   kullanımlarda taşmasın diye kap ölçüsü veriliyor. */
.vp-scene,
.vp-svg {
	display: block;
	width: 100%;
	height: auto;
}


/* ==========================================================================
   11 — ÜST ŞERİT, BAŞLIK, MENÜ, ÇEKMECE, ARAMA
   ========================================================================== */

/* --- Üst şerit (adres · telefon · sosyal) --------------------------------- */

.vp-topbar {
	background: var(--vp-primary-d);
	color: rgba(255, 255, 255, .78);
	font-size: var(--vpt-small);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.vp-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vpt-4);
	min-height: 40px;
	padding-block: 6px;
}

.vp-topbar__left,
.vp-topbar__right {
	display: flex;
	align-items: center;
	gap: var(--vpt-4);
	min-width: 0;
}

.vp-topbar .vp-hours {
	color: rgba(255, 255, 255, .82);
}

.vp-topbar .vp-hours__detail {
	color: rgba(255, 255, 255, .58);
}

.vp-topbar__addr {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.vp-topbar__addr > span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vp-topbar__addr svg,
.vp-topbar__link svg,
.vp-topbar__soc svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
	flex: 0 0 auto;
}

.vp-topbar__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: rgba(255, 255, 255, .86);
	font-weight: 600;
	transition: color var(--vpt-dur) var(--vpt-ease);
}

.vp-topbar__link:hover {
	color: var(--vp-accent);
}

.vp-topbar__social {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding-left: var(--vpt-3);
	border-left: 1px solid rgba(255, 255, 255, .14);
}

.vp-topbar__soc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--vp-r-sm);
	color: rgba(255, 255, 255, .7);
	transition: background-color var(--vpt-dur) var(--vpt-ease), color var(--vpt-dur) var(--vpt-ease);
}

.vp-topbar__soc:hover {
	background: rgba(255, 255, 255, .12);
	color: #fff;
}

/* --- Başlık ---------------------------------------------------------------
   Yapışkanlık body bayrağından gelir (03. bölüm). Burada yalnız görünüm.
------------------------------------------------------------------------- */

.vp-header {
	background: var(--vp-surface);
	border-bottom: 1px solid var(--vp-line);
	transition: box-shadow var(--vpt-dur) var(--vpt-ease), transform var(--vpt-dur-slow) var(--vpt-ease);
}

.vp-header__inner {
	display: flex;
	align-items: center;
	gap: var(--vpt-5);
	min-height: 72px;
	padding-block: 10px;
}

/* theme.js sayfa kaydırılınca "is-stuck" yazar: gölge belirir, yükseklik
   biraz azalır. Renk değişmez — zıplama hissi vermesin. */
.vp-header.is-stuck {
	box-shadow: var(--vp-sh-2);
	border-bottom-color: transparent;
}

.vp-header.is-stuck .vp-header__inner {
	min-height: 64px;
}

/* Aşağı kaydırırken başlık gizlenir (theme.js "is-hidden"). Yalnız yapışkan
   kipte anlamlı; akıştaki başlıkta hiç uygulanmaz. */
.vp-has-sticky-head .vp-header.is-hidden {
	transform: translateY(-100%);
}

.vp-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	min-width: 0;
	margin-right: auto;
}

.vp-brand__img {
	width: auto;
	max-height: 46px;
	object-fit: contain;
}

/* Logo yoksa: petrol kare + baş harf. Sarı DEĞİL — marka işareti sarı
   olursa sayfadaki sarı bütçesi daha ilk satırda tükenir. */
.vp-brand__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: var(--vp-r-sm);
	background: var(--vp-primary);
	color: var(--vp-on-primary);
	font-family: var(--vp-font-head);
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1;
	position: relative;
	overflow: hidden;
}

/* Marka karesinin köşesindeki sarı işaret: tek noktalık vurgu. */
.vp-brand__mark::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 12px;
	height: 3px;
	background: var(--vp-accent);
}

.vp-brand__mark svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.vp-brand__text {
	font-family: var(--vp-font-head);
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: -.025em;
	color: var(--vp-ink);
	line-height: 1.1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.vp-brand--dark .vp-brand__text {
	color: #fff;
}

.vp-brand--dark .vp-brand__mark {
	background: rgba(255, 255, 255, .12);
	color: #fff;
}


/* --- Ana menü ------------------------------------------------------------- */

.vp-nav {
	min-width: 0;
}

.vp-nav__list {
	display: flex;
	align-items: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vp-nav__item {
	position: relative;
}

.vp-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	border-radius: var(--vp-r-sm);
	font-size: .97rem;
	font-weight: 600;
	color: var(--vp-ink-2);
	white-space: nowrap;
	transition: color var(--vpt-dur) var(--vpt-ease), background-color var(--vpt-dur) var(--vpt-ease);
}

.vp-nav__link:hover {
	color: var(--vp-primary);
	background: rgba(var(--vp-primary-rgb), .07);
}

/* Bulunulan sayfa: bakır alt çizgi. Kalın yazı yerine çizgi tercih edildi,
   menü satırı zıplamıyor. */
.vp-nav__item.is-current > .vp-nav__link,
.vp-nav__link[aria-current="page"] {
	color: var(--vp-primary);
	position: relative;
}

.vp-nav__item.is-current > .vp-nav__link::after,
.vp-nav__link[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 4px;
	height: 2px;
	border-radius: 2px;
	background: var(--vp-copper);
}

/* Alt menüsü olan öğe: küçük ok. theme.js "has-sub" ve .vp-nav__chev üretir. */
.vp-nav__item--has > .vp-nav__link::before,
.vp-nav__item.has-sub > .vp-nav__link::before {
	content: "";
	order: 2;
	width: 0;
	height: 0;
	margin-left: 2px;
	border: 4px solid transparent;
	border-top-color: currentColor;
	transform: translateY(2px);
	opacity: .6;
}

/* theme.js'in eklediği açma düğmesi ve şevron (mobil/klavye erişimi için). */
.vp-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	border-radius: var(--vp-r-sm);
	color: inherit;
	background: transparent;
}

.vp-nav__toggle:hover {
	background: rgba(var(--vp-ink-rgb), .07);
}

.vp-nav__chev {
	display: block;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--vpt-dur) var(--vpt-ease);
}

.vp-nav__item.is-open > .vp-nav__toggle .vp-nav__chev,
.vp-nav__toggle[aria-expanded="true"] .vp-nav__chev {
	transform: rotate(-135deg) translate(-2px, -2px);
}

/* Açılır alt menü: masaüstünde üstüne gelince, klavyede odakla, dokunmatikte
   is-open ile. Üçü de tek kural kümesiyle karşılanır. */
.vp-nav__sub {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: var(--vpt-z-header);
	min-width: 230px;
	padding: 8px;
	margin: 0;
	list-style: none;
	background: var(--vp-surface);
	border: 1px solid var(--vp-line);
	border-radius: var(--vp-r);
	box-shadow: var(--vp-sh-3);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition:
		opacity var(--vpt-dur) var(--vpt-ease),
		transform var(--vpt-dur) var(--vpt-ease),
		visibility var(--vpt-dur) var(--vpt-ease);
}

.vp-nav__sub .vp-nav__link {
	display: flex;
	width: 100%;
	white-space: normal;
}

.vp-nav--main .vp-nav__item:hover > .vp-nav__sub,
.vp-nav--main .vp-nav__item:focus-within > .vp-nav__sub,
.vp-nav__item.is-open > .vp-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Üçüncü seviye yana açılır; ekran dışına taşarsa 1024 altında zaten
   çekmeceye geçiliyor. */
.vp-nav__sub .vp-nav__sub {
	top: -8px;
	left: calc(100% + 4px);
}

.vp-header__actions {
	display: flex;
	align-items: center;
	gap: var(--vpt-2);
	flex: 0 0 auto;
	margin-left: auto;
}

/* Başlıktaki arama düğmesi ve tema düğmesi aynı kabı paylaşır. */
.vp-searchbtn,
.vp-themetoggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--vp-r-sm);
	border: 1.5px solid var(--vp-line);
	background: transparent;
	color: var(--vp-ink-2);
	transition: border-color var(--vpt-dur) var(--vpt-ease), color var(--vpt-dur) var(--vpt-ease), background-color var(--vpt-dur) var(--vpt-ease);
}

.vp-searchbtn:hover,
.vp-themetoggle:hover {
	border-color: var(--vp-primary-l);
	color: var(--vp-primary);
	background: rgba(var(--vp-primary-rgb), .06);
}

.vp-searchbtn svg,
.vp-themetoggle svg {
	width: 19px;
	height: 19px;
	fill: currentColor;
}

/* Tema düğmesi: iki ikon üst üste, biri gizli. Aktif temayı gösteren değil,
   GEÇİLECEK temayı gösteren ikon görünür — düğmenin vaadi budur. */
.vp-themetoggle {
	position: relative;
}

.vp-themetoggle__sun,
.vp-themetoggle__moon {
	display: inline-flex;
	transition: opacity var(--vpt-dur) var(--vpt-ease), transform var(--vpt-dur) var(--vpt-ease);
}

.vp-themetoggle__sun {
	position: absolute;
	opacity: 0;
	transform: rotate(-40deg) scale(.7);
}

[data-vp-theme="dark"] .vp-themetoggle__moon {
	opacity: 0;
	transform: rotate(40deg) scale(.7);
}

[data-vp-theme="dark"] .vp-themetoggle__sun {
	position: static;
	opacity: 1;
	transform: none;
}

/* theme.js gövdeye/düğmeye is-dark yazabiliyor; öznitelikle aynı sonucu ver. */
.vp-themetoggle.is-dark {
	border-color: var(--vp-primary-l);
	color: var(--vp-accent);
}

/* Başlıktaki arama düğmesi. */
.vp-header__call {
	flex: 0 0 auto;
}

/* --- Hamburger ------------------------------------------------------------
   1024px üstünde gizlenir (33. bölüm).
------------------------------------------------------------------------- */

.vp-burger {
	display: none;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 5px;
	width: 44px;
	height: 44px;
	border-radius: var(--vp-r-sm);
	border: 1.5px solid var(--vp-line);
	background: transparent;
	color: var(--vp-ink);
}

.vp-burger__bar {
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform var(--vpt-dur) var(--vpt-ease), opacity var(--vpt-dur) var(--vpt-ease);
}

.vp-burger[aria-expanded="true"] .vp-burger__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.vp-burger[aria-expanded="true"] .vp-burger__bar:nth-child(2) {
	opacity: 0;
}

.vp-burger[aria-expanded="true"] .vp-burger__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* --- Başlık içi arama kutusu --------------------------------------------- */

.vp-search {
	border-top: 1px solid var(--vp-line);
	background: var(--vp-surface-2);
	padding-block: var(--vpt-4);
}

.vp-search form,
.vp-arama {
	display: flex;
	gap: var(--vpt-2);
	align-items: center;
}

.vp-hizmet-ara,
.vp-404-ara {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 48px;
	padding: 11px 16px;
	border: 1.5px solid var(--vp-line-2);
	border-radius: var(--vp-r-sm);
	background: var(--vp-surface);
	color: var(--vp-ink);
	font-size: 1rem;
}

/* --- Çekmece (mobil menü) ------------------------------------------------
   [hidden] kapısından muaftır (06. bölüm). Görünürlük transform +
   visibility ile yönetilir; böylece açılış/kapanış geçişi çalışır, kapalı
   hâlde de odak alınamaz.
------------------------------------------------------------------------- */

.vp-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--vpt-z-drawer);
	display: block;
	visibility: hidden;
	pointer-events: none;
}

.vp-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
}

/* Karartma katmanı. theme.js hem __backdrop hem __scrim adını tanıyor;
   ikisi de aynı görevi görür, hangisi işaretlemede varsa o çalışır. */
.vp-drawer__backdrop,
.vp-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(var(--vp-primary-rgb), .55);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity var(--vpt-dur-slow) var(--vpt-ease);
}

.vp-drawer.is-open .vp-drawer__backdrop,
.vp-drawer.is-open .vp-drawer__scrim {
	opacity: 1;
}

/* Panel: sağdan girer. Kapalıyken ekran dışında ve erişilemez; görünürlüğü
   transform + visibility yönetir (bkz. 06. bölümdeki [hidden] muafiyeti). */
.vp-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(92vw, 400px);
	display: flex;
	flex-direction: column;
	gap: var(--vpt-5);
	padding: var(--vpt-5) var(--vpt-5) calc(var(--vpt-6) + env(safe-area-inset-bottom, 0px));
	background: var(--vp-surface);
	border-left: 1px solid var(--vp-line);
	box-shadow: var(--vp-sh-3);
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX(100%);
	transition: transform var(--vpt-dur-slow) var(--vpt-ease-out);
}

.vp-drawer.is-open .vp-drawer__panel {
	transform: translateX(0);
}

.vp-drawer__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--vp-r-sm);
	border: 1.5px solid var(--vp-line);
	background: var(--vp-surface);
	color: var(--vp-ink);
	font-size: 1.35rem;
	line-height: 1;
}

.vp-drawer__close:hover {
	border-color: var(--vp-danger);
	color: var(--vp-danger);
}

/* Çekmece menüsü dikey; alt menüler girintili ve her zaman açık — dokunmatik
   kullanıcıyı iki kez tıklamaya zorlamak gezinmeyi yavaşlatıyor. */
.vp-nav--drawer .vp-nav__list {
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
}

.vp-nav--drawer .vp-nav__link {
	padding: 12px 12px;
	font-size: 1.05rem;
	border-radius: var(--vp-r-sm);
	white-space: normal;
}

.vp-nav--drawer .vp-nav__item--has > .vp-nav__link::before,
.vp-nav--drawer .vp-nav__item.has-sub > .vp-nav__link::before {
	display: none;
}

.vp-nav--drawer .vp-nav__sub {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	min-width: 0;
	padding: 0 0 0 var(--vpt-4);
	margin-bottom: var(--vpt-2);
	border: 0;
	border-left: 2px solid var(--vp-line);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.vp-nav--drawer .vp-nav__sub .vp-nav__link {
	font-size: .96rem;
	color: var(--vp-muted);
}

.vp-drawer__contact {
	display: flex;
	flex-direction: column;
	gap: var(--vpt-3);
	padding-top: var(--vpt-4);
	border-top: 1px solid var(--vp-line);
}

.vp-drawer__contact .vp-phone {
	width: 100%;
}

.vp-drawer__addr {
	margin: 0;
	font-size: var(--vpt-small);
	color: var(--vp-muted);
	line-height: 1.5;
}

.vp-drawer__cta {
	flex-direction: column;
	align-items: stretch;
	margin-top: auto;
}

.vp-drawer__cta .vp-btn {
	width: 100%;
}

.vp-drawer__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vpt-2);
	padding-top: var(--vpt-4);
	border-top: 1px solid var(--vp-line);
}

.vp-drawer__soc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--vp-r-sm);
	border: 1px solid var(--vp-line);
	color: var(--vp-ink-2);
	transition: border-color var(--vpt-dur) var(--vpt-ease), color var(--vpt-dur) var(--vpt-ease);
}

.vp-drawer__soc:hover {
	border-color: var(--vp-primary);
	color: var(--vp-primary);
}

.vp-drawer__soc svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}


/* ==========================================================================
   12 — KAHRAMAN   (DESIGN-V2 §6)
   Müşterinin en çok şikâyet ettiği yer. Hedef: panikteki ev müşterisi
   2 saniyede telefonu bulsun, kurumsal alıcı ciddiyeti görsün.

   Masaüstü: iki sütun, %58 metin / %42 görsel, dikey ortalı.
   100vh KULLANILMAZ; yüksekliği içerik belirler. Alt bölümün bir kısmının
   görünmesi ziyaretçiye sayfanın devam ettiğini söyler.
   ========================================================================== */

.vp-hero {
	position: relative;
	padding-block: clamp(44px, 4.6vw, 72px) clamp(52px, 5.6vw, 88px);
	background: var(--vp-bg);
	overflow: hidden;
}

/* Sağ üstte çok silik teknik ızgara, sol alta doğru sönümlenir. Sektör
   göndermesi: pano şemasının kâğıdı. Metnin okunmasını etkilemez. */
.vp-hero__grid-bg {
	position: absolute;
	top: 0;
	right: 0;
	width: min(64%, 780px);
	height: min(80%, 640px);
	background-image:
		linear-gradient(rgba(var(--vp-ink-rgb), 1) 1px, transparent 1px),
		linear-gradient(90deg, rgba(var(--vp-ink-rgb), 1) 1px, transparent 1px);
	background-size: 32px 32px;
	opacity: .05;
	-webkit-mask-image: linear-gradient(215deg, #000 8%, transparent 76%);
	mask-image: linear-gradient(215deg, #000 8%, transparent 76%);
	pointer-events: none;
}

.vp-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
}

.vp-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

/* 1) Canlı durum şeridi: yeşil nokta + "Şu an açık · 7/24" + ayraç +
   ortalama varış süresi. 13px, silik. NABIZ ANİMASYONU YOK — panikteki
   ziyaretçiye yanıp sönen nokta göstermek stresi artırıyor. */
.vp-hero__status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 var(--vpt-4);
	font-size: .8125rem;
	color: var(--vp-muted);
	line-height: 1.4;
}

.vp-hero__status-sep {
	display: inline-block;
	width: 1px;
	height: 13px;
	background: var(--vp-line-2);
	flex: 0 0 auto;
}

.vp-hero__status-note {
	color: var(--vp-ink-2);
	font-weight: 600;
}

/* 2) Başlık: en fazla iki satır hedefiyle ölçüldü. */
.vp-hero__title {
	margin: 0;
	max-width: 19ch;
	font-size: var(--vpt-h1);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.02;
	text-wrap: balance;
}

/* Son iki kelime bakır. İTALİK DEĞİL: teknik bir sektörde italik ciddiyeti
   düşürüyor, bu yüzden font-style açıkça normal'e çekiliyor (DESIGN-V2 §6). */
.vp-hero__accent {
	font-style: normal;
	color: var(--vp-copper);
}

/* 3) Tek cümle, en fazla 22 kelime, 18px. */
.vp-hero__lead {
	margin: var(--vpt-4) 0 0;
	max-width: 46ch;
	font-size: var(--vpt-lead);
	line-height: 1.55;
	color: var(--vp-ink-2);
}

/* 4) İki düğme yan yana. */
.vp-hero__cta {
	margin-top: var(--vpt-6);
	gap: var(--vpt-3);
}

/* Birincil: KOYU PETROL zemin, beyaz metin, telefon ikonu + numara.
   56px yükseklik, 17px/700. Sarı DEĞİL — sarı ikincil vurguda kalır. */
.vp-hero__call {
	min-height: 56px;
	font-size: 1.0625rem;
	font-weight: 700;
}

.vp-hero__secondary {
	min-height: 56px;
}

/* 5) Güven maddeleri: tek satır, ikon 16px + 13px metin, aralarında ince
   dikey ayraç. Madde işareti yok, alt alta liste yok. */
.vp-hero__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px var(--vpt-4);
	margin: var(--vpt-6) 0 0;
	padding: 0;
	list-style: none;
}

.vp-hero__trust-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--vp-ink-2);
	line-height: 1.3;
}

.vp-hero__trust-item + .vp-hero__trust-item::before {
	content: "";
	width: 1px;
	height: 15px;
	margin-right: var(--vpt-2);
	background: var(--vp-line-2);
	flex: 0 0 auto;
}

.vp-hero__trust-icon {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	fill: var(--vp-copper);
}

/* Mobilde hızlı talep formu kahramandan çıkar; yerine bu metin bağlantısı
   kalır (DESIGN-V2 §6 · mobil). Masaüstünde gizlidir. */
.vp-hero__callback {
	display: none;
	margin: var(--vpt-5) 0 0;
	font-size: .95rem;
	color: var(--vp-ink-2);
}

/* --- Sağ sütun -----------------------------------------------------------
   .vp-hero__art, CONTRACT §8'de sabitlenmiş addır ve sözleşme gereği
   karşılanmak zorundadır; v2 işaretlemesi aynı kabı .vp-hero__media adıyla
   üretiyor. İkisi tek kural kümesini paylaşır, böylece hangi sürüm gelirse
   gelsin kahraman doğru dizilir.
------------------------------------------------------------------------- */

.vp-hero__media,
.vp-hero__art {
	position: relative;
	min-width: 0;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Tam yükseklik fotoğraf, 4/5 oran, büyük yarıçap. */
.vp-hero__figure {
	position: relative;
	margin: 0;
	border-radius: var(--vp-r-lg);
	overflow: hidden;
	background: var(--vp-bg-3);
	box-shadow: var(--vp-sh-2);
}

.vp-hero__img {
	width: 100%;
	height: 100%;
	aspect-ratio: var(--vpt-ratio-hero);
	object-fit: cover;
	display: block;
}

.vp-hero__ph {
	--vpt-ph-ratio: var(--vpt-ratio-hero);
}

/* Hafif petrol çarpım katmanı: fotoğraf metinle aynı renk ailesinde dursun.
   Opaklık .12 — yüz ve detay kaybolmuyor, renk sıcaklığı ise oturuyor. */
.vp-hero__tint {
	position: absolute;
	inset: 0;
	background: var(--vp-primary);
	mix-blend-mode: multiply;
	opacity: .12;
	pointer-events: none;
}

/* Sağ üst köşede garanti rozeti: sarı zemin siyah metin.
   HAFİF DÖNDÜRME YOK — eğik rozet "kampanya çıkartması" gibi duruyor,
   burada satılan şey güven. */
.vp-hero__badge {
	position: absolute;
	top: var(--vpt-4);
	right: var(--vpt-4);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: min(64%, 260px);
	margin: 0;
	padding: 9px 14px;
	border-radius: var(--vp-r-sm);
	background: var(--vp-accent);
	color: var(--vp-on-accent);
	font-size: .8125rem;
	font-weight: 800;
	line-height: 1.25;
	box-shadow: var(--vp-sh-2);
	transform: none;
}

.vp-hero__badge-icon {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	fill: currentColor;
}

/* --- Fotoğrafın sol alt köşesine binen hızlı talep kartı ------------------
   Üç alanlı form: Ad, Telefon, [Hizmet seç] + "Geri arayın". Form modülü
   kapalıysa aynı kutu iki satırlık iletişim kartına dönüşür (--contact).
------------------------------------------------------------------------- */

.vp-hero__quote {
	position: relative;
	z-index: 2;
	width: min(320px, 100%);
	margin: calc(-1 * var(--vpt-7)) 0 0 calc(-1 * var(--vpt-5));
	padding: var(--vpt-4);
	border-radius: var(--vp-r);
	background: var(--vp-surface);
	border: 1px solid var(--vp-line);
	box-shadow: var(--vp-sh-3);
}

.vp-hero__quote-head {
	margin-bottom: var(--vpt-3);
}

.vp-hero__quote-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.25;
	color: var(--vp-ink);
}

.vp-hero__quote-note {
	margin: 4px 0 0;
	font-size: .78rem;
	line-height: 1.45;
	color: var(--vp-muted);
}

/* Kahraman formu dar: alanlar tek sütun, düğme tam genişlik, yükseklikler
   bir tık düşük — kart fotoğrafı ezmesin. */
.vp-hero__quote-form .vp-form__grid {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--vpt-2);
}

.vp-hero__quote-form .vp-form__f {
	grid-column: 1 / -1;
}

.vp-hero__quote-form .vp-form__label {
	font-size: .74rem;
}

.vp-hero__quote-form .vp-form__input {
	min-height: 44px;
	padding-block: 9px;
}

.vp-hero__quote-form .vp-form__actions {
	margin-top: var(--vpt-3);
}

.vp-hero__quote-form .vp-form__submit {
	width: 100%;
}

.vp-hero__quote-form .vp-form__consent-txt {
	font-size: .72rem;
}

/* Form modülü kapalıyken: telefon + WhatsApp iki satır. */
.vp-hero__quote--contact {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.vp-hero__contact-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 8px;
	border-radius: var(--vp-r-sm);
	min-height: var(--vpt-tap);
	transition: background-color var(--vpt-dur) var(--vpt-ease);
}

.vp-hero__contact-row:hover {
	background: rgba(var(--vp-primary-rgb), .07);
}

.vp-hero__contact-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	border-radius: var(--vp-r-sm);
	background: rgba(var(--vp-primary-rgb), .1);
	color: var(--vp-primary);
}

.vp-hero__contact-ico svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.vp-hero__contact-txt {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.25;
}

.vp-hero__contact-txt small {
	font-size: .7rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--vp-muted);
	font-weight: 700;
}

.vp-hero__contact-txt strong {
	font-size: .98rem;
	font-weight: 700;
	color: var(--vp-ink);
	overflow-wrap: anywhere;
}


/* ==========================================================================
   13 — GÜVEN ŞERİDİ   (DESIGN-V2 §7 · trust)
   Tam genişlik KOYU şerit, 4-5 madde, ikon üstte, aralarında ince dikey
   ayraç. Kahramandan hemen sonra gelir ve zemin tonunu değiştirerek ritmi
   kırar; iki açık bölümün arka arkaya gelmesini engeller.
   ========================================================================== */

.vp-trust {
	background: var(--vp-primary-d);
	color: rgba(255, 255, 255, .86);
	padding-block: clamp(28px, 3.4vw, 44px);
}

.vp-trust.vp-sec--alt {
	background: var(--vp-primary-d);
}

.vp-trust::before {
	display: none;
}

.vp-trust__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--vpt-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Şerit düzeni: maddeler eşit paylaşır, ortalanır. Madde sayısı 4 ya da 5
   olabildiği için sabit sütun yerine auto-fit kullanılıyor. */
.vp-trust__list--band {
	justify-items: center;
	text-align: center;
}

.vp-trust__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding-inline: var(--vpt-3);
	text-align: center;
	min-width: 0;
}

/* İnce dikey ayraç — sondaki maddeden sonra çizilmez. */
.vp-trust__item + .vp-trust__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	bottom: 8px;
	width: 1px;
	background: rgba(255, 255, 255, .16);
}

.vp-trust__icon {
	width: 44px;
	height: 44px;
	background: rgba(255, 255, 255, .08);
	color: var(--vp-accent);
}

.vp-trust__icon svg {
	width: 22px;
	height: 22px;
}

.vp-trust__txt {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.vp-trust__title {
	font-family: var(--vp-font-head);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: -.015em;
	color: #fff;
	line-height: 1.2;
}

.vp-trust__desc {
	font-size: var(--vpt-small);
	color: rgba(255, 255, 255, .62);
	line-height: 1.45;
}


/* ==========================================================================
   14 — KARTLAR
   Görsel odaklı kart dili (DESIGN-V2 §5): fotoğraf ana eleman, sabit oran,
   object-fit: cover, hover'da %3 yakınlaşma. Kartların birbirinden ayrılmasını
   BİÇİM değil İÇERİK sağlar; v1'de bütün kartlar aynı görünüyordu.
   ========================================================================== */

.vp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--vp-surface);
	border: 1px solid var(--vpt-card-line, var(--vp-line));
	border-radius: var(--vp-r);
	overflow: hidden;
	box-shadow: var(--vp-sh-1);
	transition:
		transform var(--vpt-dur) var(--vpt-ease),
		box-shadow var(--vpt-dur) var(--vpt-ease),
		border-color var(--vpt-dur) var(--vpt-ease);
}

.vp-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--vp-sh-2);
	border-color: var(--vp-line-2);
}

/* --- Kart medyası --------------------------------------------------------
   Oran kart tipinden gelir; kap her zaman aynı davranır. Sabit oran, kartlar
   satır satır hizalanırken zıplama (CLS) olmamasını sağlar.
------------------------------------------------------------------------- */

.vp-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--vp-bg-3);
	aspect-ratio: var(--vpt-card-ratio, var(--vpt-ratio-service));
	flex: 0 0 auto;
}

.vp-card__media img,
.vp-card__media .vp-media__img,
.vp-card__media .vp-ph {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--vpt-dur-slow) var(--vpt-ease-out);
}

/* Fotoğrafın altına ince koyu geçiş: üzerine binen rozet her fotoğrafta
   okunur kalsın. */
.vp-card__media::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 46%;
	background: linear-gradient(to top, rgba(var(--vpt-scrim-rgb), .5), transparent);
	opacity: 0;
	transition: opacity var(--vpt-dur) var(--vpt-ease);
	pointer-events: none;
}

.vp-card:hover .vp-card__media::after {
	opacity: 1;
}

/* Hover'da %3 yakınlaşma — DESIGN-V2 §5'in kart dilinin imzası.
   .vp-anim bayrağına bağlı: panelden hareket kapatıldığında yakınlaşma
   hiç kurulmaz. Yalnız geçiş süresini sıfırlamak yetmiyordu; süre sıfırken
   görsel bir kare içinde ZIPLAYARAK büyüyor ve daha kötü duruyordu. */
@media (hover: hover) {
	.vp-anim .vp-card:hover .vp-card__media img,
	.vp-anim .vp-card:hover .vp-card__media .vp-media__img {
		transform: scale(1.03);
	}
}

.vp-card__art {
	position: relative;
	display: block;
	overflow: hidden;
}

/* --- Kart gövdesi --------------------------------------------------------- */

.vp-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
	padding: var(--vp-pad);
	flex: 1 1 auto;
	min-width: 0;
}

.vp-card__topline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vpt-3);
	width: 100%;
	min-width: 0;
}

.vp-card__title {
	margin: 0;
	font-size: var(--vpt-h3);
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.25;
	color: var(--vp-ink);
}

/* Kart başlığındaki bağlantı tüm kartı tıklanabilir yapar (::after ile),
   ama kart içindeki diğer bağlantılar üstte kalır. */
.vp-card__title a {
	color: inherit;
	transition: color var(--vpt-dur) var(--vpt-ease);
}

.vp-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.vp-card:hover .vp-card__title a {
	color: var(--vp-primary);
}

.vp-card__text {
	margin: 0;
	font-size: .95rem;
	line-height: 1.55;
	color: var(--vp-ink-2);
}

.vp-card__tagline {
	margin: 0;
	font-size: .9rem;
	color: var(--vp-muted);
}

/* Alt künye satırı: fiyat, süre, konum, tarih. */
.vp-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vpt-2) var(--vpt-3);
	width: 100%;
	margin: auto 0 0;
	padding-top: var(--vpt-3);
	border-top: 1px solid var(--vp-line);
	list-style: none;
	font-size: var(--vpt-small);
	color: var(--vp-muted);
}

.vp-card__meta li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.vp-card__meta svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
	opacity: .7;
}

/* Fiyat: kartın en güçlü ikinci bilgisi. Bakır, sarı değil. */
.vp-card__price {
	font-family: var(--vp-font-head);
	font-size: 1.02rem;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--vp-copper);
	margin-right: auto;
}

.vp-card__price small {
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--vp-muted);
	margin-left: 4px;
}

.vp-card__dur,
.vp-card__loc,
.vp-card__date,
.vp-card__read,
.vp-card__pow,
.vp-card__eta,
.vp-card__exp {
	white-space: nowrap;
}

/* --- Hizmet kartı --------------------------------------------------------- */

.vp-card--service {
	--vpt-card-ratio: var(--vpt-ratio-service);
}

/* Acil rozeti fotoğrafın üstüne biner — ama YALNIZCA fotoğraf varsa.
   :has() olmadan yazılırsa görselsiz kartta rozet başlığın üstüne düşüyor;
   bu, önceki sürümde gerçekten yaşanan bir hataydı. */
.vp-card--service:has(.vp-card__media) .vp-badge--acil {
	position: absolute;
	top: var(--vpt-3);
	left: var(--vpt-3);
	z-index: 2;
	box-shadow: var(--vp-sh-1);
}

/* Fiyat, fotoğrafın alt-soluna binen rozet olarak da kullanılabilsin diye
   kartın kendisi konumlanma çerçevesidir (.vp-card position: relative). */
.vp-card--service .vp-card__price {
	color: var(--vp-copper);
}

/* --- Proje kartı ---------------------------------------------------------- */

.vp-card--project {
	--vpt-card-ratio: var(--vpt-ratio-project);
}

/* --- Yazı kartı ----------------------------------------------------------- */

.vp-card--post {
	--vpt-card-ratio: var(--vpt-ratio-post);
}

/* --- Bölge kartı: GÖRSEL YOK, tipografi ve etiket (DESIGN-V2 §5.3) ------- */

.vp-card--area {
	background: var(--vp-surface);
	border-left: 3px solid var(--vp-copper);
}

.vp-card--area .vp-card__title {
	font-size: 1.12rem;
}

.vp-card--area .vp-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* --- Yorum kartı: cam değil DÜZ yüzey ------------------------------------- */

.vp-card--review {
	background: var(--vp-surface);
	box-shadow: none;
}

.vp-card--review .vp-card__body {
	gap: var(--vpt-3);
}

.vp-card__by {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin-top: auto;
	padding-top: var(--vpt-3);
	border-top: 1px solid var(--vp-line);
	font-size: var(--vpt-small);
	color: var(--vp-muted);
}

.vp-card__author {
	font-weight: 700;
	color: var(--vp-ink);
}


/* --- Ekip kartı ----------------------------------------------------------- */

.vp-card--member {
	--vpt-card-ratio: 1 / 1;
	text-align: left;
}

.vp-card--member .vp-card__media img {
	object-position: center 22%;
}

.vp-card__role {
	font-size: .88rem;
	font-weight: 600;
	color: var(--vp-copper);
}

.vp-card__certs {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vp-card__cert {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border: 1px solid var(--vp-line);
	border-radius: var(--vp-r-sm);
	font-size: .72rem;
	font-weight: 600;
	color: var(--vp-muted);
}

/* --- Form kartı, kanal kartı, yazar kartı --------------------------------- */

.vp-card--form {
	box-shadow: var(--vp-sh-2);
}

.vp-card--form .vp-card__body {
	gap: var(--vpt-4);
}

.vp-card--channel {
	flex-direction: row;
	align-items: center;
	gap: var(--vpt-3);
	padding: var(--vpt-4);
	box-shadow: none;
}

.vp-card--channel .vp-card__text {
	margin: 0;
	font-size: .92rem;
}

.vp-card--channel:hover {
	transform: none;
	border-color: var(--vp-primary-l);
}

/* --- Kart durum sınıfları (süzgeç) --------------------------------------- */

.vp-card.is-hidden,
[data-vp-item].is-hidden {
	display: none;
}


/* ==========================================================================
   15 — HİZMETLER   (DESIGN-V2 §7 · services)
   3 sütun kart + kategori çipleri.
   ========================================================================== */

.vp-services {
	background: var(--vp-bg);
}

.vp-services.vp-sec--alt {
	background: var(--vp-bg-2);
}

/* Kategori çip şeridi: 640 altında yatay kaydırmaya geçer (33. bölüm). */
.vp-services__filter,
.vp-services .vp-filter {
	margin-bottom: var(--vpt-6);
}

.vp-services__grid {
	min-width: 0;
}

/* Süzgeç sonucu boşsa gösterilecek satır; theme.js data-vp-filter-status
   öğesini doldurur. */
[data-vp-filter-status] {
	margin-top: var(--vpt-4);
	text-align: center;
	font-size: .95rem;
	color: var(--vp-muted);
}

[data-vp-filter-status]:empty {
	display: none;
}


/* ==========================================================================
   16 — NEDEN BİZ   (DESIGN-V2 §7 · why)
   ASİMETRİK: solda 5/12 başlık + sayaçlar, sağda 7/12 numaralı madde
   listesi (01-04), aralarında bakır dikey çizgi. Bütün bölümleri aynı
   ızgaraya sokmak v1'in hatasıydı.
   ========================================================================== */

.vp-why {
	background: var(--vp-bg-3);
}

.vp-why.vp-sec--alt {
	background: var(--vp-bg-3);
}

.vp-why__inner {
	display: grid;
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
}

/* Asimetrik bölme: 5/12 + bakır çizgi + 7/12. Bu oran bölümün imzasıdır;
   başka hiçbir bölümde tekrarlanmaz. */
.vp-why__split {
	grid-template-columns: minmax(0, 5fr) 2px minmax(0, 7fr);
}

/* Sütunları ayıran bakır dikey çizgi. Üstte tam, altta sönümlenir: liste
   bittiğinde çizgi de bitmiş gibi dursun. */
.vp-why__rule {
	display: block;
	width: 2px;
	align-self: stretch;
	min-height: 100%;
	background: linear-gradient(180deg, var(--vp-copper), rgba(var(--vp-copper-rgb), .08));
	border-radius: 2px;
}

.vp-why__copy {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--vpt-5);
	min-width: 0;
}

/* Sol sütun masaüstünde kaydırma boyunca yerinde kalır: uzun madde
   listesinde başlığın kaybolması bağlamı koparıyor. */
@media (min-width: 1024px) {
	.vp-why__copy {
		position: sticky;
		top: calc(var(--vp-header-h) + 28px);
	}
}

.vp-why__text {
	margin: 0;
	max-width: 42ch;
	color: var(--vp-ink-2);
	font-size: var(--vpt-lead);
	line-height: 1.6;
}

.vp-why__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--vpt-4);
	padding-top: var(--vpt-5);
	border-top: 1px solid var(--vp-line-2);
}

/* Sağ sütun: numaralı madde listesi. Aradaki bakır dikey çizgi bölümün
   imzası — başka hiçbir bölümde tekrarlanmaz. */
.vp-why__list {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.vp-why__item {
	position: relative;
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr);
	align-items: start;
	gap: var(--vpt-3) var(--vpt-4);
	padding: var(--vpt-5) 0;
	border-bottom: 1px solid var(--vp-line);
}

.vp-why__item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.vp-why__item:first-child {
	padding-top: 0;
}

/* Numara iri ve silik: sıra bilgisi versin ama başlığı bastırmasın. */
.vp-why__num {
	font-family: var(--vp-font-head);
	font-size: clamp(1.6rem, 1.2rem + 1.1vw, 2.1rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.04em;
	color: var(--vp-copper);
	opacity: .42;
	font-variant-numeric: tabular-nums;
}

.vp-why__icon {
	width: 42px;
	height: 42px;
	background: rgba(var(--vp-primary-rgb), .09);
}

.vp-why__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.vp-why__title {
	display: block;
	font-family: var(--vp-font-head);
	font-size: 1.12rem;
	font-weight: 700;
	letter-spacing: -.015em;
	color: var(--vp-ink);
	line-height: 1.25;
}

.vp-why__desc {
	display: block;
	font-size: .95rem;
	line-height: 1.6;
	color: var(--vp-ink-2);
	margin: 0;
}


/* ==========================================================================
   17 — ADIMLAR / ZAMAN ÇİZELGESİ   (DESIGN-V2 §7 · steps)
   Masaüstünde YATAY zaman çizelgesi, mobilde dikey. Adım numaraları iri ve
   silik, bağlantı çizgisi kesikli — "süreç" hissi ızgaradan değil çizgiden
   gelir.
   ========================================================================== */

.vp-steps {
	background: var(--vp-bg);
}

.vp-steps__list,
.vp-timeline {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--vpt-steps, 4), minmax(0, 1fr));
	gap: var(--vp-gap);
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: vp-step;
}

/* Adım sayısı sabit sütunla gelir: 3 ya da 4. Başka sayıda auto-fit devreye
   girer, böylece 5 adımlı bir süreç de kırılmadan dizilir. */
.vp-steps--3 { --vpt-steps: 3; }
.vp-steps--4 { --vpt-steps: 4; }

.vp-steps__list:not(.vp-steps--3):not(.vp-steps--4),
.vp-timeline:not(.vp-steps--3):not(.vp-steps--4) {
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.vp-step,
.vp-timeline__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding-top: var(--vpt-6);
	min-width: 0;
}

/* Kesikli bağlantı çizgisi: her adımın üstünden geçer, sonuncuda kesilir. */
.vp-step::before,
.vp-timeline__item::before {
	content: "";
	position: absolute;
	top: 21px;
	left: 46px;
	right: calc(-1 * var(--vp-gap));
	height: 2px;
	background-image: linear-gradient(90deg, var(--vp-line-2) 0 8px, transparent 8px 16px);
	background-size: 16px 2px;
	background-repeat: repeat-x;
}

.vp-step:last-child::before,
.vp-timeline__item:last-child::before {
	display: none;
}

/* İri, silik numara. */
.vp-step__num {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--vp-surface);
	border: 2px solid var(--vp-line-2);
	color: var(--vp-copper);
	font-family: var(--vp-font-head);
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1;
	z-index: 1;
}

/* Etkin/tamamlanmış adım: petrol dolgu. theme.js is-done/is-current yazar. */
.vp-step.is-current .vp-step__num,
.vp-step.is-done .vp-step__num,
.vp-timeline__item.is-current .vp-step__num {
	background: var(--vp-primary);
	border-color: var(--vp-primary);
	color: var(--vp-on-primary);
}

.vp-step__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
}

.vp-step__icon {
	width: 40px;
	height: 40px;
	background: rgba(var(--vp-copper-rgb), .12);
	color: var(--vp-copper);
}

.vp-step__title {
	font-family: var(--vp-font-head);
	font-size: 1.08rem;
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.25;
	color: var(--vp-ink);
}

.vp-step__text {
	margin: 0;
	font-size: .93rem;
	line-height: 1.55;
	color: var(--vp-ink-2);
	max-width: 34ch;
}

/* İşaretlemede ayrı bir çizgi öğesi varsa (vp-step__line) onu kullan,
   ::before'u kapat: iki çizgi üst üste binmesin. */
.vp-step__line {
	position: absolute;
	top: 21px;
	left: 46px;
	right: calc(-1 * var(--vp-gap));
	height: 2px;
	background-image: linear-gradient(90deg, var(--vp-line-2) 0 8px, transparent 8px 16px);
	background-size: 16px 2px;
	background-repeat: repeat-x;
}

.vp-step:has(.vp-step__line)::before {
	display: none;
}

.vp-steps__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--vpt-3);
	margin-top: var(--vpt-7);
}

.vp-steps__note {
	margin: 0;
	font-size: .93rem;
	color: var(--vp-muted);
	text-align: center;
}


/* ==========================================================================
   18 — FİYAT TABLOSU   (DESIGN-V2 §7 · pricing)
   Tam genişlik tablo; vurgulu satır SOL BAKIR ŞERİT + hafif sarı zemin.
   720px altında karta dönüşür (hücrelerdeki data-label ile).
   ========================================================================== */

.vp-pricing {
	background: var(--vp-bg-2);
}

.vp-pricing__wrap {
	border: 1px solid var(--vp-line);
	border-radius: var(--vp-r-lg);
	background: var(--vp-surface);
	box-shadow: var(--vp-sh-1);
	overflow: hidden;
}

.vp-pricing__table {
	font-size: 1rem;
}

.vp-pricing__table thead th {
	background: var(--vp-bg-2);
	padding-block: 13px;
}

.vp-pricing__table thead th:last-child,
.vp-pricing__table td:last-child {
	text-align: right;
}

.vp-table__row {
	transition: background-color var(--vpt-dur) var(--vpt-ease);
}

.vp-table__row:hover {
	background: rgba(var(--vp-primary-rgb), .04);
}

/* Vurgulu satır: sol bakır şerit + çok hafif sarı zemin. Sarı burada
   ZEMİN olarak %6 opaklıkta kullanılıyor; dolu sarı satır tabloyu
   okunmaz ve ucuz gösterirdi. */
.vp-table__row.is-hl {
	background: rgba(var(--vp-accent-rgb), .07);
	box-shadow: inset 3px 0 0 var(--vp-copper);
}

.vp-table__row.is-hl:hover {
	background: rgba(var(--vp-accent-rgb), .11);
}

/* "Popüler" rozeti yalnız vurgulu satırda görünür; bakır zemin, sarı değil —
   satır zaten sarımsı, iki sarı üst üste gelince ikisi de kayboluyor. */
.vp-badge--populer {
	background: var(--vp-copper);
	color: #fff;
	margin-left: 8px;
	vertical-align: 2px;
}

.vp-table__name {
	font-weight: 700;
	color: var(--vp-ink);
	display: block;
}

.vp-table__note {
	display: block;
	margin-top: 2px;
	font-size: var(--vpt-small);
	color: var(--vp-muted);
	font-weight: 500;
}

.vp-table__price {
	font-family: var(--vp-font-head);
	font-size: 1.1rem;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--vp-ink);
	white-space: nowrap;
}

.vp-table__vat {
	display: block;
	font-size: .72rem;
	font-weight: 600;
	color: var(--vp-muted);
	white-space: nowrap;
}

.vp-pricing__note {
	margin: var(--vpt-5) 0 0;
	font-size: .92rem;
	line-height: 1.6;
	color: var(--vp-muted);
	max-width: var(--vpt-measure);
}

/* Tablo altı: not solda, eylem sağda. */
.vp-pricing__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--vpt-4);
	margin-top: var(--vpt-6);
}

.vp-pricing__cta {
	justify-content: center;
}

.vp-pricing__ctatext {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--vp-ink-2);
}


/* ==========================================================================
   19 — HESAPLAMA ARAÇLARI   (DESIGN-V2 §7 · tools)
   Sekmeli TEK kart: sol girdi / sağ sonuç. Sonuç kutusu koyu petrol zemin,
   iri tabular sayı. Ziyaretçi sonucun nerede çıkacağını hesaplamadan önce
   görsün diye kutu boşken de duruyor.
   ========================================================================== */

.vp-tools {
	background: var(--vp-bg);
}

.vp-tool__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vpt-2);
	justify-content: center;
	margin-bottom: var(--vpt-5);
}

.vp-tools__panels {
	position: relative;
}

.vp-tool {
	display: none;
	border: 1px solid var(--vp-line);
	border-radius: var(--vp-r-lg);
	background: var(--vp-surface);
	box-shadow: var(--vp-sh-1);
	overflow: hidden;
}

.vp-tool.is-on,
.vp-tool.is-active {
	display: block;
}

.vp-tool__head {
	display: flex;
	align-items: center;
	gap: var(--vpt-3);
	padding: var(--vp-pad);
	border-bottom: 1px solid var(--vp-line);
	background: var(--vp-surface-2);
}

.vp-tool__icon {
	width: 46px;
	height: 46px;
}

.vp-tool__heading {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.vp-tool__title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--vp-ink);
}

.vp-tool__desc {
	margin: 0;
	font-size: .9rem;
	color: var(--vp-muted);
	line-height: 1.5;
}

/* İki sütun: sol girdi, sağ sonuç. */
.vp-tool__body {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: 0;
	align-items: stretch;
}

.vp-tool__fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--vpt-4);
	padding: var(--vp-pad);
	align-content: start;
}

.vp-tool__rows {
	display: flex;
	flex-direction: column;
	gap: var(--vpt-3);
	grid-column: 1 / -1;
}

.vp-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.vp-field__label {
	font-size: .85rem;
	font-weight: 700;
	color: var(--vp-ink-2);
}

.vp-field__control {
	position: relative;
	display: flex;
	align-items: center;
	min-width: 0;
}

.vp-field__control .vp-input,
.vp-field__control .vp-select {
	width: 100%;
}

/* Birim eki (m, A, kW): kutunun içinde sağda durur, girdiyi daraltır. */
.vp-field__suffix {
	position: absolute;
	right: 12px;
	pointer-events: none;
	font-size: .85rem;
	font-weight: 700;
	color: var(--vp-muted);
}

.vp-field:has(.vp-field__suffix) .vp-input {
	padding-right: 52px;
}

/* Sağ sütun kabı: sonuç kutusunu ve altındaki notu taşır. */
.vp-tool__side {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Sonuç kutusu: koyu petrol. Kartın içinde ayrı bir "cihaz ekranı" gibi. */
.vp-tool__result {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--vpt-3);
	padding: var(--vp-pad);
	background: var(--vp-primary-d);
	color: rgba(255, 255, 255, .82);
	border-left: 1px solid var(--vp-line);
}

.vp-tool__result-title {
	display: block;
	margin-bottom: var(--vpt-2);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
}

.vp-tool__out {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-bottom: var(--vpt-3);
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.vp-tool__out:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.vp-tool__out-lbl {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}

/* Sonucun kendisi: iri, tabular, SARI. Sarı bütçesinin dördüncü ve son
   harcama kalemi burasıdır (DESIGN-V2 §2). */
.vp-tool__out-val {
	font-family: var(--vp-font-head);
	font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.4rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.03em;
	color: var(--vp-accent);
	overflow-wrap: anywhere;
}

/* Yalnız BAŞ sonuç iri ve sarıdır; kalanlar sakin. Hiyerarşi tek vurguyla
   korunur, sarı bütçesi bir kutuda tükenmez. */
.vp-tool__out:not(.vp-tool__out--lead) .vp-tool__out-val {
	font-size: 1.25rem;
	color: #fff;
}

/* Uyarı durumu (ör. kesit yetersiz): tools.js is-warn yazar. */
.vp-tool__result.is-warn {
	background: var(--vp-danger);
}

.vp-tool__result.is-warn .vp-tool__out-val {
	color: #fff;
}

.vp-tool__result.is-ready .vp-tool__out-val {
	transition: color var(--vpt-dur) var(--vpt-ease);
}

/* Hesaplama sürerken: sonuç silikleşir, "yanlış sayıyı okuma" riski azalır. */
.vp-tool__result.is-busy {
	opacity: .72;
}

.vp-tool__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vpt-3);
	padding: var(--vp-pad);
	border-top: 1px solid var(--vp-line);
	background: var(--vp-surface-2);
}

.vp-tool__note {
	margin: 0;
	font-size: var(--vpt-small);
	color: var(--vp-muted);
	line-height: 1.55;
	flex: 1 1 260px;
}

/* Betik yokken görünen açıklama; theme.js yüklenince gizlenir. */
.vp-tool__nojs {
	margin: 0;
	padding: var(--vpt-3) var(--vp-pad);
	background: rgba(var(--vp-accent-rgb), .12);
	color: var(--vp-ink-2);
	font-size: var(--vpt-small);
}

.vp-js .vp-tool__nojs {
	display: none;
}

.vp-tools__note {
	margin: var(--vpt-5) auto 0;
	max-width: var(--vpt-measure);
	text-align: center;
	font-size: .9rem;
	color: var(--vp-muted);
}

.vp-tools__cta {
	justify-content: center;
	margin-top: var(--vpt-5);
}

/* Araç sayfasındaki tekil kart (templates/page-araclar.php). */
.vp-calc {
	display: grid;
	gap: var(--vp-gap);
}


/* ==========================================================================
   20 — PROJELER (BENTO)   (DESIGN-V2 §7 · projects)
   İlk proje 2 sütun × 2 satır büyük fotoğraf, kalan dördü tekil. Üzerine
   gelince künye alttan kayarak gelir. Eşit kutulu ızgara "portföy" değil
   "katalog" gibi duruyordu.
   ========================================================================== */

.vp-projects {
	background: var(--vp-bg-2);
}

.vp-bento,
.vp-projects__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: minmax(180px, auto);
	gap: var(--vp-gap);
}

/* Bölümün üst satırı: başlık solda, "tümü" bağlantısı sağda. */
.vp-projects__top,
.vp-services__top,
.vp-reviews__top {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--vpt-4);
	margin-bottom: var(--vpt-6);
}

.vp-projects__top .vp-head,
.vp-services__top .vp-head,
.vp-reviews__top .vp-head {
	margin-bottom: 0;
}

/* Hücre hem ızgara birimi hem karttır (işaretleme: article.vp-bento__cell
   .vp-card .vp-card--project). Bu yüzden kart kuralları burada geçerli. */
.vp-bento__cell {
	position: relative;
	min-width: 0;
	overflow: hidden;
}

/* Öne çıkan hücre: 2 sütun × 2 satır. --lead v2 adı, --wide eski ad. */
.vp-bento__cell--lead,
.vp-bento__cell--wide {
	grid-column: span 2;
	grid-row: span 2;
}

/* Tüm hücre tek bir bağlantıdır: kartın her yeri tıklanabilir. */
.vp-bento__link {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	color: inherit;
}

.vp-bento__media {
	position: relative;
	flex: 1 1 auto;
	min-height: 190px;
	overflow: hidden;
	background: var(--vp-bg-3);
}

.vp-bento__media img,
.vp-bento__media .vp-media__img,
.vp-bento__media .vp-ph {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--vpt-dur-slow) var(--vpt-ease-out);
}

.vp-bento__media .vp-ph {
	aspect-ratio: auto;
	height: 100%;
}

@media (hover: hover) {
	.vp-anim .vp-bento__cell:hover .vp-bento__media img {
		transform: scale(1.03);
	}
}

.vp-bento__cell--lead .vp-bento__media,
.vp-bento__cell--wide .vp-bento__media {
	min-height: 300px;
}

/* Künye kutusu: fotoğrafın üstünde koyu geçiş. Masaüstünde alttan kayarak
   gelir; dokunmatikte ve dar ekranda hep görünür — hover'a bağlı gizlenen
   bilgi telefonda hiç okunmuyor. */
.vp-bento__info {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: var(--vpt-5) var(--vp-pad) var(--vpt-4);
	background: linear-gradient(to top, rgba(var(--vpt-scrim-rgb), .94) 12%, rgba(var(--vpt-scrim-rgb), .55) 62%, rgba(var(--vpt-scrim-rgb), 0));
	color: #fff;
}

.vp-bento__title {
	margin: 0;
	font-size: var(--vpt-h3);
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.22;
	color: #fff;
	text-wrap: balance;
}

.vp-bento__cell--lead .vp-bento__title,
.vp-bento__cell--wide .vp-bento__title {
	font-size: clamp(1.25rem, 1.05rem + .8vw, 1.7rem);
}

.vp-bento__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px var(--vpt-3);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--vpt-small);
	color: rgba(255, 255, 255, .78);
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height var(--vpt-dur-slow) var(--vpt-ease-out), opacity var(--vpt-dur) var(--vpt-ease);
}

.vp-bento__meta li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.vp-bento__meta svg {
	width: 14px;
	height: 14px;
	fill: var(--vp-accent);
	flex: 0 0 auto;
}

/* Üzerine gelince künye alttan kayarak gelir. */
.vp-bento__cell:hover .vp-bento__meta,
.vp-bento__cell:focus-within .vp-bento__meta {
	max-height: 120px;
	opacity: 1;
}

.vp-bento__cell .vp-badge--cat {
	align-self: flex-start;
	background: rgba(255, 255, 255, .16);
	color: #fff;
	box-shadow: none;
}

/* Dokunmatikte "üzerine gelme" diye bir şey yok: künye baştan açık gelir.
   Hover'a bağlı gizlenen bilgi telefonda hiç okunmuyor. */
@media (hover: none) {
	.vp-bento__meta {
		max-height: 140px;
		opacity: 1;
	}
}

/* Hücreye giden bağlantı odak alınca kartın tamamı işaretlensin. */
.vp-bento__link:focus-visible {
	outline: 3px solid var(--vp-accent);
	outline-offset: -3px;
}


/* ==========================================================================
   21 — BÖLGELER   (DESIGN-V2 §7 · areas)
   Sol 5/12 kısa metin + toplam kapsama, sağ 7/12 ilçe kartları.
   Bölge kartlarında fotoğraf yoktur; ayrım tipografi ve etiketle kurulur.
   ========================================================================== */

.vp-areas {
	background: var(--vp-bg);
}

.vp-areas__inner {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

.vp-areas__copy,
.vp-areas__summary {
	display: flex;
	flex-direction: column;
	gap: var(--vpt-4);
	min-width: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--vp-ink-2);
}

.vp-areas__copy strong,
.vp-areas__summary strong {
	color: var(--vp-ink);
}

/* Sol sütundaki toplam kapsama sayıları. */
.vp-areas__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--vpt-4);
	padding-top: var(--vpt-4);
	border-top: 1px solid var(--vp-line);
}

/* Masaüstünde sol sütun yerinde kalır: ilçe listesi uzun. */
@media (min-width: 1024px) {
	.vp-areas__copy {
		position: sticky;
		top: calc(var(--vp-header-h) + 28px);
	}
}

/* İlçe kartları: iki sütun. Kart sayısı değişken olduğu için auto-fit. */
.vp-areas__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--vp-gap);
	min-width: 0;
	align-content: start;
}


/* ==========================================================================
   22 — YORUMLAR   (DESIGN-V2 §7 · reviews)
   KOYU zemin, yatay kaydırmalı şerit, kartlar cam değil düz yüzey.
   Koyu zemin ritmi kırar ve yorumları "sayfanın içindeki ayrı oda" yapar.
   ========================================================================== */

.vp-reviews {
	background: var(--vp-primary-d);
	color: rgba(255, 255, 255, .84);
	--vp-ink: #FFFFFF;
	--vp-ink-2: rgba(255, 255, 255, .8);
	--vp-muted: rgba(255, 255, 255, .58);
	--vp-line: rgba(255, 255, 255, .14);
	--vp-line-2: rgba(255, 255, 255, .24);
	--vp-surface: rgba(255, 255, 255, .06);
}

.vp-reviews.vp-sec--alt {
	background: var(--vp-primary-d);
}

.vp-reviews .vp-head__title,
.vp-reviews .vp-head__kicker {
	color: #fff;
}

.vp-reviews .vp-head__kicker {
	color: var(--vp-accent);
}

.vp-reviews__score {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: var(--vpt-3);
	margin-bottom: var(--vpt-6);
}

.vp-reviews__stars {
	display: inline-flex;
	align-items: center;
}

.vp-reviews__avg {
	font-family: var(--vp-font-head);
	font-size: 2rem;
	font-weight: 800;
	letter-spacing: -.03em;
	color: #fff;
	line-height: 1;
}

.vp-reviews__count {
	font-size: var(--vpt-small);
	color: rgba(255, 255, 255, .6);
}

/* Yatay kaydırmalı şerit: scroll-snap + gizli çubuk + klavye erişimi
   (DESIGN-V2 §8). tabindex theme.js tarafından veriliyor. */
.vp-reviews__strip {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(288px, 1fr);
	gap: var(--vp-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--vpt-3);
	padding-bottom: var(--vpt-3);
	scrollbar-width: none;
}

.vp-reviews__strip::-webkit-scrollbar {
	display: none;
}

.vp-reviews__strip > * {
	scroll-snap-align: start;
}

.vp-reviews .vp-card--review {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .12);
	box-shadow: none;
}

.vp-reviews .vp-card--review:hover {
	transform: none;
	border-color: rgba(255, 255, 255, .24);
	background: rgba(255, 255, 255, .09);
}

.vp-reviews .vp-quote {
	color: rgba(255, 255, 255, .88);
}

.vp-reviews .vp-quote::before {
	color: var(--vp-copper);
	opacity: .9;
}


/* ==========================================================================
   23 — SSS   (DESIGN-V2 §7 · faq)
   İki sütun akordiyon (masaüstü), tek (mobil). <details> tabanlı: betik
   yüklenmese de açılıp kapanır.
   ========================================================================== */

.vp-faq {
	background: var(--vp-bg);
}

/* İki sütun akordiyon (masaüstü), tek sütun (mobil). Sütunlar CSS columns
   ile değil ızgarayla kuruldu: columns kullanıldığında açılan bir soru
   diğer sütuna atlıyor ve okuyucunun yerini kaybediyordu. */
.vp-faq__cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--vp-gap);
	align-items: start;
}

.vp-faq__col {
	min-width: 0;
}

.vp-acc {
	display: flex;
	flex-direction: column;
	gap: var(--vpt-3);
}

.vp-acc__item {
	display: block;
	border: 1px solid var(--vp-line);
	border-radius: var(--vp-r);
	background: var(--vp-surface);
	overflow: hidden;
	transition: border-color var(--vpt-dur) var(--vpt-ease), box-shadow var(--vpt-dur) var(--vpt-ease);
}

.vp-acc__item[open] {
	border-color: var(--vp-line-2);
	box-shadow: var(--vp-sh-1);
}

.vp-acc__q {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--vpt-3);
	padding: var(--vpt-4) var(--vpt-5);
	font-family: var(--vp-font-head);
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.35;
	color: var(--vp-ink);
	cursor: pointer;
	list-style: none;
	min-height: var(--vpt-tap);
}

/* Yerel ok işareti kaldırılır; kendi artı/eksi işaretimizi çiziyoruz. */
.vp-acc__q::-webkit-details-marker {
	display: none;
}

.vp-acc__q::after {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	margin-top: 5px;
	background:
		linear-gradient(var(--vp-copper), var(--vp-copper)) center / 14px 2px no-repeat,
		linear-gradient(var(--vp-copper), var(--vp-copper)) center / 2px 14px no-repeat;
	transition: transform var(--vpt-dur) var(--vpt-ease);
}

.vp-acc__item[open] .vp-acc__q::after {
	transform: rotate(90deg);
	background:
		linear-gradient(var(--vp-copper), var(--vp-copper)) center / 14px 2px no-repeat;
}

.vp-acc__q:hover {
	color: var(--vp-primary);
}

/* Soru metni ve grup etiketi tek satırda yan yana durur; etiket sağda,
   sorunun uzunluğundan bağımsız. */
.vp-acc__qtext {
	flex: 1 1 auto;
	min-width: 0;
}

.vp-acc__group {
	flex: 0 0 auto;
	align-self: center;
	padding: 2px 8px;
	border-radius: var(--vp-r-pill);
	background: var(--vp-bg-2);
	color: var(--vp-muted);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.vp-acc__a {
	padding: 0 var(--vpt-5) var(--vpt-5);
	font-size: .97rem;
	line-height: 1.65;
	color: var(--vp-ink-2);
	max-width: var(--vpt-measure);
}

.vp-acc__a > :last-child {
	margin-bottom: 0;
}

.vp-faq__more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--vpt-3);
	margin-top: var(--vpt-6);
	text-align: center;
}

.vp-faq__moretext {
	margin: 0;
	color: var(--vp-muted);
	font-size: .95rem;
}


/* ==========================================================================
   24 — HAREKETE GEÇİRME ŞERİDİ   (DESIGN-V2 §7 · cta)
   Tam genişlik FOTOĞRAF ÜZERİ koyu katman; iri başlık, telefon numarası
   32px. Sayfanın en yüksek kontrastlı anıdır; bu yüzden sayfada bir kez
   (en fazla iki kez) kullanılır.
   ========================================================================== */

.vp-cta {
	position: relative;
	isolation: isolate;
	background: var(--vp-primary-d);
	color: rgba(255, 255, 255, .86);
	overflow: hidden;
}

.vp-cta::before {
	display: none;
}

.vp-cta__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.vp-cta__bg img,
.vp-cta__bg .vp-media__img,
.vp-cta__bg .vp-ph {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Koyu katman: fotoğraf ne olursa olsun metin 7:1 üzerinde okunur kalsın.
   Tek renk yerine iki duraklı geçiş: fotoğrafın dokusu tamamen kaybolmuyor. */
.vp-cta__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(100deg, rgba(var(--vpt-scrim-rgb), .94) 0%, rgba(var(--vpt-scrim-rgb), .82) 46%, rgba(var(--vpt-scrim-rgb), .62) 100%);
}

.vp-cta__inner {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(24px, 3.5vw, 56px);
}

.vp-cta__copy {
	flex: 1 1 460px;
	min-width: 0;
}

.vp-cta__kicker {
	display: inline-block;
	margin-bottom: var(--vpt-3);
	font-size: var(--vpt-kicker);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--vp-accent);
}

.vp-cta__title {
	margin: 0;
	max-width: 20ch;
	font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.9rem);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.06;
	color: #fff;
	text-wrap: balance;
}

.vp-cta__text {
	margin: var(--vpt-4) 0 0;
	max-width: 52ch;
	font-size: var(--vpt-lead);
	line-height: 1.55;
	color: rgba(255, 255, 255, .78);
}

.vp-cta__brand {
	margin: var(--vpt-3) 0 0;
	font-size: var(--vpt-small);
	color: rgba(255, 255, 255, .6);
}

.vp-cta__btns,
.vp-cta__actions {
	margin-top: var(--vpt-6);
}

/* Telefon bloğu: numara 32px. Ziyaretçi numarayı okuyup başka cihazdan
   arayabilsin diye açıkça yazılır; yalnız "Ara" düğmesi bu kişiyi kaybeder. */
.vp-cta__phone {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	flex: 0 0 auto;
	padding: var(--vpt-4) var(--vpt-5);
	border-radius: var(--vp-r);
	border: 1.5px solid rgba(255, 255, 255, .22);
	background: rgba(255, 255, 255, .06);
	transition: border-color var(--vpt-dur) var(--vpt-ease), background-color var(--vpt-dur) var(--vpt-ease);
}

.vp-cta__phone:hover {
	border-color: var(--vp-accent);
	background: rgba(var(--vp-accent-rgb), .12);
}

.vp-cta__phone-lbl {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .58);
}

.vp-cta__phone-num {
	font-family: var(--vp-font-head);
	font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.1;
	color: #fff;
	white-space: nowrap;
}

.vp-cta__phone:hover .vp-cta__phone-num {
	color: var(--vp-accent);
}


/* ==========================================================================
   25 — BLOG   (DESIGN-V2 §7 · blog)
   1 büyük + 2 küçük yazı düzeni. Eşit üç kart "haber sitesi" gibi duruyordu.
   ========================================================================== */

.vp-blog {
	background: var(--vp-bg);
}

.vp-blog__grid {
	min-width: 0;
}

/* İlk yazı iki sütun kaplar ve yatay karta döner: giriş yazısı vitrindir. */
@media (min-width: 900px) {
	.vp-blog__grid > .vp-card:first-child {
		grid-column: span 2;
		flex-direction: row;
		align-items: stretch;
	}

	.vp-blog__grid > .vp-card:first-child .vp-card__media {
		flex: 0 0 46%;
		aspect-ratio: auto;
	}

	.vp-blog__grid > .vp-card:first-child .vp-card__title {
		font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem);
	}
}


/* ==========================================================================
   26 — İLETİŞİM   (DESIGN-V2 §7 · contact)
   Üstte çalışma saatleri şeridi, altında sol harita/iletişim + sağ form.
   ========================================================================== */

.vp-contact {
	background: var(--vp-bg-2);
}

/* --- Çalışma saatleri şeridi --------------------------------------------- */

.vp-contact__hours {
	margin-bottom: var(--vpt-7);
}

.vp-contact__hours--band {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: clamp(20px, 3vw, 44px);
	align-items: center;
	padding: var(--vp-pad);
	border: 1px solid var(--vp-line);
	border-radius: var(--vp-r-lg);
	background: var(--vp-surface);
}

.vp-contact__hourshead {
	display: flex;
	flex-direction: column;
	gap: var(--vpt-2);
	align-items: flex-start;
	min-width: 0;
}

.vp-contact__subtitle {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--vp-ink);
}

.vp-contact__hourstable {
	font-size: .95rem;
}

.vp-contact__hourstable td,
.vp-contact__hourstable th {
	padding: 8px 10px;
}

.vp-contact__hourstable td:last-child {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Bugünün satırı: hafif petrol zemin + sol bakır şerit. Ziyaretçi kendi
   gününü aramak zorunda kalmasın. */
.vp-contact__hourstable .is-today {
	background: rgba(var(--vp-primary-rgb), .06);
	box-shadow: inset 2px 0 0 var(--vp-copper);
	font-weight: 700;
	color: var(--vp-ink);
}

.vp-contact__hourstext {
	margin: 0;
	font-size: .95rem;
	color: var(--vp-ink-2);
}

.vp-contact__hoursnote {
	margin: var(--vpt-2) 0 0;
	font-size: var(--vpt-small);
	color: var(--vp-muted);
	line-height: 1.5;
}

/* --- İki sütun ------------------------------------------------------------ */

.vp-contact__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(24px, 3.4vw, 52px);
	align-items: start;
}

.vp-contact__info,
.vp-contact__form {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--vpt-5);
}

/* Harita / şehir görseli: 16/10, kırpılmış, yumuşak köşeli. */
.vp-contact__map {
	position: relative;
	overflow: hidden;
	border-radius: var(--vp-r);
	border: 1px solid var(--vp-line);
	background: var(--vp-bg-3);
	aspect-ratio: 16 / 10;
}

.vp-contact__map img,
.vp-contact__map iframe,
.vp-contact__map .vp-ph {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
	display: block;
}

.vp-contact__list {
	display: flex;
	flex-direction: column;
	gap: var(--vpt-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.vp-contact__item {
	display: flex;
	align-items: flex-start;
	gap: var(--vpt-3);
	min-width: 0;
}

.vp-contact__txt {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.vp-contact__txt small {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--vp-muted);
}

.vp-contact__txt strong,
.vp-contact__txt a {
	font-size: 1rem;
	font-weight: 700;
	color: var(--vp-ink);
}

.vp-contact__txt a:hover {
	color: var(--vp-primary);
}

.vp-contact__formnote {
	margin: 0;
	font-size: var(--vpt-small);
	color: var(--vp-muted);
	line-height: 1.55;
}

/* Form modülü kapalıysa: üç iletişim kanalı kartı. */
.vp-contact__fallback {
	display: grid;
	gap: var(--vpt-3);
}


/* ==========================================================================
   27 — FORM AİLESİ (.vp-form*)
   İşaretlemeyi panelin Formlar modülü üretir (BGP_Forms::render_form).
   Tema yalnız görünüm verir; alan adları, doğrulama ve durum sınıfları
   modülün sözleşmesidir.
   ========================================================================== */

.vp-form {
	display: flex;
	flex-direction: column;
	gap: var(--vpt-4);
	min-width: 0;
}

.vp-form__title {
	margin: 0 0 var(--vpt-3);
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--vp-ink);
}

/* Alan ızgarası: 12 sütun. "half" 6, "third" 4 sütun kaplar; dar ekranda
   hepsi tek sütuna iner (33. bölüm). */
.vp-form__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--vpt-4) var(--vpt-3);
}

.vp-form__f {
	display: flex;
	flex-direction: column;
	gap: 6px;
	grid-column: span 12;
	min-width: 0;
}

.vp-form__f--full { grid-column: span 12; }
.vp-form__f--half { grid-column: span 6; }
.vp-form__f--third { grid-column: span 4; }

/* Ara başlık alanı: veri taşımaz, formu bölümlere ayırır. */
.vp-form__f--heading {
	gap: 2px;
	margin-top: var(--vpt-2);
	padding-top: var(--vpt-4);
	border-top: 1px solid var(--vp-line);
}

.vp-form__heading {
	margin: 0;
	font-size: 1.02rem;
	font-weight: 800;
	letter-spacing: -.015em;
	color: var(--vp-ink);
}

.vp-form__note {
	margin: 0;
	font-size: var(--vpt-small);
	color: var(--vp-muted);
}

.vp-form__label {
	font-size: .82rem;
	font-weight: 700;
	color: var(--vp-ink-2);
	line-height: 1.35;
}

/* Zorunluluk yıldızı: kırmızı ve okunur. Yalnız renkle anlatmıyoruz —
   alanda ayrıca required + aria-required var. */
.vp-form__req {
	margin-left: 3px;
	color: var(--vp-danger);
	font-weight: 700;
}

/* Zorunlu alan (modül "is-required" yazar): etiket bir tık koyulaşır.
   Yıldız tek başına yeterli sayılmıyor — küçük ekranda gözden kaçıyor. */
.vp-form__f.is-required > .vp-form__label {
	color: var(--vp-ink);
}

.vp-form__input {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1.5px solid var(--vp-line-2);
	border-radius: var(--vp-r-sm);
	background: var(--vp-surface);
	color: var(--vp-ink);
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color var(--vpt-dur) var(--vpt-ease), box-shadow var(--vpt-dur) var(--vpt-ease);
}

.vp-form__input:hover {
	border-color: var(--vp-primary-l);
}

.vp-form__input:focus {
	outline: none;
	border-color: var(--vp-primary);
	box-shadow: var(--vp-ring);
}

.vp-form__input::placeholder {
	color: var(--vp-muted);
	opacity: 1;
}

.vp-form__input--textarea {
	min-height: 132px;
	resize: vertical;
	line-height: 1.55;
}

.vp-form__select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 40px;
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position:
		calc(100% - 20px) calc(50% + 1px),
		calc(100% - 14px) calc(50% + 1px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

/* Dosya alanı: yerel düğme her tarayıcıda farklı görünüyor, kabı biz
   çiziyoruz. */
.vp-form__file {
	padding: 9px 12px;
	font-size: .92rem;
	background: var(--vp-surface-2);
	cursor: pointer;
}

.vp-form__file::file-selector-button {
	margin-right: 12px;
	padding: 8px 14px;
	border: 0;
	border-radius: var(--vp-r-sm);
	background: var(--vp-primary);
	color: var(--vp-on-primary);
	font-weight: 700;
	font-size: .88rem;
	cursor: pointer;
}

/* --- Seçenekler (radyo / onay kutusu) ------------------------------------ */

.vp-form__opts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vpt-2);
}

.vp-form__opt {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: var(--vpt-tap);
	padding: 9px 14px;
	border: 1.5px solid var(--vp-line);
	border-radius: var(--vp-r-sm);
	background: var(--vp-surface);
	cursor: pointer;
	font-size: .95rem;
	transition: border-color var(--vpt-dur) var(--vpt-ease), background-color var(--vpt-dur) var(--vpt-ease);
}

.vp-form__opt:hover {
	border-color: var(--vp-primary-l);
}

.vp-form__opt input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

/* Kendi kutumuz: yerel denetim boyutu ve rengi işletim sistemine göre
   değişiyor, tasarım tutarlılığı bozuluyordu. */
.vp-form__opt-box {
	position: relative;
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	border: 2px solid var(--vp-line-2);
	border-radius: 5px;
	background: var(--vp-surface);
	transition: border-color var(--vpt-dur) var(--vpt-ease), background-color var(--vpt-dur) var(--vpt-ease);
}

.vp-form__opt input[type="radio"] + .vp-form__opt-box {
	border-radius: 50%;
}

.vp-form__opt-box::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 6px;
	height: 11px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(.4);
	opacity: 0;
	transition: opacity var(--vpt-dur) var(--vpt-ease), transform var(--vpt-dur) var(--vpt-ease);
}

.vp-form__opt input:checked + .vp-form__opt-box {
	border-color: var(--vp-primary);
	background: var(--vp-primary);
}

.vp-form__opt input:checked + .vp-form__opt-box::after {
	opacity: 1;
	transform: rotate(45deg) scale(1);
}

.vp-form__opt input[type="radio"]:checked + .vp-form__opt-box::after {
	left: 4px;
	top: 4px;
	width: 8px;
	height: 8px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	transform: none;
}

/* Klavye odağı gizli girdide olduğu için halkayı kutu taşır. */
.vp-form__opt input:focus-visible + .vp-form__opt-box {
	outline: 3px solid var(--vp-primary);
	outline-offset: 2px;
}

.vp-form__opt-txt {
	min-width: 0;
}

.vp-form__opt--single {
	border: 0;
	background: transparent;
	padding-inline: 0;
}

/* --- KVKK onayı ----------------------------------------------------------- */

.vp-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-size: .88rem;
	line-height: 1.5;
	color: var(--vp-ink-2);
}

.vp-form__consent-box {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	margin-top: 2px;
	accent-color: var(--vp-primary);
}

.vp-form__consent-txt a {
	color: var(--vp-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* --- Bal küpü -------------------------------------------------------------
   display:none DEĞİL. Bazı botlar display:none alanları atlıyor; ekran
   dışına taşımak tuzağın çalışmasını sürdürüyor, ekran okuyucu ise
   aria-hidden sayesinde alanı hiç duyurmuyor.
------------------------------------------------------------------------- */

.vp-form__hp {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Hata ve yardım ------------------------------------------------------- */

.vp-form__help {
	font-size: .78rem;
	color: var(--vp-muted);
	line-height: 1.45;
}

.vp-form__err {
	font-size: .78rem;
	font-weight: 600;
	color: var(--vp-danger);
	line-height: 1.4;
}

.vp-form__err:empty {
	display: none;
}

/* Hatalı alan: kenarlık kırmızı + hafif kırmızı zemin. Yalnız renkle
   anlatılmıyor, hata METNİ de alanın altında yazıyor. */
.vp-form__f.has-error .vp-form__input,
.vp-form__f.has-err .vp-form__input,
.vp-form__f.is-err .vp-form__input {
	border-color: var(--vp-danger);
	background: rgba(var(--vp-danger-rgb), .04);
}

.vp-form__f.has-error .vp-form__label,
.vp-form__f.has-err .vp-form__label {
	color: var(--vp-danger);
}

.vp-form__f.is-ok .vp-form__input {
	border-color: var(--vp-ok);
}

/* --- Eylemler ve durum ---------------------------------------------------- */

.vp-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vpt-3);
}

.vp-form__submit {
	min-width: 180px;
}

/* Gönderim sürüyor: form silikleşir ve tıklanamaz olur. */
.vp-form--busy,
.vp-form.is-sending,
.vp-form.is-busy {
	opacity: .72;
	pointer-events: none;
}

/* Düğme içindeki dönen halka. */
.vp-form__spin {
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-right: 8px;
	border: 2px solid rgba(255, 255, 255, .35);
	border-top-color: #fff;
	border-radius: 50%;
	vertical-align: -2px;
	animation: vp-spin .7s linear infinite;
}

@keyframes vp-spin {
	to { transform: rotate(360deg); }
}

/* Sunucu yanıtı kutusu. */
.vp-form__msg {
	padding: 0;
	border-radius: var(--vp-r-sm);
	font-size: .95rem;
	line-height: 1.55;
}

.vp-form__msg:not(:empty) {
	padding: var(--vpt-3) var(--vpt-4);
}

.vp-form__msg--ok {
	background: rgba(12, 122, 87, .1);
	color: var(--vp-ok);
	border: 1px solid rgba(12, 122, 87, .28);
}

.vp-form__msg--err {
	background: rgba(var(--vp-danger-rgb), .08);
	color: var(--vp-danger);
	border: 1px solid rgba(var(--vp-danger-rgb), .28);
}

.vp-form__msg p {
	margin: 0;
}

.vp-form__wa {
	margin-top: var(--vpt-3);
}

/* Gönderim başarılı: alanlar geri plana çekilir, mesaj öne çıkar. */
.vp-form--sent .vp-form__grid,
.vp-form.is-sent .vp-form__grid {
	opacity: .5;
}

.vp-form--sent .vp-form__msg,
.vp-form.is-sent .vp-form__msg {
	order: -1;
}

/* Kahraman içindeki hızlı form (--quick) daha sıkı dizilir. */
.vp-form--quick {
	gap: var(--vpt-3);
}

/* Satır kabı: bazı formlar alanları satır satır veriyor. */
.vp-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vpt-3);
}


/* ==========================================================================
   28 — ALT BİLGİ
   ========================================================================== */

.vp-footer {
	background: var(--vp-primary-d);
	color: rgba(255, 255, 255, .72);
	padding-top: var(--vp-space);
	font-size: .95rem;
	--vp-line: rgba(255, 255, 255, .14);
}

.vp-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 48px);
	padding-bottom: var(--vpt-7);
}

.vp-footer__col {
	display: flex;
	flex-direction: column;
	gap: var(--vpt-3);
	min-width: 0;
}

.vp-footer__col--brand {
	max-width: 42ch;
}

.vp-footer__about {
	margin: 0;
	line-height: 1.65;
	color: rgba(255, 255, 255, .66);
}

.vp-footer__title {
	margin: 0 0 4px;
	font-family: var(--vp-font-head);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--vp-accent);
}

.vp-footer__list,
.vp-footer__links {
	display: flex;
	flex-direction: column;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vp-footer__item,
.vp-footer__linkitem {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.vp-footer__item svg,
.vp-footer__linkitem svg {
	width: 16px;
	height: 16px;
	margin-top: 3px;
	flex: 0 0 auto;
	fill: var(--vp-copper);
}

.vp-footer a {
	color: rgba(255, 255, 255, .78);
	transition: color var(--vpt-dur) var(--vpt-ease);
}

.vp-footer a:hover {
	color: var(--vp-accent);
}

/* Alt bilgi menüleri ana menü biçimini almaz; sade liste olarak dizilir. */
.vp-nav--footer .vp-nav__list,
.vp-nav--legal .vp-nav__list {
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.vp-nav--footer .vp-nav__link,
.vp-nav--legal .vp-nav__link {
	padding: 4px 0;
	font-weight: 500;
	color: rgba(255, 255, 255, .78);
	white-space: normal;
}

.vp-nav--footer .vp-nav__link:hover,
.vp-nav--legal .vp-nav__link:hover {
	background: transparent;
	color: var(--vp-accent);
}

.vp-nav--legal .vp-nav__list {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--vpt-3);
}

.vp-footer__map {
	margin-top: var(--vpt-3);
	border-radius: var(--vp-r-sm);
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .14);
	aspect-ratio: 16 / 9;
}

.vp-footer__map img,
.vp-footer__map iframe {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
	display: block;
}

.vp-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vpt-2);
	margin-top: var(--vpt-2);
}

.vp-footer__soc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--vp-r-sm);
	border: 1px solid rgba(255, 255, 255, .16);
	color: rgba(255, 255, 255, .78);
	transition: border-color var(--vpt-dur) var(--vpt-ease), color var(--vpt-dur) var(--vpt-ease), background-color var(--vpt-dur) var(--vpt-ease);
}

.vp-footer__soc:hover {
	border-color: var(--vp-accent);
	background: rgba(var(--vp-accent-rgb), .12);
}

.vp-footer__soc svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.vp-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--vpt-3);
	padding-block: var(--vpt-4);
	border-top: 1px solid rgba(255, 255, 255, .12);
	font-size: var(--vpt-small);
	color: rgba(255, 255, 255, .55);
}

.vp-footer__copy,
.vp-footer__by,
.vp-footer__note {
	margin: 0;
}

.vp-footer__note {
	color: rgba(255, 255, 255, .45);
}


/* ==========================================================================
   29 — YAPIŞKAN ÇAĞRI, YUKARI ÇIK, OKUMA ÇUBUĞU, ARAMA PANELİ
   ========================================================================== */

/* --- Mobil yapışkan çağrı çubuğu ------------------------------------------
   Alt kenarda iki (ya da üç) eşit düğme. env(safe-area-inset-bottom)
   uygulanır; çentikli telefonlarda düğmeler sistem çubuğunun altında kalıyor.
------------------------------------------------------------------------- */

.vp-sticky-call {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--vpt-z-call);
	display: none;
	grid-template-columns: repeat(var(--vpt-call-cols, 2), minmax(0, 1fr));
	gap: 1px;
	background: var(--vp-line);
	border-top: 1px solid var(--vp-line);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	transform: translateY(110%);
	transition: transform var(--vpt-dur-slow) var(--vpt-ease-out);
	box-shadow: 0 -8px 24px rgba(var(--vp-ink-rgb), .12);
}

.vp-sticky-call--2 { --vpt-call-cols: 2; }
.vp-sticky-call--3 { --vpt-call-cols: 3; }

/* theme.js kahramanı geçince "is-on", çekmece açılınca "is-off" yazar. */
.vp-sticky-call.is-on {
	transform: translateY(0);
}

.vp-sticky-call.is-off,
.vp-sticky-call.is-hidden {
	transform: translateY(110%);
}

.vp-sticky-call__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 56px;
	padding: 10px 12px;
	background: var(--vp-surface);
	color: var(--vp-ink);
	font-weight: 700;
	font-size: .95rem;
	line-height: 1.2;
	text-align: center;
}

.vp-sticky-call__btn svg {
	width: 19px;
	height: 19px;
	flex: 0 0 auto;
	fill: currentColor;
}

/* Ara: koyu petrol — birincil eylem. */
.vp-sticky-call__btn--call {
	background: var(--vp-primary);
	color: var(--vp-on-primary);
}

/* WhatsApp: sarı zemin siyah metin. Sarının mobilde göründüğü tek yer. */
.vp-sticky-call__btn--wa {
	background: var(--vp-accent);
	color: var(--vp-on-accent);
}

.vp-sticky-call__btn--quote {
	background: var(--vp-surface);
	color: var(--vp-ink);
}

.vp-sticky-call__txt {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --- Yukarı çık ----------------------------------------------------------- */

.vp-totop {
	position: fixed;
	right: var(--vpt-4);
	bottom: calc(var(--vpt-4) + env(safe-area-inset-bottom, 0px));
	z-index: var(--vpt-z-top);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid var(--vp-line);
	background: var(--vp-surface);
	color: var(--vp-ink);
	box-shadow: var(--vp-sh-2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition:
		opacity var(--vpt-dur) var(--vpt-ease),
		transform var(--vpt-dur) var(--vpt-ease),
		visibility var(--vpt-dur) var(--vpt-ease);
}

.vp-totop.is-on {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.vp-totop svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* Yapışkan çağrı çubuğu görünürken yukarı çık düğmesi onun üstüne çıkar. */
.vp-has-sticky-call .vp-sticky-call.is-on ~ .vp-totop,
.vp-has-sticky-call .vp-totop {
	bottom: calc(var(--vpt-4) + 60px + env(safe-area-inset-bottom, 0px));
}

/* --- Okuma ilerleme çubuğu ------------------------------------------------
   Genişliği theme.js'in yazdığı --vp-bar değişkeninden gelir.
------------------------------------------------------------------------- */

.vp-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--vpt-z-toast);
	height: 3px;
	background: transparent;
	pointer-events: none;
}

.vp-progress__bar {
	display: block;
	height: 100%;
	width: var(--vp-bar, 0%);
	background: var(--vp-accent);
	transition: width .1s linear;
}

/* --- Arama paneli / arama kutusu ----------------------------------------- */

.vp-search__panel {
	border-top: 1px solid var(--vp-line);
	background: var(--vp-surface-2);
	padding-block: var(--vpt-4);
}

.vp-searchform {
	display: flex;
	gap: var(--vpt-2);
	align-items: center;
	min-width: 0;
}

.vp-searchform__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 48px;
	padding: 11px 16px;
	border: 1.5px solid var(--vp-line-2);
	border-radius: var(--vp-r-sm);
	background: var(--vp-surface);
	color: var(--vp-ink);
	font-size: 1rem;
}

.vp-searchform__input:focus {
	outline: none;
	border-color: var(--vp-primary);
	box-shadow: var(--vp-ring);
}

.vp-searchform__btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 48px;
	min-height: 48px;
	padding: 0 18px;
	border-radius: var(--vp-r-sm);
	background: var(--vp-primary);
	color: var(--vp-on-primary);
	font-weight: 700;
}

.vp-searchform__btn:hover {
	background: var(--vp-primary-d);
}

.vp-searchform__btn svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* --- Süzgeç çubuğu (arşiv üstü) ------------------------------------------ */

.vp-filterbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--vpt-3);
	margin-bottom: var(--vpt-6);
	padding-bottom: var(--vpt-4);
	border-bottom: 1px solid var(--vp-line);
}

.vp-filterbar__nav {
	min-width: 0;
	flex: 1 1 auto;
}

.vp-filterbar__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vpt-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Sekme çipi: .vp-chip ile aynı dil, ayrı sınıf — arşivde bağlantı, ana
   sayfada düğme oluyor. */
.vp-filterbar__tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 8px 16px;
	border: 1.5px solid var(--vp-line);
	border-radius: var(--vp-r-pill);
	background: var(--vp-surface);
	color: var(--vp-ink-2);
	font-size: .9375rem;
	font-weight: 600;
	white-space: nowrap;
	transition: border-color var(--vpt-dur) var(--vpt-ease), color var(--vpt-dur) var(--vpt-ease), background-color var(--vpt-dur) var(--vpt-ease);
}

.vp-filterbar__tab:hover {
	border-color: var(--vp-primary-l);
	color: var(--vp-primary);
}

.vp-filterbar__tab.is-on,
.vp-filterbar__tab[aria-current="page"] {
	background: var(--vp-primary);
	border-color: var(--vp-primary);
	color: var(--vp-on-primary);
}

.vp-filterbar__count {
	font-size: var(--vpt-small);
	color: var(--vp-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.vp-filterbar__search {
	flex: 0 1 280px;
	min-width: 0;
}


/* ==========================================================================
   30 — İÇ SAYFALAR
   sayfa başlığı · kırıntı · içerik · tekil · yan sütun · gezinme
   ========================================================================== */

/* --- Sayfa başlığı (page hero) -------------------------------------------- */
.vp-pagehero {
	position: relative;
	padding-block: clamp(36px, 4vw, 64px);
	background: var(--vp-bg-2);
	border-bottom: 1px solid var(--vp-line);
	overflow: hidden;
}

.vp-pagehero--dark {
	background: var(--vp-primary-d);
	color: rgba(255, 255, 255, .82);
	border-bottom-color: transparent;
	--vp-ink: #FFFFFF;
	--vp-ink-2: rgba(255, 255, 255, .8);
	--vp-muted: rgba(255, 255, 255, .6);
	--vp-line: rgba(255, 255, 255, .16);
}

.vp-pagehero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: clamp(20px, 3vw, 48px);
	align-items: center;
}

.vp-pagehero__copy {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--vpt-3);
}

.vp-pagehero__kicker {
	font-size: var(--vpt-kicker);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--vp-copper);
}

.vp-pagehero--dark .vp-pagehero__kicker {
	color: var(--vp-accent);
}

.vp-pagehero__title {
	margin: 0;
	font-size: clamp(1.9rem, 1.4rem + 2.1vw, 3rem);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.06;
	text-wrap: balance;
}

.vp-pagehero__sub {
	margin: 0;
	max-width: var(--vpt-measure);
	font-size: var(--vpt-lead);
	line-height: 1.55;
	color: var(--vp-ink-2);
}

.vp-pagehero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vpt-2);
}

.vp-pagehero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vpt-3);
	margin-top: var(--vpt-2);
}

.vp-pagehero__media {
	min-width: 0;
	border-radius: var(--vp-r-lg);
	overflow: hidden;
	background: var(--vp-bg-3);
	aspect-ratio: var(--vpt-ratio-project);
}

.vp-pagehero__media img,
.vp-pagehero__media .vp-ph {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Genel künye satırı (yazı tarihi, okuma süresi, kategori). */
.vp-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vpt-2) var(--vpt-3);
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--vpt-small);
	color: var(--vp-muted);
}

.vp-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.vp-meta__item svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
	opacity: .75;
}

/* --- Kırıntı gezinme ------------------------------------------------------ */

.vp-crumbs {
	font-size: var(--vpt-small);
	color: var(--vp-muted);
}

.vp-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vp-crumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.vp-crumbs__link:hover {
	color: var(--vp-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.vp-crumbs__sep {
	color: var(--vp-line-2);
}

.vp-crumbs__current,
.vp-crumbs__cur {
	color: var(--vp-ink-2);
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 40ch;
}

/* --- Yerleşim: içerik + yan sütun ---------------------------------------- */

.vp-layout {
	display: grid;
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

.vp-layout--sidebar {
	grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
}

.vp-col,
.vp-col--main {
	min-width: 0;
}

/* Hizmet tekil sayfası kendi ızgarasını kurar. */
.vp-svc__grid,
.vp-single {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

.vp-svc__main,
.vp-single__body {
	min-width: 0;
}

.vp-svc__aside,
.vp-single__aside {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--vpt-5);
}

.vp-svc__block {
	margin-bottom: var(--vpt-7);
}

.vp-svc__blocktitle {
	margin: 0 0 var(--vpt-4);
	font-size: var(--vpt-h3);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--vp-ink);
}

/* Kapak görseli: tekil sayfanın ilk boyama işi. */
.vp-single__cover {
	margin: 0 0 var(--vpt-6);
	border-radius: var(--vp-r-lg);
	overflow: hidden;
	background: var(--vp-bg-3);
	aspect-ratio: var(--vpt-ratio-lead);
}

.vp-single__cover img,
.vp-single__cover .vp-ph {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vp-gallery__cap {
	padding: 8px 2px 0;
	font-size: var(--vpt-small);
	color: var(--vp-muted);
}

.vp-single__title {
	margin: 0 0 var(--vpt-4);
	font-size: clamp(1.9rem, 1.4rem + 2.1vw, 3rem);
	letter-spacing: -.03em;
	line-height: 1.06;
}

.vp-single__title--plain {
	margin-bottom: var(--vpt-5);
}


/* --- Yazı içeriği (.vp-prose) --------------------------------------------
   Editörden gelen serbest içerik. Ölçü 62-68ch: uzun satır okunmuyor.
------------------------------------------------------------------------- */

.vp-prose,
.vp-editor {
	max-width: var(--vpt-measure);
	font-size: calc(var(--vpt-body) * var(--vp-fs, 1));
	line-height: var(--vpt-lh);
	color: var(--vp-ink-2);
}

.vp-prose > :first-child,
.vp-editor > :first-child {
	margin-top: 0;
}

.vp-prose h2,
.vp-editor h2 {
	margin: 1.8em 0 .5em;
	font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem);
	color: var(--vp-ink);
	scroll-margin-top: calc(var(--vp-header-h) + 20px);
}

.vp-prose h3,
.vp-editor h3 {
	margin: 1.5em 0 .4em;
	font-size: var(--vpt-h3);
	color: var(--vp-ink);
	scroll-margin-top: calc(var(--vp-header-h) + 20px);
}

.vp-prose h4,
.vp-editor h4 {
	margin: 1.3em 0 .35em;
	color: var(--vp-ink);
}

.vp-prose p,
.vp-editor p {
	margin: 0 0 1.05em;
}

.vp-prose a,
.vp-editor a {
	color: var(--vp-primary);
	text-decoration: underline;
	text-decoration-color: rgba(var(--vp-primary-rgb), .4);
	text-underline-offset: 3px;
	transition: text-decoration-color var(--vpt-dur) var(--vpt-ease);
}

.vp-prose a:hover,
.vp-editor a:hover {
	text-decoration-color: var(--vp-copper);
}

.vp-prose ul,
.vp-prose ol,
.vp-editor ul,
.vp-editor ol {
	margin: 0 0 1.05em;
	padding-left: 1.3em;
}

.vp-prose li,
.vp-editor li {
	margin-bottom: .4em;
}

.vp-prose ul li::marker,
.vp-editor ul li::marker {
	color: var(--vp-copper);
}

.vp-prose img,
.vp-editor img {
	border-radius: var(--vp-r);
	margin-block: 1.4em;
}

.vp-prose blockquote,
.vp-editor blockquote {
	margin: 1.6em 0;
	padding: var(--vpt-4) var(--vpt-5);
	border-left: 3px solid var(--vp-copper);
	background: var(--vp-bg-2);
	border-radius: 0 var(--vp-r-sm) var(--vp-r-sm) 0;
	font-size: 1.05em;
	color: var(--vp-ink);
}

.vp-prose table,
.vp-editor table {
	margin: 1.6em 0;
	font-size: .95rem;
}

.vp-prose th,
.vp-prose td,
.vp-editor th,
.vp-editor td {
	padding: 10px 12px;
	border: 1px solid var(--vp-line);
	text-align: left;
}

.vp-prose code,
.vp-editor code {
	padding: 2px 6px;
	border-radius: 4px;
	background: var(--vp-bg-3);
	color: var(--vp-ink);
}

/* Uyarı/bilgi kutusu — .vp-prose kapsamında tanımlıdır. */
.vp-callout {
	margin: 1.6em 0;
	padding: var(--vpt-4) var(--vpt-5);
	border: 1px solid var(--vp-line);
	border-left: 4px solid var(--vp-accent);
	border-radius: var(--vp-r-sm);
	background: rgba(var(--vp-accent-rgb), .07);
	color: var(--vp-ink);
	font-size: .97rem;
	line-height: 1.6;
}

/* Hizmet kapsamı listeleri (tekil hizmet sayfası). */
.vp-includes,
.vp-checks {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--vpt-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.vp-checks--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vp-checks__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
	font-size: .97rem;
	line-height: 1.5;
}

.vp-checks__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	margin-top: 1px;
	border-radius: 50%;
	background: rgba(var(--vp-copper-rgb), .14);
	color: var(--vp-copper);
}

.vp-checks__mark svg {
	width: 13px;
	height: 13px;
	fill: currentColor;
}

.vp-checks__txt {
	min-width: 0;
}


/* --- Yan sütun: yapışkan fiyat/teklif kartı ------------------------------
   Hizmet sayfasında ziyaretçi ne kadar aşağı inerse insin fiyat ve arama
   düğmesi ekranda kalır. Dönüşümün büyük kısmı bu karttan geliyor.
------------------------------------------------------------------------- */

.vp-sticky-card {
	position: sticky;
	top: calc(var(--vp-header-h) + 20px);
	display: flex;
	flex-direction: column;
	gap: var(--vpt-3);
	padding: var(--vp-pad);
	border: 1px solid var(--vp-line);
	border-radius: var(--vp-r-lg);
	background: var(--vp-surface);
	box-shadow: var(--vp-sh-2);
}

/* Üstteki ince sarı çizgi: kartın "eylem kartı" olduğunu bir bakışta söyler. */
.vp-sticky-card::before {
	content: "";
	display: block;
	height: 4px;
	width: 46px;
	margin-bottom: var(--vpt-2);
	border-radius: var(--vp-r-pill);
	background: var(--vp-accent);
}

.vp-sticky-card__head {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.vp-sticky-card__label {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vp-muted);
}

.vp-sticky-card__price {
	font-family: var(--vp-font-head);
	font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.1;
	color: var(--vp-ink);
}

.vp-sticky-card__note {
	font-size: var(--vpt-small);
	color: var(--vp-muted);
	line-height: 1.5;
}

.vp-sticky-card__rows {
	display: flex;
	flex-direction: column;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: var(--vpt-3) 0;
	border-block: 1px solid var(--vp-line);
	font-size: .92rem;
}

.vp-sticky-card__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--vpt-3);
	min-width: 0;
}

.vp-sticky-card__k {
	color: var(--vp-muted);
	min-width: 0;
}

.vp-sticky-card__v {
	font-weight: 700;
	color: var(--vp-ink);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.vp-sticky-card__actions {
	flex-direction: column;
	align-items: stretch;
	gap: var(--vpt-2);
}

.vp-sticky-card__actions .vp-btn {
	width: 100%;
}

/* Garanti satırı: sarı zemin siyah metin — sarı bütçesinin üçüncü kalemi. */
.vp-sticky-card__warranty {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	border-radius: var(--vp-r-sm);
	background: var(--vp-accent);
	color: var(--vp-on-accent);
	font-size: .82rem;
	font-weight: 700;
	line-height: 1.3;
}

.vp-sticky-card__warranty svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	fill: currentColor;
}

/* --- İçindekiler ---------------------------------------------------------- */

.vp-toc {
	padding: var(--vpt-4);
	border: 1px solid var(--vp-line);
	border-left: 3px solid var(--vp-copper);
	border-radius: var(--vp-r-sm);
	background: var(--vp-bg-2);
	font-size: .93rem;
}

.vp-toc__title,
.vp-toc-baslik {
	margin: 0 0 var(--vpt-2);
	font-family: var(--vp-font-head);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--vp-muted);
}

.vp-toc__list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vp-toc__item {
	min-width: 0;
}

.vp-toc__link {
	display: block;
	padding: 4px 0;
	color: var(--vp-ink-2);
	line-height: 1.45;
	transition: color var(--vpt-dur) var(--vpt-ease);
}

.vp-toc__link:hover {
	color: var(--vp-primary);
}

/* Okunan başlık: bakır sol çizgi. theme.js is-current yazar. */
.vp-toc__item.is-current > .vp-toc__link,
.vp-toc__link.is-current {
	color: var(--vp-primary);
	font-weight: 700;
	box-shadow: inset 2px 0 0 var(--vp-copper);
	padding-left: 10px;
}

/* --- Paylaş --------------------------------------------------------------- */

.vp-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vpt-2);
	padding-block: var(--vpt-4);
	border-top: 1px solid var(--vp-line);
	border-bottom: 1px solid var(--vp-line);
	margin-block: var(--vpt-6);
}

.vp-share__label {
	font-size: var(--vpt-small);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--vp-muted);
	margin-right: var(--vpt-2);
}

.vp-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 40px;
	padding: 8px 14px;
	border: 1.5px solid var(--vp-line);
	border-radius: var(--vp-r-pill);
	background: var(--vp-surface);
	color: var(--vp-ink-2);
	font-size: .88rem;
	font-weight: 600;
	transition: border-color var(--vpt-dur) var(--vpt-ease), color var(--vpt-dur) var(--vpt-ease), background-color var(--vpt-dur) var(--vpt-ease);
}

.vp-share__btn:hover {
	border-color: var(--vp-primary);
	color: var(--vp-primary);
	background: rgba(var(--vp-primary-rgb), .06);
}

.vp-share__btn svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.vp-share__btn--wa:hover {
	border-color: var(--vp-ok);
	color: var(--vp-ok);
	background: rgba(12, 122, 87, .08);
}

.vp-share__btn--x:hover {
	border-color: var(--vp-ink);
	color: var(--vp-ink);
}

/* Kopyalandı geri bildirimi: theme.js is-done yazar, sonra kaldırır. */
.vp-share__btn--copy.is-done {
	border-color: var(--vp-ok);
	color: var(--vp-ok);
}

/* --- Önceki / sonraki yazı ------------------------------------------------ */

.vp-postnav {
	margin-top: var(--vpt-7);
}

.vp-postnav__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--vp-gap);
}

.vp-postnav__item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: var(--vpt-4) var(--vpt-5);
	border: 1px solid var(--vp-line);
	border-radius: var(--vp-r);
	background: var(--vp-surface);
	min-width: 0;
	transition: border-color var(--vpt-dur) var(--vpt-ease), transform var(--vpt-dur) var(--vpt-ease);
}

.vp-postnav__item:hover {
	border-color: var(--vp-primary-l);
	transform: translateY(-2px);
}

.vp-postnav__item--next {
	text-align: right;
	align-items: flex-end;
}

.vp-postnav__label {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vp-copper);
}

.vp-postnav__title {
	font-family: var(--vp-font-head);
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.3;
	color: var(--vp-ink);
}

/* --- Yazar kutusu --------------------------------------------------------- */

.vp-authorbox {
	display: flex;
	align-items: flex-start;
	gap: var(--vpt-4);
	padding: var(--vp-pad);
	border: 1px solid var(--vp-line);
	border-radius: var(--vp-r);
	background: var(--vp-bg-2);
	margin-top: var(--vpt-6);
}

.vp-authorbox img {
	width: 64px;
	height: 64px;
	flex: 0 0 auto;
	border-radius: 50%;
	object-fit: cover;
}

.vp-authorbox__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.vp-authorbox__name {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: -.015em;
	color: var(--vp-ink);
}

.vp-authorbox__bio {
	margin: 0;
	font-size: .93rem;
	line-height: 1.6;
	color: var(--vp-ink-2);
}

/* --- Galeri ---------------------------------------------------------------- */

.vp-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--vpt-3);
	margin-block: var(--vpt-6);
}

.vp-gallery__item {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--vp-r-sm);
	background: var(--vp-bg-3);
	aspect-ratio: 1 / 1;
}

.vp-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--vpt-dur-slow) var(--vpt-ease-out);
}

@media (hover: hover) {
	.vp-anim .vp-gallery__item:hover img {
		transform: scale(1.03);
	}
}

/* --- Künye tablosu (proje / hizmet bilgileri) ---------------------------- */

.vp-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--vpt-4);
	padding: var(--vp-pad);
	border: 1px solid var(--vp-line);
	border-radius: var(--vp-r);
	background: var(--vp-bg-2);
	list-style: none;
	margin: 0 0 var(--vpt-6);
}

.vp-facts__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.vp-facts__lbl {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--vp-muted);
}

.vp-facts__val {
	font-weight: 700;
	color: var(--vp-ink);
	overflow-wrap: anywhere;
}

/* --- Alt sayfa gezinmesi -------------------------------------------------- */

.vp-childnav {
	padding: var(--vpt-4);
	border: 1px solid var(--vp-line);
	border-radius: var(--vp-r);
	background: var(--vp-bg-2);
	margin-bottom: var(--vpt-6);
}

.vp-childnav__title {
	margin: 0 0 var(--vpt-2);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--vp-muted);
}

.vp-childnav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vpt-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.vp-childnav__item a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 6px 12px;
	border: 1px solid var(--vp-line);
	border-radius: var(--vp-r-pill);
	background: var(--vp-surface);
	font-size: .9rem;
	font-weight: 600;
	color: var(--vp-ink-2);
}

.vp-childnav__item a:hover {
	border-color: var(--vp-primary-l);
	color: var(--vp-primary);
}

.vp-childnav__item.is-current a {
	background: var(--vp-primary);
	border-color: var(--vp-primary);
	color: var(--vp-on-primary);
}

/* --- Kenar çubuğu bileşeni ------------------------------------------------ */

.vp-widget {
	padding: var(--vp-pad);
	border: 1px solid var(--vp-line);
	border-radius: var(--vp-r);
	background: var(--vp-surface);
}

.vp-widget__title {
	margin: 0 0 var(--vpt-3);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: -.015em;
	color: var(--vp-ink);
}

/* --- Sayfalama ------------------------------------------------------------ */

.vp-pager {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--vpt-3);
	margin-top: var(--vpt-7);
}

.vp-pager--inline {
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
}

.vp-pager__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vp-pager__item {
	display: inline-flex;
}

.vp-pager__item a,
.vp-pager__item span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	min-height: 42px;
	padding: 0 12px;
	border: 1px solid var(--vp-line);
	border-radius: var(--vp-r-sm);
	background: var(--vp-surface);
	color: var(--vp-ink-2);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	transition: border-color var(--vpt-dur) var(--vpt-ease), color var(--vpt-dur) var(--vpt-ease), background-color var(--vpt-dur) var(--vpt-ease);
}

.vp-pager__item a:hover {
	border-color: var(--vp-primary-l);
	color: var(--vp-primary);
}

.vp-pager__item .current,
.vp-pager__item[aria-current="page"] a,
.vp-pager__item.is-current a,
.vp-pager__item.is-current span {
	background: var(--vp-primary);
	border-color: var(--vp-primary);
	color: var(--vp-on-primary);
}

.vp-pager__info {
	margin: 0;
	font-size: var(--vpt-small);
	color: var(--vp-muted);
	font-variant-numeric: tabular-nums;
}

/* --- Boş durum ------------------------------------------------------------ */

.vp-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--vpt-3);
	padding: var(--vpt-8) var(--vpt-5);
	border: 1px dashed var(--vp-line-2);
	border-radius: var(--vp-r-lg);
	background: var(--vp-bg-2);
	text-align: center;
}

.vp-empty__art {
	width: min(220px, 60%);
	opacity: .6;
	margin-bottom: var(--vpt-2);
}

.vp-empty__title {
	margin: 0;
	font-size: var(--vpt-h3);
	color: var(--vp-ink);
}

.vp-empty__text {
	margin: 0;
	max-width: 52ch;
	color: var(--vp-muted);
}

.vp-empty__action {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vpt-3);
	justify-content: center;
	margin-top: var(--vpt-2);
}

/* --- Arama sonucu --------------------------------------------------------- */

.vp-results__form {
	max-width: 560px;
	margin-bottom: var(--vpt-6);
}

/* --- 404 ------------------------------------------------------------------ */

.vp-404 {
	text-align: center;
}

.vp-404__code {
	display: block;
	font-family: var(--vp-font-head);
	font-size: clamp(4.5rem, 3rem + 9vw, 9rem);
	font-weight: 800;
	line-height: .9;
	letter-spacing: -.05em;
	color: var(--vp-line-2);
	font-variant-numeric: tabular-nums;
}

.vp-404__search {
	max-width: 520px;
	margin: var(--vpt-5) auto 0;
}

/* --- Etiket bulutu -------------------------------------------------------- */

.vp-tags--cloud {
	gap: 8px;
	margin-top: var(--vpt-5);
}

.vp-tags--cloud .vp-tag {
	padding: 6px 12px;
	font-size: .85rem;
}


/* ==========================================================================
   31 — JS BİLEŞENLERİ: bildirim, ışık kutusu
   İşaretlemeyi theme.js üretir. Betik asgari satır içi biçemi de yazıyor;
   buradaki kurallar onun üstüne "tema görünümü" ekler.
   ========================================================================== */

/* --- Bildirim (toast) ----------------------------------------------------- */

.vp-toasts {
	position: fixed;
	left: 50%;
	bottom: max(16px, env(safe-area-inset-bottom, 0px));
	z-index: var(--vpt-z-toast);
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: min(92vw, 28rem);
	transform: translateX(-50%);
	pointer-events: none;
}

.vp-toast {
	padding: 11px 16px;
	border-radius: var(--vp-r-sm);
	background: var(--vp-primary-d);
	color: #fff;
	font-size: .93rem;
	font-weight: 600;
	line-height: 1.45;
	box-shadow: var(--vp-sh-3);
	animation: vp-toast-in var(--vpt-dur) var(--vpt-ease-out) both;
}

.vp-toast--ok {
	background: var(--vp-ok);
	color: #fff;
}

.vp-toast--err {
	background: var(--vp-danger);
	color: #fff;
}

.vp-toast--warn {
	background: var(--vp-accent);
	color: var(--vp-on-accent);
}

.vp-toast--info {
	background: var(--vp-primary-d);
	color: #fff;
}

@keyframes vp-toast-in {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

/* --- Işık kutusu ---------------------------------------------------------- */

.vp-lightbox {
	max-width: min(96vw, 1200px);
	max-height: 94vh;
	border: 0;
	padding: 0;
	background: transparent;
	color: #fff;
	overflow: visible;
}

.vp-lightbox::backdrop {
	background: rgba(var(--vpt-scrim-dark-rgb), .88);
	backdrop-filter: blur(3px);
}

.vp-lightbox__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40vh;
}

.vp-lightbox__img {
	max-width: 100%;
	max-height: 78vh;
	border-radius: var(--vp-r-sm);
	background: var(--vp-primary-d);
}

.vp-lightbox__cap {
	margin: var(--vpt-3) 0 0;
	text-align: center;
	font-size: .92rem;
	color: rgba(255, 255, 255, .78);
}

.vp-lightbox__bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--vpt-3);
	margin-top: var(--vpt-3);
}

.vp-lightbox__prev,
.vp-lightbox__next,
.vp-lightbox__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .28);
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	transition: background-color var(--vpt-dur) var(--vpt-ease), border-color var(--vpt-dur) var(--vpt-ease);
}

.vp-lightbox__prev:hover,
.vp-lightbox__next:hover,
.vp-lightbox__close:hover {
	background: rgba(255, 255, 255, .18);
	border-color: var(--vp-accent);
}

.vp-lightbox__close {
	position: absolute;
	top: -54px;
	right: 0;
}

.vp-lightbox__count {
	min-width: 64px;
	text-align: center;
	font-size: .88rem;
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, .78);
}


/* ==========================================================================
   36 — ŞABLONA ÖZEL BLOKLAR
   Ana sayfa dışındaki şablonların (arşiv, tekil, arama, 404) kendi
   bileşenleri. Ortak bileşen diline uyarlar; ayrım yalnız yerleşimde.
   ========================================================================== */

/* --- Şablon kimlik bayrakları --------------------------------------------
   Tekil sayfa gövdesine hangi içerik tipinde olduğumuzu yazan sınıflar.
   Görünümü değil BAĞLAMI taşırlar; bu yüzden yalnız birkaç ince ayar.
------------------------------------------------------------------------- */

.vp-page,
.vp-single--page,
.vp-single--post,
.vp-single--project,
.vp-single--area {
	padding-block: var(--vp-space);
}

/* Yazıda ölçü dar tutulur, hizmet/projede geniş: birinde okuma, diğerinde
   tablo ve görsel var. */
.vp-single--post .vp-prose,
.vp-single--page .vp-prose {
	max-width: var(--vpt-measure);
}

.vp-single--project .vp-prose,
.vp-single--area .vp-prose,
.vp-svc .vp-prose {
	max-width: none;
}

/* Hizmet tekil sayfası kabı. */
.vp-svc {
	padding-block: var(--vp-space);
}

/* Ekip bölümü ve ızgarası. */
.vp-team {
	background: var(--vp-bg-2);
}

.vp-team__grid {
	min-width: 0;
}

/* Portre medyası: kare değil dikey. Yüz kadrajı üstte kalsın diye
   object-position yukarı çekildi. */
.vp-card__media--portrait {
	aspect-ratio: 4 / 5;
}

.vp-card__media--portrait img {
	object-position: center 20%;
}

/* --- Şerit başlığı (bölüm içi küçük başlık satırı) ----------------------- */

.vp-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--vpt-3);
	margin-bottom: var(--vpt-5);
	padding-bottom: var(--vpt-3);
	border-bottom: 1px solid var(--vp-line);
}

.vp-strip__title {
	margin: 0;
	font-size: var(--vpt-h3);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--vp-ink);
}

.vp-strip__more {
	font-size: .92rem;
	font-weight: 700;
	color: var(--vp-primary);
	white-space: nowrap;
}

.vp-strip__more:hover {
	text-decoration: underline;
	text-decoration-color: var(--vp-copper);
	text-underline-offset: 3px;
}

/* --- Küçük not satırı ----------------------------------------------------- */

.vp-note {
	margin: var(--vpt-4) 0 0;
	font-size: .93rem;
	line-height: 1.6;
	color: var(--vp-ink-2);
}

.vp-note--muted {
	font-size: var(--vpt-small);
	color: var(--vp-muted);
}

/* --- Blog: 1 büyük + 2 küçük -------------------------------------------- */

.vp-blog__top {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--vpt-4);
	margin-bottom: var(--vpt-6);
}

/* Vitrin düzeni: solda tek büyük yazı, sağda alt alta iki küçük. */
.vp-blog__grid--feature {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: var(--vp-gap);
	align-items: stretch;
}

.vp-blog__lead {
	--vpt-card-ratio: var(--vpt-ratio-lead);
}

.vp-blog__lead .vp-card__title {
	font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem);
}

.vp-blog__rest {
	display: grid;
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: var(--vp-gap);
	min-width: 0;
}

/* Sağdaki küçük yazılar yatay kart olur: dikey iki kart, solundaki büyük
   kartın yüksekliğini yakalayamıyordu. */
.vp-blog__rest > .vp-card {
	flex-direction: row;
	align-items: stretch;
}

.vp-blog__rest > .vp-card .vp-card__media {
	flex: 0 0 40%;
	aspect-ratio: auto;
}

.vp-blog__rest > .vp-card .vp-card__title {
	font-size: 1.05rem;
}

/* Arşiv listesi. */
.vp-bloglist {
	min-width: 0;
}

/* --- Bölge arşivi: il grupları ------------------------------------------- */

.vp-areagroup {
	margin-bottom: var(--vpt-8);
}

.vp-areagroup:last-child {
	margin-bottom: 0;
}

.vp-areagroup__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--vpt-3);
	margin: 0 0 var(--vpt-5);
	padding-bottom: var(--vpt-3);
	border-bottom: 2px solid var(--vp-line);
	font-size: var(--vpt-h3);
	letter-spacing: -.02em;
}

.vp-areagroup__count {
	font-size: .82rem;
	font-weight: 700;
	color: var(--vp-muted);
	font-variant-numeric: tabular-nums;
}

/* Mahalle listesi: etiket bulutu. Görsel yok, tipografi ve etiket var. */
.vp-hoods {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vp-hoods li {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border: 1px solid var(--vp-line);
	border-radius: var(--vp-r-pill);
	background: var(--vp-surface);
	font-size: .84rem;
	color: var(--vp-ink-2);
}

/* Tıklanamayan etiket: bağlantı değil, bilgi. */
.vp-tag--static {
	background: transparent;
	border: 1px solid var(--vp-line);
	color: var(--vp-muted);
}

/* --- Proje: sorun / çözüm / sonuç ---------------------------------------- */

.vp-csr {
	background: var(--vp-bg-2);
}

.vp-csr__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--vp-gap);
}

.vp-csr__item {
	display: flex;
	flex-direction: column;
	gap: var(--vpt-3);
	padding: var(--vp-pad);
	border: 1px solid var(--vp-line);
	border-radius: var(--vp-r);
	background: var(--vp-surface);
	min-width: 0;
}

/* Üç kutu aynı biçimde ama farklı sıcaklıkta: sorun kırmızıya, çözüm
   petrole, sonuç yeşile bakar. Aynı renkte üç kutu okuma sırasını
   kaybettiriyordu. */
.vp-csr__item--sorun { border-top: 3px solid var(--vp-danger); }
.vp-csr__item--cozum { border-top: 3px solid var(--vp-primary); }
.vp-csr__item--sonuc { border-top: 3px solid var(--vp-ok); }

.vp-csr__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--vp-r-sm);
	background: rgba(var(--vp-ink-rgb), .06);
	color: var(--vp-ink-2);
}

.vp-csr__icon svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.vp-csr__item--sorun .vp-csr__icon { color: var(--vp-danger); }
.vp-csr__item--cozum .vp-csr__icon { color: var(--vp-primary); }
.vp-csr__item--sonuc .vp-csr__icon { color: var(--vp-ok); }

.vp-csr__label {
	margin: 0;
	font-size: 1.02rem;
	font-weight: 800;
	letter-spacing: -.015em;
	color: var(--vp-ink);
}

.vp-csr__text {
	margin: 0;
	font-size: .95rem;
	line-height: 1.6;
	color: var(--vp-ink-2);
}

/* --- Proje: işin kapsamı -------------------------------------------------- */

.vp-scope {
	margin-block: var(--vpt-7);
}

.vp-scope__title {
	margin: 0 0 var(--vpt-4);
	font-size: var(--vpt-h3);
	font-weight: 800;
	letter-spacing: -.02em;
}

.vp-scope__text {
	margin: 0;
	max-width: var(--vpt-measure);
	line-height: 1.65;
	color: var(--vp-ink-2);
}

/* --- Arama sonuçları ------------------------------------------------------ */

.vp-results {
	padding-block: var(--vp-space);
}

.vp-results__count {
	margin: 0 0 var(--vpt-6);
	font-size: .95rem;
	color: var(--vp-muted);
	font-variant-numeric: tabular-nums;
}

.vp-results__group {
	margin-bottom: var(--vpt-8);
}

.vp-results__group:last-child {
	margin-bottom: 0;
}

.vp-results__list {
	display: flex;
	flex-direction: column;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vp-results__item {
	border-bottom: 1px solid var(--vp-line);
}

.vp-results__item:last-child {
	border-bottom: 0;
}

/* Satır listesi: yazı ve sayfa sonuçları kart olmaz. Kart, içinde görsel
   olmayan bir sonucu gereksizce şişiriyor. */
.vp-results__link {
	display: block;
	padding: var(--vpt-4) var(--vpt-3);
	border-radius: var(--vp-r-sm);
	transition: background-color var(--vpt-dur) var(--vpt-ease);
}

.vp-results__link:hover {
	background: rgba(var(--vp-primary-rgb), .05);
}

.vp-results__title {
	margin: 0 0 4px;
	font-size: 1.08rem;
	font-weight: 700;
	letter-spacing: -.015em;
	color: var(--vp-ink);
	line-height: 1.3;
}

.vp-results__link:hover .vp-results__title {
	color: var(--vp-primary);
}

.vp-results__text {
	margin: 0;
	font-size: .93rem;
	line-height: 1.55;
	color: var(--vp-ink-2);
}

/* --- 404 ------------------------------------------------------------------ */

.vp-404__copy {
	max-width: 56ch;
	margin-inline: auto;
}

.vp-404__title {
	margin: var(--vpt-3) 0 0;
	font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.3rem);
}

.vp-404__text {
	margin: var(--vpt-3) 0 0;
	color: var(--vp-ink-2);
	line-height: 1.65;
}

.vp-404__services {
	margin-top: var(--vpt-8);
	text-align: left;
}

/* --- Çekmece bölümleri ---------------------------------------------------- */

.vp-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vpt-3);
	padding-bottom: var(--vpt-4);
	border-bottom: 1px solid var(--vp-line);
}

.vp-drawer__body {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: var(--vpt-5);
}

.vp-drawer__foot {
	display: flex;
	flex-direction: column;
	gap: var(--vpt-3);
	padding-top: var(--vpt-4);
	border-top: 1px solid var(--vp-line);
}

/* --- Küçük eşleşmeler ----------------------------------------------------- */

/* Alt bilgi iletişim sütunu biraz geniş: adres satırları sarmasın. */
.vp-footer__col--contact {
	min-width: 0;
}

/* Form alan tipleri — genişlik dışında ayrı bir davranışları yok, ama
   panelden gelen her tip için kanca bulunsun (özel CSS yazan kullanıcı
   alan tipini hedefleyebilsin). */
.vp-form__f--text,
.vp-form__f--tel,
.vp-form__f--email,
.vp-form__f--number,
.vp-form__f--date,
.vp-form__f--select,
.vp-form__f--textarea,
.vp-form__f--file,
.vp-form__f--radio,
.vp-form__f--checkbox {
	min-width: 0;
}

/* Onay alanı etiketsiz gelir; üstündeki alandan biraz ayrılsın. */
.vp-form__f--consent {
	margin-top: var(--vpt-2);
}

/* Önceki yazı kutusu (sonraki zaten sağa yaslı). */
.vp-postnav__item--prev {
	text-align: left;
	align-items: flex-start;
}

/* Görsel öğeleri: kabın oranını dolduran resimler. */
.vp-bento__img,
.vp-gallery__img,
.vp-cta__img,
.vp-contact__mapph {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vp-authorbox__avatar {
	width: 64px;
	height: 64px;
	flex: 0 0 auto;
	border-radius: 50%;
	object-fit: cover;
	background: var(--vp-bg-3);
}

/* Kahraman geri arama bağlantısı (mobilde formun yerini alır). */
.vp-hero__callback-link {
	color: var(--vp-primary);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--vp-copper);
	text-underline-offset: 3px;
}

/* Künye satırı çeşitleri — ikon rengi bağlama göre değişir. */
.vp-meta__item--date svg { fill: var(--vp-muted); }
.vp-meta__item--read svg { fill: var(--vp-copper); }
.vp-meta__item--author svg { fill: var(--vp-primary); }

/* --- Bu bölümün duyarlılık düzeltmeleri ---------------------------------- */

@media (max-width: 900px) {
	.vp-csr__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.vp-blog__grid--feature {
		grid-template-columns: minmax(0, 1fr);
	}

	.vp-blog__rest {
		grid-template-rows: auto;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.vp-blog__rest {
		grid-template-columns: minmax(0, 1fr);
	}

	.vp-blog__rest > .vp-card {
		flex-direction: column;
	}

	.vp-blog__rest > .vp-card .vp-card__media {
		flex: 0 0 auto;
		aspect-ratio: var(--vpt-ratio-post);
	}
}


/* ==========================================================================
   32 — HAREKET, REVEAL VE DURUM SINIFLARI
   theme.js / tools.js bu sınıfları yazar. Hepsinin CSS'te karşılığı olmak
   zorunda: karşılıksız bir durum sınıfı, betiğin sessizce hiçbir şey
   yapmaması demektir.
   ========================================================================== */

/* Betik çalışıyor işareti — kök öğede. Betiksiz görünüm için kanca. */
.vp-js [data-vp-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity var(--vpt-dur-slow) var(--vpt-ease-out) var(--vp-delay, 0s),
		transform var(--vpt-dur-slow) var(--vpt-ease-out) var(--vp-delay, 0s);
	will-change: opacity, transform;
}

/* Görünüme girdi (IntersectionObserver). */
.vp-js [data-vp-reveal].is-in,
.vp-js .vp-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* Sınıf tabanlı sürüm (işaretlemede doğrudan .vp-reveal yazılırsa). */
.vp-js .vp-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity var(--vpt-dur-slow) var(--vpt-ease-out) var(--vp-delay, 0s),
		transform var(--vpt-dur-slow) var(--vpt-ease-out) var(--vp-delay, 0s);
}

/* Betik yoksa hiçbir şey gizli kalmaz: JS kapalıyken site tam okunur. */
[data-vp-reveal],
.vp-reveal {
	opacity: 1;
}

/* Animasyon sürerken (sayaç, geçiş) — kısa ömürlü işaret sınıfı. */
.is-anim {
	will-change: transform, opacity;
}

/* Sayaç henüz saymadıysa değeri gizlemiyoruz; yalnız hafifçe soluk. */
.vp-stat__num.is-busy {
	opacity: .65;
}

.vp-stat__num.is-done {
	opacity: 1;
}

/* Yeni gelen / güncellenen değer: kısa bir bakır parlama. Dikkat çeker ama
   yerinden oynatmaz — düzen kaymasına (CLS) sebep olmaz. */
.is-updated,
.is-fresh {
	animation: vp-flash 1s var(--vpt-ease) 1;
}

@keyframes vp-flash {
	0% { background-color: rgba(var(--vp-copper-rgb), .22); }
	100% { background-color: transparent; }
}

/* Hazır / uyarı durumları (hesap araçları). */
.is-ready {
	opacity: 1;
}

.is-warn {
	color: var(--vp-warn);
}

.is-ok {
	color: var(--vp-ok);
}

.is-err,
.has-err,
.has-error {
	color: var(--vp-danger);
}

/* Katlanmış içerik (uzun liste, "devamını göster"). */
.is-collapsed {
	max-height: 320px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(#000 62%, transparent);
	mask-image: linear-gradient(#000 62%, transparent);
}

/* Gönderiliyor / gönderildi (form dışındaki kutular için genel). */
.is-sending {
	opacity: .72;
	pointer-events: none;
}

.is-sent {
	opacity: 1;
}

/* Devre dışı bırakılmış sekme paneli. */
.is-off {
	display: none;
}

/* .is-off yalnız panel/şerit gizlemek için; konumlanmış bileşenlerde
   (yapışkan çubuk) yukarıda kendi kuralı var, bu genel kural onu ezmesin. */
.vp-sticky-call.is-off {
	display: grid;
}

/* Odak tuzağı için gövde kilidi zaten 04. bölümde. Burada yalnız çekmece
   açıkken sayfa içeriğinin fare olaylarını almaması sağlanıyor. */
.vp-is-locked .vp-main,
.vp-is-locked .vp-footer {
	pointer-events: none;
}

/* Klavye kullanıcısı için: gizli ama odaklanabilir bırakılan bir öğe
   odak alırsa görünür olsun. */
.vp-js [data-vp-reveal]:focus-within {
	opacity: 1;
	transform: none;
}


/* ==========================================================================
   33 — DUYARLILIK   (DESIGN-V2 §8)
   Kırılma noktaları YALNIZ düzen değiştiğinde:
     1440  konteyner genişler, bento 3 sütun
     1200  bölüm boşlukları daralır
     1024  kahraman tek sütuna iner, menü hamburgere döner
      900  3 sütun ızgaralar 2 sütuna
      768  2 sütun ızgaralar tek sütuna, tablolar karta hazırlanır
      640  tablolar karta döner, yatay şeritler kaydırmaya geçer
      380  tipografi bir kademe küçülür, düğmeler tam genişlik

   Kural: hiçbir genişlikte yatay kaydırma yok
   (documentElement.scrollWidth === clientWidth).
   ========================================================================== */

/* --- 1440 ve üzeri: nefes artar ------------------------------------------ */

@media (min-width: 1440px) {
	.vp-wrap {
		width: min(100% - 2 * var(--vpt-6), var(--vp-container));
	}

	/* Geniş ekranda bento 3 sütuna iner: 4 sütunda hücreler fazla basıklaşıyor
	   ve öne çıkan proje "büyük" hissi vermiyordu. */
	.vp-bento,
	.vp-projects__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.vp-bento__cell--lead .vp-bento__media,
	.vp-bento__cell--wide .vp-bento__media {
		min-height: 340px;
	}
}

/* --- 1200 altı: bölüm boşlukları daralır --------------------------------- */

@media (max-width: 1200px) {
	.vp-sec {
		padding-block: calc(var(--vp-space) * .82);
	}

	.vp-footer__grid {
		grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
	}

	.vp-nav__link {
		padding-inline: 10px;
		font-size: .93rem;
	}
}

/* --- 1024 altı: kahraman tek sütun, menü hamburger ----------------------- */

@media (max-width: 1024px) {
	/* Masaüstü menüsü gider, hamburger gelir. */
	.vp-nav--main {
		display: none;
	}

	.vp-burger {
		display: inline-flex;
	}

	/* Başlıktaki "Hemen ara" düğmesi metnini kısaltmıyoruz; yerine ikon
	   düğmeye dönüşüyor — numara zaten üst şeritte ve yapışkan çubukta var. */
	.vp-header__call .vp-btn__t {
		display: none;
	}

	.vp-header__call {
		padding-inline: 14px;
	}

	/* Kahraman tek sütun: durum → h1 → lead → CTA → fotoğraf → talep kartı →
	   güven maddeleri (DESIGN-V2 §6 · tablet). */
	.vp-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--vpt-6);
	}

	.vp-hero__img {
		aspect-ratio: var(--vpt-ratio-lead);
	}

	.vp-hero__ph {
		--vpt-ph-ratio: var(--vpt-ratio-lead);
	}

	/* Talep kartı fotoğrafın altında tam genişlik: köşeye binmesi dar
	   ekranda fotoğrafın yarısını yiyordu. */
	.vp-hero__quote {
		width: 100%;
		margin: var(--vpt-4) 0 0;
	}

	.vp-hero__trust {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--vpt-3);
	}

	.vp-hero__trust-item + .vp-hero__trust-item::before {
		display: none;
	}

	/* İki sütunlu asimetrik düzenler tek sütuna iner. */
	.vp-why__split {
		grid-template-columns: minmax(0, 1fr);
	}

	.vp-why__rule {
		display: none;
	}

	.vp-areas__inner,
	.vp-contact__inner,
	.vp-pagehero__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.vp-layout--sidebar,
	.vp-svc__grid,
	.vp-single {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Yan sütun akışa girince yapışkanlık anlamını yitirir. */
	.vp-sticky-card,
	.vp-why__copy,
	.vp-areas__copy {
		position: static;
	}

	.vp-contact__hours--band {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- 900 altı: 3 sütun ızgaralar 2 sütuna -------------------------------- */

@media (max-width: 900px) {
	.vp-grid--3,
	.vp-grid--4 {
		--vpt-cols: 2;
	}

	.vp-bento,
	.vp-projects__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vp-bento__cell--lead,
	.vp-bento__cell--wide {
		grid-column: span 2;
		grid-row: span 1;
	}

	.vp-faq__cols {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Adımlar dikeyleşir: yatay zaman çizelgesi 900px altında sıkışıyor. */
	.vp-steps__list,
	.vp-timeline {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.vp-step,
	.vp-timeline__item {
		padding: 0 0 var(--vpt-6) 64px;
	}

	.vp-step:last-child,
	.vp-timeline__item:last-child {
		padding-bottom: 0;
	}

	/* Bağlantı çizgisi dikeye döner. */
	.vp-step::before,
	.vp-timeline__item::before,
	.vp-step__line {
		top: 46px;
		bottom: 0;
		left: 21px;
		right: auto;
		width: 2px;
		height: auto;
		background-image: linear-gradient(180deg, var(--vp-line-2) 0 8px, transparent 8px 16px);
		background-size: 2px 16px;
		background-repeat: repeat-y;
	}

	.vp-postnav__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.vp-postnav__item--next {
		text-align: left;
		align-items: flex-start;
	}

	.vp-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vp-tool__body {
		grid-template-columns: minmax(0, 1fr);
	}

	.vp-tool__result {
		border-left: 0;
		border-top: 1px solid var(--vp-line);
	}
}

/* --- 768 altı: 2 sütun ızgaralar tek sütuna ------------------------------ */

@media (max-width: 768px) {
	.vp-grid--2,
	.vp-grid--3,
	.vp-grid--4 {
		--vpt-cols: 1;
	}

	.vp-bento,
	.vp-projects__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: auto;
	}

	.vp-bento__cell--lead,
	.vp-bento__cell--wide {
		grid-column: span 1;
	}

	.vp-bento__media,
	.vp-bento__cell--lead .vp-bento__media,
	.vp-bento__cell--wide .vp-bento__media {
		min-height: 0;
		aspect-ratio: var(--vpt-ratio-project);
	}

	/* Mobil kahraman: fotoğraf ÜSTE, tam genişlik kesme (DESIGN-V2 §6). */
	.vp-hero {
		padding-top: 0;
	}

	.vp-hero__inner {
		display: flex;
		flex-direction: column;
	}

	/* Kenar boşluğu yok: fotoğraf ekranın iki kenarına dayanır.
	   100vw KULLANILMIYOR — 100vw kaydırma çubuğunu da sayar ve masaüstü
	   tarayıcıda 15px yatay taşma üretir. Kabın kendi iç boşluğu kadar
	   negatif kenar boşluğu tam genişliği kaydırma üretmeden verir. */
	.vp-hero__media {
		order: -1;
		margin-inline: calc(-1 * var(--vpt-5));
	}

	.vp-hero__figure {
		border-radius: 0;
		box-shadow: none;
	}

	.vp-hero__img {
		aspect-ratio: var(--vpt-ratio-lead);
	}

	/*
	 * Kolon eksende gerilme ZORUNLU.
	 *
	 * .vp-hero__copy masaüstünde `align-items: flex-start` kullanıyor (düğmeler
	 * metin genişliğinde kalsın diye). Kolon düzeninde bu, çocukların kendi
	 * içerik genişliğine göre boyutlanması demek: yatay kayan güven şeridi
	 * (.vp-hero__trust) içerik genişliğini (~477px) dayatıyor, blok da ona
	 * uyup 375px'lik ekranı iki yandan taşıyordu. Gövdede `overflow-x: clip`
	 * olduğu için kaydırma çubuğu çıkmıyor, metin sessizce KIRPILIYORDU —
	 * fark edilmesi zor, etkisi büyük bir hata.
	 *
	 * Çözüm: mobilde kolon ekseninde gerilmeye dön ve kayan şeride min-width:0
	 * ver ki taşan içerik kabı büyütmek yerine kendi içinde kaysın.
	 */
	.vp-hero__copy {
		padding-top: var(--vpt-6);
		align-self: stretch;
		align-items: stretch;
		min-width: 0;
		max-width: 100%;
	}

	.vp-hero__copy > * {
		min-width: 0;
		max-width: 100%;
	}

	/* Birincil CTA tam genişlik, ikincil metin bağlantısına dönüşür. */
	.vp-hero__cta {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
	}

	.vp-hero__call {
		width: 100%;
	}

	.vp-hero__secondary {
		border-color: transparent;
		background: transparent;
		color: var(--vp-primary);
		min-height: var(--vpt-tap);
		text-decoration: underline;
		text-decoration-color: var(--vp-copper);
		text-underline-offset: 4px;
	}

	/* Güven maddeleri yatay kaydırılan çip şeridine döner. */
	.vp-hero__trust {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		gap: var(--vpt-2);
		padding-bottom: var(--vpt-2);
		margin-inline: calc(-1 * var(--vpt-5));
		padding-inline: var(--vpt-5);
		scrollbar-width: none;
	}

	.vp-hero__trust::-webkit-scrollbar {
		display: none;
	}

	.vp-hero__trust-item {
		flex: 0 0 auto;
		scroll-snap-align: start;
		padding: 7px 12px;
		border: 1px solid var(--vp-line);
		border-radius: var(--vp-r-pill);
		background: var(--vp-surface);
	}

	/* Hızlı talep formu kahramandan çıkar (#teklif bölümüne taşınır);
	   yerine metin bağlantısı kalır. Kahramanı şişirmesin. */
	.vp-hero__quote {
		display: none;
	}

	.vp-hero__callback {
		display: block;
	}

	/* İki sütunlu her şey tek sütun. */
	.vp-footer__grid,
	.vp-form__grid,
	.vp-why__stats,
	.vp-areas__stats,
	.vp-checks--2 {
		grid-template-columns: minmax(0, 1fr);
	}

	.vp-form__f--half,
	.vp-form__f--third {
		grid-column: span 12;
	}

	.vp-trust__item + .vp-trust__item::before {
		display: none;
	}

	.vp-trust__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--vpt-5) var(--vpt-3);
	}

	/* Üst şerit sadeleşir: adres ve sosyal gider, telefon kalır. */
	.vp-topbar__addr,
	.vp-topbar__social {
		display: none;
	}

	/* Mobil yapışkan çağrı çubuğu devreye girer. */
	.vp-has-sticky-call .vp-sticky-call {
		display: grid;
	}

	.vp-blog__grid > .vp-card:first-child .vp-card__media {
		aspect-ratio: var(--vpt-ratio-post);
	}
}

/* --- 640 altı: tablolar karta döner, şeritler kaydırmaya geçer ----------- */

@media (max-width: 640px) {
	/*
	 * Fiyat tablosu karta dönüşür. Hücre etiketleri data-label'dan gelir;
	 * yatay kaydırılan tablo telefonda okunmuyor, sütun başlıkları ekrandan
	 * çıkınca sayı neyin sayısı belli olmuyordu.
	 */
	.vp-pricing__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.vp-pricing__table,
	.vp-pricing__table tbody,
	.vp-pricing__table tr,
	.vp-pricing__table td {
		display: block;
		width: 100%;
	}

	.vp-pricing__table .vp-table__row {
		padding: var(--vpt-4);
		border-bottom: 1px solid var(--vp-line);
	}

	.vp-pricing__table td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--vpt-3);
		padding: 4px 0;
		border: 0;
		text-align: right;
	}

	.vp-pricing__table td::before {
		content: attr(data-label);
		flex: 0 0 auto;
		font-size: .74rem;
		font-weight: 700;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--vp-muted);
		text-align: left;
	}

	.vp-pricing__table td:first-child {
		display: block;
		text-align: left;
		padding-bottom: 8px;
	}

	.vp-pricing__table td:first-child::before {
		display: none;
	}

	.vp-pricing__table td:last-child {
		text-align: right;
	}

	/* Çip şeritleri yatay kaydırmaya geçer: sarma, üç satırlık bir süzgeç
	   yığını üretiyordu. */
	.vp-filter,
	.vp-filters,
	.vp-services__filter,
	.vp-tool__tabs,
	.vp-filterbar__tabs {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		margin-inline: calc(-1 * var(--vpt-5));
		padding-inline: var(--vpt-5);
		padding-bottom: var(--vpt-2);
		scrollbar-width: none;
	}

	.vp-filter::-webkit-scrollbar,
	.vp-filters::-webkit-scrollbar,
	.vp-services__filter::-webkit-scrollbar,
	.vp-tool__tabs::-webkit-scrollbar,
	.vp-filterbar__tabs::-webkit-scrollbar {
		display: none;
	}

	.vp-chip,
	.vp-filterbar__tab {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	.vp-trust__list {
		grid-template-columns: minmax(0, 1fr);
		text-align: left;
	}

	.vp-trust__item {
		flex-direction: row;
		align-items: center;
		text-align: left;
		gap: var(--vpt-3);
	}

	.vp-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vp-card--channel,
	.vp-authorbox {
		flex-direction: column;
		align-items: flex-start;
	}

	.vp-cta__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.vp-cta__phone {
		width: 100%;
	}

	.vp-gallery {
		grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	}

	.vp-share {
		gap: 8px;
	}
}

/* --- 380 altı: tipografi bir kademe küçülür ------------------------------ */

@media (max-width: 380px) {
	:root {
		--vpt-h1: clamp(1.95rem, 1.5rem + 2.6vw, 2.6rem);
		--vpt-h2: clamp(1.6rem, 1.3rem + 1.6vw, 2.1rem);
		--vpt-h3: 1.08rem;
		--vpt-lead: 1rem;
	}

	.vp-wrap,
	.vp-wrap--narrow {
		width: calc(100% - 2 * var(--vpt-4));
	}

	/* Düğmeler tam genişlik: 360px'te yan yana iki düğme sığmıyor. */
	.vp-btn {
		width: 100%;
	}

	/* Kap içinde tek başına duran ikon düğmeler hariç. */
	.vp-header__actions .vp-btn,
	.vp-sticky-call__btn,
	.vp-share__btn,
	.vp-pager__item a,
	.vp-childnav__item a {
		width: auto;
	}

	.vp-head__actions,
	.vp-sec__foot,
	.vp-cta__btns,
	.vp-cta__actions,
	.vp-hero__cta,
	.vp-form__actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.vp-facts,
	.vp-checks--2 {
		grid-template-columns: minmax(0, 1fr);
	}

	.vp-sticky-call__btn {
		font-size: .88rem;
		padding-inline: 8px;
	}

	.vp-topbar__inner {
		justify-content: center;
	}
}


/* ==========================================================================
   34 — KOYU MOD İNCE AYARLARI
   Renk DEĞERLERİ 01. bölümde ve panelde; burada yalnız koyu zeminde
   davranışı değişmesi gereken şeyler var. Kural: koyu modda yükseklik
   gölgeyle değil ÇİZGİYLE anlatılır.
   Tek kaynak [data-vp-theme="dark"]; @media (prefers-color-scheme) içinde
   renk tanımı YOK (THEME-CONTRACT §9).
   ========================================================================== */

[data-vp-theme="dark"] .vp-card,
[data-vp-theme="dark"] .vp-tool,
[data-vp-theme="dark"] .vp-pricing__wrap,
[data-vp-theme="dark"] .vp-acc__item,
[data-vp-theme="dark"] .vp-postnav__item,
[data-vp-theme="dark"] .vp-widget,
[data-vp-theme="dark"] .vp-sticky-card {
	box-shadow: none;
	border-color: var(--vp-line);
	background: var(--vp-surface);
}

[data-vp-theme="dark"] .vp-card:hover {
	border-color: var(--vp-primary);
	box-shadow: none;
}

[data-vp-theme="dark"] .vp-header {
	background: var(--vp-surface);
	border-bottom-color: var(--vp-line);
}

[data-vp-theme="dark"] .vp-header.is-stuck {
	box-shadow: 0 1px 0 var(--vp-line-2);
	border-bottom-color: var(--vp-line-2);
}

/* Koyu zeminde koyu şerit ayırt edilmiyor; şeritler bir ton açılıyor. */
[data-vp-theme="dark"] .vp-topbar,
[data-vp-theme="dark"] .vp-trust,
[data-vp-theme="dark"] .vp-reviews,
[data-vp-theme="dark"] .vp-footer,
[data-vp-theme="dark"] .vp-sec--dark,
[data-vp-theme="dark"] .vp-pagehero--dark {
	background: var(--vp-bg-3);
}

[data-vp-theme="dark"] .vp-cta {
	background: var(--vp-bg-3);
}

[data-vp-theme="dark"] .vp-cta__veil {
	background: linear-gradient(100deg, rgba(var(--vpt-scrim-dark-rgb), .95) 0%, rgba(var(--vpt-scrim-dark-rgb), .84) 46%, rgba(var(--vpt-scrim-dark-rgb), .68) 100%);
}

[data-vp-theme="dark"] .vp-tool__result {
	background: var(--vp-bg);
	border-top-color: var(--vp-line);
	border-left-color: var(--vp-line);
}

/* Yer tutucu koyu modda daha da sakinleşir: parlak bir dikdörtgen kart
   dizisinin ortasında göz yoruyordu. */
[data-vp-theme="dark"] .vp-ph {
	background: linear-gradient(142deg, var(--vp-bg-3) 0%, var(--vp-surface) 52%, var(--vp-bg) 100%);
	color: rgba(255, 255, 255, .62);
}

/* Fotoğraflar koyu zeminde bir tık kısılır: beyaz patlaması olmasın. */
[data-vp-theme="dark"] .vp-card__media img,
[data-vp-theme="dark"] .vp-bento__media img,
[data-vp-theme="dark"] .vp-hero__img {
	filter: brightness(.94) saturate(.96);
}

[data-vp-theme="dark"] .vp-hero__tint {
	mix-blend-mode: normal;
	background: linear-gradient(180deg, rgba(var(--vpt-scrim-dark-rgb), .1), rgba(var(--vpt-scrim-dark-rgb), .45));
	opacity: 1;
}

/* Sarı koyu zeminde daha parlak görünür; zemin olarak kullanıldığı yerlerde
   siyah metin korunuyor, kontrast 12:1 üzerinde kalıyor. */
[data-vp-theme="dark"] .vp-btn--accent,
[data-vp-theme="dark"] .vp-hero__badge,
[data-vp-theme="dark"] .vp-badge--acil,
[data-vp-theme="dark"] .vp-sticky-card__warranty,
[data-vp-theme="dark"] .vp-sticky-call__btn--wa {
	color: var(--vp-on-accent);
}

[data-vp-theme="dark"] .vp-table__row.is-hl {
	background: rgba(var(--vp-accent-rgb), .1);
}

[data-vp-theme="dark"] .vp-input,
[data-vp-theme="dark"] .vp-select,
[data-vp-theme="dark"] .vp-form__input,
[data-vp-theme="dark"] .vp-searchform__input {
	background: var(--vp-bg);
	border-color: var(--vp-line-2);
}

[data-vp-theme="dark"] .vp-form__opt,
[data-vp-theme="dark"] .vp-chip,
[data-vp-theme="dark"] .vp-filterbar__tab {
	background: var(--vp-surface);
}

[data-vp-theme="dark"] .vp-hero__grid-bg {
	opacity: .07;
}

[data-vp-theme="dark"] .vp-drawer__panel {
	box-shadow: none;
	border-left-color: var(--vp-line-2);
}

[data-vp-theme="dark"] .vp-totop,
[data-vp-theme="dark"] .vp-sticky-call {
	box-shadow: none;
	border-color: var(--vp-line-2);
}


/* ==========================================================================
   35 — HAREKET TERCİHİ, ZORLANMIŞ RENKLER, YAZDIRMA KANCASI
   ========================================================================== */

/*
 * Kullanıcı hareketi azaltmak istiyorsa hepsi kapanır. Bu bir tercih değil,
 * erişilebilirlik gereğidir: vestibüler rahatsızlığı olan kullanıcıda kayan
 * ve yakınlaşan öğeler baş dönmesi yapıyor.
 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}

	html {
		scroll-behavior: auto;
	}

	[data-vp-reveal],
	.vp-reveal {
		opacity: 1 !important;
		transform: none !important;
	}

	/* Kart görselinin yakınlaşması kapatılır. */
	.vp-card:hover .vp-card__media img,
	.vp-card:hover .vp-card__media .vp-media__img,
	.vp-bento__cell:hover .vp-bento__media img,
	.vp-gallery__item:hover img {
		transform: none;
	}

	/* Künye kutusu kaymadan, doğrudan görünür olur. */
	.vp-bento__meta {
		max-height: 140px;
		opacity: 1;
	}

	.vp-form__spin {
		animation: none;
		border-top-color: transparent;
	}
}

/*
 * Yüksek kontrast / zorlanmış renk kipi (Windows). Renkler sistemin
 * elinde; bizim işimiz KENARLIK bırakmak. Yalnız arka planla anlatılan
 * her şey bu kipte kayboluyor.
 */
@media (forced-colors: active) {
	.vp-btn,
	.vp-chip,
	.vp-card,
	.vp-input,
	.vp-select,
	.vp-form__input,
	.vp-form__opt-box,
	.vp-acc__item,
	.vp-badge,
	.vp-tag,
	.vp-icontile,
	.vp-filterbar__tab,
	.vp-pager__item a,
	.vp-sticky-call__btn {
		border: 1px solid currentColor;
	}

	.vp-btn--primary,
	.vp-btn--accent {
		forced-color-adjust: none;
	}

	.vp-hero__tint,
	.vp-cta__veil,
	.vp-card__media::after,
	.vp-bento__info {
		background: Canvas;
		opacity: 1;
	}

	.vp-bento__info {
		color: CanvasText;
	}

	:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
		outline: 3px solid Highlight;
	}
}

/*
 * Yazdırma kancası.
 * Tam yazdırma biçemi ayrı dosyada (print.css, media="print"). Buradaki üç
 * satır yalnızca ekran biçeminin yazdırmayı bozmasını engeller: sabit
 * konumlu bileşenler kâğıtta her sayfanın üstüne basılıyordu.
 */
@media print {
	.vp-header,
	.vp-topbar,
	.vp-drawer,
	.vp-sticky-call,
	.vp-totop,
	.vp-progress,
	.vp-toasts {
		display: none !important;
	}

	.vp-sec {
		padding-block: 12mm;
	}
}