/* ════════════════════════════════════════════════════════════════════
   OpsStudio — masaüstü landing konsepti

   Renk: kırık beyaz (#F7F7F4) ana yüzey, beyaz yükseltilmiş yüzey,
   Ops Ink (#111) metin. Ops Lime yalnız üç iş için: ana eylem, aktif
   durum, tek vurgu. Yapı asla lime değil.

   Tipografi: başlıklar Archivo (wdth 125 — geniş, editoryal, kendinden
   emin), gövde ve ürün arayüzü Schibsted Grotesk (nötr grotesk),
   kelime markası da Archivo (wdth 125, 800 — başlıkla aynı ses,
   Bricolage Grotesque KALDIRILDI 2026-08-13: ayrı bir "kelime markası
   fontu" iki rakip kimlik yaratıyordu, üstelik Bricolage indie-SaaS
   çevresinde aşırı kullanılan bir font — CLAUDE.md'nin kaçınmamızı
   söylediği "yazılım zevki" sinyaline giriyordu), gerçek veri IBM Plex
   Mono.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --canvas: #f7f7f4;
  --ink: #111111;
  --graphite: #5f5f5f;
  --hairline: #e7e7e2;
  --hairline-2: #d8d8d1;
  --lime: #b8ff3b;
  --lime-hover: #a8eb30;

  /* Feature→dashboard connector. İki ayrı ton, panel temasına göre:
     koyu panelde tam lime, açık panelde koyulaşmış doygun yeşil — bu
     ikincisi hem açık dashboard üstünde hem çizginin geçtiği siyah
     ortam üstünde okunuyor (bkz. .exp-sticky[data-theme]). */
  --connector-dark: #b8ff3b;
  --connector-light: #4f8a00;

  /* Ürün sahnesinin iki ortam rengi. Kasıtlı ters kontrast: açık
     dashboard siyah çevrede, koyu dashboard kırık beyaz çevrede. */
  --stage-dark: #0b0b0c;
  --stage-light: #f7f7f4;

  --page: min(1520px, 100% - 128px);
  --nav-h: 88px;
  --ease: cubic-bezier(0.16, 0.84, 0.44, 1);

  /* Display = Archivo, wdth ekseni 125'e açık. 110'da gövde fontundan
     ayırt edilemiyordu (ölçüldü: yan yana neredeyse aynı); asıl karakter
     — geniş, editoryal, poster gibi — üst uçta. */
  --font-display: "Archivo", system-ui, sans-serif;
  --wdth-display: 125%;
  --font-body: "Schibsted Grotesk", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  /* Yalnız kelime markası (.wordmark) için — gövdeye/başlıklara sızmaz.
     Chicago şehir tabelası mirasli, dar/dik gövdeli, sert köşeli display
     font. Gerçek italiği yok (Google Fonts'ta bu ailede italik kesim
     sağlanmıyor); eğim aşağıda .wordmark'ta font-style: oblique ile
     kontrollü veriliyor. */
  --font-wordmark: "Big Shoulders Display", system-ui, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video, svg { display: block; }
h1, h2, h3, p { margin: 0; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--ink); color: var(--canvas); }

.page { width: var(--page); margin-inline: auto; }

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}


/* ─── Logo ────────────────────────────────────────────────────────────
   İşaret 40px altına inmiyor: dört ayrı oktan oluşuyor, aralarındaki
   boşluklar bu boyutun altında alt-piksele düşüp doluyor. */
.mark { color: inherit; }
.mark-40 { width: 40px; height: 40px; }

/* "OpsStudio" — nav'daki dört-ok işareti kaldırıldı (kullanıcı talebi
   2026-08-14), kimliği artık tek başına kelime markası taşıyor.

   2026-08-19: Fraunces serif'ten Big Shoulders Display'e geçildi —
   kullanıcı "hafif eğik, sert köşeli, çizgi film karakteri gibi ama tam
   değil" tarif etti; serif o tarife uymuyordu. 12 aday nav'da canlı
   test edildi (Bungee, Racing Sans One, Anton, Bangers, Saira Condensed
   İtalik, Big Shoulders Display İtalik, vb.) — Bangers ve Passion One
   "fazla çizgi film / fazla yuvarlak" diye elendi.

   ÖNEMLİ DÜZELTME 1: ilk seçim "Big Shoulders Display italik — gerçek
   italik kesim" diye sunulmuştu, YANLIŞTI. Google Fonts'ta bu ailenin
   italik kesimi hiç yok; tarayıcı font-style:italic isteğini görünce
   kendi kendine sahte bir eğim uyduruyordu (Saira Condensed için de
   aynı durum).

   ÖNEMLİ DÜZELTME 2: font-style: oblique -10deg de İŞE YARAMADI —
   Chromium bu fontta oblique'i sentezlemiyor, computed style'da açı
   görünse bile ekranda dümdüz duruyordu (kullanıcı fark etti: "yana
   eğik değil ki"). Gerçek çözüm transform: skewX() — CSS'in font
   sentezine güvenmek yerine harfleri BİZ döndürüyoruz, tüm
   tarayıcılarda garanti çalışır. */
.wordmark {
  font-family: var(--font-wordmark);
  display: inline-block;
  transform: skewX(-10deg);
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -0.01em;
  line-height: 1;
  /* text-transform yok, kaynakta ne yazıyorsa o. */
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: transparent;
  transition: text-decoration-color 200ms var(--ease);
}

/* "OpsStudio." — sondaki nokta ve i'nin noktası Ops Lime (kullanıcı
   talebi 2026-08-19). Fontun "i" noktası CSS ile ayrı renklendirilemez
   (tek glif), o yüzden harf noktasız "ı" (U+0131) ile yazılıp üstüne
   kendi çizdiğimiz lime bir nokta biniyor.

   Konum TAHMİN DEĞİL, ölçüm: fontun kendi metrikleri canvas
   measureText ile, taban çizgisinin kutu içindeki yeri de DOM'da
   sıfır-boyutlu bir prob elemanla okundu (90px'te):
     taban çizgisi  = kutu tepesinden 0.987em
     "ı" ink tepesi = taban çizgisinden 0.60em yukarıda → 0.387em
     ascender (d)   = taban çizgisinden 0.80em yukarıda → 0.187em
   Nokta 0.15em çapında, üst kenarı 0.18em'e oturuyor: harfin
   0.06em üstünde başlıyor ve tepesi tam ascender hizasında bitiyor.
   Önceki denemede top:-0.62em kutunun DIŞINA taşıyordu (nav'ın üstüne),
   o yüzden nokta hiç görünmüyordu.

   Not: inline-flex sütun denendi, ÇALIŞMIYOR — tek karakterlik metin
   flex-column içinde Chromium'da render olmuyor (glif kayboluyor,
   izole test edildi). */
.wm-i {
  position: relative;
  display: inline-block;
}
.wm-i::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.18em;
  width: 0.15em;
  height: 0.15em;
  border-radius: 50%;
  background: #B8FF3B;
  transform: translateX(-50%);
}
.wm-dot { color: #B8FF3B; }

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: opacity 200ms var(--ease);
}
/* İki sinyal birden, ikisi de sessiz: bütün blok soluklaşır (işaret +
   kelime tek hedef olduğunu söyler), kelimenin altına ince çizgi gelir
   (sitenin geri kalanındaki .link-underline ile aynı dil — yeni bir
   süs icat edilmedi). İkon rengi hover'da DEĞİŞMEZ: lime yalnız ana
   eylem/aktif durum/tek-kelime vurgusu için, kimlik işareti bunlardan
   biri değil. */
.nav-logo:hover { opacity: 0.66; }
.nav-logo:hover .wordmark { text-decoration-color: currentColor; }


/* ─── Butonlar ────────────────────────────────────────────────────────
   Köşeler kontrollü: yuvarlaktan çok keskine yakın. Hap yok. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  border: 0;
  border-radius: 5px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.008em;
  line-height: 1;
  cursor: pointer;
  transition: background-color 180ms var(--ease), transform 180ms var(--ease);
}
.btn-lime { background: var(--lime); color: var(--ink); }
.btn-lime:hover { background: var(--lime-hover); }
.btn-lime:active { transform: translateY(1px); }

.btn-lg { padding: 19px 32px; font-size: 17px; border-radius: 6px; }


/* ─── Navbar ──────────────────────────────────────────────────────────
   Sayfa en üstteyken tamamen şeffaf: zemin, kenar, gölge, blur ve hap
   kabı YOK. İlk gerçek scroll hareketinden itibaren opak #0B0B0C
   zemine geçer — bölüm sınırına değil, doğrudan scroll konumuna bağlı
   (bkz. script.js), en üste dönülünce şeffaflığa geri döner.

   Ürün deneyimi pinliyken bu davranışın ÜSTÜNE bir durum biniyor:
   navbar ortamın rengini alıyor (data-env). Siyah ortamda siyah + açık
   metin, kırık beyaz ortamda kırık beyaz + koyu metin. Geometri ve
   bağlantılar değişmiyor, yalnız yüzey. CTA bunun dışında — lime dolgu
   üstünde metni her zaman kendi --ink rengini taşır. Logodaki lime
   path'ler sabit #B8FF3B, nav'ın rengine hiç bağlı değil. */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  color: #f5f5f5;
  transition: background-color 300ms var(--ease), border-color 300ms var(--ease),
              color 300ms var(--ease);
}
.nav.is-solid {
  background: #0b0b0c;
  border-bottom-color: transparent;
}
/* Ürün sahnesi navbar'ı devraldığında geçiş 50ms gecikir: önce ortam
   ve dashboard kontrastı kurulsun, navbar onu takip etsin. Aynı olayın
   parçası, ayrı bir animasyon değil. */
.nav[data-env] {
  transition: background-color 290ms var(--ease) 50ms,
              color 290ms var(--ease) 50ms,
              border-color 290ms var(--ease) 50ms;
}
.nav[data-env="dark"] { background: var(--stage-dark); color: #f5f5f5; }
.nav[data-env="light"] { background: var(--stage-light); color: var(--ink); }

/* Orta kolondaki bağlantılar kaldırıldı (kullanıcı talebi 2026-08-14):
   sayfa artık tek hikaye anlatıp tek yerde bitiyor, navbar'da bölüm
   linkleri o hikayeden çıkış kapısı gibi duruyordu. İki kolon: logo
   kadar + kalan; CTA sağa yaslanıyor. */
.nav-inner {
  width: var(--page);
  margin-inline: auto;
  height: var(--nav-h);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.nav-cta { justify-self: end; }


/* ─── 1 · Hero ────────────────────────────────────────────────────────
   Tek büyük görsel sahne. Ürün ekranı yok. Süpergrafiğin kütlesi sağda,
   sol taraf boş bırakılmış — metin sol-alta oturuyor. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--canvas);
}

.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img,
.hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Kaynak kare incelenerek seçildi: kuaför + müşteri kompozisyonun
     merkez-sağında duruyor, sol taraf pencere ışığıyla boş — başlığın
     oturduğu yer. Dikey %28: başlar üstten ~%0-40 bandında, gövdeler
     aşağı devam ediyor; %50 (tam orta) baş hizasını fazla aşağı, ayakları
     fazla yukarı kırpıyordu. */
  object-position: 66% 28%;
}
.hero-media video { z-index: 1; }

/* Okunabilirlik koyulaştırması — yalnız iki işlevsel şerit:
     üstte navbar'ın şeffaf durduğu bant (logo/menü kırık beyaz metin),
     altta başlık + alt metnin oturduğu bant.
   Ortadaki büyük alan dokunulmadan kalıyor; video gri/siyah filtreyle
   boğulmuyor, yüzler karartılmıyor. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      rgba(10, 10, 10, 0.52) 0,
      rgba(10, 10, 10, 0.52) calc(var(--nav-h) - 8px),
      transparent calc(var(--nav-h) + 64px)
    ),
    linear-gradient(
      to top,
      rgba(8, 8, 8, 0.66) 0,
      rgba(8, 8, 8, 0.32) 26%,
      transparent 54%
    );
}

.hero-copy {
  position: relative;
  z-index: 2;
  width: var(--page);
  margin-inline: auto;
  padding-bottom: clamp(64px, 9vh, 116px);
  /* Zemin artık gerçek bir video — sayfanın genel koyu-ink metni burada
     okunmuyor. Başlık ve alt metin kırık beyaza dönüyor, arkalarındaki
     .hero-scrim bunu güvenceye alıyor. */
  color: #f5f5f5;
}

.hero-title {
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-weight: 700;
  /* wdth 125 satırı belirgin genişletti: 5.2vw'de ikinci satır
     süpergrafiğin sağdaki parçalarına dayanıyordu. 4.8vw'de kompozisyon
     yeniden nefes alıyor (ölçüldü: 1600px'te 1237px / 1457px). */
  font-size: clamp(2.2rem, 4.8vw, 5.5rem);
  line-height: 0.99;
  letter-spacing: -0.032em;
}



/* ─── Bölüm iskeleti ─────────────────────────────────────────────── */
.sec {
  padding-block: clamp(96px, 12vh, 172px);
  /* Navbar sabit: çapa bağlantısı bölümü onun altına sokmasın. Nav
     yüksekliğinin BİRAZ ALTINDA duruyor, bilerek: tam --nav-h olsaydı
     "Ürün" bağlantısı sayfayı nav'ın durum eşiğinin tam üstüne park
     ediyordu ve nav şeffaf kalıyordu. Bölümün kendi üst boşluğu 96px+,
     bu 12px hiçbir içeriği kırpmıyor. */
  scroll-margin-top: calc(var(--nav-h) - 12px);
}

