/* ═══════════════════════════════════════════════════════════════
   RACOUN AGENCY PANEL — SUNUM ALANI
   Tüm sınıflar ".snm" önekiyle; renkler yalnızca mevcut var(--…)
   tokenlerinden gelir, yeni renk tanımlanmaz.

   SUNUM KİPİ TEMADAN BAĞIMSIZ OLARAK SİYAHA YAKINDIR: bir sunum
   projeksiyonda izlenir, panelin açık teması slaydın renklerini
   yıkar. Bu yüzden sahne --brand-ink (#0E1116) üzerine kurulur ve
   [data-theme] değişimlerinden etkilenmez.
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. LİSTE ─── */

.snm-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:var(--sp-5);
}

.snm-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:var(--sh-1);
  transition:box-shadow .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease);
}
.snm-card:hover{ box-shadow:var(--sh-2); border-color:var(--line-2); transform:translateY(-2px); }
.snm-card:focus-within{ border-color:var(--lime-deep); }

/* 16:9 kapak. aspect-ratio yerine dolgu hilesi: eski Safari ve
   cPanel müşterilerinin kurumsal tarayıcıları da doğru oranı verir. */
.snm-cover{
  position:relative;
  width:100%;
  padding:56.25% 0 0;      /* yükseklik = genişlik × 9/16 */
  background:var(--brand-ink);
  display:block;
  border:0;
  cursor:pointer;
  overflow:hidden;
}
.snm-cover > *{ position:absolute; inset:0; }
.snm-cover img{
  width:100%; height:100%;
  object-fit:contain;      /* slayt KIRPILMAZ — kapakta da tüm içerik görünür */
  display:block;
}
.snm-cover__ph{
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:6px;
  color:var(--text-inv); opacity:.62;
  font-size:12.5px; font-weight:700; letter-spacing:.02em;
}
.snm-cover__ph b{ font-size:26px; line-height:1; opacity:.9; }
.snm-cover__play{
  position:absolute; inset:auto 10px 10px auto;
  background:var(--grad-lime); color:var(--lime-ink);
  border-radius:var(--r-full);
  font-size:11.5px; font-weight:800;
  padding:5px 11px;
  box-shadow:var(--sh-lime);
  pointer-events:none;
  opacity:0; transform:translateY(4px);
  transition:opacity .18s var(--ease), transform .18s var(--ease);
}
.snm-card:hover .snm-cover__play,
.snm-cover:focus-visible .snm-cover__play{ opacity:1; transform:translateY(0); }

.snm-card__body{ padding:var(--sp-4); display:flex; flex-direction:column; gap:6px; flex:1; }
.snm-card__title{ font-size:14.5px; font-weight:800; line-height:1.35; color:var(--text); }
.snm-card__desc{ font-size:12.5px; line-height:1.5; color:var(--text-3); }
.snm-card__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;
  font-size:11.5px; color:var(--text-3); margin-top:auto; padding-top:6px;
}
.snm-card__meta i{ font-style:normal; opacity:.5; }

.snm-card__acts{
  display:flex; flex-wrap:wrap; gap:6px;
  padding:0 var(--sp-4) var(--sp-4);
}

/* Durum rozetleri — paneldeki .badge ölçüleriyle uyumlu */
.snm-badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:800; letter-spacing:.01em;
  padding:3px 9px; border-radius:var(--r-full);
  border:1px solid transparent; white-space:nowrap;
}
.snm-badge--taslak{ background:var(--st-bekliyor-bg); color:var(--st-bekliyor); border-color:var(--line); }
.snm-badge--yayinda{ background:var(--st-yapiliyor-bg); color:var(--st-yapiliyor); border-color:var(--info-br); }
.snm-badge--onaylandi{ background:var(--st-onaylandi-bg); color:var(--st-onaylandi); border-color:var(--ok-br); }
.snm-badge--mode{ background:var(--surface-3); color:var(--text-3); border-color:var(--line); }

/* ─── 2. SLAYT YÖNETİMİ (ajans) ─── */

.snm-slides{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:var(--sp-4);
}
.snm-slide{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--surface-2);
}
.snm-slide__no{
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 10px; font-size:11.5px; font-weight:800; color:var(--text-3);
  border-bottom:1px solid var(--line);
}
.snm-slide textarea{
  width:100%; border:0; background:transparent; resize:vertical;
  min-height:64px; padding:10px; font:inherit; font-size:12.5px; color:var(--text);
}
.snm-slide textarea:focus{ outline:2px solid var(--lime-deep); outline-offset:-2px; }

/* ─── 3. YORUM LİSTESİ ─── */

.snm-cmts{ display:flex; flex-direction:column; gap:10px; }
.snm-cmt{
  border:1px solid var(--line);
  border-left:3px solid var(--lime);
  border-radius:var(--r);
  padding:9px 12px;
  background:var(--surface-2);
}
.snm-cmt__head{
  display:flex; flex-wrap:wrap; gap:8px; align-items:baseline;
  font-size:11.5px; color:var(--text-3); margin-bottom:3px;
}
.snm-cmt__who{ font-weight:800; color:var(--text); }
.snm-cmt__slide{
  font-weight:800; color:var(--lime-ink);
  background:var(--lime); border-radius:var(--r-full); padding:1px 7px; font-size:10.5px;
}
.snm-cmt__text{ font-size:13px; line-height:1.55; color:var(--text); white-space:pre-wrap; word-break:break-word; }

