/* ============================================================
   SAYRU — sections.css  (hero, NOC composition, services, why, about timeline)
   ============================================================ */

/* ---------------- HERO ---------------- */
.hero { position: relative; overflow: hidden; background: radial-gradient(120% 120% at 80% 0%, #0a2f70 0%, var(--navy-deep) 46%, var(--navy-900) 100%); }
.hero__grid { opacity: .9; }
.hero__bgimg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; animation: heroBgIn 1s var(--ease) both, heroKen 12s ease-out both; }
@keyframes heroBgIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes heroKen { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero__bgimg-ov { position: absolute; inset: 0; }
.hero__glow { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; opacity: var(--glow); }
.hero__glow--1 { width: 460px; height: 460px; top: -120px; right: 6%; background: radial-gradient(circle, rgba(24,197,244,.34), transparent 70%); }
.hero__glow--2 { width: 380px; height: 380px; bottom: -160px; left: -60px; background: radial-gradient(circle, rgba(14,77,164,.4), transparent 70%); }
.hero__in { position: relative; display: grid; grid-template-columns: 1fr 1.04fr; gap: 56px; align-items: center; padding: clamp(52px, 6.5vw, 96px) 32px clamp(60px, 7.5vw, 104px); }
.hero__content { position: relative; z-index: 3; }
.hero__slides { animation: heroIn .6s var(--ease) both; }
@keyframes heroIn { from { transform: translateY(14px); } to { transform: none; } }
.hero__kick { margin-bottom: 22px; }
.hero__title { color: #fff; font-size: var(--t-hero); font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; text-wrap: balance; }
.hero__title br { display: block; }
.hero__body { margin-top: 24px; color: #c4d6ee; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; max-width: 500px; }
.hero__sub { margin-top: 16px; color: #8fa8c8; font-size: 15.5px; line-height: 1.65; max-width: 520px; }
.hero__actions { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.hero__controls { display: flex; align-items: center; justify-content: space-between; margin-top: 34px; gap: 20px; flex-wrap: wrap; }
.hero__dots { display: flex; gap: 10px; }
.hero__dot { position: relative; width: 44px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.16); border: 0; padding: 0; overflow: hidden; }
.hero__dot.on { background: rgba(255,255,255,.16); }
.hero__dot-fill { position: absolute; inset: 0; width: 100%; background: var(--cyan); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 10px rgba(24,197,244,.6); }
.hero__dot.on .hero__dot-fill { animation-name: dotfill; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes dotfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero__arrows { display: flex; align-items: center; gap: 14px; }
.hero__arrows button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(91,216,248,.3); background: rgba(255,255,255,.04); color: #cfe6f7; display: grid; place-items: center; transition: all .25s; }
.hero__arrows button:first-child svg { transform: rotate(90deg); }
.hero__arrows button:last-child svg { transform: rotate(-90deg); }
.hero__arrows button:hover { border-color: var(--cyan); background: rgba(24,197,244,.12); color: #fff; }
.hero__count { color: #7f99ba; font-size: 13px; letter-spacing: .08em; }
.hero__visual { position: relative; z-index: 2; animation: nocFloat 7s ease-in-out infinite; }
/* no right panel: single column, hide visual — text alignment is controlled by data-heroalign */
.hero[data-herovis="none"] .hero__in { grid-template-columns: 1fr; }
.hero[data-herovis="none"] .hero__visual { display: none; }
@keyframes nocFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* hero brand-ring echo (the eye) */
.hero__rings { position: absolute; left: -180px; top: 50%; transform: translateY(-50%); width: 680px; height: 680px; pointer-events: none; opacity: calc(.5 * var(--glow)); }
.hero__rings span { position: absolute; inset: 0; margin: auto; border-radius: 50%; border: 1px solid rgba(91,216,248,.16); }
.hero__rings span:nth-child(1) { width: 100%; height: 100%; }
.hero__rings span:nth-child(2) { width: 72%; height: 72%; border-color: rgba(91,216,248,.12); }
.hero__rings span:nth-child(3) { width: 46%; height: 46%; border-color: rgba(91,216,248,.1); }
.hero__rings span:nth-child(4) { width: 22%; height: 22%; border-color: rgba(91,216,248,.18); animation: ringPulse 4s var(--ease) infinite; }
@keyframes ringPulse { 0%,100% { opacity: .4; } 50% { opacity: 1; } }

/* hero scan sheen */
.hero__scan { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 40%, rgba(91,216,248,.05) 50%, transparent 60%); background-size: 220% 100%; animation: scanMove 9s linear infinite; }
@keyframes scanMove { from { background-position: 130% 0; } to { background-position: -30% 0; } }

/* hero open-source stack strip */
.hero__stack { display: flex; align-items: center; gap: 18px; margin-top: 30px; flex-wrap: wrap; }
.hero__stack-l { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #6f89aa; }
.hero__stack-chips { display: flex; gap: 9px; flex-wrap: wrap; }
.hero__chip { font-size: 12px; letter-spacing: .04em; color: var(--cyan-soft); padding: 6px 13px; border-radius: 100px; border: 1px solid rgba(91,216,248,.22); background: rgba(91,216,248,.05); transition: all .3s var(--ease); }
.hero__chip:hover { border-color: var(--cyan); background: rgba(91,216,248,.12); transform: translateY(-2px); }
html.hero-light .hero__stack-l { color: var(--ink-faint); }
html.hero-light .hero__chip { color: var(--blue); border-color: rgba(14,77,164,.22); background: rgba(14,77,164,.05); }
html.hero-light .hero__rings span { border-color: rgba(14,77,164,.14); }

/* ---------------- NOC composition ---------------- */
.noc { background: linear-gradient(160deg, rgba(13,40,90,.96), rgba(5,21,47,.98)); border: 1px solid rgba(91,216,248,.18); border-radius: var(--r-lg); box-shadow: 0 40px 90px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05); overflow: hidden; position: relative; z-index: 2; animation: nocIn .9s var(--ease) both .1s; }
@keyframes nocIn { from { transform: translateY(22px) scale(.985); } to { transform: none; } }
.noc__bar { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; border-bottom: 1px solid rgba(91,216,248,.12); background: rgba(3,13,31,.5); }
.noc__tabs { display: flex; align-items: center; gap: 7px; }
.noc__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); }
.noc__dot:nth-child(1) { background: #ff5f57; opacity: .8; } .noc__dot:nth-child(2) { background: #febc2e; opacity: .8; } .noc__dot:nth-child(3) { background: #28c840; opacity: .8; }
.noc__title { margin-left: 12px; font-size: 11.5px; color: #6f89aa; letter-spacing: .02em; }
.noc__body { display: grid; grid-template-columns: 1.7fr 1fr; gap: 14px; padding: 18px; }
.noc__label { font-size: 10px; letter-spacing: .14em; color: #6f89aa; text-transform: uppercase; }
.noc__main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.noc__main-head { display: flex; align-items: flex-start; justify-content: space-between; }
.noc__big { font-size: 30px; font-weight: 600; color: #fff; line-height: 1; margin-top: 6px; }
.noc__big span { font-size: 14px; color: var(--cyan-soft); margin-left: 5px; }
.noc__legend { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.noc__legend span { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: #8ba2c0; }
.lg { width: 14px; height: 3px; border-radius: 3px; } .lg--cy { background: var(--cyan); } .lg--bl { background: var(--blue); }
.noc__chart { position: relative; height: 158px; border-radius: var(--r-sm); background: rgba(3,13,31,.45); border: 1px solid rgba(91,216,248,.1); overflow: hidden; }
.noc__chartgrid { mask-image: none; -webkit-mask-image: none; background-size: 38px 32px; opacity: .7; }
.noc__svg { position: absolute; inset: 12px 12px 8px; width: calc(100% - 24px); height: calc(100% - 20px); }
.noc__line { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw 2.6s var(--ease) forwards .4s; filter: drop-shadow(0 0 6px rgba(24,197,244,.6)); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.noc__cursor { position: absolute; top: 12px; bottom: 8px; width: 1px; left: 62%; background: linear-gradient(rgba(91,216,248,0), rgba(91,216,248,.5), rgba(91,216,248,0)); animation: sweep 5s var(--ease) infinite; }
@keyframes sweep { 0%,100% { left: 18%; opacity: 0; } 10% { opacity: 1; } 50% { left: 88%; opacity: 1; } 60% { opacity: 0; } }
.noc__topo-wrap { background: rgba(3,13,31,.45); border: 1px solid rgba(91,216,248,.1); border-radius: var(--r-sm); padding: 11px 13px; }
.topo { width: 100%; height: auto; margin-top: 6px; }
.topo__dot { fill: var(--cyan); } .topo__halo { fill: rgba(24,197,244,.18); animation: halo 2.4s ease-in-out infinite; }
.topo__n--warn .topo__dot { fill: #febc2e; } .topo__n--warn .topo__halo { fill: rgba(254,188,46,.2); }
@keyframes halo { 0%,100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.5); opacity: 0; } }
.topo__n { transform-box: fill-box; transform-origin: center; }
.topo__halo { transform-box: view-box; }

.noc__side { display: flex; flex-direction: column; gap: 11px; }
.noc__stat { background: rgba(3,13,31,.45); border: 1px solid rgba(91,216,248,.1); border-radius: var(--r-sm); padding: 12px 13px; }
.noc__stat-top { display: flex; align-items: center; justify-content: space-between; }
.noc__delta { font-size: 9px; } .noc__delta.up { color: #28c840; } .noc__delta.dn { color: #28c840; }
.noc__stat-v { font-size: 23px; color: #fff; font-weight: 600; margin: 5px 0 6px; } .noc__stat-v span { font-size: 12px; color: var(--cyan-soft); margin-left: 3px; }
.spark { display: block; width: 100%; }
.noc__radar { display: flex; align-items: center; gap: 12px; background: rgba(3,13,31,.45); border: 1px solid rgba(91,216,248,.1); border-radius: var(--r-sm); padding: 10px 13px; }
.noc__radar-v { color: var(--cyan-soft); font-size: 13px; font-weight: 600; }
.noc__alerts { display: flex; align-items: center; justify-content: space-between; background: rgba(40,200,64,.06); border: 1px solid rgba(40,200,64,.2); border-radius: var(--r-sm); padding: 11px 13px; }
.noc__alerts-v { font-size: 12px; color: #8ba2c0; } .noc__alerts-v b { color: #28c840; font-size: 16px; margin-right: 4px; }

/* ---------------- Hero service constellation ---------------- */
.hconst { position: relative; aspect-ratio: 1 / 0.92; width: 100%; border: 1px solid rgba(91,216,248,.16); border-radius: var(--r-lg); background: radial-gradient(120% 120% at 50% 45%, rgba(13,40,90,.55), rgba(5,21,47,.85) 70%); overflow: hidden; animation: nocIn .9s var(--ease) both .1s; }
.hconst__grid { opacity: .5; mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 35%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 35%, transparent 80%); }
.hconst__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.hconst__line { stroke: rgba(91,216,248,.32); stroke-width: .35; stroke-dasharray: 2 2.5; animation: constDash 3s linear infinite; }
@keyframes constDash { to { stroke-dashoffset: -18; } }
.hconst__core { position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; }
.hconst__ring { position: absolute; inset: 0; margin: auto; border-radius: 50%; border: 1px solid rgba(91,216,248,.4); }
.hconst__ring.r1 { inset: -8%; } .hconst__ring.r2 { inset: 14%; opacity: .6; }
.hconst__sweep { position: absolute; inset: -8%; border-radius: 50%; background: conic-gradient(from 0deg, rgba(24,197,244,0), rgba(24,197,244,.4) 70deg, rgba(24,197,244,0) 120deg); -webkit-mask: radial-gradient(circle, transparent 52%, #000 53%); mask: radial-gradient(circle, transparent 52%, #000 53%); animation: spin 5s linear infinite; }
.hconst__emblem { position: relative; z-index: 2; width: 64%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 35% 30%, #1a63b8, #0a2f70 70%); box-shadow: 0 0 30px rgba(24,197,244,.5), inset 0 0 12px rgba(91,216,248,.4); border: 1px solid rgba(91,216,248,.5); }
.hconst__node { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px; width: 150px; text-align: center; animation: nodeFloat 5s ease-in-out infinite; }
@keyframes nodeFloat { 0%,100% { margin-top: 0; } 50% { margin-top: -6px; } }
.hconst__node-ic { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; color: var(--cyan-soft); background: rgba(8,25,56,.85); border: 1px solid rgba(91,216,248,.45); box-shadow: 0 0 16px rgba(24,197,244,.3); }
.hconst__node-body { display: flex; flex-direction: column; gap: 3px; }
.hconst__node-name { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .08em; color: #fff; }
.hconst__node-desc { font-size: 11px; line-height: 1.4; color: #9fb8d6; max-width: 150px; }
@media (max-width: 600px) {
  .hconst__node { width: 110px; }
  .hconst__node-desc { display: none; }
  .hconst__node-ic { width: 42px; height: 42px; }
}

/* radar eye */
.radar-eye { position: relative; display: grid; place-items: center; flex: none; }
.radar-eye__ring { position: absolute; border-radius: 50%; border: 1px solid rgba(91,216,248,.35); }
.radar-eye__ring.r1 { inset: 0; } .radar-eye__ring.r2 { inset: 22%; opacity: .7; } .radar-eye__ring.r3 { inset: 42%; opacity: .5; }
.radar-eye__sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(24,197,244,0) 0deg, rgba(24,197,244,.45) 50deg, rgba(24,197,244,0) 90deg); animation: spin 3.4s linear infinite; mask: radial-gradient(circle, transparent 8%, #000 9%); -webkit-mask: radial-gradient(circle, transparent 8%, #000 9%); }
@keyframes spin { to { transform: rotate(360deg); } }
.radar-eye__core { width: 12%; height: 12%; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); position: relative; z-index: 2; }

/* ---------------- SERVICES ---------------- */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.svc-card { position: relative; display: flex; flex-direction: column; padding: 30px 26px 28px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; }
.svc-card:hover { transform: translateY(-7px); border-color: rgba(24,197,244,.55); box-shadow: var(--sh-lg); }
.svc-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.svc-card__ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; color: var(--blue); background: linear-gradient(135deg, rgba(24,197,244,.14), rgba(14,77,164,.09)); border: 1px solid var(--line); transition: all .4s var(--ease); }
.svc-card:hover .svc-card__ic { color: #fff; background: linear-gradient(135deg, var(--cyan), var(--blue)); box-shadow: var(--glow-soft); transform: scale(1.05) rotate(-3deg); }
.svc-card__num { font-size: 13px; color: var(--ink-faint); letter-spacing: .1em; }
.svc-card__name { font-size: 23px; color: var(--navy); }
.svc-card__meta { display: flex; align-items: center; gap: 9px; margin: 9px 0 14px; flex-wrap: wrap; }
.svc-card__area { font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.svc-card__tool { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); background: rgba(14,77,164,.08); padding: 3px 9px; border-radius: 100px; }
.svc-card__tag { font-size: 15px; font-weight: 600; color: var(--navy); line-height: 1.45; margin-bottom: 10px; }
.svc-card__desc { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; flex: 1; }
.svc-card__cta { display: inline-flex; align-items: center; gap: 7px; margin-top: 22px; font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--blue); }
.svc-card__cta svg { transition: transform .3s; }
.svc-card:hover .svc-card__cta svg { transform: translateX(5px); }
.svc-card__glow { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--cyan), var(--blue)); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.svc-card:hover .svc-card__glow { transform: scaleX(1); }

/* ---------------- WHY ---------------- */
.section--why { background: var(--bg-alt); }
.why__in { display: grid; grid-template-columns: 0.92fr 1.3fr; gap: 64px; align-items: start; }
.why__aside { position: sticky; top: 110px; }
.why__title { font-size: var(--t-h2); margin: 18px 0 18px; }
.why__lead { color: var(--ink-soft); font-size: 18px; line-height: 1.65; max-width: 420px; }
.why__stats { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.why__stat { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; min-width: 120px; box-shadow: var(--sh-sm); }
.why__stat-v { font-family: var(--font-display); font-weight: 800; font-size: 32px; letter-spacing: -0.02em; }
.why__stat-l { font-size: 13px; color: var(--ink-soft); margin-top: 3px; }
.why__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.why__card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 26px 24px; transition: all .35s var(--ease); }
.why__card:hover { border-color: rgba(24,197,244,.5); box-shadow: var(--sh-md); transform: translateY(-4px); }
.why__ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: var(--blue); background: linear-gradient(135deg, rgba(24,197,244,.13), rgba(14,77,164,.08)); margin-bottom: 16px; transition: all .35s; }
.why__card:hover .why__ic { color: #fff; background: linear-gradient(135deg, var(--cyan), var(--blue)); }
.why__card-t { font-size: 18px; color: var(--navy); margin-bottom: 9px; }
.why__card-d { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; }

/* ---------------- ABOUT / TIMELINE ---------------- */
.section--about { position: relative; overflow: hidden; background: radial-gradient(120% 100% at 50% -10%, #0a2f70, var(--navy-deep) 55%); }
.about__grid { opacity: .6; }
.about__head { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; align-items: end; margin-bottom: 76px; }
.about__title { color: #fff; font-size: var(--t-h2); margin-top: 18px; }
.about__lead { color: var(--cyan-soft); font-size: 19px; line-height: 1.6; font-weight: 500; }
.about__body { color: #9fb4cf; font-size: 15.5px; line-height: 1.7; margin-top: 16px; }

.tl { position: relative; max-width: 940px; margin: 0 auto; padding: 10px 0; }
.tl__spine { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: rgba(91,216,248,.16); border-radius: 2px; }
.tl__fill { width: 100%; background: linear-gradient(var(--cyan), var(--blue)); border-radius: 2px; box-shadow: 0 0 12px rgba(24,197,244,.5); transition: height .15s linear; }
.tl__row { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 30px; min-height: 84px; align-items: center; }
.tl__card { grid-column: 1; text-align: right; padding-right: 52px; }
.tl__row--r .tl__card { grid-column: 2; text-align: left; padding-right: 0; padding-left: 52px; }
.tl__step { display: inline-block; font-size: 12px; color: var(--cyan); letter-spacing: .12em; margin-bottom: 6px; }
.tl__name { color: #fff; font-size: 21px; }
.tl__desc { color: #93a9c6; font-size: 14.5px; margin-top: 5px; line-height: 1.5; }
.tl__node { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px; border-radius: 50%; background: var(--navy-deep); border: 2px solid var(--cyan); box-shadow: 0 0 0 5px rgba(5,21,47,1), 0 0 14px rgba(24,197,244,.5); z-index: 2; }
.tl__node--final { width: 26px; height: 26px; background: var(--cyan); border-color: #fff; box-shadow: 0 0 0 6px rgba(5,21,47,1), 0 0 28px rgba(24,197,244,.9); }
.tl__node-pulse { position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--cyan); animation: tlpulse 2s var(--ease) infinite; }
@keyframes tlpulse { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }
.tl__row--final .tl__name { font-size: 30px; color: var(--cyan-soft); font-family: var(--font-display); font-weight: 800; }
.tl__row--final .tl__card { padding-top: 6px; }

@media (max-width: 980px) {
  .hero__in { grid-template-columns: 1fr; gap: 40px; }
  /* mobilde önce yazı, panel altta gelsin */
  .hero__visual { order: 2; }
  .why__in { grid-template-columns: 1fr; gap: 40px; } .why__aside { position: static; }
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .about__head { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 760px) {
  .svc-grid { grid-template-columns: 1fr; }
  .why__grid { grid-template-columns: 1fr; }
  .noc__body { grid-template-columns: 1fr; }
  .tl__spine { left: 18px; }
  .tl__row, .tl__row--r { grid-template-columns: 1fr; }
  .tl__card, .tl__row--r .tl__card { grid-column: 1; text-align: left; padding: 0 0 0 48px; }
  .tl__node, .tl__row .tl__node { left: 18px; }
}

/* ---- mobilde hero panelini sadeleştir (minimal) ---- */
@media (max-width: 600px) {
  .hero__visual { animation: none; }            /* sürekli float kapansın */
  /* NOC paneli: sadece başlık çubuğu + ana metrik + grafik kalsın */
  .noc__body { padding: 13px; gap: 12px; }
  .noc__side, .noc__topo-wrap, .noc__legend { display: none; }
  .noc__chart { height: 118px; }
  .noc__big { font-size: 30px; }
  /* Takımyıldız paneli: kompakt ve sade */
  .hconst { max-width: 320px; margin: 0 auto; }
  .hconst__node-desc { display: none; }
  .hconst__sweep { display: none; }
}