/* Çatı katı (portfolyo) ekleri: oda.css'in üstüne. Kart içi küçük resim ızgarası (raflar), süreç adımları listesi
   (TV), ışık kutusu, düz liste katmanı, "Odaya in" düğmesi. Renkler oda.css'teki koyu panel diliyle aynı. */
/* Kart: koyu perde üstünde açık yazı (oda.css'te --c araç rengi; çatıda sıcak kum), kaydırılabilir; masaüstünde şeridin
   üstünde biter, dikey telefonda ekranın yarısını geçmez (Geri düğmesi görünür kalsın) */
.cati .story-card { --c: #e8c48c; color: var(--sc-ink); max-height: min(78svh, 680px); overflow-y: auto; overscroll-behavior: contain; }
.cati[data-panel="side"] .story-card { max-height: calc(100% - max(72px, 50% - 210px) - 96px); }
.cati[data-panel="bottom"] .story-card { max-height: 52svh; overscroll-behavior: auto; }
.cati[data-panel="bottom"] .cati-izgara { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
/* Ekran dışına düşen işaretler sahneyi taşırır; odak oraya gidince tarayıcı sahneyi kaydırmasın (hidden kaydırılabilir) */
.story.cati { overflow: clip; }
/* Motorun araç metinleri portfolyoda yok: çipte 'Yakında', dokunmatikte 'sürükle' ipucu */
.cati .chip-act { display: none; }
@media (pointer: coarse) { .cati .sc-hint { display: none; } }
.cati-ek { margin: 10px 0 12px; }
.cati-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.cati-k {
  display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; background: none; color: inherit;
  font: 500 12px/1.25 'Schibsted Grotesk', system-ui, sans-serif; text-align: left; cursor: zoom-in;
}
.cati-k img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; background: rgba(255, 255, 255, 0.08); }
@media (hover: hover) and (pointer: fine) {
  .cati-k[data-src] img { transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), opacity 160ms ease; }
  .cati-k[data-src]:hover img { transform: scale(1.03); }
}
/* Araç bağlantısı: ışık kutusu değil, sayfaya gider; kare küçük resim (araç şablonu) */
.cati-arac { cursor: pointer; text-decoration: none; }
.cati-arac img { aspect-ratio: 1; object-fit: contain; background: #eaedeb; }
.cati-izgara + .cati-ara { margin-top: 14px; }
.cati-k:focus-visible { outline: 2px solid #e8c48c; outline-offset: 2px; border-radius: 6px; }
.cati-yazi p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
/* Genel planda tur yazısı sol altta: cam cepheyi örtmesin (telefonda ortada) */
@media (pointer: fine) and (min-width: 721px) {
  .cati .oda-tur-giris { left: max(28px, env(safe-area-inset-left)); translate: 0 0; align-items: flex-start; text-align: left; }
  .cati .oda-tur-giris.gizli, .cati.is-focused .oda-tur-giris { translate: 0 12px; }
}
/* Ekran kartı: süreç adımları (seçilen TV'de oynar; etkin adım kum rengi) */
.cati-adim-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cati-adim-liste button {
  display: flex; align-items: baseline; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 8px;
  background: rgba(255, 255, 255, 0.06); color: inherit; font: 500 14px/1.3 'Schibsted Grotesk', system-ui, sans-serif; text-align: left; cursor: pointer;
}
.cati-adim-liste button span { font: 500 12px 'IBM Plex Mono', monospace; opacity: 0.7; }
.cati-adim-liste button[aria-current] { background: rgba(232, 196, 140, 0.2); color: #f6e6c6; box-shadow: inset 3px 0 0 #e8c48c; }
.cati-adim-liste button:focus-visible { outline: 2px solid #e8c48c; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .cati-adim-liste button:hover { background: rgba(255, 255, 255, 0.11); } }
.cati-fikir { margin-top: 12px; }
.cati-ara { margin: 4px 0 6px; font: 600 12px/1.3 'Schibsted Grotesk', system-ui, sans-serif; opacity: 0.75; }
.cati-in {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: #e8c48c; color: #15171a; text-decoration: none; font: 600 14px 'Schibsted Grotesk', system-ui, sans-serif;
}
.cati-in:focus-visible { outline: 2px solid #f1ede6; outline-offset: 2px; }

.cati-kutu {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px;
  background: rgba(12, 13, 15, 0.86);
}
.cati-kutu[hidden] { display: none; }
.cati-kutu figure { margin: 0; max-width: min(92vw, 980px); color: #f1ede6; }
.cati-kutu img { display: block; max-width: 100%; max-height: 74svh; margin: 0 auto; border-radius: 8px; }
.cati-kutu figcaption { margin-top: 12px; font: 400 15px/1.45 'Schibsted Grotesk', system-ui, sans-serif; }
.cati-kutu figcaption b { display: block; font-weight: 600; margin-bottom: 2px; }
.cati-kapat {
  position: absolute; top: max(14px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right));
  min-height: 44px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px;
  background: rgba(20, 21, 24, 0.7); color: #f1ede6; font: 600 14px 'Schibsted Grotesk', system-ui, sans-serif; cursor: pointer;
}

.cati-liste-ac {
  min-height: 36px; padding: 0 14px; margin-right: 10px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px;
  background: rgba(20, 21, 24, 0.35); color: #fff; font: 600 13px 'Schibsted Grotesk', system-ui, sans-serif; cursor: pointer;
}
.cati-liste { position: fixed; inset: 0; z-index: 55; overflow-y: auto; overscroll-behavior: contain; background: #15171a; color: #ece8e1; }
.cati-liste[hidden] { display: none; }
.cati-liste-ic { max-width: 720px; margin: 0 auto; padding: 72px 20px 48px; font: 400 15px/1.55 'Schibsted Grotesk', system-ui, sans-serif; }
.cati-liste h2 { font: 700 34px/1.1 'Big Shoulders Display', 'Schibsted Grotesk', sans-serif; margin: 0 0 18px; }
.cati-liste h3 { font-size: 18px; margin: 28px 0 6px; }
.cati-liste ul, .cati-liste ol { padding-left: 20px; }
.cati-liste h4 { font-size: 15px; margin: 16px 0 4px; }
.cati-liste a { color: #e8c48c; }
.cati-liste small { opacity: 0.7; }
.cati-liste .cati-kapat { position: fixed; }

.cati-asagi {
  position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 6;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px;
  background: rgba(20, 21, 24, 0.62); color: #fff; text-decoration: none; font: 600 14px 'Schibsted Grotesk', system-ui, sans-serif;
  backdrop-filter: blur(6px);
}
@media (pointer: fine) and (min-width: 721px) { .cati-asagi { bottom: 96px; } } /* masaüstünde şeridin üstünde */
.cati-asagi svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cati-noscript { padding: 80px 20px; max-width: 640px; margin: 0 auto; }
@media (prefers-reduced-motion: reduce) { .cati-k[data-src] img { transition: none; } }