.t-h2 {
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-weight: 600;
  font-size: clamp(2rem, 3.3vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
}
.t-h3 {
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-weight: 600;
  font-size: clamp(1.35rem, 1.62vw, 1.85rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
}
.t-body {
  margin-top: 12px;
  max-width: 46ch;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--graphite);
  text-wrap: pretty;
}


/* ════════════════════════════════════════════════════════════════════
   2 · BİRLEŞİK ÜRÜN DENEYİMİ (scrollytelling)

   Yapı:

     .exp            → giriş + sekiz sahne kadar yükseklik
       .exp-sticky   → viewport'a pinlenir (top:0, tam yükseklik)
         .exp-env     → ortam zemini (tema ile token üzerinden döner)
         .exp-stage   → navbar'ın altındaki gerçek içerik alanı
           .exp-composition → TEK giriş nesnesi
             .exp-masthead   → sekiz adım boyunca kalan ürün künyesi
             .exp-grid       → sol özellik sistemi + dashboard
               .exp-side  → adım listesi + aktif metin
               .pnl       → uygulama kabuğu

   Sticky top:0: ortam navbar şeridini de kaplamak zorunda, yoksa siyah
   sahnenin üstünde kırık beyaz bir bant kalıyor ve navbar ortamla aynı
   rengi alamıyor.

   GİRİŞ: hero'dan sonra ikinci bir hero YOK. Masthead, sol kolon ve
   dashboard tek kompozisyon olarak gelir; hiçbiri diğerinin üstünden
   geçmez, ölçeklenmez, kırpılmaz. Kompozisyonun tamamı 36px yukarı
   süzülür, o kadar.

   Panelin dış kabuğu sahneler arasında HİÇ değişmiyor; yalnız
   .pnl-body içindeki .pv ekranı ve soldaki .exp-pane değişiyor.
   ════════════════════════════════════════════════════════════════════ */

/* Hairline kaldırıldı: hero ile siyah ürün yüzeyi arasında gri/beyaz
   ara çizgi yok. Negatif margin ile "üst üste bindirme" denendi ama
   bu normal akışta KALICI bir bindirme üretiyordu — scrollY=0'da bile
   hero'nun altında 24px siyah görünüyordu (bkz. rapor notu). Kaldırıldı;
   iki bölüm artık düz sınır komşusu, hiçbir ek efekt yok. */

.exp {
  /* Sahne bandı (bir özellikten sonrakine geçmek için gereken scroll
     mesafesi) ARTIK viewport'un oranı DEĞİL, sabit bir piksel bütçesi:
     --band-h. Eskiden 0.9 viewport'tu (~800px) — bir fare tekerleği
     "tık"ı genelde 100–130px kaydırdığı için bu, bir özellik görmek
     için 5-6 ayrı scroll hareketi gerektiriyordu (kullanıcı: "5 scroll'da
     bir değil, 1 scroll'da bir" — 2026-08-14). 120px tek bir tekerlek
     tıkına ya da kısa bir trackpad hareketine denk düşüyor.

     script.js bunu KENDİSİ ölçüyor (measure(): band = travel / N),
     kod tarafında hiçbir sayı değişmedi — yalnız burada ürettiğimiz
     toplam yükseklik değişti. Formül:
       sceneStart − sectionTop = −0.18h + 0.24h = 0.06h   (giriş kuyruğu,
         script.js: TAKEOVER_LEAD / TAKEOVER_DISTANCE, DOKUNULMADI —
         bu bir kerelik yerleşme animasyonu, özellik geçişi değil)
       toplam = 1h (pinlenen sticky) + 0.06h (kuyruk) + 8 × band-h
     8.26 sabiti bu yüzden gitti: sahne kısmı artık h'e ORANLI değil. */
  --scene-h: 100svh;
  --band-h: 120px;
  position: relative;
  height: calc(var(--scene-h) * 1.06 + var(--band-h) * 8);
  scroll-margin-top: 0;
}

.exp-sticky {
  position: sticky;
  top: 0;
  height: var(--scene-h);
  overflow: hidden;
  isolation: isolate;

  /* ─── Sahne metin rolleri ────────────────────────────────────────
     Sahnenin zemini iki durum arasında gidip geliyor; masthead, adım
     listesi ve özellik metni onunla birlikte dönmek ZORUNDA — sayfanın
     genel mürekkep rengi siyah zeminde okunmuyor. Aynı data-env
     sinyali navbar'ı da sürüyor, ikisi asla ayrışmıyor.

     Roller ayrı: pasif adım başlıkları GERİ ÇEKİLİR (yönlendirme),
     aktif paragraf ÇEKİLMEZ (okunması beklenen açıklama). İkisine aynı
     soluk değeri vermek aktif iddiayı zayıflatıyordu. */
  --s-fg: #f5f5f5;                        /* masthead + aktif başlık */
  --s-step: rgba(245, 245, 245, 0.49);    /* pasif adım başlıkları */
  --s-body: #d7d7d2;                      /* aktif paragraf */
  --s-eyebrow: #a5a5a0;                   /* mono kategori etiketi */
  --s-num: rgba(245, 245, 245, 0.34);     /* adım numarası */
  --s-line: rgba(245, 245, 245, 0.16);

  /* Ortam zemini token üzerinden; geometri değişmiyor, yalnız renk. */
  --s-env: var(--stage-dark);
}
.exp-sticky[data-env="light"] {
  --s-fg: #111111;
  --s-step: rgba(17, 17, 17, 0.49);
  --s-body: #3c3c3a;
  --s-eyebrow: #666660;
  --s-num: var(--hairline-2);
  --s-line: var(--hairline);
  --s-env: var(--stage-light);
}

/* Connector rengi PANELİN teması (Açık/Koyu kontrolü) ile döner —
   ortamla (data-env) değil, çünkü ikisi ZATEN ters: panel koyuyken
   ortam açık oluyor. script.js applyTheme() ikisini birlikte yazıyor. */
.exp-sticky { --connector-color: var(--connector-dark); }
.exp-sticky[data-theme="light"] { --connector-color: var(--connector-light); }
.exp-sticky[data-theme="dark"] { --connector-color: var(--connector-dark); }

.exp-side { color: var(--s-fg); }
.exp-side .t-h3 { color: var(--s-fg); }
.exp-side .exp-eyebrow { color: var(--s-eyebrow); }
.exp-side :focus-visible { outline-color: var(--s-fg); }

/* Ortam. Tema değişiminde YALNIZ renk dönüyor — büyüyen daire, perde,
   maske ya da başka bir şekil yok. Görsel olay kontrastın kendisi. */
.exp-env {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--s-env);
  transition: background-color 290ms var(--ease);
}

.exp-stage {
  position: absolute;
  inset: var(--nav-h) 0 0;
  z-index: 4;
  display: flex;
  align-items: center;
}

/* ─── Tek giriş nesnesi ───────────────────────────────────────────
   Masthead ve ızgara AYNI kutunun içinde. Hiçbir çocuk kendi giriş
   yolunu izlemiyor: ölçek, opacity, kırpma, değişken genişlik ekseni
   ve katman geçişi yok. Kompozisyonun tamamı 36px yukarı süzülüyor —
   görünen tek hareket bu. */
.exp-composition {
  display: grid;
  row-gap: clamp(18px, 2.4vh, 28px);
  transform: translateY(calc((1 - var(--takeover, 1)) * 36px));
  will-change: transform;
}

/* ─── Ürün künyesi ────────────────────────────────────────────────
   İkinci bir hero DEĞİL, ikinci bir eyebrow da değil: sekiz adımın
   tamamı boyunca ekranda kalıp bütün deneyimi adlandırıyor. Dashboard
   yüksekliğini büyütmüyor, sayfa ızgarasına hizalı. */
.exp-masthead {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-weight: 600;
  font-size: clamp(28px, 2.2vw, 32px);
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: var(--s-fg);
  text-wrap: balance;
}

/* Kompakt kontrol (önceki · 01/08 · sonraki) yalnız ≤1100px'te vardır;
   masaüstünde sahne sırasını scroll yönetir. TABAN GİZLEME BURADA —
   eskiden yalnız ≤1100px bloğunda `display: flex` yazıyordu, tabanda
   gizleyen kural hiç yoktu. Sonuç: masaüstünde stilsiz iki ok ve
   "03 / 08" metni sahnenin sol altında görünüyordu (1440×900'de
   ölçüldü: display:block, 331×77px, top 819). Dosyanın kendi yorumu
   zaten "Masaüstünde display:none" diyordu; kural yazılmamıştı. */
.exp-mc { display: none; }

.exp-grid {
  /* Callout katmanının konumlanma bağlamı: overlay artık yalnız
     paneli değil, sol özellik alanı + boşluk + dashboard'un tamamını
     kapsıyor (bkz. .pnl-callout). */
  position: relative;
  display: grid;
  /* ~%26 metin / ~%72 panel + %2 oluk. 1280×720'de panel ≈ 827px.
     Tam 30/70 bu sayfa genişliğinde paneli ~795px'te tutuyordu —
     istenen +%15 genişlemeyi vermiyor (bkz. rapor notu). */
  grid-template-columns: minmax(0, 25fr) minmax(0, 72fr);
  gap: 2%;
  align-items: center;
}


/* ─── Sol: adım listesi ───────────────────────────────────────────
   Üst tab bar DEĞİL — sürekli görünen dikey indeks. Aktif adımı lime
   bir çubuk işaretliyor (aksanın izinli işi: aktif durum).
   Sekiz satır + metin 632px'lik alana sığmak zorunda: satır dolgusu
   ve punto ona göre. */
.exp-steps {
  list-style: none;
  margin: 0 0 clamp(20px, 2.6vh, 32px);
  padding: 0;
  border-top: 1px solid var(--s-line);
}
.exp-steps li { border-bottom: 1px solid var(--s-line); }

.exp-step {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: 7px 0 7px 14px;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
  /* Pasif adım başlığı yönlendirme bilgisi — geri çekiliyor. */
  color: var(--s-step);
  cursor: pointer;
  transition: color 200ms var(--ease);
}
.exp-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 0;
  background: var(--lime);
  transform: translateY(-50%);
  transition: height 260ms var(--ease);
}
.exp-step:hover { color: var(--s-fg); }
.exp-step.is-active { color: var(--s-fg); }
.exp-step.is-active .exp-step-l { font-weight: 600; }
.exp-step.is-active::before { height: 62%; }

.exp-step-n { font-size: 11px; letter-spacing: 0.08em; color: var(--s-num); flex: none; }
.exp-step.is-active .exp-step-n { color: var(--s-step); }


/* ─── Sol: aktif metin ────────────────────────────────────────────
   Paneller üst üste; yükseklik en uzun metne göre sabit, geçişte
   sayfa zıplamıyor. */
.exp-copy {
  position: relative;
  min-height: 16em;
}
.exp-pane {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.exp-pane.is-active { opacity: 1; transform: none; pointer-events: auto; }

.exp-eyebrow {
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--s-eyebrow);
}

/* Aktif açıklama paragrafı. Bu YÖNLENDİRME DEĞİL — okunması beklenen
   metin, o yüzden pasif başlıklarla aynı soluklukta olamaz. Yine de
   başlığın bir kademe altında kalıyor: ayrımı parlaklık, punto ve tip
   rolü kuruyor (gövde fontu, display değil), yapay bulanıklık ya da
   düşük opacity değil. */
.exp-side .t-body {
  margin-top: 14px;
  max-width: 34ch;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(18px, 1.45vw, 19px);
  line-height: 1.52;
  color: var(--s-body);
}


/* ════════════════════════════════════════════════════════════════
   Sağ: uygulama kabuğu ve anlamsal tema kanalı

   Tarayıcı chrome'u, sahte URL barı, macOS noktaları YOK.
   Gradient/glow/cam YOK. Tüm iç ölçüler tek bir font-size'a bağlı
   (cqi) — panel genişliği ne olursa olsun yoğunluk aynı.

   Bütün ekranlar TEK token kümesi üzerinden boyanıyor; açık ve koyu
   tema aynı DOM'un iki değeri. Ekranların ikinci bir kopyası yok.
   Lacivert rail/üst şerit kaldırıldı: açık tema gerçek açık tema.
   ════════════════════════════════════════════════════════════════ */
