/*
 * Düzcanlar demo çekirdeği — yapısal stiller (harita, detay penceresi, galeri).
 * Renk ve font her demoda değişkenlerle verilir; burada yalnız iskelet + varsayılanlar.
 * Kurallar: box-shadow yok, animasyon yalnız transform/opacity, hover yalnız (hover:hover) and (pointer:fine).
 */
:root {
  --dz-zemin: #F3F2EE;
  --dz-yuzey: #FFFFFF;
  --dz-metin: #1C1F22;
  --dz-ikincil: #565C61;
  --dz-cizgi: #D5D3CC;
  --dz-vurgu: #1C1F22;
  --dz-vurgu-metin: #FFFFFF;
  --dz-odak: #A9471A;
  --dz-radius: 8px;
  --dz-font-baslik: system-ui, sans-serif;
  --dz-font-govde: system-ui, sans-serif;
  /* harita */
  --dz-h-zemin: #EFECE5;
  --dz-h-ince: #DED8CC;
  --dz-h-orta: #CDC2AF;
  --dz-h-ana: #B7A385;
  --dz-h-cami: #2C4154;
  --dz-h-kutsal: #111111;
  --dz-pin: #A9471A;
  --dz-pin-halka: #FFFFFF;
  --dz-ease: cubic-bezier(.23, 1, .32, 1);
}

