/* 03 · SULOOK ağı — deneme. Merkez bağlantıları, canlı paketler, nokta kartı,
   yeni nokta yerleştirme, servis bildirimi ve operasyon odasına geri çekilme. */
:root{--net-ink:var(--hero-deep);--net-line:var(--secondary);--net-glow:var(--primary-light);--net-brand:var(--primary-dark);--net-alert:#e8761a;--net-alert-strong:#b8560c;--net-alert-ink:#8a4210;--net-ok:#0c7f58}

/* ---------- layout ---------- */
.network-chapter{background:#fff}
.network-chapter .map-world{left:50%;top:55%;transform-origin:50% 50%}
.network-heading,.net-panel,.network-summary{opacity:var(--net-chrome,0)}
.network-chapter .network-heading>p:last-child{font-size:13px;line-height:1.5;color:var(--text-gray);max-width:310px}
@media(orientation:landscape) and (max-height:600px){.network-chapter .map-world{top:53%}}
@media(orientation:portrait){.network-chapter .map-world{width:150vw;left:50%;top:57%}}

/* ---------- links and packets (inside the tilted map camera) ---------- */
.net-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.net-link-glow{fill:none;stroke:var(--net-glow);stroke-width:10;stroke-linecap:round;opacity:.3}
.net-link{fill:none;stroke:var(--net-line);stroke-width:2.6;stroke-linecap:round;opacity:.9}
.net-link[data-alert=true]{stroke:var(--net-alert)}.net-link-glow[data-alert=true]{stroke:#ffc58f;opacity:.45}
.net-packet-halo{fill:var(--net-glow);opacity:.45}
.net-packet-dot{fill:#fff;stroke:var(--net-line);stroke-width:3}
.net-packet.is-sync .net-packet-halo{opacity:.22}.net-packet.is-sync .net-packet-dot{r:3.6px;fill:var(--net-line);stroke:none}
.net-packet.is-alert .net-packet-halo{fill:#ffbd7f;opacity:.65}.net-packet.is-alert .net-packet-dot{r:6.5px;stroke:var(--net-alert)}

/* ---------- flat anchor layers (projected by network-story.js) ---------- */
.net-anchors,.net-spots{position:absolute;inset:0;pointer-events:none}
.net-anchors{z-index:1}#map-points{z-index:2}.net-spots{z-index:3}

/* SULOOK Merkez */
.net-hub{position:absolute;width:0;height:0;transform:translate(var(--pin-x,0px),var(--pin-y,0px)) scale(var(--map-marker-scale,1));opacity:var(--hub,0)}
.net-hub-base{position:absolute;left:-36px;top:-12px;width:72px;height:24px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb, var(--secondary) 30.196%, transparent),color-mix(in srgb, var(--secondary) 0.000%, transparent))}
.net-hub-stem{position:absolute;left:-1px;bottom:0;width:2px;height:22px;background:linear-gradient(var(--primary-dark),color-mix(in srgb, var(--primary-dark) 0.000%, transparent))}
.net-hub-core,.net-hub-rings i{position:absolute;left:-27px;bottom:20px;width:54px;height:54px;border-radius:50%}
.net-hub-core{display:grid;place-items:center;background:#fff;border:2px solid var(--net-brand);box-shadow:0 8px 20px color-mix(in srgb, var(--hero-deep) 18.039%, transparent),0 0 0 5px color-mix(in srgb, var(--secondary) 7.843%, transparent);transition:border-color .3s,box-shadow .3s}
.net-hub-core img{display:block;width:32px;height:auto}
.net-hub-rings i{border:1.5px solid var(--net-line);opacity:0;animation:net-ring 3.4s cubic-bezier(.2,.6,.3,1) infinite}
.net-hub-rings i+i{animation-delay:1.7s}
@keyframes net-ring{0%{transform:scale(1);opacity:.5}100%{transform:scale(2.5);opacity:0}}
.net-hub-name{position:absolute;left:0;top:12px;transform:translateX(-50%);white-space:nowrap;padding:5px 10px;border-radius:20px;background:#fff;border:1px solid var(--brand-tint);box-shadow:0 4px 12px color-mix(in srgb, var(--primary-dark) 7.843%, transparent);font-size:11.5px;font-weight:600;color:var(--net-brand);transition:opacity .3s}
.net-hub.receive .net-hub-core{animation:net-hub-receive .6s ease}
@keyframes net-hub-receive{40%{transform:scale(1.12);box-shadow:0 8px 20px color-mix(in srgb, var(--hero-deep) 18.039%, transparent),0 0 0 10px color-mix(in srgb, var(--secondary) 18.039%, transparent)}}
.net-hub[data-alert=true] .net-hub-core{border-color:var(--net-alert);box-shadow:0 8px 20px #6b34092e,0 0 0 7px #e8761a2e}
.net-hub[data-alert=true] .net-hub-rings i{border-color:var(--net-alert)}

/* Points */
.network-chapter .map-point .point-name{font-size:11.5px;font-weight:600;color:var(--primary-dark);padding:4px 9px;gap:6px;opacity:1}
.network-chapter .point-name small{font-size:10.5px;color:var(--text-gray)}
.network-chapter[data-phase=phone] .point-name,.network-chapter[data-phase=screen] .point-name,.network-chapter[data-phase=phone] .net-hub-name,.network-chapter[data-phase=screen] .net-hub-name{opacity:0}
.point-ripple{position:absolute;left:50%;bottom:-8px;width:48px;height:17px;margin-left:-24px;border-radius:50%;border:2px solid var(--primary);opacity:0;pointer-events:none}
.map-point.filling .point-ripple{animation:net-ripple 1.15s ease-out}
.map-point.filling .point-pin{animation:net-pin-bump .5s ease}
@keyframes net-ripple{0%{opacity:.85;transform:scale(.5)}100%{opacity:0;transform:scale(2.3)}}
@keyframes net-pin-bump{40%{translate:0 -5px}}
.map-point.synced:before{animation:net-sync .9s ease}
@keyframes net-sync{40%{box-shadow:0 0 0 6px color-mix(in srgb, var(--primary-light) 18.824%, transparent),0 0 18px color-mix(in srgb, var(--primary-light) 33.333%, transparent)}}
.map-point[data-alert=true] .point-pin{filter:drop-shadow(0 0 10px #ff9d4a) drop-shadow(-3px 5px 4px #7a3a0a30)}
.map-point[data-alert=true]:before{background:#e8761a35;box-shadow:0 0 0 6px #e8761a1f,0 0 22px #ff9d4a60}
.map-point[data-alert=true] .point-ripple{border-color:var(--net-alert)}
.map-point.is-dropping .point-pin{opacity:0}
.map-point.is-dropping .point-product{opacity:1;animation:net-drop .8s cubic-bezier(.3,1.35,.45,1) both}
.map-point.is-dropping:before{animation:net-land .9s ease .45s both}
.map-point.is-dropping .point-name{color:var(--text-gray);border-style:dashed}
.map-point.is-online .point-name{border-color:#9fdcc5}
@keyframes net-drop{0%{opacity:0;transform:translateX(-50%) translateY(-120px)}60%{opacity:1;transform:translateX(-50%) translateY(0)}78%{transform:translateX(-50%) translateY(-10px)}100%{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes net-land{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--primary) 0.000%, transparent)}40%{box-shadow:0 0 0 10px color-mix(in srgb, var(--primary) 21.961%, transparent)}100%{box-shadow:0 0 0 20px color-mix(in srgb, var(--primary) 0.000%, transparent)}}

/* Candidate places for a new point */
.net-spot{position:absolute;width:0;height:0;padding:0;border:0;background:none;pointer-events:auto;cursor:pointer;color:var(--net-brand);transform:translate(var(--pin-x,0px),var(--pin-y,0px)) scale(var(--map-marker-scale,1));opacity:var(--spot-opacity,0)}
.net-spot[inert]{pointer-events:none}
.net-spot-ring{position:absolute;left:-30px;top:-12px;width:60px;height:24px;border-radius:50%;border:2px dashed var(--primary);background:color-mix(in srgb, var(--primary) 7.843%, transparent);animation:net-spot 2.2s ease-in-out infinite}
.net-spot-plus{position:absolute;left:-19px;top:-60px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1.5px solid var(--primary-light);box-shadow:0 8px 18px color-mix(in srgb, var(--primary-dark) 14.902%, transparent);font-size:23px;line-height:1;color:var(--net-brand);transition:transform .25s,background .25s,color .25s,border-color .25s;animation:net-float 2.2s ease-in-out infinite}
.net-spot-name{position:absolute;left:0;top:17px;transform:translateX(-50%);white-space:nowrap;padding:4px 9px;border-radius:20px;background:#ffffffef;border:1px dashed var(--primary-light);font-size:11.5px;font-weight:500;color:var(--primary-dark)}
.net-spot:hover .net-spot-plus,.net-spot:focus-visible .net-spot-plus{background:var(--net-brand);border-color:var(--net-brand);color:#fff;transform:scale(1.1)}
.net-spot:focus-visible{outline:none}.net-spot:focus-visible .net-spot-ring{outline:3px solid var(--secondary);outline-offset:6px}
@keyframes net-spot{50%{transform:scale(1.14);background:color-mix(in srgb, var(--primary) 14.902%, transparent)}}
@keyframes net-float{50%{translate:0 -4px}}

/* Service notification above İş Merkezi */
.net-alert{position:absolute;z-index:4;display:flex;align-items:center;gap:7px;white-space:nowrap;padding:5px 11px 5px 5px;border-radius:20px;background:#fff;border:1px solid #f2c197;box-shadow:0 8px 20px #8a42101f;color:var(--net-alert-ink);font-size:12px;font-weight:600;pointer-events:none;transform-origin:100% 50%;transform:translate(var(--pin-x,0px),var(--pin-y,0px)) translate(calc(-100% - 34px),-62px) scale(calc(var(--map-marker-scale,1)*(.85 + var(--alert,0)*.15)));opacity:var(--alert,0)}
.net-alert span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--net-alert-strong);color:#fff;font-size:12px;font-weight:700}
.network-chapter[data-phase=screen] .net-alert{font-size:15px}

/* ---------- phone state: "Noktalarım" ---------- */
.net-phone-bar{position:absolute;z-index:7;left:0;top:0;box-sizing:border-box;display:flex;flex-direction:column;gap:.3em;pointer-events:none;opacity:0;color:var(--hero-deep);background:linear-gradient(#fffffff7 58%,#fff0)}
.net-phone-bar strong{font-size:1.5em;font-weight:650;letter-spacing:-.03em;line-height:1.1}
.net-phone-bar span{display:flex;align-items:center;gap:.45em;font-size:.82em;font-weight:500;color:var(--net-ok)}

/* ---------- network summary panel ---------- */
.net-panel{position:absolute;z-index:6;top:calc(var(--header-height) + 22px);right:var(--side);width:330px;padding:15px 16px 12px;border-radius:16px;background:#fffffff5;border:1px solid var(--brand-tint);box-shadow:0 8px 30px color-mix(in srgb, var(--primary-dark) 7.843%, transparent);backdrop-filter:blur(14px);color:var(--net-ink)}
.net-panel-head{display:flex;align-items:center;gap:8px;padding-bottom:11px;border-bottom:1px solid var(--bg-gray);font-size:12.5px;font-weight:600;color:var(--text-dark)}
.net-panel-head .revenue-live{width:9px;height:9px}
.net-panel-alert{margin-left:auto;padding:3px 8px;border-radius:12px;background:#fff1e4;color:var(--net-alert-ink);font-size:11px;font-weight:600}
.net-stats{display:grid;grid-template-columns:.9fr 1fr 1.25fr;margin-top:11px}
.net-stats>div{min-width:0;padding:0 12px}.net-stats>div:first-child{padding-left:0}.net-stats>div+div{border-left:1px solid var(--bg-gray)}
.net-stats p{margin:0 0 5px;font-size:11.5px;color:var(--text-gray)}
.net-stats strong{display:flex;align-items:baseline;font-size:27px;font-weight:600;letter-spacing:-.05em;line-height:1.05;color:var(--text-dark);font-variant-numeric:tabular-nums;white-space:nowrap}
.net-stats strong small{margin-left:1px;font-size:15px;letter-spacing:-.02em;color:var(--text-gray)}
.net-stats strong>span{margin-right:1px;font-size:.86em}
.net-note{margin:11px 0 0;padding-top:9px;border-top:1px solid var(--bg-gray);font-size:11px;line-height:1.4;color:var(--text-gray)}
.net-panel.receive{animation:net-panel .7s ease}
@keyframes net-panel{35%{border-color:var(--primary-light);box-shadow:0 0 0 3px color-mix(in srgb, var(--primary-light) 7.843%, transparent),0 8px 30px color-mix(in srgb, var(--primary) 14.118%, transparent)}}

/* ---------- bottom row: place-a-point hint ---------- */
.network-chapter .network-summary{align-items:center;pointer-events:none}
.network-chapter .network-summary>span:last-child{font-size:11px;color:var(--text-gray)}
.net-hint{pointer-events:auto;display:inline-flex;align-items:center;gap:10px;padding:7px 15px 7px 7px;border-radius:30px;border:1px solid var(--brand-tint);background:#fff;box-shadow:0 6px 18px color-mix(in srgb, var(--primary-dark) 7.843%, transparent);color:var(--primary-dark);font-size:12.5px;font-weight:500;opacity:var(--hint,0);transition:border-color .2s}
.net-hint[inert]{pointer-events:none}
.net-hint-plus{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--net-brand);color:#fff;font-size:18px;line-height:1}
.net-hint:disabled{cursor:default}.net-hint:disabled .net-hint-plus{background:var(--net-ok)}
.net-hint:not(:disabled):hover{border-color:var(--primary-light)}

/* ---------- point status card ---------- */
#map-popup.net-card{width:300px;padding:14px 15px 10px}
.net-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-bottom:9px;border-bottom:1px solid var(--bg-gray)}
.net-card-head p{margin:0 0 3px;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-gray)}
.net-card-head h3{margin:0;font-size:19px;font-weight:600;letter-spacing:-.03em;color:var(--text-dark)}
#map-popup.net-card .map-popup-close{margin:-5px -7px 0 0;width:34px;height:34px;font-size:22px;color:var(--text-gray)}
.net-card-status{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:11.5px;font-weight:500;color:var(--net-ok)}
.net-card-status i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px color-mix(in srgb, var(--success) 13.333%, transparent)}
.net-card-status span:last-child{margin-left:auto;font-weight:400;color:var(--text-gray);white-space:nowrap}
.net-card-status[data-state=alert]{color:var(--net-alert-ink)}.net-card-status[data-state=alert] i{background:var(--net-alert);box-shadow:0 0 0 3px #e8761a2e}
.net-card-status[data-state=connecting]{color:var(--text-gray)}.net-card-status[data-state=connecting] i{background:var(--text-muted);animation:net-blink 1s infinite}
@keyframes net-blink{50%{opacity:.3}}
#map-popup.net-card .revenue-stats{margin-top:10px}
#map-popup.net-card .revenue-label{font-size:11px;color:var(--text-gray)}
#map-popup.net-card .revenue-trend{font-size:11px;color:var(--net-ok)}
.net-sensors{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 2px;padding:0}
.net-sensors li{display:flex;align-items:center;gap:5px;padding:4px 8px;border-radius:12px;background:var(--bg-gray);font-size:11px;color:var(--primary-dark)}
.net-sensors li:before{content:'✓';font-size:10px;font-weight:700;color:var(--net-ok)}
#map-popup.net-card .map-live-foot{font-size:11px;color:var(--text-gray);padding-top:8px}
#map-popup.net-card .map-live-foot>span:first-child{color:var(--primary-dark)}
#map-popup.net-card[data-sheet=true]{left:12px;right:12px;top:auto;bottom:14px;width:auto;max-width:440px;margin:0 auto}
#map-popup.net-card[data-sheet=true]:before{display:none}

/* ---------- operations room: two planes for the pull-back ---------- */
.service-chapter .service-room{position:absolute;left:0;top:0;width:1672px;height:941px;max-width:none;transform-origin:0 0;will-change:transform;pointer-events:none;user-select:none}
.service-chapter .room-fg{z-index:1}
.service-chapter .service-copy{z-index:3}
.room-alert{position:absolute;left:0;top:0;z-index:12;display:flex;align-items:center;gap:10px;padding:9px 14px 9px 9px;border-radius:13px;background:#fffffff4;border:1px solid #f1c8a3;box-shadow:0 12px 30px #6b340a1f;backdrop-filter:blur(10px);opacity:0;pointer-events:none;will-change:transform,opacity}
.room-alert-icon{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:9px;background:var(--net-alert-strong);color:#fff;font-size:15px;font-weight:700}
.room-alert small{display:block;margin-bottom:2px;font-size:10px;font-weight:600;letter-spacing:.07em;color:#9a5418}
.room-alert strong{display:block;font-size:13px;font-weight:600;color:#2e1d10}

/* ---------- portrait ---------- */
@media(orientation:portrait){
 .net-panel{top:auto;bottom:70px;left:16px;right:16px;width:auto;padding:10px 13px 9px;border-radius:14px}
 .net-panel-head{font-size:11.5px;padding-bottom:8px}
 .net-stats{margin-top:8px}.net-stats p{margin-bottom:3px;font-size:11px}.net-stats strong{font-size:21px}.net-stats strong small{font-size:13px}
 .net-note{margin-top:8px;padding-top:7px}
 .network-chapter .network-summary{bottom:18px}
 .network-chapter .network-summary>span:last-child{display:none}
 .net-hint{font-size:12px;padding:6px 13px 6px 6px}
 .network-chapter .network-heading>p:last-child{font-size:12.5px;max-width:300px}
 .network-chapter .map-point .point-name{font-size:10.5px;padding:3px 7px;opacity:0;transition:opacity .25s}
 .network-chapter .map-point[aria-expanded=true] .point-name,.network-chapter .map-point.is-dropping .point-name{opacity:1}
 .net-spot-name{display:none}
 .network-chapter .point-name small{font-size:10px}
 .net-hub-core,.net-hub-rings i{left:-22px;bottom:17px;width:44px;height:44px}.net-hub-core img{width:26px}.net-hub-stem{height:18px}
 .net-hub-name{font-size:10.5px;padding:4px 8px}
 .net-spot-plus{left:-16px;top:-52px;width:32px;height:32px;font-size:20px}.net-spot-name{font-size:10.5px}
 .net-alert{font-size:11px;transform:translate(var(--pin-x,0px),var(--pin-y,0px)) translate(calc(-100% - 28px),-52px) scale(calc(var(--map-marker-scale,1)*(.85 + var(--alert,0)*.15)))}
 .room-alert{padding:7px 11px 7px 7px}.room-alert strong{font-size:12px}.room-alert small{font-size:10px}
}
@media(orientation:landscape) and (max-height:600px){
 .net-panel{top:calc(var(--header-height) + 10px);width:250px;padding:9px 11px 7px}.net-panel-head{font-size:11px;padding-bottom:7px}.net-stats{margin-top:7px}.net-stats p{font-size:11px;margin-bottom:2px}.net-stats strong{font-size:19px}.net-stats strong small{font-size:12px}.net-note{display:none}
 .network-chapter .network-summary{bottom:12px}.net-hint{font-size:11.5px;padding:5px 12px 5px 5px}.net-hint-plus{width:24px;height:24px}
 .network-chapter .network-heading>p:last-child{font-size:11px;max-width:230px}
 .network-chapter .map-point .point-name{opacity:0;transition:opacity .25s}.network-chapter .map-point[aria-expanded=true] .point-name,.network-chapter .map-point.is-dropping .point-name{opacity:1}
 .net-spot-name,.net-hub-name{display:none}
 #map-popup.net-card{width:270px;padding:10px 12px 8px}.net-sensors,#map-popup.net-card .map-live-foot{display:none}
}

@media(prefers-reduced-motion:reduce){.net-hub-rings i,.net-spot-ring,.net-spot-plus,.map-point.filling .point-ripple,.map-point.filling .point-pin,.map-point.synced:before,.map-point.is-dropping .point-product,.map-point.is-dropping:before,.net-panel.receive,.net-hub.receive .net-hub-core{animation:none}}

/* Every fill launches a gold reward; the total responds on packet arrival. */
.point-earning{position:absolute;z-index:6;left:50%;bottom:calc(100% - 10px);transform:translateX(-50%) translate(var(--depth-x,0px),var(--depth-y,0px)) translateY(var(--reward-offset,0px));pointer-events:none;user-select:none}
.point-earning-burst{display:flex;align-items:center;gap:3.75px;opacity:0;transform-origin:50% 100%;filter:drop-shadow(0 4px 5px #b67a2030)}
.point-earning-plus{font-size:23.25px;font-weight:700;line-height:1;color:#d7981d;text-shadow:0 1px #fff3b2,1px 0 #fff3b2,-1px 0 #fff3b2,0 -1px #fff3b2}
.point-earning-coin{position:relative;display:grid;place-items:center;width:25.5px;height:25.5px;border:1.05px solid #b5740c;border-radius:50%;background:linear-gradient(135deg,#fff5b7 0%,#ffdb66 32%,#f4b832 64%,#ce8a14 100%);box-shadow:inset 0 0 0 1.5px #fff0a0,inset 0 0 0 2.625px #b8781259,2.25px 1.5px 0 #aa630e;font-family:Outfit,sans-serif;font-size:18px;line-height:1;font-weight:650;color:#a96c10;text-shadow:-.6px -.8px #fff3ac;rotate:-12deg}
.point-earning-coin:after{content:'';position:absolute;inset:3px;border-radius:50%;border-top:1px solid #fff9d0;border-left:1px solid #fff0a06b;pointer-events:none}
.map-point[data-product=true] .point-earning{bottom:126px}
.map-point.filling .point-earning-burst{animation:net-gold-rise 2.35s both}
@keyframes net-gold-rise{
 0%{opacity:0;transform:translateY(12px) scale(.62);animation-timing-function:cubic-bezier(.15,.8,.25,1)}
 12%{opacity:1;transform:translateY(calc(var(--reward-lift,70px) * -.286)) scale(1.08);animation-timing-function:cubic-bezier(.12,.74,.22,1)}
 48%{opacity:1;transform:translateY(calc(var(--reward-lift,70px) * -.886)) scale(1);animation-timing-function:ease-out}
 68%{opacity:1;transform:translateY(calc(var(--reward-lift,70px) * -.957)) scale(1);animation-timing-function:ease-in}
 100%{opacity:0;transform:translateY(calc(var(--reward-lift,70px) * -1)) scale(.96)}
}
.net-income-value{transform-origin:55% 65%}
.net-panel.receive .net-income-value{animation:net-income-pop .78s cubic-bezier(.2,.7,.2,1)}
@keyframes net-income-pop{0%,100%{transform:scale(1);color:var(--text-dark)}27%{transform:scale(1.18);color:#b47a11}60%{transform:scale(1.045);color:#8c621a}}
.network-chapter[data-visible=false] .point-earning-burst,.network-chapter[data-visible=false] .net-income-value{animation-play-state:paused}
@media(orientation:portrait){.map-point[data-product=true] .point-earning{bottom:104px}}
@media(orientation:landscape) and (max-height:600px){.map-point[data-product=true] .point-earning{bottom:98px}}
@media(prefers-reduced-motion:reduce){
 .map-point.filling .point-earning-burst{animation:net-gold-fade 1.5s both}
 .net-panel.receive .net-income-value{animation:net-income-color .78s ease}
}
@keyframes net-gold-fade{0%,100%{opacity:0}15%,65%{opacity:1}}
@keyframes net-income-color{0%,100%{color:var(--text-dark)}35%{color:#b47a11}}