.pnl[data-theme="light"] {
  --p-shell: #f4f3ef;      /* rail + üst şerit: sıcak kırık beyaz */
  --p-surface: #ffffff;    /* çalışma yüzeyi */
  --p-surface-2: #f7f6f2;  /* ikincil yüzey (liste kolonu, şeritler) */
  --p-raised: #ffffff;
  --p-text: #14140f;
  --p-strong: #26261f;
  --p-text-2: #4e4e46;
  --p-muted: #7b7b70;
  --p-label: #85857a;
  --p-dim: #9a9a8e;
  --p-line: #e4e3db;
  --p-line-2: #ecebe3;
  --p-line-3: #edece4;
  --p-hover: #efeee7;
  --p-active: #eceae3;
  --p-ctrl: #dbdad2;
  --p-ctrl-h: #bdbcb2;
  --p-inv-bg: #14140f;
  --p-inv-fg: #f7f6f2;
  --p-out-bg: #26261f;
  --p-out-fg: #f7f6f2;
  --p-av-bg: #e9e8e0;
  --p-av-fg: #55554c;
  --p-dot: #9a9a8e;
  --p-bar: #cfcec4;        /* nötr oran çubuğu — yapı, aksan değil */
  --p-focus: #14140f;
  --p-edge: #e0dfd6;
}
.pnl[data-theme="dark"] {
  --p-shell: #0b0b0c;
  --p-surface: #111315;
  --p-surface-2: #0e1012;
  --p-raised: #16181b;
  --p-text: #f5f5f5;
  --p-strong: #e6e7e8;
  --p-text-2: #c3c6c9;
  --p-muted: #999da2;
  --p-label: #868b90;
  --p-dim: #7b8085;
  --p-line: #292b2e;
  --p-line-2: #212326;
  --p-line-3: #1f2124;
  --p-hover: #1a1c1f;
  --p-active: #1e2124;
  --p-ctrl: #35383c;
  --p-ctrl-h: #4a4d51;
  --p-inv-bg: #f0f0ef;
  --p-inv-fg: #111315;
  --p-out-bg: #2c3034;
  --p-out-fg: #f2f3f4;
  --p-av-bg: #24272b;
  --p-av-fg: #aeb4ba;
  --p-dot: #5a5f64;
  --p-bar: #3a3e42;
  --p-focus: var(--lime);
  --p-edge: #212427;
}

.pnl {
  container-type: inline-size;
  position: relative;
  display: grid;
  grid-template-columns: 11.5em minmax(0, 1fr);
  /* 1280×720'de 540px. Eski 120px payı 92'ye indi: panel ~%7 uzadı
     ve sahne yüksekliği artık navbar'ı da içeriyor. */
  height: min(640px, calc(var(--scene-h, 100svh) - var(--nav-h) - 92px));
  background: var(--p-shell);
  border: 1px solid var(--p-edge);
  border-radius: 10px;
  overflow: hidden;
  font-size: clamp(11px, 1.5cqi, 14px);
  color: var(--p-text);
  line-height: 1.45;
  /* Tek kontrollü gölge — ortamdan ayırıyor. Glow/cam yok. */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 26px 60px rgba(0, 0, 0, 0.28);
  /* Ortamla AYNI karede başlayıp aynı sürede bitiyor (290ms): görsel
     olay koordineli kontrast dönüşü, ayrı bir reveal değil. */
  transition: background-color 290ms var(--ease), border-color 290ms var(--ease),
              color 290ms var(--ease);
}

/* Rail: dekoratif değil — aktif ekranın uygulama içindeki yerini
   söylüyor VE gerçek kontrol. Yedi hedef + altta tema kontrolü.
   Aktif madde: ince lime çubuk + güçlü metin + hafif nötr yüzey.
   Büyük koyu navigasyon bloğu YOK. */
.pnl-rail {
  display: flex;
  flex-direction: column;
  gap: 1.3em;
  padding: 1.15em 0.9em;
  border-right: 1px solid var(--p-line);
  background: var(--p-shell);
}
/* .mark { color: inherit } currentColor oklarını rail'in metin rengine
   bağlıyor: açık temada yakın-siyah, koyu temada kırık beyaz. Lime
   path'ler sprite'ta sabit #B8FF3B. Koyu kap gerekmiyor. */
.pnl-glyph { padding-left: 0.55em; color: var(--p-text); }

.pnl-rail ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.12em; }
/* Gerçek buton: tarayıcı varsayılanları sıfırlanıyor (kenarlık, zemin,
   font, hizalama) — .exp-step'te kullanılan aynı desen. */
.pnl-rail-i {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.62em;
  width: 100%;
  padding: 0.48em 0.6em;
  border: 0;
  border-radius: 0.35em;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.92em;
  text-align: left;
  color: var(--p-muted);
  cursor: pointer;
  transition: color 260ms var(--ease), background-color 260ms var(--ease);
}
.pnl-rail-i svg { width: 1.1em; height: 1.1em; flex: none; }
.pnl-rail-i::before {
  content: "";
  position: absolute;
  left: -0.35em;
  top: 50%;
  width: 2px;
  height: 0;
  border-radius: 1px;
  background: var(--lime);
  transform: translateY(-50%);
  transition: height 240ms var(--ease);
}
.pnl-rail-i:hover { color: var(--p-text); background: var(--p-hover); }
.pnl-rail-i.is-active {
  color: var(--p-text);
  background: var(--p-active);
  font-weight: 600;
}
.pnl-rail-i.is-active::before { height: 58%; }

/* ─── Rail dibi: tema kontrolü ─────────────────────────────────────
   Uygulamanın kendi ayarı. Mobil tipi büyük anahtar değil, iki
   durumlu kompakt segment. Otomatik gösterimde de tam bu kontrol
   hareket ediyor — ayrı bir "demo düğmesi" yok. */
.pnl-theme {
  margin-top: auto;
  display: grid;
  gap: 0.4em;
  padding-top: 0.9em;
  border-top: 1px solid var(--p-line);
}
.pnl-theme-l {
  padding-left: 0.15em;
  font-family: var(--font-mono);
  font-size: 0.62em;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--p-label);
}
.pnl-theme-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--p-line);
  border-radius: 0.35em;
  background: var(--p-surface-2);
}
.pnl-theme-b {
  padding: 0.32em 0.2em;
  border: 0;
  border-radius: 0.25em;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.78em;
  font-weight: 500;
  line-height: 1.3;
  color: var(--p-muted);
  cursor: pointer;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.pnl-theme-b:hover { color: var(--p-text); }
.pnl-theme-b.is-on { background: var(--p-inv-bg); color: var(--p-inv-fg); }

.pnl-main { display: flex; flex-direction: column; min-width: 0; }

.pnl-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0.85em 1.15em;
  border-bottom: 1px solid var(--p-line);
  background: var(--p-shell);
  flex: none;
}
.pnl-screen { margin: 0; font-size: 1.05em; font-weight: 600; letter-spacing: -0.01em; }

.pnl-body { position: relative; flex: 1; min-height: 0; }

/* Ekranlar üst üste; kabuk sabit kalırken yalnız bunlar değişiyor. */
.pv {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
  font-size: 1.06em;
  color: var(--p-text);
  background: var(--p-surface-2);
}
.pv.is-active { opacity: 1; transform: none; pointer-events: auto; }

/* ─── Panel içi küçük geçişler ──────────────────────────────────
   Sahne değişimi (yukarıdaki .pv/.exp-pane) opacity+translateY,
   220–300ms. Panel İÇİNDEKİ küçük seçim/durum değişimleri (konuşma,
   müşteri, fırsat seçimi; taslak/randevu/başarı durumu açılması)
   bundan bilerek ayrı ve daha kısa: yalnız opacity, 160ms — iki
   hareket seviyesi birbirine karışmasın. Transform yok: bu öğeler
   normal akışta (position:absolute stack değil), giriş+çıkışın aynı
   anda üst üste binmesi satır kaymasına yol açardı — o yüzden
   yalnız GİRİŞ (yeni içerik belirirken) animasyonlu, çıkış (eski
   içerik display:none olurken) anlık. Tek yönlü animation kullanımı
   da bu yüzden: transition değil — transition, display:none↔flex
   arasında iki ucu aynı anda canlı tutmaya çalışır (üst üste biner),
   animation ise yalnız YENİ görünüre giren öğede bir kerelik oynar. */
@keyframes panel-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ─── Ortak küçük parçalar ────────────────────────────────────── */
.av {
  display: inline-grid;
  place-items: center;
  width: 2em;
  height: 2em;
  flex: none;
  border-radius: 50%;
  background: var(--p-av-bg);
  color: var(--p-av-fg);
  font-size: 0.74em;
  font-weight: 600;
}
.av-lg { width: 2.5em; height: 2.5em; font-size: 0.82em; }

.dot { width: 0.45em; height: 0.45em; flex: none; border-radius: 50%; background: var(--p-dot); display: inline-block; }
.dot-on { background: var(--lime); }

/* [hidden] display:flex/grid taşıyan kutularda etkisiz kalıyor —
   "randevu oluşturuldu" ve mesaj önizlemesi hiç tetiklenmeden
   görünüyordu. Panel içinde hidden her zaman kazanır. */
.pnl [hidden] { display: none !important; }
/* Tek odak halkası kuralı: açık temada mürekkep, koyu temada lime.
   Aksanın çizgi rolü açık yüzeyde okunmadığı için token üzerinden. */
.pnl :focus-visible { outline: 2px solid var(--p-focus); outline-offset: 2px; }

/* ─── Callout katmanı ─────────────────────────────────────────────
   Aktif feature satırını (.exp-step, sol kolon) onu kanıtlayan gerçek
   dashboard bölgesine bağlar. Kaynak gerçek: satırın sağ kenarından
   çıkar. Tooltip kartı, hotspot, glow, pulse, numara, etiket, tam
   çerçeve ve ekran karartma YOK — tek kesintisiz ortogonal çizgi +
   hedefte kısmi L parantez. Panel düzenini değiştirmez, tıklama
   almaz, odak halkalarını kırpmaz. */
.pnl-callout {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  /* Geometri .exp-grid sınırları içine kelepçeleniyor; taşma kesilir. */
  overflow: hidden;
  pointer-events: none;
}
.pnl-callout-line {
  fill: none;
  /* Tek renk kanalı, tema ile döner (bkz. .exp-sticky[data-theme]).
     Panel sınırında ikinci bir renge bölünmez. */
  stroke: var(--connector-color);
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

/* Giriş: çizgi kendi uzunluğu kadar dash ile çiziliyor, kaynaktan
   hedefe doğru tek seferde belirir. Bitince TAMAMEN durur — sürekli
   animasyon yok. .is-out eski çizginin kısa çıkışı. */
.pnl-callout[data-state="in"] .pnl-callout-line {
  animation: callout-draw 200ms var(--ease) both;
}
.pnl-callout[data-state="out"] { opacity: 0; transition: opacity 110ms var(--ease); }
.pnl-callout[data-state="off"] { opacity: 0; }

@keyframes callout-draw {
  from { stroke-dashoffset: var(--callout-len, 200); }
  to { stroke-dashoffset: 0; }
}

/* Ortak filtre çipi dili — Randevu koruma, Fırsatlar, Gelen Kutusu ve
   Gelir aynı kontrolü kullanıyor. Aktif durum bilinçli olarak
   akromatik: filtre yapıdır, yapı aksan rengine boyanmaz. */
.msg2-f,
.apt2-f,
.opp2-f,
.rev-f {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  padding: 0.5em 0.8em;
  border: 0;
  border-radius: 0.35em;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.82em;
  font-weight: 500;
  line-height: 1.2;
  color: var(--p-text-2);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 170ms var(--ease), color 170ms var(--ease);
}
.msg2-f:hover, .apt2-f:hover, .opp2-f:hover, .rev-f:hover { background: var(--p-hover); color: var(--p-text); }
.msg2-f.is-on, .apt2-f.is-on, .opp2-f.is-on, .rev-f.is-on { background: var(--p-inv-bg); color: var(--p-inv-fg); }
.msg2-f-n, .apt2-f-n, .opp2-f-n { font-size: 0.88em; opacity: 0.6; }

/* Ortak birincil eylem ve hayalet buton. */
.msg2-go,
.apt2-go,
.opp2-go,
.set-go {
  border: 1px solid var(--lime);
  border-radius: 0.35em;
  background: var(--lime);
  color: #111;
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 170ms var(--ease), border-color 170ms var(--ease);
}
.msg2-go:hover, .apt2-go:hover, .opp2-go:hover, .set-go:hover { background: var(--lime-hover); border-color: var(--lime-hover); }
.msg2-ghost,
.opp2-ghost,
.set-ghost {
  border: 1px solid var(--p-ctrl);
  border-radius: 0.35em;
  background: transparent;
  color: var(--p-text-2);
  font-family: var(--font-body);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 170ms var(--ease), background-color 170ms var(--ease);
}
.msg2-ghost:hover, .opp2-ghost:hover, .set-ghost:hover { border-color: var(--p-ctrl-h); background: var(--p-hover); }

/* ════════════════════════════════════════════════════════════════
   Sahne 1 + 2 · Gelen Kutusu ve konuşma içinde randevu

   İki ayrı ekran değil, TEK ekranın iki durumu. Kanal şeridi, liste,
   başlık ve konuşma ikisinde de aynı yerde ve aynı biçimde duruyor;
   değişen tek şey alt bölge: Sahne 1'de "Uygun saatleri göster"
   eylemi, Sahne 2'de aynı yerde açılan randevu alanı.

   Instagram ve WhatsApp ayrı rail maddesi değil — tek gelen kutusunun
   iki kanalı. Kanal kaynağı satırda tek sessiz etiketle görünüyor;
   renkli rozet tarlası yok.

   Lime yalnız üç işte: canlı asistan göstergesi (nokta), ana eylem
   ve randevu oluşturuldu durumu. Saat seçimi bilinçli olarak mürekkep
   — seçili saat ile lime ana eylem yan yana yarışmasın, hiyerarşi
   "önce seç, sonra oluştur" olarak okunsun.
   ════════════════════════════════════════════════════════════════ */
.msg2-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; }

/* Kanal filtresi tam genişlikte: üç etiket liste kolonuna
   sıkıştırılınca üç satıra kırılıyor (aynı gerekçe .opp2-bar'da). */
