/* =========================================================================
   DipKöşe — TEK TASARIM SİSTEMİ
   Geliştirici: Ural ÇELİK · INTRODUCE — https://www.introduce.com.tr

   Bu dosya sitenin ve uygulamanın TEK stil kaynağıdır. Daha önce tema ve
   eklenti ayrı stil dosyaları taşıyordu; aynı bileşen iki yerde, iki farklı
   değerle tanımlanıyordu. Artık tek dosya var.

   Dil: Microsoft (Fluent) yaklaşımı.
     Tipografi : Segoe UI ailesi. Web fontu YÜKLENMEZ — sistem fontu kullanılır,
                 böylece üçüncü taraf isteği ve font sıçraması olmaz.
     Palet     : Siyah–beyaz. Renk yok; hiyerarşi tonla, ağırlıkla ve çizgiyle
                 kurulur. Durum ASLA yalnız renkle anlatılmaz (kenarlık, kalınlık
                 ve metin de değişir) — renk körü kullanıcı için de okunur.
     Geometri  : 4px köşe, 1px çizgi, ölçülü gölge, 4px'lik boşluk ölçeği.
   ========================================================================= */

:root {
	--dk-font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
	--dk-font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

	--dk-canvas: #FFFFFF;
	--dk-surface: #FFFFFF;
	--dk-subtle: #F2F2F2;
	--dk-ink: #0B0B0B;
	--dk-ink-2: #5A5A5A;
	--dk-ink-3: #7A7A7A;
	--dk-line: #E4E4E4;
	--dk-line-strong: #8A8A8A;
	--dk-accent: #0B0B0B;
	--dk-on-accent: #FFFFFF;

	/* Ters serit (siyah bolumler ve alt bilgi) ayri degiskenlerde durur.
	   Kanvasa baglanamaz: koyu kipte kanvas zaten koyudur, serit orada da
	   murekkeple kurulmali, yoksa gorunmez olur. */
	--dk-invert: #000000;
	--dk-on-invert: #FFFFFF;
	--dk-invert-2: rgba(255, 255, 255, .66);
	--dk-invert-line: rgba(255, 255, 255, .16);

	/* Kose yok. Kurumsal dil keskin: hiyerarsi yuvarlaklikla degil, cizgiyle
	   ve boslukla kuruluyor. Hap bicimli rozetler istisnadir. */
	--dk-r: 0px;
	--dk-r-lg: 0px;
	--dk-shadow: 0 1px 2px rgba(0, 0, 0, .06);
	--dk-shadow-lg: 0 8px 28px rgba(0, 0, 0, .10);

	/* eski değişken adları kullanan bileşenler kırılmasın */
	--dk-bg: var(--dk-canvas);
	--dk-ink-soft: var(--dk-ink-3);
	--dk-primary: var(--dk-accent);
	--dk-primary-dark: #000000;
}

/*
 * KOYU KİP YOK — bilerek.
 *
 * Önce prefers-color-scheme ile kanvas koyuya çevriliyordu. Ama bu tasarımın
 * anlamı tam olarak beyaz zemin ile SİYAH şerit arasındaki karşıtlık: sayaç
 * bandı gri, hizmetler siyah, alt bilgi siyah. Kanvas da koyulaşınca o
 * karşıtlık yok oluyor, siyah şerit görünmez hale geliyor ve sayfa tek
 * renkli bir yüzeye dönüşüyordu (tarayıcıda görüldü).
 *
 * Kimlik tek bir kipe bağlandı. Renk şeması buradan tanımlanır ki tarayıcı
 * form denetimlerini ve kaydırma çubuğunu da açık kip için çizsin.
 */
:root { color-scheme: light; }

/* ---------- temel ---------- */

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

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

body {
	margin: 0;
	background: var(--dk-canvas);
	color: var(--dk-ink);
	font-family: var(--dk-font);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Basliklar iri, KALIN ve siki. Once ince (300) yaziliyordu; ince agirlik
   buyuk punto ile dekoratif duruyordu ve kucuk ekranda inceldigi icin
   okunurlugu da dusuyordu. */
h1, h2, h3, h4 {
	font-family: var(--dk-font-display);
	color: var(--dk-ink);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -.025em;
	margin: 0 0 12px;
}

h1 { font-size: clamp(30px, 6vw, 44px); line-height: 1.04; letter-spacing: -.032em; }
h2 { font-size: clamp(23px, 3.4vw, 32px); }
h3 { font-size: 18px; letter-spacing: -.015em; }

p { margin: 0 0 12px; }

a { color: var(--dk-ink); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--dk-ink-2); }
/* Alt çizgi metin içindeki bağlantılar içindir; kart, gezinme ve rozet gibi
   zaten tıklanabilir olduğu belli olan yüzeylerde gürültü yapar. */
h1 a, h2 a, h3 a, h4 a,
a.dk-service-card, a.dk-helper-card, a.dk-card,
a.dk-post-nav-link, a.dk-review-prompt-card, a.dk-booking-card,
.dk-service-card a, .dk-helper-card a, .dk-card a,
.dk-primary-nav a, .dk-footer a, .dk-mobile-tabbar a,
.dk-pagination a, .dk-post-nav-link, .dk-badge, .dk-breadcrumbs a,
.dk-location-list a, .dk-location-directory-group li a { text-decoration: none; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover,
.dk-breadcrumbs a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

/* Odak halkası her yerde aynı ve GÖRÜNÜR: klavye kullanıcısı kaybolmaz. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible,
.dk-input:focus-visible, .dk-chip:focus-visible, .dk-btn:focus-visible,
.dk-slot:focus-visible, .dk-day:focus-visible {
	outline: 2px solid var(--dk-ink);
	outline-offset: 2px;
	border-radius: var(--dk-r);
}

.dk-sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.dk-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	/* 10px dolgu 43px veriyordu; 1px eksikti. */
	display: inline-flex; align-items: center; min-height: 44px;
	padding: 10px 16px; background: var(--dk-ink); color: var(--dk-canvas);
	text-decoration: none;
}
.dk-skip-link:focus { left: 8px; top: 8px; }

/* ---------- düzen ---------- */

.dk-container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.dk-narrow { max-width: 720px; margin: 0 auto; }
.dk-section { padding: 48px 0; }
.dk-section-alt { background: var(--dk-subtle); }
.dk-section-title { font-size: clamp(23px, 3.4vw, 32px); margin: 0 0 20px; }
/* Ağırlık 300 kalmıştı: sayfa başlıkları gövde metninden ince görünüyordu. */
.dk-page-title { font-size: clamp(30px, 6vw, 44px); font-weight: 600; letter-spacing: -.032em; margin: 24px 0 16px; }
.dk-archive-desc { color: var(--dk-ink-2); max-width: 70ch; margin: 0 0 24px; }
/* Kısayol padding kullanılmaz: bu sınıf .dk-container ile AYNI elemanda durur,
   kısayol yazınca kapsayıcının yan boşluğunu siliyor ve içerik mobilde ekran
   kenarına yapışıyordu (tarayıcıda görüldü: h1 sol kenarda, x=0). */
.dk-content { padding-top: 24px; padding-bottom: 56px; }

/* ---------- editoryel bilesenler ----------
   Kurumsal dil: kucuk ve harf araligi acilmis ust etiket, iri ve siki
   baslik, sac teli cizgiler, siyah ters seritler. Vurgu rengi YOK; ayrim
   kontrastla, boslukla ve cizgiyle kuruluyor. */

.dk-eyebrow {
	display: block; margin: 0 0 18px;
	font-size: 11px; font-weight: 700; letter-spacing: .18em;
	text-transform: uppercase; color: var(--dk-ink-2);
}

.dk-display {
	font-size: clamp(34px, 8.5vw, 66px);
	line-height: 1.02; letter-spacing: -.035em; font-weight: 600;
	margin: 0 0 22px;
}

.dk-lede { font-size: 17px; line-height: 1.6; color: var(--dk-ink-2); max-width: 44ch; margin: 0 0 22px; }

/* Alt cizgili, oku saga kayan baglanti. */
.dk-arrow-link {
	display: inline-flex; align-items: center; gap: 16px;
	padding-bottom: 8px; border-bottom: 1px solid var(--dk-ink);
	font-size: 14px; font-weight: 600; color: var(--dk-ink); text-decoration: none;
}
.dk-arrow-link::after { content: "\2192"; transition: transform .15s; }
.dk-arrow-link:hover { color: var(--dk-ink); }
.dk-arrow-link:hover::after { transform: translateX(4px); }

/* Ters (siyah) serit. */
.dk-invert { background: var(--dk-invert); color: var(--dk-on-invert); padding: 72px 0; }
.dk-invert h1, .dk-invert h2, .dk-invert h3, .dk-invert h4, .dk-invert p { color: var(--dk-on-invert); }
.dk-invert .dk-lede, .dk-invert .dk-note { color: var(--dk-invert-2); }
.dk-invert .dk-eyebrow { color: var(--dk-invert-2); }
.dk-invert .dk-btn, .dk-invert .dk-btn-primary {
	background: var(--dk-on-invert); border-color: var(--dk-on-invert); color: var(--dk-invert);
}
.dk-invert .dk-btn:hover, .dk-invert .dk-btn-primary:hover {
	background: var(--dk-invert-2); border-color: transparent; color: var(--dk-invert);
}
.dk-invert .dk-arrow-link { color: var(--dk-on-invert); border-bottom-color: var(--dk-on-invert); }

.dk-rule { height: 1px; background: var(--dk-line); border: 0; margin: 40px 0; }
.dk-invert .dk-rule { background: var(--dk-invert-line); }

/* Sayac seridi - dikey sac teli cizgilerle ayrilmis sutunlar. */
.dk-stats { display: grid; grid-template-columns: 1fr 1fr; background: var(--dk-subtle); }
.dk-stats > div { padding: 26px 18px; border-left: 1px solid var(--dk-line); }
.dk-stats > div:first-child { border-left: 0; }
.dk-stat-n {
	display: block; font-family: var(--dk-font-display);
	font-size: clamp(30px, 6vw, 46px); font-weight: 600; line-height: 1; letter-spacing: -.03em;
}
.dk-stat-l { display: block; margin-top: 10px; font-size: 12px; color: var(--dk-ink-3); line-height: 1.4; }

/* Numarali dizin satirlari (01, 02 ...). */
.dk-index { border-top: 1px solid var(--dk-line); }
.dk-index a {
	display: flex; align-items: center; gap: 16px;
	padding: 20px 0; border-bottom: 1px solid var(--dk-line);
	color: inherit; text-decoration: none;
}
.dk-index a::after { content: "\2192"; color: var(--dk-ink-3); transition: transform .15s; }
.dk-index a:hover::after { transform: translateX(4px); }
.dk-index-no { flex: 0 0 30px; font-size: 11px; color: var(--dk-ink-3); }
.dk-index-t {
	flex: 1 1 auto; font-family: var(--dk-font-display);
	font-size: clamp(18px, 3.4vw, 26px); font-weight: 600; letter-spacing: -.02em;
}
.dk-index-m { font-size: 12px; color: var(--dk-ink-3); }
/* Dizin satırının tıklanamayan hâli (madde listesi). */
.dk-fact { display: flex; align-items: baseline; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--dk-line); }
.dk-fact .dk-index-no { flex: 0 0 30px; }
.dk-fact strong { display: block; font-size: 16px; margin-bottom: 4px; }
.dk-fact p { margin: 0; color: var(--dk-ink-2); max-width: 62ch; }

/* Fiyat tablosu — dikey çizgi yok, satırlar saç teliyle ayrılır. Rakam
   sütunu sağa yaslı ve başlık fontunda: göz tutarları alt alta tarayabilsin. */
.dk-pricetable { width: 100%; border-collapse: collapse; margin: 8px 0 20px; }
.dk-pricetable th, .dk-pricetable td { text-align: left; padding: 16px 12px 16px 0; border-bottom: 1px solid var(--dk-line); }
.dk-pricetable thead th {
	padding-top: 0; font-size: 11px; font-weight: 700; letter-spacing: .14em;
	text-transform: uppercase; color: var(--dk-ink-3); border-bottom-color: var(--dk-ink);
}
.dk-pricetable tbody th { font-family: var(--dk-font-display); font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.dk-pricetable td { color: var(--dk-ink-2); }
.dk-pricetable .dk-num {
	text-align: right; padding-right: 0; white-space: nowrap;
	font-family: var(--dk-font-display); font-size: 17px; font-weight: 600;
	letter-spacing: -.015em; color: var(--dk-ink); font-variant-numeric: tabular-nums;
}
.dk-invert .dk-pricetable th, .dk-invert .dk-pricetable td { border-bottom-color: var(--dk-invert-line); }
.dk-invert .dk-pricetable td, .dk-invert .dk-pricetable thead th { color: var(--dk-invert-2); }
.dk-invert .dk-pricetable tbody th, .dk-invert .dk-pricetable .dk-num { color: var(--dk-on-invert); }

/* SSS — ayrı bir eklenti gerektirmeyecek şekilde <details> ile. */
.dk-faq { border-top: 1px solid var(--dk-line); }
.dk-faq details { border-bottom: 1px solid var(--dk-line); }
.dk-faq summary {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 20px 0; cursor: pointer; list-style: none;
	font-family: var(--dk-font-display); font-size: 17px; font-weight: 600; letter-spacing: -.015em;
}
.dk-faq summary::-webkit-details-marker { display: none; }
.dk-faq summary::after { content: "+"; font-size: 20px; font-weight: 400; color: var(--dk-ink-3); }
.dk-faq details[open] summary::after { content: "\2212"; }
.dk-faq p { margin: 0 0 20px; color: var(--dk-ink-2); max-width: 68ch; }
.dk-invert .dk-index, .dk-invert .dk-index a { border-color: var(--dk-invert-line); }
.dk-invert .dk-index-no, .dk-invert .dk-index-m, .dk-invert .dk-index a::after { color: var(--dk-invert-2); }

/* ---------- üst bar ---------- */

.dk-header {
	position: sticky; top: 0; z-index: 50;
	background: var(--dk-surface);
	border-bottom: 1px solid var(--dk-line);
}
.dk-header-inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; min-height: 68px;
}
.dk-logo {
	display: flex; align-items: center;
	font-family: var(--dk-font-display);
	font-size: 16px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
	color: var(--dk-ink); text-decoration: none;
}
/* Logo yüksekliğe göre ölçeklenir: genişlik verilirse Türkçe uzun ad küçük
   ekranda menü düğmesinin altına iniyordu. Yükseklik sabit, genişlik akar. */
.dk-logo img { height: 30px; width: auto; display: block; }
@media (min-width: 640px) { .dk-logo img { height: 34px; } }
.dk-primary-nav { display: none; align-items: center; gap: 4px; }
/* wp_nav_menu bir <ul> uretir; stil yalniz .dk-primary-nav a'yi hedefliyordu
   ve menu kurulunca ust barda madde imli dikey bir liste cikiyordu
   (tarayicida goruldu). Liste yatay ve imsiz olmali. */
