/**
 * Anasayfa hero -- izometrik oda (.kr). template-parts/home/hero-room.php
 *
 * KOMPOZISYON (23/09, ikinci tur): sol sutun / sag gorsel YOK. Oda hero'nun
 * kendisi: genisligin ~%70'i, alta ve saga tasar. Arayuz odanin bos
 * ucgenlerine yerlesir, katman olarak ustune biner:
 *   sol ust  -> baslik (kademeli, odanin sol duvarinin onune biner)
 *   sag ust  -> sahne notu + baglamsal teklif (ilk etkilesimde belirir)
 *   sol alt  -> kontrol seridi: sahneler (tipografik) + raf (nesneler)
 * Mobilde istif: baslik -> oda -> durum -> serit.
 *
 * Hiyerarsi: 1 oda  2 baslik  3 etkilesim  4 urunler  5 teklif.
 * Bordo yalnizca eylem/durum. Dekoratif ayirac yok; tek "cizgi" rafin
 * kendisi (nesneler ustunde durur) ve secili sahnenin gostergesi.
 */

@property --kr-c1 { syntax: '<color>'; inherits: true; initial-value: #F6F1E8; }
@property --kr-c2 { syntax: '<color>'; inherits: true; initial-value: #E9E1D4; }
@property --kr-warm { syntax: '<color>'; inherits: true; initial-value: rgba(255, 232, 196, .30); }

.kr {
  --kr-u: 1;
  --kr-pad: var(--space-5);
  --kr-side: var(--kr-pad);
  --kr-ease: cubic-bezier(.22, 1, .36, 1);
  --kr-io: cubic-bezier(.65, 0, .25, 1);
  --kr-glide: cubic-bezier(.6, .04, .24, 1);
  --kr-limestone: #FBFAF8;
  --kr-line: rgba(29, 27, 25, .2);
  --kr-draft: #8C7A62;
  --kr-c1: #F6F1E8;
  --kr-c2: #E9E1D4;
  --kr-warm: rgba(255, 232, 196, .30);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--text-primary);
  /* Tuval: sicak notr; derinligi sahne verir. Pencere tarafinda sicak
     isik, neredeyse gorunmez kenar koyulasmasi. */
  background:
    radial-gradient(34% 40% at 84% 30%, var(--kr-warm), rgba(255, 255, 255, 0) 72%),
    radial-gradient(140% 120% at 62% 50%, rgba(58, 44, 30, 0) 58%, rgba(58, 44, 30, .07) 100%),
    radial-gradient(90% 90% at 62% 50%, var(--kr-c1) 0%, var(--kr-c2) 100%);
  transition: --kr-c1 900ms var(--ease-standard), --kr-c2 900ms var(--ease-standard), --kr-warm 900ms var(--ease-standard);
}
.kr[data-scene="odak"]     { --kr-c1: #F8F7F3; --kr-c2: #EAE8E2; --kr-warm: rgba(255, 246, 230, .20); }
.kr[data-scene="toplanti"] { --kr-c1: #F5F5F2; --kr-c2: #E3E5E3; --kr-warm: rgba(232, 240, 246, .26); }
.kr[data-scene="lounge"]   { --kr-c1: #F8F1EA; --kr-c2: #ECE2D8; --kr-warm: rgba(255, 226, 204, .28); }
.kr::after {
  /* malzeme: cok ince kagit/kirec dokusu */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .14 0 0 0 0 .11 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .05;
}
.kr__amb { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.kr__amb::after {
  /* ortam hareketi: pencere tarafinda cok yavas nefes alan isik */
  content: ''; position: absolute; width: 56vw; height: 56vw; right: -8vw; top: -14vw;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 244, 226, .36), rgba(255, 244, 226, 0));
  animation: krAmb 26s var(--ease-standard) infinite alternate;
  will-change: transform, opacity;
}
@keyframes krAmb {
  0% { transform: translate3d(0, 0, 0); opacity: .7; }
  100% { transform: translate3d(-3vw, 2.4vw, 0); opacity: 1; }
}
.kr__lamp {
  position: absolute; left: 0; top: 0; width: 880px; height: 880px; margin: -440px 0 0 -440px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 251, 243, .46), rgba(255, 251, 243, .14) 48%, rgba(255, 251, 243, 0));
  opacity: 0; transition: opacity 700ms var(--ease-standard);
  will-change: transform;
}
.kr.is-lamp .kr__lamp { opacity: 1; }
.kr-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------- Baslik: kademeli, sahnenin parcasi ----------------
   OFISINIZ / sizden once / KONUSUR. -- satirlar odanin sol duvarinin
   egimiyle saga dogru basamaklanir. Tiklamalar odaya gecer. */
.kr__h1 { margin: 0; font-weight: 400; position: relative; z-index: 1; pointer-events: none; }
.kr__eyebrow {
  display: block; margin-bottom: var(--space-5);
  font-size: 11px; line-height: 1.3; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--text-tertiary);
}
.kr__display { --kr-hs: clamp(58px, min(7.5vw, 12vh), 136px); display: block; font-family: var(--font-sans); color: var(--ink); }
.kr__l1, .kr__l2, .kr__l3 { display: block; }
.kr__l1, .kr__l3 {
  font-size: var(--kr-hs); font-weight: 600; line-height: .84;
  letter-spacing: -.045em; text-transform: uppercase;
}
.kr__l2 {
  font-size: calc(var(--kr-hs) * .44); font-weight: 400; line-height: 1;
  letter-spacing: -.02em;
  margin: calc(var(--kr-hs) * .12) 0 calc(var(--kr-hs) * .1) calc(var(--kr-hs) * 1.25);
  color: var(--grey-700, #4A453F);
}
.kr__l3 { padding-left: calc(var(--kr-hs) * .62); }

/* ---------------- Sahne ---------------- */
.kr__stage { position: relative; }
/* 24/09 katmanlar: arka SVG (oda kabugu) z0 < baslik z1 < on SVG (mobilya)
   z2. Sahne kendi yigin baglamini KURMAZ (z-index yok) -- yoksa baslik
   iki SVG'nin arasina giremez. */
.kr-svg--shell { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.kr-svg:not(.kr-svg--shell) { position: relative; z-index: 2; pointer-events: none; }
.kr-pad { fill: transparent; pointer-events: all; }
.kr-items, .kr-items * { pointer-events: visiblePainted; }
.kr-svg {
  display: block; width: 100%; height: 100%;
  overflow: visible;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y pinch-zoom;
}
.kr-svg polygon { stroke-width: .6; stroke-linejoin: round; }
.kr-hit { fill: transparent; stroke: transparent; stroke-width: 14; pointer-events: all; }
.kr-room, .kr-rug, .kr-sun, .kr-grid, .kr-shadows, .kr-marks, .kr-cgrid, .kr-anno { pointer-events: none; }
.kr-room .kr-floor { pointer-events: all; }
.kr-shadows { fill: #2b241c; opacity: .2; }
.kr--lite .kr-shadows, .kr--lite .kr-sun { filter: none; }
.kr-sun { fill: #fff; opacity: .42; }
/* Yapi izgarasi (oda disi) + olcu notlari: bosta neredeyse yok; hover,
   surukleme ve sahne degisiminde belirginlesir. CAD degil, iz. */
.kr-cgrid { fill: none; stroke: var(--kr-draft); stroke-width: .7; opacity: .14; transition: opacity 600ms var(--ease-standard); }
.kr.is-hovering .kr-cgrid { opacity: .26; }
.kr.is-recompose .kr-cgrid, .kr.is-dragging .kr-cgrid { opacity: .42; transition-duration: 300ms; }
.kr-dim { fill: none; stroke: var(--kr-draft); stroke-width: .8; stroke-opacity: .5; }
.kr-dimt { fill: var(--kr-draft); font-family: var(--font-sans); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; }
.kr-anno { opacity: .75; transition: opacity 400ms var(--ease-standard); }
.kr.is-dragging .kr-anno { opacity: 1; }
/* Zemin izgarasi: yalniz odada; hover'da cok soluk, tasirken belirgin. */
.kr-grid { fill: none; stroke: var(--kr-draft); stroke-opacity: .22; stroke-width: .8; opacity: 0; transition: opacity 160ms linear; }
.kr.is-hovering .kr-grid { opacity: .4; transition-duration: 400ms; }
.kr.is-placing .kr-grid { opacity: 1; transition-duration: 300ms; }
.kr-rug { transition: opacity 260ms var(--ease-standard); }
.kr-rug.is-fade { opacity: 0; }
/* Sahne ortami (zemin/duvar/perde/sarkit): yeni katman eskinin ustunde
   belirir; sarkitlar mobilyanin ustunde, isabet almaz. */
.kr-deco { pointer-events: none; }
.kr-room, .kr-deco { transition: opacity 560ms var(--ease-standard); }
.kr-room.is-env-in, .kr-deco.is-env-in, .kr-deco.is-env-out { opacity: 0; }
.kr-pool, .kr-cone { mix-blend-mode: screen; }
.kr-sun { transition: fill 700ms var(--ease-standard), opacity 700ms var(--ease-standard); }
.kr[data-scene="odak"] .kr-sun { fill: #F4F8FA; opacity: .5; }
.kr[data-scene="toplanti"] .kr-sun { opacity: .36; }
.kr[data-scene="lounge"] .kr-sun { fill: #FFE2BE; opacity: .5; }

/* Mobilya: konum = translate (CSS gecisi), kaldirma = ic grup. */
.kr-item, .kr-sh, .kr-hit { transition: transform 0ms; }
.kr-item.is-snap, .kr-sh.is-snap, .kr-hit.is-snap { transition: transform 90ms var(--ease-out); }
.kr-item.is-glide, .kr-sh.is-glide, .kr-hit.is-glide { transition: transform 640ms var(--kr-glide); }
.kr-item { outline: none; }
.kr.is-live .kr-item { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .kr.is-live .kr-item { cursor: grab; }
  .kr.is-grabbing, .kr.is-grabbing .kr-item, .kr.is-dragging, .kr.is-dragging .kr-item { cursor: grabbing; }
}
.kr-lift {
  transform-box: fill-box; transform-origin: 50% 100%;
  transition: transform 300ms var(--kr-ease), opacity 260ms var(--ease-standard);
}
/* Hover atmosferi: nesne keskinlesir ve kalkar, cevresi ~%12 geri cekilir. */
.kr.is-hovering .kr-item:not(.is-hov):not(.is-sel):not(.is-drag) .kr-lift { opacity: .86; }
@media (hover: hover) and (pointer: fine) {
  .kr.is-live .kr-item.is-hov:not(.is-sel):not(.is-drag) .kr-lift { transform: translateY(calc(var(--kr-u) * -6px)) scale(1.02); }
}
.kr-item.is-sel .kr-lift { transform: translateY(calc(var(--kr-u) * -6px)); }
.kr-item.is-grab .kr-lift { transform: translateY(calc(var(--kr-u) * -11px)) scale(1.02); transition-duration: 160ms; }
.kr-item.is-drag .kr-lift { transform: translateY(calc(var(--kr-u) * -14px)) scale(1.02); transition-duration: 180ms; }
.kr-item.is-bad .kr-lift { opacity: .5; }
.kr-sh polygon { transform-box: fill-box; transform-origin: center; transition: transform 300ms var(--kr-ease), opacity 300ms var(--kr-ease); }
.kr-sh.is-hov polygon { transform: scale(1.07); opacity: .7; }
.kr-sh.is-up polygon { transform: scale(1.06); opacity: .75; }
.kr-sh.is-drag polygon { transform: scale(1.14); opacity: .5; }
.kr-item:focus-visible .kr-lift { transform: translateY(calc(var(--kr-u) * -6px)); }

/* Secim: dort L kose + ince ayak izi. Hover: ayni koseler, soluk. */
.kr-corn {
  fill: none; stroke: var(--brand-burgundy); stroke-width: calc(var(--kr-u) * 1.7px);
  stroke-linecap: square; stroke-linejoin: miter;
  opacity: 0; transition: opacity 200ms var(--ease-standard);
}
.kr-corn.is-on { opacity: 1; }
.kr-corn--h { stroke: var(--ink); stroke-width: calc(var(--kr-u) * 1.3px); }
.kr-corn--h.is-on { opacity: .34; }
.kr-foot {
  fill: var(--brand-burgundy); fill-opacity: .05;
  stroke: var(--brand-burgundy); stroke-opacity: .28; stroke-width: calc(var(--kr-u) * 1px);
  opacity: 0; transition: opacity 200ms var(--ease-standard);
}
.kr-foot.is-on { opacity: 1; }
.kr-focus {
  fill: none; stroke: var(--ink); stroke-width: calc(var(--kr-u) * 1.5px); stroke-dasharray: 4 3;
  opacity: 0; transition: opacity 120ms linear;
}
.kr-focus.is-on { opacity: .8; }
.kr-ghost {
  fill: #B8925E; fill-opacity: .14; stroke: #8C6C42; stroke-opacity: .5;
  stroke-width: calc(var(--kr-u) * 1.1px);
  opacity: 0; transition: opacity 120ms linear, transform 90ms var(--ease-out);
}
.kr-ghost.is-on { opacity: 1; }
.kr-ghost.is-bad { fill: var(--ink); fill-opacity: .03; stroke: var(--ink); stroke-opacity: .28; stroke-dasharray: 4 4; }
.kr-origin {
  fill: var(--ink); fill-opacity: .035; stroke: var(--ink); stroke-opacity: .22;
  stroke-width: calc(var(--kr-u) * 1px); stroke-dasharray: 3 3;
  opacity: 0; transition: opacity 160ms linear;
}
.kr-origin.is-on { opacity: 1; }

/* Kisa, dokunsal animasyonlar -- ziplama/elastik yok. */
.kr-item.is-settle .kr-lift { animation: krSettle 420ms var(--kr-ease); }
@keyframes krSettle { 0% { transform: translateY(calc(var(--kr-u) * -10px)); } 100% { transform: translateY(calc(var(--kr-u) * -6px)); } }
.kr-item.is-turn .kr-lift { animation: krTurn 380ms var(--kr-ease); }
@keyframes krTurn { 0% { opacity: .35; transform: translateY(calc(var(--kr-u) * -12px)); } 100% { opacity: 1; transform: translateY(calc(var(--kr-u) * -6px)); } }
.kr-item.is-shake { animation: krShake 380ms var(--ease-standard); }
@keyframes krShake { 20% { translate: -3px 0; } 45% { translate: 3px 0; } 70% { translate: -2px 0; } 100% { translate: 0 0; } }
.kr-item.is-in, .kr-sh.is-in { animation: krIn 600ms var(--kr-ease) both; }
@keyframes krIn { 0% { opacity: 0; translate: 0 calc(var(--kr-u) * -34px); } 100% { opacity: 1; translate: 0 0; } }
.kr-sh.is-in { animation-name: krInSh; }
@keyframes krInSh { 0% { opacity: 0; } 100% { opacity: 1; } }
.kr-item.is-out, .kr-sh.is-out, .kr-hit.is-out { opacity: 0; pointer-events: none; transition: opacity 280ms var(--ease-standard); }
.kr-item.is-hop .kr-lift { animation: krHop 780ms both; }
.kr-item.is-hop-turn .kr-lift { animation: krHop 780ms both, krHopFade 780ms both; }
@keyframes krHop {
  0% { transform: translateY(0); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  24% { transform: translateY(calc(var(--kr-u) * -16px)); animation-timing-function: linear; }
  68% { transform: translateY(calc(var(--kr-u) * -16px)); animation-timing-function: cubic-bezier(.5, 0, .2, 1); }
  100% { transform: translateY(0); }
}
@keyframes krHopFade { 0% { opacity: .15; } 34% { opacity: 1; } 100% { opacity: 1; } }
.kr-sh.is-hop polygon { animation: krHopSh 780ms both; }
@keyframes krHopSh {
  0%, 100% { transform: none; opacity: 1; }
  24%, 68% { transform: scale(.86); opacity: .45; }
}
.kr-item.is-nudge .kr-lift { animation: krNudge 1600ms var(--ease-standard); }
@keyframes krNudge {
  0%, 100% { transform: translateY(0); }
  18% { transform: translateY(calc(var(--kr-u) * -9px)); }
  36% { transform: translateY(0); }
  54% { transform: translateY(calc(var(--kr-u) * -5px)); }
  72% { transform: translateY(0); }
}

/* ---------------- Nesne notu (sergi etiketi + kilavuz cizgisi) -------
   Oge sifir boyutlu bir capa: (0,0) = nesnenin tepesi. Capa noktasi,
   oradan yukari ve saga kirilan kilavuz, ucunda etiket. */
.kr-note {
  position: absolute; left: 0; top: 0; z-index: 5; width: 0; height: 0;
  opacity: 0; pointer-events: none;
  transition: opacity 200ms var(--ease-standard), transform 640ms var(--kr-glide);
}
.kr-note.is-on { opacity: 1; }
.kr-note.is-snap { transition: opacity 200ms var(--ease-standard); }
.kr-note::before {
  content: ''; position: absolute; left: -3px; top: -3px; width: 5px; height: 5px;
  border: 1px solid var(--ink); border-radius: 50%; background: var(--kr-limestone);
}
.kr-note::after {
  content: ''; position: absolute; left: 0; bottom: 3px; width: 26px; height: 38px;
  border-left: 1px solid rgba(29, 27, 25, .55); border-top: 1px solid rgba(29, 27, 25, .55);
}
.kr-note.is-flip::after { left: auto; right: 0; border-left: 0; border-right: 1px solid rgba(29, 27, 25, .55); }
.kr-note__box {
  position: absolute; left: 26px; bottom: 41px;
  display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 3px; align-items: baseline;
  /* max-content: sifir boyutlu capaya gore daralip arac satirini (x) disari tasirmasin */
  width: max-content; min-width: 150px; padding: 9px 12px 10px;
  background: var(--kr-limestone);
  box-shadow: 0 0 0 1px rgba(29, 27, 25, .08), 0 14px 30px -22px rgba(29, 27, 25, .5);
  white-space: nowrap; translate: 0 50%;
}
/* hover notu yalniz gosterir (altindaki nesneyi ortmesin); secim notu etkilesimli */
.kr-note.is-on.is-sel .kr-note__box { pointer-events: auto; }
.kr-note.is-flip .kr-note__box { left: auto; right: 26px; }
/* Ust kenara sigmayinca: yana (yatay kilavuz) ya da asagiya acilir. */
.kr-note.is-side::after { bottom: 0; height: 0; border-left: 0; border-right: 0; }
.kr-note.is-side .kr-note__box { bottom: 0; }
.kr-note.is-below::after { bottom: auto; top: 3px; border-top: 0; border-bottom: 1px solid rgba(29, 27, 25, .55); }
.kr-note.is-below .kr-note__box { bottom: auto; top: 41px; translate: 0 -50%; }
.kr-note__i { grid-row: 1; font-size: 10px; font-weight: 500; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--brand-burgundy); }
.kr-note__n { grid-column: 1 / -1; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.kr-note__c { grid-column: 1 / -1; font-size: 12.5px; color: var(--text-tertiary); }
.kr-note__v {
  grid-column: 1 / -1; justify-self: start; margin-top: 3px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-burgundy); text-decoration: none;
}
.kr-note__v span { display: inline-block; transition: transform 280ms var(--kr-io); }
.kr-note__v:hover { color: var(--brand-burgundy-700); }
.kr-note__v:hover span { transform: translate(2px, -2px); }
.kr-note__tools {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 2px;
  margin: 8px -4px -3px; padding-top: 8px;
  box-shadow: 0 -1px 0 rgba(29, 27, 25, .08);
}
.kr-note .kr-sws { display: flex; gap: 6px; margin: 0 8px 0 4px; }
.kr-note .kr-sw { width: 16px; height: 16px; }
.kr-nt {
  appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 7px; border-radius: 1px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em; color: var(--text-tertiary);
  transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}
.kr-nt:hover { color: var(--ink); background: rgba(29, 27, 25, .05); }
.kr-nt--x { margin-left: auto; }
.kr-nt--x:hover { color: var(--brand-burgundy); }
.kr-nt svg { transition: transform 320ms var(--kr-ease); }
.kr-nt[data-act="rotate"]:hover svg { transform: rotate(-90deg); }
.kr-nt:focus-visible, .kr-note__v:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Baglamsal imlec etiketi: kucuk, keskin; buyuk daire YOK. */
.kr-cur {
  position: absolute; left: 0; top: 0; z-index: 9; pointer-events: none;
  padding: 3px 6px 3px 7px; background: var(--ink); color: var(--kr-limestone);
  font-size: 9.5px; line-height: 1.2; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  opacity: 0; transition: opacity 140ms linear;
}
.kr-cur.is-on { opacity: 1; }

/* Ipucu (tek seferlik) */
.kr__hint {
  position: absolute; left: 0; top: 0; z-index: 5; margin: 0;
  translate: -50% calc(-100% - 10px);
  padding: 8px 11px; background: var(--ink); color: var(--kr-limestone);
  font-size: 10.5px; line-height: 1.2; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 240ms var(--ease-standard), translate 240ms var(--kr-ease);
}
.kr__hint.is-on { opacity: 1; translate: -50% calc(-100% - 16px); }
.kr__hint::after {
  content: ''; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px;
  background: inherit; transform: translateX(-50%) rotate(45deg);
}

/* ---------------- Durum + baglamsal teklif (sag ust) ---------------- */
.kr-status { position: relative; z-index: 3; }
.kr-status p { margin: 0; }
.kr-status__scene { display: flex; flex-direction: column; gap: 6px; }
.kr-status__k { font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.kr-status__v { font-size: 22px; line-height: 1.1; font-weight: 500; letter-spacing: -.015em; color: var(--ink); }
.kr-status__meta {
  display: flex; align-items: center; gap: 10px; margin-top: 8px !important;
  font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.kr-status__meta [data-kr-count] { display: inline-block; color: var(--ink); }
.kr-status__meta [data-kr-count].is-tick { animation: krTick 420ms var(--kr-ease); }
@keyframes krTick { 0% { opacity: .2; transform: translateY(5px); } 100% { opacity: 1; transform: none; } }
.kr-status__dot { width: 3px; height: 3px; background: currentColor; transform: rotate(45deg); }
.kr-status__cat {
  display: inline-block; margin-top: 10px; font-size: 12.5px; color: var(--text-secondary); text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}
.kr-status__cat:hover { color: var(--brand-burgundy); }
.kr-status__go {
  order: 5;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 14px; margin-top: 14px;
  height: 40px; padding: 0 14px 0 16px;
  border: 1px solid var(--brand-burgundy);
  color: var(--brand-burgundy); text-decoration: none; white-space: nowrap;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  transition: color 320ms var(--kr-io), opacity 420ms var(--kr-ease), transform 420ms var(--kr-ease), visibility 0s;
}
.kr-status__go::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--brand-burgundy);
  transform: scaleX(0); transform-origin: left center; transition: transform 360ms var(--kr-io);
}
.kr-status__go svg { transition: transform 320ms var(--kr-io); }
.kr-status__go:hover { color: var(--kr-limestone); }
.kr-status__go:hover::before { transform: scaleX(1); }
.kr-status__go:hover svg { transform: translateX(5px); }
.kr-status__go:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.kr-status__go.is-ready svg { animation: krPoint 1400ms var(--kr-io) 1; }
@keyframes krPoint { 0%, 100% { transform: none; } 20% { transform: translateX(6px); } 40% { transform: none; } 60% { transform: translateX(4px); } 80% { transform: none; } }
/* Baglamsal: canli sahnede ilk etkilesime kadar gizli (JS yoksa gorunur). */
.kr.is-live:not(.is-started) .kr-status__go { opacity: 0; transform: translateY(6px); visibility: hidden; transition-delay: 0s, 0s, 0s, 420ms; }

/* ---------------- Kontrol seridi: sahneler + raf ----------------
   Kart/panel degil: tipografik sahne listesi ve uzerinde minyaturlerin
   durdugu tek bir raf cizgisi. Bosta geri cekilir, imlec yaklasinca
   netlesir. */
.kr__dock { position: relative; z-index: 4; }
.kr__traylabel {
  font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--text-tertiary);
}
.kr-pres { display: flex; align-items: baseline; gap: 20px; white-space: nowrap; }
.kr-pres .kr__traylabel { margin-right: 2px; }
.kr-pre {
  appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit;
  position: relative; display: inline-flex; align-items: center; padding: 8px 0 9px;
  font-size: 11px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--text-tertiary);
  transition: color var(--duration-fast) var(--ease-standard), opacity 300ms var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}
.kr-pre::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--brand-burgundy);
  transform: scaleX(0); transform-origin: left center; transition: transform 380ms var(--kr-io), opacity 200ms linear;
}
.kr-pre::before {
  /* kucuk mimari indeks isareti (yalniz secili) */
  content: ''; position: absolute; left: -9px; top: 50%; width: 4px; height: 4px; margin-top: -2px;
  background: var(--brand-burgundy); transform: rotate(45deg) scale(0); transition: transform 280ms var(--kr-ease);
}
.kr-pre__n { font-variant-numeric: tabular-nums; margin-right: 7px; letter-spacing: .06em; }
.kr-pre__d {
  display: inline-block; width: 0; height: 1px; margin-right: 0; background: currentColor; opacity: .6;
  transition: width 320ms var(--kr-io), margin 320ms var(--kr-io);
}
.kr-pre:hover { color: var(--ink); }
.kr-pre:hover::after { transform: scaleX(.25); opacity: .6; }
.kr-pre[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.kr-pre[aria-pressed="true"] .kr-pre__n { color: var(--brand-burgundy); }
.kr-pre[aria-pressed="true"] .kr-pre__d { width: 14px; margin-right: 7px; }
.kr-pre[aria-pressed="true"]::after { transform: scaleX(1); opacity: 1; }
.kr-pre[aria-pressed="true"]::before { transform: rotate(45deg) scale(1); }
.kr-pre:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.kr-reset {
  appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; justify-content: center; align-self: center;
  width: 28px; height: 28px; margin-left: -6px; color: var(--text-tertiary);
  transition: color var(--duration-fast) var(--ease-standard), transform var(--duration-slow) var(--kr-ease), opacity 300ms;
}
.kr-reset:hover { color: var(--ink); transform: rotate(-60deg); }
.kr-reset:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.kr__tray { position: relative; min-width: 0; margin-top: 14px; transition: opacity 300ms var(--ease-standard); }
.kr__tray .kr__traylabel {
  /* raf kendini anlatiyor; etiket yalniz erisilebilirlik icin */
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.kr-tray {
  /* raf: nesneler 78px'deki tek cizginin ustunde durur, adlar altinda */
  --shelf: 80px;
  display: flex; gap: 2px; margin: 0; padding: 16px 40px 0 0; list-style: none;
  background: linear-gradient(var(--kr-line), var(--kr-line)) 0 var(--shelf) / 100% 1px no-repeat;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 48px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 48px), transparent 100%);
}
.kr-tray::-webkit-scrollbar { display: none; }
.kr-tray li { flex: 0 0 auto; scroll-snap-align: start; }
.kr-tray__b {
  appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  width: 70px; padding: 0 0 2px; color: var(--text-tertiary);
  -webkit-user-select: none; user-select: none; touch-action: pan-x;
  -webkit-tap-highlight-color: transparent;
}
.kr-tray__b[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.kr-tray__thumb { display: block; width: 58px; height: 64px; transition: opacity 200ms linear; }
.kr-tray__thumb svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kr-tray__thumb svg polygon { stroke-width: .6; stroke-linejoin: round; }
.kr-tray__thumb .kr-tbody { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 320ms var(--kr-ease); }
.kr-tray__thumb .kr-tshadow { fill: #2b241c; opacity: .2; transition: opacity 320ms var(--kr-ease); }
.kr-tray__b:hover .kr-tbody, .kr-tray__b:focus-visible .kr-tbody { transform: translateY(-7px) scale(1.03); }
.kr-tray__b:hover .kr-tshadow, .kr-tray__b:focus-visible .kr-tshadow { opacity: .08; }
.kr-tray__b.is-taken .kr-tray__thumb { opacity: .16; }
.kr-tray__n {
  display: inline-flex; align-items: baseline; margin-top: 9px;
  font-size: 11.5px; line-height: 1.2; font-weight: 500; white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-standard);
}
.kr-tray__n::before {
  content: '+'; display: inline-block; width: 0; overflow: hidden; opacity: 0;
  color: var(--brand-burgundy); font-weight: 600;
  transition: width 260ms var(--kr-io), opacity 200ms var(--ease-standard);
}
.kr-tray__b:hover .kr-tray__n, .kr-tray__b:focus-visible .kr-tray__n { color: var(--ink); }
.kr-tray__b:hover .kr-tray__n::before, .kr-tray__b:focus-visible .kr-tray__n::before { width: .8em; opacity: 1; }
.kr-tray__b:focus-visible { outline: none; }
.kr-tray__b:focus-visible .kr-tray__n { box-shadow: var(--focus-ring); }
@media (hover: hover) and (pointer: fine) {
  .kr-tray__b { cursor: grab; }
  /* bosta geri cekil, imlec yaklasinca netles */
  .kr__dock .kr__tray, .kr__dock .kr-pre:not([aria-pressed="true"]), .kr__dock .kr-reset, .kr__dock .kr__traylabel { opacity: .55; }
  .kr__dock.is-near .kr__tray, .kr__dock.is-near .kr-pre, .kr__dock.is-near .kr-reset, .kr__dock.is-near .kr__traylabel { opacity: 1; }
}
/* Raftan kalkan minyatur (tasiyici) */
.kr-carry {
  position: absolute; left: 0; top: 0; z-index: 8; pointer-events: none;
  transform-origin: 50% 82%; transition: opacity 140ms linear;
}
.kr-carry svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kr-carry svg polygon { stroke-width: .6; stroke-linejoin: round; }
.kr-carry .kr-tshadow { fill: #2b241c; opacity: .14; }
.kr-carry .kr-tbody { transform: translateY(-6px); }
.kr-carry.is-fly { transition: transform 440ms var(--kr-io), opacity 160ms linear 380ms; }
.kr-carry.is-home { transition: transform 380ms var(--kr-io), opacity 140ms linear; }

/* ---------------- Secim paneli (yalniz dokunmatik) ---------------- */
.kr-panel {
  position: relative;
  display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: var(--space-4); row-gap: var(--space-3);
  align-items: center;
  padding: var(--space-4) var(--space-10) var(--space-4) var(--space-4);
  background: var(--kr-limestone);
  box-shadow: 0 0 0 1px rgba(29, 27, 25, .08), 0 22px 44px -28px rgba(29, 27, 25, .4);
  animation: krPanel 280ms var(--kr-ease);
}
.kr-panel[hidden] { display: none; }
@keyframes krPanel { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.kr-panel__media { width: 52px; height: 52px; overflow: hidden; background: var(--grey-50); }
.kr-panel__media img, .kr-panel__media svg { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.kr-panel__media svg { padding: 6px; mix-blend-mode: normal; box-sizing: border-box; }
.kr-panel__meta { min-width: 0; }
.kr-panel__cat { margin: 0; font-size: 10.5px; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--text-tertiary); }
.kr-panel__name { margin: 3px 0 0; font-size: 17px; line-height: 1.2; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kr-panel__link { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; padding: 2px 0; font-size: 14px; font-weight: 500; color: var(--brand-burgundy); text-decoration: none; }
.kr-panel__link::after { content: '\2197'; }
.kr-panel__tools { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-2); }
.kr-sws { display: flex; gap: var(--space-2); }
.kr-sw {
  appearance: none; border: 0; cursor: pointer; padding: 0;
  width: 28px; height: 28px; border-radius: var(--radius-circle);
  background: var(--sw); box-shadow: inset 0 0 0 1px rgba(29,27,25,.14);
  position: relative; transition: transform 240ms var(--kr-ease);
}
.kr-sw::before { content: ''; position: absolute; inset: -6px; }
.kr-sw:hover { transform: translateY(-1px); }
.kr-sw[aria-checked="true"] { box-shadow: inset 0 0 0 1px rgba(29,27,25,.14), 0 0 0 2px var(--kr-limestone), 0 0 0 3px var(--ink); }
.kr-sw:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.kr-panel__sep { flex: 1 1 auto; }
.kr-tool, .kr-panel__x {
  appearance: none; border: 0; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; background: transparent; color: var(--grey-800);
}
.kr-panel__x { position: absolute; top: var(--space-3); right: var(--space-3); width: 32px; height: 32px; color: var(--text-tertiary); }
.kr-tool:focus-visible, .kr-panel__x:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (hover: hover) and (pointer: fine) {
  .kr-panel { display: none !important; }
}

/* Surukleme: cevre sessizlesir, yalniz oda ve tasinan nesne. */
.kr__h1, .kr-status, .kr__dock { transition: opacity 260ms var(--ease-standard); }
.kr.is-dragging .kr__h1, .kr.is-dragging .kr-status { opacity: .3; }
.kr.is-dragging .kr__presets { opacity: .3; }

/* ---------------- Azaltilmis hareket ---------------- */
.kr--rm .kr-lift, .kr--rm .kr-item, .kr--rm .kr-sh, .kr--rm .kr-hit, .kr--rm .kr-sh polygon,
.kr--rm .kr-grid, .kr--rm .kr-rug, .kr--rm .kr-panel, .kr--rm .kr__hint, .kr--rm .kr-note,
.kr--rm .kr-cgrid { transition: none !important; animation: none !important; }
.kr--rm .kr__amb::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .kr, .kr * { animation-duration: 1ms !important; transition-duration: 1ms !important; }
  .kr__amb::after { animation: none !important; }
}
@media (forced-colors: active) {
  .kr-corn { stroke: Highlight; }
  .kr-pre[aria-pressed="true"] { outline: 2px solid Highlight; }
  .kr-status__go { border: 1px solid ButtonText; }
}

/* =================================================================
   MOBIL + TABLET (< 1024px): baslik -> oda (tam tasma) -> durum -> serit.
   ================================================================= */
@media (max-width: 1023px), (max-aspect-ratio: 999/1000) {
  .kr {
    display: flex; flex-direction: column;
    padding: var(--space-7) var(--kr-pad) var(--space-9);
    background:
      radial-gradient(60% 34% at 80% 44%, var(--kr-warm), rgba(255, 255, 255, 0) 72%),
      radial-gradient(100% 70% at 50% 46%, var(--kr-c1) 0%, var(--kr-c2) 100%);
  }
  .kr__amb::after { width: 120vw; height: 120vw; right: -40vw; top: 30%; }
  .kr__display { --kr-hs: min(16.4vw, 96px); }
  .kr__stage {
    order: 2; margin: calc(var(--kr-hs, 60px) * -.2) calc(-1 * var(--kr-pad)) 0;
    width: calc(100% + 2 * var(--kr-pad)); aspect-ratio: 894 / 792;
  }
  .kr__h1 { order: 1; }
  .kr-status {
    order: 3; display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: var(--space-4);
    margin-top: var(--space-2);
  }
  .kr-status__v { font-size: 19px; }
  .kr-status__meta { margin-top: 0 !important; grid-column: 2; grid-row: 1; }
  .kr-status__cat { grid-column: 1 / -1; }
  .kr-status__go { grid-column: 1 / -1; justify-content: space-between; height: 48px; margin-top: 0; }
  .kr.is-live:not(.is-started) .kr-status__go { display: none; }
  .kr__dock {
    order: 4; display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "pre" "cell"; margin-top: var(--space-6);
  }
  .kr__presets { grid-area: pre; margin: 0 calc(-1 * var(--kr-pad)); padding: 0 var(--kr-pad); overflow-x: auto; scrollbar-width: none; }
  .kr__presets::-webkit-scrollbar { display: none; }
  .kr-pres { gap: 18px; padding-left: 10px; }
  .kr-pres .kr__traylabel { display: none; }
  .kr__tray, .kr-panel { grid-area: cell; }
  .kr__tray { margin-top: var(--space-4); }
  .kr__tray .kr__traylabel { display: none; }
  .kr-tray { margin: 0 calc(-1 * var(--kr-pad)); padding-left: var(--kr-pad); padding-right: var(--kr-pad); }
  .kr.has-panel .kr__tray { visibility: hidden; }
  .kr-panel { align-self: start; margin-top: var(--space-4); scroll-margin-bottom: 96px; scroll-margin-top: 96px; }
  .kr-note__box { min-width: 0; padding: 7px 10px; }
}
@media (min-width: 640px) and (max-width: 1023px), (min-width: 1024px) and (max-aspect-ratio: 999/1000) {
  .kr { --kr-pad: var(--space-8); }
  .kr__display { --kr-hs: min(12vw, 120px); }
  .kr-status { grid-template-columns: 1fr auto; }
  .kr-status__go { justify-self: start; }
  .kr-panel { max-width: 520px; }
}

/* =================================================================
   MASAUSTU (>= 1024px): oda hero'nun kendisi; arayuz bos ucgenlerde.
   ================================================================= */
@media (min-width: 1024px) and (min-aspect-ratio: 1/1) {
  .kr {
    --kr-side: max(var(--space-9), calc((100vw - 1200px) / 2));
    /* ilk ekrana tam sigar (alt kenar = sabit balonun ustu hesaplanabilir) */
    height: clamp(600px, calc(100svh - 92px), 980px);
  }
  .kr__h1 { position: absolute; left: var(--kr-side); top: clamp(34px, 6.5vh, 84px); }
  .kr__stage {
    /* Oda cerceveden BUYUK: duvar ustleri ust kenardan tasar (kampanya
       kirpmasi), on kose tam alt kenara oturur (onu kesilmez). Baslik
       odanin sol duvarinin ustune biner. top = 100% - .975 * height. */
    position: absolute; right: -1vw; top: calc(var(--kst, -15) * 1%);
    height: calc(var(--ksh, 118) * 1%); aspect-ratio: 894 / 792;
  }
  .kr-status {
    position: absolute; right: clamp(24px, 3.4vw, 72px); top: clamp(28px, 4.6vh, 64px);
    display: flex; flex-direction: column; align-items: flex-end; text-align: right;
  }
  .kr-status__scene { align-items: flex-end; }
  .kr__dock {
    position: absolute; left: var(--kr-side); bottom: clamp(104px, 12vh, 124px);
    width: min(520px, 34vw);
  }
  .kr-panel { position: absolute; left: calc(100% + 24px); bottom: 0; width: 320px; }
}
@media (min-width: 1024px) and (min-aspect-ratio: 1/1) and (max-height: 760px) {
  .kr__eyebrow { margin-bottom: var(--space-3); }
  .kr__dock { bottom: 100px; }
  .kr-tray { --shelf: 70px; }
  .kr-tray__thumb { height: 54px; }
}

/* Dokunmada tarayici vurgusu / odak cercevesi YOK (mobilde odanin
   etrafinda siyah "secim" cercevesi gorunuyordu, 23/09). Klavye odagi
   kendi kesikli halkasini (.kr-focus) ve :focus-visible golgesini kullanir. */
.kr, .kr * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.kr-svg, .kr-svg * { outline: none; -webkit-touch-callout: none; }
.kr-svg:focus, .kr-svg *:focus { outline: none; }

/* =================================================================
   24/09 SANAT YONETIMI TURU
   - Baslik iki SVG'nin arasinda (duvarin onu, mobilyanin arkasi).
   - Sahneler sol on OLCU CIZGISINE, teklif sag on olcu cizgisine oturur:
     kontroller web kolonuna degil odanin eksenlerine hizali. Konum
     sahnenin kendi koordinatindan (kap birimi, --kq = 1 sahne birimi).
   - Oda ilk yuklemede kurulur (kabuk -> buyuk parcalar -> kucukler ->
     sarkitlar -> arayuz). JS yoksa 2.6 sn'de kendiliginden gorunur.
   - Hero sert bir kenarla bitmez: zemin kagit rengine erir, olcu ve
     yapi izgarasi alttaki bolume taşar.
   ================================================================= */

/* ---- Ust bilgi: kunye, anahtar kelime degil ---- */
.kr__eyebrow { display: flex; align-items: center; gap: 12px; letter-spacing: .2em; }
.kr__eyebrow::before {
  /* cizim kayit isareti (registration mark) */
  content: ''; flex: 0 0 auto; width: 13px; height: 13px;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 1px 100% no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 100% 1px no-repeat,
    radial-gradient(circle, transparent 3.2px, var(--ink) 3.4px, var(--ink) 4.2px, transparent 4.4px);
  opacity: .7;
}
.kr__meta-a { color: var(--ink); font-weight: 600; }
.kr__meta-b { color: var(--text-tertiary); }

/* ---- Teklif: yapilandiricinin son adimi; kutu / dolgu YOK ---- */
.kr-status__go {
  border: 0; height: auto; padding: 10px 0; margin: 0; gap: 12px; overflow: visible;
  color: var(--brand-burgundy); font-size: 11.5px; letter-spacing: .16em;
}
.kr-status__go::before { content: none; }
.kr-status__go svg { display: none; }
.kr-go__t { position: relative; transition: letter-spacing 340ms var(--kr-io), color 240ms var(--ease-standard); }
.kr-go__a { position: relative; display: inline-block; width: 30px; height: 9px; transition: width 340ms var(--kr-io); }
.kr-go__a::before { content: ''; position: absolute; left: 0; right: 1px; top: 4px; height: 1.2px; background: currentColor; }
.kr-go__a::after {
  content: ''; position: absolute; right: 0; top: 1px; width: 6px; height: 6px;
  border-top: 1.2px solid currentColor; border-right: 1.2px solid currentColor; transform: rotate(45deg);
}
.kr-go__m {
  /* secili sahne isareti: sahnelerdeki eskenar dortgenin ayni */
  flex: 0 0 auto; width: 5px; height: 5px; background: currentColor; transform: rotate(45deg);
  transition: transform 340ms var(--kr-ease);
}
.kr-status__go:hover { color: var(--brand-burgundy); }
.kr-status__go:hover .kr-go__a { width: 58px; }
.kr-status__go:hover .kr-go__t { letter-spacing: .2em; }
.kr-status__go:hover .kr-go__m { transform: rotate(225deg); }
.kr-status__go.is-ready .kr-go__a { animation: krReach 1300ms var(--kr-io) 1; }
@keyframes krReach { 0%, 100% { width: 30px; } 30% { width: 50px; } 60% { width: 30px; } }
.kr.is-live:not(.is-started) .kr-status__go { opacity: 1; transform: none; visibility: visible; }

/* ---- Raf: kucuk nesneler rafta bekler, adlar ancak uzerine gelince ---- */
.kr-tray__thumb { width: 64px; height: 72px; }
.kr-tray { --shelf: 88px; }
.kr-tray__b { width: 74px; }
@media (hover: hover) and (pointer: fine) {
  .kr__dock .kr__tray, .kr__dock .kr-pre:not([aria-pressed="true"]), .kr__dock .kr-reset { opacity: 1; }
  .kr-tray__n { opacity: 0; transform: translateY(-3px); transition: opacity 200ms var(--ease-standard), transform 260ms var(--kr-ease), color 200ms; }
  .kr-tray__b:hover .kr-tray__n, .kr-tray__b:focus-visible .kr-tray__n { opacity: 1; transform: none; }
}

/* ---- Ilk yukleme ---- */
.kr--pre .kr-items, .kr--pre .kr-shadows, .kr--pre .kr-deco { opacity: 0; animation: krShow 1ms linear 2.6s forwards; }
@keyframes krShow { to { opacity: 1; } }
.kr.is-enter .kr-cgrid, .kr.is-enter .kr-anno { animation: krFadeIn 1100ms var(--ease-standard) both; }
@keyframes krFadeIn { from { opacity: 0; } }
.kr.is-enter .kr-deco { animation: krDeco 720ms var(--kr-ease) var(--kr-enter, 600ms) both; }
@keyframes krDeco { from { opacity: 0; translate: 0 -26px; } }
.kr.is-enter .kr__tray, .kr.is-enter .kr__presets, .kr.is-enter .kr-status {
  animation: krUi 640ms var(--kr-ease) calc(var(--kr-enter, 600ms) - 160ms) both;
}
@keyframes krUi { from { opacity: 0; } }

/* ---- Masaustu: odanin eksenleri ---- */
@media (min-width: 1024px) and (min-aspect-ratio: 1/1) {
  .kr {
    container-type: size;
    /* 1 sahne birimi (viewBox) = --kq; sahne sol kenari = --ksl */
    --kq: calc(var(--ksh) * 1cqh / 792);
    --ksl: calc(100cqw + 1vw - var(--ksh) * 1cqh * 894 / 792);
    overflow-x: clip; overflow-y: visible;
    background:
      linear-gradient(180deg, rgba(250, 249, 247, 0) 70%, var(--kr-page, #FFFFFF) 100%),
      radial-gradient(34% 40% at 84% 30%, var(--kr-warm), rgba(255, 255, 255, 0) 72%),
      radial-gradient(140% 120% at 62% 50%, rgba(58, 44, 30, 0) 58%, rgba(58, 44, 30, .07) 100%),
      radial-gradient(90% 90% at 62% 50%, var(--kr-c1) 0%, var(--kr-c2) 100%);
  }
  .kr::after { bottom: 0; }
  .kr-dimt { display: none; }
  .kr__dock { position: static; width: auto; }
  .kr__tray {
    position: absolute; left: var(--kr-side); bottom: clamp(100px, 11vh, 120px);
    /* raf, sahne ekseninin basladigi noktadan once biter */
    width: min(470px, calc(var(--ksl) + 143.1 * var(--kq) - var(--kr-side) - 28px)); margin: 0;
  }
  /* Sahneler: sol on olcu cizgisinin disinda, cizgiyle ayni egimde.
     Capa = P(180, 472) = (-252.9, 326) (sahne birimi). */
  .kr__presets {
    position: absolute; z-index: 4;
    left: calc(var(--ksl) + (-252.9 + 396) * var(--kq));
    top: calc(var(--kst) * 1cqh + (326 + 276) * var(--kq));
    transform-origin: 0 0; rotate: 30deg;
  }
  .kr-pres { gap: 26px; }
  .kr-pre { font-size: 11.5px; letter-spacing: .18em; padding: 9px 0; }
  /* Teklif: sag on olcu cizgisinin disinda, one dogru okunur.
     Capa = P(596, 344) = (218.2, 470). */
  .kr-status {
    left: calc(var(--ksl) + (218.2 + 396) * var(--kq)); right: auto;
    top: calc(var(--kst) * 1cqh + (470 + 276) * var(--kq));
    transform-origin: 0 0; rotate: -30deg;
    align-items: flex-start; text-align: left;
  }
  .kr-panel { position: absolute; left: var(--kr-side); bottom: calc(clamp(100px, 11vh, 120px) + 130px); width: 320px; }
}
@media (min-width: 1024px) and (min-aspect-ratio: 1/1) and (max-height: 760px) {
  .kr__tray { bottom: 96px; }
}

/* ---- Mobil / tablet: teklif de kutusuz, basparmak boyu ---- */
@media (max-width: 1023px), (max-aspect-ratio: 999/1000) {
  .kr-status__go { min-height: 48px; justify-content: flex-start; font-size: 12px; }
  .kr.is-live:not(.is-started) .kr-status__go { display: inline-flex; }
}

/* ---- Ince ayar (1920 incelemesi) ---- */
@media (min-width: 1024px) and (min-aspect-ratio: 1/1) {
  .kr-pre { font-size: clamp(11.5px, .7vw, 13.5px); }
  .kr-status__go { font-size: clamp(11.5px, .7vw, 13.5px); font-weight: 600; }
}
/* Ipucu: siyah baloncuk degil, notla ayni dil (kirec zemin, sac teli) */
.kr__hint {
  background: var(--kr-limestone); color: var(--ink);
  box-shadow: 0 0 0 1px rgba(29, 27, 25, .12), 0 14px 30px -22px rgba(29, 27, 25, .5);
  padding: 8px 12px 8px 22px;
}
.kr__hint::before {
  content: ''; position: absolute; left: 10px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px;
  background: var(--brand-burgundy); transform: rotate(45deg);
}
.kr__hint::after { box-shadow: 1px 1px 0 rgba(29, 27, 25, .12); }

/* Alttaki bolumler ayni dilden: duz levha (yuvarlak kose yok) */
.kr ~ .k-home-sec .k-cats__plate, .kr ~ .k-home-sec .k-cats__name { border-radius: 0; }

/* Mobil: oda kucultulmez, KIRPILIR -- sahne %128, yanlardan tasar
   (editoryal kadraj; ortadaki calisma alani tam kalir). */
@media (max-width: 639px) {
  .kr { overflow: hidden; }
  .kr__stage { width: calc(128% + 2 * var(--kr-pad)); margin-left: calc(-14% - var(--kr-pad)); margin-right: 0; }
}

/* ---- Kisi ---- */
.kr-person { pointer-events: none !important; transition: opacity 300ms var(--ease-standard); }
.kr-person * { pointer-events: none !important; }
.kr-person.is-gone { opacity: 0; }
.kr-person.is-land { animation: krLand 360ms var(--kr-ease) both; }
@keyframes krLand { from { opacity: .4; translate: 0 -8px; } }
.kr-plumb__i { animation: krPlumb 2600ms ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes krPlumb {
  0%, 100% { transform: translateY(0) scaleX(1); }
  25% { transform: translateY(-3px) scaleX(.35); }
  50% { transform: translateY(-5px) scaleX(1); }
  75% { transform: translateY(-3px) scaleX(.35); }
}
.kr--rm .kr-plumb__i { animation: none; }
.kr.is-dragging .kr-plumb { opacity: 0; }

/* =================================================================
   24/09 SON UYGULAMA TURU
   ================================================================= */
/* ---- Ust etiket H1'in DISINDA; konum artik baslik kutusunda ---- */
.kr__head { position: relative; z-index: 1; pointer-events: none; transition: opacity 260ms var(--ease-standard); }
.kr__eyebrow { margin: 0 0 var(--space-5); }
.kr.is-dragging .kr__head { opacity: .3; }
.kr.is-dragging .kr__h1 { opacity: 1; }
@media (max-width: 1023px), (max-aspect-ratio: 999/1000) {
  .kr__head { order: 1; }
}
@media (min-width: 1024px) and (min-aspect-ratio: 1/1) {
  .kr__head { position: absolute; left: var(--kr-side); top: clamp(34px, 6.5vh, 84px); }
  .kr__h1 { position: relative; left: auto; top: auto; }
}
@media (min-width: 1024px) and (min-aspect-ratio: 1/1) and (max-height: 760px) {
  .kr__eyebrow { margin-bottom: var(--space-3); }
}

/* ---- Teklif: sahne + gercek adet (state'ten), altinda eylem ---- */
.kr-status__go { flex-direction: column; align-items: flex-start; gap: 6px; text-decoration: none; }
.kr-go__s {
  font-size: .9em; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.kr-go__row { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
.kr-status__go.is-empty .kr-go__row { opacity: .5; }
.kr-status__go.is-nope .kr-go__row { animation: krShake 380ms var(--ease-standard); }
@media (max-width: 1023px), (max-aspect-ratio: 999/1000) {
  .kr-status__go { height: auto; min-height: 56px; padding: 8px 0; justify-content: center; }
}

/* ---- Okunurluk: secili olmayan sahneler silik degil, ikincil ---- */
.kr-pre { color: var(--text-secondary); font-weight: 500; }
.kr-reset { color: var(--text-secondary); }
/* Dokunma alani: gorsel kucuk, hedef 44 px */
@media (pointer: coarse), (max-width: 1023px) {
  .kr-pre { min-height: 44px; min-width: 44px; justify-content: center; padding-top: 0; padding-bottom: 0; }
  .kr-reset { width: 44px; height: 44px; margin-left: -8px; }
}

/* ---- Gorunmezken surekli hareket durur ---- */
.kr.is-off *, .kr.is-off *::before, .kr.is-off *::after, .kr.is-off::after { animation-play-state: paused !important; }

/* ---- Sahnedeki urunler: odadaki fikir -> gercek urun ----
   Hero'nun zemin cizgisinin hemen altinda, sayfa kolonunda. Duz levha,
   gercek urun fotografi; bordo yalniz eylem/secim rengi, burada yok. */
.kr-real { position: relative; z-index: 1; padding: var(--space-6) 0 var(--space-4); }
.kr-real__h {
  display: flex; align-items: center; gap: 12px; margin: 0 0 var(--space-4);
  font-size: 11px; line-height: 1.3; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
}
.kr-real__h::before {
  content: ''; flex: 0 0 auto; width: 13px; height: 13px; opacity: .7;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 1px 100% no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 100% 1px no-repeat,
    radial-gradient(circle, transparent 3.2px, var(--ink) 3.4px, var(--ink) 4.2px, transparent 4.4px);
}
.kr-real__k { color: var(--ink); font-weight: 600; }
.kr-real__s { color: var(--text-tertiary); }
.kr-real__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(118px, 1fr); gap: 16px;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.kr-real__list::-webkit-scrollbar { display: none; }
.kr-real__i { min-width: 0; }
.kr-real__a { display: flex; flex-direction: column; gap: 2px; color: var(--ink); text-decoration: none; }
.kr-real__m {
  display: block; aspect-ratio: 1; margin-bottom: 8px; overflow: hidden;
  background: #F4F2EE;
}
.kr-real__m img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform 420ms var(--kr-ease); }
.kr-real__n { font-size: 14px; line-height: 1.25; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kr-real__q { font-weight: 500; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.kr-real__c { font-size: 12.5px; line-height: 1.3; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kr-real__a:hover .kr-real__m img { transform: scale(1.04); }
.kr-real__a:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.kr-real__none { font-size: 14px; color: var(--text-secondary); padding: var(--space-3) 0; }
@media (max-width: 1023px), (max-aspect-ratio: 999/1000) {
  .kr-real { padding-top: var(--space-5); }
  .kr-real__list { grid-auto-columns: 120px; margin: 0 calc(-1 * var(--space-4, 16px)); padding: 0 var(--space-4, 16px); scroll-padding: 0 var(--space-4, 16px); }
}
@media (prefers-reduced-motion: reduce) {
  .kr-real__m img { transition: none; }
}

/* ---- Teklif cekmecesinde sahne satirinin bilgisi ---- */
.kr-qmeta { display: block; }

/* ---- Tablet (640-1023 / dikey): teklif ilk ekranda -- odanin bos sol on
   kosesinin ustune biner (sabit alt cubugun ustunde kalir). ---- */
@media (min-width: 640px) and (max-width: 1023px), (min-width: 1024px) and (max-aspect-ratio: 999/1000) {
  .kr-status { position: relative; z-index: 3; margin-top: -16vw; }
}
/* ---- Masaustu: teklif capasi olcu cizgisi boyunca one (sagdaki sabit
   WhatsApp balonundan uzak). P(556, 344) yerine 40 birim geri. ---- */
@media (min-width: 1024px) and (min-aspect-ratio: 1/1) {
  .kr-status {
    left: calc(var(--ksl) + (218.2 - 34.6 + 396) * var(--kq));
    top: calc(var(--kst) * 1cqh + (470 + 20 + 276) * var(--kq));
  }
}
/* Sahne olcegi (masaustu): oda ust kenardan tasar, on kosesinin altinda
   sahne/teklif kontrollerine yer kalir -- ilk ekranda kesilmezler.
   --ksh = sahne yuksekligi, --kst = ust kayma (hero yuksekliginin %'si). */
@media (min-width: 1024px) and (min-aspect-ratio: 1/1) {
  .kr { --ksh: 106; --kst: -10; }
}
@media (min-width: 1024px) and (min-aspect-ratio: 1/1) and (max-height: 820px) {
  .kr { --ksh: 100; --kst: -7; }
}
@media (min-width: 1024px) and (min-aspect-ratio: 1/1) and (max-height: 740px) {
  .kr { --ksh: 96; --kst: -5; }
}