.msg2-bar {
  flex: none;
  display: flex;
  gap: 0.4em;
  padding: 0.65em 1em 0.55em;
  border-bottom: 1px solid var(--p-line);
  background: var(--p-surface-2);
}

.msg2 {
  flex: 1;
  display: grid;
  grid-template-columns: 13.5em minmax(0, 1fr);
  min-height: 0;
}

/* ─── Sol: konuşma listesi ─────────────────────────────────────
   Kart yok; satırlar hairline ile ayrılıyor, seçili satır çalışma
   yüzeyine dönüp soldan mürekkep çubukla işaretleniyor (Gelir
   fırsatları listesiyle aynı desen). */
.msg2-list {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid var(--p-line);
}
.msg2-r {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.7em;
  align-items: start;
  width: 100%;
  padding: 0.8em 0.9em;
  border: 0;
  border-bottom: 1px solid var(--p-line-2);
  background: transparent;
  font-family: var(--font-body);
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: background-color 160ms var(--ease);
}
.msg2-r::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--p-text);
  opacity: 0;
  transition: opacity 160ms var(--ease);
}
.msg2-r:hover { background: var(--p-hover); }
.msg2-r.is-on { background: var(--p-surface); }
.msg2-r.is-on::before { opacity: 1; }

.msg2-r-b { display: grid; gap: 0.15em; min-width: 0; }
.msg2-r-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5em; }
.msg2-r-top b { font-size: 0.95em; font-weight: 600; letter-spacing: -0.005em; }
.msg2-r-t { display: inline-flex; align-items: baseline; gap: 0.42em; font-size: 0.72em; color: var(--p-label); flex: none; }
/* Kanal kaynağı: renksiz, tek harf çifti. Rozet değil. */
.msg2-ch {
  font-style: normal;
  font-size: 0.92em;
  letter-spacing: 0.04em;
  color: var(--p-dim);
}
.msg2-r-p {
  font-size: 0.84em;
  color: var(--p-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Sağ: konuşma ─────────────────────────────────────────────
   min-height:0 zorunlu — grid hücresinin otomatik minimum yüksekliği
   içeriğe göre hesaplanıyor ve bu olmadan konuşma kutuyu panelin
   dışına itiyor (.pnl hiçbir zaman kendi içinde kaymamalı). */
.msg2-conv {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--p-surface);
}
.msg2-thr { display: none; flex: 1; min-height: 0; flex-direction: column; }
.msg2-thr.is-on { display: flex; animation: panel-fade-in 160ms var(--ease); }

.msg2-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.62em 1em;
  border-bottom: 1px solid var(--p-line-2);
}
.msg2-who { display: grid; gap: 0.1em; min-width: 0; }
.msg2-who b { font-size: 1.05em; font-weight: 600; letter-spacing: -0.01em; }
.msg2-who i { font-style: normal; font-size: 0.8em; color: var(--p-muted); }

.msg2-state {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0.4em 1em;
  border-bottom: 1px solid var(--p-line-2);
  background: var(--p-surface-2);
}
.msg2-live { display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.85em; color: var(--p-text-2); white-space: nowrap; }

.msg2-ghost { padding: 0.45em 0.8em; font-size: 0.82em; }

/* Balonlar alta yaslanıyor: gerçek bir sohbet gibi en yeni mesaj
   altta, taşan eski mesajlar yukarıdan çıkıyor. */
.msg2-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0.55em 1em;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.38em;
}

/* Gelen ve giden ayrımı iki kanaldan birden: hizalama VE yüzey.
   Müşteri = açık yüzey + hairline, salon = dolu mürekkep. Koyu temada
   ilişki korunuyor, roller ters çevrilmiyor: giden hâlâ dolu. */
.b { max-width: 84%; }
.b p {
  margin: 0;
  padding: 0.5em 0.8em;
  border-radius: 0.6em;
  font-size: 0.95em;
  line-height: 1.45;
}
.b time { display: block; margin-top: 0.1em; font-size: 0.7em; line-height: 1.15; color: var(--p-dim); }
.b-in { align-self: flex-start; }
.b-in p { background: var(--p-raised); border: 1px solid var(--p-line); color: var(--p-strong); border-top-left-radius: 0.2em; }
.b-out { align-self: flex-end; text-align: right; }
.b-out p { background: var(--p-out-bg); color: var(--p-out-fg); border-top-right-radius: 0.2em; text-align: left; }
/* Randevu onay balonu: hidden kalkıp konuşmaya eklendiği an kısa bir
   opacity geçişiyle beliriyor — birden "patlamıyor". */
[data-bk-confirm]:not([hidden]) { animation: panel-fade-in 160ms var(--ease); }

.msg2-sys {
  margin: 0.05em 0 0;
  text-align: center;
  font-size: 0.78em;
  color: var(--p-label);
}

/* ─── Alt eylem (Sahne 1) ──────────────────────────────────────
   Konuşma seçiminden bağımsız, her zaman görünür. */
.msg2-act {
  flex: none;
  padding: 0.65em 1em;
  border-top: 1px solid var(--p-line);
  background: var(--p-surface-2);
}
.msg2-go { padding: 0.65em 1.05em; font-size: 0.88em; }
/* Saat seçilmeden ana eylem pasif: dolgu düşüyor, yalnız seçim
   yapılınca lime'a dönüp belirginleşiyor. */
.msg2-go:disabled {
  background: transparent;
  border-color: var(--p-ctrl);
  color: var(--p-dim);
  cursor: default;
}

/* ─── Randevu alanı (Sahne 2) ──────────────────────────────────
   Sahne 1'deki eylem çubuğunun tam yerinde açılıyor: aynı konuşma,
   aynı başlık, aynı liste — yalnız alt bölge değişiyor. */
.msg2-bk {
  flex: none;
  padding: 0.8em 1em;
  border-top: 1px solid var(--p-line);
  background: var(--p-surface-2);
  display: grid;
  gap: 0.6em;
}
.msg2-bk-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8em; }
.msg2-bk-t { font-size: 0.9em; font-weight: 600; }
.msg2-bk-m { font-size: 0.72em; color: var(--p-muted); }

.msg2-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4em; }
.msg2-slot {
  padding: 0.55em 0.3em;
  border: 1px solid var(--p-ctrl);
  border-radius: 0.35em;
  background: var(--p-raised);
  color: var(--p-strong);
  font-family: var(--font-mono);
  font-size: 0.74em;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 170ms var(--ease), background-color 170ms var(--ease);
}
.msg2-slot:hover { border-color: var(--p-ctrl-h); }
.msg2-slot.is-sel { border-color: var(--p-text); background: var(--p-surface); box-shadow: inset 0 0 0 1px var(--p-text); }
.msg2-slot:disabled { color: var(--p-dim); background: transparent; cursor: default; }
.msg2-slot:disabled:hover { border-color: var(--p-ctrl); }

.msg2-bk-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.8em; }
.msg2-bk-hint { font-size: 0.8em; color: var(--p-muted); }
.msg2-bk-done { display: flex; align-items: center; justify-content: space-between; gap: 0.8em; }
.msg2-bk-done-m { font-size: 0.76em; color: var(--p-muted); }
/* Randevu oluşturuldu durumu: kısa opacity geçişiyle güncellenir. */
[data-bk-done]:not([hidden]) { animation: panel-fade-in 160ms var(--ease); }

/* ════════════════════════════════════════════════════════════════
   Sahne 3 · Müşteri hafızası

   Sağ taraf tek bir müşteri dosyası: kutulara bölünmüş bir pano
   değil, yukarıdan aşağı okunan sürekli bir kayıt. Bölümleri kart
   değil, mono etiketler ve hairline'lar ayırıyor.
   ════════════════════════════════════════════════════════════════ */
.cst2 {
  display: grid;
  grid-template-columns: 13.5em minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

/* ─── Sol: müşteri listesi ─────────────────────────────────────── */
.cst2-list {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid var(--p-line);
}
.cst2-r {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.7em;
  align-items: center;
  width: 100%;
  padding: 0.8em 0.9em;
  border: 0;
  border-bottom: 1px solid var(--p-line-2);
  background: transparent;
  font-family: var(--font-body);
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: background-color 160ms var(--ease);
}
.cst2-r::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--p-text);
  opacity: 0;
  transition: opacity 160ms var(--ease);
}
.cst2-r:hover { background: var(--p-hover); }
.cst2-r.is-on { background: var(--p-surface); }
.cst2-r.is-on::before { opacity: 1; }

.cst2-r-b { display: grid; gap: 0.15em; min-width: 0; }
.cst2-r-n { font-size: 0.95em; font-weight: 600; letter-spacing: -0.005em; }
.cst2-r-m {
  font-size: 0.83em;
  color: var(--p-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Sağ: müşteri dosyası ─────────────────────────────────────── */
.cst2-file {
  position: relative;
  min-height: 0;
  min-width: 0;
  background: var(--p-surface);
}
.cst2-d {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  min-height: 0;
}
.cst2-d.is-on { display: flex; animation: panel-fade-in 160ms var(--ease); }

.cst2-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.75em 1.05em;
  border-bottom: 1px solid var(--p-line-2);
}
.cst2-who { display: grid; gap: 0.1em; min-width: 0; flex: 1; }
.cst2-who b { font-size: 1.12em; font-weight: 600; letter-spacing: -0.012em; }
.cst2-who i { font-style: normal; font-size: 0.78em; color: var(--p-muted); }
/* Durum kimlik satırının ALTINDA, yanında değil: ikisi aynı satırda
   yarışınca uzun durum etiketi telefon+ziyaret satırını iki parçaya
   kırıyordu (ölçüldü: satır 250px istiyor, 170px kalıyordu). */
.cst2-state {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  justify-self: start;
  margin-top: 0.28em;
  font-size: 0.8em;
  color: var(--p-text-2);
  white-space: nowrap;
}

.cst2-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0.9em 1.05em;
}

/* Kayıttaki veriden türetilen tek cümle — dosyanın ne işe yaradığını
   ürünün kendisi söylüyor, pazarlama metni değil. */
.cst2-sum {
  margin: 0;
  font-size: 0.94em;
  line-height: 1.5;
  color: var(--p-strong);
  text-wrap: pretty;
}

/* Künye: etiket solda, değer sağda, aralarında hairline — kutulanmış
   kart değil, ruled bir dosya satırı. */
.cst2-facts { margin: 0.95em 0 0; display: grid; }
.cst2-facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  padding: 0.42em 0;
  border-bottom: 1px solid var(--p-line-3);
}
.cst2-facts > div:first-child { padding-top: 0; }
.cst2-facts dt { font-size: 0.82em; color: var(--p-muted); white-space: nowrap; }
.cst2-facts dd { margin: 0; font-size: 0.86em; color: var(--p-strong); text-align: right; }

.cst2-l,
.opp2-l {
  margin: 0.92em 0 0.4em;
  font-family: var(--font-mono);
  font-size: 0.66em;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--p-label);
}

.cst2-tl { list-style: none; margin: 0; padding: 0; display: grid; }
.cst2-tl li {
  display: grid;
  grid-template-columns: 4.6em minmax(0, 1fr) auto;
  gap: 0.7em;
  align-items: baseline;
  font-size: 0.85em;
  padding: 0.36em 0;
  border-bottom: 1px solid var(--p-line-3);
}
.cst2-tl li:first-child { padding-top: 0; }
.cst2-tl li:last-child { border-bottom: 0; }
.cst2-tl .mono { font-size: 0.92em; color: var(--p-muted); }
.cst2-tl em { font-style: normal; font-size: 0.92em; color: var(--p-muted); }

.cst2-note { margin: 0; font-size: 0.86em; line-height: 1.5; color: var(--p-text-2); text-wrap: pretty; }

/* ════════════════════════════════════════════════════════════════
   Sahne 4 · Randevu koruma

   Tablo değil, sade satır listesi. Kutu/kart yok; gün ayrımı hairline
   ve mono başlıkla. Varsayılan filtre yalnız yanıt bekleyen ikisini
   gösteriyor.

   Lime yalnız iki işte: gerçekten onaylanmış randevunun noktası ve
   ana eylem (Hatırlat).
   ════════════════════════════════════════════════════════════════ */
.pv-apt { background: var(--p-surface); }

.apt2 { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.apt2-bar {
  flex: none;
  display: flex;
  gap: 0.4em;
  padding: 0.65em 1em 0.55em;
}

/* Tek cümlelik operasyon özeti. Yüzde/gelir/performans yok — yalnız
   sayılabilir iki olgu. */
.apt2-sum {
  flex: none;
  margin: 0;
  padding: 0 1em 0.7em;
  font-size: 0.88em;
  line-height: 1.5;
  color: var(--p-text-2);
  border-bottom: 1px solid var(--p-line);
}
.apt2-sum b { font-weight: 600; color: var(--p-text); }

.apt2-rows { flex: 1; min-height: 0; overflow: hidden; }

.apt2-day {
  margin: 0;
  padding: 0.5em 1em 0.28em;
  font-family: var(--font-mono);
  font-size: 0.66em;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--p-label);
}

/* Satır: saat · müşteri/hizmet-çalışan · durum · eylem. */
.apt2-r {
  display: grid;
  grid-template-columns: 3.6em minmax(0, 1fr) auto auto;
  column-gap: 0.9em;
  align-items: center;
  padding: 0.45em 1em;
  border-bottom: 1px solid var(--p-line-2);
}
.apt2-t { font-size: 0.88em; color: var(--p-text-2); }