.dk-primary-nav ul {
	display: flex; align-items: center; gap: 2px;
	list-style: none; margin: 0; padding: 0;
}
.dk-primary-nav li { margin: 0; }
.dk-primary-nav ul a { display: block; white-space: nowrap; }
.dk-primary-nav .current-menu-item > a { color: var(--dk-ink); font-weight: 600; }
.dk-primary-nav.dk-open ul { flex-direction: column; align-items: stretch; gap: 0; }
.dk-primary-nav.dk-open ul a { padding: 12px; border-bottom: 1px solid var(--dk-line); }
.dk-primary-nav.dk-open {
	display: flex; flex-direction: column; align-items: stretch;
	position: absolute; left: 0; right: 0; top: 100%;
	background: var(--dk-surface); border-bottom: 1px solid var(--dk-line);
	padding: 8px 20px 16px;
}
.dk-primary-nav a {
	padding: 10px 12px; border-radius: var(--dk-r);
	color: var(--dk-ink-2); text-decoration: none; font-size: 14px;
}
.dk-primary-nav a:hover { background: var(--dk-subtle); color: var(--dk-ink); }
.dk-nav-cta,
.dk-primary-nav .dk-nav-cta {
	background: var(--dk-accent); color: var(--dk-on-accent);
	padding: 12px 20px; border-radius: 0; font-weight: 600; font-size: 13px;
}
.dk-primary-nav .dk-nav-cta:hover { background: var(--dk-ink-2); color: var(--dk-on-accent); }

.dk-menu-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; padding: 0;
	background: none; border: 1px solid var(--dk-line); border-radius: var(--dk-r);
	cursor: pointer;
}
.dk-hamburger, .dk-hamburger::before, .dk-hamburger::after {
	display: block; width: 18px; height: 1.5px; background: var(--dk-ink);
	transition: transform .15s;
}
.dk-hamburger { position: relative; }
.dk-hamburger::before { content: ""; position: absolute; top: -6px; }
.dk-hamburger::after { content: ""; position: absolute; top: 6px; }

/* ---------- kahraman alanı ---------- */

.dk-hero { padding: 64px 0 56px; border-bottom: 1px solid var(--dk-line); }
.dk-hero h1 {
	font-size: clamp(36px, 9vw, 70px); font-weight: 600;
	line-height: 1.02; letter-spacing: -.035em; margin: 0 0 24px;
}
.dk-bid { max-width: 640px; }
.dk-bid h2 { margin: 28px 0 8px; font-size: 18px; }
.dk-bid .dk-alert p { margin: 0; }
.dk-bid .dk-fact.dk-bid-ben { background: var(--dk-subtle); padding-left: 12px; padding-right: 12px; }
.dk-bid .dk-bid-form .dk-field { margin: 12px 0 16px; }
.dk-teklif-kutu { max-width: 640px; }
.dk-teklif .dk-field { margin-bottom: 16px; }
.dk-teklif textarea.dk-input { min-height: 96px; resize: vertical; }
.dk-teklif .dk-check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 20px; font-size: 14px; color: var(--dk-ink-2); }
.dk-teklif .dk-check input { margin-top: 3px; }
.dk-teklif-coklu { display: grid; gap: 4px; }
.dk-teklif-coklu .dk-check { margin: 0; }
.dk-teklif-bal { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dk-hero-meta { margin: 14px 0 0; font-size: 14px; color: var(--dk-ink-2); }
.dk-hero-sub { font-size: 17px; line-height: 1.6; color: var(--dk-ink-2); max-width: 44ch; margin: 0 0 24px; }
.dk-hero .dk-btn-lg { margin-top: 4px; }
/* Genis ekranda baslik solda, aciklama ve eylem sagda. Iki sutun ayni taban
   cizgisine oturunca bosluk duzensiz degil, kurgulu gorunuyor. */
@media (min-width: 900px) {
	.dk-hero-inner { display: grid; grid-template-columns: 1.5fr 1fr; gap: 64px; align-items: end; }
	.dk-hero h1 { margin-bottom: 0; }
}

/* ---------- düğmeler ---------- */

.dk-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 40px; padding: 8px 20px;
	border: 1px solid var(--dk-line-strong); border-radius: var(--dk-r);
	background: var(--dk-surface); color: var(--dk-ink);
	font: inherit; font-weight: 600; font-size: 14px;
	text-decoration: none; cursor: pointer;
	transition: background .12s, border-color .12s, color .12s;
}
.dk-btn:hover { background: var(--dk-subtle); }
.dk-btn:active { transform: translateY(1px); }
.dk-btn:disabled, .dk-btn[disabled] { opacity: .45; cursor: not-allowed; }

.dk-btn-primary, .dk-btn--primary {
	background: var(--dk-accent); border-color: var(--dk-accent); color: var(--dk-on-accent);
}
.dk-btn-primary:hover, .dk-btn--primary:hover { background: var(--dk-ink-2); border-color: var(--dk-ink-2); color: var(--dk-on-accent); }

.dk-btn-secondary, .dk-btn--ghost { background: transparent; }
.dk-btn-secondary:hover, .dk-btn--ghost:hover { background: var(--dk-subtle); }

.dk-btn-lg { min-height: 48px; padding: 12px 28px; font-size: 15px; }

.dk-link { background: none; border: 0; padding: 0; font: inherit; color: var(--dk-ink); text-decoration: underline; cursor: pointer; }

/* ---------- kartlar ---------- */

.dk-service-grid, .dk-helpers-grid, .dk-favorites-grid, .dk-blog-grid, .dk-cards {
	display: grid; grid-template-columns: 1fr; gap: 16px;
}
.dk-service-card, .dk-helper-card, .dk-card {
	background: var(--dk-surface);
	border: 1px solid var(--dk-line);
	border-radius: var(--dk-r-lg);
	overflow: hidden;
	transition: border-color .12s, box-shadow .12s;
}
.dk-service-card:hover, .dk-helper-card:hover { border-color: var(--dk-ink); }
.dk-service-card img, .dk-helper-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.dk-service-card h3, .dk-helper-card-body h3 { margin: 0 0 6px; font-size: 16px; }
/*
 * TEMIZLIKCI KARTI BASLIGI: yuz + ad yan yana.
 *
 * `.dk-helper-card img` kurali (yukarida) 16/10 tam genislik resim icin
 * yazilmis; ozgullugu (0,1,1) `.dk-helper-photo` sinifindan (0,1,0) YUKSEK
 * oldugu icin avatari ezip yayiyordu. Bu yuzden kural kart icinde ACIKCA
 * yeniden yazilir -- olculdu, yoksa yuz sirit gibi uzuyor.
 */
.dk-helper-card-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 0; }
.dk-helper-card-head h3 { margin: 0; font-size: 16px; }
.dk-helper-card .dk-helper-photo,
.dk-helper-card .dk-avatar-placeholder {
	flex: 0 0 auto; width: 56px; height: 56px; aspect-ratio: 1 / 1;
	border-radius: 50%; object-fit: cover;
	background: var(--dk-subtle); border: 1px solid var(--dk-line);
	display: flex; align-items: center; justify-content: center;
	font-weight: 600; font-size: 18px; color: var(--dk-ink-2);
}
/*
 * "Nasil ise alacagim?" kutusu KARTLARDAN ONCE. Aciklama listenin altinda
 * dipnot olarak duruyordu; ziyaretci once kafasi karisik butun listeyi
 * geziyor, sebebi en sonda ogreniyordu.
 */
.dk-directory-nasil {
	background: var(--dk-subtle);
	border: 1px solid var(--dk-line);
	padding: 16px;
	margin: 0 0 20px;
	display: flex; flex-direction: column; gap: 10px;
}
.dk-directory-nasil p { margin: 0; max-width: 68ch; color: var(--dk-ink-2); font-size: 14px; }

/* "Bu temizlikciyle rezervasyon": yalniz daha once calisilan kisilerde. */
.dk-helper-card-body .dk-helper-cta { margin: 12px 0 0; }
.dk-helper-cta .dk-btn { width: 100%; justify-content: center; }

/* Tercih edilen kisinin musait oldugu saat isaretlenir. */
.dk-slot--tercih { border-color: var(--dk-ink); font-weight: 600; }
.dk-slot-uyari { margin: 0 0 10px; }
.dk-directory-nasil p:last-child { margin-top: 2px; }

.dk-helper-card-head { align-items: flex-start; }
.dk-helper-card-id { min-width: 0; }
.dk-helper-card-body { padding: 12px 16px 16px; }

/*
 * KARTTA HIYERARSI YOKTU.
 *
 * Onceki halde govde su siradaydi ve HEPSI ayni boyut/renkteydi:
 * puan · tamamlanan is · kidem · tanitim · etiketler · ilce · rozet.
 * Alti gri satir ust uste; gozun girecegi bir yer yok. En guclu iki kanit
 * -- neyin dogrulandigi ve musterilerin kendi sozleri -- en altta, en kucuk
 * ogelerdi. Ustelik dogrulamanin AYRINTISI yalnizca `title` icindeydi, yani
 * dokunmatik ekranda hic gorunmuyordu.
 *
 * Yeni sira: yuz+ad+dogrulama · musteri sozleri · sayilar · tanitim · ilce.
 */
.dk-helper-verified {
	display: flex; align-items: center; gap: 6px;
	margin: 2px 0 0; font-size: 12px; font-weight: 600;
	color: var(--dk-ink); line-height: 1.3;
}
.dk-verified-mark {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 16px; height: 16px; border-radius: 50%;
	background: var(--dk-accent); color: var(--dk-on-accent);
	font-size: 11px; line-height: 1;
}

/* Musterinin kendi sozu: kartin en ikna edici parcasi, en gorunur yerde. */
.dk-helper-strengths { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.dk-badge-strength { border-color: var(--dk-ink); color: var(--dk-ink); }

/* Sayilar ikincil: tek satir, kucuk, gri. */
/*
 * OZGULLUK TUZAGI. `.dk-helper-card-body p` (0,1,1) asagida duruyor ve
 * `.dk-helper-facts` (0,1,0) ile `.dk-helper-bio` gibi tek sinifli kurallari
 * EZIYOR. Olculdu: sayilar satirina 13px yazilmisti, ekranda 14px ciziliyordu
 * -- yani "ikincil" olsun diye kucultulen satir aslinda hic kuculmemisti.
 * Ayni tuzak bu dosyada daha once `.dk-helper-photo` icin de yasandi.
 */
.dk-helper-card-body .dk-helper-facts {
	display: flex; flex-wrap: wrap; gap: 6px;
	margin: 0 0 8px; font-size: 13px; color: var(--dk-ink-2);
}
.dk-helper-card-body .dk-helper-facts span[aria-hidden] { color: var(--dk-ink-3); }

.dk-helper-card-body .dk-helper-bio { font-size: 13px; color: var(--dk-ink-2); }

/*
 * ILCE OVGU DEGIL, KAPSAM BILGISI. Once "Sisli" ile "Titiz calisti" ayni
 * rozeti giyiyordu; biri cografya kaydi, digeri musterinin sozu. Ustelik
 * ilce bir baglantiydi ama baglanti gibi durmuyordu.
 */
.dk-helper-card-body .dk-helper-zones { align-items: baseline; font-size: 13px; margin-bottom: 0; }
.dk-helper-zones-label { color: var(--dk-ink-3); font-size: 12px; }
.dk-helper-zones a { color: var(--dk-ink-2); text-decoration: underline; text-underline-offset: 2px; }
.dk-helper-zones a:hover { color: var(--dk-ink); }
/* Rezervasyon kartinda temizlikci satiri: yuz + ad yan yana. */
.dk-provider-line { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 6px; }
.dk-provider-line .dk-card__meta { margin: 0; }
.dk-provider-line .dk-helper-photo,
.dk-provider-line .dk-avatar-placeholder {
	flex: 0 0 auto; width: 44px; height: 44px; aspect-ratio: 1 / 1;
	border-radius: 50%; object-fit: cover;
	background: var(--dk-subtle); border: 1px solid var(--dk-line);
	display: flex; align-items: center; justify-content: center;
	font-weight: 600; font-size: 15px; color: var(--dk-ink-2);
}
.dk-helper-card-body p { margin: 0 0 6px; color: var(--dk-ink-2); font-size: 14px; }
.dk-helper-zones { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.dk-service-card .dk-price, .dk-price { font-weight: 600; }
/* Satin alinamayan hizmet: "Yakinda" fiyat gibi okunmasin. */
.dk-price--soon { font-weight: 500; color: var(--dk-ink-3); }

.dk-card { padding: 16px; }
.dk-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dk-card__when { font-weight: 600; }
.dk-card__meta { color: var(--dk-ink-3); font-size: 13px; margin: 4px 0 0; }
.dk-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dk-card__actions .dk-btn { min-height: 34px; padding: 6px 14px; font-size: 13px; }

.dk-directory-cta { margin-top: 24px; }
.dk-note { color: var(--dk-ink-3); font-size: 13px; }

/* ---------- güven / değer blokları ---------- */

/* Kutu degil, sac teli cizgiyle ayrilmis sutunlar: sayfada uc kenarlikli
   kart yerine tek bir okuma bandi olusuyor. */
.dk-trust-badges, .dk-value-props { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
.dk-trust-badge, .dk-value-prop {
	display: flex; gap: 12px; align-items: flex-start;
	padding: 20px 0; background: none;
	border: 0; border-top: 1px solid var(--dk-line); border-radius: 0;
}
.dk-trust-badge:first-child, .dk-value-prop:first-child { border-top: 0; }
.dk-trust-badge strong, .dk-value-prop strong { display: block; font-size: 14px; margin-bottom: 2px; }
.dk-trust-badge p, .dk-value-prop p { margin: 0; font-size: 13px; color: var(--dk-ink-2); }
.dk-trust-icon { flex: 0 0 auto; font-size: 18px; line-height: 1.4; filter: grayscale(1); }

/* ---------- rozetler ----------
   Renk yok: ayrım tonla ve kenarlıkla yapılır, metin zaten durumu söyler. */

.dk-badge {
	display: inline-block; padding: 2px 10px; border-radius: 99px;
	border: 1px solid var(--dk-line-strong);
	background: var(--dk-surface); color: var(--dk-ink-2);
	font-size: 12px; font-weight: 600; text-decoration: none;
}
a.dk-badge:hover { background: var(--dk-subtle); color: var(--dk-ink); }
.dk-badge-verified, .dk-badge--done, .dk-status-completed {
	background: var(--dk-accent); color: var(--dk-on-accent); border-color: var(--dk-accent);
}
.dk-badge-status, .dk-badge--warn { border-style: dashed; color: var(--dk-ink); }
.dk-badge-backup, .dk-badge--off, .dk-status-cancelled {
	color: var(--dk-ink-3); border-color: var(--dk-line);
	text-decoration: line-through;
}

/* ---------- formlar ---------- */

.dk-form-row, .dk-field { margin-bottom: 16px; }
.dk-form-row label, .dk-label, .dk-field > label {
	display: block; margin-bottom: 6px;
	font-size: 13px; font-weight: 600; color: var(--dk-ink);
}
.dk-label em { font-style: normal; font-weight: 400; color: var(--dk-ink-3); }
.dk-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/*
 * TIP LISTESI EKSIKTI. `url` bu listede yoktu; WordPress'in yorum formundaki
 * "Web sitesi" alani type="url" oldugu icin butun kurallarin disinda kaliyor,
 * tarayici varsayilaniyla ciziliyordu. Olculdu: ad ve e-posta 680x45 px,
 * hemen altindaki web sitesi alani 247x21 px ve 2px inset kenarlikli.
 * Ayni satirda uc alan, ucu de baska gorunuyordu.
 */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], input[type="search"], input[type="date"], input[type="time"],
input[type="url"],
select, textarea, .dk-input {
	/*
	 * 44px, parmakla dokunmanın alt sınırı. 40px'te ölçtüm: metrekare alanı
	 * 343x41 çıkıyordu, yani 3px eksikti. Küçük bir fark ama sayfadaki tek
	 * eksik hedef oydu; sınırın altında kalan hiçbir şey kalmasın.
	 */
	width: 100%; min-height: 44px; padding: 10px 12px;
	background: var(--dk-surface); color: var(--dk-ink);
	border: 1px solid var(--dk-line-strong); border-radius: var(--dk-r);
	font: inherit; font-size: 15px;
}
input::placeholder, textarea::placeholder, .dk-input::placeholder { color: var(--dk-ink-3); }
textarea, textarea.dk-input { min-height: 96px; resize: vertical; }
select { appearance: auto; }

.dk-input--code {
	font-size: 24px; letter-spacing: .5em; text-align: center;
	font-variant-numeric: tabular-nums; padding-left: .5em;
}
.dk-inline { display: flex; gap: 8px; }
.dk-inline .dk-input { flex: 1; }

.dk-form-check, .dk-check { display: flex; align-items: flex-start; gap: 10px; }
.dk-form-check label, .dk-check { font-size: 14px; font-weight: 400; color: var(--dk-ink-2); }
.dk-form-check input[type="checkbox"], .dk-check input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--dk-ink); }