/* ─── 4. SUNUM KİPİ (tam ekran sahne) ─── */

.snm-stage{
  position:fixed; inset:0; z-index:500;
  background:var(--brand-ink);
  color:#fff;
  display:flex; flex-direction:column;
  overflow:hidden;          /* sabit kaplama sayfaya yatay kaydırma eklemesin */
  /* Çentikli telefonlarda yatayda düğmeler çentiğin altına girmesin */
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  -webkit-user-select:none; user-select:none;
  touch-action:pan-y;
}
.snm-stage *{ box-sizing:border-box; }

.snm-stage__bar{
  flex:none;
  /* Dar telefonda düğmeler alt satıra iner; taşıp sayfayı yatay
     kaydırılabilir yapmaz (390 px'te dizilim sınandı). */
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:8px 12px;
  background:rgba(0,0,0,.42);
  font-size:12.5px;
}
.snm-stage__title{
  font-weight:800; font-size:13px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  flex:1; min-width:0; color:#fff;
}
.snm-stage__count{
  flex:none; font-variant-numeric:tabular-nums; font-weight:800;
  background:var(--grad-lime); color:var(--lime-ink);
  border-radius:var(--r-full); padding:3px 11px; font-size:12px;
}

/* Sahne düğmeleri — panelin .btn'i açık zemin için tasarlandı,
   burada siyah üstünde çalışan kendi sade sürümü kullanılır. */
.snm-sbtn{
  flex:none;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-width:34px; height:34px; padding:0 10px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r);
  background:rgba(255,255,255,.07);
  color:#fff; font:inherit; font-size:12.5px; font-weight:700;
  cursor:pointer;
  transition:background .15s var(--ease), border-color .15s var(--ease);
}
.snm-sbtn:hover{ background:rgba(255,255,255,.16); }
.snm-sbtn:focus-visible{ outline:2px solid var(--lime); outline-offset:2px; }
.snm-sbtn[aria-pressed="true"]{ background:var(--grad-lime); color:var(--lime-ink); border-color:transparent; }
.snm-sbtn--lime{ background:var(--grad-lime); color:var(--lime-ink); border-color:transparent; box-shadow:var(--sh-lime); }
.snm-sbtn:disabled{ opacity:.4; cursor:default; }

/* Sahne gövdesi: slayt + (isteğe bağlı) yan panel */
.snm-stage__main{ flex:1; min-height:0; display:flex; }

.snm-stage__box{
  flex:1; min-width:0;
  position:relative;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-ink);
  overflow:hidden;
  cursor:pointer;
}
/* Mektup kutusu (letterbox): görsel hangi ekranda olursa olsun
   oranı korunarak ortalanır, kırpılmaz. */
.snm-stage__box img,
.snm-stage__box canvas{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  display:block;
  background:#fff;             /* şeffaf PDF sayfası siyah üstünde okunmaz kalmasın */
  box-shadow:0 18px 60px -20px rgba(0,0,0,.9);
}
.snm-stage__load{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px;
  font-size:13px; color:rgba(255,255,255,.8);
  background:var(--brand-ink);
}
.snm-stage__load i{
  width:26px; height:26px; border-radius:50%;
  border:3px solid rgba(255,255,255,.2); border-top-color:var(--lime);
  animation:snmSpin .8s linear infinite;
}
@keyframes snmSpin{ to{ transform:rotate(360deg); } }

/* Kenar okları — dokunmatikte de rahat basılacak genişlikte */
.snm-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:76px;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:var(--r-lg);
  background:rgba(0,0,0,.35); color:#fff;
  font-size:26px; line-height:1; cursor:pointer;
  opacity:0; transition:opacity .18s var(--ease), background .15s var(--ease);
}
.snm-stage__box:hover .snm-arrow,
.snm-arrow:focus-visible{ opacity:1; }
.snm-arrow:hover{ background:rgba(0,0,0,.62); }
.snm-arrow:focus-visible{ outline:2px solid var(--lime); outline-offset:2px; }
.snm-arrow--prev{ left:10px; }
.snm-arrow--next{ right:10px; }
.snm-arrow:disabled{ opacity:0 !important; pointer-events:none; }

/* Konuşma notu (yalnızca ajans) */
.snm-note{
  flex:none;
  max-height:22vh; overflow:auto;
  padding:9px 14px;
  background:rgba(255,255,255,.07);
  border-top:1px solid rgba(255,255,255,.12);
  font-size:12.5px; line-height:1.55; color:rgba(255,255,255,.88);
  white-space:pre-wrap;
}
.snm-note b{ color:var(--lime); font-size:11px; letter-spacing:.04em; text-transform:uppercase; }

