/* Dessoci Kule canlı demosu (/gayrimenkul/canli-demo). Tam sayfa, kaydırmasız; sahneler üst üste durur.
   Geçişler demo-kule.js içinde Web Animations ile transform/opacity/filter üzerinden yürür. */

:root {
  --dk-gece: #0A1222;
  --dk-kesit-zemin: #121D33;
  --dk-panel: rgba(10, 16, 30, .86);
  --dk-kart: rgba(7, 11, 20, .9);
  --dk-cizgi: rgba(255, 255, 255, .14);
  --dk-cizgi-ince: rgba(255, 255, 255, .09);
  --dk-altin: #D9C089;
  --dk-krem: #EFE6CC;
  --dk-metin: #F5F2EA;
  --dk-soluk: rgba(245, 242, 234, .6);
  --dk-soluk-2: rgba(245, 242, 234, .74);
  --dk-mavi: #4E7CF0;
  --dk-musait: #A8D8B5;
  --dk-opsiyon: #E2C47E;
  --dk-satildi: rgba(245, 242, 234, .62);
  --dk-serif: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --dk-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --dk-ust-h: 72px;
  --dk-kenar: 40px;
  --dk-panel-g: 304px;
  --dk-egri: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.dk {
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--dk-gece);
  color: var(--dk-metin);
  font: 400 13px/1.5 var(--dk-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
/* Sıfırlamalar :where ile sıfır özgüllükte; bileşen sınıfları her zaman üstün gelir */
:where(.dk) a { color: inherit; text-decoration: none; }
:where(.dk) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
:where(.dk) :focus { outline: none; }
.dk :focus-visible { outline: 1px solid rgba(239, 230, 204, .9); outline-offset: 3px; }
.dk-gizli { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Üst şerit ───────────────────────────────────────── */
.dk-ust {
  position: fixed; z-index: 30; top: 0; left: 0; right: 0;
  height: calc(var(--dk-ust-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) calc(var(--dk-kenar) + env(safe-area-inset-right)) 0 calc(var(--dk-kenar) + env(safe-area-inset-left));
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  pointer-events: none;
}
.dk-ust::before {
  content: ''; position: absolute; inset: 0 0 -40px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(4, 8, 18, .5), rgba(4, 8, 18, .18) 55%, rgba(4, 8, 18, 0));
  transition: opacity .6s;
}
.dk-ust > * { pointer-events: auto; }
.dk-logo { display: flex; align-items: center; gap: 14px; white-space: nowrap; min-width: 0; }
.dk-logo__harf {
  flex: none; width: 27px; height: 27px; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .72);
  font: 500 17px/1 var(--dk-serif); padding-top: 1px;
}
.dk-logo__ad { font: 600 15.5px/1 var(--dk-serif); letter-spacing: .25em; margin-right: -.25em; }
.dk-logo__ayrac { flex: none; width: 1px; height: 15px; background: rgba(255, 255, 255, .38); margin: 0 4px; }
.dk-logo__yer { font: 500 9.5px/1 var(--dk-sans); letter-spacing: .2em; color: var(--dk-soluk-2); }

.dk-menu { display: flex; align-items: center; gap: 30px; white-space: nowrap; }
.dk-menu__bag, .dk-menu__cikis {
  font: 500 10px/1 var(--dk-sans); letter-spacing: .18em; color: var(--dk-soluk-2);
  padding: 8px 0; transition: color .25s;
}
.dk-menu__bag:hover, .dk-menu__cikis:hover { color: #fff; }
.dk-menu__cikis { letter-spacing: .06em; font-size: 11px; color: var(--dk-soluk); }
.dk-menu__ayrac { width: 1px; height: 14px; background: rgba(255, 255, 255, .2); margin: 0 -10px; }
.dk-tur {
  font: 600 10px/1 var(--dk-sans); letter-spacing: .18em;
  background: var(--dk-krem); color: #17181C;
  padding: 10px 17px 10px calc(17px + .18em);
  transition: background .25s, transform .25s;
}
.dk-tur:hover { background: #F7F0DC; }

/* ── Sahneler ────────────────────────────────────────── */
.dk-sahneler { position: fixed; inset: 0; overflow: hidden; }
.dk-kule, .dk-kesit, .dk-oda { position: absolute; inset: 0; overflow: hidden; }
.dk-kesit { z-index: 1; }
.dk-kule { z-index: 2; }
.dk-oda { z-index: 3; }
/* Gizli sahne: opacity + pointer-events (kalıtılmayan özellikler). visibility kullanılmaz; Chrome, görünürlüğü
   değişen sahnede animasyonlu alt katmanın eski "gizli" stilini önbellekten kullanabiliyor. */
.dk-kesit:not(.is-acik), .dk-kule:not(.is-acik), .dk-oda:not(.is-acik) { opacity: 0; pointer-events: none; }
/* Kendi pointer-events değeri olan alt öğeler (kat bantları, panel, dokunmatik kart) gizli sahnede tıklama yakalamasın */
.dk-sahneler > :not(.is-acik) * { pointer-events: none !important; }

/* ── 1. Kule ─────────────────────────────────────────── */
/* Arka plan şeffaf: bina açılınca aradan kesit görünür */
.dk-kule { perspective: 1500px; perspective-origin: 50% 50%; }
.dk-kamera { position: absolute; inset: 0; transform-origin: 50% 50%; backface-visibility: hidden; }
.dk-sahne { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.dk:not(.is-hazir) .dk-kule { opacity: 0; }
.dk-dilim { position: absolute; inset: 0; will-change: transform; }
.dk-dilim--orta, .dk-dilim--alt { display: none; }
.dk-sahne.is-bolunmus .dk-dilim--orta, .dk-sahne.is-bolunmus .dk-dilim--alt { display: block; }
.dk-dilim img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.dk-dilim picture { display: contents; }
.dk-tabela, .dk-katman { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dk-tabela { pointer-events: none; }
/* DESSOCİ tabelası: girişin üstündeki beyaz alın bandına kazınmış harfler (alttaki açık kopya kabartma ışığı verir) */
.dk-tabela text { font-family: var(--dk-serif); font-weight: 600; letter-spacing: .52em; }
.dk-tabela__isik { fill: rgba(255, 255, 255, .7); }
.dk-tabela__harf { fill: rgba(28, 36, 52, .82); }
/* Üst ve alt gölgeler: menü ve alt yazılar okunur kalsın */
.dk-kule::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(3, 7, 16, .5), rgba(3, 7, 16, 0) 22%),
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 60%, rgba(3, 7, 16, .28));
}

/* SVG kat katmanı */
.dk-katman { pointer-events: none; }
.dk-bantlar path { pointer-events: all; fill: transparent; stroke: none; cursor: pointer; outline: none; }
.dk-vurgu { opacity: 0; transition: opacity .3s; }
.dk-vurgu.is-gorunur { opacity: 1; }
/* Seçili kat "ışıkları yanmış" gibi sıcak parlar (beyaz cephede yalnız beyaz dolgu görünmüyordu) */
.dk-vurgu__bant {
  fill: rgba(255, 208, 138, .34); mix-blend-mode: screen;
  stroke: rgba(255, 255, 255, .98); stroke-width: 1.5px;
  vector-effect: non-scaling-stroke; stroke-linejoin: round;
}
/* Beyaz cephede de okunsun: ince çizginin altında yumuşak koyu hat */
.dk-vurgu__golge {
  fill: none;
  stroke: rgba(8, 16, 34, .42); stroke-width: 3.5px;
  vector-effect: non-scaling-stroke; stroke-linejoin: round;
}
.dk-isaret { opacity: 0; transition: opacity .3s, transform .5s var(--dk-egri); pointer-events: none; }
.dk-isaret.is-gorunur { opacity: 1; }
.dk-isaret__disk { filter: drop-shadow(0 0 3px rgba(242, 214, 140, .55)); }
.dk-isaret__hale { transform-box: fill-box; transform-origin: center; animation: dk-hale 2.6s ease-in-out infinite; }
@keyframes dk-hale { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.18); } }

/* Bilgi kartı ve bağlantı çizgisi (ekran koordinatında) */
.dk-kart-katman { position: absolute; inset: 0; z-index: 2; pointer-events: none; transition: opacity .35s; }
.dk-kart-katman.is-gizli { opacity: 0; }
.dk-bag { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dk-bag line { stroke: rgba(235, 242, 255, .78); stroke-width: 1px; shape-rendering: geometricPrecision; }
.dk-kart {
  position: absolute; left: 0; top: 0; width: 262px;
  display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: start;
  padding: 15px 18px 15px 16px;
  background: var(--dk-kart);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .32);
  will-change: transform;
}
.dk-kart__sol { display: flex; flex-direction: column; gap: 9px; padding-top: 2px; }
.dk-kart__etiket { font: 600 8.5px/1 var(--dk-sans); letter-spacing: .22em; color: var(--dk-soluk); }
.dk-kart__no { font: 500 36px/.8 var(--dk-serif); color: #fff; font-variant-numeric: oldstyle-nums; min-width: 1.1em; display: block; }
.dk-kart__sag { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.dk-kart__baslik { font: 600 19px/1.1 var(--dk-serif); color: #fff; white-space: nowrap; }
.dk-kart__bilgi { font: 400 10.5px/1.3 var(--dk-sans); color: var(--dk-soluk-2); letter-spacing: .01em; white-space: nowrap; }
.dk-kart__dokun { display: none; font: 600 8.5px/1 var(--dk-sans); letter-spacing: .18em; color: var(--dk-altin); margin-top: 6px; }
.dk-durum {
  margin-top: 3px; display: inline-block;
  font: 600 8.5px/1 var(--dk-sans); letter-spacing: .2em;
  padding: 4px 7px 4px calc(7px + .2em);
  border: 1px solid currentColor; color: var(--dk-musait);
}
.dk-durum[data-durum="opsiyonlu"] { color: var(--dk-opsiyon); }
.dk-durum[data-durum="satildi"] { color: var(--dk-satildi); }
.dk.is-dokunmatik .dk-kart { pointer-events: auto; cursor: pointer; width: min(300px, calc(100vw - 32px)); }
.dk-kart__dokun { white-space: nowrap; }
.dk.is-dokunmatik .dk-kart__dokun { display: block; }

/* Alt yazılar */
.dk-ipucu, .dk-kredi {
  position: fixed; z-index: 25; margin: 0; pointer-events: none;
  bottom: calc(30px + env(safe-area-inset-bottom));
  transition: opacity .45s, transform .45s var(--dk-egri);
}
.dk-ipucu {
  left: calc(var(--dk-kenar) + env(safe-area-inset-left));
  display: flex; align-items: center; gap: 12px;
  font: 600 10px/1 var(--dk-sans); letter-spacing: .2em; color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}
.dk-ipucu__nokta {
  width: 9px; height: 9px; border-radius: 50%; background: #A9C8FF;
  box-shadow: 0 0 0 4px rgba(150, 190, 255, .2), 0 0 14px rgba(150, 190, 255, .85);
  animation: dk-nabiz 2.4s ease-in-out infinite;
}
@keyframes dk-nabiz { 0%, 100% { box-shadow: 0 0 0 3px rgba(150, 190, 255, .18), 0 0 12px rgba(150, 190, 255, .7); } 50% { box-shadow: 0 0 0 7px rgba(150, 190, 255, .06), 0 0 18px rgba(150, 190, 255, 1); } }
.dk-kredi {
  right: calc(var(--dk-kenar) + env(safe-area-inset-right));
  max-width: 44ch; text-align: right;
  font: 400 10px/1.45 var(--dk-sans); color: rgba(255, 255, 255, .5);
}
.dk:not([data-sahne="kule"]) .dk-ipucu, .dk:not(.is-hazir) .dk-ipucu { opacity: 0; transform: translateY(8px); }
.dk[data-sahne="oda"] .dk-kredi, .dk:not(.is-hazir) .dk-kredi { opacity: 0; }

/* ── 2. Kesit ────────────────────────────────────────── */
.dk-kesit { background: var(--dk-kesit-zemin); }
.dk-kesit::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 78% 72% at 42% 52%, transparent 55%, rgba(4, 8, 18, .5));
}
.dk-kesit__alan {
  position: absolute;
  top: calc(var(--dk-ust-h) + 8px); bottom: 44px;
  left: calc(var(--dk-kenar) - 16px);
  right: calc(var(--dk-panel-g) + var(--dk-kenar) + 8px);
  display: grid; place-items: center;
  perspective: 1600px; perspective-origin: 50% 45%;
  container-type: size;
}
.dk-kesit__egim { position: relative; transform-style: preserve-3d; will-change: transform; }
.dk-kesit__model {
  position: relative;
  width: min(100cqw, calc(100cqh * var(--oran, 1.79)));
  aspect-ratio: var(--oran, 1.79);
  transform-origin: 50% 50%;
  will-change: transform;
}
.dk-kesit__gorsel {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none;
  /* Kenarlar zemine erir; dikiş görünmez */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
  mask-composite: intersect;
}
.dk-kesit__gorsel:not([src]) { visibility: hidden; }
.dk-noktalar { position: absolute; inset: 0; }

/* Oda noktaları: aktif altın + hap etiket, diğerleri mavi */
.dk-nokta {
  position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  display: grid; place-items: center; z-index: 1;
}
.dk-nokta.is-aktif, .dk-nokta:hover, .dk-nokta:focus-visible { z-index: 3; }
.dk-nokta__isaret {
  position: relative; z-index: 2;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--dk-mavi); border: 2.5px solid #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .4), 0 0 0 4px rgba(78, 124, 240, .18);
  transition: width .35s var(--dk-egri), height .35s var(--dk-egri), background .3s, border-color .3s, box-shadow .3s;
}
.dk-nokta:hover .dk-nokta__isaret { box-shadow: 0 2px 10px rgba(0, 0, 0, .4), 0 0 0 7px rgba(78, 124, 240, .22); }
.dk-nokta.is-aktif .dk-nokta__isaret {
  width: 26px; height: 26px;
  background: radial-gradient(circle, #E6CB86 0 5.5px, #2C3038 6.5px);
  border: 1.5px solid rgba(255, 255, 255, .28);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}
.dk-nokta.is-aktif .dk-nokta__isaret::after {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  border: 1px solid rgba(230, 203, 134, .7);
  animation: dk-halka 2.2s ease-out infinite;
}
@keyframes dk-halka { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }
.dk-nokta__etiket {
  position: absolute; z-index: 1; left: 15px; top: 50%;
  transform: translate(-6px, -50%); opacity: 0;
  white-space: nowrap; pointer-events: none;
  font: 600 9.5px/1 var(--dk-sans); letter-spacing: .16em; color: #fff;
  background: #121419; padding: 7px 13px 7px 20px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  transition: opacity .3s, transform .4s var(--dk-egri);
}
.dk-nokta.is-aktif .dk-nokta__etiket, .dk-nokta:hover .dk-nokta__etiket, .dk-nokta:focus-visible .dk-nokta__etiket { opacity: 1; transform: translate(0, -50%); }
.dk-nokta:focus-visible { outline: none; }
.dk-nokta:focus-visible .dk-nokta__isaret { outline: 1px solid var(--dk-krem); outline-offset: 3px; }

/* Sağ panel */
.dk-panel-yer {
  position: absolute; z-index: 2;
  top: calc(var(--dk-ust-h) + 8px); bottom: 40px;
  right: calc(var(--dk-kenar) + env(safe-area-inset-right));
  width: var(--dk-panel-g);
  display: flex; align-items: center;
  perspective: 1000px; pointer-events: none;
}
.dk-panel {
  position: relative; pointer-events: auto;
  width: 100%; max-height: 100%; overflow: auto; overscroll-behavior: contain; scrollbar-width: none;
  padding: 24px 24px 22px;
  background: var(--dk-panel);
  -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid var(--dk-cizgi);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  will-change: transform;
}
.dk-panel::-webkit-scrollbar { display: none; }
.dk-panel__tutamac { display: none; }
.dk-panel__ust { margin: 0; font: 500 9.5px/1 var(--dk-sans); letter-spacing: .22em; color: var(--dk-soluk); }
.dk-panel__baslik { margin: 10px 0 18px; font: 500 33px/1.05 var(--dk-serif); color: #fff; letter-spacing: .005em; }
.dk-ozellik {
  margin: 0; display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--dk-cizgi-ince); border-bottom: 1px solid var(--dk-cizgi-ince);
}
.dk-ozellik > div { display: flex; flex-direction: column-reverse; gap: 6px; padding: 13px 0 13px 14px; border-left: 1px solid var(--dk-cizgi-ince); }
.dk-ozellik > div:first-child { padding-left: 0; border-left: 0; }
.dk-ozellik dd { margin: 0; font: 600 22px/1 var(--dk-serif); color: #fff; font-variant-numeric: oldstyle-nums; }
.dk-ozellik dt { font: 500 8.5px/1 var(--dk-sans); letter-spacing: .2em; color: var(--dk-soluk); }
.dk-panel__aciklama { margin: 17px 0 14px; font: 400 12.5px/1.62 var(--dk-sans); color: var(--dk-soluk-2); }
.dk-odalar { list-style: none; margin: 0; padding: 0; }
.dk-oda-bag {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 12px 2px 12px 0; border-top: 1px solid var(--dk-cizgi-ince);
  font: 400 13px/1.2 var(--dk-sans); color: var(--dk-soluk-2);
  transition: color .25s;
}
.dk-odalar li:last-child .dk-oda-bag { border-bottom: 1px solid var(--dk-cizgi-ince); }
.dk-oda-bag__nokta { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #8E9DCB; transition: background .3s, box-shadow .3s; }
.dk-oda-bag__ok { margin-left: auto; color: var(--dk-soluk); font-size: 13px; transition: transform .35s var(--dk-egri), color .25s; }
.dk-oda-bag:hover, .dk-oda-bag.is-aktif { color: #fff; }
.dk-oda-bag.is-aktif .dk-oda-bag__nokta { background: var(--dk-altin); box-shadow: 0 0 0 3px rgba(217, 192, 137, .18); }
.dk-oda-bag:hover .dk-oda-bag__ok, .dk-oda-bag.is-aktif .dk-oda-bag__ok { transform: translateX(3px); color: #fff; }
.dk-panel__dugmeler { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }

/* Düğmeler */
.dk-dugme {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 42px; padding: 10px 12px 10px calc(12px + .17em);
  font: 600 9.5px/1.35 var(--dk-sans); letter-spacing: .17em;
  transition: background .25s, color .25s, border-color .25s;
}
.dk-dugme--koyu { background: rgba(4, 7, 14, .45); border: 1px solid var(--dk-cizgi); color: #fff; }
.dk-dugme--koyu:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .3); }
.dk-dugme--krem { background: var(--dk-krem); color: #1A1B20; }
.dk-dugme--krem:hover { background: #F7F0DC; }
.dk-dugme--siyah { background: rgba(8, 9, 12, .92); color: #fff; min-height: 38px; padding: 9px 15px 9px calc(15px + .17em); }
.dk-dugme--siyah:hover { background: #000; }

/* ── 3. Oda ──────────────────────────────────────────── */
.dk-oda { background: #05070C; }
.dk-oda__gorseller { position: absolute; inset: 0; overflow: hidden; }
.dk-oda__yuva { position: absolute; inset: 0; overflow: hidden; opacity: 0; }
.dk-oda__yuva.is-aktif { opacity: 1; }
.dk-oda__yuva img {
  position: absolute; left: -2%; top: -2%; width: 104%; height: 104%;
  object-fit: cover; display: block; will-change: transform; user-select: none; -webkit-user-drag: none;
}
.dk-oda__yuva img:not([src]) { visibility: hidden; }
.dk-oda__golge {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(4, 6, 12, .74), rgba(4, 6, 12, .28) 18%, rgba(4, 6, 12, 0) 34%),
    linear-gradient(to bottom, rgba(4, 6, 12, .42), rgba(4, 6, 12, 0) 16%);
}
.dk-oda__alt {
  position: absolute; z-index: 2;
  left: calc(var(--dk-kenar) + env(safe-area-inset-left)); right: calc(var(--dk-kenar) + env(safe-area-inset-right));
  bottom: calc(34px + env(safe-area-inset-bottom));
  display: flex; align-items: flex-end; gap: 22px;
}
.dk-oda__baslik { min-width: 0; padding-bottom: 1px; }
.dk-oda__ust { margin: 0 0 7px; font: 600 9.5px/1 var(--dk-sans); letter-spacing: .2em; color: var(--dk-altin); }
.dk-oda__ad { margin: 0; font: 600 34px/1 var(--dk-serif); color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); white-space: nowrap; }
.dk-sekmeler { margin-left: auto; display: flex; gap: 8px; }
.dk-sekme {
  flex: none; padding: 11px 15px 11px calc(15px + .16em);
  font: 600 9.5px/1 var(--dk-sans); letter-spacing: .16em;
  background: rgba(8, 9, 12, .9); color: #fff;
  transition: background .3s, color .3s;
}
.dk-sekme:hover { background: #000; }
.dk-sekme[aria-selected="true"] { background: var(--dk-krem); color: #1A1B20; }

.dk-noscript { position: fixed; z-index: 40; left: 16px; right: 16px; bottom: 16px; margin: 0; padding: 14px 16px; background: var(--dk-panel); border: 1px solid var(--dk-cizgi); }
.dk-noscript a { text-decoration: underline; }

/* ── Orta ekran ──────────────────────────────────────── */
@media (max-width: 1180px) {
  .dk-menu { gap: 22px; }
  .dk-logo__yer, .dk-logo__ayrac { display: none; }
}
@media (max-width: 960px) {
  :root { --dk-kenar: 28px; --dk-panel-g: 284px; }
  .dk-menu__bag { display: none; }
  .dk-menu__ayrac { display: none; }
  .dk-menu { gap: 18px; }
  .dk-panel { padding: 20px 20px 18px; }
  .dk-panel__baslik { font-size: 29px; }
}

/* ── Mobil: panel alttan yükselen sayfa, sekmeler yatay kayar ── */
@media (max-width: 760px) {
  :root { --dk-ust-h: 60px; --dk-kenar: 16px; }
  .dk-logo { gap: 11px; }
  .dk-logo__harf { width: 24px; height: 24px; font-size: 15px; }
  .dk-logo__ad { font-size: 13.5px; letter-spacing: .2em; margin-right: -.2em; }
  .dk-menu { gap: 14px; }
  .dk-menu__cikis-ad { display: none; }
  .dk-menu__cikis { font-size: 15px; padding: 8px 4px; }
  .dk-tur { padding: 9px 12px 9px calc(12px + .16em); letter-spacing: .16em; font-size: 9.5px; }

  .dk-ipucu { bottom: calc(46px + env(safe-area-inset-bottom)); font-size: 9.5px; gap: 10px; }
  .dk-kredi { left: var(--dk-kenar); right: var(--dk-kenar); bottom: calc(14px + env(safe-area-inset-bottom)); max-width: none; text-align: left; font-size: 9px; }
  .dk:not([data-sahne="kule"]) .dk-kredi { opacity: 0; }
  .dk-kart { width: min(300px, calc(100vw - 32px)); padding: 13px 14px 13px 14px; column-gap: 14px; }
  .dk-kart__no { font-size: 32px; }
  .dk-kart__baslik { font-size: 18px; }

  .dk-nokta__etiket { font-size: 8.5px; padding: 6px 10px 6px 18px; }

  .dk-oda__golge { background: linear-gradient(to top, rgba(4, 6, 12, .86), rgba(4, 6, 12, .45) 26%, rgba(4, 6, 12, 0) 46%), linear-gradient(to bottom, rgba(4, 6, 12, .45), rgba(4, 6, 12, 0) 16%); }
  .dk-oda__alt { flex-direction: column; align-items: stretch; gap: 14px; bottom: calc(18px + env(safe-area-inset-bottom)); }
  .dk-oda__alt .dk-dugme--siyah { align-self: flex-start; order: 3; }
  .dk-oda__baslik { order: 1; }
  .dk-oda__ad { font-size: 28px; white-space: normal; }
  .dk-sekmeler {
    order: 2; margin: 0 calc(-1 * var(--dk-kenar)); padding: 0 var(--dk-kenar);
    overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .dk-sekmeler::-webkit-scrollbar { display: none; }
  .dk-sekme { scroll-snap-align: start; }
}

/* ── Kesit paneli alttan yükselen sayfa: telefon ve dikey tablet ── */
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  .dk-kesit { display: flex; flex-direction: column; }
  .dk-kesit__alan {
    position: relative; inset: auto; flex: 1 1 auto; min-height: 0;
    margin: calc(var(--dk-ust-h) + env(safe-area-inset-top)) 6px 4px;
  }
  .dk-panel-yer {
    position: relative; inset: auto; width: auto; flex: none;
    display: block; perspective: none;
  }
  .dk-panel {
    max-height: min(56dvh, 470px);
    display: flex; flex-direction: column;
    padding: 10px 18px calc(16px + env(safe-area-inset-bottom));
    border-width: 1px 0 0; border-radius: 16px 16px 0 0;
    overflow: hidden;
  }
  .dk-panel__tutamac { display: grid; place-items: center; width: 100%; height: 22px; margin: -2px 0 6px; flex: none; }
  .dk-panel__tutamac span { width: 38px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .28); }
  .dk-panel__ust { flex: none; }
  .dk-panel__baslik { font-size: 27px; margin: 7px 0 12px; flex: none; }
  .dk-ozellik { flex: none; }
  .dk-ozellik > div { padding: 10px 0 10px 12px; }
  .dk-ozellik dd { font-size: 19px; }
  .dk-panel__govde { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; margin: 0 -18px; padding: 0 18px; }
  .dk-panel__govde::-webkit-scrollbar { display: none; }
  .dk-panel__aciklama { margin: 12px 0 8px; font-size: 12px; }
  .dk-oda-bag { padding: 11px 2px 11px 0; }
  .dk-panel__dugmeler { flex: none; margin-top: 14px; }
  .dk-panel.is-dar .dk-panel__govde, .dk-panel.is-dar .dk-ozellik { display: none; }
  .dk-panel.is-dar .dk-panel__baslik { margin-bottom: 0; }
  .dk:not([data-sahne="kule"]) .dk-kredi { opacity: 0; }
}
@media (max-width: 360px) {
  .dk-logo__ad { font-size: 12.5px; letter-spacing: .17em; margin-right: -.17em; }
  .dk-tur { padding: 9px 10px 9px calc(10px + .14em); letter-spacing: .14em; }
  .dk-menu { gap: 10px; }
  .dk-ipucu { font-size: 9px; letter-spacing: .16em; }
}
/* Kısa yatay ekran (telefon yan): panel sağda kalır, sıkışır */
@media (max-height: 520px) and (min-width: 761px) {
  :root { --dk-ust-h: 56px; }
  .dk-panel-yer { bottom: 14px; }
  .dk-panel { padding: 14px 18px; display: flex; flex-direction: column; }
  .dk-panel__govde { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: none; }
  .dk-panel__govde::-webkit-scrollbar { display: none; }
  .dk-panel__dugmeler { margin-top: 12px; flex: none; }
  .dk-oda-bag { padding: 9px 2px 9px 0; }
  .dk-panel__baslik { font-size: 24px; margin: 6px 0 10px; }
  .dk-panel__aciklama { display: none; }
  .dk-oda__ad { font-size: 26px; }
  .dk:not([data-sahne="kule"]) .dk-kredi { opacity: 0; }
}

/* ── Hareket azaltma ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .dk-isaret__hale, .dk-ipucu__nokta, .dk-nokta.is-aktif .dk-nokta__isaret::after { animation: none; }
  .dk-isaret { transition: opacity .2s; }
}