.dk-hint { font-size: 13px; color: var(--dk-ink-2); margin: 6px 0 0; }

/*
 * FIYAT HAVUZU ALANLARI (Temizlikci Ol formu).
 *
 * `fieldset` tarayici varsayilaniyla kendi cercevesini ve ic bosluklarini
 * getirir; sitede baska hicbir yerde oyle bir kutu yok. Sifirlanir, yerine
 * formun kendi dili kullanilir.
 */
.dk-fieldset { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.dk-fieldset legend {
	padding: 0; margin: 0 0 6px;
	font-size: 13px; font-weight: 600; color: var(--dk-ink);
}
.dk-fieldset .dk-hint { margin: 0 0 12px; }
.dk-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dk-form-grid .dk-form-row { margin-bottom: 0; }

/* Gun secimi: dokunulabilir etiketler, kutucuk degil kart gibi. */
.dk-day-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.dk-day-pick {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 12px; min-height: 44px;
	border: 1px solid var(--dk-line-strong); background: var(--dk-surface);
	font-size: 14px; cursor: pointer;
}
.dk-day-pick input { width: 18px; height: 18px; min-height: 0; margin: 0; flex: 0 0 auto; accent-color: var(--dk-ink); }
.dk-day-pick:hover { background: var(--dk-subtle); }
.dk-day-pick:has(input:checked) { border-color: var(--dk-ink); font-weight: 600; }

.dk-rates { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.dk-rates legend {
	padding: 0; margin: 0 0 6px;
	font-size: 13px; font-weight: 600; color: var(--dk-ink);
}
.dk-rates .dk-hint { margin: 0 0 12px; }
.dk-rate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dk-rate-row { min-width: 0; }
.dk-rate-row label {
	display: block; margin-bottom: 6px;
	font-size: 13px; font-weight: 400; color: var(--dk-ink-2);
}
.dk-rate-input { display: flex; align-items: center; gap: 8px; }
/*
 * Ozgulluk: genel `input[type="number"]` kurali width:100% veriyor ve
 * satiri kaydiriyor. Kap icinde acikca esnetilir.
 */
.dk-rate-input input[type="number"] { width: auto; flex: 1 1 auto; min-width: 0; }
.dk-rate-birim { flex: 0 0 auto; font-size: 13px; color: var(--dk-ink-3); white-space: nowrap; }

@media (max-width: 560px) {
	.dk-rate-grid { grid-template-columns: 1fr; }
}
.dk-hint--muted { color: var(--dk-ink-3); }

/* Durum mesajı renge DEĞİL, kenarlığa ve ağırlığa dayanır. */
.dk-form-message, .dk-notice, .dk-alert {
	margin: 12px 0; padding: 12px 14px;
	border: 1px solid var(--dk-line-strong); border-left-width: 4px;
	border-radius: var(--dk-r); background: var(--dk-subtle);
	font-size: 14px;
}
.dk-form-message:empty, .dk-alert:empty { display: none; padding: 0; border: 0; margin: 0; }
.dk-form-message.dk-error, .dk-alert--error, .dk-notice-error {
	border-left-color: var(--dk-ink); font-weight: 600; color: var(--dk-ink);
}
.dk-form-message.dk-success, .dk-notice-success { border-left-color: var(--dk-ink); }

.dk-empty { padding: 24px; border: 1px dashed var(--dk-line-strong); border-radius: var(--dk-r-lg); color: var(--dk-ink-2); text-align: center; }

/* ---------- sekmeler ---------- */

/*
   SEKME ŞERİDİ YATAY KAYAR.

   Eskiden yalnız `display: flex` vardı, başka hiçbir kural yoktu: dar ekranda
   flex kutuları BÜZÜYORDU. 375 px'te ölçüldü:

     Hesabım (3 sekme)     şerit 343 px, içerik 353 px. "Düzenli temizliklerim"
                           185 px yerine 114 px'e sıkışıp İKİ SATIRA kırılıyor,
                           "Hesabım" şeridin 10 px dışında kalıyor.
     Temizlikçi (5 sekme)  48 px taşma. "Profil" sekmesi hiç görünmüyor ve
                           kaydırma olmadığı için ULAŞILAMIYOR.

   Üç uzun Türkçe başlık 375 px'e sığmıyor — yazıyı kısaltmak yerine (başlıklar
   §10 gereği müşterinin dilidir) taşma kaydırmaya çevrilir. Büzülme kapatılır
   (flex: 0 0 auto), satır kırılması kapatılır (nowrap). Çubuk gizlenir: şerit
   parmakla kayar, 1 px'lik alt çizgi bozulmaz.

   Kenarda yarım kalan sekme, kaydırılabildiğinin işaretidir; onu solduran bir
   maske EKLENMEDİ çünkü maske alt çizgiyi de soldurup şeridi kırık gösterirdi.
   Onun yerine seçilen sekme JS ile görüş alanına kaydırılır.
*/
.dk-auth-tabs, .dk-tabs {
	display: flex; gap: 4px; border-bottom: 1px solid var(--dk-line); margin-bottom: 20px;
	overflow-x: auto; overflow-y: hidden;
	scroll-snap-type: x proximity; scroll-padding-inline: 4px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; -ms-overflow-style: none;
}
.dk-auth-tabs::-webkit-scrollbar, .dk-tabs::-webkit-scrollbar { width: 0; height: 0; }
.dk-tab {
	flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start;
	min-height: 44px;
	padding: 10px 16px; border: 0; border-bottom: 2px solid transparent;
	background: none; font: inherit; font-weight: 600; font-size: 14px;
	color: var(--dk-ink-3); cursor: pointer;
}
/* Dar ekranda yan boşluk kısılır: aynı şeride daha çok sekme sığar. */
@media (max-width: 599px) {
	.dk-auth-tabs, .dk-tabs { gap: 0; }
	.dk-tab { padding-inline: 12px; }
}
.dk-tab:hover { color: var(--dk-ink); }
.dk-tab.active, .dk-tab.is-on { color: var(--dk-ink); border-bottom-color: var(--dk-ink); }
.dk-tab-panel { display: none; }
.dk-tab-panel.active { display: block; }
/*
   Temizlikçi panelinin sekme gövdesi ve başlığı. Bu iki sınıf eski iki stil
   dosyasının HİÇBİRİNDE tanımlı değildi: panel stilsiz akıyordu. Gizleme
   `hidden` niteliğiyle yapılır (.dk-app [hidden] kuralı).
*/
/*
   ILCE SECIM IZGARASI. 39 ilce alt alta uzun bir liste olurdu; ekrana gore
   sutunlara bolunur. Dokunma hedefi 44px: kutucugun kendisi kucuk ama etiketin
   tamami tiklanabilir.
*/
.dk-ilce-grid {
	display: grid; gap: 2px 12px; margin-top: 8px;
	grid-template-columns: repeat( auto-fill, minmax( 150px, 1fr ) );
}
.dk-ilce-sec {
	display: flex; align-items: center; gap: 8px;
	min-height: 44px; padding: 0 4px;
	font-size: 14px; cursor: pointer;
}
.dk-ilce-sec input { flex: none; width: 18px; height: 18px; }

.dk-pane { padding-top: 8px; }
/* Panel icindeki bolum basligi: uydurma sinif yerine gercek stil. */
.dk-pane h3 { margin: 28px 0 4px; font-size: 16px; }
.dk-pane h3:first-child { margin-top: 0; }
.dk-provider-head {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
	padding: 16px; margin-bottom: 16px;
	background: var(--dk-surface); border: 1px solid var(--dk-line); border-radius: var(--dk-r-lg);
}
.dk-provider-head h2 { margin: 0; font-size: 18px; }
.dk-provider-head p { margin: 0; color: var(--dk-ink-2); font-size: 14px; }

/* =========================================================================
   UYGULAMA — rezervasyon akışı, hesap, temizlikçi paneli
   ========================================================================= */

.dk-app { color: var(--dk-ink); font-family: var(--dk-font); }
.dk-app *, .dk-app *::before, .dk-app *::after { box-sizing: border-box; }
.dk-app [hidden] { display: none !important; }
.dk-app.is-busy { opacity: .6; pointer-events: none; }
.dk-app h1, .dk-app h2, .dk-app h3, .dk-app h4 { color: var(--dk-ink); }

/* Özet şeridi: akış boyunca seçilenler ve fiyat. */
.dk-summary {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 12px 16px; margin-bottom: 16px;
	background: var(--dk-accent); color: var(--dk-on-accent);
	border-radius: var(--dk-r-lg);
}
.dk-summary__text { font-size: 13px; opacity: .85; }
.dk-summary__price { text-align: right; white-space: nowrap; }
.dk-summary__price strong { font-size: 20px; font-weight: 600; }
.dk-summary__price small { display: block; font-size: 11px; opacity: .8; }

.dk-progress { height: 2px; background: var(--dk-line); border-radius: 2px; overflow: hidden; margin-bottom: 16px; }
.dk-progress__bar { height: 100%; background: var(--dk-ink); transition: width .2s; }

.dk-step {
	background: var(--dk-surface);
	border: 1px solid var(--dk-line);
	border-radius: var(--dk-r-lg);
	padding: 24px;
}
.dk-step__head { margin-bottom: 20px; }
.dk-step__no { display: block; font-size: 12px; font-weight: 600; color: var(--dk-ink-3); letter-spacing: .04em; }
.dk-step__title { margin: 4px 0 2px; font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--dk-ink); }
.dk-step__lede { margin: 0; font-size: 14px; color: var(--dk-ink-2); }
.dk-step__body { display: block; }
.dk-step__foot { display: flex; gap: 8px; margin-top: 24px; }
.dk-step__foot .dk-btn { flex: 1; }
.dk-step__foot .dk-btn--ghost { flex: 0 0 auto; }

/* seçim çipleri */
.dk-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 20px; }
.dk-choices--sm { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
.dk-choices--col { grid-template-columns: 1fr; }
.dk-chip {
	min-height: 56px; padding: 10px 8px;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
	border: 1px solid var(--dk-line-strong); border-radius: var(--dk-r);
	background: var(--dk-surface); color: var(--dk-ink);
	font: inherit; cursor: pointer; text-align: center;
	transition: border-color .12s, background .12s, color .12s;
}
.dk-chip:hover { border-color: var(--dk-ink); background: var(--dk-subtle); }
/* Seçili durum yalnız tonla değil, KALIN kenarlıkla da belli olur. */
.dk-chip.is-on {
	background: var(--dk-accent); color: var(--dk-on-accent);
	border-color: var(--dk-accent); box-shadow: inset 0 0 0 1px var(--dk-accent);
}
.dk-chip__label { font-weight: 600; }
.dk-chip__sub { font-size: 12px; opacity: .75; }
.dk-choices--col .dk-chip { flex-direction: row; justify-content: space-between; padding: 14px 16px; text-align: left; }

/* ek hizmetler */
.dk-extras { display: grid; gap: 8px; margin-bottom: 20px; }
/*
 * KUTU UC PARCALI: kutucuk · (ad + kapsam) · fiyat.
 *
 * Once tek satirlik bir esnek kutuydu ve ise yariyordu, cunku icinde yalniz
 * ad ile fiyat vardi. "Neler dahil" metni eklenince ucuncu bir parca oldu ve
 * ad sutununu ezdi: "Cam temizligi" iki satira boluniyordu. Izgaraya
 * gecirildi -- ad ile kapsam ALT ALTA tek sutunda, fiyat sagda, kutucuk
 * solda ve iki satiri birden kapsiyor.
 *
 * Kapsam metni olmayan bir ek hizmette de dogru durur: o zaman tek satir
 * kalir, eski gorunumun aynisi olur.
 */
.dk-extra {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
	column-gap: 12px; align-items: center; padding: 12px 14px;
	border: 1px solid var(--dk-line-strong); border-radius: var(--dk-r);
	background: var(--dk-surface); cursor: pointer;
}
.dk-extra:hover { border-color: var(--dk-ink); }
/*
 * YALNIZ ONAY KUTUSU KÜÇÜLTÜLÜR. Kural "input" seçicisiyle kutu içindeki
 * HER input'a uygulanıyordu — müsaitlik satırında iki saat kutusu da vardı
 * ve üçü de aynı 18x18 hücrede üst üste bindirilip kayboluyordu. Temizlikçi
 * ekran görüntüsü gönderdi: saatler hiç görünmüyor, hangi günün seçili
 * olduğu da belli değildi (bkz. aşağıdaki .dk-extra__saatler ve :checked).
 */
.dk-extra input[type="checkbox"] { width: 18px; height: 18px; grid-column: 1; grid-row: 1 / -1; accent-color: var(--dk-ink); }
/*
 * SEÇİLİ SATIR AÇIKÇA DOLU GÖRÜNÜR. 1 piksellik çerçeve farkı ekran
 * görüntüsünde ayırt edilemiyordu. Satırın tamamı dolar; onay işareti artık
 * tarayıcının onay kutusu çizimine değil bu dolgu rengine bağlı.
 */
.dk-extra:has(input:checked) {
	border-color: var(--dk-ink); background: var(--dk-ink);
}
.dk-extra:has(input:checked) .dk-extra__name,
.dk-extra:has(input:checked) .dk-extra__meta { color: var(--dk-on-accent); }
.dk-extra__name { grid-column: 2; font-weight: 600; font-size: 14px; }
.dk-extra__meta { grid-column: 3; grid-row: 1 / -1; font-size: 12px; color: var(--dk-ink-3); text-align: right; white-space: nowrap; }
/* Müsaitlik satırındaki iki saat kutusu: kendi sütununda, yan yana. */
.dk-extra__saatler { grid-column: 3; display: flex; gap: 8px; }
.dk-extra__saatler input[type="time"] { width: auto; min-width: 96px; }

/* takvim ve saatler */
.dk-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 16px; scrollbar-width: thin; }
.dk-day {
	flex: 0 0 auto; min-width: 64px; padding: 10px 12px;
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	border: 1px solid var(--dk-line-strong); border-radius: var(--dk-r);
	background: var(--dk-surface); color: var(--dk-ink); font: inherit; cursor: pointer;
}
.dk-day span { font-weight: 600; font-size: 15px; }
.dk-day small { font-size: 11px; color: var(--dk-ink-3); }
.dk-day.is-on { background: var(--dk-accent); color: var(--dk-on-accent); border-color: var(--dk-accent); }
.dk-day.is-on small { color: inherit; opacity: .8; }