/* ---------- harita ---------- */
.dz-harita { position: relative; }
.dz-harita__sahne { position: relative; aspect-ratio: var(--dz-h-oran, 10 / 7); overflow: hidden; border-radius: var(--dz-radius); background: var(--dz-h-zemin); }
.dz-harita__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dz-h-zemin { fill: var(--dz-h-zemin); }
.dz-h-ince-k, .dz-h-orta-k, .dz-h-ana-k, .dz-h-ince, .dz-h-orta, .dz-h-ana { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.dz-h-ince-k { stroke: var(--dz-h-ince); stroke-width: 3.4; }
.dz-h-orta-k { stroke: var(--dz-h-orta); stroke-width: 6; }
.dz-h-ana-k { stroke: var(--dz-h-ana); stroke-width: 9; }
.dz-h-ince { stroke: var(--dz-h-yol, #FFFFFF); stroke-width: 2.2; }
.dz-h-orta { stroke: var(--dz-h-yol, #FFFFFF); stroke-width: 4.2; }
.dz-h-ana { stroke: var(--dz-h-ana-dolgu, #FFF7E2); stroke-width: 6.6; }
.dz-h-ad { font: 500 calc(var(--dz-h-yazi, 13px) * var(--dz-ters, 1)) var(--dz-font-govde); fill: var(--dz-h-yazi-renk, #5B6168); stroke: var(--dz-h-zemin); stroke-width: calc(var(--dz-h-yazi, 13px) * var(--dz-ters, 1) * .28); paint-order: stroke; letter-spacing: .02em; }
.dz-harita.is-dar .dz-h-adlar { display: none; }
.dz-harita__kamera { position: absolute; inset: 0; transform-origin: 0 0; transition: transform 900ms cubic-bezier(.65, 0, .35, 1); --dz-ters: 1; }
.dz-h-cami { fill: var(--dz-h-cami); fill-opacity: .22; stroke: var(--dz-h-cami); stroke-width: 1.2; }
.dz-h-kutsal { fill: var(--dz-h-kutsal); }

.dz-harita__nokta { position: absolute; transform: translate(-50%, -50%); font: 500 14px/1.2 var(--dz-font-govde); color: var(--dz-h-cami); background: var(--dz-h-zemin); padding: 2px 6px; border-radius: 4px; white-space: nowrap; pointer-events: none; }
.dz-harita__nokta--harem { font-size: 14px; transform: translate(-50%, -170%); }

/* simgeler: Kâbe, Saat Kulesi, Yeşil Kubbe */
.dz-harita__simge { position: absolute; z-index: 1; transform: translate(-50%, -22px) scale(var(--dz-ters, 1)); transform-origin: 50% 22px; transition: transform 900ms cubic-bezier(.65, 0, .35, 1); display: flex; flex-direction: column; align-items: center; gap: 3px; pointer-events: none; }
.dz-harita__simge svg { width: 38px; height: 38px; padding: 4px; background: var(--dz-yuzey); border: 1px solid var(--dz-cizgi); border-radius: 50%; }
.dz-harita__simge .dz-harita__nokta { position: static; transform: none; }
.dz-harita__simge--kule svg { width: 32px; height: 32px; }
.dz-harita__simge--kabe, .dz-harita__simge--kubbe { flex-direction: column-reverse; transform: translate(-50%, calc(-100% + 19px)) scale(var(--dz-ters, 1)); transform-origin: 50% calc(100% - 19px); }
.dz-harita--mini .dz-harita__simge--kabe, .dz-harita--mini .dz-harita__simge--kubbe { transform: translate(-50%, calc(-100% + 16px)); transform-origin: 50% calc(100% - 16px); }
.dz-harita--mini .dz-harita__simge svg { width: 32px; height: 32px; }
/* güzergâh + yürüyen/giden simge */
.dz-rota-k, .dz-rota { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dz-rota-k { stroke: #FFFFFF; }
.dz-rota-k--arac { stroke-width: calc(9px * var(--dz-ters, 1)); }
.dz-rota--arac { stroke: var(--dz-rota-arac, #2F6FB7); stroke-width: calc(5.5px * var(--dz-ters, 1)); }
.dz-rota-k--yaya { stroke-width: 0; }
.dz-rota--yaya { stroke: var(--dz-rota-yaya, var(--dz-pin)); stroke-width: calc(5px * var(--dz-ters, 1)); stroke-dasharray: 0.1 calc(9px * var(--dz-ters, 1)); }
.dz-rota.is-tunel { stroke-dasharray: calc(7px * var(--dz-ters, 1)); opacity: .6; }
.dz-gezgin { pointer-events: none; }
.dz-golge { fill: rgb(0 0 0 / .2); }
.dz-yaya__bacak, .dz-yaya__kol { fill: none; stroke: var(--dz-yaya-ten, #4A3426); stroke-width: 2.3; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 0; }
.dz-yaya__kol { stroke-width: 2; }
.dz-yaya__ihram { fill: #FFFFFF; stroke: #2B2B2B; stroke-width: .9; stroke-linejoin: round; }
.dz-yaya__bas { fill: #9A6A48; stroke: #2B2B2B; stroke-width: .7; }
.is-yuruyor .dz-yaya__bacak--a { animation: dz-adim .64s ease-in-out infinite alternate; }
.is-yuruyor .dz-yaya__bacak--b { animation: dz-adim .64s ease-in-out infinite alternate-reverse; }
.is-yuruyor .dz-yaya__kol--a { animation: dz-kol .64s ease-in-out infinite alternate-reverse; }
.is-yuruyor .dz-yaya__kol--b { animation: dz-kol .64s ease-in-out infinite alternate; }
.is-yuruyor .dz-yaya__govde { animation: dz-sek .32s ease-in-out infinite alternate; }
@keyframes dz-adim { from { transform: rotate(26deg); } to { transform: rotate(-26deg); } }
@keyframes dz-kol { from { transform: rotate(22deg); } to { transform: rotate(-22deg); } }
@keyframes dz-sek { from { transform: translateY(0); } to { transform: translateY(-1.1px); } }
.dz-arac__kasa { fill: var(--dz-gezgin-arac, #2F6FB7); stroke: rgb(0 0 0 / .3); stroke-width: .6; }
.dz-arac__tavan { fill: color-mix(in srgb, var(--dz-gezgin-arac, #2F6FB7) 78%, #000); }
.dz-arac__cam { fill: #1C2730; }
.dz-arac__far { fill: #FFF3BF; }
.dz-varis__nokta { fill: var(--dz-pin); stroke: #FFFFFF; stroke-width: 2; }
.dz-varis__halka { fill: var(--dz-pin); opacity: 0; transform-box: fill-box; transform-origin: center; }
.dz-varis.is-vardi .dz-varis__halka { animation: dz-halka 1.8s cubic-bezier(.23, 1, .32, 1) infinite; }
@keyframes dz-halka { from { opacity: .45; transform: scale(1); } to { opacity: 0; transform: scale(3.4); } }
.dz-mod { display: flex; flex-wrap: wrap; gap: 6px; }
.dz-harita__sahne > .dz-mod { position: absolute; z-index: 3; left: 10px; top: 10px; right: 10px; }
.dz-pop .dz-mod { margin: 0 0 10px; }
.dz-harita--mini > .dz-mod { margin-top: 8px; }
.dz-mod__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px 0 8px; border: 1px solid var(--dz-cizgi); border-radius: 999px; background: var(--dz-yuzey); color: var(--dz-metin); font: 500 14px/1.1 var(--dz-font-govde); cursor: pointer; transition: transform 160ms var(--dz-ease), background-color 200ms ease, color 200ms ease; }
.dz-mod__btn[aria-pressed="true"] { background: var(--dz-vurgu); border-color: var(--dz-vurgu); color: var(--dz-vurgu-metin); }
.dz-mod__btn:active { transform: scale(.97); }
.dz-pin { position: absolute; transform: translate(-50%, -50%) scale(var(--dz-ters, 1)); transition: transform 900ms cubic-bezier(.65, 0, .35, 1); display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--dz-metin); font: 500 14px/1.2 var(--dz-font-govde); }
.dz-pin[hidden] { display: none; }
.dz-pin__nokta { width: 16px; height: 16px; border-radius: 50%; background: var(--dz-pin); outline: 3px solid var(--dz-pin-halka); transition: transform 180ms var(--dz-ease); }
.dz-pin__ad { position: absolute; left: 50%; bottom: calc(100% - 6px); transform: translate(-50%, 4px); opacity: 0; white-space: nowrap; background: var(--dz-yuzey); color: var(--dz-metin); border: 1px solid var(--dz-cizgi); padding: 4px 8px; border-radius: 6px; pointer-events: none; transition: opacity 160ms ease, transform 160ms var(--dz-ease); }
.dz-pin.is-vurgu .dz-pin__nokta, .dz-pin.is-secili .dz-pin__nokta, .dz-pin:focus-visible .dz-pin__nokta { transform: scale(1.35); }
.dz-pin.is-vurgu .dz-pin__ad, .dz-pin.is-secili .dz-pin__ad, .dz-pin:focus-visible .dz-pin__ad { opacity: 1; transform: translate(-50%, 0); }
.dz-harita--mini .dz-pin__ad { opacity: 1; transform: translate(-50%, 0); }
.dz-pin:focus-visible { outline: 3px solid var(--dz-odak); outline-offset: 2px; border-radius: 50%; }

.dz-pop { position: absolute; z-index: 4; width: min(290px, 72%); transform: translate(18px, -50%); background: var(--dz-yuzey); color: var(--dz-metin); border: 1px solid var(--dz-cizgi); border-radius: var(--dz-radius); overflow: hidden; }
.dz-pop.is-sol { transform: translate(calc(-100% - 18px), -50%); }
.dz-pop.is-ust { transform: translate(18px, -92%); }
.dz-pop.is-sol.is-ust { transform: translate(calc(-100% - 18px), -92%); }
.dz-pop img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.dz-pop__ic { padding: 12px 14px 14px; }
.dz-pop__ad { font: 500 17px/1.25 var(--dz-font-baslik); margin: 0; }
.dz-pop__olcu { font: 400 14px/1.4 var(--dz-font-govde); color: var(--dz-ikincil); margin: 4px 0 10px; }
.dz-pop__btn { min-height: 44px; width: 100%; border: 0; border-radius: calc(var(--dz-radius) - 2px); background: var(--dz-vurgu); color: var(--dz-vurgu-metin); font: 500 15px/1 var(--dz-font-govde); cursor: pointer; transition: transform 160ms var(--dz-ease); }
.dz-pop__btn:active { transform: scale(.97); }
.dz-pop__kapat { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--dz-yuzey) 88%, transparent); color: var(--dz-metin); cursor: pointer; }
.dz-pop[hidden] { display: none; }
.dz-pop.is-kose { transform: none; width: min(360px, 62%); display: grid; grid-template-columns: 104px 1fr; }
.dz-pop.is-kose img { height: 100%; aspect-ratio: auto; }
.dz-pop.is-kose .dz-pop__ic { padding: 10px 12px 12px; }
.dz-pop.is-kose .dz-pop__ad { padding-right: 40px; font-size: 16px; }
.dz-pop.is-kose .dz-pop__olcu { margin: 2px 0 8px; }
.dz-pop.is-kose .dz-pop__kapat { top: 2px; right: 2px; }
.dz-mod__btn span { white-space: nowrap; }
.dz-pop .dz-mod { flex-wrap: nowrap; }
.dz-pop .dz-mod__btn { flex: 1 1 0; justify-content: center; padding: 0 10px 0 6px; }
.dz-gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.dz-harita__dis { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dz-harita__dis-btn { min-height: 44px; padding: 0 14px; border: 1px dashed var(--dz-cizgi); border-radius: 999px; background: transparent; color: var(--dz-metin); font: 400 14px/1.2 var(--dz-font-govde); cursor: pointer; }
.dz-harita__atif { margin: 8px 0 0; font: 400 14px/1.4 var(--dz-font-govde); color: var(--dz-ikincil); }
.dz-harita__atif a { color: inherit; }

/* ---------- detay penceresi ---------- */
html.dz-kilit { overflow: hidden; }
dialog.dz-detay { margin: auto; }
.dz-detay { width: min(1180px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--dz-cizgi); border-radius: calc(var(--dz-radius) + 4px); background: var(--dz-yuzey); color: var(--dz-metin); overflow: hidden; opacity: 0; transform: translateY(12px) scale(.985); transition: opacity 240ms var(--dz-ease), transform 240ms var(--dz-ease), overlay 240ms allow-discrete, display 240ms allow-discrete; }
.dz-detay[open] { opacity: 1; transform: none; }
@starting-style { .dz-detay[open] { opacity: 0; transform: translateY(12px) scale(.985); } }
.dz-detay::backdrop { background: rgb(12 16 20 / .62); }
.dz-detay__ic { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: min(720px, calc(100dvh - 34px)); }
.dz-detay__kapat { position: absolute; z-index: 4; top: 12px; right: 12px; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--dz-cizgi); border-radius: 50%; background: var(--dz-yuzey); color: var(--dz-metin); cursor: pointer; transition: transform 160ms var(--dz-ease); }
.dz-detay__kapat:active { transform: scale(.95); }
.dz-galeri { position: relative; background: #0E1114; min-height: 0; }
.dz-galeri__serit { list-style: none; margin: 0; padding: 0; height: 100%; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.dz-galeri__serit::-webkit-scrollbar { display: none; }
.dz-galeri__serit li { flex: 0 0 100%; scroll-snap-align: start; display: grid; }
.dz-galeri__serit img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dz-galeri__ok { position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -24px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgb(255 255 255 / .92); color: #111; cursor: pointer; transition: transform 160ms var(--dz-ease); }
.dz-galeri__ok:active { transform: scale(.95); }
.dz-galeri__ok--geri { left: 14px; }
.dz-galeri__ok--ileri { right: 14px; }
.dz-galeri__sayac { position: absolute; left: 14px; bottom: 14px; margin: 0; padding: 4px 10px; border-radius: 999px; background: rgb(0 0 0 / .62); color: #fff; font: 500 14px/1.4 var(--dz-font-govde); }
.dz-detay__bilgi { display: flex; flex-direction: column; min-height: 0; }
.dz-detay__kaydir { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 26px 28px 16px; display: grid; gap: 12px; align-content: start; }
.dz-detay__sehir { margin: 0; font: 500 15px/1.3 var(--dz-font-govde); color: var(--dz-ikincil); }
.dz-detay__baslik { margin: -6px 56px 0 0; font: 500 clamp(24px, 2.3vw, 32px)/1.1 var(--dz-font-baslik); }
.dz-detay__olcu { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; margin: 0; }
.dz-detay__olcu div { background: var(--dz-yuzey); padding: 7px 10px; border: 1px solid var(--dz-cizgi); border-radius: var(--dz-radius); }
.dz-detay__olcu dt { font: 400 14px/1.3 var(--dz-font-govde); color: var(--dz-ikincil); }
.dz-detay__olcu dd { margin: 1px 0 0; font: 500 16px/1.3 var(--dz-font-govde); }
.dz-detay__aciklama { margin: 0; font: 400 16px/1.55 var(--dz-font-govde); max-width: 60ch; }
.dz-detay__olanak { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dz-detay__olanak li { padding: 4px 10px; border: 1px solid var(--dz-cizgi); border-radius: 999px; font: 400 14px/1.4 var(--dz-font-govde); }
.dz-detay__fiyat { margin: 0; font: 400 15px/1.4 var(--dz-font-govde); color: var(--dz-ikincil); }
.dz-detay__fiyat span { font: 500 22px/1 var(--dz-font-baslik); color: var(--dz-metin); margin-right: 4px; }
.dz-detay__fiyat em { display: block; font-style: normal; font-size: 14px; }
.dz-detay__kaynak { margin: -4px 0 0; font: 400 14px/1.5 var(--dz-font-govde); color: var(--dz-ikincil); }
.dz-pin.is-teyitsiz .dz-pin__nokta { background: var(--dz-yuzey); outline: 3px solid var(--dz-pin); outline-offset: -3px; }
.dz-detay__not { margin: 0; padding: 12px 14px; border: 1px dashed var(--dz-cizgi); border-radius: var(--dz-radius); font: 400 15px/1.5 var(--dz-font-govde); color: var(--dz-ikincil); }
.dz-detay__eylem { flex: none; display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 14px 28px 16px; border-top: 1px solid var(--dz-cizgi); background: var(--dz-yuzey); }

.dz-detay__glink { color: var(--dz-metin); font: 400 15px/1.4 var(--dz-font-govde); min-height: 44px; display: inline-flex; align-items: center; justify-self: start; margin-top: -6px; }
.dz-detay__harita .dz-harita__atif { margin-top: 4px; font-size: 14px; }

.dz-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border: 1px solid var(--dz-metin); border-radius: calc(var(--dz-radius) - 2px); background: transparent; color: var(--dz-metin); font: 500 16px/1 var(--dz-font-govde); text-decoration: none; cursor: pointer; transition: transform 160ms var(--dz-ease), background-color 200ms ease, color 200ms ease; }
.dz-btn--ana { background: var(--dz-vurgu); border-color: var(--dz-vurgu); color: var(--dz-vurgu-metin); }
.dz-btn:active { transform: scale(.97); }

.dz-detay :focus-visible, .dz-harita :focus-visible { outline: 3px solid var(--dz-odak); outline-offset: 2px; }

@media (max-width: 860px) {
  .dz-detay { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; border: 0; }
  .dz-detay__ic { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: max-content; height: 100dvh; overflow-y: auto; }
  .dz-galeri { aspect-ratio: 4 / 3; min-height: auto; }
  .dz-galeri__serit img { min-height: 0; }
  .dz-detay__bilgi { display: block; }
  .dz-detay__kaydir { overflow: visible; padding: 20px 18px 16px; }
  .dz-detay__eylem { position: sticky; bottom: 0; z-index: 2; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); }
  .dz-detay__eylem { flex-wrap: nowrap; }
  .dz-detay__eylem .dz-btn { flex: 1 1 0; min-width: 0; padding: 0 10px; font-size: 15px; text-align: center; line-height: 1.2; }
  .dz-pop { width: min(230px, 64%); }
}
@media (prefers-reduced-motion: reduce) {
  .dz-detay, .dz-pin, .dz-pin__nokta, .dz-pin__ad, .dz-btn, .dz-pop__btn, .dz-harita__kamera, .dz-harita__simge { transition-duration: .01ms !important; }
  .dz-gezgin *, .dz-varis__halka { animation: none !important; }
}
@media (max-width: 720px) {
  .dz-harita > .dz-pop, .dz-harita > .dz-pop.is-kose { position: relative; inset: auto !important; width: auto; margin-top: 8px; transform: none; grid-template-columns: 96px 1fr; }
  .dz-pop[hidden] { display: none; }
}

/* ---------- telefon: kompakt filtre çubuğu + alttan panel ---------- */
.dz-mfiltre { display: none; }
@media (max-width: 720px) {
  .dz-mfiltre-gizle { display: none !important; }
  .dz-mfiltre { display: grid; gap: 8px; margin: 0 0 14px; }
  .dz-mfiltre__ust { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
  .dz-mfiltre__ara { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px; border: 1px solid var(--dz-cizgi); border-radius: var(--dz-radius); background: var(--dz-yuzey); color: var(--dz-ikincil); }
  .dz-mfiltre__ara input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; color: var(--dz-metin); font: 400 16px/1.2 var(--dz-font-govde); outline: none; }
  .dz-mfiltre__ara:focus-within { outline: 3px solid var(--dz-odak); outline-offset: 1px; }
  .dz-mfiltre__btn { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 14px; border: 1px solid var(--dz-metin); border-radius: var(--dz-radius); background: var(--dz-yuzey); color: var(--dz-metin); font: 500 15px/1 var(--dz-font-govde); cursor: pointer; transition: transform 160ms var(--dz-ease); }
  .dz-mfiltre__btn:active { transform: scale(.97); }
  .dz-rozet { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--dz-vurgu); color: var(--dz-vurgu-metin); font: 500 13px/1 var(--dz-font-govde); }
  .dz-rozet[hidden] { display: none; }
  .dz-mfiltre__alt { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .dz-seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--dz-cizgi); border-radius: 999px; background: var(--dz-yuzey); }
  .dz-seg button { min-height: 44px; min-width: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--dz-metin); font: 500 14px/1 var(--dz-font-govde); cursor: pointer; }
  .dz-seg button[aria-pressed="true"] { background: var(--dz-vurgu); color: var(--dz-vurgu-metin); }
  .dz-mfiltre__sayi { font: 500 14px/1.2 var(--dz-font-govde); color: inherit; white-space: nowrap; }
}
.dz-sayfa { position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%; max-height: 86dvh; margin: 0; padding: 0; border: 0; border-radius: 16px 16px 0 0; background: var(--dz-yuzey); color: var(--dz-metin); transform: translateY(100%); transition: transform 320ms cubic-bezier(.32, .72, 0, 1); }
.dz-sayfa[open] { transform: none; }
@starting-style { .dz-sayfa[open] { transform: translateY(100%); } }
.dz-sayfa::backdrop { background: rgb(12 16 20 / .5); }
.dz-sayfa__ic { display: flex; flex-direction: column; max-height: 86dvh; }
.dz-sayfa__bas { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 8px 18px; border-bottom: 1px solid var(--dz-cizgi); }
.dz-sayfa__bas h2 { margin: 0; font: 500 19px/1.2 var(--dz-font-baslik); }
.dz-sayfa__kapat { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: var(--dz-metin); cursor: pointer; }
.dz-sayfa__govde { overflow-y: auto; overscroll-behavior: contain; padding: 6px 18px 12px; }
.dz-sayfa__grup { margin: 0; padding: 12px 0; border: 0; border-bottom: 1px solid var(--dz-cizgi); min-width: 0; }
.dz-sayfa__grup:last-child { border-bottom: 0; }
.dz-sayfa__grup legend, .dz-sayfa__etiket { display: flex; justify-content: space-between; width: 100%; padding: 0; margin: 0 0 8px; font: 500 15px/1.3 var(--dz-font-govde); }
.dz-sayfa__cikti { font-weight: 400; color: var(--dz-ikincil); }
.dz-cipler { display: flex; flex-wrap: wrap; gap: 6px; }
.dz-cipler button { min-height: 44px; padding: 0 14px; border: 1px solid var(--dz-cizgi); border-radius: 999px; background: var(--dz-yuzey); color: var(--dz-metin); font: 400 15px/1 var(--dz-font-govde); cursor: pointer; transition: transform 160ms var(--dz-ease); }
.dz-cipler button[aria-pressed="true"] { background: var(--dz-vurgu); border-color: var(--dz-vurgu); color: var(--dz-vurgu-metin); }
.dz-cipler button:active, .dz-seg button:active { transform: scale(.97); }
.dz-sayfa input[type="range"] { width: 100%; height: 44px; accent-color: var(--dz-pin); }
.dz-sayfa__not { margin: 0; font: 400 14px/1.4 var(--dz-font-govde); color: var(--dz-ikincil); }
.dz-sayfa select { width: 100%; min-height: 48px; padding: 0 12px; border: 1px solid var(--dz-cizgi); border-radius: var(--dz-radius); background: var(--dz-yuzey); color: var(--dz-metin); font: 400 16px/1 var(--dz-font-govde); }
.dz-sayfa__alt { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--dz-cizgi); }
.dz-sayfa :focus-visible, .dz-mfiltre :focus-visible { outline: 3px solid var(--dz-odak); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .dz-sayfa, .dz-mfiltre__btn, .dz-cipler button { transition-duration: .01ms !important; } }
.dz-sayfa__bas h2:focus { outline: none; }

/* ---------- telefon: rezervasyonda isteğe bağlı alanlar ---------- */
.dz-ek-dugme { display: none; }
@media (max-width: 720px) {
  form:not(.dz-ek-acik) .dz-ek-alan { display: none !important; }
  .dz-ek-dugme { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; margin: 2px 0 6px; padding: 8px 14px; border: 1px dashed currentColor; border-radius: var(--dz-radius); background: transparent; color: inherit; text-align: left; cursor: pointer; transition: transform 160ms var(--dz-ease); }
  .dz-ek-dugme:active { transform: scale(.98); }
  .dz-ek-dugme__y { display: grid; gap: 2px; }
  .dz-ek-dugme b { font: 500 15px/1.2 var(--dz-font-govde); }
  .dz-ek-dugme small { font: 400 14px/1.3 var(--dz-font-govde); opacity: .8; }
  .dz-ek-dugme svg { flex: none; transition: transform 200ms var(--dz-ease); }
  .dz-ek-dugme[aria-expanded="true"] svg { transform: rotate(45deg); }
}
[data-dz-gece]:empty { display: none; }

/* ---------- iPhone (iOS Safari) form alanları ----------
   iOS tarih kutusunun kendi en az genişliği hücreden taşar ve boşken hiçbir şey göstermez.
   Tüm tarayıcılarda: taşma engeli. Yalnız iOS'ta: yerel görünüm kapatılır, takvim/ok ikonu eklenir. */
input[type="date"] { min-width: 0; max-width: 100%; box-sizing: border-box; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
@supports (-webkit-touch-callout: none) {
  input[type="date"], select { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-height: 48px; line-height: 1.3; }
  input[type="date"] { padding-right: 40px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2' fill='none' stroke='%238A9096' stroke-width='1.5'/%3E%3Cpath d='M3.5 9.5h17M8 3v4M16 3v4' stroke='%238A9096' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 20px !important; }
  input[type="date"]::-webkit-date-and-time-value { margin: 0; min-height: 1.3em; }
  select { padding-right: 38px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%238A9096' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 20px !important; }
}