.apt2-b { display: grid; gap: 0.06em; min-width: 0; }
.apt2-n { font-size: 0.95em; font-weight: 600; letter-spacing: -0.005em; }
.apt2-s { font-size: 0.83em; color: var(--p-muted); }
/* Gelmedi geçmişi: kırmızı uyarı kutusu değil, satırın altında sakin
   bir olgu. Salon sahibi bunu görüp kendi kararını veriyor. */
.apt2-note { margin-top: 0.15em; font-size: 0.79em; color: var(--p-label); }

.apt2-st {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.84em;
  color: var(--p-text-2);
  white-space: nowrap;
}
.apt2-dim { color: var(--p-dim); font-size: 0.92em; }
/* Hatırlat sonrası durum metni değişirken kısa opacity geçişi. */
.apt2-st.is-updated { animation: panel-fade-in 160ms var(--ease); }

.apt2-a { display: flex; justify-content: flex-end; min-width: 0; }
.apt2-go { padding: 0.5em 0.85em; font-size: 0.82em; }

.apt2-empty { margin: 0; padding: 1.15em 1em; font-size: 0.88em; color: var(--p-muted); }


/* ════════════════════════════════════════════════════════════════
   Sahne 5 · Gelir fırsatları

   Tek ekran, iki filtre, bir çalışma alanı.

   Lime yalnız üç işte: fırsat işareti (nokta), ana eylem (Mesajı
   hazırla / Gönder), gönderildi durumu.
   ════════════════════════════════════════════════════════════════ */
.opp2 { display: flex; flex-direction: column; height: 100%; min-height: 0; }

/* Filtreler tam genişlikte: iki etiket de uzun, liste kolonuna
   sıkıştırılınca üç satıra kırılıyordu. */
.opp2-bar {
  flex: none;
  display: flex;
  gap: 0.4em;
  padding: 0.9em 1em;
  border-bottom: 1px solid var(--p-line);
}
.opp2-f { padding: 0.55em 0.85em; }

.opp2-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
}

/* ─── Sol: fırsat listesi ────────────────────────────────────── */
.opp2-list {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid var(--p-line);
}
.opp2-r {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.75em;
  align-items: start;
  width: 100%;
  padding: 0.85em 1em;
  border: 0;
  border-bottom: 1px solid var(--p-line-2);
  background: transparent;
  font-family: var(--font-body);
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: background-color 160ms var(--ease);
}
.opp2-r::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--p-text);
  opacity: 0;
  transition: opacity 160ms var(--ease);
}
.opp2-r:hover { background: var(--p-hover); }
.opp2-r.is-on { background: var(--p-surface); }
.opp2-r.is-on::before { opacity: 1; }

.opp2-r-b { display: grid; gap: 0.2em; min-width: 0; }
.opp2-r-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.7em; }
.opp2-r-top b { font-size: 1em; font-weight: 600; letter-spacing: -0.005em; }
.opp2-r-svc { font-size: 0.86em; color: var(--p-text-2); }
.opp2-r-meta { font-size: 0.82em; color: var(--p-muted); }
.opp2-s {
  display: inline-flex;
  align-items: center;
  gap: 0.42em;
  flex: none;
  font-size: 0.8em;
  color: var(--p-text-2);
  white-space: nowrap;
}

/* ─── Sağ: seçilen müşteri çalışma alanı ─────────────────────── */
.opp2-work {
  position: relative;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--p-surface);
}
.opp2-d {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 1.05em 1.05em 0;
  display: none;
}
.opp2-d.is-on { display: block; animation: panel-fade-in 160ms var(--ease); }

/* Taslak açıkken ziyaret geçmişi geri çekilir. Ölçüldü: kolon 287px
   genişlikte ve taslak alanı ~200px yer istiyor; hepsi aynı anda
   sığmıyordu. Ritim, tercih ve gerekçe cümlesi ekranda kalır. */
.opp2-work.is-composing .opp2-l,
.opp2-work.is-composing .opp2-tl { display: none; }

.opp2-d-head { display: flex; align-items: center; gap: 0.7em; }
.opp2-d-who { display: grid; gap: 0.1em; min-width: 0; }
.opp2-d-who b { font-size: 1.12em; font-weight: 600; letter-spacing: -0.012em; }
.opp2-d-who i { font-style: normal; font-size: 0.84em; color: var(--p-muted); }

/* Ekranın tek cümlesi — neden bu kişi burada. */
.opp2-why {
  margin: 0.85em 0 0;
  font-size: 0.94em;
  line-height: 1.5;
  color: var(--p-strong);
  text-wrap: pretty;
}

.opp2-tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.42em; }
.opp2-tl li {
  display: grid;
  grid-template-columns: 4.6em minmax(0, 1fr) auto;
  gap: 0.7em;
  align-items: baseline;
  font-size: 0.85em;
  padding-bottom: 0.42em;
  border-bottom: 1px solid var(--p-line-3);
}
.opp2-tl li:last-child { border-bottom: 0; padding-bottom: 0; }
.opp2-tl .mono { font-size: 0.92em; color: var(--p-muted); }
.opp2-tl em { font-style: normal; font-size: 0.92em; color: var(--p-muted); }

.opp2-facts { margin: 0.95em 0 0; display: grid; gap: 0.45em; }
.opp2-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; }
.opp2-facts dt { font-size: 0.82em; color: var(--p-muted); }
.opp2-facts dd { margin: 0; font-size: 0.86em; color: var(--p-strong); }

/* ─── Eylem alanı ────────────────────────────────────────────── */
.opp2-act {
  flex: none;
  padding: 0.9em 1.05em 1.05em;
  border-top: 1px solid var(--p-line);
  display: grid;
  gap: 0.55em;
}
.opp2-go { justify-self: start; padding: 0.72em 1.1em; font-size: 0.9em; }
.opp2-ghost { padding: 0.72em 0.9em; font-size: 0.9em; }

/* Taslak açılırken kısa opacity geçişi. */
.opp2-draft:not([hidden]) { animation: panel-fade-in 160ms var(--ease); }
.opp2-draft { display: grid; gap: 0.5em; }
.opp2-draft-l { font-size: 0.78em; color: var(--p-muted); }
.opp2-ta {
  width: 100%;
  padding: 0.7em 0.8em;
  border: 1px solid var(--p-ctrl);
  border-radius: 0.35em;
  background: var(--p-raised);
  color: var(--p-strong);
  font-family: var(--font-body);
  font-size: 0.86em;
  line-height: 1.5;
  /* Elle boyutlandırma kapalı: panel kendi içinde kaymamalı. */
  resize: none;
}
/* Odaklanmada ayrı border-color YOK: tek odak halkası zaten var. */
.opp2-draft-a { display: flex; gap: 0.5em; }
.opp2-draft-a .opp2-go { justify-self: auto; }
.opp2-sent { margin: 0; display: flex; align-items: center; gap: 0.5em; font-size: 0.86em; color: var(--p-strong); }
.opp2-sent:not([hidden]) { animation: panel-fade-in 160ms var(--ease); }


/* ════════════════════════════════════════════════════════════════
   Sahne 6 · Gelir

   Bir birincil toplam, bir kaynak dağılımı, bir liste. KPI kutusu
   ızgarası ve dekoratif grafik yok. Oran çubukları nötr: yapı aksan
   rengine boyanmaz. Her sayı script.js'teki kayıtlardan geliyor.
   ════════════════════════════════════════════════════════════════ */
.rev { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.rev-bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0.65em 1em 0.55em;
  border-bottom: 1px solid var(--p-line);
}
.rev-periods { display: flex; gap: 0.4em; }
.rev-range { font-size: 0.74em; color: var(--p-muted); white-space: nowrap; }

.rev-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
}

.rev-side {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0.9em 1.05em;
  border-right: 1px solid var(--p-line);
}
.rev-k-l { margin: 0; font-size: 0.8em; color: var(--p-muted); }
/* Ekranın tek büyük sayısı. */
.rev-k {
  margin: 0.1em 0 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.85em;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--p-text);
}
.rev-k-m { margin: 0.15em 0 0; font-size: 0.8em; color: var(--p-muted); }

.rev-l {
  margin: 1.05em 0 0.5em;
  font-family: var(--font-mono);
  font-size: 0.66em;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--p-label);
}

.rev-src { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55em; }
.rev-src li { display: grid; gap: 0.28em; }
.rev-src-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8em; }
.rev-src-n { font-size: 0.85em; color: var(--p-text-2); }
.rev-src-v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.82em; color: var(--p-text); }
/* Oran çubuğu: nötr, hairline kalınlığında. Grafik değil, satırın
   payını okutan tek çizgi. */
.rev-src-bar { height: 3px; border-radius: 2px; background: var(--p-line-2); overflow: hidden; }
.rev-src-bar i { display: block; height: 100%; background: var(--p-bar); }

/* Gerçekleşmeyen tutar gelire SAYILMIYOR: ayrı satır, sakin ton. */
.rev-lost {
  margin: 1.05em 0 0;
  padding-top: 0.75em;
  border-top: 1px solid var(--p-line);
  font-size: 0.82em;
  line-height: 1.5;
  color: var(--p-muted);
}
.rev-lost b { font-weight: 600; color: var(--p-text-2); }

.rev-work {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0.9em 1.05em;
  background: var(--p-surface);
}
.rev-work .rev-l { margin-top: 0; }

.rev-rows { list-style: none; margin: 0; padding: 0; display: grid; min-height: 0; }
.rev-rows li {
  display: grid;
  gap: 0.1em;
  padding: 0.42em 0;
  border-bottom: 1px solid var(--p-line-3);
}
.rev-rows li:first-child { padding-top: 0; }
.rev-r-t { font-size: 0.87em; font-weight: 600; letter-spacing: -0.005em; }
.rev-r-m {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  font-size: 0.79em;
  color: var(--p-muted);
}
.rev-r-v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--p-text-2); }
.rev-more { margin: 0.6em 0 0; font-size: 0.78em; color: var(--p-label); }


/* ════════════════════════════════════════════════════════════════
   Sahne 7 · Analizler

   Gelir tutarlarını tekrar ETMİYOR. Sorusu davranış: kim geri
   geliyor, hangi ritimle, nerede kopuyor. Bir birincil dağılım, bir
   kompakt eğilim, bir kısa sıralı liste. Jenerik KPI ızgarası yok.
   ════════════════════════════════════════════════════════════════ */
.anl { display: flex; flex-direction: column; height: 100%; min-height: 0; }

/* Tek sıra operasyon özeti — dört kutu değil, dört alan bir şerit. */
.anl-strip {
  flex: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--p-line);
}
.anl-s { padding: 0.7em 1em; border-left: 1px solid var(--p-line-2); }
.anl-s:first-child { border-left: 0; }
.anl-s-v {
  display: block;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.15em;
  font-weight: 500;
  line-height: 1.2;
  color: var(--p-text);
}
.anl-s-l { display: block; margin-top: 0.15em; font-size: 0.76em; line-height: 1.35; color: var(--p-muted); }

.anl-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
}
.anl-col {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0.55em 1.05em 0.9em;
}
.anl-col + .anl-col { border-left: 1px solid var(--p-line); background: var(--p-surface); }

.anl-l {
  margin: 0.95em 0 0.5em;
  font-family: var(--font-mono);
  font-size: 0.66em;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--p-label);
}
.anl-col > .anl-l:first-child { margin-top: 0.5em; }

/* Birincil dağılım: tek yatay çubuk. Pasta yok, üç ayrı kart yok. */
.anl-dist {
  display: flex;
  height: 0.7em;
  border-radius: 0.35em;
  overflow: hidden;
  background: var(--p-line-2);
}
/* Üç kategori de akromatik: bu bir dağılım, yani YAPI — aksan rengine
   boyanmaz. Ayrım nötr rampanın üç basamağıyla yapılıyor, kategoriyi
   asıl söyleyen zaten altındaki etiket ve sayı. */
.anl-dist i { display: block; height: 100%; }
.anl-dist i:nth-child(1) { background: var(--p-text); }
.anl-dist i:nth-child(2) { background: var(--p-muted); }
.anl-dist i:nth-child(3) { background: var(--p-bar); }

.anl-legend { list-style: none; margin: 0.55em 0 0; padding: 0; display: grid; gap: 0.3em; }
.anl-legend li {
  display: grid;
  grid-template-columns: 0.55em minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55em;
  font-size: 0.83em;
}
.anl-legend i { width: 0.55em; height: 0.55em; border-radius: 2px; }
.anl-legend li:nth-child(1) i { background: var(--p-text); }
.anl-legend li:nth-child(2) i { background: var(--p-muted); }
.anl-legend li:nth-child(3) i { background: var(--p-bar); }
.anl-legend span { color: var(--p-text-2); }
.anl-legend em {
  font-style: normal;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.92em;
  color: var(--p-text);
}

.anl-k { margin: 0; display: flex; align-items: baseline; gap: 0.5em; }
.anl-k b {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.35em;
  font-weight: 500;
  /* Monospace virgül tam bir em yer kaplıyor ve "5 , 4" gibi
     okunuyordu; sayıyı bir arada tutmak için sıkılaştırıldı. */
  letter-spacing: -0.06em;
  color: var(--p-text);
}
.anl-k span { font-size: 0.82em; color: var(--p-muted); }