.dk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
/* Boş durum metni ızgara hücresine sıkışıp kelime kelime alt alta diziliyordu. */
.dk-slots > p, .dk-slots > .dk-empty, .dk-slots > .dk-hint { grid-column: 1 / -1; margin: 0; }
.dk-slot {
	min-height: 44px; padding: 8px;
	border: 1px solid var(--dk-line-strong); border-radius: var(--dk-r);
	background: var(--dk-surface); color: var(--dk-ink); font: inherit; font-weight: 600; cursor: pointer;
}
.dk-slot:hover { border-color: var(--dk-ink); background: var(--dk-subtle); }
.dk-slot.is-on { background: var(--dk-accent); color: var(--dk-on-accent); border-color: var(--dk-accent); }

/* kayıtlı adresler */
.dk-saved { display: grid; gap: 8px; margin-bottom: 16px; }
.dk-saved__item {
	padding: 12px 14px; text-align: left; font: inherit;
	border: 1px solid var(--dk-line-strong); border-radius: var(--dk-r);
	background: var(--dk-surface); color: var(--dk-ink); cursor: pointer;
}
.dk-saved__item.is-on, .dk-saved__item:hover { border-color: var(--dk-ink); background: var(--dk-subtle); }

/* özet dökümü */
.dk-recap { list-style: none; margin: 0 0 16px; padding: 0; }
.dk-recap li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--dk-line); }
.dk-recap li span { color: var(--dk-ink-3); font-size: 13px; }
.dk-recap li strong { font-weight: 600; text-align: right; }
/*
 * Dikkat isteyen metin: suresi dolan belge, silmeyi engelleyen sebep.
 * Renk TASIYICI DEGIL -- metnin kendisi zaten "Suresi doldu" der; alt cizgi
 * yalnizca goze carpsin diyedir. Dosyanin geri kalani da ayni kurala uyuyor.
 *
 * Kural GENEL tutuluyor: once yalniz `.dk-recap li strong` altinda
 * tanimlanmisti ve operasyon kartinda ayni sinif yazildiginda hicbir sey
 * yapmiyordu -- stilsiz sinif, olmayan bir vurgu demektir.
 */
/*
 * Kart icinde acilan kucuk form (randevu erteleme). Karttan AYRILMASI icin
 * ustten bir cizgi ve bosluk; kendi kutusu gibi durmasin, isteyen "bu hangi
 * randevunun formuydu" diye sormasin.
 */
.dk-ertele { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--dk-line); }
.dk-ertele .dk-field { margin-bottom: 10px; }

.dk-uyari { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 600; }

.dk-lines { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: 14px; }
.dk-lines td { padding: 8px 0; border-bottom: 1px solid var(--dk-line); }
.dk-lines__amt { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dk-lines__total td { font-weight: 600; font-size: 16px; border-bottom: 0; padding-top: 12px; }

/* tamamlandı */
.dk-done { text-align: center; padding: 32px 0; }
.dk-done__mark {
	display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; margin-bottom: 16px; border-radius: 50%;
	background: var(--dk-accent); color: var(--dk-on-accent); font-size: 26px;
}
.dk-code {
	display: inline-block; padding: 10px 20px; margin: 8px 0;
	border: 1px solid var(--dk-line-strong); border-radius: var(--dk-r);
	background: var(--dk-subtle);
	font-size: 26px; font-weight: 600; letter-spacing: .3em; font-variant-numeric: tabular-nums;
}

/* göstergeler */
.dk-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 20px; }
/*
   KPI SERIDI PANEL BASLIGINDA BUZULUYORDU. `.dk-provider-head` bir flex
   kapsayici; serit orada `flex: 0 1 auto` ile en dar haline dusuyor ve
   `auto-fit` tek sutun uretiyordu. Olculdu (400 px ekran): kapsayici 360 px
   iken serit 120 PX kaliyor, uc kutu alt alta diziliyor ve 240 px bos gidiyor.
   Buyumesine izin verilince ayni kural 2-3 sutun uretir.
*/
.dk-provider-head .dk-kpis { flex: 1 1 240px; margin-bottom: 0; }
.dk-kpi, .dk-earnings-summary .dk-kpi-card {
	padding: 14px 16px; background: var(--dk-surface);
	border: 1px solid var(--dk-line); border-radius: var(--dk-r-lg);
}
.dk-kpi__v, .dk-earnings-summary .dk-kpi-value { display: block; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dk-kpi__l, .dk-earnings-summary .dk-kpi-label { display: block; margin-top: 2px; font-size: 12px; color: var(--dk-ink-3); }
.dk-earnings-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }

.dk-grid { display: grid; gap: 12px; }
.dk-cards { display: grid; gap: 12px; }

/* müsaitlik ve profil */
.dk-availability-list { display: grid; gap: 8px; }
.dk-availability-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dk-availability-row input[type="time"] { width: auto; min-width: 120px; }
.dk-toggle { display: inline-flex; align-items: center; gap: 8px; }
.dk-toggle input { width: 18px; height: 18px; accent-color: var(--dk-ink); }

.dk-helper-profile-head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.dk-avatar-lg, .dk-avatar-placeholder, .dk-helper-photo {
	width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
	background: var(--dk-subtle); border: 1px solid var(--dk-line);
	display: flex; align-items: center; justify-content: center; font-weight: 600;
}
.dk-helper-meta { color: var(--dk-ink-2); font-size: 14px; }

/* yorumlar ve puanlar */
.dk-review-list, .dk-booking-list, .dk-review-prompt-list { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
.dk-review-item, .dk-booking-card, .dk-review-prompt-card {
	padding: 14px 16px; background: var(--dk-surface);
	border: 1px solid var(--dk-line); border-radius: var(--dk-r-lg);
}
.dk-review-date, .dk-booking-date { font-size: 12px; color: var(--dk-ink-3); }
.dk-review-prompt-card .dk-helper-name { font-weight: 600; }
.dk-review-stars { letter-spacing: .1em; }
/* Emoji doğası gereği renklidir; siyah-beyaz sistemde gri tona indirilir. */
.dk-review-stars, .dk-helper-rating, .dk-helper-card-body p, .dk-trust-icon, .dk-mobile-tabbar .dk-icon,
.dk-badge, .dk-value-prop > span:first-child { filter: grayscale(1); }
/*
 * YILDIZLAR.
 *
 * Bu kural dosyada zaten duruyordu ama HICBIR YERDE kullanilmiyordu: ekran
 * degerlendirmeyi iki window.prompt ile aliyor, musteriye 1-5 arasi bir sayi
 * YAZDIRIYORDU. Stil olu, akis eziyetliydi.
 *
 * DOKUNMA HEDEFI 44px. Onceki hali 26px yaziydi; parmakla vurulacak bir sey
 * icin kucuk. Dosyanin geri kalani da 44px kuralina uyuyor (bkz. sekmeler,
 * ilce secimi).
 *
 * Sira TERS: DOM'da 5'ten 1'e dizilir ki `input:checked ~ label` secilenden
 * KUCUK yildizlari da boyayabilsin; row-reverse ile ekranda 1..5 gorunur.
 */
.dk-star-rating { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.dk-star-rating input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dk-star-rating label {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; min-height: 44px;
	font-size: 30px; line-height: 1;
	color: var(--dk-line-strong); cursor: pointer; filter: grayscale(1);
	-webkit-tap-highlight-color: transparent; user-select: none;
}
.dk-star-rating input:checked ~ label,
.dk-star-rating label:hover, .dk-star-rating label:hover ~ label { color: var(--dk-ink); }
.dk-star-rating input:focus-visible + label { outline: 2px solid var(--dk-ink); outline-offset: 2px; }

/* Kart icinde acilan degerlendirme kutusu. */
.dk-degerlendir { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--dk-line); }
.dk-degerlendir .dk-label { margin: 0 0 4px; }
.dk-degerlendir textarea { margin: 10px 0; }
.dk-degerlendir .dk-hint { margin: 10px 0 6px; }
/*
 * Hazir etiketler. Yazi yazmak zorunlu degil: soylenecek seyler secilebilir
 * duruyor. Secili etiket RENKLE degil kenarlik ve agirlikla ayrilir --
 * dosyanin geri kalani da renge tek basina yuk bindirmiyor.
 */
.dk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* Dizin kartinda musterilerin soyledigi guclu yanlar. */
.dk-helper-strengths { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.dk-chips .dk-chip { min-height: 44px; flex-direction: row; padding: 10px 14px; }

/* Metin gibi duran dugme (cumle icinde bag). */
.dk-link {
	background: none; border: 0; padding: 0; font: inherit; color: inherit;
	text-decoration: underline; cursor: pointer;
}

/* filtre çubuğu */
.dk-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.dk-filter-bar input, .dk-filter-bar button { width: auto; }
.dk-filter-bar button { min-height: 40px; padding: 8px 16px; border: 1px solid var(--dk-line-strong); border-radius: var(--dk-r); background: var(--dk-surface); font: inherit; cursor: pointer; }

/* konum dizini */
.dk-location-directory { display: grid; gap: 24px; }
.dk-location-directory h2, .dk-location-directory-group h3 { font-size: 18px; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--dk-line); }
.dk-location-list, .dk-location-directory-group ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px; }
.dk-location-list a, .dk-location-directory-group li a { display: block; padding: 6px 8px; border-radius: var(--dk-r); color: var(--dk-ink-2); text-decoration: none; font-size: 14px; }
.dk-location-list a:hover, .dk-location-directory-group li a:hover { background: var(--dk-subtle); color: var(--dk-ink); }

.dk-breadcrumbs { font-size: 13px; color: var(--dk-ink-3); margin: 16px 0; }
.dk-breadcrumbs a { color: var(--dk-ink-2); }

/* ---------- blog ---------- */

.dk-blog-featured-img { width: 100%; border-radius: var(--dk-r-lg); margin-bottom: 20px; }
.dk-blog-content { max-width: 68ch; font-size: 16px; line-height: 1.7; }
.dk-blog-content h2 { margin-top: 32px; }
.dk-blog-content img { border-radius: var(--dk-r); margin: 20px 0; }
.dk-blog-content blockquote { margin: 20px 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--dk-ink); color: var(--dk-ink-2); }
.dk-blog-meta, .dk-blog-card-date { font-size: 13px; color: var(--dk-ink-3); }
.dk-blog-meta a { color: var(--dk-ink-2); }
.dk-blog-card-body { padding: 16px; }
.dk-blog-card-excerpt { color: var(--dk-ink-2); font-size: 14px; }
.dk-blog-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }

.dk-author-box { display: flex; gap: 14px; align-items: flex-start; padding: 16px; margin: 32px 0; background: var(--dk-subtle); border-radius: var(--dk-r-lg); }
.dk-author-box img { width: 56px; height: 56px; border-radius: 50%; }
.dk-author-box p { margin: 4px 0 0; font-size: 14px; color: var(--dk-ink-2); }

/*
 * ILGILI YAZILAR. Kart degil liste: uc baslik yan yana kart olsaydi ayni
 * sayfada ucuncu bir kart dili daha kurulurdu. Yazi sayfasi bir metin
 * sayfasi; burada baglanti baglanti gibi durur.
 */
.dk-related { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--dk-line); }
.dk-related-title { font-size: 20px; margin: 0 0 12px; }
.dk-related-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.dk-related-list a {
	display: block; padding: 12px 0;
	border-bottom: 1px solid var(--dk-line);
	text-decoration: none;
}
.dk-related-list li:last-child a { border-bottom: 0; }
.dk-related-list a:hover .dk-related-baslik { text-decoration: underline; text-underline-offset: 2px; }
.dk-related-baslik { display: block; font-weight: 600; color: var(--dk-ink); }
.dk-related-ozet { display: block; margin-top: 2px; font-size: 13px; color: var(--dk-ink-2); }

.dk-comments-wrap { margin-top: 40px; }
.dk-comments-title { font-size: 20px; }
.dk-comment-list, .dk-comment-list ol { list-style: none; margin: 0; padding: 0; }
.dk-comment-list ol { padding-left: 24px; }
.dk-comment-list .comment-body { padding: 14px 0; border-bottom: 1px solid var(--dk-line); }
/*
 * ISIM ILE TARIH AYNI BOYUTTAYDI. WordPress yazar adini `.comment-meta`
 * icine koyuyor; kap 12px oldugu icin ad da 12px'e dusuyor ve yorumu YAZAN
 * KISI, yaninda duran tarihten hicbir bicimde ayrilmiyordu. 32px'lik
 * avatarin yaninda 12px isim ayrica orantisiz duruyor.
 */
.dk-comment-list .comment-meta { font-size: 12px; color: var(--dk-ink-3); }
.dk-comment-list .comment-author { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--dk-ink); }
.dk-comment-list .comment-author img { width: 32px; height: 32px; border-radius: 50%; }
.dk-comment-list .reply a { font-size: 13px; }
.dk-comment-form textarea { min-height: 120px; }

/*
 * YORUM FORMUNUN YARISI TEMANIN DISINDAYDI.
 *
 * Yorum alanini tema kendisi basiyor (.dk-form-row) ve duzgun gorunuyordu;
 * ad, e-posta, web sitesi ve cerez onayini ise WordPress kendi isaretlemesiyle
 * uretiyor. O isaretleme site formlarinin sinifini tasimadigi icin hicbir
 * kural tutmuyordu. Olcum:
 *
 *   Yorumunuz etiketi : block · 13px · 600 · altinda 6px bosluk
 *   Ad etiketi        : inline · 16px · 400 · altinda bosluk yok
 *   Cerez kutusu      : 13x13, hizasiz  (sitenin geri kalani 18x18, 10px aralikli)
 *   Satir araligi     : 16px ile 12px karisik
 *
 * Yani ayni formda iki ayri tasarim vardi. Cozum yeni bir gorunum uydurmak
 * degil, WordPress'in isaretlemesini VAR OLAN form sistemine baglamak.
 */
.dk-comment-form p { margin: 0 0 16px; }
.dk-comment-form .form-submit { margin-bottom: 0; }
.dk-comment-form label {
	display: block; margin-bottom: 6px;
	font-size: 13px; font-weight: 600; color: var(--dk-ink);
}
.dk-comment-form .comment-notes,
.dk-comment-form .required-field-message { font-size: 13px; color: var(--dk-ink-2); }
/*
 * Zorunlu alan yildizi icin AYRI BIR RENK YOK. Paletin tamami tek renk
 * uzerine kurulu; buraya kirmizi eklemek sistemde olmayan bir rol icat
 * etmek olurdu. Yildiz etiketin rengini surdurur.
 */
