/* Playground eklemeleri: koyu tema, anlatım sırası düğmesi, Çözümler ve Loodos & AI bölümleri.
   Kaynak "Loodos Products" HTML'inin stillerinden sonra yüklenir; onların token'larını kullanır. */

/* ---------- Koyu tema ----------
   Marka kılavuzunun koyu zemini (#131E20) üzerine kurulu. data-theme her zaman <head>'deki betikle
   atanır: kayıtlı seçim varsa o, yoksa sistem ayarı. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #131E20; --surface: #1B2729; --ink: #F8F8F8; --ink-2: #D0D2D2; --muted: #A1A5A6; --line: #2A3638; --line-2: #424B4D;
  --teal: #37D1D9; --teal-ink: #76E7EA; --mint: #1F4A4D; --mint-2: #183538;
  --violet: #5D5DF7; --violet-ink: #A1AFFF; --violet-tint: rgba(93, 93, 247, 0.18); --violet-line: rgba(124, 133, 253, 0.45);
  --night: #0C1416; --night-2: #26333A; --night-ink: #EEF3F3; --night-muted: #A8B4B6;
  --amber: #FFB547; --amber-tint: rgba(255, 181, 71, 0.12); --amber-line: rgba(255, 181, 71, 0.35);
}

/* Seçili segment açık temada koyu zemin + beyaz yazı; koyu temada tersine döner. */
[data-theme="dark"] .sw button[aria-pressed="true"],
[data-theme="dark"] .seg button[aria-pressed="true"],
[data-theme="dark"] .tabs button[aria-selected="true"],
[data-theme="dark"] .totop,
[data-theme="dark"] #bulucu .fbar .seg button[aria-pressed="true"] { color: var(--bg); }