/* Kompakt eğilim: altı ay, tek satır. Eksen ve ızgara yok — her
   çubuğun kendi değeri üstünde yazılı, o yüzden kesilmiş eksen
   yanılgısı da yok. Çubuk yüksekliği sıfırdan orantılı. */
.anl-trend {
  list-style: none;
  margin: 0.6em 0 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: end;
  gap: 0.35em;
}
.anl-trend li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.2em;
}
.anl-trend em {
  font-style: normal;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.62em;
  color: var(--p-muted);
}
.anl-trend i {
  width: 62%;
  max-width: 1.5em;
  border-radius: 2px 2px 0 0;
  background: var(--p-bar);
}
/* Son ay hesaplanan güncel ortalama — mürekkeple ayrılıyor. */
.anl-trend li:last-child i { background: var(--p-text); }
.anl-trend li:last-child em { color: var(--p-text); }
.anl-trend span { font-family: var(--font-mono); font-size: 0.62em; color: var(--p-label); }

.anl-rank { list-style: none; margin: 0; padding: 0; display: grid; }
.anl-rank li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.7em;
  padding: 0.34em 0;
  border-bottom: 1px solid var(--p-line-3);
  font-size: 0.84em;
}
.anl-rank li:last-child { border-bottom: 0; }
.anl-rank b { font-weight: 600; letter-spacing: -0.005em; }
.anl-rank em { font-style: normal; font-size: 0.94em; color: var(--p-muted); white-space: nowrap; }
.anl-rank em.is-broken { color: var(--p-text-2); }


/* ════════════════════════════════════════════════════════════════
   Sahne 8 · Ayarlar · Personel

   Ayarlar'ın kendi menüsü görünüyor ama yalnız Personel açık —
   diğer başlıklar bitmiş ekran taklidi yapmıyor, o yüzden buton
   değil, etiket. Personel ekle gerçek: form açılır, kaydedince kişi
   listeye eklenir, vazgeçince hiçbir şey değişmez.
   ════════════════════════════════════════════════════════════════ */
.set { display: grid; grid-template-columns: 11em minmax(0, 1fr); height: 100%; min-height: 0; }

.set-nav {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  padding: 0.85em 0.7em;
  border-right: 1px solid var(--p-line);
  min-height: 0;
  overflow: hidden;
}
.set-n {
  padding: 0.4em 0.55em;
  border-radius: 0.3em;
  font-size: 0.83em;
  line-height: 1.3;
  color: var(--p-muted);
}
.set-n.is-on { background: var(--p-active); color: var(--p-text); font-weight: 600; }
.set-note {
  margin-top: auto;
  padding: 0.55em 0.55em 0;
  border-top: 1px solid var(--p-line-2);
  font-size: 0.62em;
  line-height: 1.45;
  color: var(--p-label);
}

.set-work {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--p-surface);
}
.set-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0.7em 1.05em;
  border-bottom: 1px solid var(--p-line);
}
.set-t { margin: 0; font-size: 0.98em; font-weight: 600; letter-spacing: -0.01em; }
.set-go { padding: 0.5em 0.85em; font-size: 0.82em; }
.set-ghost { padding: 0.5em 0.85em; font-size: 0.82em; }

.set-panes { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
/* Form açıkken liste + kimlik yerinde kalıyor, yalnız sağdaki
   detay yerini forma bırakıyor: eklenen kişinin nereye gideceği
   görünür kalsın. */
.set-panes:has(.set-form:not([hidden])) .set-detail { display: none; }

.set-list { min-width: 0; min-height: 0; overflow: hidden; border-right: 1px solid var(--p-line); }
.set-r {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.7em;
  align-items: center;
  width: 100%;
  padding: 0.62em 0.9em;
  border: 0;
  border-bottom: 1px solid var(--p-line-2);
  background: transparent;
  font-family: var(--font-body);
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: background-color 160ms var(--ease);
}
.set-r::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--p-text);
  opacity: 0;
  transition: opacity 160ms var(--ease);
}
.set-r:hover { background: var(--p-hover); }
.set-r.is-on { background: var(--p-surface); }
.set-r.is-on::before { opacity: 1; }
.set-r-b { display: grid; gap: 0.1em; min-width: 0; }
.set-r-n { font-size: 0.92em; font-weight: 600; letter-spacing: -0.005em; }
.set-r-m {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.79em;
  color: var(--p-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.set-r-new { animation: panel-fade-in 160ms var(--ease); }

.set-detail { min-width: 0; min-height: 0; overflow: hidden; padding: 0.85em 1.05em; }
.set-d-head { display: flex; align-items: center; gap: 0.7em; }
.set-d-who { display: grid; gap: 0.1em; min-width: 0; }
.set-d-who b { font-size: 1.05em; font-weight: 600; letter-spacing: -0.012em; }
.set-d-who i { font-style: normal; font-size: 0.8em; color: var(--p-muted); }
.set-facts { margin: 0.85em 0 0; display: grid; }
.set-facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  padding: 0.4em 0;
  border-bottom: 1px solid var(--p-line-3);
}
.set-facts dt { font-size: 0.8em; color: var(--p-muted); white-space: nowrap; }
.set-facts dd { margin: 0; font-size: 0.83em; color: var(--p-strong); text-align: right; }

/* ─── Personel ekleme formu ──────────────────────────────────── */
.set-form {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: grid;
  align-content: start;
  gap: 0.55em;
  padding: 0.8em 1.05em;
  animation: panel-fade-in 160ms var(--ease);
}
.set-f-row { display: grid; gap: 0.28em; min-width: 0; justify-items: start; }
/* Saatler ve Durum yan yana DEĞİL: ölçüldü — form kolonu 268px ve ikisi
   birlikte 238px istiyor, "Pasif" panelin dışına 11px taşıyordu. Panel
   hiçbir durumda içeriğini kırpmamalı, o yüzden alt alta. */
.set-f-grid { display: grid; gap: 0.55em; min-width: 0; }
.set-f-l { font-size: 0.76em; color: var(--p-muted); }

.set-in {
  width: 100%;
  max-width: 100%;
  padding: 0.45em 0.6em;
  border: 1px solid var(--p-ctrl);
  border-radius: 0.35em;
  background: var(--p-raised);
  color: var(--p-strong);
  font-family: var(--font-body);
  font-size: 0.84em;
  line-height: 1.4;
}
.set-in::placeholder { color: var(--p-dim); }
.set-in-t { width: 4.2em; padding-inline: 0.5em; text-align: center; }
.set-hours { display: inline-flex; align-items: center; gap: 0.4em; }
.set-hours i { font-style: normal; font-size: 0.84em; color: var(--p-muted); }

/* Çip: gerçek checkbox, görsel olarak etiket. Kutu görünür kalıyor
   ama işaretlenince yüzey mürekkebe dönüyor — durum tek bakışta. */
.set-chips { display: flex; flex-wrap: wrap; gap: 0.3em; }
.set-chip { display: inline-flex; }
.set-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.set-chip span {
  display: inline-block;
  padding: 0.32em 0.6em;
  border: 1px solid var(--p-ctrl);
  border-radius: 0.35em;
  font-size: 0.78em;
  line-height: 1.3;
  color: var(--p-text-2);
  cursor: pointer;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease), color 160ms var(--ease);
}
.set-chip span:hover { border-color: var(--p-ctrl-h); }
.set-chip input:checked + span {
  border-color: var(--p-inv-bg);
  background: var(--p-inv-bg);
  color: var(--p-inv-fg);
}
.set-chip input:focus-visible + span { outline: 2px solid var(--p-focus); outline-offset: 2px; }
.set-days span { min-width: 2.6em; text-align: center; }

.set-seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--p-ctrl); border-radius: 0.35em; }
.set-seg-b {
  padding: 0.28em 0.6em;
  border: 0;
  border-radius: 0.25em;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.78em;
  line-height: 1.3;
  color: var(--p-muted);
  cursor: pointer;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.set-seg-b:hover { color: var(--p-text); }
.set-seg-b.is-on { background: var(--p-inv-bg); color: var(--p-inv-fg); }

.set-check { display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.8em; color: var(--p-text-2); cursor: pointer; }
.set-check input { width: 0.95em; height: 0.95em; accent-color: var(--p-inv-bg); cursor: pointer; }

.set-f-act { display: flex; gap: 0.5em; margin-top: 0.2em; }
.set-err { margin: 0; font-size: 0.76em; color: var(--p-text-2); }


/* ─── 4 · Teklif ──────────────────────────────────────────────────
   Sade ve büyük tipografi. Kart yok, kutu yok, ikinci grafik yok. */
.sec-teklif { border-top: 1px solid var(--hairline); }
.t-offer {
  max-width: 20ch;
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 4.8vw, 5.25rem);
  line-height: 0.99;
  letter-spacing: -0.032em;
}
.t-offer-lead {
  margin-top: 28px;
  max-width: 58ch;
  font-size: clamp(1.0625rem, 1.2vw, 1.25rem);
  line-height: 1.55;
  color: var(--graphite);
  text-wrap: pretty;
}
.sec-teklif .btn { margin-top: clamp(36px, 4.5vh, 52px); }


/* ─── 5 · Footer ──────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--hairline); padding-block: 44px; }
.footer-inner {
  display: flex;
  align-items: center;
  gap: 40px;
}
.footer-line { font-size: 14px; color: var(--graphite); }
.footer-links {
  margin-left: auto;
  display: flex;
  gap: 26px;
  font-size: 14px;
  color: var(--graphite);
}
.footer-links a { transition: color 180ms var(--ease); }
.footer-links a:hover { color: var(--ink); }
/* Büyük harfe çevrilmiyor: Türkçe'de "i" → "İ" oluyor ve marka adı
   OPSSTUDİO diye okunuyordu. Marka adının yazımına dokunulmaz. */
.footer-copy {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--graphite);
}


/* ─── Açılış hareketi ─────────────────────────────────────────────
   Düşük genlik, tek yön, tek sefer. Dikkat istemiyor. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease), transform 800ms var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }


/* ─── Dar ekran koruması ──────────────────────────────────────────
   Bu bir MASAÜSTÜ konsepti. Aşağısı tasarım değil, kırılmayı önleyen
   asgari düzen: iki kolonlu sahne tek kolona düşer, giriş hareketi
   tamamen devre dışı kalır. Bu geçişte mobil YENİDEN TASARLANMADI. */
@media (max-width: 1100px) {
  :root { --page: min(1520px, 100% - 48px); --nav-h: 72px; }
  .exp { height: auto; }
  .exp-sticky { position: static; height: auto; overflow: visible; background: var(--stage-dark); }
  .exp-env { display: none; }
  .exp-stage { position: static; padding-block: 48px; }
  .exp-composition { transform: none; }
  .exp-masthead { font-size: clamp(24px, 5vw, 28px); }
  .exp-grid { grid-template-columns: 1fr; gap: 32px; }
  .exp-copy { min-height: 0; }
  .exp-pane { position: static; opacity: 1; transform: none; }
  .exp-pane:not(.is-active) { display: none; }
  .pnl { height: 520px; }
  /* Callout ölçüleri masaüstü paneline göre; dar ekranda kapalı. */
  .pnl-callout { display: none; }
  .footer-inner { flex-wrap: wrap; gap: 20px; }
}


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }

  /* Giriş hareketi yok, KOMPOZİSYON var: masthead + özellik 01 +
     dashboard ilk kareden itibaren tam ve kullanılabilir. Kayma
     sıfırlanıyor, callout son geometrisiyle anında çiziliyor. */
  .exp-composition { transform: none !important; }
  .pnl-callout[data-state] { animation: none; opacity: 1; }
  .pnl-callout-line { animation: none !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}


/* ════════════════════════════════════════════════════════════════════
   3 · KANIT — kadın saçı vakası + Meta/Instagram bağlantısı

   İki sahne, tek kanıt dizisi. Sahne 1 fotoğraf öncülüğünde (kanıt
   metinde değil karede), Sahne 2 tanınır platform kimliğiyle.

   Mevcut sistem: --canvas, --ink, --graphite, --hairline(-2), --lime,
   --page, --ease, Archivo display / Schibsted gövde / Plex Mono utility.

   YOK: gradient, glow, gölge, cam, yuvarlak kart yığını, hap koleksiyonu,
   sticky, ikinci scrollytelling, dekoratif 01/02/03, ikinci dev başlık.
   Fotoğraf bölümün tek bilinçli görsel riski ve imzası.
   ════════════════════════════════════════════════════════════════════ */

/* ─── Sahne 1 · Fotoğraftan gelen soruya kuaför seviyesinde cevap ───
   Kompozisyon klasik "sol metin – sağ görsel" şablonu DEĞİL: fotoğraf
   sol viewport kenarına tam taşıyor, bölümün üst ve alt sınırına
   oturuyor (bu yüzden .cred-hair'in dikey padding'i sıfır) ve yükseklik
   neredeyse tam ekran. Kalan alanda cevap büyük tipografiyle duruyor —
   kart, çerçeve, balon, arayüz kabı yok. */
.cred-hair { padding: 0; }

.hq {
  display: grid;
  /* Fotoğraf bölümün ~%44'ü: brief'in %42–46 aralığında. */
  grid-template-columns: 44% minmax(0, 1fr);
  align-items: stretch;
  min-height: min(100svh, 920px);
}

/* Çerçeve, gölge, köşe yuvarlaması YOK. */
.hq-shot {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: #e6e5e0;
}