.dk-comment-form .required { font-weight: 700; }

/* Onay kutusu sitedeki diger onay kutulariyla ayni hizada. */
.dk-comment-form .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 10px; }
.dk-comment-form .comment-form-cookies-consent input[type="checkbox"] {
	width: 18px; height: 18px; min-height: 0; margin: 2px 0 0;
	flex: 0 0 auto; accent-color: var(--dk-ink);
}
.dk-comment-form .comment-form-cookies-consent label {
	margin: 0; font-size: 14px; font-weight: 400; color: var(--dk-ink-2);
}

/* Baslik, yorum listesi basligiyla ayni olcekte. */
.comment-reply-title { font-size: 20px; margin: 0 0 16px; }
.comment-reply-title small { font-size: 13px; font-weight: 400; margin-left: 8px; }

.dk-pagination { display: flex; gap: 4px; justify-content: center; margin: 32px 0; }
.dk-pagination a, .dk-pagination span { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--dk-line); border-radius: var(--dk-r); text-decoration: none; font-size: 14px; }
.dk-pagination .current { background: var(--dk-accent); color: var(--dk-on-accent); border-color: var(--dk-accent); }

.dk-post-nav { display: grid; gap: 12px; margin: 32px 0; }
.dk-post-nav-link { display: block; padding: 14px 16px; border: 1px solid var(--dk-line); border-radius: var(--dk-r-lg); text-decoration: none; }
.dk-post-nav-link:hover { border-color: var(--dk-line-strong); }
.dk-post-nav-label { display: block; font-size: 12px; color: var(--dk-ink-3); }
.dk-post-nav-next { text-align: right; }

.dk-search-form { display: flex; gap: 8px; }
.dk-search-form input[type="search"] { flex: 1; }

.dk-404 { text-align: center; padding: 64px 0; }
.dk-404-links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ---------- alt bar ve mobil sekme ---------- */

/* Alt bilgi siyah: sayfa belirsiz bir griyle degil, net bir kapanisla
   bitiyor. */
.dk-footer { margin-top: 0; padding: 56px 0 24px; background: var(--dk-invert); color: var(--dk-on-invert); border-top: 0; }
.dk-footer-inner { display: grid; gap: 32px; }
.dk-footer p { color: var(--dk-invert-2); }
.dk-footer a { color: var(--dk-invert-2); text-decoration: none; font-size: 14px; }
.dk-footer a:hover { color: var(--dk-on-invert); text-decoration: none; }
.dk-footer-brand {
	font-family: var(--dk-font-display); font-size: 15px; font-weight: 700;
	letter-spacing: .07em; text-transform: uppercase;
	color: var(--dk-on-invert); margin: 0 0 14px;
}
.dk-footer-brand img { height: 34px; width: auto; display: block; }
.dk-footer-col-title {
	margin: 0 0 14px; font-size: 11px; font-weight: 700; letter-spacing: .18em;
	text-transform: uppercase; color: var(--dk-invert-2);
}
.dk-footer-nav { display: flex; flex-direction: column; gap: 11px; list-style: none; margin: 0; padding: 0; }
.dk-footer-bottom {
	display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between;
	margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--dk-invert-line);
}
.dk-footer-copy { margin: 0; font-size: 12px; color: var(--dk-invert-2); }
/*
 * Geliştirme notu: künye satırından da küçük ve daha soluk. Okunur ama
 * sayfanın hiçbir yerinde dikkat çekmez; yeri en alt, telif satırının altı.
 */
.dk-footer-note {
	margin: 10px 0 0; font-size: 11px; line-height: 1.5;
	color: var(--dk-invert-2); opacity: .68;
}
.dk-footer-locations-link { font-weight: 600; }

.dk-mobile-tabbar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
	display: flex; background: var(--dk-surface); border-top: 1px solid var(--dk-line);
	padding-bottom: env(safe-area-inset-bottom);
}
.dk-mobile-tabbar a {
	flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
	padding: 8px 4px; font-size: 11px; color: var(--dk-ink-3); text-decoration: none;
}
.dk-mobile-tabbar .dk-icon { font-size: 18px; filter: grayscale(1); }
.dk-mobile-tabbar a.active, .dk-mobile-tabbar a:hover { color: var(--dk-ink); }
.dk-tabbar-cta { font-weight: 600; }

.dk-sticky-cta {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	background: var(--dk-surface); border-top: 1px solid var(--dk-line);
}

/* ---------- masaüstü ---------- */

@media (min-width: 768px) {
	/*
	 * ALT SEKME ÇUBUĞU TABLETTE KAPANIR.
	 *
	 * 768–1023 arasında hem üstteki hamburger hem alttaki sekme çubuğu
	 * açıktı: iki ayrı gezinme sistemi, kullanıcıya "hangisi asıl menü"
	 * sorusunu sorduruyordu. Alt çubuk bir TELEFON kalıbı; tablette parmak
	 * ekranın altına o kadar sık gitmez ve üstteki menü zaten alt çubuktaki
	 * dört bağlantının hepsini (ve fazlasını) içeriyor — bir şey
	 * ulaşılmaz olmuyor.
	 */
	.dk-mobile-tabbar { display: none; }
	body { font-size: 16px; }
	h1 { font-size: 40px; }
	.dk-trust-badge, .dk-value-prop { border-top: 0; border-left: 1px solid var(--dk-line); padding: 4px 24px; }
	.dk-trust-badge:first-child, .dk-value-prop:first-child { border-left: 0; padding-left: 0; }
	.dk-page-title { font-size: 40px; }
	.dk-section { padding: 64px 0; }
	.dk-service-grid, .dk-helpers-grid, .dk-favorites-grid, .dk-blog-grid { grid-template-columns: repeat(2, 1fr); }
	.dk-trust-badges, .dk-value-props { grid-template-columns: repeat(2, 1fr); }
	.dk-footer-inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; align-items: start; }
	.dk-stats { grid-template-columns: repeat(4, 1fr); }
	.dk-post-nav { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
	.dk-primary-nav { display: flex; }
	.dk-menu-toggle, .dk-mobile-tabbar { display: none; }
	.dk-service-grid, .dk-helpers-grid, .dk-favorites-grid, .dk-blog-grid { grid-template-columns: repeat(3, 1fr); }
	.dk-trust-badges, .dk-value-props { grid-template-columns: repeat(3, 1fr); }
	.dk-step { padding: 32px; }
}

@media (max-width: 767px) {
	body { padding-bottom: 60px; } /* mobil sekme çubuğu içeriği örtmesin */
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- canlı takip ----------
   Temizlik çilingirlikten farklı: iş günler önceden planlanır ve saatlerce
   sürer. Bu yüzden adımlar "kapıya varış"la bitmez; "temizlik sürüyor" ve
   tahmini bitiş asıl bilgidir. Durum renkle değil, dolu/boş nokta ve harf
   ağırlığıyla anlatılır. */
.dk-track { margin: 12px 0; padding: 14px 16px; border: 1px solid var(--dk-line); border-radius: var(--dk-r-lg); background: var(--dk-subtle); }
.dk-track__eta { margin: 0 0 12px; display: flex; align-items: baseline; gap: 8px; }
.dk-track__eta strong { font-size: 26px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dk-track__eta span { color: var(--dk-ink-3); font-size: 13px; }

.dk-track__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dk-track__steps li { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 10px; padding: 5px 0; color: var(--dk-ink-3); font-size: 14px; }
.dk-track__steps li small { font-variant-numeric: tabular-nums; font-size: 12px; }
.dk-track__dot { width: 10px; height: 10px; margin-left: 4px; border-radius: 50%; border: 2px solid var(--dk-line-strong); background: var(--dk-surface); position: relative; }
/* Adımları birleştiren dikey çizgi — sıranın bir akış olduğu görünsün. */
.dk-track__steps li + li .dk-track__dot::before { content: ""; position: absolute; left: 50%; top: -13px; width: 2px; height: 11px; transform: translateX(-50%); background: var(--dk-line); }
.dk-track__steps li.is-done { color: var(--dk-ink-2); }
.dk-track__steps li.is-done .dk-track__dot { background: var(--dk-line-strong); border-color: var(--dk-line-strong); }
.dk-track__steps li.is-active { color: var(--dk-ink); font-weight: 600; }
.dk-track__steps li.is-active .dk-track__dot { background: var(--dk-accent); border-color: var(--dk-accent); box-shadow: 0 0 0 4px var(--dk-subtle), 0 0 0 5px var(--dk-accent); }
.dk-track .dk-btn { margin-top: 12px; width: 100%; }

.dk-code-box { margin: 12px 0; padding: 14px 16px; border: 1px solid var(--dk-line-strong); border-radius: var(--dk-r-lg); text-align: center; }
.dk-code-box .dk-note { margin: 8px 0 0; text-align: left; }

/* ---------- kontör paketleri ----------
   Kartlar tek renkte; "en avantajlı" seçenek renkle değil kalın kenarlık ve
   rozetle öne çıkar. */
.dk-packs { display: grid; gap: 12px; margin-bottom: 16px; }
.dk-pack {
	position: relative; padding: 16px;
	border: 1px solid var(--dk-line-strong); border-radius: var(--dk-r-lg);
	background: var(--dk-surface);
}
.dk-pack.is-on { border-width: 2px; border-color: var(--dk-accent); }
.dk-pack__badge {
	position: absolute; top: -10px; left: 16px;
	padding: 2px 10px; border-radius: 99px;
	background: var(--dk-accent); color: var(--dk-on-accent);
	font-size: 11px; font-weight: 600;
}
.dk-pack__price { display: block; font-size: 26px; font-weight: 600; line-height: 1.15; }
.dk-pack__credit { display: block; margin-bottom: 8px; color: var(--dk-ink-2); font-size: 14px; }
.dk-pack__list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.dk-pack__list li { position: relative; padding-left: 14px; font-size: 13px; color: var(--dk-ink-2); }
.dk-pack__list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--dk-line-strong); }
@media (min-width: 700px) { .dk-packs { grid-template-columns: repeat(3, 1fr); } }

/* Aboneliğin en önemli bilgisi bir sonraki temizliğin tarihidir; kartın
   içinde kaybolmasın diye ayrı ve büyük durur. */
.dk-sub-next { display: flex; flex-direction: column; gap: 2px; margin: 10px 0; padding: 10px 12px; border-left: 3px solid var(--dk-accent); background: var(--dk-subtle); border-radius: 0 var(--dk-r) var(--dk-r) 0; }
.dk-sub-next span { font-size: 12px; color: var(--dk-ink-3); }
.dk-sub-next strong { font-size: 16px; font-weight: 600; }

/* =========================================================================
   UYGULAMA KABUĞU — rezervasyon akışı
   Akış, site içinde bir sayfa değil kendi ekranı olan bir uygulama gibi
   yaşanmalı: tema başlığı/altbilgisi gizlenir, ekran baştan sona akışa
   ayrılır, ana buton alta sabitlenir (telefonu tek elle tutan başparmak
   oraya ulaşır), üstte geri ve adım noktaları durur.
   ========================================================================= */

body.dk-appmode { padding-bottom: 0; overflow: hidden; }
body.dk-appmode .dk-header,
body.dk-appmode .dk-footer,
body.dk-appmode .dk-mobile-tabbar,
body.dk-appmode .dk-page-title,
body.dk-appmode .dk-trust-badges { display: none !important; }
body.dk-appmode .dk-main, body.dk-appmode .dk-content, body.dk-appmode .dk-container { padding: 0; max-width: none; }

.dk-shell {
	position: fixed; inset: 0; z-index: 40;
	display: grid; grid-template-rows: auto 1fr auto;
	background: var(--dk-canvas);
}
/* Yönetici çubuğu varken kabuk onun altından başlar. */
body.admin-bar .dk-shell { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .dk-shell { top: 46px; } }

.dk-shell__top {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 16px; border-bottom: 1px solid var(--dk-line); background: var(--dk-surface);
}
.dk-shell__back {
	flex: 0 0 auto; width: 40px; height: 40px; padding: 0; line-height: 1;
	border: 1px solid var(--dk-line); border-radius: var(--dk-r);
	background: var(--dk-surface); color: var(--dk-ink);
	font-size: 26px; cursor: pointer;
}
.dk-shell__back:hover { background: var(--dk-subtle); }

/* Adım noktaları: aralarında çizgi, tamamlanan dolu, o an bulunulan siyah. */
.dk-dots { flex: 1; display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.dk-dots li {
	position: relative; flex: 1; display: flex; align-items: center; justify-content: center;
	min-width: 0;
}
.dk-dots li + li::before {
	content: ""; position: absolute; left: -50%; right: 50%; top: 50%;
	height: 1px; background: var(--dk-line);
}
.dk-dots span {
	position: relative; z-index: 1;
	display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
	border: 1px solid var(--dk-line-strong); background: var(--dk-surface);
	color: var(--dk-ink-3); font-size: 12px; font-weight: 600;
}
.dk-dots li.is-done span { background: var(--dk-line-strong); border-color: var(--dk-line-strong); color: var(--dk-on-accent); }
.dk-dots li.is-on span { background: var(--dk-accent); border-color: var(--dk-accent); color: var(--dk-on-accent); }
.dk-dots li.is-done + li::before, .dk-dots li.is-on + li::before { background: var(--dk-line-strong); }

.dk-shell__body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px; }
.dk-shell .dk-step { border: 0; border-radius: 0; padding: 0; background: transparent; }
/* Adımın kendi alt butonları kabukta gizlenir; tek buton altta durur. */
.dk-shell .dk-step__foot { display: none; }

.dk-shell__foot {
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--dk-line); background: var(--dk-surface);
	display: grid; gap: 6px; justify-items: center;
}
.dk-shell__foot .dk-btn { width: 100%; }
.dk-shell__foot .dk-link { font-size: 14px; }

/* Konum adımındaki fayda listesi. */
.dk-list { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 12px; }
.dk-list li { display: grid; gap: 2px; padding-left: 22px; position: relative; }
.dk-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--dk-accent); }
.dk-list strong { font-size: 15px; }
.dk-list span { font-size: 13px; color: var(--dk-ink-2); }

/* ---------- hukuki metin taslak uyarısı ----------
   Sayfanın en üstünde, göz kaçıramayacağı yerde. Renk yok: kalın çerçeve ve
   kalın metin, renk körü kullanıcı için de aynı ağırlıkta okunur. */
.dk-legal-draft {
	margin: 0 0 28px;
	padding: 16px 18px;
	border: 2px solid var(--dk-ink);
	border-left-width: 6px;
	background: var(--dk-subtle);
	font-size: 14px;
	line-height: 1.6;
}

/* ---------- operatör paneli (telefon) ----------
   Kuyruk satırında SAYI önce gelir: operatörün gece 03:00'te aradığı bilgi
   kuyruğun adı değil, kaç kayıt beklediğidir. */
.dk-ops__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.dk-ops__head h1 { font-size: clamp(24px, 6vw, 32px); margin: 0; }
.dk-ops__head .dk-btn { min-height: 40px; padding: 8px 14px; font-size: 18px; line-height: 1; }