/* Diyagramlardaki sabit renkli SVG öğeleri */
[data-theme="dark"] svg [fill="#ffffff"],
[data-theme="dark"] .mk.m-ada { fill: var(--surface); }
[data-theme="dark"] svg [fill="#eeedff"] { fill: #262B5C; }
[data-theme="dark"] svg [fill="#c4ebe1"],
[data-theme="dark"] .mk.m-pil { fill: var(--mint); }
[data-theme="dark"] svg [fill="#15191d"] { fill: var(--night); }
[data-theme="dark"] .mk.m-sat { fill: var(--ink); }
[data-theme="dark"] svg [stroke="#cfd6d6"] { stroke: var(--line-2); }
[data-theme="dark"] svg [stroke="#15191d"] { stroke: var(--ink-2); }
/* Mor zeminli seçili bakış açısı beyaz yazıda kalır */
[data-theme="dark"] .sw.persp button[aria-pressed="true"] { color: #fff; }

/* Kaynak sayfa --mint'i koyu panellerde yazı rengi olarak da kullanıyor; koyu temada --mint zemine
   döndüğü için bu yazılar açık mint'te sabitlenir. */
[data-theme="dark"] .solbar .lbl,
[data-theme="dark"] .res .lbl,
[data-theme="dark"] .ibox .h5,
[data-theme="dark"] .path > div:last-child .d,
[data-theme="dark"] .step.top .lvl,
[data-theme="dark"] .top .lvl,
[data-theme="dark"] .cta h3 b { color: #C4EBE1; }
[data-theme="dark"] .chip.pil { color: #D4F9F9; }

/* İki temada da düşük kalan küçük metinler */
.cta .dl small { color: var(--night-muted); }
#bulucu .door .seg button:not([aria-pressed="true"]) .cnt { color: var(--ink-2); }
html #bulucu .door .seg button[aria-pressed="true"] .cnt { background: rgba(19, 30, 32, .28); }
[data-theme="light"] #spot .h5.hic { color: #08636A; }

/* Amber uyarı kutuları koyu kahverengi yazı kullanıyor */
[data-theme="dark"] .prob,
[data-theme="dark"] .banner.amb { color: #FFD28A; }

/* Diyagram metinleri renklerini satır içi style ile taşıyor; koyu temada !important ile eşlenir. */
[data-theme="dark"] svg [style*="fill:#3a4648"] { fill: var(--ink-2) !important; }
[data-theme="dark"] svg [style*="fill:#5f6b6e"] { fill: var(--muted) !important; }
[data-theme="dark"] svg [style*="fill:#4334e6"] { fill: var(--violet-ink) !important; }
[data-theme="dark"] svg [style*="fill:#0b7c83"] { fill: var(--teal-ink) !important; }
[data-theme="dark"] svg [style*="fill:#0b4f4f"] { fill: #D4F9F9 !important; }

/* ---------- Header düğmeleri ---------- */
.theme-btn {
  display: inline-grid; place-items: center; flex: none;
  width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--surface); color: var(--ink-2); cursor: pointer;
}
.theme-btn:hover { border-color: var(--teal); color: var(--teal-ink); }
.theme-btn svg { width: 15px; height: 15px; }
.theme-btn .sun,
[data-theme="dark"] .theme-btn .moon { display: none; }
[data-theme="dark"] .theme-btn .sun { display: block; }
.sw.flow button { white-space: nowrap; }
.pgx-pickhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.pgx-pickhead .sw.flow button { font-size: .8rem; padding: 6px 12px; }

/* ---------- Ortak parçalar (Çözümler, Loodos & AI) ---------- */
.pgx-strip { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 8px 0 28px; }
.pgx-strip > div { display: grid; gap: 2px; }
.pgx-strip .n { font-family: var(--f-display); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 500; line-height: 1; color: var(--ink); }
.pgx-strip .l { font-size: .86rem; color: var(--muted); }
.pgx-cap { margin-top: 20px; font-size: .86rem; color: var(--muted); max-width: 80ch; }
.pgx-cap b { color: var(--ink-2); }

.pgx-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font: 600 .78rem var(--f-body); line-height: 1.3;
  padding: 4px 10px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.pgx-tag.prod { background: var(--violet-tint); border-color: var(--violet-line); color: var(--violet-ink); }
button.pgx-tag { cursor: pointer; }
button.pgx-tag.prod:hover { background: var(--violet); border-color: var(--violet); color: #fff; }
.pgx-tag.ai { background: var(--mint-2); border-color: var(--teal); color: var(--teal-ink); }
[data-theme="light"] .pgx-tag.ai { color: #08636A; }
button.pgx-tag.ai:hover { background: var(--teal-ink); border-color: var(--teal-ink); color: var(--bg); }
.pgx-tag.plain { background: var(--bg); border-color: var(--line-2); color: var(--ink-2); }

/* ---------- Çözümler ---------- */
.pgx-tabs button { display: inline-flex; align-items: center; gap: 8px; }
.pgx-cnt { font: 500 .72rem var(--f-mono); padding: 1px 6px; border-radius: 999px; background: var(--line); color: var(--ink-2); }
.pgx-tabs button[aria-selected="true"] .pgx-cnt { background: rgba(255, 255, 255, .2); color: inherit; }
[data-theme="dark"] .pgx-tabs button[aria-selected="true"] .pgx-cnt { background: rgba(19, 30, 32, .15); }
.pgx-intro { font-size: 1.08rem; color: var(--ink-2); max-width: 70ch; margin-bottom: 20px; }
.pgx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.pgx-card {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 22px 22px 20px;
}
.pgx-sub { font-size: .76rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pgx-pilot { font-size: .68rem; letter-spacing: .04em; padding: 1px 7px; border-radius: 999px; background: var(--amber-tint); border: 1px solid var(--amber-line); color: var(--amber); }
[data-theme="light"] .pgx-pilot { color: #7A4600; }
.pgx-card h3 { font-family: var(--f-display); font-size: 1.45rem; font-weight: 500; line-height: 1.15; margin-top: 4px; color: var(--ink); }
.pgx-card h3 span { color: var(--muted); font-weight: 400; }
.pgx-d { color: var(--ink-2); font-size: .95rem; }
.pgx-m { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.pgx-m div { display: grid; gap: 2px; max-width: 22ch; }
.pgx-m dt { font-family: var(--f-display); font-size: 1.5rem; font-weight: 500; line-height: 1.1; color: var(--teal-ink); }
.pgx-m dd { margin: 0; font-size: .8rem; color: var(--muted); }
.pgx-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; }

/* Kartın tamamı tıklanır: başlıktaki düğmenin ::after'ı kartı kaplar. */
.pgx-card { position: relative; transition: border-color .15s ease, transform .15s ease; }
.pgx-open { all: unset; cursor: pointer; }
.pgx-open::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pgx-open:focus-visible { outline: none; }
.pgx-card:has(.pgx-open:focus-visible) { outline: 2px solid var(--violet); outline-offset: 3px; }
.pgx-card:hover { border-color: var(--teal); }
/* Sektör rengi: kartın üstünde şerit, sekmede nokta (yalnız süs; metin rengi değil) */
.pgx-card { border-top: 4px solid var(--sec, var(--line)); }
.pgx-card:hover { border-top-color: var(--sec, var(--teal)); }
.pgx-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--sec); flex: none; }
.pgx-tabs button[aria-selected="true"] .pgx-dot { box-shadow: 0 0 0 2px var(--bg); }
/* Detay ikonu kartın sağ alt köşesine sabittir; etiket satırı ona yer bırakır. */
.pgx-card .pgx-tags { padding-right: 48px; }
.pgx-more {
  position: absolute; right: 18px; bottom: 18px;
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 999px; border: 1px solid var(--line-2); color: var(--teal-ink);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
[data-theme="light"] .pgx-more { color: #08636A; }
.pgx-more svg { width: 16px; height: 16px; }
.pgx-card:hover .pgx-more,
.pgx-card:has(.pgx-open:focus-visible) .pgx-more { background: var(--teal-ink); border-color: var(--teal-ink); color: var(--surface); transform: translateX(2px); }
[data-theme="light"] .pgx-card:hover .pgx-more,
[data-theme="light"] .pgx-card:has(.pgx-open:focus-visible) .pgx-more { background: #08636A; border-color: #08636A; }
@media (prefers-reduced-motion: reduce) { .pgx-card:hover .pgx-more { transform: none; } }

/* ---------- Yan panel (proje detayı) ---------- */
html.pgx-lock { overflow: hidden; }
dialog.pgx-sheet {
  position: fixed; inset: 0 0 0 auto; margin: 0;
  width: min(580px, 100%); max-width: 100%; height: 100dvh; max-height: none;
  padding: 0; border: 0; border-left: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
  box-shadow: -24px 0 60px -30px rgba(12, 20, 22, .45);
}
dialog.pgx-sheet[open] { display: flex; flex-direction: column; animation: pgx-sheet-in .24s ease-out; }
@keyframes pgx-sheet-in { from { transform: translateX(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog.pgx-sheet[open] { animation: none; } }
dialog.pgx-sheet::backdrop { background: rgba(12, 20, 22, .55); }
.pgx-sh-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--line); }
.pgx-sh-close {
  flex: none; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line-2);
  background: transparent; color: var(--ink); font: 400 1.4rem/1 var(--f-body); cursor: pointer;
}
.pgx-sh-close:hover { border-color: var(--teal); color: var(--teal-ink); }
.pgx-sh-body { flex: 1; overflow-y: auto; padding: 24px 24px 40px; display: grid; align-content: start; gap: 22px; }
.pgx-sh-body h2 { font-family: var(--f-display); font-size: clamp(1.7rem, 4vw, 2.2rem); font-weight: 500; line-height: 1.1; margin: 0; }
.pgx-sh-body h2 span { color: var(--muted); font-weight: 400; }
.pgx-sh-when { font: 600 .78rem var(--f-body); color: var(--teal-ink); margin-top: -12px; }
[data-theme="light"] .pgx-sh-when { color: #08636A; }
.pgx-sh-lead { font-size: 1.05rem; color: var(--ink-2); }
.pgx-sh-blk h3, .pgx-sh-prod h3 { font: 600 .76rem var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.pgx-sh-blk p { color: var(--ink-2); }
.pgx-sh-blk .pgx-m { border-top: 0; padding-top: 0; margin: 0; }
.pgx-sh-prod { padding: 18px 20px; border-radius: var(--r-m); background: var(--violet-tint); border: 1px solid var(--violet-line); display: grid; gap: 10px; }
.pgx-sh-prod h3 { color: var(--violet-ink); margin: 0; text-transform: none; letter-spacing: 0; font: 600 1.05rem var(--f-display); }
.pgx-sh-prod ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--ink-2); }
.pgx-sh-prod p { color: var(--ink-2); }
.pgx-sh-prod .h5 { margin: 4px 0 0; }
.pgx-sh-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pgx-sh-link { justify-self: start; margin-top: 4px; padding: 0; border: 0; background: none; font: 600 .86rem var(--f-body); color: var(--violet-ink); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pgx-sh-blk .pgx-sh-link { color: var(--teal-ink); }
[data-theme="light"] .pgx-sh-blk .pgx-sh-link { color: #08636A; }
.pgx-sh-note { margin-top: 8px; font-size: .9rem; color: var(--muted); }
.pgx-sh-img { margin: 0; padding: 18px; border-radius: var(--r-m); background: var(--bg); border: 1px solid var(--line); }
.pgx-sh-img img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: contain; }
.pgx-sh-feats { margin: 0; display: grid; gap: 12px; }
.pgx-sh-feats div { padding-left: 14px; border-left: 3px solid var(--teal); }
.pgx-sh-feats dt { font-weight: 600; color: var(--ink); }
.pgx-sh-feats dd { margin: 2px 0 0; color: var(--ink-2); font-size: .94rem; }
.pgx-sh-tech { font: 500 .86rem var(--f-mono); color: var(--ink-2); line-height: 1.6; }
.pgx-fit { margin-top: 24px; display: grid; gap: 10px; }
.pgx-fit > div { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Loodos & AI ---------- */
.pgx-blk + .pgx-blk { margin-top: 48px; }
.pgx-agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.pgx-agent { display: flex; flex-direction: column; gap: 10px; background: var(--night); color: var(--night-ink); border-radius: var(--r-m); padding: 22px; }
.pgx-agent header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; }
.pgx-st { flex: none; }
.pgx-agent h4 { font-family: var(--f-display); font-size: 1.3rem; font-weight: 500; margin: 0; color: #fff; }
.pgx-st { font: 600 .7rem var(--f-body); letter-spacing: .05em; padding: 2px 8px; border-radius: 999px; }
.pgx-st.live { background: rgba(55, 209, 217, .16); color: #76E7EA; }
.pgx-st.platform { background: rgba(124, 133, 253, .22); color: #C5D0FF; }
.pgx-tagline { font-family: var(--f-display); font-size: 1.05rem; color: #AEF2F3; }
.pgx-agent ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: .9rem; color: var(--night-ink); }
.pgx-proof { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--night-2); font-size: .84rem; color: var(--night-muted); }
.pgx-n { display: block; font-family: var(--f-display); font-size: 1.25rem; font-weight: 500; color: var(--teal-ink); }
.pgx-nl { font-size: .8rem; color: var(--muted); }
.pgx-rnd { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 16px; }
.pgx-rnd-i { display: grid; align-content: start; gap: 6px; padding-top: 14px; border-top: 3px solid var(--teal); }
.pgx-big { font-family: var(--f-display); font-size: 1.9rem; font-weight: 500; line-height: 1; color: var(--ink); }
.pgx-rnd-i h4 { font-size: 1rem; font-weight: 600; margin: 4px 0 0; color: var(--ink); }
.pgx-rnd-i p { font-size: .88rem; color: var(--ink-2); }
.pgx-cred { margin: 28px 0 0; padding: 18px 22px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); }
.pgx-deliv { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.pgx-deliv li { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pgx-deliv b { color: var(--ink); font-weight: 600; }
.pgx-deliv span { color: var(--ink-2); }
@media (max-width: 640px) { .pgx-deliv li { grid-template-columns: 1fr; } }

/* ---------- Ürün yakından bakış (extra-products.js) ----------
   Figürler anlatır, metin etiketler: Şekil 1 mekanizma + adımlayıcı, Şekil 2 iki örnek, Şekil 3 başlarken. */
.pgx-deep { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--line); display: grid; gap: 14px; min-width: 0; }
.pgx-deep > .eyebrow { margin: 0; }
.pgx-deep-h { font-family: var(--f-display); font-size: clamp(1.6rem, 3.2vw, 2.2rem); font-weight: 500; line-height: 1.12; margin: 0; color: var(--ink); }
.pgx-deep-p { color: var(--ink-2); max-width: 64ch; font-size: 1.05rem; }
.nx-h { font: 500 1.25rem var(--f-display); color: var(--ink); margin: 26px 0 0; max-width: 40ch; }
.nx-fig { margin: 0; display: grid; gap: 12px; min-width: 0; }
.nx-fig figcaption { font-size: .86rem; color: var(--muted); max-width: 70ch; }

/* Şekil 1 */
.nx-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--bg);
  background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 20px 20px; }
.nx-flow { display: block; width: 100%; min-width: 760px; height: auto; }
.nx-node rect { fill: var(--surface); stroke: var(--line-2); stroke-width: 1.25; }
.nx-node.data rect { stroke-dasharray: 0; }
.nx-node.eng rect { fill: var(--violet-tint); stroke: var(--violet-line); }
.nx-node.core rect { fill: var(--violet); stroke: var(--violet); }
.nx-node.team rect { stroke: var(--teal); stroke-width: 1.5; }
.nx-t { font: 600 15px var(--f-display); fill: var(--ink); }
.nx-s { font: 500 12.5px var(--f-body); fill: var(--ink-2); }
.nx-node.core .nx-t, .nx-node.core .nx-s { fill: #fff; }
.nx-edge { fill: none; stroke: var(--muted); stroke-width: 1.6; }
.nx-edge.dash { stroke-dasharray: 5 5; }
.nx-ah { fill: var(--muted); }
.nx-e { font: 600 12.5px var(--f-body); fill: var(--ink-2); paint-order: stroke; stroke: var(--bg); stroke-width: 5px; }
.nx-clock rect { fill: var(--surface); stroke: var(--line-2); stroke-dasharray: 4 3; }
.nx-clock text { font: 500 12.5px var(--f-mono); fill: var(--ink-2); }
.nx-co circle { fill: var(--ink); }
.nx-co text { font: 600 12px var(--f-body); fill: var(--bg); }
.nx-flow [data-s] { transition: opacity .25s ease; }
.nx-fig-flow:not([data-step="0"]) .nx-flow [data-s]:not(.on) { opacity: .18; }
.nx-fig-flow .nx-flow .nx-edge.on { stroke: var(--teal); stroke-width: 3; }
.nx-fig-flow .nx-flow .nx-node.on rect { stroke: var(--teal); stroke-width: 3; }
@media (prefers-reduced-motion: reduce) { .nx-flow [data-s] { transition: none; } }

.nx-rule { display: grid; gap: 2px; padding: 10px 14px; border-left: 3px solid var(--teal); background: var(--bg); font: 500 1.02rem var(--f-display); color: var(--ink); }
.nx-rule span { font: 600 .72rem var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.nx-stepper { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nx-step, .nx-nav { font: 600 .84rem var(--f-body); padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.nx-step i { font: 500 .78rem var(--f-mono); font-style: normal; color: var(--muted); }
.nx-step[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.nx-step[aria-pressed="true"] i { color: inherit; }
.nx-step:hover, .nx-nav:hover { border-color: var(--teal); }
.nx-step-out { min-height: 3.2em; }
.nx-step-out p { margin: 0; color: var(--ink-2); max-width: 70ch; }
.nx-step-out .nx-step-txt { display: none; }
.nx-step-out .nx-step-txt.on { display: block; }
.nx-fig-flow:not([data-step="0"]) .nx-hint { display: none; }
.nx-hint { color: var(--muted) !important; }
.nx-steplist { display: grid; gap: 4px; color: var(--ink-2); }

/* Şekil 2 */
.nx-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.nx-case { display: grid; gap: 10px; align-content: start; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); min-width: 0; }
.nx-case header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.nx-case h5 { font: 600 1.08rem var(--f-display); margin: 0; color: var(--ink); }
.nx-chip { font: 600 .72rem var(--f-body); letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; background: var(--amber-tint); border: 1px solid var(--amber-line); color: var(--amber); }
[data-theme="light"] .nx-chip { color: #7A4600; }
.nx-data { margin-left: auto; font-size: .78rem; color: var(--muted); }
.nx-mini { width: 100%; height: auto; display: block; }
.nx-axis { fill: none; stroke: var(--line-2); stroke-width: 1; }
.nx-tick { font: 500 11.5px var(--f-body); fill: var(--muted); }
.nx-zone { fill: var(--teal); opacity: .1; }
.nx-zone-t { font: 600 11.5px var(--f-body); fill: var(--teal-ink); }
[data-theme="light"] .nx-zone-t { fill: #08636A; }
.nx-thr { fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 5 4; }
.nx-thr-t { font: 500 11.5px var(--f-body); fill: var(--ink-2); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.nx-pt { fill: var(--muted); opacity: .55; }
.nx-hit { fill: var(--amber); }
.nx-hit-halo { fill: none; stroke: var(--amber); stroke-width: 1.5; }
.nx-hit-t { font: 700 12.5px var(--f-body); fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; }
.nx-hit-s { font: 500 11.5px var(--f-body); fill: var(--ink-2); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; }
.nx-norm-n { font: 500 17px var(--f-display); fill: var(--ink); }
.nx-norm-t { font: 500 11.5px var(--f-body); fill: var(--muted); }
.nx-closed { fill: url(#nxHatch); stroke: var(--amber-line); stroke-width: 1; }
.nx-hatch-l { fill: var(--amber); opacity: .55; }
.nx-tick.is-key { fill: var(--ink); font-weight: 700; }
.nx-band { fill: var(--line); }
.nx-band-t { font: 500 11.5px var(--f-body); fill: var(--muted); }
.nx-how summary { cursor: pointer; font: 600 .86rem var(--f-body); color: var(--violet-ink); }
.nx-stages { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.nx-stages li { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--r-s); background: var(--bg); }
.nx-stages em { font: 600 .7rem var(--f-body); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.nx-stages span { font-size: .88rem; color: var(--ink-2); }
.nx-stages li.find { background: var(--mint-2); }
.nx-stages li.find span { color: var(--ink); font-weight: 500; }

/* Şekil 3 */
.nx-rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 14px; }
.nx-rail li { display: grid; gap: 8px; align-content: start; padding-top: 12px; border-top: 3px solid var(--violet-line); }
.nx-rail li:first-child { border-top-color: var(--teal); }
.nx-rail b { font: 600 1rem var(--f-display); color: var(--ink); }
.nx-rail span { font-size: .84rem; color: var(--muted); }
.nx-rail div { display: flex; flex-wrap: wrap; gap: 4px; }
.nx-waffle { width: 100%; max-width: 220px; height: auto; }
.nx-waffle rect { fill: var(--teal); }
.nx-tag { font: 600 .78rem var(--f-body); padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink-2); }
.nx-note { font-size: .86rem; color: var(--muted); }

/* Kapanış */
.nx-close { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; margin-top: 18px; padding: 18px; border-radius: var(--r-m); background: var(--mint-2); }
.nx-close h4 { font: 600 1rem var(--f-display); margin: 0 0 10px; color: var(--ink); }
.nx-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.nx-why { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.nx-why dt { font-weight: 600; color: var(--ink); }
.nx-why dd { margin: 2px 0 0; font-size: .86rem; color: var(--ink-2); }

/* Çözüm PDF bağlantıları */
.pgx-book { margin: 0 0 22px; }
.pgx-sh-pdf { margin-top: -6px; }
.nx-lead { fill: none; stroke: var(--teal); stroke-width: 1.25; }

/* ---------- 3 dakikada özet (data-pv="exec"): ayrıntılar diğer görünümlerde kalır ---------- */
[data-pv="exec"] .tk { display: none; }
[data-pv="exec"] #oTable th:nth-child(3), [data-pv="exec"] #oTable td:nth-child(3), [data-pv="exec"] #oTable td > div { display: none; }
#cShort { display: none; }
[data-pv="exec"] #cShort { display: grid; }
[data-pv="exec"] #cTable, [data-pv="exec"] #cLegend, [data-pv="exec"] #rekabet figcaption { display: none; }
.spot.solo { grid-template-columns: minmax(0, 1fr); }
[data-pv="exec"] #ai .pgx-blk:not(:first-child), [data-pv="exec"] #ai .pgx-cap,
[data-pv="exec"] #ai .pgx-agent ul, [data-pv="exec"] #ai .pgx-proof { display: none; }
.pgx-brief .pgx-d, .pgx-brief .pgx-m, .pgx-brief .pgx-tags { display: none; }
.pgx-more-all { margin-top: 20px; }
.pgx-brief .pgx-card h3 { padding-right: 40px; }
.pv .pvt { font-size: .78rem; font-weight: 600; color: var(--ink-2); margin-top: 2px; }
[data-pv="exec"] .sw.flow { display: none; }

/* ---------- TL;DR: hızlandırılmış tur (extra-tour.js) ---------- */
.pick3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .pick3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pick3 { grid-template-columns: minmax(0, 1fr); } }
[data-pv="tldr"] .sw.flow, [data-pv="tldr"] .tk { display: none; }
.pgx-tr-secs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.pgx-tr-secs button { display: inline-flex; align-items: center; gap: 8px; font: 600 .84rem var(--f-body); padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.pgx-tr-secs button:hover { border-color: var(--violet); }
.pgx-tr-secs button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pgx-tr-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.pgx-tr-q { width: 300px; max-width: 100%; }
.pgx-tr-n { font: 600 .86rem var(--f-body); color: var(--muted); }
.pgx-tr-card { padding-bottom: 54px; }
.pgx-tr-meta { font-size: .82rem; color: var(--muted); }
.pgx-tr-sec { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--ink-2); margin-right: 4px; }
.pgx-tr-badge { position: absolute; right: 16px; bottom: 16px; font: 700 .74rem var(--f-body); letter-spacing: .04em; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); background: var(--surface); }
.pgx-tr-badge.on { background: var(--violet); border-color: var(--violet); color: #fff; }
.pgx-tr-none { display: grid; justify-items: start; gap: 12px; padding: 24px; border: 1px dashed var(--line-2); border-radius: var(--r-m); color: var(--ink-2); }

/* görüntüleyici: alttan açılan büyük panel; slaytlar temadan bağımsız açık zeminli */
dialog.pgx-tour {
  position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: 100%; height: min(94dvh, 980px); max-height: none;
  padding: 0; border: 0; border-radius: 20px 20px 0 0; background: var(--surface); color: var(--ink);
  box-shadow: 0 -24px 60px -30px rgba(12, 20, 22, .5);
}
dialog.pgx-tour[open] { display: flex; flex-direction: column; animation: pgx-tour-in .26s ease-out; }
@keyframes pgx-tour-in { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog.pgx-tour[open] { animation: none; } }
dialog.pgx-tour::backdrop { background: rgba(12, 20, 22, .6); }
.pgx-tr-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--line); }
.pgx-tr-head h2 { font: 500 clamp(1.2rem, 2.4vw, 1.6rem)/1.15 var(--f-display); margin: 2px 0 0; }
.pgx-tr-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.pgx-tr-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 8px; background: var(--bg); }
.pgx-tr-view { flex: none; overflow: hidden; border-radius: 6px; box-shadow: 0 0 0 1px var(--line), 0 24px 50px -30px rgba(12, 20, 22, .45); touch-action: pan-y; }
.pgx-tr-view > .dk { width: 960px; height: 540px; transform-origin: 0 0; }
.pgx-tr-arrow { flex: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: 400 1.2rem/1 var(--f-body); cursor: pointer; }
.pgx-tr-arrow:hover:not(:disabled) { border-color: var(--violet); color: var(--violet-ink); }
.pgx-tr-arrow:disabled { opacity: .35; cursor: default; }
.pgx-tr-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; padding: 12px 24px 16px; border-top: 1px solid var(--line); }
.pgx-tr-dots { display: flex; flex-wrap: wrap; gap: 6px; }
.pgx-tr-dots button { width: 10px; height: 10px; padding: 0; border-radius: 999px; border: 0; background: var(--line-2); cursor: pointer; }
.pgx-tr-dots button[aria-current="true"] { width: 26px; background: var(--violet); }
.pgx-tr-pos { font: 600 .86rem var(--f-mono); color: var(--ink-2); }
.pgx-tr-hint { font-size: .8rem; color: var(--muted); }
@media (max-width: 640px) {
  dialog.pgx-tour { height: 100dvh; border-radius: 0; }
  .pgx-tr-head { flex-wrap: wrap; padding: 12px 16px; }
  .pgx-tr-stage { gap: 0; flex-wrap: wrap; align-content: center; }
  .pgx-tr-arrow { position: absolute; bottom: 70px; }
  .pgx-tr-arrow[data-tp] { left: 16px; } .pgx-tr-arrow[data-tn] { right: 16px; }
  .pgx-tr-hint { display: none; }
}
/* tür sekmeleri birer filtre düğmesi (aria-pressed); görünüm Çözümler sekmeleriyle aynı */
.pgx-tr-types button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
[data-theme="dark"] .pgx-tr-types button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pgx-tr-types button[aria-pressed="true"] .pgx-cnt, .pgx-tr-secs button[aria-pressed="true"] .pgx-cnt { background: rgba(255, 255, 255, .2); color: inherit; }
[data-theme="dark"] .pgx-tr-types button[aria-pressed="true"] .pgx-cnt, [data-theme="dark"] .pgx-tr-secs button[aria-pressed="true"] .pgx-cnt { background: rgba(19, 30, 32, .15); }
/* kart üstündeki ok ikonu ve "Göz at" / "PDF" rozeti yalnız görseldir: tıklama alttaki kart düğmesine geçer */
.pgx-more, .pgx-tr-badge { pointer-events: none; }
.pgx-tr-card:hover .pgx-tr-badge:not(.on) { border-color: var(--violet); color: var(--violet-ink); }
/* TL;DR: bölüm numarası, adı ve okuma süresi satırı yok; doğrudan başlıkla girilir */
[data-pv="tldr"] #tur .s-head .eyebrow, [data-pv="tldr"] #sonraki .s-head .eyebrow { display: none; }
[data-pv="tldr"] #sonraki .s-head:not(:has(h2)) { display: none; }