.hq-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Kaynak 2:3; bu kutuda oran neredeyse birebir, yani kırpma çok az —
     dip, boy ve uçlar birlikte kalıyor. Kırpma kaynak dosyaya
     dokunmadan yalnız object-position ile. */
  object-position: 50% 42%;
}

.hq-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 4.6vw, 88px) clamp(30px, 4.6vw, 92px);
}

/* Müşterinin sorusu: küçük ve sakin giriş satırı. Görsel olarak küçük
   ama semantik olarak bölümün başlığı (bkz. index.html notu). */
.hq-ask {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.1vw, 1.0625rem);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--graphite);
  max-width: 46ch;
}

/* Ana cevap: bölümün görsel kahramanı. Ölçü kontrollü — uzun ve yorucu
   satır yok. */
.hq-answer {
  margin: clamp(14px, 1.4vw, 22px) 0 0;
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.1vw, 2.1rem);
  line-height: 1.22;
  letter-spacing: -0.022em;
  color: var(--ink);
  max-width: 34ch;
  text-wrap: pretty;
}

/* Devam sorusu: ana cevaptan boşlukla belirgin biçimde ayrılıyor. */
.hq-next {
  margin: clamp(28px, 3vw, 46px) 0 0;
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-weight: 600;
  font-size: clamp(1.0625rem, 1.3vw, 1.3rem);
  line-height: 1.35;
  letter-spacing: -0.014em;
  color: var(--ink);
  max-width: 34ch;
}
/* Bölümdeki TEK marka yeşili. Dolgu değil ince çizgi; yapısal bir öğe
   değil, tek vurgu. */
.hq-next-t {
  padding-bottom: 3px;
  border-bottom: 2px solid var(--lime);
}

/* Kapanış: küçük ve ikincil. */
.hq-close {
  margin: clamp(24px, 2.6vw, 38px) 0 0;
  font-size: clamp(0.875rem, 0.95vw, 0.9375rem);
  line-height: 1.55;
  color: var(--graphite);
  max-width: 44ch;
  text-wrap: pretty;
}

/* ─── Sahne 2 · Meta bağlantısı ────────────────────────────────────
   Dipnot değil, ikinci güçlü görsel an. Koyu alan tam genişlikte,
   gradient yok; sonrasında mevcut açık #teklif temiz biçimde açılıyor. */
.cred-meta {
  --m-fg: #f5f4f0;
  --m-muted: #9d9c93;
  --m-line: #2e2e2a;
  background: #111111;
  color: var(--m-fg);
  padding-block: clamp(56px, 4.8vw, 76px);
}

.cred-meta-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(36px, 3.6vw, 64px);
  align-items: center;
}

.cred-meta .cred-kicker { color: var(--m-muted); }

.cred-h3 {
  margin: 14px 0 0;
  max-width: 18ch;
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.95vw, 1.95rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--m-fg);
  text-wrap: balance;
}

.cred-sub-dark {
  max-width: 42ch;
  color: var(--m-muted);
}

/* ─── Bağlantı mührü ───────────────────────────────────────────────
   Instagram → Meta izin ekranı → OpsStudio. Rozet kutusu yok, onay
   tiki yok, ortaklık iması yok: yalnız üç resmî işaret ve aralarındaki
   çizgi. Marka renkleri işaretin İÇİNDE kalıyor. */
.cred-seal {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-items: center;
  align-items: start;
}

/* Bağlantının kendisi okunmalı: --m-line tonunda çizilince #111 üstünde
   neredeyse görünmüyordu. */
.cred-seal-line {
  position: absolute;
  left: 16.6%;
  right: 16.6%;
  top: 48px;
  height: 1px;
  background: #46453f;
}

.cred-seal-node {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 12px;
}

/* Zemini koyu: çizgi düğümün altından geçmesin, düğüme BAĞLANSIN. */
.cred-seal-mark {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  background: #111111;
  border: 1px solid var(--m-line);
  border-radius: 2px;
}
.cred-seal-mark img {
  display: block;
  width: 38px;
  height: 38px;
}
.cred-seal-mark .mark {
  width: 42px;
  height: 42px;
  color: var(--m-fg);
}

.cred-seal-name {
  font-size: 12px;
  letter-spacing: -0.005em;
  color: var(--m-fg);
}

/* Üç güvence: ayrı kartlar değil, tek hairline şerit. */
.cred-assure {
  list-style: none;
  /* margin-inline AUTO şart: .page'in ortalamasını kısayol ezerse şerit
     sol kenardan taşıp kırpılıyor (ilk render'da tam bu oldu). */
  margin: clamp(38px, 3.4vw, 54px) auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--m-line);
}
.cred-assure li {
  padding: 18px 26px 0 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--m-fg);
}
.cred-assure li + li {
  border-left: 1px solid var(--m-line);
  padding-left: 26px;
}

/* ════════════════════════════════════════════════════════════════════
   Hareket — sahne başına ~900ms altında, yalnız transform/opacity.
   Scroll'a scrub yok, sticky yok, loop yok, logo animasyonu yok.
   Sayfanın kendi IntersectionObserver'ı [data-cred]'e is-in ekliyor.
   Gizleme yalnız .js altında: script çalışmazsa her şey görünür.
   ════════════════════════════════════════════════════════════════════ */

/* Sahne 1: yalnız çok hafif bir giriş. Tarama, typewriter, karusel,
   fotoğraf değiştirme, belirip kaybolan AI noktaları YOK — bölüm esas
   olarak statik. */
.js .hq-img {
  transform: scale(1.03);
  transition: transform 820ms var(--ease);
}
.js .cred-hair.is-in .hq-img { transform: none; }

.js .hq-ask,
.js .hq-answer,
.js .hq-next,
.js .hq-close {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 460ms var(--ease), transform 460ms var(--ease);
}
.js .cred-hair.is-in .hq-ask,
.js .cred-hair.is-in .hq-answer,
.js .cred-hair.is-in .hq-next,
.js .cred-hair.is-in .hq-close {
  opacity: 1;
  transform: none;
}
.js .cred-hair.is-in .hq-answer { transition-delay: 90ms; }
.js .cred-hair.is-in .hq-next   { transition-delay: 170ms; }
.js .cred-hair.is-in .hq-close  { transition-delay: 240ms; }

/* Sahne 2: bağlantı soldan sağa çözülür, güvenceler tamamlanınca gelir.
   Markalar sabit — çizilmiyor, dönmüyor, atmıyor. */
.js .cred-seal-line {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 600ms var(--ease);
}
.js .cred-meta.is-in .cred-seal-line { transform: none; }

.js .cred-seal-node {
  opacity: 0;
  transition: opacity 300ms var(--ease);
}
.js .cred-meta.is-in .cred-seal-node { opacity: 1; }
.js .cred-meta.is-in .cred-seal-node:nth-child(3) { transition-delay: 200ms; }
.js .cred-meta.is-in .cred-seal-node:nth-child(4) { transition-delay: 400ms; }

.js .cred-assure li {
  opacity: 0;
  transition: opacity 320ms var(--ease);
}
.js .cred-meta.is-in .cred-assure li {
  opacity: 1;
  transition-delay: 540ms;
}

/* ─── Dar ekran ────────────────────────────────────────────────────
   Tek kolon, okuma sırası korunuyor. Kılavuz çizgileri kalkıyor
   (geometri basitleşiyor); notlar doğrudan anlattıkları bölgenin
   üstünde duruyor, bağlanma yine görünür. */
@media (max-width: 1100px) {
  .cred-meta-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  /* Masaüstü düzeni sıkıştırılmıyor, yeniden diziliyor: önce fotoğraf,
     sonra soru → cevap → devam sorusu → kapanış. Fotoğraf thumbnail'e
     düşmüyor; 4/5 oranıyla gerçek bir yükseklik koruyor. */
  .hq {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .hq-shot { aspect-ratio: 4 / 5; }
  .hq-img { object-position: 50% 38%; }
  .hq-answer,
  .hq-next { max-width: none; }

  .cred-h3 { max-width: 22ch; }
  .cred-sub-dark { max-width: none; }

  .cred-seal-mark { width: 68px; height: 68px; }
  .cred-seal-mark img { width: 28px; height: 28px; }
  .cred-seal-mark .mark { width: 30px; height: 30px; }
  .cred-seal-line { top: 34px; }

  .cred-assure {
    grid-template-columns: minmax(0, 1fr);
  }
  .cred-assure li { padding: 14px 0; border-bottom: 1px solid var(--m-line); }
  .cred-assure li:last-child { border-bottom: 0; padding-bottom: 0; }
  .cred-assure li + li { border-left: 0; padding-left: 0; }
}

/* Hareket azaltma: son durum ilk karede, eksiksiz. */
@media (prefers-reduced-motion: reduce) {
  .js .hq-img,
  .js .hq-ask,
  .js .hq-answer,
  .js .hq-next,
  .js .hq-close,
  .js .cred-seal-line,
  .js .cred-seal-node,
  .js .cred-assure li {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
}


/* ════════════════════════════════════════════════════════════════════
   KOMPAKT MOD (≤1100px) — telefon ve tablet

   Masaüstü (≥1101px) hiç değişmedi: sekiz sahneli sticky scrollytelling,
   callout çizgileri, tema eşiği ve ölçüler aynen duruyor.

   Buradaki fark bir düzen ayarı değil, AYRI BİR ETKİLEŞİM: ürün deneyimi
   normal akışa iner, sahne sırası scroll'dan türetilmez; yatay özellik
   şeridi + önceki/sonraki düğmeleri seçer (bkz. script.js isCompact).
   Özellik seçmek sayfa konumunu değiştirmez.

   Yeni renk/font/gölge yok; mevcut token ve tipografi rolleri aynı.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {

  /* Telefonda kenar boşluğu 20–24px; tablette mevcut geniş sistem. */
  :root { --page: min(1520px, 100% - 40px); }

  /* Sabit navigasyon bir çapayı örtmesin. */
  .exp, .sec-cred, .sec-teklif { scroll-margin-top: calc(var(--nav-h) + 8px); }

  /* ─── Sahne kabuğu ─────────────────────────────────────────────── */
  .exp-stage { padding-block: clamp(28px, 6vw, 44px) clamp(32px, 7vw, 48px); }
  .exp-masthead { margin-bottom: clamp(18px, 4vw, 26px); }

  /* Kompozisyon tek kolon; iddia ile kanıtı ayıran büyük boşluk yok. */
  .exp-grid { gap: clamp(16px, 3.5vw, 22px); }

  /* ─── Özellik şeridi: dikey liste değil, yatay snap rayı ────────
     Sekiz yuvarlak kart DEĞİL — alt çizgili sekmeler. Aktif durum tek
     yerde lime. Ray kendi içinde kayar, dikey sayfa scroll'unu
     kaçırmaz. Kenardan kenara taşar ki kaydırılabilirliği görünsün. */
  .exp-steps {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-top: 0;
    border-bottom: 1px solid var(--s-line, rgba(255, 255, 255, 0.14));
  }
  /* Kenardan kenara taşma DENENDİ ve geri alındı: 100vw scrollbar'ı da
     sayıyor, belge düzeyinde 13px yatay taşma üretiyordu. Ray sayfa
     boşluğunun içinde kalıyor; kaydırılabilirliği son sekmenin
     kırpılması zaten gösteriyor. */
  .exp-steps::-webkit-scrollbar { display: none; }
  .exp-steps > li {
    flex: 0 0 auto;
    scroll-snap-align: center;
    border: 0;
  }

  /* Etiket SARILIYOR ve genişlik sınırlı: tek satırda "Instagram ve
     WhatsApp tek yerde" 320px'te rayın tamamını kaplıyor ve ikinci
     sekme hiç görünmüyordu — ray yatay görünmüyor, tek başlık gibi
     okunuyordu. Sınırlı genişlikte ~2 sekme görünüyor. */
  .exp-step {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: auto;
    max-width: 178px;
    white-space: normal;
    text-align: left;
    padding: 10px 14px 11px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
  }
  .exp-step .exp-step-l { line-height: 1.25; }
  .exp-step .exp-step-n { flex: none; }
  .exp-step::before,
  .exp-step::after { content: none; }
  .exp-step .exp-step-l { font-size: 14px; }
  .exp-step .exp-step-n { font-size: 10px; }
  .exp-step.is-active { border-bottom-color: var(--lime); }

  /* ─── Aktif iddia ──────────────────────────────────────────────── */
  .exp-copy { min-height: 0; }
  .exp-pane { position: static; opacity: 1; transform: none; }
  .exp-pane:not(.is-active) { display: none; }
  .exp-pane .t-h3 { font-size: clamp(20px, 5vw, 24px); }
  .exp-pane .t-body { font-size: 15px; max-width: none; }

  /* ─── Panel: küçültme değil, yeniden akış ──────────────────────── */
  .pnl {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    /* Yükseklik viewport yüksekliğine bağlı: kanıtın panel İÇİNDE
       kaydırma gerektirmeden görünmesi buna bağlı. 320×800'de ölçüldü —
       480px'te müşteri dosyası ve analiz kolonu hâlâ taşıyordu. */
    height: clamp(510px, 66svh, 580px);
    border-radius: 8px;
  }
  /* Uzun masaüstü kenar çubuğu dar ekranda anlam taşımıyor. */
  .pnl-rail { display: none; }
  .pnl-callout { display: none; }

  /* Panelin kendi künyesi: işaret + ekran adı + sahne konumu. */
  .pnl-top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
  }
  .pnl-top-mark { display: inline-flex; }
  .pnl-top-mark .mark { width: 22px; height: 22px; }
  .pnl-screen { font-size: 14px; }
  .pnl-top-pos {
    display: inline-block;
    margin-left: auto;
    font-size: 11px;
    color: var(--p-muted);
  }

  /* Panel içi tipografi tabanı: 320px'te bile okunur kalsın diye
     konteyner ölçeğine değil sabit tabana bağlanıyor. */
  .pnl-body { font-size: 13px; }

  /* ─── Önceki / ilerleme / sonraki ──────────────────────────────── */
  .exp-mc {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 14px;
  }
  .exp-mc-b {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 2px;
    background: none;
    color: #f5f4f0;
    cursor: pointer;
    transition: border-color 160ms var(--ease), color 160ms var(--ease);
  }
  .exp-mc-b svg { width: 16px; height: 16px; }
  .exp-mc-b:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.5); }
  .exp-mc-b:disabled { opacity: 0.32; cursor: default; }
  .exp-mc-pos {
    margin: 0;
    min-width: 74px;
    text-align: center;
    font-size: 13px;
    color: #f5f4f0;
  }

  /* ─── Sahne geçişi: tek kısa, ölçülü ───────────────────────────── */
  .pv { transition: opacity 200ms var(--ease), transform 200ms var(--ease); }
  .pv:not(.is-active) { opacity: 0; }
  .pv.is-active { opacity: 1; transform: none; }
}