.dk-ops-q { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--dk-line); color: inherit; text-decoration: none; }
.dk-ops-q__n {
	flex: 0 0 44px; min-width: 44px; height: 32px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--dk-line-strong);
	font-family: var(--dk-font-display); font-size: 16px; font-weight: 600;
	font-variant-numeric: tabular-nums;
}
/* Kritik kuyruk YALNIZ renkle değil, dolu zeminle ve kalın çerçeveyle
   ayrılır — renk körü operatör için de ayırt edilir. */
.dk-ops-q__n.is-kritik { background: var(--dk-ink); color: var(--dk-on-accent); border-color: var(--dk-ink); }
.dk-ops-q.is-bos { opacity: .45; }
.dk-ops-q .dk-index-t { font-size: 17px; }

.dk-ops__eylem { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0; }
.dk-ops__eylem .dk-btn { width: 100%; min-height: 46px; }
.dk-ops__foot { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--dk-line); }
/* Uygun olmayan aday soluk ama TIKLANABİLİR: operatör bilerek zorlayabilmeli. */
.dk-index a.is-uygunsuz .dk-index-t { color: var(--dk-ink-3); }

/* ---------- şikâyet kartı (temizlikçi paneli) ----------
   Kalın çerçeve: bu kart listedeki diğer işlerden ayrılmalı, çünkü cevap
   süresi işliyor ve cevapsız dosya operatörün önüne tek taraflı gidiyor. */
.dk-complaint { border-width: 2px; border-color: var(--dk-ink); }
.dk-complaint .dk-quote {
	margin: 4px 0 12px; padding: 10px 14px;
	background: var(--dk-subtle); border-left: 3px solid var(--dk-line-strong);
	font-size: 14px; color: var(--dk-ink);
}
.dk-complaint textarea.dk-input { width: 100%; margin-bottom: 8px; }
.dk-complaint .dk-hint { font-size: 12.5px; margin-bottom: 12px; }

/* ---------- tamamlama kontrol listesi ---------- */
.dk-checklist { margin: 12px 0; padding: 12px 14px; background: var(--dk-subtle); }
.dk-checklist .dk-label { margin-bottom: 8px; }
.dk-check {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 0; border-bottom: 1px solid var(--dk-line);
	font-size: 15px; cursor: pointer;
}
.dk-check:last-of-type { border-bottom: 0; }
/* Parmakla dokunulacak: 20px kutu, geniş satır. */
.dk-check input { width: 20px; height: 20px; flex: 0 0 20px; accent-color: var(--dk-ink); }
.dk-checklist .dk-hint { margin: 8px 0 0; font-size: 12.5px; }

/* ---------- şikâyet formu (müşteri) ---------- */
.dk-dispute { margin-top: 14px; padding: 14px; background: var(--dk-subtle); border-top: 2px solid var(--dk-ink); }
.dk-dispute .dk-input { width: 100%; margin-bottom: 10px; }
.dk-dispute input[type="file"] { display: block; width: 100%; margin-bottom: 8px; font-size: 14px; }
.dk-dispute .dk-hint { margin: 0 0 10px; font-size: 12.5px; }
.dk-dispute .dk-label { margin-bottom: 6px; }

/* ---------------------------------------------- operatör: şikâyet dosyası */

/*
 * Gecikme ve işaretlenmeyen kalemler kırmızı değil KALIN ÇERÇEVELİ: tasarımda
 * renk yok, vurgu ağırlıkla verilir. Operatör telefonda bunları kaçırmamalı.
 */
.dk-card__uyari { margin: 6px 0; padding: 6px 8px; border-left: 3px solid var(--dk-ink); background: var(--dk-subtle); font-size: 13px; font-weight: 600; }
.dk-kanit { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.dk-kanit a { display: block; width: 84px; height: 84px; border: 1px solid var(--dk-line); overflow: hidden; }
.dk-kanit img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dk-ops__karar { margin-top: 14px; border-top: 2px solid var(--dk-ink); }
.dk-ops__karar .dk-input { width: 100%; margin-bottom: 10px; }
.dk-ops__karar .dk-label { margin-bottom: 6px; }
.dk-ops__karar .dk-check { display: block; margin: 4px 0 10px; }

/* ------------------------------------------ tek tıklık giriş bağlantısı */
.dk-linklogin { margin-bottom: 18px; padding: 14px; background: var(--dk-subtle); border-left: 3px solid var(--dk-ink); }
.dk-linklogin .dk-step__lede { margin: 0 0 10px; }

/* ---------------------------------------------- akış: geniş ekranda ortalanır
 *
 * Kabuk bilerek tam ekran (position: fixed; inset: 0) — telefonda uygulama gibi
 * durması için. Ama masaüstünde İÇERİĞİ de tam genişlik kalıyordu: 1440px'lik
 * bir ekranda "1+0 / 4 saat" yazan tek bir seçenek 464px oluyordu.
 *
 * Kabuk daraltılmaz, içeriği ortalanır: arka plan ve yapışkan çubuklar tam
 * genişlikte kalsın, form okunur bir sütuna insin. 760px, tablette (768px)
 * zaten iyi çalışan ölçünün aynısı — seçenek ~233px, aynı ritim sürüyor.
 *
 * İçerik sayfalarının kabı 1100px; akış ondan dar çünkü sayfa değil FORM.
 */
@media (min-width: 900px) {
	.dk-shell__top,
	.dk-shell__body,
	.dk-shell__foot {
		padding-inline: max( 24px, calc( ( 100% - 760px ) / 2 ) );
	}
}

/* ---------------------------------------------- yüklenme iskeleti
 * Seçenekler gelene kadar yerlerini gri kutucuklar tutar. Hareket, azaltılmış
 * hareket tercihine saygı duyar (aşağıdaki genel kural bunu zaten kapatıyor).
 */
.dk-skeleton {
	display: block; min-height: 66px; border-radius: var(--dk-r);
	background: linear-gradient( 90deg, var(--dk-subtle) 25%, #EAEAEA 37%, var(--dk-subtle) 63% );
	background-size: 400% 100%;
	animation: dk-skeleton 1.4s ease-in-out infinite;
}
@keyframes dk-skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* Bölge listesinde henüz hizmet verilmeyen ilçe: tıklanmaz, gizlenmez.
   Nerede olduğumuzu ve nereye gitmediğimizi göstermek dürüsttür. */
.dk-index-off { display: flex; align-items: baseline; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--dk-line); color: var(--dk-ink-3); cursor: default; }
.dk-index-off .dk-index-t { color: var(--dk-ink-2); }

/* ------------------------------------------- temizlikçi profil fotoğrafı */
.dk-photo-box { padding: 14px; background: var(--dk-subtle); border-left: 3px solid var(--dk-ink); }
.dk-avatar { display: block; width: 96px; height: 96px; object-fit: cover; border: 1px solid var(--dk-line); margin-bottom: 8px; }
.dk-avatar--bos { background: var(--dk-line); }
.dk-photo-box input[type="file"] { display: block; width: 100%; margin: 8px 0; font-size: 14px; }
.dk-photo-box .dk-hint { margin: 0 0 6px; font-size: 12.5px; }

/* Ek hizmetin kapsamı: adın altında, tutardan önce. */
.dk-extra__desc { grid-column: 2; margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--dk-ink-2); }

/* =====================================================================
   TEMİZLİKÇİ OL SAYFASI
   Telefon önce: aday sayfayı çoğunlukla telefondan açıyor. Düğmeler tam
   genişlik, dokunma hedefleri 44px, form alanları 16px (iOS 16px altındaki
   alanda odaklanınca sayfayı büyütüyor ve kişi formu yan yana kaydırıyor).
   ===================================================================== */
.dk-apply-sayfa .dk-lede { max-width: none; margin-bottom: 18px; }
.dk-apply-cta { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; }
.dk-apply-cta .dk-btn { width: 100%; justify-content: center; }

/* WhatsApp Hızlı Başvuru Kartı (Sıfır Sürtünme) */
.dk-apply-wa-box {
	background: linear-gradient(135deg, rgba(37, 211, 102, 0.08) 0%, rgba(18, 140, 126, 0.04) 100%);
	border: 1px solid rgba(37, 211, 102, 0.35);
	padding: 16px 18px;
	margin: 0 0 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.dk-apply-wa-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	color: #0b8043;
	text-transform: uppercase;
}
.dk-apply-wa-content strong {
	display: block;
	font-size: 16px;
	color: var(--dk-ink);
	margin-bottom: 4px;
}
.dk-apply-wa-content p {
	font-size: 13px;
	color: var(--dk-ink-2);
	margin: 0;
	line-height: 1.4;
}
.dk-btn-wa {
	background: #25D366;
	color: #FFFFFF !important;
	font-weight: 600;
	font-size: 14px;
	padding: 12px 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-decoration: none;
	border: none;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(37, 211, 102, 0.25);
	transition: background .15s ease, transform .15s ease;
}
.dk-btn-wa:hover {
	background: #1eb956;
	transform: translateY(-1px);
}

/* İsteğe Bağlı Tercihler Akordeonu */
.dk-apply-detay-akordeon {
	margin: 20px 0;
	border: 1px solid var(--dk-line);
	background: var(--dk-canvas);
}
.dk-apply-detay-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	cursor: pointer;
	background: var(--dk-subtle);
	user-select: none;
}
.dk-apply-detay-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--dk-ink);
}
.dk-apply-detay-badge {
	font-size: 12px;
	font-weight: 600;
	color: var(--dk-ink-2);
	background: var(--dk-canvas);
	border: 1px solid var(--dk-line);
	padding: 4px 8px;
}
.dk-apply-detay-icerik {
	padding: 16px;
	border-top: 1px solid var(--dk-line);
}
.dk-apply-detay-akordeon[open] .dk-icon-plus {
	transform: rotate(45deg);
}

.dk-apply-giris { margin: 0 0 24px; font-size: 14px; color: var(--dk-ink-2); }
.dk-apply-giris a { color: var(--dk-ink); font-weight: 600; }

.dk-value-props--aday { border-top: 1px solid var(--dk-line); border-bottom: 1px solid var(--dk-line); margin-bottom: 8px; }
.dk-value-props--aday .dk-trust-icon { filter: none; color: var(--dk-ink); line-height: 0; padding-top: 1px; }
.dk-vp-icon { display: block; }

.dk-apply-bilgi { padding: 32px 0 8px; }
.dk-apply-bilgi h2, .dk-apply-baslik { font-size: clamp(22px, 5.6vw, 28px); letter-spacing: -.02em; margin: 0 0 16px; }
.dk-apply-gerek { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--dk-line); }
.dk-apply-gerek li { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--dk-line); }
.dk-apply-tik { flex: 0 0 auto; margin-top: 2px; color: var(--dk-ink); }
.dk-apply-gerek strong { display: block; font-size: 15px; margin-bottom: 2px; }
.dk-apply-gerek span { font-size: 14px; color: var(--dk-ink-2); }

.dk-apply-adimlar { list-style: none; margin: 0 0 12px; padding: 0; counter-reset: dk-adim; }
.dk-apply-adimlar li {
	position: relative; counter-increment: dk-adim;
	padding: 0 0 20px 48px; min-height: 36px;
}
.dk-apply-adimlar li::before {
	content: counter(dk-adim);
	position: absolute; left: 0; top: 0;
	width: 32px; height: 32px; display: grid; place-items: center;
	background: var(--dk-ink); color: var(--dk-on-accent);
	font-size: 14px; font-weight: 700;
}
.dk-apply-adimlar li::after {
	content: ""; position: absolute; left: 15px; top: 36px; bottom: 4px;
	border-left: 1px solid var(--dk-line-strong);
}
.dk-apply-adimlar li:last-child { padding-bottom: 4px; }
.dk-apply-adimlar li:last-child::after { display: none; }
.dk-apply-adimlar strong { display: block; font-size: 15px; margin: 5px 0 2px; }
.dk-apply-adimlar span { display: block; font-size: 14px; color: var(--dk-ink-2); }

.dk-apply { padding-top: 32px; margin-top: 16px; border-top: 1px solid var(--dk-ink); scroll-margin-top: 72px; }
.dk-apply-alt { margin: -8px 0 20px; }
.dk-apply .dk-form-message { margin: 0 0 16px; }
.dk-apply-bolum { padding: 20px 0 20px; margin: 0; border-top: 1px solid var(--dk-line); scroll-margin-top: 72px; }
.dk-apply-bolum legend {
	display: flex; align-items: center; gap: 10px; float: left; width: 100%;
	margin: 0 0 14px; font-size: 16px; font-weight: 700;
}
.dk-apply-bolum legend + * { clear: both; }
.dk-apply-no {
	flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center;
	border: 1px solid var(--dk-ink); font-size: 13px; font-weight: 700;
}
.dk-apply-istege { font-weight: 400; color: var(--dk-ink-3); font-size: 13px; }