/* Küçük resim şeridi */
.snm-strip{
  flex:none;
  display:flex; gap:8px;
  padding:10px 12px;
  overflow-x:auto; overflow-y:hidden;
  background:rgba(0,0,0,.45);
  border-top:1px solid rgba(255,255,255,.1);
  scrollbar-width:thin;
}
.snm-strip[hidden]{ display:none; }
.snm-thumb{
  flex:none;
  width:112px; height:63px;         /* 16:9 */
  border:2px solid rgba(255,255,255,.18);
  border-radius:8px;
  background:#000 center/contain no-repeat;
  color:rgba(255,255,255,.75);
  font-size:11px; font-weight:800;
  display:flex; align-items:flex-end; justify-content:flex-end;
  padding:3px 5px;
  cursor:pointer; overflow:hidden;
}
.snm-thumb.is-on{ border-color:var(--lime); box-shadow:var(--sh-lime); }
.snm-thumb:focus-visible{ outline:2px solid var(--lime); outline-offset:2px; }
.snm-thumb span{
  background:rgba(0,0,0,.62); border-radius:5px; padding:0 5px; line-height:1.5;
}

/* Yorum kutusu */
.snm-say{
  flex:none;
  display:flex; gap:8px; align-items:flex-start;
  padding:10px 12px;
  background:rgba(0,0,0,.45);
  border-top:1px solid rgba(255,255,255,.1);
}
.snm-say[hidden]{ display:none; }
.snm-say textarea{
  flex:1; min-width:0;
  min-height:38px; max-height:110px;
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.22); border-radius:var(--r);
  background:rgba(255,255,255,.07); color:#fff;
  font:inherit; font-size:13px; resize:vertical;
}
.snm-say textarea::placeholder{ color:rgba(255,255,255,.45); }
.snm-say textarea:focus{ outline:2px solid var(--lime); outline-offset:1px; }
.snm-say__list{
  flex:none; width:270px; max-height:110px; overflow:auto;
  font-size:12px; line-height:1.45; color:rgba(255,255,255,.8);
}
.snm-say__list p{ margin:0 0 5px; }
.snm-say__list b{ color:var(--lime); }

/* Ekran okuyucu duyurusu — görünmez ama okunur */
.snm-live{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ─── 5. TELEFON ─── */

@media (max-width:560px){
  .snm-grid{ grid-template-columns:1fr; gap:var(--sp-4); }
  .snm-card__acts{ padding:0 var(--sp-3) var(--sp-3); }
  .snm-slides{ grid-template-columns:1fr 1fr; }

  .snm-stage__bar{ padding:6px 8px; gap:6px; }
  .snm-stage__title{ font-size:12px; }
  .snm-sbtn{ height:32px; min-width:32px; padding:0 8px; font-size:12px; }
  .snm-arrow{ opacity:1; width:38px; height:62px; background:rgba(0,0,0,.28); }
  .snm-say{ flex-wrap:wrap; }
  .snm-say__list{ width:100%; max-height:74px; order:3; }
  .snm-thumb{ width:88px; height:50px; }
}

/* Telefon yatayda: sunum kipi ekranın tamamını slayda ayırır.
   Şerit ve yorum kutusu gizlenmez, sadece küçülür — kullanıcı
   isterse düğmelerden kapatır. */
@media (max-height:460px) and (orientation:landscape){
  .snm-stage__bar{ padding:4px 8px; }
  .snm-stage__title{ display:none; }
  .snm-sbtn{ height:28px; min-width:28px; font-size:11.5px; }
  .snm-stage__count{ padding:2px 8px; font-size:11px; }
  .snm-strip{ padding:5px 8px; }
  .snm-thumb{ width:72px; height:41px; }
  .snm-say{ padding:5px 8px; }
  .snm-say textarea{ min-height:30px; max-height:60px; }
  .snm-note{ max-height:16vh; padding:5px 10px; }
}

/* ─── 6. HAREKET AZALTMA ─── */
@media (prefers-reduced-motion:reduce){
  .snm-card, .snm-cover__play, .snm-arrow{ transition:none; }
  .snm-card:hover{ transform:none; }
  .snm-stage__load i{ animation:none; }
}

/* ─── 7. SAHNE İÇİ ONAY SORUSU ───
   Gerçek tam ekranda yalnızca tam ekran ögesinin alt ağacı çizilir;
   panelin .modal katmanı (z-index 200) ekranda görünmez. Bu yüzden
   sunumu onaylama sorusu sahnenin İÇİNDE, kendi şeridinde sorulur. */
.snm-ask{
  flex:none;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:10px 14px;
  background:var(--grad-lime); color:var(--lime-ink);
  font-size:13px; font-weight:800;
}
.snm-ask[hidden]{ display:none; }
.snm-ask span{ flex:1; min-width:180px; }
.snm-ask .snm-sbtn{
  border-color:rgba(14,17,22,.35);
  background:rgba(14,17,22,.08);
  color:var(--lime-ink);
}
.snm-ask .snm-sbtn:hover{ background:rgba(14,17,22,.18); }
.snm-ask .snm-sbtn--lime{ background:var(--brand-ink); color:#fff; border-color:transparent; }
.snm-ask .snm-sbtn:focus-visible{ outline:2px solid var(--brand-ink); outline-offset:2px; }