/* ─── Sahne bazlı kanıt odağı (yalnız telefon) ────────────────────────
   Her ekran TEK kanıtını gösteriyor. İkincil masaüstü kabuğu gizleniyor;
   punto küçültülmüyor ve hedef kanıt asla kırpılmıyor. Sekiz panel
   kopyalanmadı — mevcut aktif .pv yeniden akıtılıyor.

   SINIR 767px, 1100 DEĞİL: 768–1100 arasında panel 540–712px genişlikte
   ve masaüstünün iki kolonlu ekranları orada zaten okunuyor. Tek kolona
   zorlanınca panelin altında büyük ölü alan kalıyordu (1024px'te
   ölçüldü). */
@media (max-width: 767px) {

  /* 01 · Instagram ve WhatsApp tek yerde → kanal filtresi + gelen liste */
  .pv-msg[data-pv="0"] .msg2 { grid-template-columns: minmax(0, 1fr); }
  .pv-msg[data-pv="0"] .msg2-conv { display: none; }
  .pv-msg[data-pv="0"] .msg2-list { border-right: 0; overflow: hidden; }

  /* 02 · Konuşmanın içinde randevu → konuşma + randevu alanı */
  .pv-msg[data-pv="1"] .msg2 { grid-template-columns: minmax(0, 1fr); }
  .pv-msg[data-pv="1"] .msg2-list { display: none; }

  /* 03 · Müşteri hafızası → seçili müşterinin dosyası */
  .cst2 { grid-template-columns: minmax(0, 1fr); }
  .cst2-list { display: none; }

  /* 05 · Gelir fırsatları → fırsat listesi (isim · hizmet · ritim) */
  .opp2-body { grid-template-columns: minmax(0, 1fr); }
  .opp2-work { display: none; }
  .opp2-list { border-right: 0; }

  /* 06 · Gelirin kaynağı → toplam + kaynak dağılımı */
  .rev-body { grid-template-columns: minmax(0, 1fr); }
  .rev-work { display: none; }
  .rev-side { border-right: 0; }

  /* 07 · Müşteri davranışları → dört sinyal şeridi + ilk kolon */
  .anl-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anl-body { grid-template-columns: minmax(0, 1fr); }
  .anl-col + .anl-col { display: none; }

  /* 08 · Salon ayarları ve personel → personel uygunluğu
     Asıl bölünme .set-panes (liste | detay); dar ekranda iki kolon
     kalınca detay metni kırpılıyordu. Kalan kanıt personel listesi:
     kim aktif, kim izinli, kaç hizmet veriyor — konuşmayı besleyen
     salon bilgisi bu. */
  .set { grid-template-columns: minmax(0, 1fr); }
  .set-nav { display: none; }
  .set-panes { grid-template-columns: minmax(0, 1fr); }
  .set-detail { display: none; }
  .set-list { border-right: 0; }

  /* 03 · Ziyaret geçmişi ilk üç kayıtla sınırlı: dosyanın kanıtı
     kimlik + özet + künye; tam geçmiş panel içinde kaydırma
     gerektiriyordu. */
  .cst2-tl li:nth-child(n + 4) { display: none; }
}

/* Telefon: tek kolon ve dar kenar boşluğu. */
@media (max-width: 900px) {
  /* Navbar 72 → 60. Telefonda 72px, 640px'lik bir ekranın %11'i; içindeki
     en uzun öğe 44px CTA, yani 60px'te 8+8 pay kalıyor ve hiçbir şey
     sıkışmıyor (ölçüldü). Kazanılan 12px doğrudan sahnenin işine
     yarıyor — aşağıdaki panel yüksekliği --nav-h'a bağlı. */
  :root { --page: min(1520px, 100% - 40px); --nav-h: 60px; }
  .exp-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
  }

  /* ─── Tek kontrol: yatay şerit kalkıyor ───────────────────────────
     Şerit (.exp-steps) ile pager (.exp-mc) AYNI işi yapıyordu: ikisi de
     goToStep(i) çağırıp sahne seçiyor. Telefonda ikisini birden taşıyacak
     yer yok — kompozisyon 964px, sabit navbar altında kalan yer
     664 − 72 = 592px. Şerit gidiyor (77px + alt boşluğu), tek kontrol
     pager kalıyor.

     Bilgi kaybı yok: adımın adı zaten metin alanının eyebrow'unda yazıyor
     ("GELEN KUTUSU", "RANDEVU KORUMA"…), üstelik şerit dar ekranda sekiz
     sekmeden ancak ikisini gösterebiliyordu — kaydırılabilir olduğu da
     belli değildi. */
  .exp-steps { display: none; }

  /* ─── Kontrol, kontrol ettiği şeyin ÜSTÜNDE ───────────────────────
     ÖLÇÜLDÜ: pager panelin ALTINDAYKEN, bölüm boyunca 20px aralıkla
     taranan 62 scroll noktasının HİÇBİRİNDE panel ile pager aynı anda
     tam görünmüyordu (0/62). Salon sahibi paneli görürken ilerlemenin
     bir yolu olduğunu göremiyor; okları bulmak için kaydırınca panel
     ekrandan çıkıyor; ileri basınca neyin değiştiğini göremiyordu.

     Pager panelin üstüne alınınca ikisi tek ekrana giriyor: 44 + 12 +
     panel. DOM sırası DEĞİŞMEDİ — tablet aralığı (901–1100px) pager'ı
     tam genişlik son satırda istiyor, DOM'da taşımak orayı bozardı.
     Yalnız telefonda görsel sıra `order` ile dönüyor. */
  .exp-side { order: 1; }
  .exp-mc   { order: 2; margin-top: 0; }
  .pnl      { order: 3; }

  /* ─── Panel yüksekliği: sabit değil, KALAN yer ────────────────────
     clamp(510px, 66svh, 580px) kısa telefonlarda hep 510px tabanına
     takılıyordu (66svh = 640'ta 422px). Üstüne 44px pager + 12px boşluk
     binince blok 566px oluyor, navbar altında ise 568px yer var — 2px
     pay. Ölçüm: 74 scroll noktasının HİÇBİRİNDE ikisi birden tam
     görünmedi (360×640). Tavan artık gerçek kalan yerden türüyor:
     ekran − navbar − (pager + boşluk + 44px nefes payı). Uzun
     telefonlarda clamp zaten daha küçük, orada bir şey değişmiyor. */
  .pnl {
    height: min(
      clamp(510px, 66svh, 580px),
      calc(100svh - var(--nav-h) - 100px)
    );
  }
}

/* ─── Kısa ekran (≤700px yükseklik): iki sahnenin son satırı taşıyordu ──
   Panel tavanı artık kalan yere bağlı (yukarı bkz.), 640px'lik bir
   ekranda 480px'e iniyor. Ölçüldü: 03 · müşteri dosyası 395>342 ve
   07 · analizler 287>277 taşıyor. NOT: 03 bu ekranlarda zaten
   taşıyordu (395>372), tavan düşünce açık büyüdü.

   Kırpmak çözüm değil — kırpılan içerik görünmez ve kaydırılamaz.
   En az bilgi taşıyan satırlar çıkarılıyor; sahnenin kanıtı duruyor. */
@media (max-width: 900px) and (max-height: 700px) {
  /* Ziyaret geçmişi 3 → 2 kayıt. "6 haftada bir" ritmini iki tarih
     zaten gösteriyor; üçüncüsü aynı şeyi tekrar ediyor. */
  .cst2-tl li:nth-child(n + 3) { display: none; }

  /* Künye üç satırdan ikiye. "Tercih: Öğleden sonra · Gülden" bilgisi
     hemen üstteki özet cümlede kelimesi kelimesine geçiyor. */
  .cst2-facts > div:nth-child(3) { display: none; }

  /* Analizler yalnız ~10px taşıyor: başlık üst boşluğu yetiyor,
     içerikten bir şey çıkarmaya gerek yok. */
  .anl-l { margin-top: 0.5em; }
}

/* 901–1100px: iddia ve kanıt dengeli iki kolonda durabiliyor. */
@media (min-width: 901px) and (max-width: 1100px) {
  .exp-grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
  }
  .exp-steps {
    grid-column: 1 / -1;
    margin-bottom: 4px;
  }
  .exp-mc { grid-column: 1 / -1; }
  .pnl { height: clamp(460px, 52vw, 540px); }
}

/* ─── Sabit navigasyon: 320px'te taşma ve çakışma yok ──────────────── */
@media (max-width: 560px) {
  /* Kolonlar base'le aynı (auto + kalan); dar ekranda yalnız aradaki
     boşluk daralıyor. */
  .nav-inner { gap: 10px; }
  .wordmark { font-size: 26px; }
  .nav-cta {
    min-height: 44px;
    padding: 11px 14px;
    font-size: 14px;
    white-space: nowrap;
  }
}
/* 320px: CTA 13px'te ~162px yer istiyor ve kısaltılamaz (tek karar
   noktası, okunur kalmalı). Yer marka adı tarafından açılıyor — ad
   KALDIRILMIYOR, yalnız küçülüyor. İkon artık yok, ölçü aşağıda
   tarayıcıda doğrulandı (bkz. commit notu). */
@media (max-width: 360px) {
  .wordmark { font-size: 22px; letter-spacing: -0.015em; }
  .nav-cta { padding: 11px 12px; font-size: 13px; }
}

/* Çentik/ev düğmesi payı — destekleyen cihazlarda. */
@supports (padding: max(0px)) {
  @media (max-width: 900px) {
    .nav-inner {
      padding-left: max(0px, env(safe-area-inset-left));
      padding-right: max(0px, env(safe-area-inset-right));
    }
  }
}

/* ─── JS kapalıyken anlamlı ilk kare ────────────────────────────────
   .is-active sınıfını JS veriyor; script çalışmazsa hiçbir sahne
   görünmezdi. Bu blok yalnız html.js YOKKEN devreye giriyor. */
html:not(.js) .exp-pane[data-copy="0"] {
  position: static;
  display: block;
  opacity: 1;
  transform: none;
}
html:not(.js) .pv[data-pv="0"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Hareket azaltma: sahne geçişi anında, içerik eksiksiz. */
@media (prefers-reduced-motion: reduce) {
  .pv { transition: none; }
  .pv.is-active { opacity: 1; transform: none; }
}


/* ─── Kompakt panel tipografisi ──────────────────────────────────────
   Panelin tüm iç tipografisi .pnl-body'ye em ile bağlı. 320px'te ölçüldü:
   en küçük anlamlı metin 9.1px'e kadar düşüyordu (0.62–0.66em etiketler).
   Punto küçültmek yerine taban yükseltildi (13 → 15px) ve em zincirinin
   dibinde kalan sınıflara açık taban verildi. Bunlar masaüstünü
   etkilemez: hepsi ≤1100px bloğunun içinde. */
@media (max-width: 1100px) {
  .pnl-body { font-size: 15px; }

  /* Anlamlı gövde metni tabanı: 12px. */
  .msg2-r-t,
  .msg2-r-p,
  .msg2-who i,
  .msg2-bk-m,
  .msg2-bk-hint,
  .msg2-bk-done-m,
  .msg2-sys,
  .b time,
  .cst2-r-m,
  .cst2-who i,
  .cst2-facts dt,
  .apt2-note,
  .apt2-s,
  .apt2-sum,
  .opp2-r-meta,
  .opp2-draft-l,
  .rev-range,
  .rev-k-l,
  .rev-k-m,
  .rev-src-n,
  .rev-src-v,
  .rev-r-m,
  .rev-lost,
  .rev-more,
  .anl-s-l,
  .opp2-r-svc,
  .msg2-slot,
  .set-d-who i { font-size: 12px; }

  /* Mono bölüm etiketleri (SON ZİYARETLER, TEMA …) utility rolünde:
     11px taban, mevcut harf aralığı korunuyor. */
  .cst2-l,
  .opp2-l,
  .rev-l,
  .anl-l,
  .apt2-day,
  .pnl-theme-l { font-size: 11px; }
}