.dk-apply-sayac { margin: 0 0 4px; font-size: 13px; font-weight: 600; }
.dk-apply-yaka { margin: 12px 0 8px; }
.dk-apply-yaka-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--dk-line); }
.dk-apply-yaka-bas .dk-label { margin: 0; }
.dk-apply-hepsi {
	min-height: 44px; padding: 0 4px; border: 0; background: transparent;
	font: inherit; font-size: 13px; font-weight: 600; color: var(--dk-ink);
	text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.dk-apply-hepsi[hidden], .dk-apply-yapiskan[hidden], .dk-apply-sayac[hidden], .dk-apply [data-dk-apply-hata][hidden], .dk-apply [data-dk-ilce-hata][hidden] { display: none !important; }
.dk-apply .dk-ilce-sec:has(input:checked) { font-weight: 600; }

.dk-apply-onay .dk-form-check label { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 4px 0; font-size: 14px; }
.dk-apply-onay .dk-form-check input[type="checkbox"] { width: 22px; height: 22px; margin: 0; accent-color: var(--dk-ink); }
.dk-apply-gonder { width: 100%; justify-content: center; margin: 8px 0 10px; }
.dk-apply-gonder:disabled { opacity: .6; cursor: progress; }

.dk-apply-sayfa #sorular { padding: 40px 0 16px; }
.dk-apply-sayfa #sorular .dk-container { padding: 0; max-width: none; }

.dk-apply-yapiskan {
	position: fixed; left: 12px; right: 12px; z-index: 58;
	bottom: calc(64px + env(safe-area-inset-bottom));
	display: flex; align-items: center; justify-content: center; min-height: 48px;
	background: var(--dk-ink); color: var(--dk-on-accent);
	font-weight: 600; text-decoration: none; box-shadow: var(--dk-shadow-lg);
}
.dk-apply-yapiskan:hover, .dk-apply-yapiskan:focus { color: var(--dk-on-accent); }

@media (max-width: 767px) {
	.dk-apply input[type="text"], .dk-apply input[type="email"], .dk-apply input[type="tel"],
	.dk-apply input[type="number"], .dk-apply input[type="time"], .dk-apply textarea, .dk-apply select { font-size: 16px; }
}
@media (max-width: 479px) {
	.dk-apply .dk-ref .dk-form-grid { grid-template-columns: 1fr; }
	.dk-apply .dk-day-pick { flex: 0 0 calc(50% - 4px); justify-content: flex-start; }
}
@media (min-width: 560px) {
	.dk-apply-cta { flex-direction: row; }
	.dk-apply-cta .dk-btn { width: auto; }
	.dk-apply-gonder { width: auto; }
}
@media (min-width: 640px) {
	.dk-value-props--aday { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
	.dk-apply-yapiskan { display: none !important; }
	.dk-value-props--aday .dk-value-prop { border-left: 0; padding: 16px 16px 16px 0; border-top: 1px solid var(--dk-line); }
	.dk-value-props--aday .dk-value-prop:nth-child(-n+2) { border-top: 0; }
}
@media (min-width: 1024px) {
	.dk-value-props--aday { grid-template-columns: repeat(2, 1fr); }
}

/* Temizlikçi paneli: güvenlik bildirimi kutusu. Kapalı durur, kartın en
   altında; açılınca form. Dokunma hedefleri 44px. */
.dk-guvenlik { margin-top: 12px; border-top: 1px solid var(--dk-line); }
.dk-guvenlik > summary {
	min-height: 44px; display: flex; align-items: center; cursor: pointer;
	font-size: 13px; font-weight: 600; color: var(--dk-ink); text-decoration: underline; text-underline-offset: 3px;
}
.dk-guvenlik form { padding: 8px 0 4px; }
.dk-guvenlik fieldset { border: 0; margin: 0 0 12px; padding: 0; min-width: 0; }
.dk-guvenlik .dk-check { min-height: 40px; align-items: center; }
.dk-apply-tercih .dk-choice-list { display: grid; gap: 4px; margin: 0 0 12px; }
.dk-apply-tercih .dk-choice-list label { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; font-weight: 400; }
.dk-apply-tercih .dk-choice-list input { width: 20px; height: 20px; margin: 0; accent-color: var(--dk-ink); }

/* ---------------------------------------------- rezervasyon akışı: canlı test düzeltmeleri
 * Canlıda bir test ajanı akışı masaüstünde ve 375 px'te adım adım geçti;
 * aşağıdakiler onun ölçtüğü sorunlar.
 */

/* Alttaki "Geri" 25x22 px'ti ve doğrulama kodu gönderen "Devam"ın 6 px
   altındaydı: yanlış dokunuşa açık. Hedef 44 px, arada boşluk. */
.dk-shell__foot { gap: 10px; }
.dk-shell__foot .dk-link { min-height: 44px; min-width: 120px; padding: 10px 16px; }
.dk-shell__back { width: 44px; height: 44px; }

/* Fiyat şeridi kayarken ekrandan çıkıyordu: ek hizmet seçerken değişen
   tutar görünmüyordu. Kabuğun kaydırma alanında üstte sabit durur. */
.dk-shell .dk-summary { position: sticky; top: -16px; z-index: 5; }

/* Konum adımında elle giriş: ikincil ama görünür bir seçenek. */
.dk-konum-elle { width: 100%; margin: 4px 0 8px; min-height: 48px; }

/* Seçimle kalkan uyarı yerini korur: altındaki içerik kaymaz. */
.dk-alert.is-sessiz { visibility: hidden; }
/* Şerit yüksekliği sabit: yönlendirme metni iki satır (64 px), seçimden
   sonra tek satır (55 px) oluyordu; indirim notu gelince yine uzuyordu. */
.dk-shell .dk-summary { min-height: 64px; box-sizing: border-box; }

/* Seçili saat her gün görünümünde yazılı durur. */
.dk-secili-saat { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--dk-ink); font-size: 14px; font-weight: 600; }

@media (max-width: 767px) {
	/* iOS 16 px altındaki alana odaklanınca sayfayı büyütüyor. */
	.dk-shell .dk-input, .dk-shell input[type="text"], .dk-shell input[type="tel"], .dk-shell input[type="email"],
	.dk-shell input[type="number"], .dk-shell select, .dk-shell textarea { font-size: 16px; }
}

/* ---------- blog: liste ve yazı (v2) ---------- */

/* Liste sayfası */
.dk-blog-index { padding-bottom: 48px; }
.dk-blog-hero { padding: 24px 0 8px; max-width: 720px; }
.dk-blog-hero .dk-page-title { margin: 6px 0 10px; }
.dk-blog-hero-lede { margin: 0 0 18px; font-size: 17px; line-height: 1.6; color: var(--dk-ink-2); }
.dk-blog-hero .dk-search-form { display: flex; gap: 8px; max-width: 460px; }
.dk-blog-hero .dk-search-form input[type="search"] { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--dk-line-strong); border-radius: var(--dk-r); background: var(--dk-surface); color: var(--dk-ink); font: inherit; }

/* Konu seçici */
.dk-blog-konular { display: flex; gap: 8px; overflow-x: auto; padding: 18px 0 6px; margin: 0; scrollbar-width: thin; }
.dk-blog-konular a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--dk-line); border-radius: 999px; color: var(--dk-ink-2); text-decoration: none; font-size: 14px; white-space: nowrap; }
.dk-blog-konular a:hover { border-color: var(--dk-line-strong); color: var(--dk-ink); }
.dk-blog-konular a[aria-current="true"] { background: var(--dk-ink); border-color: var(--dk-ink); color: var(--dk-on-accent); }
.dk-blog-konular .dk-blog-konu-n { font-size: 12px; opacity: .7; }

/* Kart */
.dk-blog-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 18px; }
.dk-blog-card { display: flex; flex-direction: column; border: 1px solid var(--dk-line); border-radius: var(--dk-r-lg); overflow: hidden; background: var(--dk-surface); color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.dk-blog-card:hover { border-color: var(--dk-line-strong); transform: translateY(-2px); }
.dk-blog-card-img { width: 100%; height: 180px; object-fit: cover; display: block; }
.dk-blog-kapak { display: flex; align-items: center; padding: 10px 16px; background: var(--dk-subtle); border-bottom: 1px solid var(--dk-line); }
.dk-blog-kapak span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dk-ink-2); }
.dk-blog-kapak--buyuk { display: none; }
.dk-blog-card-body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.dk-blog-card-body h3 { margin: 0; font-size: 18px; line-height: 1.3; letter-spacing: -.01em; }
.dk-blog-card-excerpt { margin: 0; color: var(--dk-ink-2); font-size: 14px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dk-blog-card-oku { margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 600; }
.dk-blog-card:hover .dk-blog-card-oku { text-decoration: underline; text-underline-offset: 3px; }

/* Öne çıkan yazı: ızgaranın tamamını kaplar */
.dk-blog-featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; border: 1px solid var(--dk-line); border-radius: var(--dk-r-lg); overflow: hidden; background: var(--dk-surface); color: inherit; text-decoration: none; }
.dk-blog-featured:hover { border-color: var(--dk-line-strong); }
.dk-blog-featured-gorsel { width: 100%; height: 100%; max-height: 320px; object-fit: cover; display: block; }
.dk-blog-featured--yazi { grid-template-columns: 1fr !important; border-left: 4px solid var(--dk-ink); }
.dk-blog-featured--yazi .dk-blog-featured-body { padding: 26px 24px; max-width: 760px; }
.dk-blog-featured-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.dk-blog-featured-body h2 { margin: 0; font-size: clamp(22px, 3.6vw, 30px); line-height: 1.2; letter-spacing: -.02em; }
.dk-blog-featured-body p { margin: 0; color: var(--dk-ink-2); line-height: 1.6; }

/* Yazı sayfası */
.dk-blog-wrap { padding-bottom: 40px; }
.dk-blog-head { max-width: 760px; margin: 8px 0 20px; }
.dk-blog-kat { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.dk-blog-kat a { color: var(--dk-ink-2); text-decoration: none; }
.dk-blog-kat a:hover { text-decoration: underline; }
.dk-blog-head .dk-page-title { margin: 0 0 12px; font-size: clamp(26px, 4.4vw, 38px); line-height: 1.15; letter-spacing: -.02em; }
.dk-blog-head .dk-blog-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0; font-size: 14px; color: var(--dk-ink-3); }
.dk-blog-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.dk-blog-main { min-width: 0; }
.dk-blog-article .dk-blog-content { max-width: 70ch; font-size: 17px; line-height: 1.75; }
.dk-blog-content h2 { margin-top: 40px; font-size: 24px; line-height: 1.25; letter-spacing: -.01em; scroll-margin-top: 84px; }
.dk-blog-content h3 { scroll-margin-top: 84px; }
.dk-blog-content p { margin: 0 0 16px; }
.dk-blog-content ul, .dk-blog-content ol { margin: 0 0 16px; padding-left: 22px; }
.dk-blog-content li { margin-bottom: 6px; }
.dk-blog-content a { text-decoration: underline; text-underline-offset: 3px; }

/* Tablo: kaydırılabilir, hücreler okunur */
.dk-blog-content table { width: 100%; border-collapse: collapse; margin: 20px 0 24px; font-size: 15px; display: block; overflow-x: auto; }
.dk-blog-content th, .dk-blog-content td { padding: 10px 12px; border-bottom: 1px solid var(--dk-line); text-align: left; vertical-align: top; }
.dk-blog-content thead th { border-bottom: 2px solid var(--dk-ink); font-size: 13px; letter-spacing: .02em; }

/* Kısa cevap kutusu (cevap motorları ve okuyucu için en üstte) */
.dk-kisa-cevap { margin: 8px 0 28px; padding: 16px 18px; background: var(--dk-subtle); border-left: 4px solid var(--dk-ink); border-radius: 0 var(--dk-r-lg) var(--dk-r-lg) 0; }
.dk-kisa-cevap h2 { margin: 0 0 6px !important; font-size: 13px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dk-ink-2); }
.dk-kisa-cevap p { margin: 0; font-size: 17px; line-height: 1.6; }

/* Sık sorulanlar: açılır sorular */
.dk-sss-oge { border-bottom: 1px solid var(--dk-line); }
.dk-sss-oge:first-of-type { border-top: 1px solid var(--dk-line); }
.dk-sss-oge summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; font-weight: 600; }
.dk-sss-oge summary::-webkit-details-marker { display: none; }
.dk-sss-oge summary::after { content: "+"; font-size: 20px; font-weight: 400; color: var(--dk-ink-3); }
.dk-sss-oge[open] summary::after { content: "\2212"; }
.dk-sss-oge p { margin: 0 0 16px; color: var(--dk-ink-2); }

/* İçindekiler */
.dk-toc { font-size: 14px; }
.dk-toc ol { list-style: none; counter-reset: dk-toc; margin: 0; padding: 0; }
.dk-toc li { counter-increment: dk-toc; margin: 0; }
.dk-toc li a { display: flex; gap: 8px; padding: 6px 0; color: var(--dk-ink-2); text-decoration: none; line-height: 1.35; }
.dk-toc li a::before { content: counter(dk-toc, decimal-leading-zero); flex: 0 0 22px; font-size: 11px; color: var(--dk-ink-3); padding-top: 2px; }
.dk-toc li a:hover { color: var(--dk-ink); text-decoration: underline; text-underline-offset: 3px; }
.dk-toc--mobil { margin: 0 0 22px; border: 1px solid var(--dk-line); border-radius: var(--dk-r-lg); padding: 0 16px; }
.dk-toc--mobil summary { cursor: pointer; padding: 12px 0; font-weight: 600; }
.dk-toc--mobil ol { padding-bottom: 12px; }
.dk-toc--masa { display: none; max-height: calc(100vh - 260px); overflow-y: auto; }
.dk-toc-baslik { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dk-ink-3); }

/* Rezervasyon çağrısı */
.dk-blog-cta { padding: 18px; border: 1px solid var(--dk-line); border-radius: var(--dk-r-lg); background: var(--dk-surface); }
.dk-blog-cta strong { display: block; font-size: 16px; }
.dk-blog-cta p { margin: 4px 0 12px; font-size: 14px; color: var(--dk-ink-2); }
.dk-blog-cta--satir { display: flex; flex-direction: column; gap: 12px; margin: 28px 0 8px; background: var(--dk-subtle); }
.dk-blog-cta--satir p { margin: 4px 0 0; }
.dk-blog-side .dk-blog-cta { display: none; }

/* Paylaş */
.dk-blog-paylas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--dk-line); }
.dk-blog-paylas-t { font-size: 13px; color: var(--dk-ink-3); margin-right: 4px; }
.dk-blog-paylas .dk-btn { min-height: 36px; padding: 6px 14px; font-size: 13px; }

/* Yazı sonu ilgili yazılar: kart ızgarası */
.dk-blog-ilgili { margin-top: 44px; }
.dk-blog-grid--kucuk .dk-blog-card-img { height: 110px; }

@media (min-width: 720px) {
	.dk-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dk-blog-featured { grid-template-columns: 1.1fr 1fr; }
	.dk-blog-featured-gorsel { max-height: none; min-height: 260px; }
	.dk-blog-cta--satir { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (min-width: 960px) {
	.dk-blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.dk-blog-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; }
	.dk-blog-side { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 24px; }
	.dk-toc--mobil { display: none; }
	.dk-toc--masa { display: block; padding-left: 14px; border-left: 2px solid var(--dk-line); }
	.dk-blog-side .dk-blog-cta { display: block; }
	.dk-blog-cta--satir { display: none; }
}
@media print {
	.dk-blog-side, .dk-blog-paylas, .dk-blog-cta, .dk-post-nav, .dk-comments-wrap, .dk-blog-ilgili { display: none !important; }
}

/* ---------- rezervasyon girişi: hizmet seçimi ve teklif ekranı ---------- */
.dk-shell--serbest { grid-template-rows: auto 1fr; }
a.dk-shell__back { display: grid; place-items: center; text-decoration: none; color: var(--dk-ink); }
.dk-shell__baslik { font-size: 16px; font-weight: 700; }
.dk-secim { max-width: 860px; margin: 0 auto; padding: 24px 16px 64px; }
.dk-secim--form { max-width: 620px; }

.dk-secim-header { text-align: center; margin-bottom: 28px; }
.dk-secim-eyebrow { display: inline-block; padding: 4px 14px; margin-bottom: 10px; border-radius: 999px; background: #e0f2fe; color: #0369a1; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
.dk-secim-baslik { margin: 6px 0 10px; font-size: clamp(24px, 5vw, 34px); font-weight: 700; letter-spacing: -.02em; color: var(--dk-ink); }
.dk-secim-lede { margin: 0 auto; max-width: 580px; color: var(--dk-ink-2); font-size: 15px; line-height: 1.55; }

.dk-secim-tumune-don { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #0f766e; text-decoration: none; margin-bottom: 12px; }
.dk-secim-tumune-don:hover { text-decoration: underline; }

/* Kartlar Genel Yapı */
.dk-secim-kart {
	display: block;
	background: var(--dk-surface);
	border: 1px solid var(--dk-line);
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 14px;
	text-decoration: none;
	color: inherit;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.dk-secim-kart:hover, .dk-secim-kart:focus-visible {
	border-color: #0f766e;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -4px rgba(15, 118, 110, 0.12);
}

.dk-secim-kart__ust { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.dk-secim-rozet { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #f1f5f9; color: #334155; }
.dk-secim-rozet--populer { background: #fef3c7; color: #92400e; font-weight: 700; border: 1px solid #fde68a; }
.dk-secim-rozet--aninda { background: #ecfdf5; color: #047857; font-weight: 600; border: 1px solid #a7f3d0; }
.dk-secim-fiyat-tipi { font-size: 12px; font-weight: 600; color: #64748b; }

.dk-secim-kart__govde { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.dk-secim-kart__sol { display: flex; align-items: flex-start; gap: 16px; flex: 1; min-width: 0; }
.dk-secim-kart__icon {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: 12px;
	background: #f8fafc;
	border: 1px solid var(--dk-line);
	display: grid;
	place-items: center;
	font-size: 24px;
}
.dk-secim-kart__metin { flex: 1; min-width: 0; }
.dk-secim-ad { display: block; font-size: 18px; font-weight: 700; color: var(--dk-ink); letter-spacing: -.01em; margin-bottom: 4px; }
.dk-secim-ozet { display: block; color: var(--dk-ink-2); font-size: 14px; line-height: 1.5; margin-bottom: 8px; }
.dk-secim-maddeler { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: #0f766e; font-weight: 600; }

.dk-secim-kart__sag { flex-shrink: 0; }
.dk-secim-etiket {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border: 1px solid var(--dk-line-strong);
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--dk-ink);
	background: var(--dk-surface);
	transition: all 0.2s ease;
	white-space: nowrap;
}
.dk-secim-kart:hover .dk-secim-etiket { background: #0f766e; border-color: #0f766e; color: #ffffff; }

/* Hero Kartı (Ev Temizliği) */
.dk-secim-kart--hero {
	background: #ffffff;
	border: 2px solid #0f766e;
	box-shadow: 0 4px 16px -2px rgba(15, 118, 110, 0.1);
	padding: 22px;
	margin-bottom: 24px;
}
.dk-secim-kart--hero .dk-secim-ad { font-size: 21px; }
.dk-secim-kart--hero .dk-secim-kart__icon { width: 56px; height: 56px; font-size: 28px; background: #f0fdf4; border-color: #bbf7d0; }
.dk-secim-etiket--ana {
	background: #0f766e;
	border-color: #0f766e;
	color: #ffffff;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 700;
}
.dk-secim-kart--hero:hover .dk-secim-etiket--ana { background: #115e59; border-color: #115e59; }

/* Bölüm Başlığı */
.dk-secim-bolum { display: flex; align-items: center; gap: 14px; margin: 32px 0 20px; }
.dk-secim-bolum__cizgi { flex: 1; height: 1px; background: var(--dk-line); }
.dk-secim-bolum__yazi { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--dk-ink-3); text-transform: uppercase; white-space: nowrap; }

/* Diğer Hizmetler Grid (2 Kolon) */
.dk-secim-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin-bottom: 28px;
}
.dk-secim-kart--grid {
	margin-bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.dk-secim-kart--grid .dk-secim-kart__govde {
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	flex: 1;
}
.dk-secim-kart--grid .dk-secim-kart__sag {
	margin-top: auto;
}
.dk-secim-kart--grid .dk-secim-etiket {
	width: 100%;
	justify-content: center;
}

/* Ek Hizmet Notu Barı */
.dk-secim-ek-bar {
	display: flex;
	align-items: center;
	gap: 16px;
	background: #f8fafc;
	border: 1px dashed #cbd5e1;
	border-radius: 12px;
	padding: 16px 20px;
	margin-bottom: 28px;
}
.dk-secim-ek-bar__icon { font-size: 26px; flex-shrink: 0; }
.dk-secim-ek-bar__text { flex: 1; font-size: 14px; line-height: 1.5; color: var(--dk-ink-2); }
.dk-secim-ek-bar__text strong { display: block; color: var(--dk-ink); margin-bottom: 2px; }
.dk-secim-ek-bar__link { font-size: 13px; font-weight: 700; color: #0f766e; text-decoration: none; white-space: nowrap; }
.dk-secim-ek-bar__link:hover { text-decoration: underline; }

/* Kurumsal Güven Barı */
.dk-secim-guven {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	padding: 24px 20px;
	background: #f8fafc;
	border: 1px solid var(--dk-line);
	border-radius: 12px;
}
.dk-secim-guven-item { display: flex; flex-direction: column; gap: 4px; }
.dk-secim-guven-icon { font-size: 22px; margin-bottom: 2px; }
.dk-secim-guven-info strong { display: block; font-size: 13px; font-weight: 700; color: var(--dk-ink); }
.dk-secim-guven-info p { margin: 0; font-size: 12px; color: var(--dk-ink-3); line-height: 1.45; }
.dk-secim-wp-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 12px; font-weight: 700; color: #16a34a; text-decoration: none; }
.dk-secim-wp-link:hover { text-decoration: underline; }

.dk-secim-not { margin: 20px 0 0; font-size: 14px; color: var(--dk-ink-3); text-align: center; }
.dk-secim-not a { color: #0f766e; font-weight: 600; text-decoration: none; }
.dk-secim-not a:hover { text-decoration: underline; }
.dk-secim .dk-teklif-kutu--kabuk { margin-top: 4px; }

/* Mobil Uyumluluk */
@media screen and (max-width: 768px) {
	.dk-secim { padding: 16px 12px 48px; }
	.dk-secim-grid { grid-template-columns: 1fr; }
	.dk-secim-kart__govde { flex-direction: column; align-items: stretch; gap: 14px; }
	.dk-secim-kart--hero .dk-secim-etiket--ana { width: 100%; justify-content: center; }
	.dk-secim-ek-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
	.dk-secim-guven { grid-template-columns: 1fr 1fr; }
}
@media screen and (max-width: 480px) {
	.dk-secim-guven { grid-template-columns: 1fr; }
}

/* ---------- Hizmet Sayfası Banner Görseli ---------- */
.dk-service-banner-wrap {
	margin-top: -8px;
	margin-bottom: 36px;
}
.dk-service-banner {
	position: relative;
	width: 100%;
	max-height: 480px;
	overflow: hidden;
	border: 1px solid var(--dk-line);
	background: var(--dk-subtle);
}
.dk-service-banner-img {
	width: 100%;
	height: auto;
	max-height: 480px;
	object-fit: cover;
	object-position: center 30%;
	display: block;
}
.dk-service-banner-badge {
	position: absolute;
	bottom: 20px;
	left: 20px;
	background: rgba(11, 11, 11, 0.88);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #FFFFFF;
	padding: 8px 16px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	display: flex;
	align-items: center;
	gap: 8px;
	z-index: 2;
}
.dk-badge-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #22c55e;
	display: inline-block;
	box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.3);
}
@media (max-width: 768px) {
	.dk-service-banner-wrap {
		margin-top: 0;
		margin-bottom: 24px;
	}
	.dk-service-banner,
	.dk-service-banner-img {
		max-height: 280px;
	}
	.dk-service-banner-badge {
		bottom: 12px;
		left: 12px;
		font-size: 11px;
		padding: 6px 12px;
	}
}

/* ---------- Ana Sayfa Hizmet Slaytı (Slider) ---------- */
.dk-home-slider-section {
	padding: 44px 0 52px;
	border-bottom: 1px solid var(--dk-line);
	background: var(--dk-canvas);
}
.dk-slider-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 24px;
}
.dk-slider-head-title {
	font-size: clamp(24px, 3.8vw, 34px);
	line-height: 1.2;
	letter-spacing: -.02em;
	margin: 6px 0 0;
	color: var(--dk-ink);
}

/* Hizmet Seçim Sekmeleri (Tabs) */
.dk-slider-tabs {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 4px;
	margin-bottom: 24px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.dk-slider-tabs::-webkit-scrollbar {
	display: none;
}
.dk-slider-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1px solid var(--dk-line);
	background: var(--dk-surface);
	color: var(--dk-ink-2);
	font-family: var(--dk-font);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.2s ease;
}
.dk-slider-tab:hover {
	border-color: var(--dk-line-strong);
	color: var(--dk-ink);
}
.dk-slider-tab.is-active {
	background: var(--dk-ink);
	border-color: var(--dk-ink);
	color: var(--dk-on-accent);
}
.dk-slider-tab-icon {
	font-size: 16px;
}

/* Slayt Kapsayıcısı */
.dk-slider-wrap {
	position: relative;
	width: 100%;
	border: 1px solid var(--dk-line);
	background: var(--dk-surface);
}
.dk-slider-progress-bar {
	width: 100%;
	height: 3px;
	background: var(--dk-line);
	overflow: hidden;
}
.dk-slider-progress-fill {
	height: 100%;
	width: 0%;
	background: var(--dk-ink);
}
.dk-slider-viewport {
	position: relative;
	overflow: hidden;
	width: 100%;
}
.dk-slider-track {
	display: flex;
	transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
	width: 100%;
}
.dk-slide {
	flex: 0 0 100%;
	width: 100%;
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 40px;
	align-items: center;
	box-sizing: border-box;
	padding: 24px;
}
.dk-slide-media {
	position: relative;
	width: 100%;
	height: 440px;
	overflow: hidden;
	border: 1px solid var(--dk-line);
	background: var(--dk-subtle);
}
.dk-slide-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.dk-slide:hover .dk-slide-img {
	transform: scale(1.02);
}
.dk-slide-floating-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	background: rgba(11, 11, 11, 0.85);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #FFFFFF;
	padding: 6px 14px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	display: flex;
	align-items: center;
	gap: 6px;
	z-index: 2;
}
.dk-slide-fallback {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	background: var(--dk-subtle);
	color: var(--dk-ink-3);
	font-size: 16px;
	font-weight: 600;
}
.dk-slide-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 8px 0;
}
.dk-slide-badge {
	display: inline-block;
	align-self: flex-start;
	padding: 4px 12px;
	border: 1px solid var(--dk-line-strong);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--dk-ink-2);
	margin-bottom: 14px;
}
.dk-slide-title {
	font-size: clamp(24px, 3.5vw, 34px);
	line-height: 1.2;
	letter-spacing: -.02em;
	margin: 0 0 14px;
	color: var(--dk-ink);
}
.dk-slide-desc {
	font-size: 15px;
	line-height: 1.6;
	color: var(--dk-ink-2);
	margin: 0 0 20px;
	max-width: 520px;
}
.dk-slide-features {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.dk-slide-features li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--dk-ink);
}
.dk-feat-check {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--dk-subtle);
	color: var(--dk-ink);
	font-size: 12px;
	font-weight: 700;
}
.dk-slide-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

/* Slayt Okları */
.dk-slider-arrows {
	display: flex;
	gap: 8px;
}
.dk-slider-arrow {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--dk-line-strong);
	background: var(--dk-canvas);
	color: var(--dk-ink);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	user-select: none;
}
.dk-slider-arrow:hover,
.dk-slider-arrow:focus-visible {
	background: var(--dk-ink);
	color: var(--dk-on-accent);
	border-color: var(--dk-ink);
}

@media (max-width: 960px) {
	.dk-slide {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 16px;
	}
	.dk-slide-media {
		height: 260px;
	}
	.dk-slide-title {
		font-size: 22px;
	}
	.dk-slide-desc {
		font-size: 14px;
		margin-bottom: 16px;
	}
}

/* ==========================================================================
   YÜZEN WHATSAPP DESTEK BUTONU
   ========================================================================== */
.dk-floating-wa-wrap {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 70;
}
.dk-floating-wa {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px 10px 14px;
	background: #0B0B0B;
	color: #FFFFFF;
	border: 1px solid rgba(255, 255, 255, 0.22);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28);
	text-decoration: none;
	font-family: var(--dk-font);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.01em;
	transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
	position: relative;
}
.dk-floating-wa:hover,
.dk-floating-wa:focus-visible {
	background: #1C1C1C;
	color: #FFFFFF;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.38);
}
.dk-floating-wa-icon {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}
.dk-floating-wa-pulse {
	position: absolute;
	top: -3px;
	left: -3px;
	right: -3px;
	bottom: -3px;
	border: 2px solid rgba(37, 211, 102, 0.65);
	pointer-events: none;
	animation: dk-wa-pulse 2.4s infinite cubic-bezier(0.4, 0, 0.6, 1);
}
@keyframes dk-wa-pulse {
	0% {
		transform: scale(0.98);
		opacity: 0.8;
	}
	50% {
		transform: scale(1.05);
		opacity: 0;
	}
	100% {
		transform: scale(0.98);
		opacity: 0;
	}
}

@media (max-width: 767px) {
	.dk-floating-wa-wrap {
		bottom: 74px; /* Mobil tabbar (56px) + 18px emniyet mesafesi */
		right: 14px;
	}
	.dk-floating-wa {
		padding: 8px 12px 8px 10px;
		font-size: 13px;
		gap: 8px;
	}
	.dk-floating-wa-icon {
		width: 22px;
		height: 22px;
	}
}

/* ==========================================================================
   BLOG 10/10 UX & CRO GELİŞTİRMELERİ
   ========================================================================== */

/* 1. Zirve Okuma İlerleme Çubuğu (Reading Progress Bar) */
.dk-reading-progress-bar {
	position: absolute;
	bottom: -1px;
	left: 0;
	right: 0;
	height: 3px;
	background: transparent;
	pointer-events: none;
	z-index: 55;
}
.dk-reading-progress-fill {
	height: 100%;
	width: 0%;
	background: var(--dk-ink);
	transition: width 0.08s ease-out;
}

/* 2. E-E-A-T Saha ve Operasyon Standartları Doğrulama Kutusu */
.dk-blog-trust-bar {
	margin-top: 20px;
	margin-bottom: 8px;
	padding: 14px 18px;
	background: var(--dk-subtle);
	border-left: 3px solid var(--dk-ink);
	font-size: 13px;
	color: var(--dk-ink-2);
	line-height: 1.5;
}
.dk-blog-trust-badge {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.dk-trust-badge-icon {
	display: inline-grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--dk-ink);
	color: var(--dk-on-accent);
	font-size: 11px;
	font-weight: 700;
	flex-shrink: 0;
	margin-top: 1px;
}
.dk-blog-trust-badge strong {
	color: var(--dk-ink);
	display: block;
	margin-bottom: 2px;
	font-size: 13px;
}
.dk-blog-trust-badge p {
	margin: 0;
}

/* 3. Yazı İçi Bağlamsal Dönüşüm Kancası (In-Article Contextual CTA) */
.dk-in-article-cta {
	margin: 40px 0;
	padding: 24px;
	background: var(--dk-canvas);
	border: 1px solid var(--dk-line-strong);
	border-left: 4px solid var(--dk-ink);
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.dk-in-article-cta-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--dk-ink);
}
.dk-in-article-cta-title {
	display: block;
	font-size: 18px;
	font-weight: 700;
	color: var(--dk-ink);
	line-height: 1.35;
	margin-bottom: 6px;
}
.dk-in-article-cta-desc {
	font-size: 14px;
	color: var(--dk-ink-2);
	line-height: 1.5;
	margin: 0;
}
.dk-in-article-cta-action .dk-btn {
	padding: 10px 22px;
	font-size: 14px;
}
@media (min-width: 640px) {
	.dk-in-article-cta {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
	}
	.dk-in-article-cta-body {
		flex: 1;
	}
	.dk-in-article-cta-action {
		flex-shrink: 0;
	}
}

/* 4. İçindekiler (TOC) Aktif Başlık Vurgusu */
.dk-toc--masa a.is-active,
.dk-toc--mobil a.is-active {
	font-weight: 700;
	color: var(--dk-ink);
	border-left: 2px solid var(--dk-ink);
	padding-left: 6px;
	transition: all 0.15s ease;
}